[CSS] menu kompacter ?

[Apolloc]

Hoi mensen,

ik vroeg mij af of het onderstaande nog kompacter kan zonder dat het de layout
natuurlijk verandert, werkt tot nu toe in FireFox 0.9.2, Opera 7.53 en IE6.

code:

<style type="text/css">
body{
    margin:0px;
}
#hor-nav{
    top:1px;
    left:-39px;
    width:inherit;
    position:absolute;
}
#hor-nav li{ 
    float:left;
    width:100px;
    text-align: center;
    list-style-type:none;
    border:1px solid black;
    margin:0px 1px 1px 0px;
}
#hor-nav a{
    display:block;
    width:100%;
    color:#333333;
    text-decoration:none;
    background-color:#ADCAE1;
}
#hor-nav a:hover{
    background-color:#C4E4FF;
}
</style>

<ul id="hor-nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Solutions</a></li>
    <li><a href="#">Support</a></li>
    <li><a href="#">Contact</a></li>
</ul>

[We Are Borg]

Je kan soms die px weglaten, maar ik heb af en toe gelezen dat het ook weer problemen kan veroorzaken. Even testen dus

code:

    color:#333333;

Kan ook korter door slechts #333 te gebruiken

[ Voor 28% gewijzigd door We Are Borg op 29-07-2004 17:36 ]

[Verwijderd]

'px' mag je weglaten bij '0'. Dus bijvoorbeeld: 'margin:0 2px 0 200px'. Er kan wellicht wel iets "beter". Momenteel heb je een id 'hor-nav' wat waarschijnlijk staat voor "Horizontale navigatie" wat presentatie aangeeft (hij zou best verticaal kunnen zijn).

[Apolloc]

Bedankt, dat van die px bij 0 weglaten was me nog niet bekent, scheelt toch weer ^^

nav-hor staat inderdaad voor horizontale navigatie, door enkel de float:left weg te
halen wordt het een verticaal menu ^^

[Verwijderd]

daarom is dat id een beetje loos, beter zou zijn iets als mainMenu ofzo, dat beschrijft meer wat het is

[Apolloc]

We hebben der maar enkel 'nav' van gemaakt.

[drm]

Apolloc:
Bedankt, dat van die px bij 0 weglaten was me nog niet bekent, scheelt toch weer ^^

offtopic:
't Is ook erg logisch: 0 µm 0 cm = 0 m = 0 km = .... gewoon 0.

nav-hor staat inderdaad voor horizontale navigatie, door enkel de float:left weg te
halen wordt het een verticaal menu ^^

Dat geeft meteen duidelijk aan dat het heel gek is om die id dan te laten vertellen dat het een horizontale navigatie is, want als je de float weghaalt is het dat niet meer

^{[/mosterd-na-de-maaltijd]}

[Mercarra]

Ik zie vandaag een paar topics langskomen over het verkleinen van je code, en hierdoor bandbreedte te sparen. Is het niet veel nuttiger om bv de afbeeldingen op je site beter te optimaliseren? Ik bedoel, dat je tabels vervangt door mooie css ok, maar om nu te gaan mieren over een px teveel enzo... dat lijkt me wat ver gezocht.

Misschien heb ik het mis?

[Verwijderd]

Ik denk dat zoiets meer een leerproces is. Als hij/zij echt bandbreedte wilde besparen had hij/zij alles achter elkaar kunnen zetten zonder spaties ';' alleen gebruiken om declaraties te scheiden en niet gebruiken achter de laatste declaratie et cetera.

Verder werd het hem ook gelijk duidelijk gemaakt dat 'hor-nav' nou niet echt een goede naam is. Wellicht wordt daar in het vervolg nu op gelet.[/blaat]

[Apolloc]

Het is zeker een leer proces voor mij ( een hij ^^ ) ben de laatste tijd wat meer aan het verdiepen in css en omtrent, feit dat ik nu ineens met een zo klein dog overzichtelijk code zit te spelen komt naar aanleiding van de bandbreedte post. tis een 'probleem' van mij dat ik alles wat nieuw voor me is meteen wil proberen meestel zijn dat dus tig dingen tegelijk door elkaar heen wat natuurlijk niet echt goed is voor het leer proces gezien je zo maar steeds een beetje van alles leert.

[ Voor 3% gewijzigd door Apolloc op 29-07-2004 18:40 ]