wie gehts schöner/besser?

AliceD · 06.09.2005, 08:51

moin board,

ich hab mehrere Links, um vom design her größt mögliche flexibilität zu gewährleisten (css) erstell ich diese folgender maßen.

Code:

[...]
<div class="l6">[img]/gfx/spacer.gif[/img]<span>Gallery</span></div>
			<div class="seperator"><span class="l">|</span></div>
			<div class="l7">[img]/gfx/spacer.gif[/img]<span>Server</span></div>
			<div class="seperator"><span class="l">|</span></div>
			<div class="l8">[img]/gfx/spacer.gif[/img]<span>Forum</span></div>
			<div class="seperator"><span class="l">|</span></div>
			<div class="l9">[img]/gfx/spacer.gif[/img]<span>Partner</span></div>
[...]

/* css */

Code:

#menu .l6 span, #menu .l7 span, #menu .l8 span, #menu .l9 span{display:none;}
#menu .seperator span{ visibility:hidden;}

#menu .l6{ background-image: url(/gfx/gallery.jpg); width:52px; height:34px;}
#menu .l7{ background-image: url(/gfx/server.jpg); width:45px; height:34px;}
#menu .l8{ background-image: url(/gfx/forum.jpg); width:40px; height:34px;}
#menu .l9{ background-image: url(/gfx/partner.jpg); width:51px; height:34px;}

#menu .l6 img{ width:52px; height:32px; border:0px;} 
#menu .l7 img{ width:45px; height:32px; border:0px;} 
#menu .l8 img{ width:40px; height:32px; border:0px;} 
#menu .l9 img{ width:51px; height:32px; border:0px;} 


#menu .l6, #menu .l7, #menu .l8, #menu .l9{
    padding:0px 3px;
    margin:0px 3px;
    background-repeat:no-repeat;
	background-position:50% 0px;
	float:left;
}


#menu .seperator{
	background-image: url(/gfx/seperator.jpg);
	background-repeat:no-repeat;
	background-position:center;	
	float:left;
}

...es funktioniert auch alles wie gewollt und ist auch alles xhtml strict valide. Meine Frage wäre jetzt wie geht alles noch ein wenig eleganter, da mich das spacer.gif etwas stört bzw. wie würdet ihr es anders machen?

06.09.2005, 08:59

Hmmm, evtl mit Margin bzw Padding, aber da gibt es dann wieder "Probleme" bezüglich der Darstellung im Kindernet-Explorer, der rechnet das anders als richtige Browser

http://css4you.de/wsboxmodell/index.html

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

06.09.2005, 08:59
Gast Beiträge: n/a	Hmmm, evtl mit Margin bzw Padding, aber da gibt es dann wieder "Probleme" bezüglich der Darstellung im Kindernet-Explorer, der rechnet das anders als richtige Browser http://css4you.de/wsboxmodell/index.html