dropdownnavi mit variabler breite der buttons @ tutorials.de: Tutorials, Forum & Hilfe

aiquita · 22.12.11 15:39

hallo
ich habe mich bei meiner seite an nem dropdownmenü versucht
ich hatte schonmal in der vergangenheit ne lösung gehabt die fuktioniert aber nur dann wenn alle buttons gleich breit sind
bei mir passt sich die breite aber an den textinhalt an

das menü ist beim button minecraft

hier ist meine seite http://www.marvinbrieger.de/neu/

und hier der quellcode

HTML-Code:

<?php
$site = "home";

if (array_key_exists("site", $_GET)) {
	$site = $_GET['site'];
}
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>
    <title>Titel</title>

    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />
    <meta name="generator" content="Webocton - Scriptly (www.scriptly.de)" />

    <link href="style.css" type="text/css" rel="stylesheet" />
    <link href="favicon.ico" type="image/x-icon" rel="shortcut icon" />

    <script language="JavaScript" type="text/javascript">
    	function LoadImage(){
    		var x = Math.floor(1+(2)*(Math.random()));
    		document.getElementById("header").style.background = "url(images/style/header/"+x+".jpg)";

    		setTimeout('LoadImage()', 3000);
    	}

        function mopen ()
        {
            document.getElementById("menu").style.display = 'block';
        }
        function mclose ()
        {
            document.getElementById("menu").style.display = 'none';
        }
    </script>
</head>

<body onload="LoadImage()">
    <div id="border">

    </div>
    <div id="content">
        <div id="top">

        </div>
        <div id="head">
            <div id="header">

            </div>
            <div id="nav">
                <ul>
                    <li><a href="?site=home" class="active" style="border-left:none;">Home</a></li>
                    <li><a href="?site=ueber_mich">&Uuml;ber mich</a></li>
                    <li><a href="?site=minecraft" onmouseover="mopen()" onmouseout="mclose()">Minecraft</a></li>
                        <ul id="menu" onmouseover="mopen()" onmouseout="mclose()">
                            <li><a href="">Minecraft</a></li>
                            <li><a href="">Downloads</a></li>
                            <li><a href="">Server</a></li>
                        </ul>
                    <li><a href="?site=galerie">Galerie</a></li>
                    <li><a href="?site=fuer_freunde">F&uuml;r Freunde</a></li>
                    <li><a href="?site=links">Links</a></li>
                    <li><a href="?site=kontakt">Kontakt</a></li>
                    <li><a href="?site=impressum"   style="border-right:none;">Impressum</a></li>
                </ul>
            </div>
        </div>
        <div id="main">
            <div class="postl">

            </div>
            <div class="postr">

            </div>
            <div class="postl">

            </div>
            <div class="postr">

            </div>
            <div class="clear">

            </div>
        </div>
    </div>
</body>
</html>

Code :

* {
    margin:0px;
    padding:0px;
    font-family:Verdana;
}
 
html, body {
    margin:0 auto;
    width:1000px;
    height:100%;
    background:url(images/style/bg6.png) #333333;
}
 
#border {
    float:left;
    width:10px;
    height:100%;
    position:fixed;
    background:white;
}
 
#content {
    float:right;
    width:990px;
}
 
#top {
    width:990px;
    height:10px;
    background:white;
}
 
#head {
    margin:20px 0px 20px 20px;
    padding:10px;
    width:950px;
    height:253px;
    background:white;
}
 
#header {
    width:950px;
    height:200px;
}
 
#nav {
    width:950px;
    height:53px;
    background: url(images/style/navbg1.jpg);
}
 
#nav ul {
    list-style:none;
}
 
#nav li a {
    float:left;
    padding:13px;
    height:27px;
    background:url(images/style/navbg1.jpg);
    font-size:17px; color:white; text-decoration:none;
    border-left: 1px solid #707F90;
    border-right: 1px solid #3C444D;
}
 
#nav li a:hover {
    background:url(images/style/navbg2.jpg);
}
 
#nav li a.active {
    background:url(images/style/navbg3.jpg);
}
 
#menu {
    display:none;
}
 
#main  {
    margin:0px;
    padding:10px 10px 0px 30px;
    width:950px;
    background:white;
}
 
.postl {
    margin-right:10px;
    margin-bottom:10px;
    float:left;
    padding:10px;
    width:450px;
    height:100px;
    border-top :30px solid #FF5500;
    background:#E1E1E1;
}
 
.postr {
    margin-bottom:10px;
    float:left;
    padding:10px;
    width:450px;
    height:100px;
    border-top :30px solid #FF5500;
    background:#E1E1E1;
}
 
.clear {
    clear:both;
}

djheke · 22.12.11 17:35

Dies ist hinzugekommen. #menu wird nicht gebraucht.

Code :

#nav li {
 float:left;
 position:relative;
}
 
#nav li ul {
    display:none;
}
#nav li:hover ul {
    display:block;
    position:absolute;
    top:53px;
    width:auto;
    background:#09c; 
}
 
#nav ul ul li  {
 width:100%;
 background:#aaa;
}
 
#nav ul ul li a {
 display:block;
 width:100%;
 background:#a33;
 color:#fff;
}

Und hier die richtige verschachtelung

Code :

  <li><a href="#">Minecraft</a>
                        <ul>
                            <li><a href="#">Minecraft</a></li>
                            <li><a href="#">Downloads</a></li>
                            <li><a href="#">Server</a></li>
                        </ul>
                       </li>

Wenn du den IE kleiner 7 doch noch unterstützen möchtest, dann nimm eine htc Datei oder Suckerfish Menu.
Ansonsten brauchst du kein JS.

Netzwerkidi · 23.12.11 13:11

Ich weiß getz ehrlich gesagt nicht, wo das Problem ist. Oder ist es ein Lösungsvorschlag für solche Menüs?

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Div mit variabler Breite

Selectbox mit variabler Breite

DropDownList mit variabler Breite

div mit fester und variabler Breite

div variabler breite

E-Mail:

Abonnieren Abbestellen