nicht angemeldet
Navigation zentrieren
Hallo zusammen, habe mein Layout so gut wie fertig gestellt. Funktioniert im IE und im Mozilla so wie ich es möchte, aber nur bei einer Auflösung von 1024 x 768. Wo ist denn inhaltlich der Unterschied wenn ich die Auflösung auf 1280 x 1024 setze? Verstehe das nicht.
Vielleicht kann mir jemand helfen, würde mich freuen.
Der Code ist nichts besonderes, ich weiß. Ist für mich aber ausreichend.
Wäre cool wenn die Navigation auch bei 1280x1024 richtig dargestellt wird.
Gruß Markus
-
Hallo,
Der Code ist nichts besonderes, ich weiß. Ist für mich aber ausreichend.
Trotzdem solltest du ihn mal zeigen, bzw. die Seite verlinken.
Ich tippe mal auf absolute Positionierung und daraus folgende Überlappungen. Meistens ist float besser für Seitenlayouts geeignet.
mfg. Daniel
-
Hallo,
Der Code ist nichts besonderes, ich weiß. Ist für mich aber ausreichend.
Trotzdem solltest du ihn mal zeigen, bzw. die Seite verlinken.
Ich tippe mal auf absolute Positionierung und daraus folgende Überlappungen. Meistens ist float besser für Seitenlayouts geeignet.
mfg. Daniel
http://www.osnanet.de/markus.buennagel/HTML/Forum.html
-
Hallo,
Der Code enthält leider viele Fehler, weshalb es nicht sei einfach sein wird, herauszufinden, woran es liegt.
Am Besten gehen wir ihn mal schrittweise durch:Hier fehlt die http://de.selfhtml.org/html/allgemein/grundgeruest.htm#dokumenttyp@title=Dokumenttyp-Deklaration, weshalb die Seiten im Quirkmode (Ratemodus) dargestellt wird. Um eine einheitliche Darstellung zu erreichen, solltest du eine vollständige Dokumenttyp-Deklaration verwenden.
<html> <div align="center"> <table border="0" cellspacing="0" cellpadding="0"> <colgroup> <col width="1020"> </colgroup> <tr> <td><img src="http://www.osnanet.de/markus.buennagel/Bilder/Logo35.jpg" width="1020" height="82" border="0" alt=""></td> </tr> </table> </div>Was hat HTML-Code, sich sichtbar sein soll, außerhalb des <body>'s zu suchen?
<style type="text/css">~~~css
#nav, #nav ul
{
margin: 0;
padding: 0;
}#nav ul
{}
#nav li {list-style:none;
float: left;
width:170px;
height:22px;
background-color:#ffffcc;
font-size:12px;
font-family:Verdana, Helvetia,sans-serif;
font-weight:bold;
text-decoration:none;
text-align:center;
vertical-align:middle;
background-image:url("http://www.osnanet.de/markus.buennagel/Bilder/Button8.jpg");
}
#nav li a{font-family:Verdana, Helvetia,sans-serif;
text-decoration:none;
color:#000000;
font-weight:bold;
font-size:12px;
padding:2px;
background-color:#ffffcc;
border-style:solid;
border-width:0px;
text-align:center;
vertical-align:middle;
background-image:url("http://www.osnanet.de/markus.buennagel/Bilder/Button8.jpg");
display:block;
}
#nav li a:link {display:block;background-color:#ffffcc;color:#000000;font-weight:bold;font-family:Verdana, Helvetia,sans-serif;font-size:12px;text-decoration:none;border-style:solid;border-width:0px;text-align:center;vertical-align:middle;background-image:url("http://www.osnanet.de/markus.buennagel/Bilder/Button8.jpg");}
#nav li a:visited {display:block;background-color:#ffffcc;color:#000000;font-weight:bold;font-family:Verdana, Helvetia,sans-serif;font-size:12px;border-style:solid;border-width:0px;text-align:center;vertical-align:middle;background-image:url("http://www.osnanet.de/markus.buennagel/Bilder/Button8.jpg");}
#nav li a:hover {display:block;background-color:#ffffcc;color:#000000;font-weight:bold;font-family:Verdana, Helvetia,sans-serif;font-size:12px;text-decoration:none;border-style:solid;border-width:0px;text-align:center;vertical-align:middle;background-image:url("http://www.osnanet.de/markus.buennagel/Bilder/Button8.jpg");}
#nav li a:active {display:block;background-color:#ffffcc;
color:#000000;font-weight:bold;font-family:Verdana, Helvetia,sans-serif;font-size:12px;border-style:solid;border-width:0px;text-align:center;vertical-align:middle;background-image:url("http://www.osnanet.de/markus.buennagel/Bilder/Button8.jpg");}</style> Stylesheets gehören in den <head>-Bereich! Außerdem noch ein kleiner Tipp zum Stylesheet: der Selektor „a“ schließt a:link,a:visited,a:hover und a:active mit ein. Warum notierst du also alles doppelt? `<body bgcolor="#FFFFFF" text="#000000">`{:.language-html} Das ist zwar nicht falsch, sollte aber nicht mehr verwendet werden. Schreibe lieber: `body {background-color:#ffffff; color:#000000;}`{:.language-css} in ein Stylesheet. `<ul id="nav">`{:.language-html} Du vwerwendest also eine Aufzählungsliste für deine Navigation. Das ist korrekt... ~~~html <table border="0" cellspacing="0" cellpadding="0"> <colgroup> <col width="1020"> </colgroup> <tr valign="top"> <td>... das dagegen nicht! Das Kindelement von <ul> muss immer <li> sein.
<li><a img src="http://www.osnanet.de/markus.buennagel/Bilder/Button8.jpg" width="170" height="22" border="0" alt=""></a></li> </td> <td> <li><a href="http://www.osnanet.de/markus.buennagel/HTML/AGB.html">AGB</a></li> </td> <td> <li><a href="http://www.osnanet.de/markus.buennagel/HTML/Garantie.html">Garantie</a></li> </td> <td> <li><a href="http://www.osnanet.de/markus.buennagel/HTML/R%fcckgabe.html">Rückgabe</a></li> </td> <td> <li><a href="http://www.osnanet.de/markus.buennagel/HTML/Versand.html">Versand</a></li> </td> <td> <li><a img src="http://www.osnanet.de/markus.buennagel/Bilder/Button8.jpg" width="170" height="22" border="0" alt=""></a></li> </td> </tr> </table>Überhaupt frage ich mich, wozu du die Tabelle brauchst. Auch eine vertikale Navigation lässt sich ganz einfach mit CSS und einer einfachen Aufzählungsliste erstellen.
</ul> <div align="center">Warum arbeitest du hier nicht mit CSS und Text-align:center; ?
<table border="0" cellspacing="0" cellpadding="0"> <colgroup> <col width="1020"> </colgroup> <tr align="center"> <td> <img src="http://www.osnanet.de/markus.buennagel/Bilder/Unter%20Logo9.jpg" width="1020" height="60" border="0" alt=""> </td> </tr> </table> </div></body></html>Du solltest also erst einmal die Fehler beheben, die Datei validieren.
mfg. Daniel
-
Hallo Daniel, vielen Dank für deine Antwort. Ich habe die Änderungen vorgenommen, leider hat es nicht viel gebracht.
Ich habe jetzt mal ein Beispiel-Code erstellt, mit geringen Angaben.
Die Navigation ist nun zentriert und ohne Tabelle erstellt, danke für den Tipp.
Nur ich kann die Breite der einzelnen Buttons nicht ändern. Was mache ich falsch?
{width: 300px; height: 30px;}
Würde mich freuen wenn du nochmal drüberschaust.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Navigationsleisten</title>
<style type="text/css">body, a {text-align: center;}
font: normal 100.01% Helvetica, Arial, sans-serif;
color: black; background-color: white;
}ul#Navigation {
margin: 0; padding: 0;
}
ul#Navigation li {
width: 300px; height: 30px;
list-style: none;
display: inline;
text-align:center;
background-image:url("http://www.osnanet.de/markus.buennagel/Bilder/Button8.jpg");margin: 0; padding: 0;
}</style>
</head>
<body>
<h1>Navigationsleiste ...</h1><ul id="Navigation">
<li><a href="nav_definieren.htm">Beispiel 1</a></li>
<li><a href="nav_formatieren.htm">Beispiel 2</a></li>
<li><a href="nav_rollover.htm">Beispiel 3</a></li>
</ul></body>
</html>-
Hallo,
Nur ich kann die Breite der einzelnen Buttons nicht ändern. Was mache ich falsch?
s.u.
Würde mich freuen wenn du nochmal drüberschaust.
Aber sicher doch.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Navigationsleisten</title>
<style type="text/css">body, a {text-align: center;}
font: normal 100.01% Helvetica, Arial, sans-serif;
color: black; background-color: white;
}Hier ist eine Klammer zu viel. Unbedingt ändern!
Kleiner Tipp: Die JavaScript-Konsole (von FF 1.5) bzw. die Fehlerkonsole (von FF 2) zeigt dir auch solche CSS-Fehler an.
ul#Navigation {
margin: 0; padding: 0;
}
ul#Navigation li {
width: 300px; height: 30px;
list-style: none;
display: inline;
text-align:center;
background-image:url("http://www.osnanet.de/markus.buennagel/Bilder/Button8.jpg");margin: 0; padding: 0;
}Du kannst hier keine Breite festlegen, weil du „display:inline“ angegeben hast. Wenn du eine Breite vorgeben willst, musst du jedoch mit display:block, sowie float arbeiten.
So hat es bei mir funktioniert (Formatierungen für den Body sind nicht enthalten):
###Mein Code########
ul#Navigation { margin: 0 auto; /*Navigation in der Mitte ausrichten*/ padding: 0; width:400px; /*Gesamtbreite aller <li>'s - ohne die, kannst du die Navigation nicht zentrieren*/ } ul#Navigation li { width: 100px; /*Ich habe den Wert ein wenig verändert - kannst du je nach Bedarf anpassen*/ height: 30px; list-style: none; float:left; /*<li>'s nebeneinander setzen*/ text-align:center; background-image:url("http://www.osnanet.de/markus.buennagel/Bilder/Button8.jpg"); margin: 0; padding: 0; }###Mein Code#########
Ansonsten sieht der Code aber schon mal sehr gut aus. Weiter so!
mfg. Daniel
-
-
-
-