kostenloser Webspace werbefrei: lima-city


DopDown beachtet kein Hintergrund

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    computer-freak

    computer-freak hat kostenlosen Webspace.

    Guten Tag,
    Alles funktioniert bis auf diesen abschnitt, dass er die hintergrund blau machen soll.
    warum funktioniert das nicht?


    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html><head>
    <style><endnote><head>
    <style><endnote><head>
    <style><endnote><head>
    <style><endnote><head>
    <style><endnote><head>
    <style></style>
    
    <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"><title>t</title>
    
    </head>
    <body>
    
    		<script type="text/javascript" src="js/jquery.js"></script>
    	<script type="text/javascript">
    $(document).ready(function () {	
    	
    	$('#nav li').hover(
    		function () {
    			//show its submenu
    			$('ul', this).slideDown(100);
    
    		}, 
    		function () {
    			//hide its submenu
    			$('ul', this).slideUp(100);			
    		}
    	);
    	
    });
    	</script>
    	
    	<style type="text/css">
    	body {font-family:arial; font-size:11px;}
    	
    	#nav {
    		margin:0; 
    		padding:0; 
    		list-style:none;
    	}	
    	
    		
    		#nav li {
    			float:left; 
    			display:block; 
    			width:100px; 
    			background:#ccc; 
    			position:relative;
    			z-index:500; 
    			margin:0 1px;
    		}
    		
    		/* this is the parent menu */
    		#nav li a { 
    			padding:8px 5px 0 5px; 
    			font-weight:700;  
    			height:23px; 
    			text-decoration:none; 
    			color:#fff; 
    			text-align:center; 
    			color:#333;
    		}
    
    		#nav li a:hover {
    			color:#fff;
    		}
    	
    		/* you can make a different style for default selected value */
    		#nav a.selected {
    			color:#f00;
    		}
    	
    		/* submenu, it's hidden by default */
    		#nav ul {
    			position:absolute; 
    			left:0; 
    			display:none; 
    			margin:0 0 0 -1px; 
    			padding:0; 
    			list-style:none;
    		}
    		
    		#nav ul li {
    			width:100px; 
    			float:left; 
    			border-top:1px solid #fff;
    		}
    		
    		/* display block will make the link fill the whole area of LI */
    		#nav ul a {
    			display:block;  
    			height:15px;
    			padding: 8px 5px; 
    			color:#666;
    		}
    		
    		#nav ul a:hover {
    			text-decoration:underline;	
    		}
    
    
    		*html #nav ul {
    			margin:0 0 0 -2px;
    		}
    
    	</style>
    
    
    
    
    
    
    
    
    
    
    <ul id="nav" style="background-color:blue; width:1000px;">
    	<li><a href="#" class="selected">Lehrkörper</a>
    		<ul>
    			<li><a href="#">Item 01</a></li>
    			<li><a href="#" class="selected">Item 02</a></li>
    			<li><a href="#">Item 03</a></li>
    		</ul>
    	</li>
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

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

  3. Weil , abgesehen davon das der Code so einige Fehler beinhaltet, #nav unsichtbar ist und der indknoten <li> das attribut bekommen sollte.
    fix:
    #nav li {
    float:left;
    display:block;
    width:100px;
    background:blue;
    position:relative;
    z-index:500;
    margin:0 1px;
    }


    Kleine verbesserungsvorschlge am rande:
    entferne dies vollständig:
    <style><endnote><head>
    <style><endnote><head>
    <style><endnote><head>
    <style><endnote><head>
    <style><endnote><head>
    <style></style>

    packe alles in <script></script> und <style></style> zwischen
    <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"><title>t</title>
    und
    </head>

    (MIT <script></script> und <style></style> )

    Beitrag zuletzt geändert: 23.10.2011 18:45:40 von simuliertes
  4. Autor dieses Themas

    computer-freak

    computer-freak hat kostenlosen Webspace.

    Danke! Und noch eine Frage:
    Wie kann ich die Buttons zentrieren?
    code:
    <li><a href="#">Startseite</a></li>
    	<li><a href="#" class="selected">Lehrkörper  </a>
    		<ul>
    			<li><a href="#">Sprechstunden</a></li>
    			<li><a href="#">Lehrer</a></li>
    	</ul>
    <li><a href="#">Login</a></li>
    	</li>
  5. Was meinst Du mit Buttons? Die Links? Die Punkte neben den Links?
    Zentriert reativ zu was?

    Edit kleine Korrektur:
    <ul>
    <ul>
    <li><a href="#">Startseite</a></li>
    <li><a href="#" class="selected">Lehrkörper </a>
    <ul>
    <li><a href="#">Sprechstunden</a></li>
    <li><a href="#">Lehrer</a></li>
    </ul>
    </li>
    <li><a href="#">Login</a></li>
    </li>
    </ul>
    </ul>

    <ul>
            <li><a href="#">Startseite</a></li>
    	<li><a href="#" class="selected">Lehrkörper  </a>
    		<ul>
    			<li><a href="#">Sprechstunden</a></li>
    			<li><a href="#">Lehrer</a></li>
    	        </ul>
            </li>
            <li><a href="#">Login</a></li>
    	</li>
    </ul>


    Beitrag zuletzt geändert: 23.10.2011 21:30:42 von simuliertes
  6. Autor dieses Themas

    computer-freak

    computer-freak hat kostenlosen Webspace.

    Hallo,
    Also auf der mitte der seite also left:50% aber wie geht das ?
  7. computer-freak schrieb:
    Hallo,
    Also auf der mitte der seite also left:50% aber wie geht das ?

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <style type="text/css">
    # menue_wrapper {
    	margin:0; padding:0;
    	}
    
    #menue {
           display: table;
    	margin:0px auto;
    	}
    
    </style>
    <!--[if lt IE 8]>
            <style type="text/css">
    
                    #menue_wrapper { text-align: center; }
                            #menue_wrapper * { text-align: left; }
                            #menue
    
                            {
                                    zoom: 1;
                                    display: inline;
                            }
            </style>
    <![endif]-->
    </head>
    <body>
    <div id="menue_wrapper">
             <ul id="menue">
                    <li><a href="#">Startseite</a></li>
            	<li><a href="#" class="selected">Lehrkörper  </a>
            		<ul>
            			<li><a href="#">Sprechstunden</a></li>
            			<li><a href="#">Lehrer</a></li>
            	        </ul>
                    </li>
                    <li><a href="#">Login</a></li>
            	</li>
            </ul>
    </div>
    </body>
    </html>


    Sieh dazu
    http://www.lima-city.de/thread/website-mittig-ausrichten-bei-jedem-browser
    und
    http://haslayout.net/css-tuts/Horizontal-Centering
  8. Autor dieses Themas

    computer-freak

    computer-freak hat kostenlosen Webspace.

    Es funktioniert einfach nicht, auch wenn ich das float-left wegmache!
    Mein CSS Code:


    #nav li {
    			
    			display:block; 
    			width:100px; 
    			background:#ccc; 
    			position:relative;
    			z-index:500; 
    			margin:0 1px;
    float:left; 
    
    
    		}
    		
    		/* this is the parent menu */
    		#nav li a {
    			display:block; 
    			padding:8px 5px 0 5px; 
    			font-weight:700;  
    			height:23px; 
    			text-decoration:none; 
    			color:#fff; 
    			text-align:center; 
    			color:#333;
    		}


    Beitrag zuletzt geändert: 24.10.2011 17:15:36 von computer-freak
  9. computer-freak schrieb:
    Es funktioniert einfach nicht, auch wenn ich das float-left wegmache!

    Hast Du denn mal meinen geposteten Code in eine Datei kopiert und ausprobiert?
    Entspricht das dem was Du erreichen willst? (Also das das ganze Menue Zentriert wird und nicht nur Sprechstunde & Lehrer)
    Hast Du die von mir geposteten Links gelesen?
    Vor allen diesen:
    http://haslayout.net/css-tuts/Horizontal-Centering

    Gib am besten mal den kompletten Code Deiner Seite raus (oder besser noch einen Link, falls vorhanden)


    Nochmal etwas u verdeutlichung der Baumstruktur von css/html:
    Wenn Du diesen code hast:
    <ul id="nav">
                    <li><a href="#"><a>A</a></li>
            	<li><a href="#"><a>B</a></li>
    </ul>

    Du musst DIr das vorstellen wie einen Baum oder viele Schachteln in denen wieder kleinere Schachteln sind.
    Bleiben wir bei Schachteln.
    in #nav befinden sich 2 <li>-"Schachteln"
    in jeder <li>-Schachtel befinden sich <a> Schachteln
    usw..

    willst Du alle <a>-tags von #nav Blau färben heisst es: #nav li a{backgrund-color: blue;}

    (Browser Besonderheiten überspringe ich mal...)

    margin:0px auto; zentriert eine Schachtel innerhalb einer übergeordneten Schachtel sofern diese Schachtel vom Typ
    display: table; ist oder diese Schachtel eine Feste Länge hat (width: 100px zB)

    Besipiel
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <style type="text/css">
    /*nur zu deko-zwecke*/
    .red {border: red 1px solid; margin: 10px;}
    .blue {border: blue 1px solid;margin: 10px;}
    /*der wichtige css-code*/
    
    /*keine feste Länge */
    #uebergeordnete_schachtel div{margin: 0px auto; display: table;}
    
    /* feste Länge*/
    #uebergeordnete_schachtel2 div{margin: 0px auto; width: 300px;}
    
    
    
    </style>
    
    </head>
    <body>
    <div id="uebergeordnete_schachtel" class="red">
         <div id="zentriere_mich" class="blue">
              Blablup
              Blablup
         </div>
    </div>
    <div id="uebergeordnete_schachtel2" class="red">
         <div id="zentriere_mich2" class="blue">
              Blablup
              Blablup
         </div>
    </div>
    </body>
    </html>




    Beitrag zuletzt geändert: 24.10.2011 19:39:15 von simuliertes
  10. 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!