Autor |
Nachricht |
Benutzer 4545
Account gelöscht Threadersteller
Ort: -
|
Verfasst Sa 28.07.2007 16:40
Titel problem mit background image und ul/li |
|
|
Hallo ihr lieben,
bin schon länger am "rumprobieren" und nachlesen aber komme auf nix was mir hilft.
folgender code (nicht schreien, ich habe das wo kopiert und so gemacht das ich es verstehe. jetzt will
ich es aber so ändern, dass ein hintergrundbild hinter den "obermenü"-buttons liegt und das submenü
wieder ohne buttons nur mit hintergrundfarbe und border aufklappt.
allerdings wird das hg-bild nicht angezeigt...was ist da so alles falsch?
und wo muss ich die breite von dem hg-bild festlegen? doch eigentlich unter #menu ul li a: oder??
Code: |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="meincss.css" rel="stylesheet" type="text/css">
<!--[if IE]>
<style type="text/css" media="screen">
#menu ul li {float: left; width: 100%;}
</style>
<![endif]-->
<!--[if lt IE 7]>
<style type="text/css" media="screen">
body {behavior: url(csshover.htc); font-size: 100%;}
#menu ul li a {height: 1%;}
}
</style>
<![endif]-->
</head>
<body>
<div id="menu">
<ul>
<li ><a class="active" href="#">Button1</a>
<ul>
<li><a href="#">unterpunkt1</a></li>
<li><a href="#">unterpunkt2</a></li>
<li><a href="#">unterpunkt3</a></li>
</ul>
</li>
<li><a href="#">Button2</a>
<ul>
<li><a href="#">unterpunkt1</a></li>
<li><a href="#">unterpunkt2</a></li>
<li><a href="#">unterpunkt3</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
|
css:
Code: |
/*Breite und Hintergrundfarbe*/
#menu {
background: #eee;
}
/*kein Listenpunkt*/
#menu ul {
list-style: none;
margin: 0;
padding: 0;
}
/*Aussehen links obermenü*/
#menu ul li a: {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
text-decoration: underline;
background-image: url(menuepunkt.gif);
}
/*#menu ul li a.active {
color: #a00;
background-color: #fff;
}/*
/*Aussehen links submenü*/
#menu ul li ul li a {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
color: #000;
background: #fff;
text-decoration: none;
}
/*Aussehen link beim Drüberfahren*/
#menu a:hover {
color: #a00;
background: #fff;
}
/*Aussehen Listenpunkt*/
#menu li {
position: relative;
}
/*Aussehen des Submenüs (Positionierung)*/
#menu ul ul{
position: absolute;
top: 0;
left: 100%;
width: 100%;
}
/*Ausblenden des Submenüs*/
div#menu ul ul {
display: none;
}
/*Einblenden des Submenüs beim hovern von Button 1*/
div#menu ul li:hover ul{
display: block;
}
|
Liegts an der DAtei behavior: url(csshover.htc) auf die oben verwiesen wird damit es in allen Browsern geht??
Zuletzt bearbeitet von am Sa 28.07.2007 17:35, insgesamt 3-mal bearbeitet
|
|
|
|
|
pidigi
Dabei seit: 24.08.2006
Ort: Köln
Alter: 43
Geschlecht:
|
Verfasst So 29.07.2007 01:07
Titel
|
|
|
Hi..hast du ein Screenshot davon? bzw. wie du das haben möchtest...verstehe das irgendwie gar nicht..
Code: | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> |
Das ist schon mal falsch!!
Arbeite lieber nur mit:
Code: | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
pidigi
|
|
|
|
|
Anzeige
|
|
|
Benutzer 4545
Account gelöscht Threadersteller
Ort: -
|
Verfasst So 29.07.2007 09:14
Titel
|
|
|
Hallo das soll so werden:
Nur das eben anstatt des weißen Hintergrundes Hintergrundbilder eingefügt werden sollen bei
Button 1 und 2 und das Untermenü soll so bleiben wie es jetzt ist.
|
|
|
|
|
nicoG
Dabei seit: 25.01.2006
Ort: Freiburg
Alter: -
Geschlecht:
|
Verfasst So 29.07.2007 13:24
Titel
|
|
|
Servus Flowi
Du hast ein Doppelpunkt hinter dem a stehen lassen in der CSS-Definition:
/*Aussehen links obermenü*/
#menu ul li a: {
Pack das mal weg, dann dürfte es gehen
|
|
|
|
|
Benutzer 4545
Account gelöscht Threadersteller
Ort: -
|
Verfasst So 29.07.2007 16:05
Titel
|
|
|
danke!!!!!!alles klar es geht jetzt...jetzt hab ich noch das problem das die leiste (da steht dann impressum und kontakt drin) im firefox nicht so hoch erscheint wie im ie. wie kommt das? soll ich da besser n gif hinterlegen oder so? ist mir ein rätsel. man sieht es weil die schrift im firefox unten etwas abgeschnitten ist in der leiste.
|
|
|
|
|
nicoG
Dabei seit: 25.01.2006
Ort: Freiburg
Alter: -
Geschlecht:
|
Verfasst So 29.07.2007 18:21
Titel
|
|
|
Welche Leiste meinst du? (hast du dem Doctype schon die URL hinzugefügt?)
|
|
|
|
|
Benutzer 4545
Account gelöscht Threadersteller
Ort: -
|
Verfasst Di 31.07.2007 09:25
Titel
|
|
|
hat sich erledigt mit dem Hintergrundbild!
Zuletzt bearbeitet von am Mi 01.08.2007 06:37, insgesamt 3-mal bearbeitet
|
|
|
|
|
|
|
|
Ähnliche Themen |
ie 6 background image problem
Mac-Firefox:Problem mit background-image
CSS background-image mit em ?
[CSS] alt-tag für background-image?
CSS background-image
background-image & FF
|
|