XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Sidebarlänge dem Content anpassen?! (http://xhtmlforum.de/showthread.php?t=39151)

Pumpkin 14.03.2006 17:34

Sidebarlänge dem Content anpassen?!
 
Hallo,

ich möchte das die beiden sidebars (orange) immer die selbe länge wie der content (grün) haben. Irgendwie hab ich aber keinen schimmer wie ich das realisiere?! :oops:

http://shenmue-saga.com/test/index.html

CSS
Code:

* {
        margin:0;
        padding:0;
}

body {
        font-family:verdana,arial,helvetica,sans-serif;
        font-size:0.7em;
        color:#000;
        background:#000 url(../design/bg.jpg) repeat;
}

#wrap {
        margin:auto;
        width:780px;
        min-height:100%;
        text-align:left;
        background:#000 url(../design/bg.jpg) repeat;
}

#header ul {
        float:left;
        list-style:none;
        height:115px;
        width:780px;
        text-align:right;
        background:#000 url(../design/header.gif);
}

#header ul li a {
        color:#daa520;
        width:90px;
        margin:0 10px;
}

#header ul li a:hover {
        color:#e0e0e0;
}

.left {
        float:left;
}

.right {
        float:right;
}

.navigation, .left, .right {
        text-align:center;
        font-weight:bold;
        color:#c00;
        height:20px;
        width:130px;
        background:#000 url(../design/navigation.gif);
}

#left_sidebar, #right_sidebar {
        width:130px;
        background:#edaf44 url(../design/cellpic.gif) repeat-x;
}

#left_sidebar {
        float:left;
}

#right_sidebar {
        float:right;
}

#content {
        float:right;
        width:520px;
        text-align:justify;
        marg in:0 10px;
        background:#daf999 url(../design/content_bg.gif) repeat-x;
}

#content p {
        margin-bottom:1em;
}

#footer {
        height:107px;
        color:#fff;
        text-align:center;
        background:#000 url(../design/footer.gif) repeat-x;
        clear:both;
}

.footer {
        color:#c00;
}

#navi ul {
        float:left;
        list-style:none;
        height:20px;
        width:520px;
        background:#e0e0e0 url(../design/button_bg.gif);
}

#navi ul li, #header ul li {
        display:inline;
}

#navi ul li a {
        float:left;
        text-align:center;
        font-size:11px;
        color:#000;
        height:20px;
        width:90px;
        background:#e0e0e0 url(../design/button.gif);
}

#navi ul li a:hover {
        color:#c00;
        background:#e0e0e0 url(../design/button_hover.gif);
}

.menue {
        width:110px;
        margin:2px 10px;
        text-align:center;
}

.menue ul {
        list-style: none;
        color:#fff;
        font-family:verdana, arial, helvetica, sans-serif;
}

.menue ul li {
        display:block;
}

.menue ul li a {
        color:#fff;
}

.menue ul li a:hover {
        color:#e0e0e0;
}

#w3c {
        padding:10px;
}

#w3c a:link, a:visited, a:active, a:hover {
        color:#c00;
        font-size:10px;
}

.w3c {
        color:#c00;
        padding-bottom:5px;
}

a:link, a:visited, a:active, a:hover {
        text-decoration:none;
        font-weight:bold;
        font-size:10px;
        color:#daa520;
}

a:hover {
        color:#e0e0e0;
}

.h1_title {
        padding:15px 0 0 0;
        font-size:20px;
}

.h2_title {
        font-size:11px;
        padding:0 0 25px 0;
}

HTML
Code:

<body>
        <div id="wrap">
                <div id="header">
                        <ul class="navlist">
                                [*]about us
                                [*]contact
                                [*]link us
                                [*]impressum
                        [/list]                </div>
                <p class="left">STARWARS</p>
                <p class="right">STARWARS</p>
                <div id="navi">
                        <ul class="navlist">
                                [*]Home
                                [*]Community
                        [/list]                </div>
                <div id="left_sidebar">
                <div class="menue">
                        <ul class="menuelist">
                                [*]LINK
                                [*]LINK
                                [*]LINK
                                [*]LINK
                                [*]LINK
                        [/list]                </div>
                <p class="navigation">STARWARS</p>
                <div class="menue">
                        <ul class="menuelist">
                                [*]LINK
                                [*]LINK
                                [*]LINK
                                [*]LINK
                                [*]LINK
                        [/list]                </div>
                <div id="w3c">
                <p class="w3c">Letzte Änderung: 01.03.2006</p>
               

XHTML 1.0 Strict</p>
                CSS 2.1
                </div>
                </div>
                <div id="right_sidebar">
                <div class="menue">
                        <ul class="menuelist">
                                [*]LINK
                                [*]LINK
                                [*]LINK
                                [*]LINK
                                [*]LINK
                        [/list]                </div>
                <p class="navigation">STARWARS</p>
                <div class="menue">
                        <ul class="menuelist">
                                [*]LINK
                                [*]LINK
                                [*]LINK
                                [*]LINK
                                [*]LINK
                        [/list]                </div>
                </div> 
                <div id="content">
                        <h1 class="h1_title">STAR WARS-RPG.DE [Darth Sidious]</h1>
                        <h2 class="h2_title">Die STAR WARS Rollenspiel Fanpage!</h2>



               

INHALT</p>
 


                </div>
                <div id="footer">
                       

Powered &amp; Designed by <strong class="footer">STARWARS-rpg.de[/b] 2006</p>
                </div>
        </div>
</body>


mazzo 14.03.2006 17:54

Du brauchst "faux columns", Du findest haufenweise dazu in der Suche. ODer gleich in den FAQs des oben verlinkten XHTML-wiki.

Pumpkin 14.03.2006 18:21

Danke für den Tip. Aber mit einer Grafik zu tricksen ist eigentlich nicht mein ding. Habs nun anders gelöst, was den selben effekt hat:

#wrap {
background:edaf44;
}

Da meine HP auf eine max. breite von 780px beschränkt ist, musste ich einfach nur die Hintergrundfarbe der HP ändern. Dies wird über #wrap bei mir getan.


Alle Zeitangaben in WEZ +2. Es ist jetzt 15:20 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023