<div id="menu"> zu hoch

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

Autor dieses Themas

19:03, 27.12.2012

Ich bin gerade dabei, ein Design für meine zukünftige Homepage zu erstellen. Zurzeit arbeite ich an einem Menü, das sich bei :hover ausfährt. Es funktioniert ganz gut, nur schaffe ich es nicht, das Menu um 100px nach unten zu versetzen. Ich habe es schon mit top: 100px; probiert aber es funktioniert nicht. Hier der Code:

HTML:

<!DOCTYPE html>
<html>
	<head>
		<title>Projekt1</title>
		<link type="text/css" href="Projekt3.css" rel="stylesheet">
	</head>
	<body>
		<!-- Head -->
		<div id="header">
			<div id="logo">
				L001OLs Testhomepage - Lorem Ipsum
			</div>
			<div id="menu">
			<ul>
				<li>
					<h3>Thema 1</h3>
				<ul>
					<li><a href="#">Thema 1.1</a></li>
					<li><a href="#">Thema 1.2</a></li>
					<li><a href="#">Thema 1.3</a></li>
				</ul>
				</li>
			</ul>
			<div id="menu">
			<ul>
				<li>
					<h3>Thema 2</h3>
				<ul>
					<li><a href="#">Thema 2.1</a></li>
					<li><a href="#">Thema 2.2</a></li>
					<li><a href="#">Thema 2.3</a></li>
				</ul>
				</li>
			</ul>
			</div>
		</div>
		<!-- Content -->
		
		<!-- Footer -->
		
	</body>
</html>

CSS:

* {
margin: 0;
padding: 0;
} 
html , body{
font-family: arial;
color: black;
}
a {
color: black;
}
#header {
height: 130px;
width: 100%;
min-width: 100%;
top: 0px; 
left: 0px;
position: absolute;
background: #B9F73E;
}
/*MenuTop*/
#menu {
height: 30px;
left: 20px;
padding: 0 20px;
font-family: Arial;
font-size: 15px;
line-height: 2;
float: left;
} 
#menu ul {
height: 20px;
float: left;
width: 140px;
list-style-type: none;
} 
#menu h3 {
font-size: 1em;
text-align: center;
color: black;
background: orange;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
#menu a {
text-decoration: none;
display: block;
text-align: center;
background: orange;
color: black;
}
#menu a:hover {
color: black;
background: red;
} 
#menu li {
position: relative;
}
#menu ul ul {
position: absolute;
z-index: 2;
display: none;
} 
#menu ul li:hover ul {
display: block;
} 
/*Logo*/
#logo {
height: 30px;
top: 25px; 
left: 25px;
position: absolute;
font-size: 50px;
color: white;
#text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; /*optional: Rahmen*/
}

Website: http://l001ol.lima-city.de/projekt/index.php/

Beitrag zuletzt geändert: 27.12.2012 19:03:27 von l001ol

Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage

~~m**********n~~

19:46, 27.12.2012

Arbeite nicht so viel mit

position: absolute

Die HTML würde ich so gestalten:

<!DOCTYPE html>
<html>
	<head>
		<title>Projekt1</title>
		<link type="text/css" href="Projekt3.css" rel="stylesheet">
	</head>
	<body>
		<div id="header">
			<div id="logo">
				L001OLs Testhomepage - Lorem Ipsum
			</div>
		</div>
		<div id="menu">
			<ul>
				<li>
					<h3>Thema 1</h3>
					<ul>
						<li><a href="#">Thema 1.1</a></li>
						<li><a href="#">Thema 1.2</a></li>
						<li><a href="#">Thema 1.3</a></li>
					</ul>
				</li>
				<li>
					<h3>Thema 2</h3>
					<ul>
						<li><a href="#">Thema 2.1</a></li>
						<li><a href="#">Thema 2.2</a></li>
						<li><a href="#">Thema 2.3</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</body>
</html>

Damit hast du eine bessere Struktur. Nün dürfte es auch leichter fallen, ein CSS dazu zu schreiben. Sollte ich im Laufe des Abends noch dazu kommen, wird es nachgereicht :)

Lg

mator

Autor dieses Themas

l001ol

l001ol hat kostenlosen Webspace.

20:20, 27.12.2012

Danke! ICh habe es jetzt in:

<div id="menu">
				<ul>
					<li>
						<h3>Thema 1</h3>
						<ul>
							<li><a href="#">Thema 1.1</a></li>
							<li><a href="#">Thema 1.2</a></li>
							<li><a href="#">Thema 1.3</a></li>
						</ul>
					</li>
				</ul>
				<ul>
					<li>
						<h3>Thema 2</h3>
						<ul>
							<li><a href="#">Thema 2.1</a></li>
							<li><a href="#">Thema 2.2</a></li>
							<li><a href="#">Thema 2.3</a></li>
						</ul>
					</li>
				</ul>
			</div>
		</div>

und:

#header {
height: 130px;
width: 100%;
min-width: 100%;
top: 0px; 
left: 0px;
position: absolute;
background: #B9F73E;
}
/*MenuTop*/
#menu {
padding-left: 20px;
height: 30px;
padding-top: 100px;
font-family: Arial;
font-size: 15px;
line-height: 2;
float: left;
} 
#menu ul {
padding-right: 10px;
height: 20px;
float: left;
width: 140px;
list-style-type: none;
} 
#menu h3 {
font-size: 1em;
text-align: center;
color: black;
background: orange;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
#menu a {
text-decoration: none;
display: block;
text-align: center;
background: orange;
color: black;
}
#menu a:hover {
color: black;
background: red;
} 
#menu li {
position: relative;
}
#menu ul ul {
position: absolute;
z-index: 2;
display: none;
} 
#menu ul li:hover ul {
display: block;
}

umgeändert und jetzt funktioniert es

copynpaste

copynpaste hat kostenlosen Webspace.

21:42, 27.12.2012
Ich hab auch grade bemerkt, dass du 2 DIV's mit der gleichen Id "menu" hattest...
Eine Id gibt allerdings genau 1 Element an, heißt laut Standard, dass man nur einem Element "die gleiche" Id geben darf.
Falls du mit CSS allerdings 2 Elemente gleich Style willst, nimmt man anstatt einer Id Eine Klasse (class=""), bzw zusätzlich zur Id.
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

kostenloser Webspace werbefrei: lima-city