Abstand zwischen 2 div wegen navigation

[lars_25]

problem gelöst!!!

.:closed:.

danke an alle helfer, ihr seid die besten!

hallo leute,
ich arbeite noch nicht lange mit css, bin aber kurz davor meine website fertig zu stellen. ich habe 4 div boxen (banner_oben, navigation, inhalt, banner_unten) in eine div box (container) getan und per css konfiguriert.

leider habe ich das problem das ich zwischen banner_oben und navigation einen abstand habe. nach langem suchen habe ich herrausgefunden das der text in der navigation schuld ist. und zwar ist der abstand zwischen den divs immer so groß wie die pixelgröße der navigationsschrift. also bei "font-size: 12px;" gleich 12px. was kann ich tun damit dieser abstand verschwindet? und warum bekomme ich die schrift in der vertikalen nicht mittig?

ich habe übrigends die box 40px hoch gemacht, da im hintergrund noch eine 40px große grafik eingebaut ist.

css

@charset "utf-8";
#container {
width: 860px;
margin-right: auto;
margin-left: auto;
border: 1px solid #262626;
}
#container #banner_oben {
height: 180px;
}
#container #navigation {
background-image: url(../images/navigation.jpg);
font-family: Arial, Helvetica, sans-serif;
font-size: 12px; COLOR]
font-weight: bold;
color: #333333;
background-repeat: no-repeat;
background-color: #FFFFFF;
text-align: center;
vertical-align: middle;
height: 40px;
}
#container #navigation ul {
list-style-type: none;
color: #000000;
}
#container #navigation li {
list-style-position: inside;
display: inline;
padding-right: 50px;
}

#container #inhalt {
background-color: #FFFFFF;
}
#container #banner_unten {
height: 80px;
}

nehmts mir bitte nicht übel, bin ein absoluter newbie

 

[Arkanorian]

Erst mal eins: font-size in px? normal gibt man die in pt an, also 12pt;
Dann wäre der HTML code deiner Seite auch noch sehr hilfreich bei der Problemsuche (wenn nicht ganz, dann wenigstens die beiden divs)

 

[lars_25]

danke für den tipp,
jetzt hab ich halt einen abstand von 12pt hab jetzt übrigends gemerkt das ich auch wenn ich einen text in den inhalt schreibe weitere abstände erhalte. siehe screenshot:

weiß jetzt gar nicht mehr was ich machen soll

html code

• Home
  
• Inhalte
  
• Sonstiges
  
• Videos
  
• Downloads
  
• Links
  
• Impressum
  

hier steht der text

 

[chakruhk]

So hier. Hintergrundfargeb und die groessen der Divs musste noch anpassen aber ich glaube so sollte das sein mit der navi oder?

Warum das mit dem abstand zwischen den Divs bei dir ist weiss ich auch nicht, is voll komisch naja. Bei meiner loesung ist der abstand auf jedenfall weg.

chakruhk

@charset "utf-8";
#container {
width: 860px;
height:700px;
margin-right: auto;
margin-left: auto;
border: 1px solid #262626;
background-color:green;
}
#container #banner_oben {
height: 180px;
background-color:black;
}
#container #navigation {
top:189px;
position:absolute;
width:860px;
background-image: url(../images/navigation.jpg);
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #333333;
background-repeat: no-repeat;
background-color: pink;
text-align: center;
height: 40px;
}
#container #navigation ul {
list-style-type: none;
color: #000000;
}
#container #navigation li {
list-style-position: inside;
display: inline;
padding-right: 50px;
}
#container #inhalt {
background-color: red;
top:229px;
position:absolute;
width:860px;
height:150px;
}
#container #banner_unten {
height:100px;
width:860px;
top:379px;
position:absolute;
color:white;
background-color:yellow;
}

 

[lars_25]

@chakruhk - danke für dein posting. ich verstehe was du meinst. du vergiebst für den container eine gesammtgröße und unterteilst diesen dann.

leider hab ich das problem, dass der inhalt nie die selbe größe besitzt. ich arbeite nämlich mit einer vorlage in dreamweaver cs3 und habe den inhalt als bearbeitbaren bereich deklariert. da der inhalt nie gleich groß ist kann ich auch keine feste größe vergeben. sonst noch eine idee?

 

[chakruhk]

So hallo nochmal, wenn ich das richtig verstanden habe dann muesste das so gehen. Die groesse des Inhalt Divs ist jetzt variabel, wird also groesser oder kleiner je nach Inhalt.

@charset "utf-8";
div#container {
width: 860px;
[COLOR='Red']height:100%;[/COLOR]
margin-right: auto;
margin-left: auto;
border: 1px solid #262626;
background-color:green;
}

div#banner_oben {
height: 180px;
background-color:black;
}
div#navigation {
[COLOR='Red']margin-top:-12px;
padding-top:4px;[/COLOR]
width:860px;
background-image: url(../images/navigation.jpg);
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #333333;
background-repeat: no-repeat;
background-color: pink;
text-align: center;
height:40px;
}
div#navigation ul {
list-style-type: none;
color: #000000;
}
#navigation li {
list-style-position: inside;
display: inline;
padding-right:50px;
}

div#inhalt {
[COLOR='Red']margin-top:-16px;[/COLOR]
background-color: red;
width:860px;
}
div#banner_unten {
[COLOR='Red']margin-top:-16px;[/COLOR]
height:100px;
width:860px;
color:white;
background-color:yellow;
}

chakruhk

 

[lars_25]

vielen, vielen dank @chakruhk!

jetzt sind FAST alle abstände weg. hab nur noch einen zwischen "navigation" und "inhalt" und kannst du mir erklären was margin-top und padding-top bewirken? vielleicht komm ich dann ja selber drauf

 

[chakruhk]

Also um den Abstand zwischen Navi und Inhalt weg zubekommen musst du margin top erhoehen oder verringern je nachdem wie es bei dir muss.

margin: aussenabstand
padding: innenabstand

mit padding-top wird halt die Schrift von der Navigation "runter gedrueckt"

 

[unleashedx]

machs doch einfach so, dass du in den navicontainer nochmal nen container für die schrift reinmachst, dann kannste die font-size des äußeren conatiners der navi auf 0 setzen und der abstand müsste weg sein.

 

[lars_25]

juhuu, jetzt funktionierts. hab jetzt margin-top auf -6px gesetzt.
aber kann mir einer erklären warum ich eigentlich den innen- und aussenabstand festlegen muss, wo ich doch eigentlich gar KEINEN abstand haben will?

 

[chakruhk]

Ich denke das es einen von HTML definierten Außenabstand gibt und um den wegzubekommen muss man mit Padding arbeiten das gleiche ist denke ich bei dem Innenabstand der Fall.

 

[lars_25]

vielen dank chakruhk!
du hast mir echt rießig weiter geholfen
mfg, lars

 

[Broken Sword]

problem gelöst!!!

.:closed:.

done!

Gruß
Broken Sword