Hallo Zusammen!
Ich hoffe jemand kann mir helfen!
Ich habe eine Website mit CSS gebaut! Die Seite beinhaltet ein Menü ca. 150 px von oben (horizontal) jetzt soll links auch noch ein Menü hin, aber vertikal.
Hier der CSS-CODE:
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>START<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
body, html {
font: 100% Verdana, Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
background:url('../images/design/bg.jpg');
width: 766px;
background-repeat: repeat-y;
}
#kopf {
color: #e3edfc;
background:url('../images/design/head.jpg');
text-align: center;
height: 149px;
width: 766px;
}
#inhalt {
width: 400px;
margin-left: 295px;
margin-top: 50px;
float: left;
padding: 0;
font-size: 11pt;
}
#menu_head_a {
float: left;
width: 294px;
height: 71px;
top: 149px;
left: 0;
position:absolute;
}
#navigation {
width: 766px;
top: 149px;
left: 295px;
position:absolute;
}
#navi {
padding: 0;
display: inline;
line-height:300%;
width:auto;
margin:1em 50%;
text-align: center;
}
#navi ul, #navi li {
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
left: 249px;
}
#navi li a:link, #navi li a:visited {
text-decoration: none;
background:url('../images/design/menu_head_b.jpg');
float: left;
width: 103px;
height: 71px;
top: 149px;
}
#navi li.sub a:link, #navi li.sub a:visited {
text-decoration: none;
font-weight: bold;
padding: 0;
border-left: 12px solid #0c0cfc;
background-color: #e3edfc;
color: #4455ee;
width: 100%;
}
#navi li a:hover, #navi li a:active, #navi li a:focus {
text-decoration: none;
font-weight: bold;
background:url('../images/design/menu_head_b.jpg');
height: 71px;
background-repeat: no-repeat;
}
#navigation_left{
width: 290px;
top: 149px;
float: left;
position: absolute;
clear: both;
}
#navi_left{
padding: 0;
display: block;
line-height: 100%;
width: auto;
}
#navi_left ul, #navi_left li{
list-style-type: none;
}
#navi_left li a:link, #navi_left li a:visited{
display: block;
text-decoration: none;
background-image: url('../images/design/menu_left_a.jpg');
background-repeat: repeat-x;
float: left;
width: 290px;
height: 35px;
}
#navi_left li a:hover, #navi_left li a:active, #navi_left li a:focus{
display: block;
text-decoration: none;
background-image: url('../images/design/menu_left_b.jpg');
background-repeat: repeat-x;
height: 35px;
width: 290px;
float: left;
}
#fuss {
background: url('../images/design/footer.jpg');
width: 766px;
height: 74px;
clear: both;
}
>>>>>>>>>>>>>>>>>>>>>>>ENDE<<<<<<<<<<<<<<<<<<<<<<<<<<<
Meine frage ist nun warum funktioniert das nicht? Das Zweitemenü (nav_left) wird nämlich ohne Hintergrundbild horizontal über dem anderen aber weiter links angezeigt!
Wer es sich ansehen möchte: http://www.pixxeldesign.de/neu und dann auf Webdesign klicken, da ich den Code für die Navigation in der index.php noch nicht eingefügt habe!
Habe es schon an verschiedenen Browsern versucht: IE, Safari, Opera, Firefox und NN. Ergebnis: Es geht nur beim Safari einigermaßen! aber sonst gar nicht!
Ich danke schonmal für alle Antworten
mfg
Bernhard Krämer
Ich hoffe jemand kann mir helfen!
Ich habe eine Website mit CSS gebaut! Die Seite beinhaltet ein Menü ca. 150 px von oben (horizontal) jetzt soll links auch noch ein Menü hin, aber vertikal.
Hier der CSS-CODE:
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>START<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
body, html {
font: 100% Verdana, Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
background:url('../images/design/bg.jpg');
width: 766px;
background-repeat: repeat-y;
}
#kopf {
color: #e3edfc;
background:url('../images/design/head.jpg');
text-align: center;
height: 149px;
width: 766px;
}
#inhalt {
width: 400px;
margin-left: 295px;
margin-top: 50px;
float: left;
padding: 0;
font-size: 11pt;
}
#menu_head_a {
float: left;
width: 294px;
height: 71px;
top: 149px;
left: 0;
position:absolute;
}
#navigation {
width: 766px;
top: 149px;
left: 295px;
position:absolute;
}
#navi {
padding: 0;
display: inline;
line-height:300%;
width:auto;
margin:1em 50%;
text-align: center;
}
#navi ul, #navi li {
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
left: 249px;
}
#navi li a:link, #navi li a:visited {
text-decoration: none;
background:url('../images/design/menu_head_b.jpg');
float: left;
width: 103px;
height: 71px;
top: 149px;
}
#navi li.sub a:link, #navi li.sub a:visited {
text-decoration: none;
font-weight: bold;
padding: 0;
border-left: 12px solid #0c0cfc;
background-color: #e3edfc;
color: #4455ee;
width: 100%;
}
#navi li a:hover, #navi li a:active, #navi li a:focus {
text-decoration: none;
font-weight: bold;
background:url('../images/design/menu_head_b.jpg');
height: 71px;
background-repeat: no-repeat;
}
#navigation_left{
width: 290px;
top: 149px;
float: left;
position: absolute;
clear: both;
}
#navi_left{
padding: 0;
display: block;
line-height: 100%;
width: auto;
}
#navi_left ul, #navi_left li{
list-style-type: none;
}
#navi_left li a:link, #navi_left li a:visited{
display: block;
text-decoration: none;
background-image: url('../images/design/menu_left_a.jpg');
background-repeat: repeat-x;
float: left;
width: 290px;
height: 35px;
}
#navi_left li a:hover, #navi_left li a:active, #navi_left li a:focus{
display: block;
text-decoration: none;
background-image: url('../images/design/menu_left_b.jpg');
background-repeat: repeat-x;
height: 35px;
width: 290px;
float: left;
}
#fuss {
background: url('../images/design/footer.jpg');
width: 766px;
height: 74px;
clear: both;
}
>>>>>>>>>>>>>>>>>>>>>>>ENDE<<<<<<<<<<<<<<<<<<<<<<<<<<<
Meine frage ist nun warum funktioniert das nicht? Das Zweitemenü (nav_left) wird nämlich ohne Hintergrundbild horizontal über dem anderen aber weiter links angezeigt!
Wer es sich ansehen möchte: http://www.pixxeldesign.de/neu und dann auf Webdesign klicken, da ich den Code für die Navigation in der index.php noch nicht eingefügt habe!
Habe es schon an verschiedenen Browsern versucht: IE, Safari, Opera, Firefox und NN. Ergebnis: Es geht nur beim Safari einigermaßen! aber sonst gar nicht!
Ich danke schonmal für alle Antworten
mfg
Bernhard Krämer
