✔ Div Breite ändert sich nicht

[Anny83]

Hallo,

muss meine Website gerade umbauen, damit sie immer zentriert sitzt.
Also bau ich gerade alles mit Hilfe von CSS auf.
Jetzt habe ich das Problem, dass ich links einen blauen Balken haben möchte, der nur 30px breit ist. Er wird aber viel länger angezeigt? Fehlt mir das clear... zum Aufheben?

Hier der CSS Code:

@charset "utf-8";

* {
margin:0;
padding:0 }

html, body {
height:100%;
}

body {
background-color:#ffffff;
font:100.01%/1.4 sans-serif;
text-align:left; /* horizontal centering for IE Win quirks */
}


#container {
margin: 0 auto;
position:relative;
text-align:left;
width: 850px;
height: 750px;
background-image: url(Bilder/hg_header.jpg);
background-repeat: no-repeat;

}

#blau {
margin: 0;
float: left;
margin-top: 6px;
width: 2em;
height: 120Px;
background-color: #3c2a85;
}

#container div {
font-size:80%;
float:left;
width:60em;
margin-left:2em;
text-decoration: none;
text-align: center;
}

#container ul {
margin-left:100;
list-style-type: none;
text-decoration: none;
padding-top:15em;
margin-left:3em;
}

#container ul li{
display: inline;
}

#container li span {
font-size:70%;
}

under der HTML Code:

<div id="container">
<div id="container ul">
<ul>
<li><a href="empfang.html" class="link_active"> Empfang </a> </li>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<li><a href="agentur.html" class="link">Agentur </a> </li>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<li><a href="leistungen.html" class="link">Leistungen </a> </li>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<li><a href="referenzen.html" class="link">Referenzen </a> </li>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<li><a href="kontakt.html" class="link"> Kontakt</a> </li>
</ul>
</div>


<div id="blau"></div>

</div>

Findet Ihr mein Problem

Lg Anny

 

[Maik]

Hi,

dein Problem liegt auf den ersten Blick darin, dass du im HTML-Code ein DIV mit der ID #container ul auszeichnest, obwohl diese "Namenskonstellation" im Stylesheet den Selektor für Nachfahren repräsentiert, also für das ul-Element innerhalb eines Elements mit der ID #container gilt.

Zum anderen vermischt du absolute Breiten (px) mit relativen Breiten (em), was äußerst ungünstig ist, und diese Regel:

#container div {
font-size:80%;
float:left;
width:60em;
margin-left:2em;
text-decoration: none;
text-align: center;
}

wird auf den "blauen" Balken angewendet, womit er breiter, als gewünscht, dargestellt wird.

mfg Maik

 

[Anny83]

Hi Maik,

habe deine Tipps umgesetzt, danke, aber warum wird "blau" auf den "container div" angewendet?
Habe die Breite, die ich wollte hinbekommen, aber ich kann ihn nicht einzeln nach unten verschieben. Woran liegt das?

lg Anny

 

[Maik]

Der CSS-Selektor "#container div" hat für alle div-Elemente Gültigkeit, die sich in einem Element mit der ID #container befinden, und dazu zählt eben auch das DIV #blau.

Was meinst du mit "einzeln nach unten verschieben", und womit hast du es erfolglos versucht?

mfg Maik

 

[Anny83]

Habe den #container div nun umbenannt in #navi.
Wie gesagt die Breite kann ich jetzt regeln, aber ich kann den blauen Balken nicht nach unten schieben wie ich will. Über dem Balken ist die Navigation. Aber wenn ich bei margin-top die Höhe verändere, verschiebt sich alles...

 

[Maik]

Zeig doch bitte mal den aktuellen vollständigen HTML- und CSS-Code der Seite.

mfg Maik

 

[Anny83]

wie kann ich den Code eigentlich hostet, dass er in dem kleinen Fenster zu sehen ist

 

[Maik]

Hierfür gibt es diverse Codetags

Im erweiterten Editor findest du drei Buttons, um den Quellcode zu maskieren:



mfg Maik

 

[Loomis]

Gibt extra Tags dafür:


//edit: Maiks Bild ist natürlich viel gewissenhafter gemacht, als meins. :suspekt:

 

[Maik]

//edit: Maiks Bild ist natürlich viel gewissenhafter gemacht, als meins. :suspekt:
_____________________________________________________________
Geändert von Loomes (01.07.08 um 17:21Uhr). Grund: ich = lahmarsch

Danke

Mein zeitlicher Vorsprung gegenüber deinem Post hat einen einfachen Grund: Den "Prototyp" dieses Schnapp-Schußes hab ich schon vor langer Zeit aus aktuellem Anlaß erstellt, und direkt im Anschluß ein Backup gestartet, da diese Frage in gewissen Abständen im Forum immer wieder auftaucht.

mfg Maik