nicht angemeldet
Problemchen mit CSS-Menü
0 0 0 Fertig!
Problemchen mit CSS-Menü
Hallo,
Ich habe begonnen einen kleine Website zu entwerfen und kämpfe im Moment mit dem Menü.
Ich möchte das man auch aufklappbare Untermenüs benutzen kann und darin besteht bei mir das Problem. Ich hab es bereits Geschafft das das Untermenü da angezeigt wird wo es stehen soll, aber die restlichen Links sowie der Inhalt wird verschoben. Ich bin für jeden Rat dankbar!
(Ich habe das Menü komplett selber gemacht deshalb könnten da dumme Fehler drin sein)
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Hallo Welt</title>
<style type="text/css">
~~~~~~css
body {
margin:0;
}
.logo h1 {
font-size:80pt;
font-style:italic;
font-weight:bold;
margin:0;
color:#00C161;
}
.logo {
font-family: "Times New Roman", Times, serif;
font-style:italic;
background:#333 url(top.jpg) right no-repeat;
height:200px;
padding-left:10pt;
}
.logo h2 {
margin-top:-10pt;
color:#ffc;
}
li {
display:inline;
}
li a {
display:block;
padding:1pt;
margin:1pt 2pt;
width:80pt;
display:block;
text-align:center;
float:left;
text-decoration:none;
color:#FF6;
background-image:url(link.png);
}
li a:hover, li a:focus {
background-color:#09F;
}
li ul {
display:none;
}
li:hover ul {
display:block;
width:200px;
position:relative;
}
ul {
list-style:none;
margin:0;
padding:0;
}
p {
padding:5pt;
}
~~~~~~html
</style>
</head>
<body>
<div class="logo">
<h1>Hallo Welt</h1>
<h2>Startseite</h2>
<ul>
<li><a href="./">Startseite</a></li>
<li><a href="impressum.todo">Impressum</a></li>
<li><a href="mehr.todo">Mehr</a></li>
<li class="subs">
<a href="nochmehr.todo">Noch Mehr!</a>
<ul style="top:23px; float:left; left:-115px;">
<li><a href="#">Unterlink 1</a></li>
<li><a href="#">Unterlink 2</a></li>
<li><a href="#">Unterlink 2</a></li>
</ul>
</li>
<li><a href="nix.todo">test</a></li>
</ul>
</div>
<div style="clear:both">
<p>Hier ist platz für Inhalte</p>
</div>
</body>
</html>
-
Hi,
wenn du selber gar nicht recht kommen kannst, kannst du das beispiel von dieser seite zB nehmen
http://www.cssplay.co.uk/menus/dd_valid.html
in source un .css file iss alles angezeigt =)
-
Hallo,
wenn du selber gar nicht recht kommen kannst, kannst du das beispiel von dieser seite zB nehmen in source un .css file iss alles angezeigt =)
Ich war Gestern schon auf der Seite, aber dieses Beispiel habe ich übersehen. Das geht genau in die Richtung was ich machen möchte danke.
Nichts desto trotz hätte ich gerne gewusst was ich genau falsch gemacht habe... dabei ist ja schließlich der Lernprozess größer *g*
-
Der Tipp hat es gebracht ich habe meine Fehler gefunden!
Ich habe float:left von li a nach li verschoben und bei li:hover ul habe ich position:absolute; top:25px; left:0; ergänzt :-)Jetzt klappt alles so wie es soll.
-
-