horizontale Navigation margin,padding
paeonia
- css
0 Matthias Apsel0 paeonia0 Matthias Apsel0 paeonia0 Matthias Apsel0 ChrisB
0 ChrisB0 Adolf
Hi zusammen,
folgende Auszeichnung produziert links, die etwa so aussehen:
|aaa||bbb||ccc ....
warum fallen die Linien nicht zusammen?
Wie kann ich erreichen, dass das Ganze so aussieht:
|aaa|bbb|ccc| ...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#navigation ul {
display:inline;
margin: 0;
padding:0;
}
#navigation li {
display: inline;
border-right:red solid 2px;
border-left:red solid 2px;
padding: 0;
margin:;
}
#navigation a{
margin:0;
padding:0;
}
#navigation a:link, #navigation a:visited {
margin:0;
padding:0;
}
#navigation a:hover {
}
#navigation span {
margin:0;
padding:0;
}
</style>
</head>
<body>
<div id="navigation">
<ul>
<li><span>Home</span></li>
<li><a href="slinks1.html">aaa</a></li>
<li><a href="slinks2.html">bbbbbb</a></li>
<li><a href="slinks3.html">ccccc</a></li>
<li><a href="slinks4.html">ddd</a></li>
<li><a href="slinks5.html">eeeeeeeeeeeeee</a></li>
<li><a href="s6.html">fffffffffffffffffffff</a></li>
</ul>
</div>
</body>
</html>
Danke für Eure Antwort sagt paeonia
Om nah hoo pez nyeetz, paeonia!
warum fallen die Linien nicht zusammen?
Der Link zum Boxmodell sollte zunächst reichen, dich auf den richtigen Weg zu schubsen. Ebenfalls im Wiki kannst du dich über Rahmen informieren
Wie kann ich erreichen, dass das Ganze so aussieht: |aaa|bbb|ccc| ...
wenn du nicht weiterkommst, informiere uns über deine bisherigen Versuche.
Matthias
Hi Matthias,
wenn du nicht weiterkommst, informiere uns über deine bisherigen Versuche.
außerhalb von Border, was ich mit 2px red solid ausgezeichnet habe, kommt margin. Den habe überall mit margin:0; ausgezeichnet, da "0" brauche ich keine Einheit.
Zugegeben, die margin-0-Angabe kommt etwas zu oft, weil ich alles ausschließen wollte, aber entfernen kann ich sie dann schrittweise, wenn ich das gewünschte Ergebnis habe.
Warum ist da ein margin, wenn ich margin:0 angebe? Border-collapse ist für Tabellen, das kann ich nicht gebrauchen, oder?
Matthias
Om nah hoo pez nyeetz, paeonia!
Warum ist da ein margin, wenn ich margin:0 angebe?
Da befindet sich whitespace.
Nun könnte man mit negativen margins arbeiten oder jeweils nur einen border setzen.
Matthias
Hallo Matthias,
<ul><li><span>Home</span></li><li><a href="slinks1.html">aaa</a></li><li><a href="slinks2.html">bbbbbb</a></li><li><a href="slinks3.html">ccccc</a></li><li><a href="slinks4.html">ddd</a></li><li><a href="slinks5.html">eeeeeeeeeeeeee</a></li><li><a href="s6.html">fffffffffffffffffffff</a></li></ul>
tatsächlich, so funktioniert's. Wie kommt man denn auf sowas!!
negative margins hatte ich schon erfolgreich versucht, dachte aber, daß ich solche Tricks nicht verwenden sollte. Aber wenn Du das vorschlägst ...
Danke erst mal für Deine Hilfe, wenn ich die Ursache kenne, dann kann ich mir weiterhelfen.
Grüße von paeonia
Om nah hoo pez nyeetz, paeonia!
mein Favorit:
gib allen Listenelementen nur ein border-left. Entferne diesen für das erste Listenelement. Verwende dazu die Pseudoklasse :first-child.
Matthias
Hi,
tatsächlich, so funktioniert's. Wie kommt man denn auf sowas!!
Durch Grundlagenkenntnisse in HTML.
MfG ChrisB
Hi,
folgende Auszeichnung produziert links, die etwa so aussehen:
|aaa||bbb||ccc ....
warum fallen die Linien nicht zusammen?
Weil sich Whitespace zwischen den Elementen befindet.
MfG ChrisB
Hi,
vielleicht hilft Dir die Forumsuche mit pipedream in 2009.
Adolf