CSS dynamisch layout

[Verwijderd]

Ok. Ik heb een table :

code:

<table width="100%"  border="0" cellspacing="1" cellpadding="1">
  <tr>
    <td width="211">&nbsp;</td>
    <td width="14">&nbsp;</td>
    <td>&nbsp;</td>
    <td width="14">&nbsp;</td>
    <td width="182">&nbsp;</td>
  </tr>
</table>

Nu wil ik deze graag omzetten naar CSS. Alles behalve 1 column is vast. Nu heb ik dit als css

code:

body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}

#header{
    width:100%;
    height:64px;
    border-bottom: 6px solid #eaeff3; 
    background-color: #000000;  
}

#logo{
    background-repeat: no-repeat;
    width:211px;
    height:64px;
    float:left;
    background-color: #99FF33;
}

#logo span{
    display:none;
}

#header #spacer_14px{
    width:14px;
    height:64px;
    background-color: #0000FF;
    float:left;
}


#slogan_container
{
    width:58%;
    height:64px;
    float:left; 
}


#slogan{
    height:64px;
    width:329px;
    background-color: #CC99CC;
}

#slogan span{
    display:none;
}

#flags{
    height:64px;
    width:182px;
    background-color: #996666;
    float:left; 
}

en html :

code:

<div id="header">

    <div id='logo'>
        <span><strong>Logo</strong></span>
    </div>
    
    <div id='spacer_14px'></div>
    
    <div id='slogan_container'> 
        <div id='slogan'>
            <span><i>Slogan</i></span>
        </div>
    </div>
    
    <div id='spacer_14px'></div>
    <div id='flags'></div>
</div>

Bedoeling is dus dat alle ruimte voor slogan_container gereserveerd wordt. Nu lukt dit wel als ik mijn venster gemaximaliseerd heb op 1024x768, maar als ik de window resize gaat het helemaal mis. Voorbeeld heb ik hier staan : http://www.leihitu.nl/downloads/css/

Kan iemand mij hiermee helpen?

[FireWood]

code:

#flags{
    height:64px;
    width:182px;
    background-color: #996666;
    float:left;

Je lijnt hier links uit terwijl het helemaal rechts moet staan. Nu krijg ik een strook aan de rechterkant waarmee je niks doet. Je moet dit rechts uitlijnen. idem als de spacer.

Je krijgt dan dat het middenvlak sizable is.

[Reinier]

Ik heb het niet helemaal bekeken, maar je hebt meerdere div's met hetzelfde id. Dag mag niet.

[faabman]

je gebruikt de ID spacer_14px dubbel...
je kunt het visuele effect wat door die spacers ontstaat ook vervangen door een border van de andere divjes...

[Bram77]

Zet <NOBR></NOBR> om al je DIV's. Volgensmij werkt dat.

[SchizoDuckie]

Bram77 schreef op 27 september 2004 @ 13:50:
Zet <NOBR></NOBR> om al je DIV's. Volgensmij werkt dat.

Alsjeblieft . wil je dan gewoon NIETS posten!

[Rickets]

Je wilt zoiets als dit: http://glish.com/css/7.asp
Nog meer op http://css-discuss.incutio.com/

Bram77 schreef op 27 september 2004 @ 13:50:
Zet <NOBR></NOBR> om al je DIV's. Volgensmij werkt dat.

Leuke "oplossing"

[Verwijderd]

ok ... ik heb nu als css

code:

body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}

#header{
    width:100%;
    height:64px;
    border-bottom: 6px solid #eaeff3; 
    background-color: #000000;  
}

#left{
    background-repeat: no-repeat;
    width:211px;
    height:64px;
    float:left;
    background-color: #99FF33;
}


#slogan_container
{
    height:64px;
    float:left; 
}


#slogan{
    width:329px;
    background-color: #CC99CC;
    margin:5px;
}

#right{
    height:64px;
    width:182px;
    background-color: #996666;
    float:right;    
}

en html

code:

<div id="header">

    <div id='left'>
        <span><strong>Logo</strong></span>
    </div>
    
    <div id='right'>right</div> 
    
    <div id='slogan_container'> 
        <div id='slogan'>
            <span><i>Slogan</i></span>
        </div>
    </div>
    

</div>

Voorbeeld is te zien op

http://www.leihitu.nl/downloads/css/

Wat is nu het probleem? Als de venster gemaximaliseerd is, dan gaat het goed. Het middenstuk (zwart achtergrond) vult gewoon op. Maar als ik de venster resize en het "right" komt tegen "slogan" aan dan gaat het "slogan" stukje opeens naar beneden. dit wil ik eigenlijk niet. Een tabel zou dit niet doen.

Heeft iemand een oplossing hiervoor?

[curry684]

Bram77 schreef op 27 september 2004 @ 13:50:
Zet om al je DIV's. Volgensmij werkt dat.

Omg ik moest die tag echt opzoeken omdat ik 'm niet herkende, uiteindelijk hier gevonden:

quote: http://www.devguru.com/Te...kref/html_other_tags.html

These tags are not recognized by the W3C HTML version 4.01 standard.

Lijkt me dus niet echt interessant daar topicstarter zo te zien z'n best aan het doen is om nette XHTML te schrijven