Willkommen in der Webstatt Zum Webstatt Blog und Stories
fish fish am 05.07.06 19:37

hallo css checker! die sommerpause ist um, es gibt arbeit für auch. weil ich nämlich --wie fast immer wenn ich mich anschicke eine seite konform in css umzusetzen- probleme auftauchen. um flgendes design geht es:link und das ist bis jetzt bei rausgekommen: link
fragen: 1. wie kann ich jedem link in der oberen menüleiste eine dynamische breite verpassen? 2. wie rücke ich die links in der unteren menüleiste in die mitte des blauen balken? und 3. wie kann ich den abstand zwischen den menüs auf0 setzen?
der code:
<div class="seitenmenue">
<ul id="seitenmenue">
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
*/...*/
</ul>
</div>

<div class="hauptmenue">
<ul id="hauptmenue">
<li><a href="#">Kühlung</a></li>
<li><a href="#">Modding</a></li>
*/.......*/
</ul>
</div>

#seitenmenue li {
float: left;
background-color: #E6E6E6;
width: 60px;
margin: 0 3px 0 0;
}

#seitenmenue li a {
color: #828282;
display: block;
width: 60px;
text-decoration: none;
text-align: center;
}

#seitenmenue li a:hover {
display: block;
background-color: #D9D9D9;
width: 60px;
}


div.hauptmenue {
width: 1024 px;
height: 41px;
background: url(images/hauptmenue.png);
}

#hauptmenue {
height: 19px;
padding: 0 100px 0 0;
margin: 0;
list-style-type: none;
}

#hauptmenue li {
float: left;
width: 60px;
height: 41px;
margin: 0 3px 0 0;
}

#hauptmenue li a {
color: #E6E6E6;
display: block;
width: 60px;
height: 41px;
text-decoration: none;
text-align: center;
}

#hauptmenue li a:hover {
display: block;
width: 60px;
height: 41px;
text-decoration: underline;

}

netcup.de Warum gibt es hier Werbung?
milahu milahu am 05.07.06 19:50

Den Sinn der div-Container seh ich nicht so ganz.. :-\

1) li{display:inline}
2) ul{padding:20px 0}
3) xy{margin:0;padding:0}

fish fish am 05.07.06 20:49

#seitenmenue {
margin: 0;
list-style-type: none;
padding: 20px 0;
}

#seitenmenue li {
background-color: #E6E6E6;
margin: 0 3px 0 0;
display: inline;
}

#seitenmenue li a {
color: #828282;
display: block;
text-decoration: none;
padding: 1px;
}

#seitenmenue li a:hover {
display: block;
background-color: #D9D9D9;
padding: 1px;
}

so funktioniert es nicht.

Michael Michael am 05.07.06 21:10

#seitenmenue {
margin: 0;
list-style-type: none;
padding: 20px 0;
height: 13px; /* plus das padding des li's */
}

#seitenmenue li {
background-color: #E6E6E6;
margin: 0 3px 0 0;
display: inline;
/* padding fuer formatierung hinzufuegen*/
}

#seitenmenue li a {
color: #828282;
text-decoration: none;
padding: 1px;
}

#seitenmenue li a:hover {
background-color: #D9D9D9;
padding: 1px;
}

fish fish am 05.07.06 21:51

arrgh. wie benomme ich die links als blocks im blauen balken in die mitte des balkens?

<ul id="seitenmenue">
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">How-To's</a></li>
<li><a href="#">Tests</a></li>
<li><a href="#">Sitemap</a></li>
<li><a href="#">Suche</a></li>
<li><a href="#">Suche</a></li>
</ul>

<div class="blauer_balken">
<ul id="hauptmenue">
<li><a href="#">Kühlung</a></li>
<li><a href="#">Modding</a></li>
<li><a href="#">CPU</a></li>
<li><a href="#">RAM</a></li>
<li><a href="#">Software</a></li>
<li><a href="#">Mainboard</a></li>
<li><a href="#">Netzwerk</a></li>
<li><a href="#">Laufwerk</a></li>
</ul>
</div>


#seitenmenue {
margin: 0;
list-style-type: none;
padding: 20px 0;
height: 13px;
}

#seitenmenue li {
background-color: #E6E6E6;
margin: 0 3px 0 0;
display: inline;
padding: 1px;
}

#seitenmenue li a {
color: #828282;
text-decoration: none;
padding: 1px;
}

#seitenmenue li a:hover {
background-color: #D9D9D9;
padding: 1px;
}

.blauer_balken {
width: 1024px;
height: 41px;
background: url(images/hauptmenue.png);
}

#hauptmenue {
margin: 0;
list-style-type: none;
height: 41px;
}

#hauptmenue li {
margin: 0 3px 0 0;
display: inline;
}

#hauptmenue li a {
color: #E6E6E6;
text-decoration: none;
}

#hauptmenue li a:hover {
text-decoration: underline;
}

WAS MACHE ICH FALSCH?

Michael Michael am 05.07.06 21:55

line-height: 41px; in dem Container ist dein Freund.

fish fish am 06.07.06 22:23

super, danke fürs erste.

nächste brobleme folgen natürlich. also nichmal . ich will folgende seite umsetzen:
http://www.fish.bierquartier.de/muell/eiskalt/zwei.png
im moment bin ich so weit:
HTML http://www.fish.bierquartier.de/muell/eiskalt/index.html
CSS http://www.fish.bierquartier.de/muell/eiskalt/eiskalt.css

fragen:
1. warum sieht das design im IE anders aus als im ff und wie mach ich dass es gleich ausschaut? internetexplorer - opera - firefox

2.wie verwirkliche ich das gezeigte design schematisch? (aufteilung in p und div und span?)also unterhalb des banners? (ich habe nach tuts gesucht aber nix passendes gefunden; "kaltstart" muss genauso lang sein wie "lieblinge";)

Michael Michael am 06.07.06 22:43

Der IEX und seine Abstände... da gibts kein Patentrezept - vielleicht kennt CSS-Gott Leo so etwas ;)

Allgemein hilft es mir immer, das Design in Spalte einzuteilen, da diese leicht umzusetzen sind.

Für Container benutze ich DIVs. Die restlichen Elemente finde ich besonders verschachtelt sinnvoll, da man so Klassen, Ids und so weiter spart.
Großen übergeordneten Containern gebe ich eigentlich immer ein Id, dann kann man auch leicht die allgemein Element formatieren also div#container1 h1 usw.
Listen sind ansonsten eine schöne Möglichkeit, Inhalte auch ohne CSS sinnvoll darzustellen.

fish fish am 07.07.06 09:55

ok.
so und gleich ein nachschlag an problemen. und zwar folgendes: ich will dass das div (grün) links von den boxen anfängt, es fängt aber ganz links an, nur der text im p (rot) ist nach rechts versetzt, do dass man ihn lesen kann. wie geht das weg?
http://www.fish.bierquartier.de/muell/eiskalt/index.html
http://www.fish.bierquartier.de/muell/eiskalt/eiskalt.css

Franky Franky am 07.07.06 11:11

margin-left: 200px; oder so beim div ;)
kannst auch absolute poitionieren, und dann mit left und top oder den anderen angaben von margin arbeiten ;)

fish fish am 07.07.06 12:12

hm ich hatte gedacht wegen float:left brauche ich das nicht.. danke!

Creative Commons Lizenzvertrag
Alle Inhalte des Webstatt-Archivs stehen unter einer Creative Commons Namensnennung - Weitergabe unter gleichen Bedingungen 3.0 Unported Lizenz.

Impressum & Kontakt