CSS Menü "border-left und right" übergreifend ändern

Jens_S · 03.02.2010

Hallo liebe Leute,

ich zerbreche mir gerade den Kopf.

Folgendes:
Ich möchte ein Menü erstellen in dem die Menüpunkte immer nur durch eine Linie getrennt sind.
Kein Problem mit: border-right.

Punkt1 | Punkt2 | Punkt3 | Punkt4

Das letzte wird mit einer eigenen Klasse versehen um die Linie am Ende nicht mehr anzuzeigen.

Beim überfahren soll der Menüpunkt der angeklickt wird eine Linie rechts und links haben und in einer anderen Farbe.
Das funktioniert ja auch mit border left und border right.

Problem:
Es würde dann aber folgendermaßen aussehen wenn ich auf Punkt 2 gehe:
Punkt1 | |Punkt2 | Punkt3 | Punkt4

Da Punkt1 border right hat ist dieser auch noch da, also habe ich da eine doppellinie.

Frage:
Wie könnte ich jetzt beim Punkt2 sagen das der Punkt1 keinen Rahmen mehr haben soll?

Hier ist noch eine Darstellung:

mantonis · 04.02.2010

AW: CSS Menü "border-left und right" übergreifend ändern

Stell doch mal bitte das entsprechende Script ein!

Jens_S · 04.02.2010

AW: CSS Menü "border-left und right" übergreifend ändern

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Men&uuml;test</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">

body{background-color:silver;}
#nav{
list-style:none; font-family:Arial;font-size:9pt;}
#nav li{
display:inline;
text-align:center;
}
#nav li a.punkt{
width:150px;
display:inline;
text-align:center;
border-right:1px solid white;
}

#nav li a:hover.punkt{
width:150px;
display:inline;
text-align:center;
border:none;
border-right:1px solid green;
border-left:1px solid green;
}
#nav li a.letzterpunkt{
width:150px;
display:inline;
text-align:center;

}
#nav li a:hover.letzterpunkt{
width:150px;
display:inline;
text-align:center;
border:none;
border-right:1px solid green;
border-left:1px solid green;

}


</style>
</head>
<body>
<ul id="nav">
<li>
<a class="punkt" href="#">Punkt1</a>
</li>

<li>
<a class="punkt" href="#">Punkt2</a>
</li>

<li>
<a class="punkt" href="#">Punkt3</a>
</li>

<li>
<a class="letzterpunkt" href="#">Punkt4</a>
</li>


</ul>

</body>
</html>

Das wäre mal der Test code.

mwxx · 04.02.2010

AW: CSS Menü "border-left und right" übergreifend ändern

Hallo,

gib doch der Menüpunktklasse zusätzlich eine border-left : 1px solid transparent und ein margin-left: -1px, so dass die linke border unsichtbar direkt über der rechten des links daneben liegenden Menüpunktes liegt. Dann kannst Du bei :hover die linke border färben und der Strich ist nur noch einmal da !?

Jens_S · 04.02.2010

AW: CSS Menü "border-left und right" übergreifend ändern

Das haut so irgendwie nicht hin.
Der IE versteckt dann den linken Border unter dem rechten vom Punkt davor.
Noch ne Idee?

hier ist noch mal der neue Code

Code:

[SIZE=2]<!DOCTYPE HTML PUBLIC [/SIZE][SIZE=2][COLOR=#0000f0][SIZE=2][COLOR=#0000f0]"-//W3C//DTD HTML 4.01 Transitional//EN"[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]>[/SIZE]
[SIZE=2]<html>[/SIZE]
[SIZE=2]<head>[/SIZE]
[SIZE=2]<title>Men[B][I]&uuml[/I][/B];test</title>[/SIZE]
[SIZE=2]<meta http-equiv=[/SIZE][SIZE=2][COLOR=#0000f0][SIZE=2][COLOR=#0000f0]"content-type"[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2] content=[/SIZE][SIZE=2][COLOR=#0000f0][SIZE=2][COLOR=#0000f0]"text/html; charset=iso-8859-1"[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]>[/SIZE]
[SIZE=2][COLOR=#800000][SIZE=2][COLOR=#800000]<style[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#ff00f0][SIZE=2][COLOR=#ff00f0]type[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]="[/SIZE][SIZE=2][COLOR=#ff00f0][SIZE=2][COLOR=#ff00f0]text[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]/[/SIZE][SIZE=2][COLOR=#ff00f0][SIZE=2][COLOR=#ff00f0]css[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]">[/SIZE]
[I][SIZE=2][COLOR=#808000][SIZE=2][COLOR=#808000]<!--[/COLOR][/SIZE][/COLOR][/SIZE][/I][SIZE=2][COLOR=#808000]
[/COLOR][/SIZE][SIZE=2][COLOR=#ff00f0][SIZE=2][COLOR=#ff00f0]body[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2]{[/SIZE][/B][SIZE=2]background-color[B]:[/B][/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]silver[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2];}[/SIZE][/B]
 
[SIZE=2]#[/SIZE][SIZE=2][COLOR=#ff00f0][SIZE=2][COLOR=#ff00f0]nav[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2]{[/SIZE][/B]
[SIZE=2]width[B]:[/B][/SIZE][SIZE=2][COLOR=#0000f0][SIZE=2][COLOR=#0000f0]690[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]px[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2];[/SIZE][/B]
[SIZE=2]list-style[B]:[/B][/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]none[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2];[/SIZE][/B]
[SIZE=2]font-family[B]:[/B][/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]Arial[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2];[/SIZE][/B]
[SIZE=2]font-size[B]:[/B][/SIZE][SIZE=2][COLOR=#0000f0][SIZE=2][COLOR=#0000f0]9[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]pt[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2];[/SIZE][/B]
[SIZE=2]text-align[B]:[/B][/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]center[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2];[/SIZE][/B]
[SIZE=2][B]}[/B][/SIZE]
 
[SIZE=2]#[/SIZE][SIZE=2][COLOR=#ff00f0][SIZE=2][COLOR=#ff00f0]nav [/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#ff00f0][SIZE=2][COLOR=#ff00f0]li[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2]{[/SIZE][/B]
[SIZE=2]position[B]:[/B][/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]relative[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2];[/SIZE][/B]
[SIZE=2]z-index[B]:[/B][/SIZE][SIZE=2][COLOR=#0000f0][SIZE=2][COLOR=#0000f0]1[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2];[/SIZE][/B]
[SIZE=2]display[B]:[/B][/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]inline[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2];[/SIZE][/B]
[SIZE=2]text-align[B]:[/B][/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]center[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2];[/SIZE][/B]
 
[SIZE=2][B]}[/B][/SIZE]
 
[SIZE=2]#[/SIZE][SIZE=2][COLOR=#ff00f0][SIZE=2][COLOR=#ff00f0]nav [/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#ff00f0][SIZE=2][COLOR=#ff00f0]li [/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#ff00f0][SIZE=2][COLOR=#ff00f0]a[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2].[/SIZE][/B][SIZE=2][COLOR=#ff00f0][SIZE=2][COLOR=#ff00f0]punkt[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2]{[/SIZE][/B]
 
[SIZE=2]display[B]:[/B][/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]inline[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2];[/SIZE][/B]
[SIZE=2]text-align[B]:[/B][/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]center[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2];[/SIZE][/B]
[SIZE=2]border-right[B]:[/B][/SIZE][SIZE=2][COLOR=#0000f0][SIZE=2][COLOR=#0000f0]1[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]px [/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]solid [/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]white[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2];[/SIZE][/B]
[SIZE=2]border-left[B]:[/B][/SIZE][SIZE=2][COLOR=#0000f0][SIZE=2][COLOR=#0000f0]1[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]px [/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]solid [/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]transparent[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2];[/SIZE][/B]
[SIZE=2]margin-left[B]:[/B]-[/SIZE][SIZE=2][COLOR=#0000f0][SIZE=2][COLOR=#0000f0]1[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]px[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2];[/SIZE][/B]
[SIZE=2]padding-left[B]:[/B][/SIZE][SIZE=2][COLOR=#0000f0][SIZE=2][COLOR=#0000f0]10[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]px[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2];[/SIZE][/B]
[SIZE=2]padding-right[B]:[/B][/SIZE][SIZE=2][COLOR=#0000f0][SIZE=2][COLOR=#0000f0]10[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]px[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2];[/SIZE][/B]
[SIZE=2]padding-top[B]:[/B][/SIZE][SIZE=2][COLOR=#0000f0][SIZE=2][COLOR=#0000f0]10[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]px[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2];[/SIZE][/B]
[SIZE=2][B]}[/B][/SIZE]
 
[SIZE=2]#[/SIZE][SIZE=2][COLOR=#ff00f0][SIZE=2][COLOR=#ff00f0]nav [/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#ff00f0][SIZE=2][COLOR=#ff00f0]li [/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#ff00f0][SIZE=2][COLOR=#ff00f0]a[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]:[/SIZE][SIZE=2][COLOR=#ff00f0][SIZE=2][COLOR=#ff00f0]hover[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2].[/SIZE][/B][SIZE=2][COLOR=#ff00f0][SIZE=2][COLOR=#ff00f0]punkt[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2]{[/SIZE][/B]
 
[SIZE=2]display[B]:[/B][/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]inline[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2];[/SIZE][/B]
[SIZE=2]text-align[B]:[/B][/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]center[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2];[/SIZE][/B]
[SIZE=2]border[B]:[/B][/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]none[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2];[/SIZE][/B]
[SIZE=2]border-right[B]:[/B][/SIZE][SIZE=2][COLOR=#0000f0][SIZE=2][COLOR=#0000f0]1[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]px [/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]solid [/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]green[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2];[/SIZE][/B]
[SIZE=2]border-left[B]:[/B][/SIZE][SIZE=2][COLOR=#0000f0][SIZE=2][COLOR=#0000f0]1[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]px [/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]solid [/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]green[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2];[/SIZE][/B]
[SIZE=2]margin-left[B]:[/B]-[/SIZE][SIZE=2][COLOR=#0000f0][SIZE=2][COLOR=#0000f0]1[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]px[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2];[/SIZE][/B]
[SIZE=2]padding-left[B]:[/B][/SIZE][SIZE=2][COLOR=#0000f0][SIZE=2][COLOR=#0000f0]10[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]px[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2];[/SIZE][/B]
[SIZE=2]padding-right[B]:[/B][/SIZE][SIZE=2][COLOR=#0000f0][SIZE=2][COLOR=#0000f0]10[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]px[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2];[/SIZE][/B]
[SIZE=2]padding-top[B]:[/B][/SIZE][SIZE=2][COLOR=#0000f0][SIZE=2][COLOR=#0000f0]10[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]px[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2];[/SIZE][/B]
[SIZE=2][B]}[/B][/SIZE]
[SIZE=2]#[/SIZE][SIZE=2][COLOR=#ff00f0][SIZE=2][COLOR=#ff00f0]nav [/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#ff00f0][SIZE=2][COLOR=#ff00f0]li [/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#ff00f0][SIZE=2][COLOR=#ff00f0]a[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2].[/SIZE][/B][SIZE=2][COLOR=#ff00f0][SIZE=2][COLOR=#ff00f0]letzterpunkt[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2]{[/SIZE][/B]
 
[SIZE=2]display[B]:[/B][/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]inline[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2];[/SIZE][/B]
[SIZE=2]text-align[B]:[/B][/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]center[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2];[/SIZE][/B]
[SIZE=2]border-left[B]:[/B][/SIZE][SIZE=2][COLOR=#0000f0][SIZE=2][COLOR=#0000f0]1[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]px [/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]solid [/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]transparent[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2];[/SIZE][/B]
[SIZE=2]margin-left[B]:[/B]-[/SIZE][SIZE=2][COLOR=#0000f0][SIZE=2][COLOR=#0000f0]1[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]px[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2];[/SIZE][/B]
[SIZE=2]padding-left[B]:[/B][/SIZE][SIZE=2][COLOR=#0000f0][SIZE=2][COLOR=#0000f0]10[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]px[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2];[/SIZE][/B]
[SIZE=2]padding-top[B]:[/B][/SIZE][SIZE=2][COLOR=#0000f0][SIZE=2][COLOR=#0000f0]10[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]px[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2];[/SIZE][/B]
[SIZE=2]padding-right[B]:[/B][/SIZE][SIZE=2][COLOR=#0000f0][SIZE=2][COLOR=#0000f0]10[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]px[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2];[/SIZE][/B]
 
[SIZE=2][B]}[/B][/SIZE]
[SIZE=2]#[/SIZE][SIZE=2][COLOR=#ff00f0][SIZE=2][COLOR=#ff00f0]nav [/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#ff00f0][SIZE=2][COLOR=#ff00f0]li [/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#ff00f0][SIZE=2][COLOR=#ff00f0]a[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]:[/SIZE][SIZE=2][COLOR=#ff00f0][SIZE=2][COLOR=#ff00f0]hover[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2].[/SIZE][/B][SIZE=2][COLOR=#ff00f0][SIZE=2][COLOR=#ff00f0]letzterpunkt[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2]{[/SIZE][/B]
[SIZE=2]display[B]:[/B][/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]inline[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2];[/SIZE][/B]
[SIZE=2]text-align[B]:[/B][/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]center[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2];[/SIZE][/B]
[SIZE=2]border[B]:[/B][/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]none[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2];[/SIZE][/B]
[SIZE=2]border-right[B]:[/B][/SIZE][SIZE=2][COLOR=#0000f0][SIZE=2][COLOR=#0000f0]1[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]px [/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]solid [/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]green[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2];[/SIZE][/B]
[SIZE=2]border-left[B]:[/B][/SIZE][SIZE=2][COLOR=#0000f0][SIZE=2][COLOR=#0000f0]1[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]px [/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]solid [/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]green[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2];[/SIZE][/B]
[SIZE=2]margin-left[B]:[/B]-[/SIZE][SIZE=2][COLOR=#0000f0][SIZE=2][COLOR=#0000f0]1[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]px[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2];[/SIZE][/B]
[SIZE=2]padding-left[B]:[/B][/SIZE][SIZE=2][COLOR=#0000f0][SIZE=2][COLOR=#0000f0]10[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]px[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2];[/SIZE][/B]
[SIZE=2]padding-right[B]:[/B][/SIZE][SIZE=2][COLOR=#0000f0][SIZE=2][COLOR=#0000f0]10[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]px[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2];[/SIZE][/B]
[SIZE=2]padding-top[B]:[/B][/SIZE][SIZE=2][COLOR=#0000f0][SIZE=2][COLOR=#0000f0]10[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]px[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2];[/SIZE][/B]
 
[SIZE=2][B]}[/B][/SIZE]
 
[I][SIZE=2][COLOR=#808000][SIZE=2][COLOR=#808000]-->[/COLOR][/SIZE][/COLOR][/SIZE][/I][SIZE=2][COLOR=#808000]
[/COLOR][/SIZE][SIZE=2][COLOR=#800000][SIZE=2][COLOR=#800000]</style[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]>[/SIZE]
[SIZE=2]</head>[/SIZE]
[SIZE=2]<body>[/SIZE]
[SIZE=2]<ul id=[/SIZE][SIZE=2][COLOR=#0000f0][SIZE=2][COLOR=#0000f0]"nav"[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]>[/SIZE]
[SIZE=2]<li>[/SIZE]
[SIZE=2][COLOR=#008000][SIZE=2][COLOR=#008000]<a[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#008000][SIZE=2][COLOR=#008000]class[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]=[/SIZE][SIZE=2][COLOR=#0000f0][SIZE=2][COLOR=#0000f0]"punkt"[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#008000][SIZE=2][COLOR=#008000]href[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]=[/SIZE][SIZE=2][COLOR=#0000f0][SIZE=2][COLOR=#0000f0]"#"[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#008000][SIZE=2][COLOR=#008000]>[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]Startseite[/SIZE][SIZE=2][COLOR=#008000][SIZE=2][COLOR=#008000]</a>[/COLOR][/SIZE]
[/COLOR][/SIZE][SIZE=2]</li>[/SIZE]
 
[SIZE=2]<li>[/SIZE]
[SIZE=2][COLOR=#008000][SIZE=2][COLOR=#008000]<a[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#008000][SIZE=2][COLOR=#008000]class[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]=[/SIZE][SIZE=2][COLOR=#0000f0][SIZE=2][COLOR=#0000f0]"punkt"[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#008000][SIZE=2][COLOR=#008000]href[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]=[/SIZE][SIZE=2][COLOR=#0000f0][SIZE=2][COLOR=#0000f0]"#"[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#008000][SIZE=2][COLOR=#008000]>[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]Fotogalerie[/SIZE][SIZE=2][COLOR=#008000][SIZE=2][COLOR=#008000]</a>[/COLOR][/SIZE]
[/COLOR][/SIZE][SIZE=2]</li>[/SIZE]
 
[SIZE=2]<li>[/SIZE]
[SIZE=2][COLOR=#008000][SIZE=2][COLOR=#008000]<a[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#008000][SIZE=2][COLOR=#008000]class[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]=[/SIZE][SIZE=2][COLOR=#0000f0][SIZE=2][COLOR=#0000f0]"punkt"[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#008000][SIZE=2][COLOR=#008000]href[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]=[/SIZE][SIZE=2][COLOR=#0000f0][SIZE=2][COLOR=#0000f0]"#"[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#008000][SIZE=2][COLOR=#008000]>[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]Ver[B][I]&ouml[/I][/B];ffentlichungen[/SIZE][SIZE=2][COLOR=#008000][SIZE=2][COLOR=#008000]</a>[/COLOR][/SIZE]
[/COLOR][/SIZE][SIZE=2]</li>[/SIZE]
 
[SIZE=2]<li>[/SIZE]
[SIZE=2][COLOR=#008000][SIZE=2][COLOR=#008000]<a[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#008000][SIZE=2][COLOR=#008000]class[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]=[/SIZE][SIZE=2][COLOR=#0000f0][SIZE=2][COLOR=#0000f0]"punkt"[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#008000][SIZE=2][COLOR=#008000]href[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]=[/SIZE][SIZE=2][COLOR=#0000f0][SIZE=2][COLOR=#0000f0]"#"[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#008000][SIZE=2][COLOR=#008000]>[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]Bestellung[/SIZE][SIZE=2][COLOR=#008000][SIZE=2][COLOR=#008000]</a>[/COLOR][/SIZE]
[/COLOR][/SIZE][SIZE=2]</li>[/SIZE]
[SIZE=2]<li>[/SIZE]
[SIZE=2][COLOR=#008000][SIZE=2][COLOR=#008000]<a[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#008000][SIZE=2][COLOR=#008000]class[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]=[/SIZE][SIZE=2][COLOR=#0000f0][SIZE=2][COLOR=#0000f0]"punkt"[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#008000][SIZE=2][COLOR=#008000]href[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]=[/SIZE][SIZE=2][COLOR=#0000f0][SIZE=2][COLOR=#0000f0]"#"[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#008000][SIZE=2][COLOR=#008000]>[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]Kontakt[/SIZE][SIZE=2][COLOR=#008000][SIZE=2][COLOR=#008000]</a>[/COLOR][/SIZE]
[/COLOR][/SIZE][SIZE=2]</li>[/SIZE]
[SIZE=2]<li>[/SIZE]
[SIZE=2][COLOR=#008000][SIZE=2][COLOR=#008000]<a[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#008000][SIZE=2][COLOR=#008000]class[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]=[/SIZE][SIZE=2][COLOR=#0000f0][SIZE=2][COLOR=#0000f0]"punkt"[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#008000][SIZE=2][COLOR=#008000]href[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]=[/SIZE][SIZE=2][COLOR=#0000f0][SIZE=2][COLOR=#0000f0]"#"[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#008000][SIZE=2][COLOR=#008000]>[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]Impressum[/SIZE][SIZE=2][COLOR=#008000][SIZE=2][COLOR=#008000]</a>[/COLOR][/SIZE]
[/COLOR][/SIZE][SIZE=2]</li>[/SIZE]
[SIZE=2]<li>[/SIZE]
[SIZE=2][COLOR=#008000][SIZE=2][COLOR=#008000]<a[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#008000][SIZE=2][COLOR=#008000]class[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]=[/SIZE][SIZE=2][COLOR=#0000f0][SIZE=2][COLOR=#0000f0]"letzterpunkt"[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#008000][SIZE=2][COLOR=#008000]href[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]=[/SIZE][SIZE=2][COLOR=#0000f0][SIZE=2][COLOR=#0000f0]"#"[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#008000][SIZE=2][COLOR=#008000]>[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]AGB[/SIZE][SIZE=2][COLOR=#008000][SIZE=2][COLOR=#008000]</a>[/COLOR][/SIZE]
[/COLOR][/SIZE][SIZE=2]</li>[/SIZE]
 
 
[SIZE=2]</ul>[/SIZE]
 
[SIZE=2]</body>[/SIZE]
[SIZE=2]</html>[/SIZE]

tbsklat · 04.02.2010

AW: CSS Menü "border-left und right" übergreifend ändern

Also ich habe es auch mal getestet und hab da vielleicht eine lösung gefunden schau mal ob es dir so gefällt.

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Men&uuml;test</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body{background-color:silver;}
#nav{
list-style:none; font-family:Arial;font-size:9pt;}
#nav li{
display:inline;
text-align:center;
}
a{
 border-left:#FFF 1px solid tr;
 border-right:#FFF 1px solid;
}
a:hover{
 border-left:#F00 1px solid;
 border-right:#F00 1px solid ;
}
.punkt{
 width:150px;
 text-align:center;
 margin-left:-3px;
 
}
</style>
</head>
<body>
<ul id="nav">
<li>
<a class="punkt" href="#">Punkt1</a>
</li>
<li>
<a class="punkt" href="#">Punkt2</a>
</li>
<li>
<a class="punkt" href="#">Punkt3</a>
</li>
<li>
<a class="punkt" href="#">Punkt4</a>
</li>

</ul>
</body>
</html>

Jens_S · 04.02.2010

AW: CSS Menü "border-left und right" übergreifend ändern

Vielen Dank für eure Antworten.
Je nach Browser haut das halt nicht hin.
@tbskalt das hat bei mir leider den selben Effekt das ich eine doppellinie habe.

Ich habe jetzt aber eine Lösung für mich gefunden die im IE funktioniert(mal sehen welche Versionen) und in meinem Firefox.

Und zwar habe ich nämlich meine Abstände so gemacht das die Linien wirklich überlagern und habe jedem einzelnen Menüpunkt ein Z-Index zugewiesen.
Es ist jetzt noch nicht alles perfekt geschrieben aber so funktioniert es schonmal.
Hier der Code falls es jemanden interessiert oder selber verwenden möchte oder dran weiterbasteln will.

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Men&uuml;test</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body{background-color:silver;}

#nav{
width:690px;
list-style:none;
font-family:Arial;
font-size:9pt;
line-height:18pt;
text-align:center;
}

#nav li{
position:relative;
z-index:1;
display:inline;
text-align:center;

}

#nav li a.punkt{
position:relative;
display:inline;
text-decoration:none;
color:white;
font-family:Arial;
font-size:9pt;
line-height:18pt;
text-align:center;
border-right:1px solid white;
border-left:1px solid transparent;
margin-left:-4px;
padding-left:10px;
padding-right:10px;
padding-top:10px;
}

#nav li a:hover.punkt{
position:relative;
display:inline;
text-decoration:none;
color:white;
font-family:Arial;
font-size:9pt;
line-height:18pt;
text-align:center;
border:none;
border-right:1px solid #fcaf17;
border-left:1px solid #fcaf17;
margin-left:-4px;
padding-left:10px;
padding-right:10px;
padding-top:10px;
}
#nav li a.letzterpunkt{
position:relative;
display:inline;
text-decoration:none;
color:white;
font-family:Arial;
font-size:9pt;
line-height:18pt;
text-align:center;
border-left:1px solid transparent;
margin-left:-4px;
padding-left:10px;
padding-top:10px;
padding-right:10px;

}
#nav li a:hover.letzterpunkt{ position:relative;
display:inline;
text-decoration:none;
color:white;
font-family:Arial;
font-size:9pt;
line-height:18pt;
text-align:center;
border:none;
border-right:1px solid #fcaf17;
border-left:1px solid #fcaf17;
margin-left:-4px;
padding-left:10px;
padding-right:10px;
padding-top:10px;


}

-->
</style>
</head>
<body>
<ul id="nav">
<li>
<a class="punkt" style="position:relative;z-index:1;width:50px;" href="#">Startseite</a>
</li>

<li>
<a class="punkt" style="position:relative;z-index:2;width:50px;" href="#">Fotogalerie</a>
</li>

<li>
<a class="punkt" style="position:relative;z-index:3;width:50px;" href="#">Ver&ouml;ffentlichungen</a>
</li>

<li>
<a class="punkt" style="position:relative;z-index:4;width:50px;" href="#">Bestellung</a>
</li>
<li>
<a class="punkt" style="position:relative;z-index:5;width:50px;" href="#">Kontakt</a>
</li>
<li>
<a class="punkt" style="position:relative;z-index:6;width:50px;" href="#">Impressum</a>
</li>
<li>
<a class="letzterpunkt" style="position:relative;z-index:7;width:50px;" href="#">AGB</a>
</li>


</ul>

</body>
</html>