ich will eine gescheite umsetzung in css machen...

hallo css checker! die user-305pause 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;



}

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}

#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.

#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;
}

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?

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

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"

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.

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

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

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