Autor Zpráva
AM_
Profil
-problém vyřešen-

Zdravím,
snažím se udělat jednoduchý dvousloupcový gumový layout (vlevo menu fixní velikosti, vpravo obsah doplňující přes celou stránku) a narážím na problém:
http://beta.amniverse.net/
pokud je obsah stránky prostý text bez blokových elementů, vše je jak má, text se zobrazí vedle menu.

pokud ale do obsahu <div id="content"> vložím jakýkoli blokový element, content se začne vykreslovat až pod menu (což je pochopitelně špatně:
http://beta.amniverse.net/homepage/blockcontent/

Kód stránky:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <vynechávám pro stručnost>
</head>

<body>
    <div id="titlebg"><div id="title">&nbsp;</div></div>
    <div id="menu">
        <div class="footer">&nbsp;</div>
    </div>
    <div id="content">

Aloha        <div class="footer"><div class="leftcorner">&nbsp;</div>;</div>
    </div>
</body>


CSS:
div {
    margin:0px;
}
#title {
    background: black url('../img/title.jpg') left top no-repeat;
    float:left;
    width:793px;
    height:111px;
    padding:0px;
}
#titlebg {
    background: black url('../img/titlebg.png') left top repeat-x;
    height:111px;
    padding:0px;
}
#menu {
    float:left;
    width:192px;
    background: #5f0000 url('../img/menubg.png') left top repeat-y;
    margin-left:12px;
}
#menu .footer {
    background: #5f0000 url('../img/menufooter.png') left top no-repeat;
    width:192px;
    height:12px;
}
#content {
    background: #fff url('../img/contentbg.png') left top repeat-y;
    margin-left:204px;
}
#content .footer{
    background: #fff url('../img/footbg.png') left bottom repeat-x;
    height:19px;
}
#content .footer .leftcorner {
    background: #fff url('../img/footleft.png') left bottom no-repeat;
    width:19px;
    height:19px;
}


Omlouvám se za hloupý dotaz, kdybych si s tím další dvě hodiny hrál asi bych na to přišel, ale věřím, že pro někoho v CSS zkušeného bude hračka poradit mi, co z toho mám blbě. Děkuji.
mattyZEM
Profil
hoď #content-u float:right;
AM_
Profil
Díky, to bohužel nepomohlo (když tam pak zase blokový element není, hodí to content úplně doprava), ale vymyslel jsem to jinak:
#contentaround {
    background: #fff url('../img/contentbg.png') left top repeat-y;
    margin-left:204px;
}
#content {
    float:left;
}
#contentaround .footer{
    background: #fff url('../img/footbg.png') left bottom repeat-x;
    height:19px;
}
#contentaround .footer .leftcorner {
    background: #fff url('../img/footleft.png') left bottom no-repeat;
    width:19px;
    height:19px;
    float:left;
}


    <div id="contentaround">
        <div id="content">
            {include #content}
            
        </div>
        <div class="footer" style="clear:both"><div class="leftcorner">&nbsp;</div>;</div>
    </div>

Bere to opera, firefox, a dokonce i IE6 :) takže vyřešeno.

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0