Mein Vorschlag war, alles über background-image zu machen.
Du hast noch nie mit der Tastatur navigiert, oder?
Die sind bei jedem angeklickten Link.
Reden wir evtl. doch von was anderem? Einem border um ein verlinktes img?
Die Größe des Bildschirms ist beim Erstellen von Websites unerheblich. Wichtig ist die Größe des Viewports im Browserfenster.
Jetzt verstehe ich.
a img {
border:none;
}Nein, das ist schon in Ordnung so.
Macht was? Ich weiß grad nicht, worauf Du Dich beziehst.
<ul id="Menu">
<li><a href="foo.html" id="foo"><img src="foo.jpg" alt="foo" /></a></li>
<li><a href="bar.html" id="bar"><img src="bar.jpg" alt="bar" /></a></li>
</ul>a#foo:hover {
background-image:url(foo_hover.jpg);
}
a#bar:hover {
background-image:url(bar_hover.jpg);
}Ich denke schon, daß man die brauch, da ansonsten wir wieder an dem Punkt sind, daß der Vordergundbutton flackert und kein Hintergundbutton mehr erscheint :( Sofern sie nicht stören, können sie ja bleiben.
Er hat mir Ankerpunkte neben die Buttons gesetzt - einzeln kann ich die nicht entfernen, dann geht der ganze Button weg :( Aber tut dem warscheinlich auch nichts zu Sache oder?
Na, das geht ja nicht. Zentrieren kannst Du höchstens die gesamte Liste, nebeneinander die einzelnen Listenpunkte.
Das sollte damit nichts zu tun haben. Wenn Du die raus nimmst, musst Du nur die CSS-Selektoren ändern, weil es dann ja kein "#bild" mehr gibt. Aber das ist der Grund, warum ich immer sage, dass man zuerst den Inhalt machen soll, dann alles semantisch richtig auszeichnen soll und erst dann Layout und Design machen soll.
Sie sind überflüssig und verhindern, dass Du die Materie richtig lernst.
CSS kommt immer in den Bereich, ja. Später ist es natürlich besser, alles in ein externes Stylesheet auszulagern, aber zum Testen wie jetzt ist es so auch in Ordnung.
ul li { float:left; }Ich würde mir den Code nicht von einem Programm schreiben lassen. In Dreamweaver gibts - so sagt man - auch eine Code-Ansicht.
ul { list-style-type:none; }Ich kenne Dreamweaver nicht, ich schreibe meinen Code in einem Texteditor. In HTML gibts keine "Ankerpunkte". Die Anker, die es da gibt, sehen so aus und sind veraltet:
<a name="anker1"></a>Oder meinst Du die Links? Das sind ja auch Anker (<a>). Die willst Du ja behalten, Du willst ja die Buttons verlinken.
Du fängst ja auch von hinten an und außerdem fehlen Dir die essenziellen Grundlagen.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de"
dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/
html;charset=iso-8859-1" />
<title>horinzontale Navigation</title>
<link rel="stylesheet" title="Default" href="css/horizontaleNavigation.css" type="text/css" media="screen"/>
</head>
<body>
<ul id="mainNavi">
<li id="active"><span>Startseite</span></li>
<li><a href="#">Über uns</li>
<li><a href="#">Konatakt</li>
</ul>
</body>
</html>ul#mainNavi {
width:80%;
float:left;
padding:15px 5px 0 5px;
margin:0;
list-style:none;
border-width:0 0 5px 0;
border-style:solid;
border-color:#6EB327;
background-color:#325FCC;
}
ul#mainNavi li {
float:left;
margin:0;
padding:0;
color:#020F34;
font:bold 81.25%/2 Arial, Verdana, sans-serif;
}
ul#mainNavi li#active {
margin:0 6px 0 0;
padding:0 0 0 5px;
background:#6EB327 url(../images/bg_activeLeft.gif) left top no-repeat;
}
ul#mainNavi li#active span {
display:block;
margin:0;
padding:0 15px 0 10px;
background:#6EB327 url(../images/bg_active.gif) right top no-repeat;
}
ul#mainNavi a {
display:block;
white-space:nowrap;
margin:0 0px 0 -5px;
padding:0 15px;
color:#FFF;
background:#010F34 url(../images/bg_inactive.gif) right top no-repeat;
text-decoration:none;
}
ul#mainNavi a:hover {
background:#6EB327 url(../images/bg_active.gif) right top no-repeat;
padding:0 15px;
}<body>
<p id="bild" href="foo.html">
<a href="foo.html" id="bild"><img src="../Eigene Webseite-Bilder/Buttons/homer-klein.png" alt="Home" /></a>
<a href="bar.html" id="foo"><img src="../Eigene Webseite-Bilder/Buttons/Unser Prinzip-klein.png" alt="Unser Prinzip" /></a>
</p>
</body><body>
<ul id="navigation">
<li><a href="foo.html" id="bild"><img src="../Eigene-Webseite-Bilder/Buttons/homer-klein.png" alt="Home" /></a></li>
<li><a href="bar.html" id="foo"><img src="../Eigene-Webseite-Bilder/Buttons/Unser-Prinzip-klein.png" alt="Unser Prinzip" /></a></li>
</ul>
</body>ul#navigation {
}
ul#navigation li {
}ul#navigation {
list-style:none;
}
ul#navigation li {
float:left;
}