kostenloser Webspace werbefrei: lima-city


<div id="menu"> zu hoch

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    l001ol

    Kostenloser Webspace von l001ol

    l001ol hat kostenlosen Webspace.

    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
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

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

  3. m**********n

    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
  4. Autor dieses Themas

    l001ol

    Kostenloser Webspace von l001ol

    l001ol hat kostenlosen Webspace.

    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
  5. 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.
  6. 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

Login zum Webhosting ohne Werbung!