Suche im Forum:
Suchen


Autor Nachricht
Beitrag20.10.2011 um 20:32 (UTC)    
Titel: Navigations Schrift zu weit unten
Antworten mit Zitat
Hallo liebe Community,

ich habe folgendes Problem: Ich habe mein Design ganz normal gecodet und meine Grafiken eingefügt. Dann aber ist mir aufgefallen dass die Schrift in der Navigation zu weit unten ist. Ich habe lange nach dem Fehler gesucht und rumprobiert, kann aber nichts finden!
Ich hoffe mir kann einer von euch helfen.

Code:

Zitat:
#nav_container {
margin-left: 0px;
margin-top: 0px;
width: 900px;
height: 55px;
background: url(http://i47.servimg.com/u/f47/16/87/41/46/naviii10.png);
background-repeat: x-repeat;
float: left;
font-family: sans bold;
padding: 0x 0px 0px 0px;
font-size: 16px;
}

#nav a {
float: left;
text-decoration: none;
color: #FFF;
padding: 10px 10px 10px 10px;
padding-top: 0px;
border-right: 0px solid #202020}

#nav a:hover {
color: #414141;}

#nav li {
list-style-type: none;}



LG
↑
Beitrag20.10.2011 um 21:41 (UTC)    
Titel:
Antworten mit Zitat
Hallo,

Wieso hast du deiner Naviagtion eine Höhe von 55px gegeben, wenn die Grafik nur 38px hoch ist? Das müsstest du ändern und du müsstest einen genauen Abstand der Naviagtionslinks festlegen, d.h. da die Grafik 38px hoch ist und deine Schrift 16px, bleiben 22px übrig, also musste du oben und unten einen Abstand von 11px festlegen, damit die Buttons mittig sind. Auserdem solltest du die Aufzählungsliste formatieren. So sieht es dann aus.

Zitat:
#nav_container {
margin: 0px;
width: 900px;
height: 38px;
background: url(http://i47.servimg.com/u/f47/16/87/41/46/naviii10.png);
background-repeat: x-repeat;
float: left;
font-family: sans bold;
padding: 0px;
font-size: 16px;
}

#nav a {
float: left;
text-decoration: none;
color: #FFF;
padding: 11px 10px;
border-right: 0px solid #202020}

ul#nav{
padding: 0px;
margin: 0px;}

#nav a:hover {
color: #414141;}

#nav li {
list-style-type: none;}


Alles, was ich verändert bzw. hinzugefügt hab, ist rot makiert.

Grüße, David
↑
Beitrag21.10.2011 um 08:10 (UTC)    
Titel:
Antworten mit Zitat
Wenn ich es so mache wie von dir beschrieben, rutscht die Schrift noch etwas tiefer und man kann nur das halbe Bild der Navigation sehen.
Das Problem ist wie ich gemerkt habe hauptsächlich das, dass wenn ich den Container an das Bild anpasse (38px) ist nur noch das Halbe Navigationsbild zu sehen. Die Schrift der Menüpunkte ist dann auch NICHT mehr zu sehen.
Wenn ich es dann auf 55 px stelle, Kann man das gesamte Navi Bild sehen, die
Schrift zwar auch aber sie ist dann zu weit unten.

Ich hab irgendwie eher das Gefühl dass es mit dem restlichen Code zusammenhängt; aber ich weiß nicht mit was.


table{margin:auto;}


body {
background-image: url(http://hitskin.com/themes/17/30/07/i_background.jpg);
background-color: #000 ;
background-position: center top;
}

Zitat:
#header {
margin: auto;
height: 300px;
width: 900px;
background-image: url(http://img.webme.com/pic/m/mineland-test/header1.png);
}

#container {
width: 900px;
margin: auto;
overflow: hidden;
margin-top: 0px;
background-image: url();
background-color: #;
border-top: 1px solid #;
border-left: 1px solid #;
border-right: 1px solid #;
}


#content {
left: 50%;
float: left;
width: 900px;
margin-top: -19px;
margin: center;
padding: 20px;
font-size: 14px;
color: #FFFFFF;
background-image: url(http://img.webme.com/pic/m/mineland-test/123rtgrf.png);
font-family: Arial;
background-repeat: x-repeat;
background-color: #313131;
border-right: 0px solid #c9c9c9;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;}




#newstext {
position: absolute;
width: 990px;
margin-top: -50px;
margin-left: -480px;
overflow: hidden;}

#Links {
position: absolute;
left: 50%;
margin-top: 175px;
margin-left: -460px;
overflow: hidden;}

#Logo {
position: absolute;
background-image: url(http://img.webme.com/pic/p/play-flame/santa20.gif);
margin-top: 18px;
left: 50%;
margin-left: 185px;
width: 250px;
height: 175px;
overflow: hidden;}

#Logoschrift {
position: absolute;
margin-top: 148px;
left: 50%;
margin-left: 210px;
overflow: hidden;}


#nav_container {
margin: 0px;
width: 900px;
height: 55px;
background: url(http://i47.servimg.com/u/f47/16/87/41/46/naviii10.png);
background-repeat: x-repeat;
float: left;
font-family: sans bold;
padding: 0px;
font-size: 16px;
}

#nav a {
float: left;
text-decoration: none;
color: #FFF;
padding: 11px 10px;
border-right: 0px solid #202020}

ul#nav{
padding: 0px;
margin: 0px;}

#nav a:hover {
color: #414141;}

#nav li {
list-style-type: none;}

#footer {
height:70px;
width: 900px;
background: url(http://i47.servimg.com/u/f47/16/87/41/46/footer11.png);
margin-top:50px;
margin: auto;
padding:0px;
}

h1#header span{display:none;}



LG


Zuletzt bearbeitet von mineland-test am 21.10.2011, 16:50, insgesamt 2-mal bearbeitet
↑
Beiträge der letzten Zeit anzeigen:   
  • Seite 1 von 1

  •  
    • Gehe zu:  


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de

© 2025 webme GmbH, Deutschland. Alle Rechte vorbehalten.