• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Verschieben von Navigation [mit Bild]

Status
Für weitere Antworten geschlossen.
TheBirthdayMassacre

TheBirthdayMassacre

Neues Mitglied


Hi,

ich möchte gern meine Navigation etwas nach unten verschieben, sodass diese nicht direkt an den Header schließt.

Dies ist mir auch "fast gelungen", in dem ich bei margin eine "10" hingeschrieben habe. Wuerde ich jedoch eine "20" hinschreibe, macht dies seltsamerweiser keinen Unterschied, was das verschieben angeht

HTML: 
#nav { 
    margin:10; 
    padding:0; 
    list-style:none; 
}
Meine CSS-Datei sieht insgesamt folgendermaßen aus:
HTML: 
body { 
    background-repeat:repeat-x; 
    background-color:#FFF8E3; 
    margin:20px; 
    padding:0; 
    text-align:center; 
} 
 
h1 { 
    font-size:24px;
        font-weight:888; 
    margin:0; 
} 
 
h2 { 
    font-size:10px;
        font-weight:888; 
    margin:0; 
} 
 
h3 { 
    font-size:16px;
        font-weight:888; 
    margin:0; 
    padding-bottom:5px; 
    border-bottom:1px dotted #CCC; 
} 
 
p { 
    margin-top:5px; 
    padding-bottom:5px; 
    font-size:11px; 
    line-height:1.5em; 
} 
 
#container { 
    font-family:Arial,Helvetica,sans-serif; 
    font-size:11px; 
    margin:0 auto; 
    width:888px; 
    padding:0px; 
    height:auto; 
    background-color:#FFF; 
    text-align:left;
        border-width:1px;
        border-style:solid;
        border-color:#000; 
} 


 
#banner { 
    width:888px; 
    height:130px; 
    margin-right:10px; 
    background-image:url(bilder/bg1c.gif); 
    float:left; 
} 
 
#content { 
    background:url(bilder/bg1.gif) repeat-y; 
    height:1%; 
    } 
 
#leftColumn { 
    float:left; 
} 
 
#nav { 
    margin:10; 
    padding:0; 
    list-style:none; 
} 
 
#nav a { 
    display:block; 
    font-size:11px; 
    color:#FFF; 
    text-decoration:none; 
    padding:10px; 
    width:130px; 
    height:10px; 
    border-bottom:1px dotted #333; 
     
} 
 
#nav a:hover { 
    background-color:#333; 
 
} 

#leftColumnBottom { 
    width:130px; 
    padding:75px 10px 10px; 
    color:#EAEAEA; 
}
 
#rightColumn { 
    float:left; 
    width:700px; 
    padding-left:20px; 
    color:#666; 
} 
 
#clear { 
    clear:both; 
} 
 
 
#copyright { 
    padding-top:10px; 
    font:10px Arial,Helvetica,sans-serif; 
    color:#000; 
} 
 
#copyright a { 
    text-decoration:none; 
    color:#000; 
} 
 
#copyright a:hover { 
    color:#000; 
}
 
Hi,

seltsam, du hast keine Maßeinheit für margin angegeben und dein margin gilt für alle Seiten.

Schreib doch mal z.B.:

Code: 
#nav  {
    margin-top:10px;
      }

das war aber jetzt geraten weil du den Quellcode nicht mit eingestellt hast.

Ach ja, was mir gerade auffällt:

line-height nie mit Maßeinheit definieren, sonst kann es zu Vererbungsproblemen kommen.

line-height:1.5; ist völlig ausreichend, weil es in dem Fall einfach das 1,5-fache der Schriftgröße ist.

koslowski
 
Hallo koslowski,

danke für deine Antwort.

Leider verschiebt sich alles beim hinzufügen von "px" komplett falsch. Daran liegt es schonmal nicht.

Bei "line-heigh" habe ich nun "em" entfernt.

Du hattest meinen Quellcode angesprochen.
Vielleicht erkennst du ja dort einen Fehler, der dafür verantwortlich ist, dass sich die Navigation nicht weiter nach unten verschieben lässt.

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<?xml version="1.0" encoding="iso-8859-1"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> 
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> 
<title>Bla.</title>
<meta name="robots" content="index,follow,noarchive,noimageindex,noimageclick"/>
<meta name="description" content="Bla."/>
<meta name="keywords" content="bla." />
<meta name="language" content="de"/>
<meta name="copyright" content="bla"/>
<meta name="author" content="bla"/>
<meta name="publisher" content="bla"/>
<meta name="includeglobal" content="1"/> 

<link rel="shortcut icon" href="bilder/favicon.ico" type="image/x-icon"/> 
<link rel="stylesheet" type="text/css" href="aufbau.css"/> 
</head> 
<body> 
<div id="container"> 
 
<div id="banner1"> 
<div id="bannerLeft"></div> 
<div id="banner"> 
</div> 
</div> 
 
<div id="content"> 
 
<div id="leftColumn"> 
<ul id="nav"> 
<li><a href="index.html"> <b>Startseite</b></a></li>
<li><a href="aktuell.html"> Aktuell</a></li> 
<li><a href="geschichte.html"> Geschichte</a></li> 
<li><a href="festablauf.html"> Festablauf</a></li> 
<li><a href="vereinslokal.html"> Vereinslokal</a></li> 
<li><a href="vorstand.html"> Vorstand</a></li> 
<li><a href="koenigspaare.html"> Königspaare</a></li>
<li><a href="jugendkoenige.html"> Jugendkönige</a></li>
<li><a href="kinderkoenigspaare.html"> Kinderkönigspaare</a></li>
<li><a href="fotoalbum.html"> Fotoalbum</a></li>
<li><a href="gaestebuch.html"> Gästebuch</a></li>
<li><a href="links.html"> Links</a></li> 
</ul> 
<div id="leftColumnBottom"> 
 
</div> 
</div> 
 
<div id="rightColumn">
<br/> 
<h3 style="text-align: center;">Willkommen auf der Internetpräsenz Bla</h3>
<p></p>
<p style="text-align: center;"><img border="0" alt="" src="bilder/vereinsfoto.jpg" /></p> 
</div> 
 
<div id="clear"> 
</div> 
 
</div> 
 
</div> 
<div id="copyright"><p> &copy; 2008 BlaBlaBla - <a target="_self" href="impressum.html">Impressum</a></p></div> 
</body> 
</html>
 
Hallo koslowski,

danke für deine Antwort.

Leider verschiebt sich alles beim hinzufügen von "px" komplett falsch. Daran liegt es schonmal nicht.

Bei "line-heigh" habe ich nun "em" entfernt.

Du hattest meinen Quellcode angesprochen.
Vielleicht erkennst du ja dort einen Fehler, der dafür verantwortlich ist, dass sich die Navigation nicht weiter nach unten verschieben lässt.

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<?xml version="1.0" encoding="iso-8859-1"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> 
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> 
<title>Bla.</title>
<meta name="robots" content="index,follow,noarchive,noimageindex,noimageclick"/>
<meta name="description" content="Bla."/>
<meta name="keywords" content="bla." />
<meta name="language" content="de"/>
<meta name="copyright" content="bla"/>
<meta name="author" content="bla"/>
<meta name="publisher" content="bla"/>
<meta name="includeglobal" content="1"/> 

<link rel="shortcut icon" href="bilder/favicon.ico" type="image/x-icon"/> 
<link rel="stylesheet" type="text/css" href="aufbau.css"/> 
</head> 
<body> 
<div id="container"> 
 
<div id="banner1"> 
<div id="bannerLeft"></div> 
<div id="banner"> 
</div> 
</div> 
 
<div id="content"> 
 
<div id="leftColumn"> 
<ul id="nav"> 
<li><a href="index.html"> <b>Startseite</b></a></li>
<li><a href="aktuell.html"> Aktuell</a></li> 
<li><a href="geschichte.html"> Geschichte</a></li> 
<li><a href="festablauf.html"> Festablauf</a></li> 
<li><a href="vereinslokal.html"> Vereinslokal</a></li> 
<li><a href="vorstand.html"> Vorstand</a></li> 
<li><a href="koenigspaare.html"> Königspaare</a></li>
<li><a href="jugendkoenige.html"> Jugendkönige</a></li>
<li><a href="kinderkoenigspaare.html"> Kinderkönigspaare</a></li>
<li><a href="fotoalbum.html"> Fotoalbum</a></li>
<li><a href="gaestebuch.html"> Gästebuch</a></li>
<li><a href="links.html"> Links</a></li> 
</ul> 
<div id="leftColumnBottom"> 
 
</div> 
</div> 
 
<div id="rightColumn">
<br/> 
<h3 style="text-align: center;">Willkommen auf der Internetpräsenz Bla</h3>
<p></p>
<p style="text-align: center;"><img border="0" alt="" src="bilder/vereinsfoto.jpg" /></p> 
</div> 
 
<div id="clear"> 
</div> 
 
</div> 
 
</div> 
<div id="copyright"><p> &copy; 2008 BlaBlaBla - <a target="_self" href="impressum.html">Impressum</a></p></div> 
</body> 
</html>
 
Hi,

also zuerst mal schmeißt du diese Zeile raus:

Code: 
<?xml version="1.0" encoding="iso-8859-1"?>

Die Zeile versetzt den IE stante pede in den Quirksmodus, wo er viele Probleme verursacht.

Dann schreibst du in die erste Zeile deiner CSS

Code: 
*  {
   padding:0;
   margin:0;
    }

Alle Abstände werden auf null gesetzt und die unterschiedlichen browserinternen Vorformatierungen somit vereintheitlicht.
Davon ausgehend definierst du dann deine Abstände für die Elemente.

Code: 
#content  {
     background:url(......) repeat-y;
     height:1%;
       }

Schmeiss die Höhe raus.
Wenn #content Layout für den IE braucht dann gib ihm eine feste Breite.

Dein #banner ist breiter als der umschließende #container.
Du mußst nämlich margin/padding zu width hinzurechnen um die wahre Breite einer Box zu definieren.

Das wäre dann für #banner damit er in #container reinpaßt:
width:878px;

width:878px + margin-right:10px = 888px = wahre Breite von #banner.

koslowski
 
Vielen Dank für die ausführlich Antwort.

Nun sieht meine CSS-Datei folgendermaßen aus:
Code: 
*  {
   padding:0;
   margin:0;
    }


body { 
    background-repeat:repeat-x; 
    background-color:#FFF8E3; 
    margin:20px; 
    padding:0; 
    text-align:center; 
} 
 
h1 { 
    font-size:24px;
        font-weight:888; 
    margin:0; 
} 
 
h2 { 
    font-size:10px;
        font-weight:888; 
    margin:0; 
} 
 
h3 { 
    font-size:16px;
        font-weight:888; 
    margin:0; 
    padding-bottom:5px; 
    border-bottom:1px dotted #CCC; 
} 
 
p { 
    margin-top:5px; 
    padding-bottom:5px; 
    font-size:11px; 
    line-height:1.5; 
} 
 
#container { 
    font-family:Arial,Helvetica,sans-serif; 
    font-size:11px; 
    margin:0 auto; 
    width:888px; 
    padding:0px; 
    height:auto; 
    background-color:#FFF; 
    text-align:left;
        border-width:1px;
        border-style:solid;
        border-color:#000; 
} 


 
#banner { 
        width:878px;  
    height:130px; 
    margin-right:10px; 
    background-image:url(bilder/bg1c.gif); 
    float:left; 
} 
 
#content { 
    background:url(bilder/bg1.gif) repeat-y; 
    } 
 
#leftColumn { 
    float:left; 
} 
 
#nav {                              [COLOR=Red][B]a)[/B][/COLOR]
    margin:10; 
    padding:0; 
    list-style:none; 
} 
 
#nav a { 
    display:block; 
    font-size:11px; 
    color:#FFF; 
    text-decoration:none; 
    padding:10px; 
    width:130px; 
    height:10px; 
    border-bottom:1px dotted #333; 
     
} 
 
#nav a:hover { 
    background-color:#333; 
 
} 

#leftColumnBottom { 
    width:130px; 
    padding:auto; 
    color:#EAEAEA; 
}
 
#rightColumn { 
    float:left; 
    width:700px; 
    padding-left:20px; 
    color:#666; 
} 
 
#clear { 
    clear:both; 
} 
 
 
#copyright { 
    padding-top:10px; 
    font:10px Arial,Helvetica,sans-serif; 
    color:#000; 
} 
 
#copyright a { 
    text-decoration:none; 
    color:#000; 
} 
 
#copyright a:hover { 
    color:#000; 
}
a) trotz "margin 10" schließt die Navi nun direkt an den Banner.


Bezüglich der wahren Breite des Banners.
Jetzt ist mein Banner nicht breit genug um an den Container zu schließen (siehe Bildschirmfoto)

 
Hi,

TheBirthdayMassacre schrieb:
Vielen Dank für die ausführlich Antwort.

Nun sieht meine CSS-Datei folgendermaßen aus:
a) trotz "margin 10" schließt die Navi nun direkt an den Banner.


Bezüglich der wahren Breite des Banners.
Jetzt ist mein Banner nicht breit genug um an den Container zu schließen
Zum Vergrößern anklicken....

schreib margin-top:10px; da fehlt die Maßeinheit.

hatte mich eh schon gewundert wofür du das margin brauchst.
Schmeiss es raus und gib #banner die vollen 888px Breite.

Falls es noch Probleme gibt schreib im welchen Browser sie zu sehen sind.
(hoffe du hast die xml-Zeile schon rausgeschmissen!)

Ach ja, wenn du oben mit dem *-Selektor alles auf null setzt brauchst du das weiter unten nicht dauernd zu tun.

koslowski
 
So habe nun alles so gemacht, wie du geschrieben hast, und es funktioniert mit der Verschiebung der Navigation. Danke für deine Hilfe.

Hier nochmals die CSS-Datei:

Code: 
*  {
   padding:0;
   margin:0;
    }


body { 
    background-repeat:repeat-x; 
    background-color:#FFF8E3; 
    margin:20px; 
    padding:0; 
    text-align:center; 
} 
 
h1 { 
    font-size:24px;
        font-weight:888; 
    margin:0; 
} 
 
h2 { 
    font-size:10px;
        font-weight:888; 
    margin:0; 
} 
 
h3 { 
    font-size:16px;
        font-weight:888; 
    margin:0; 
    padding-bottom:5px; 
    border-bottom:1px dotted #CCC; 
} 
 
p { 
    margin-top:5px; 
    padding-bottom:5px; 
    font-size:11px; 
    line-height:1.5; 
} 
 
#container { 
    font-family:Arial,Helvetica,sans-serif; 
    font-size:11px; 
    margin:0 auto; 
    width:888px; 
    padding:0px; 
    height:auto; 
    background-color:#FFF; 
    text-align:left;
        border-width:1px;
        border-style:solid;
        border-color:#000; 
} 


 
#banner { 
        width:888px;  
    height:130px; 
    background-image:url(bilder/bg1c.gif); 
    float:left; 
} 
 
#content { 
    background:url(bilder/bg1.gif) repeat-y; 
    } 
 
#leftColumn { 
    float:left; 
} 
 
#nav { 
    margin-top:20px; 
    padding:0; 
    list-style:none; 
} 
 
#nav a { 
    display:block; 
    font-size:11px; 
    color:#FFF; 
    text-decoration:none; 
    padding:10px; 
    width:130px; 
    height:10px; 
    border-bottom:1px dotted #333; 
     
} 
 
#nav a:hover { 
    background-color:#333; 
 
} 

#leftColumnBottom { 
    width:130px; 
    padding:70px 10px 10px; 
    color:#EAEAEA; 
}
 
#rightColumn { 
    float:left; 
    width:700px; 
    padding-left:20px; 
    color:#666; 
} 
 
#clear { 
    clear:both; 
} 
 
 
#copyright { 
    padding-top:10px; 
    font:10px Arial,Helvetica,sans-serif; 
    color:#000; 
} 
 
#copyright a { 
    text-decoration:none; 
    color:#000; 
} 
 
#copyright a:hover { 
    color:#000; 
}

Wär prima, wenn du nochmal kurz drüber schaust, und nacht Fehlern siehst.

Die xml-Zeile habe ich jeweils aus den HTML-Dateien entnommen.

LG
 
ich verstehe nicht warum du im container
Code: 
margin: 0 auto;

schreibst...

wenn man mich darüber aufklären könnte, wäre das sehr nett...
aber ich habe auf den ersten blick sonst keinen fehler gefunden.
 
Hi,

cain schrieb:
ich verstehe nicht warum du im container
Code: 
margin: 0 auto;
schreibst...

wenn man mich darüber aufklären könnte, wäre das sehr nett...
aber ich habe auf den ersten blick sonst keinen fehler gefunden.
Zum Vergrößern anklicken....

das ist das übliche Verfahren um eine Webseite horizontal zu zentrieren.;)

koslowski
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben