Suche im Forum:
Suchen


« Vorheriges Thema anzeigen :: Nächstes Thema anzeigen »  
Autor Nachricht
Beitrag06.12.2009 um 19:00 (UTC)    
Titel: CSS: 2 x Coolmenü ohne Untermenü

Hey Leute,

ich habe mal wieder eine Herausforderung:

Ich erstelle gerade eine neue Seite:

www.lunas-kitten.de.tl

So wie man die Seite jetzt sieht soll es bleiben. Ich will nur noch ein zweites Coolmenü (soll genau so aussehen, wie das erste) unter dem Content.

Die Untermenüs in beiden Navis müssen auch weg.

Bitte helft mir - DANKE...

Bikergruß Marco

Mein Code:

<style type="text/css" media="screen">
<!--
/* Allgemeine Einstellungen (Schriftart, Schriftgröße...) */
body {
font-family: Verdana, sans-serif;
font-size: 14px;
overflow: auto;
margin: 0px; }

/* keine Auflistungspunkte vor Navi-Links */
ul, li {
list-style-type: none;
padding: 0px;
margin: 0px; }

/* Abstand zwischen Schrift zum Rand */
li a {
padding-right: 20px;
padding-top: 5px; }

/* Coolmenü positionieren, Werte bei "top" , "left" und "width" anpassen */
div.menu {
position: absolute;
z-index: 3;
left: 50%;
top: 115px;
margin-left:-200px;
width:850px; }

/* Breite der Menüpunkte einstellen */
.menu li {
width: 132px;
float: left; }

/* Aussehen der Menüpunkte einstellen */
.menu a {
border: 0px solid #000000;
background-color: #261300;
background-image: url(URL);
text-decoration: none;
text-align: center;
font-weight: bold;
cursor: pointer;
margin: 0px;
display: block;
height: 23px;
color: #EEE8AA; }

/* Aussehen der Menüpunkte beim Hover Effekt */
.menu a:hover {
background-color: #EEE8AA;
background-image: url(URL);
color: #261300; }

#smenu1, #smenu2, #smenu3, #smenu4, #smenu5 {
font-size: 14px;
display: none;
width: 160px;
float: left; }

#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a, #smenu5 a {
font-weight: bold;
padding-top: 5px;
border-top: 0px;
cursor: pointer;
color: #FFFFFF; }
//-->
</style>

<!-- Anfang des Scriptes -->
<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>
<!-- Ende des Scriptes -->

<div class="menu">
<li><a href="javascript:void(0);" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">Hauptmenü 1</a>
<ul id="smenu1" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">
<li><a href="Unterlink 1.1">Untermenü 1.1</a></li>
<li><a href="Unterlink 1.2">Untermenü 1.2</a></li>
<li><a href="Unterlink 1.3">Untermenü 1.3</a></li>
<li><a href="Unterlink 1.4">Untermenü 1.4</a></li>
<li><a href="Unterlink 1.5">Untermenü 1.5</a></li>
</ul>
</li>
<li><a href="javascript:void(0);" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">Hauptmenü 2</a>
<ul id="smenu2" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">
<li><a href="Unterlink 2.1">Untermenü 2.1</a></li>
<li><a href="Unterlink 2.2">Untermenü 2.2</a></li>
</ul>
</li>
<li><a href="javascript:void(0);" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">Hauptmenü 3</a>
<ul id="smenu3" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">
<li><a href="Unterlink 3.1">Untermenü 3.1</a></li>
<li><a href="Unterlink 3.2">Untermenü 3.2</a></li>
</ul>
</li>
<li><a href="javascript:void(0);" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">Hauptmenü 4</a>
<ul id="smenu4" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">
<li><a href="Unterlink 4.1">Untermenü 4.1</a></li>
<li><a href="Unterlink 4.2">Untermenü 4.2</a></li>
</ul>
</li>
<li><a href="javascript:void(0);" onmouseover="montre('smenu5');" onmouseout="cache('smenu5');">Hauptmenü 5</a>
<ul id="smenu5" onmouseover="montre('smenu5');" onmouseout="cache('smenu5');">
<li><a href="Unterlink 5.1">Untermenü 5.1</a></li>
<li><a href="Unterlink 5.2">Untermenü 5.2</a></li>
</ul>
</li>
</div>
______________
Mit besten Grüßen Marco
www.harley-motorcycles.de



Zuletzt bearbeitet von harleyheaven am 06.12.2009, 20:46, insgesamt 2-mal bearbeitet
Beitrag06.12.2009 um 19:38 (UTC)    
Titel: Re: CSS: 2 x Coolmenü ohne Untermenü

harleyheaven hat Folgendes geschrieben:
Hey Leute,

ich habe mal wieder eine Herausforderung:

Ich erstelle gerade eine neue Seite:

www.lunas-kitten.de

So wie man die Seite jetzt sieht soll es bleiben. Ich will nur noch ein zweites Coolmenü (soll genau so aussehen, wie das erste) unter dem Content.

Die Untermenüs in beiden Navis müssen auch weg.

Bitte helft mir - DANKE...

Bikergruß Marco

Mein Code:

<style type="text/css" media="screen">
<!--
/* Allgemeine Einstellungen (Schriftart, Schriftgröße...) */
body {
font-family: Verdana, sans-serif;
font-size: 14px;
overflow: auto;
margin: 0px; }

/* keine Auflistungspunkte vor Navi-Links */
ul, li {
list-style-type: none;
padding: 0px;
margin: 0px; }

/* Abstand zwischen Schrift zum Rand */
li a {
padding-right: 20px;
padding-top: 5px; }

/* Coolmenü positionieren, Werte bei "top" , "left" und "width" anpassen */
div.menu {
position: absolute;
z-index: 3;
left: 50%;
top: 115px;
margin-left:-200px;
width:850px; }

/* Breite der Menüpunkte einstellen */
.menu li {
width: 132px;
float: left; }

/* Aussehen der Menüpunkte einstellen */
.menu a {
border: 0px solid #000000;
background-color: #261300;
background-image: url(URL);
text-decoration: none;
text-align: center;
font-weight: bold;
cursor: pointer;
margin: 0px;
display: block;
height: 23px;
color: #EEE8AA; }

/* Aussehen der Menüpunkte beim Hover Effekt */
.menu a:hover {
background-color: #EEE8AA;
background-image: url(URL);
color: #261300; }

#smenu1, #smenu2, #smenu3, #smenu4, #smenu5 {
font-size: 14px;
display: none;
width: 160px;
float: left; }

#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a, #smenu5 a {
font-weight: bold;
padding-top: 5px;
border-top: 0px;
cursor: pointer;
color: #FFFFFF; }
//-->
</style>

<!-- Anfang des Scriptes -->
<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>
<!-- Ende des Scriptes -->

<div class="menu">
<li><a href="javascript:void(0);" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">Hauptmenü 1</a>
<ul id="smenu1" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">
<li><a href="Unterlink 1.1">Untermenü 1.1</a></li>
<li><a href="Unterlink 1.2">Untermenü 1.2</a></li>
<li><a href="Unterlink 1.3">Untermenü 1.3</a></li>
<li><a href="Unterlink 1.4">Untermenü 1.4</a></li>
<li><a href="Unterlink 1.5">Untermenü 1.5</a></li>
</ul>
</li>
<li><a href="javascript:void(0);" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">Hauptmenü 2</a>
<ul id="smenu2" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">
<li><a href="Unterlink 2.1">Untermenü 2.1</a></li>
<li><a href="Unterlink 2.2">Untermenü 2.2</a></li>
</ul>
</li>
<li><a href="javascript:void(0);" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">Hauptmenü 3</a>
<ul id="smenu3" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">
<li><a href="Unterlink 3.1">Untermenü 3.1</a></li>
<li><a href="Unterlink 3.2">Untermenü 3.2</a></li>
</ul>
</li>
<li><a href="javascript:void(0);" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">Hauptmenü 4</a>
<ul id="smenu4" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">
<li><a href="Unterlink 4.1">Untermenü 4.1</a></li>
<li><a href="Unterlink 4.2">Untermenü 4.2</a></li>
</ul>
</li>
<li><a href="javascript:void(0);" onmouseover="montre('smenu5');" onmouseout="cache('smenu5');">Hauptmenü 5</a>
<ul id="smenu5" onmouseover="montre('smenu5');" onmouseout="cache('smenu5');">
<li><a href="Unterlink 5.1">Untermenü 5.1</a></li>
<li><a href="Unterlink 5.2">Untermenü 5.2</a></li>
</ul>
</li>
</div>


die seite wird nicht angezeigt
Beitrag06.12.2009 um 19:39 (UTC)    
Titel:

Entschuldige! Habe das tl vergessen.

www.lunas-kitten.de.tl
______________
Mit besten Grüßen Marco
www.harley-motorcycles.de

Beitrag07.12.2009 um 15:36 (UTC)    
Titel:

Wenn du mehrere Coolmenüs ohne Unterlinks magst, dann ist das doch kein Coolmenü mehr, oder?
Dann kannst du doch auch einfach 2 Navis untereinander machen...

Zitat:

Design Code:

#Navigation1{
Befehl: Anweisung;
position:absolute;
top:XXXpx;
left:XXXpx;
}

#Navigation 2{
Befehl: Anweisung;
position:absolute;
top:XXXpx;
left:XXXpx;
}

Jeweils mit "#Navigation a und #Navigation a:hover" um die Links einzustellen.

Bei Text über dem Design musst du noch die Links eintragen:
Zitat:

<div id="navigation">
<a href="Home.htm">Home</a>
<a href="Fun.htm">Fun</a>
</div>


Ich hoffe, dass ich dir helfen konnte!
LG
Florian
______________
Beitrag08.12.2009 um 18:01 (UTC)    
Titel:

flo-t hat Folgendes geschrieben:
Wenn du mehrere Coolmenüs ohne Unterlinks magst, dann ist das doch kein Coolmenü mehr, oder?
Dann kannst du doch auch einfach 2 Navis untereinander machen...

Zitat:

Design Code:

#Navigation1{
Befehl: Anweisung;
position:absolute;
top:XXXpx;
left:XXXpx;
}

#Navigation 2{
Befehl: Anweisung;
position:absolute;
top:XXXpx;
left:XXXpx;
}

Jeweils mit "#Navigation a und #Navigation a:hover" um die Links einzustellen.

Bei Text über dem Design musst du noch die Links eintragen:
Zitat:

<div id="navigation">
<a href="Home.htm">Home</a>
<a href="Fun.htm">Fun</a>
</div>


Ich hoffe, dass ich dir helfen konnte!
LG
Florian


Hi, leider komme ich erst heute ins Forum.

Tut mir leid, ich verstehe nur Bahnhof.

Kann mir einer den genauen Code geben...

#Navigation 2{
Befehl: Anweisung;
position:absolute;
top:XXXpx;
left:XXXpx;
______________
Mit besten Grüßen Marco
www.harley-motorcycles.de

Beiträge der letzten Zeit anzeigen:   


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