Autor |
Nachricht |
-
extreme-resistance
Wohnort: Bayern, Neu-Ulm
|
09.07.2011 um 17:29 (UTC) Titel: Anderes Coolmenu |
|
|
Hallo HPBK-User,
ich habe eine kleine bescheidene Frage zum Thema Coolmenu.
Den post hier habe ich schon angeschaut:
http://www.homepage-baukasten.de/forum/viewtopic.php?t=101593
Meine Frage lautet:
Gibt es eine Möglichkeit, wenn man über das "Hauptmenü" fährt öffnet sich ja automatisch die Unterpunkte, diese sind jedoch genauso groß wie der Hauptpunkt. Kann man die Unterpunkte nicht etwas niedriger und ein anderes Hintergrundbild machen?
Hauptmenu höhe: z.B. 50 pixel
Untermenü höhe: z.B. 25 pixel
Code: http://img.webme.com/pic/d/der-bielefeld-club/coolmenue2.png [/quote] ______________ Mit freundlichen Grüßen
ChaoSi7
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
> Du willst Geld mit deiner Homepage verdienen ? - dann klicke hier auf den Link !
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Zuletzt bearbeitet von extreme-resistance am 09.07.2011, 18:30, insgesamt einmal bearbeitet
|
|
↑
|
|
|
|
|
↑
|
|
|
-
extreme-resistance
Wohnort: Bayern, Neu-Ulm
|
10.07.2011 um 09:13 (UTC) Titel: |
|
|
Hallo,
hier der Code:
Code: <style type="text/css" media="screen">
<!--
/* 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;
top: 190px;
left: 100px;
width:850px; }
/* Breite der Menüpunkte einstellen */
.menu li {
width: 160px;
float: left; }
/* Aussehen der Menüpunkte einstellen (Hintergrund, Schriftart und Größe) */
.menu a {
border: 0px solid #000000;
background-color: #000000;
background-image: url(URL);
font-family: Verdana, sans-serif;
font-size: 14px;
text-align: center;
text-decoration: none;
font-weight: bold;
cursor: pointer;
margin: 0px;
display: block;
height: 23px;
color: #00CCFF; }
/* Aussehen der Menüpunkte beim Hover Effekt */
.menu a:hover {
background-color: #00CCFF;
background-image: url(URL);
color: #000000; }
#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>
Ich kann alles bearbeiten, nur halt nicht die größe und das Hintergrundbild der Untermenüs.
Mit freundlichen Grüßen
ChaoSi7 ______________ Mit freundlichen Grüßen
ChaoSi7
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
> Du willst Geld mit deiner Homepage verdienen ? - dann klicke hier auf den Link !
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - |
|
↑
|
|
|
|
10.07.2011 um 22:11 (UTC) Titel: |
|
|
Hi,
die Untermenüpunkte änderst du am einfachsten in diesem Block:
Zitat: #smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a, #smenu5 a {
font-weight: bold;
padding-top: 5px;
border-top: 0px;
cursor: pointer;
color: #FFFFFF; }
größe:
Größe in pixel
Hintergrundbild:
Zitat: background-image:url(URL);
URL zu deinem Bild______________ mfg
o-4-n
"If you’re incompetent, you can’t know you’re incompetent." - [David Dunning]
*** Die Suchfunktion ist KEINE tödliche Krankheit! ***
Eventplanung, Equipment, Zeltverleih, Catering |
|
↑
|
|
|
-
extreme-resistance
Wohnort: Bayern, Neu-Ulm
|
11.07.2011 um 15:26 (UTC) Titel: |
|
|
Danke, funzt einwandfrei ! ______________ Mit freundlichen Grüßen
ChaoSi7
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
> Du willst Geld mit deiner Homepage verdienen ? - dann klicke hier auf den Link !
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - |
|
↑
|
|
|
-
ravensbilder
|
24.07.2011 um 11:09 (UTC) Titel: |
|
|
Hallo, das selbe wollte ich auch gerne machen, aber irgendwie funktioniert esbei mir nicht so ganz.
Hier mal der Code:
Code: <style type="text/css" media="screen">
<!--
/* 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;
top: 190px;
left: 100px;
width:850px; }
/* Breite der Menüpunkte einstellen */
.menu li {
width: 160px;
float: left; }
/* Aussehen der Menüpunkte einstellen (Hintergrund, Schriftart und Größe) */
.menu a {
border: 0px solid #000000;
background-color: #000000;
background-image: url(http://i195.photobucket.com/albums/z15/666_raven/balken_schwarz.jpg);
font-family: Verdana, sans-serif;
font-size: 14px;
text-align: center;
text-decoration: none;
font-weight: bold;
cursor: pointer;
margin: 0px;
display: block;
height: 23px;
color: #00CCFF; }
/* Aussehen der Menüpunkte beim Hover Effekt */
.menu a:hover {
background-color: #00CCFF;
background-image: url(URL);
color: #000000; }
#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; }
height: 33px;
background-image:url(http://i195.photobucket.com/albums/z15/666_raven/503869.png); }
//-->
</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');">Galerie</a>
<ul id="smenu1" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">
<li><a href="http://www.violettas-gallery.com/Photo-Impact.htm">Photo Impact</a></li>
<li><a href="http://www.violettas-gallery.com/Bleistift.htm">Bleistift</a></li>
<li><a href="http://www.violettas-gallery.com/Drake-and-Nirajira.htm">Drake und Nirajira</a></li>
<li><a href="http://www.violettas-gallery.com/Banner-Header-etc-.-.htm">Banner Header etc.</a></li>
<li><a href="http://www.violettas-gallery.com/Schritt-f.ue.r-Schritt.htm">Schritt für Schritt</a></li>
</ul>
</li>
<li><a href="javascript:void(0);" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">Sanatos und Raven</a>
<ul id="smenu2" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">
<li><a href="http://www.violettas-gallery.com/Bleistiftwerke.htm">Bleistiftwerke</a></li>
<li><a href="http://www.violettas-gallery.com/Buntes.htm">Buntes</a></li>
</ul>
</li>
<li><a href="javascript:void(0);" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">Träume und Gedanken</a>
<ul id="smenu3" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">
<li><a href="http://www.violettas-gallery.com/Der-Schattenhafte.htm">Der Schattenhafte</a></li>
<li><a href="http://www.violettas-gallery.com/Gedanken.htm">Gedanken</a></li>
</ul>
</li>
<li><a href="javascript:void(0);" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">Schwarzer Engel</a>
<ul id="smenu4" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">
<li><a href="http://www.violettas-gallery.com/Schwarzer-Engel--k1-Band-k2-.htm">Die Band</a></li>
<li><a href="http://www.violettas-gallery.com/Fan-Arts-Skizzen.htm">Fan Art</a></li>
</ul>
</li>
<li><a href="javascript:void(0);" onmouseover="montre('smenu5');" onmouseout="cache('smenu5');">The Elder Scrolls</a>
<ul id="smenu5" onmouseover="montre('smenu5');" onmouseout="cache('smenu5');">
<li><a href="http://www.violettas-gallery.com/The-Elder-Scrolls-.htm">Die Games</a></li>
<li><a href="http://www.violettas-gallery.com/Die-Titelmusik.htm">Die Titelmusik</a></li>
<li><a href="http://www.violettas-gallery.com/Zeichnungen-dazu.htm">Zeichnungen</a></li>
</ul>
</li>
</div>
Habe ich irgendwas vergessen bzw. falsch gemacht.
Liebe Grüße, Janina |
|
↑
|
|
|
|
24.07.2011 um 20:18 (UTC) Titel: |
|
|
Hallo,
ravensbilder hat Folgendes geschrieben:
style type="text/css" media="screen">
<!--
/* 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;
top: 190px;
left: 100px;
width:850px; }
/* Breite der Menüpunkte einstellen */
.menu li {
width: 160px;
float: left; }
/* Aussehen der Menüpunkte einstellen (Hintergrund, Schriftart und Größe) */
.menu a {
border: 0px solid #000000;
background-color: #000000;
background-image: url(http://i195.photobucket.com/albums/z15/666_raven/balken_schwarz.jpg);
font-family: Verdana, sans-serif;
font-size: 14px;
text-align: center;
text-decoration: none;
font-weight: bold;
cursor: pointer;
margin: 0px;
display: block;
height: 23px;
color: #00CCFF; }
/* Aussehen der Menüpunkte beim Hover Effekt */
.menu a:hover {
background-color: #00CCFF;
background-image: url(URL);
color: #000000; }
#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; }
height: 33px;
background-image:url(http://i195.photobucket.com/albums/z15/666_raven/503869.png); }
//-->
</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');">Galerie</a>
<ul id="smenu1" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">
<li><a href="http://www.violettas-gallery.com/Photo-Impact.htm">Photo Impact</a></li>
<li><a href="http://www.violettas-gallery.com/Bleistift.htm">Bleistift</a></li>
<li><a href="http://www.violettas-gallery.com/Drake-and-Nirajira.htm">Drake und Nirajira</a></li>
<li><a href="http://www.violettas-gallery.com/Banner-Header-etc-.-.htm">Banner Header etc.</a></li>
<li><a href="http://www.violettas-gallery.com/Schritt-f.ue.r-Schritt.htm">Schritt für Schritt</a></li>
</ul>
</li>
<li><a href="javascript:void(0);" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">Sanatos und Raven</a>
<ul id="smenu2" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">
<li><a href="http://www.violettas-gallery.com/Bleistiftwerke.htm">Bleistiftwerke</a></li>
<li><a href="http://www.violettas-gallery.com/Buntes.htm">Buntes</a></li>
</ul>
</li>
<li><a href="javascript:void(0);" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">Träume und Gedanken</a>
<ul id="smenu3" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">
<li><a href="http://www.violettas-gallery.com/Der-Schattenhafte.htm">Der Schattenhafte</a></li>
<li><a href="http://www.violettas-gallery.com/Gedanken.htm">Gedanken</a></li>
</ul>
</li>
<li><a href="javascript:void(0);" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">Schwarzer Engel</a>
<ul id="smenu4" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">
<li><a href="http://www.violettas-gallery.com/Schwarzer-Engel--k1-Band-k2-.htm">Die Band</a></li>
<li><a href="http://www.violettas-gallery.com/Fan-Arts-Skizzen.htm">Fan Art</a></li>
</ul>
</li>
<li><a href="javascript:void(0);" onmouseover="montre('smenu5');" onmouseout="cache('smenu5');">The Elder Scrolls</a>
<ul id="smenu5" onmouseover="montre('smenu5');" onmouseout="cache('smenu5');">
<li><a href="http://www.violettas-gallery.com/The-Elder-Scrolls-.htm">Die Games</a></li>
<li><a href="http://www.violettas-gallery.com/Die-Titelmusik.htm">Die Titelmusik</a></li>
<li><a href="http://www.violettas-gallery.com/Zeichnungen-dazu.htm">Zeichnungen</a></li>
</ul>
</li>
</div>
Wenn du die rote Klammer entfernst, sollte es auch bei dir gehen. ______________ mfg
o-4-n
"If you’re incompetent, you can’t know you’re incompetent." - [David Dunning]
*** Die Suchfunktion ist KEINE tödliche Krankheit! ***
Eventplanung, Equipment, Zeltverleih, Catering |
|
↑
|
|
|
|