Thomas: Navigationsleiste zentrieren

SELF-Forum

Navigationsleiste zentrieren

Thomas Homepage des Autors
– Informationen zu den Bewertungsregeln

Hallo zusammen,

ich möchte gerne meine Navigation mittig zentrieren. Der Block unter "<div id="navi">"

Bekomme das nicht hin, wer kann mir da einen Tipp geben?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
       "http://www.w3.org/TR/html4/loose.dtd">  
  
<html>  
<head>  
<title>Ihr Computerspezialist in Schalksm&uuml;hle und Umgebung</title>  
<link rel="stylesheet" media="screen" href="css/default.css">  
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">  
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">  
  
  
<script type="text/javascript"> <!--  
function UnCryptMailto(s, shift) {  
	var n=0;  
	var r="";  
	for(var i=0;i<s.length;i++) {  
		n=s.charCodeAt(i);  
		if (n>=8364) {n = 128;}  
		r += String.fromCharCode(n-(shift));  
	}  
	return r;  
}  
function linkTo_UnCryptMailto(s, shift)	{  
	location.href=UnCryptMailto(s, shift);  
}  
// --> </script>  
  
</head>  
<body>  
  
<div id="content">  
	<h1>Willkommen auf www.computer-notfallhilfe.de</h1>  
</div>  
  
<p>&nbsp;</p>  
  
<div id="navi">  
<ul>  
 <li><a href="index.html">Start</a> </li>  
 <li><a href="dienstleistungen.html">Dienstleistungen</a> </li>  
 <li><a href="preise.html">Preise</a> </li>  
 <li><a href="anfahrt.html">Anfahrt</a> </li>  
 <li><a href="kontakt.html">Kontakt</a> </li>  
 <li><a href="referenzen.html">Referenzen</a><br> </li>  
<br style="clear: both;">  
</ul>  
</div><!--Ende Navi-->  
  
<p>&nbsp;</p>  
  
<div id="content">  
<h2>Ihr Computerspezialist in Schalksm&uuml;hle und Umgebung</h2><br><br>  
  
	<img src="images/logo.png" border="0" alt="PC, Laptop, Tablet, Smartphone">  
	<p>&nbsp;</p>  
<h2>Wir helfen ihnen gerne bei Computerproblemen aller Art.<br>  
 Alles Rund um PC, Laptop, Tablet und Smartphone.</h2><br><br>  
  
  
  
  
<p>&nbsp;</p>  
</div>  
  
<p>&nbsp;</p>  
  
<div id="content">	  
	<div>  
	<h1>Impressum</h1>Angaben gem. &sect; 5 TMG<br/><br/><b>Betreiber und Kontakt:</b><br /><br />Thomas Clemens Schnell<br> Am Nocken 59a<br />58579 Schalksm&uuml;hle<br /><br />Quelle: <a href='http://www.deutsche-anwaltshotline.de/recht-auf-ihrer-website/impressum-generator'>Impressum-Generator</a> der Deutschen Anwaltshotline AG  
  
	</div>  
</div>  
  
<p>&nbsp;</p>  
  
	  
<div id="copyright">  
  
	<p>  
		&copy; 2013 Thomas Clemens Schnell  
	</p>  
	  
	<p>  
		<a href="http://validator.w3.org/check?uri=http://www.thomas-schnell.com/computer-notfallhilfe"><img src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01 Transitional" height="31" width="88"></a>  
  
		<a href="http://jigsaw.w3.org/css-validator/check/referer">  
		<img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="CSS ist valide!">  
		</a>  
	</p>  
</div>  
  
<div id="copyright" align="center"><p><img src="http://www.computer-notfallhilfe.de/counter/basis-cgi/c.php?n=test_counter_1"></div></p>  
  
 </body>  
</html>

body  
{  
 width:65%;  
 margin-left: auto;  
 margin-right: auto;  
 font-family:Verdana;  
 font-size:12px;  
 background-color:#e5e5e5;  
 background-image: url(../images/background.jpg);  
background-repeat:repeat;  
background-position:left top;  
}  
  
#navigation {  
font-size: 5px;  
font-family:Verdana;  
padding:5px;  
border:1px solid #000000;  
background-color:#e5e5e5;  
text-align:center;  
}  
  
#navi  
{  
font-size: 12px;  
font-weight: bold;  
}  
  
#navi ul  
{  
margin: 0;  
padding: 0;  
list-style-type: none;  
}  
  
#navi li  
{  
float: left;  
margin-left: 5px;  
}  
  
#navi a  
{  
display: block;  
padding: 5px;  
width: 118px;  
height: 20px;  
background-image: url(../images/button_off.png);  
color: #68228B;  
text-decoration: none;  
text-align: center;  
}  
  
#navi a:visited  
{  
color: #000000;  
}  
  
#navi a:hover  
{  
color: #000000;  
background-image: url(../images/button_on.png);  
}  
  
#content {  
font-size: 10px;  
font-family:Verdana;  
padding:10px;  
border:1px solid #000000;  
background-color:#e5e5e5;  
text-align:center;  
}  
  
#copyright {  
font-size: 10px;  
font-family:Verdana;  
text-align:right;  
color:#FFFFFF;  
}  
  
a:link, a:visited  
{  
  text-decoration:none;  
  color:#000000;  
}
Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Navigationsleiste zentrieren

    M.
    – Informationen zu den Bewertungsregeln 
    
> <script type="text/javascript"> <!--  
> function UnCryptMailto(s, shift) {  
> 	var n=0;  
> 	var r="";  
> 	for(var i=0;i<s.length;i++) {  
> 		n=s.charCodeAt(i);  
> 		if (n>=8364) {n = 128;}  
> 		r += String.fromCharCode(n-(shift));  
> 	}  
> 	return r;  
> }  
> function linkTo_UnCryptMailto(s, shift)	{  
> 	location.href=UnCryptMailto(s, shift);  
> }  
> // --> </script>

    Die Kommentarzeichen sind IMO lange nicht mehr nötig. Diese Art der Unkenntlichmachungvon Mailaddressen bringt gar nichts mehr, weil Spambots mittlerweile (seit ein paar Jahren) Javascript können.

      

> <div id="navi">  
> <ul>  
>  <li><a href="index.html">Start</a> </li>  
>  <li><a href="dienstleistungen.html">Dienstleistungen</a> </li>  
>  <li><a href="preise.html">Preise</a> </li>  
>  <li><a href="anfahrt.html">Anfahrt</a> </li>  
>  <li><a href="kontakt.html">Kontakt</a> </li>  
>  <li><a href="referenzen.html">Referenzen</a><br> </li>  
> <br style="clear: both;">  
> </ul>  
> </div><!--Ende Navi-->

    Wozu das div, wieso formatierst du nicht direkt das ul?
    So nebenbei, Counter sind seit den 90ern des letzten Jahrtausends völlig out.

    [code lang=css

    #navigation {
    font-size: 5px;
    font-family:Verdana;
    padding:5px;
    border:1px solid #000000;
    background-color:#e5e5e5;
    text-align:center;
    }

    [/code]

    Wie soll das greifen, wenn es nirgends im HTML-Codeeine ID "navigation" gibt?
    Ein Validator hätte dir den fehler gezeigt.
    Gereicht hätte auch, dass du prüfst, welche Styles der Navigation zugewiesen sind, dann hättest du gesehen, dass die Navigation keine Ausrichtung hat.

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Navigationsleiste zentrieren

      Gunnar Bittersmann Homepage des Autors
      – Informationen zu den Bewertungsregeln

      @@M.:

      nuqneH

      <div id="navi">
      <ul>
      <li><a href="index.html">Start</a> </li>
      <li><a href="dienstleistungen.html">Dienstleistungen</a> </li>
      <li><a href="preise.html">Preise</a> </li>
      <li><a href="anfahrt.html">Anfahrt</a> </li>
      <li><a href="kontakt.html">Kontakt</a> </li>
      <li><a href="referenzen.html">Referenzen</a><br> </li>
      <br style="clear: both;">
      </ul>
      </div><!--Ende Navi-->

      
>   
> Wozu das div, wieso formatierst du nicht direkt das ul?  
  
Ein Element zur Auszeichnung der Navigation ist schon angebracht; es muss nur das [richtige](http://www.w3.org/TR/html5/sections.html#the-nav-element) sein.  
  
Aber wozu das br? Was auch gar nicht Kind von ul sein darf! Man braucht gar kein zusätzliches Element: [Einschließen (Clearing) von Floats](http://molily.de/weblog/css-floats-einschliessen).  
  
Qapla'

-- 
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  2. Navigationsleiste zentrieren

    M.
    – Informationen zu den Bewertungsregeln

    kleiner Nachtrag:

    Eine ID muss einmalig sein, du vergibst die mehrfach. Wie erwähnt, ein Validator hiltf.

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  3. Navigationsleiste zentrieren

    molily Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hallo,

    Das geht etwa, indem du die li-Elemente mit display: inline oder <http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display@title=display: inline-block> nebeneinander positionierst und beim Elternelement text-align: center setzt:

    #navi ul {  
  text-align: center;  
}  
  
#navi li {  
  display: inline-block;  
  vertical-align: top;  
}

    Entspricht das deiner Vorstellung?

    Grüße,
    Mathias

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln