Suche im Forum:
Suchen


« Vorheriges Thema anzeigen :: Nächstes Thema anzeigen »  
Autor Nachricht
Beitrag22.01.2009 um 11:54 (UTC)    
Titel: Ups... Kann mal einer gucken bitte? Probleme mit Navi

Hallöchen! Ich hab mal wieder ein bissl rumgefummelt und irgendwas hab ich wohl falsch gemacht Laughing

Wollte so ein Foldoutmenue Horizontal haben und habs mal irgendwie eingefügt... Jetzt ist aber alles etwas komisch geworden und ich weiß auch nicht, wie ich die Position des Menüs verändern kann... Würde das Menü gerne über dem Content haben, also bei -100px, glaub ich... Und mein Header ist auch irgendwie verschwunden... Vielleicht kann mal einer drüberschauen und erkennt das Problem sofort... Vielleicht hab ich auch noch ein paar andere versteckte Fehler?! Bin ja Anfänger, wills aber gern lernen und hoffe einfach auf Eure Hilfe Razz

Text über dem Design:

Zitat:

<div id="Mein_Bild"></div>
<div id="header_container"></div>
<div id="Design">


CSS-Code ohne Style-Tags:

Zitat:

#extraDiv1 {display: none;}
#extraDiv2 {display: none;}
#extraDiv3 {display: none;}
#extraDiv4 {display: none;}
#extraDiv5 {display: none;}
#extraDiv6 {display: none;}
#pre_header {display: none;}
#post_header {display: none;}
#pre_content {display: none;}
#nav_heading{display: none;}
div.header{display: none;}
h1#title{display: none;}
h2#title span {display: none;}

body
{
background-color: #bbdddd;
font-family: Verdana, Arial, sans-serif;
font-size: 100.01%;
width: 100%;
height: 100%;
margin: 0;
padding: 0
}

*
{
padding: 0; margin: 0;
}

#Mein_Bild
{
position: absolute;
left: 50%;
top: 181px;
margin-left: -489px;
width: 980px;
height: 500px;
background-image: url(http://img.webme.com/pic/d/dog-in-black/hintergrundbild.jpg);
}

#content
{
position: absolute;
left: 50%;
top: 200px;
margin-left:-100px;
width: 550px;
height: 450px;
padding:10px;
color: #F2F2F2;
font-size:13px;
background-color:transparent;
background-image:url();
border: 1px solid #FFFFFF;
overflow:auto;
}

#sidebar_container
{
position: absolute;
left: 50%;
top:200px;
margin-left: -470px;
width: 350px;
height: 440px;
background-color:transparent;
background-image:url(http://img.webme.com/pic/d/dog-in-black/sidebox.jpg);
border:1px solid #FFFFFF;
color:#000000;
overflow:auto;
}

<style type="text/css" media="screen">
<!--
body
{
font-family: Verdana, sans-serif;
font-size: 14px;
overflow: auto;
padding: 10px;
margin: 0px;
}

ul, li
{
list-style-type: none;
padding: 0px;
margin: 0px;
}

.menu
{
position: absolute;
z-index: 3;
top: 10px;
}

.menu li
{
width: 140px;
float: left;
}

.menu a
{
border: 1px solid #888;
background-color: #fff;
text-decoration: none;
text-align: center;
font-weight: bold;
cursor: default;
margin: -100px 2px;
display: block;
height: 20px;
color: #000;
}

.menu a:hover
{
background-color: #ccc;
}

#smenu1, #smenu2, #smenu3, #smenu4
{
font-size: 12px;
display: none;
width: 140px;
float: left;
}

#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a
{
font-weight: normal;
padding-top: 2px;
border-top: 0px;
cursor: pointer;
}
//-->
</style>

<script type="text/javascript">
<!--
function montre(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'block';
else if (all)
all[id].style.display = 'block'; else layers[id].display = 'block';
}
}

function cache(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'none';
else if (all)
all[id].style.display = 'none';
else
layers[id].display = 'none';
}
}

//-->
</script>

</head>
<body>

<div class="menu">
<ul>
<li><a href="javascript:void(0);" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">Menu 1</a>
<ul id="smenu1" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">
<li><a href="">Subkategorie 1.1</a></li>
<li><a href="">Subkategorie 1.2</a></li>
<li><a href="">Subkategorie 1.3</a></li>
</ul>
</li>

<li><a href="javascript:void(0);" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">Menu 2</a>
<ul id="smenu2" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">
<li><a href="">Subkategorie 2.1</a></li>
<li><a href="">Subkategorie 2.2</a></li>
</ul>
</li>

<li><a href="javascript:void(0);" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">Menu 3</a>
<ul id="smenu3" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">
<li><a href="">Subkategorie 3.1</a></li>
<li><a href="">Subkategorie 3.2</a></li>
<li><a href="">Subkategorie 3.3</a></li>
<li><a href="">Subkategorie 3.4</a></li>
<li><a href="">Subkategorie 3.5</a></li>
</ul>
</li>

<li><a href="javascript:void(0);" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">Menu 4</a>
<ul id="smenu4" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">
<li><a href="">Subkategorie 4.1</a></li>
<li><a href="">Subkategorie 4.2</a></li>
<li><a href="">Subkategorie 4.3</a></li>
</ul>
</li>
</ul>
</div>

</body>
</html>

h1
{
color: #000080;
text-align: center;
}

#header_container
{
position: absolute;
left: 50%;
margin-left:-490px;
width: 980px;
height: 150px;
background-color:#343434;
background-image:url(http://img.webme.com/pic/d/dog-in-black/header-test2.jpg);
color:#FFFFFF;
font-size:13px;
border: 1px solid #FFFFFF;
}

#navi
{
width: 180px;
border: 1px solid #000080;
margin-top: 177px;
margin-left: 15px;
font-size: 0.9em;
height: 400px;
float:left;
}

a
{
color:#4A9AF6;
text-decoration: none;
font-size:13px;
}

a:hover
{
color: #4A9AF6;
font-size: 13px;
text-decoration: none;
}

a:link
{
color: #4A9AF6;
font-size: 13px;
text-decoration: none;
}

a:active
{
color: #4A9AF6;
font-size: 13px;
text-decoration: none;
}

a:visited
{
color: #4A9AF6;
font-size: 13px;
text-decoration: none;
}

#counter
{
position: absolute;
left: 50%;
top:650px;
margin-left: -470px;
width: 350px;
height:20px;
text-align: center;
color:#F2F2F2;
font-size:13px;
border: 1px solid #FFFFFF;
}

#header_container
{
position: absolute;
left: 50%;
margin-left:-490px;
width: 980px;
height: 150px;
background-color:#343434;
background-image:url(http://img.webme.com/pic/d/dog-in-black/header-test2.jpg);
color:#FFFFFF;
font-size:13px;
border: 1px solid #FFFFFF;
}


Vielen Dank schon einmal an alle fleißigen Helfer Smile

LG Alice


Zuletzt bearbeitet von dog-in-black am 22.01.2009, 12:59, insgesamt 4-mal bearbeitet
Beitrag22.01.2009 um 11:58 (UTC)    
Titel:



Grüßle
______________
Wir leben alle unter dem selben Himmel, aber wir haben nicht alle den selben Horizont. - Konrad Adenauer

Beitrag22.01.2009 um 11:59 (UTC)    
Titel:

das coolmenü muss in "text über dem Design"

Code:
</head>
<body>

<div class="menu">
<ul>
<li><a href="javascript:void(0);" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">Menu 1</a>
<ul id="smenu1" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">
<li><a href="">Subkategorie 1.1</a></li>
<li><a href="">Subkategorie 1.2</a></li>
<li><a href="">Subkategorie 1.3</a></li>
</ul>
</li>

<li><a href="javascript:void(0);" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">Menu 2</a>
<ul id="smenu2" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">
<li><a href="">Subkategorie 2.1</a></li>
<li><a href="">Subkategorie 2.2</a></li>
</ul>
</li>

<li><a href="javascript:void(0);" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">Menu 3</a>
<ul id="smenu3" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">
<li><a href="">Subkategorie 3.1</a></li>
<li><a href="">Subkategorie 3.2</a></li>
<li><a href="">Subkategorie 3.3</a></li>
<li><a href="">Subkategorie 3.4</a></li>
<li><a href="">Subkategorie 3.5</a></li>
</ul>
</li>

<li><a href="javascript:void(0);" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">Menu 4</a>
<ul id="smenu4" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">
<li><a href="">Subkategorie 4.1</a></li>
<li><a href="">Subkategorie 4.2</a></li>
<li><a href="">Subkategorie 4.3</a></li>
</ul>
</li>
</ul>
</div>

</body>
</html>

h1
{
color: #000080;
text-align: center;
}

#header_container
{
position: absolute;
left: 50%;
margin-left:-490px;
width: 980px;
height: 150px;
background-color:#343434;
background-image:url(http://img.webme.com/pic/d/dog-in-black/header-test2.jpg);
color:#FFFFFF;
font-size:13px;
border: 1px solid #FFFFFF;
}

#navi
{
width: 180px;
border: 1px solid #000080;
margin-top: 177px;
margin-left: 15px;
font-size: 0.9em;
height: 400px;
float:left;
}

a
{
color:#4A9AF6;
text-decoration: none;
font-size:13px;
}

a:hover
{
color: #4A9AF6;
font-size: 13px;
text-decoration: none;
}

a:link
{
color: #4A9AF6;
font-size: 13px;
text-decoration: none;
}

a:active
{
color: #4A9AF6;
font-size: 13px;
text-decoration: none;
}

a:visited
{
color: #4A9AF6;
font-size: 13px;
text-decoration: none;
}

#counter
{
position: absolute;
left: 50%;
top:650px;
margin-left: -470px;
width: 350px;
height:20px;
text-align: center;
color:#F2F2F2;
font-size:13px;
border: 1px solid #FFFFFF;
}

#header_container
{
position: absolute;
left: 50%;
margin-left:-490px;
width: 980px;
height: 150px;
background-color:#343434;
background-image:url(http://img.webme.com/pic/d/dog-in-black/header-test2.jpg);
color:#FFFFFF;
font-size:13px;
border: 1px solid #FFFFFF;
}


also aus "Css-Code ohne STyle-Tags" löschen und bei Text über dem Design einfügen

und dann einfach nur noch das coolmenü zurechtrücken.
Beschreibung: http://tutorials-area.de.tl/Script-Coolmenue.htm?PHPSESSID=98ec27b9805d6a7149bcbd44a3bcdd30

LG grischan


Zuletzt bearbeitet von grischan-design am 22.01.2009, 13:08, insgesamt einmal bearbeitet
Beitrag22.01.2009 um 12:06 (UTC)    
Titel:

Aaaaaaaaaaaaaah! Ja, supi. Klappt jetzt. Kannst Du mir auch noch verraten, wie ich die Navigation verschieben kann? Also will sie über dem Content stehen haben... Wenn ich aber den Body verschiebe, verschiebt sich auf einmal alles Rolling Eyes
Beitrag22.01.2009 um 12:12 (UTC)    
Titel:

beschreibung hier: http://tutorials-area.de.tl/Script-Coolmenue.htm?PHPSESSID=98ec27b9805d6a7149bcbd44a3bcdd30

das "rote" einfach ändern.
wenn du die Zahl bei "top" erhöhst, so schiebst du das coolmenü nach unten
wenn du die zahl bei "margin-left" erhöhst, so schiebst du das coolmenü nach links.
und dann kannst du noch breite des coolmenüs ändern; hier:
"width" Je größer die Zahl, desto breiter das coolmenü

Das nächste mal aber bitte Forensuche benutzen, das Thema wurde auch schon öftermal besprochen.

LG grischan
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de