Suche im Forum:
Suchen


Autor Nachricht
Beitrag22.07.2010 um 14:07 (UTC)    
Titel: Buttons ins Coolmenü ordnen!

Moin,
wollte mal gerne nachfragen, wie ich ins Coolmenü Buttons einbringen kann? Die Buttons sollten beim Oberpunkt als auch bei den Unterpunkten der Navigation untergebracht werden können. Bräuchte etwas Hilfe, siehe http://www.success4you.de.tl/Start.htm

Ansonsten, einfach mal bei mir schauen wie ich es meine.

Gruß,
Fabian
Beitrag22.07.2010 um 14:31 (UTC)    
Titel:

Dann poste doch mal bitte den Code für das Coolmenu, also das wo du die Buttons verwenden möchtest. Sonst kann ich dir da auch nicht weiterhelfen.

mfg
______________
Du hast eine Frage? Ich stehe dir selbstverständlich jeder Zeit zur Verfügung!


Zuletzt bearbeitet von southpark-comedyclub am 22.07.2010, 15:32, insgesamt einmal bearbeitet
Beitrag22.07.2010 um 14:38 (UTC)    
Titel:

Code:
<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;
}

li a
{
padding-right: 20px;padding-top: 5px;
}

div.menu
{
position: absolute;
z-index: 3;
top: 121px;
left: 50%;
margin-left:-249px;
width:905px;
}

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

.menu a
{
border: 0px solid #000000;
background-color: #000000;
background-image: url(URL);
text-decoration: none;
text-align: center;
font-weight: bold;
cursor: pointer;
margin: 0px;
display: block;
height: 23px;
color: #00CCFF;
}

.menu a:hover
{
background-color: #00CCFF;
background-image: url(URL);
}

#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>

<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>
<div class="menu">
<li><a onmouseout="cache('smenu1');" onmouseover="montre('smenu1');" href="home.htm"> Startseite</a>
<ul onmouseout="cache('smenu1');" onmouseover="montre('smenu1');" id="smenu1">
<li><a href="UNTERLINK3.2">Startseite</a></li>
<li><a href="UNTERLINK3.3">Artikel2</a></li>
<li><a href="UNTERLINK3.4">Artikel3</a></li>
<li><a href="UNTERLINK3.3">Artikel4</a></li>
<li><a href="UNTERLINK3.4">Artikel5</a></li>
</ul>
</li>
<li><a onmouseout="cache('smenu2');" onmouseover="montre('smenu2');" href="about.htm"> About</a>
<ul onmouseout="cache('smenu2');" onmouseover="montre('smenu2');" id="smenu2">
<li><a href="#">Über mich</a></li>
<li><a href="UNTERLINK2.3">Galerie</a></li>
</ul>
</li>
<li><a onmouseout="cache('smenu3');" onmouseover="montre('smenu3');" href="marktplatz.htm"> Marktplatz</a>
<ul onmouseout="cache('smenu3');" onmouseover="montre('smenu3');" id="smenu3">
<li><a href="UNTERLINK3.2">Referenzen</a></li>
<li><a href="UNTERLINK3.3">Banner</a></li>
<li><a href="UNTERLINK3.4">Buttons</a></li>
<li><a href="UNTERLINK3.3">Header</a></li>
<li><a href="UNTERLINK3.4">Designs</a></li>
</ul>
</li>
<li><a onmouseout="cache('smenu4');" onmouseover="montre('smenu4');" href="kontakt.htm"> Kontakt</a>
<ul onmouseout="cache('smenu4');" onmouseover="montre('smenu4');" id="smenu4">
<li><a href="UNTERLINK3.2">Impressum</a></li>
<li><a href="UNTERLINK3.3">Nutzungsbedingungen</a></li>
<li><a href="UNTERLINK3.4">AGB</a></li>
</ul>
</div>


Hier ist er, halt Ober und Unterkatogorie.
Beitrag22.07.2010 um 16:06 (UTC)    
Titel:

Sry bin eben noch schnell in die Stadt und kann deswegen erst jetzt antworten:

Ich habe dann mal einige Veränderungen vorgenommen:

» dick Dort kannst du die Buttons verändern, dies ist chronologisch angeordnert.

» blau Hier kannst du einmal die Höhen der Buttons verändern. Jedoch solltest du beachten, dass du dann die Höhe von ".menu a" auch an diese der Buttons anpasst.

» grün Hier kannst du die Breite der Buttons anpassen. Diese kann auch unterschiedlich sein.

» rot Dort kannst du zwischen den Klammern "()" eine URL zu einer Hintergrundgrafik (Button in dem Fall) hineinkopieren.

» braun Dadurch wird eine Hintergrundfarbe festgelegt. Ich habe diese Option nur als Beispiel hingeschrieben. Sprich sind alle 4 Buttons dadruch unterschiedlich gefärbt. Dieses kannst du jedoch ganz einfach entfernen.

Zitat:

<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;
}


div.menu
{
position: absolute;
z-index: 3;
top: 121px;
left: 50%;
margin-left:-249px;
width:905px;
}

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

.menu a
{
border: 0px solid #000000;
background-image: url(URL);
text-decoration: none;
text-align: center;
font-weight: bold;
cursor: pointer;
margin: 0px;
display: block;
height: 30px;
color: #00CCFF;
}


#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;
}

li#button_1 {
background-color: #FF0000;
background-image: url();
width: 200px;
height: 30px;
}

li#button_2 {
background-color: #05FF0E;
background-image: url();
width: 200px;
height: 30px;
}


li#button_3 {
background-color: #051AFF;
background-image: url();
width: 200px;
height: 30px;
}

li#button_4 {
background-color: #05FFC5;
background-image: url();
width: 200px;
height: 30px;
}



li a.two /*Einstellungen am Menu das auftaucht*/
{
padding-right: 20px;
padding-top: 5px;
background-color: #000000;
}

li a.two:hover /*Hover Einstellungen vom Menu das auftaucht*/
{
background-color: #626262;
}





//-->

</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>
<div class="menu">
<li id="button_1"><a onmouseout="cache('smenu1');" onmouseover="montre('smenu1');" href="home.htm"> Startseite</a>
<ul onmouseout="cache('smenu1');" onmouseover="montre('smenu1');" id="smenu1">
<li><a class="two" href="UNTERLINK3.2">Startseite</a></li>
<li><a class="two" href="UNTERLINK3.3">Artikel2</a></li>
<li><a class="two" href="UNTERLINK3.4">Artikel3</a></li>
<li><a class="two" href="UNTERLINK3.3">Artikel4</a></li>
<li><a class="two" href="UNTERLINK3.4">Artikel5</a></li>
</ul>
</li>
<li id="button_2"><a onmouseout="cache('smenu2');" onmouseover="montre('smenu2');" href="about.htm"> About</a>
<ul onmouseout="cache('smenu2');" onmouseover="montre('smenu2');" id="smenu2">
<li><a class="two" href="#">Über mich</a></li>
<li><a class="two" href="UNTERLINK2.3">Galerie</a></li>
</ul>
</li>
<li id="button_3"><a onmouseout="cache('smenu3');" onmouseover="montre('smenu3');" href="marktplatz.htm"> Marktplatz</a>
<ul onmouseout="cache('smenu3');" onmouseover="montre('smenu3');" id="smenu3">
<li><a class="two" href="UNTERLINK3.2">Referenzen</a></li>
<li><a class="two" href="UNTERLINK3.3">Banner</a></li>
<li><a class="two" href="UNTERLINK3.4">Buttons</a></li>
<li><a class="two" href="UNTERLINK3.3">Header</a></li>
<li><a class="two" href="UNTERLINK3.4">Designs</a></li>
</ul>
</li>
<li id="button_4"><a onmouseout="cache('smenu4');" onmouseover="montre('smenu4');" href="kontakt.htm"> Kontakt</a>
<ul onmouseout="cache('smenu4');" onmouseover="montre('smenu4');" id="smenu4">
<li><a class="two" href="UNTERLINK3.2">Impressum</a></li>
<li><a class="two" href="UNTERLINK3.3">Nutzungsbedingungen</a></li>
<li><a class="two" href="UNTERLINK3.4">AGB</a></li>
</ul>
</div>


Zuletzt bearbeitet von southpark-comedyclub am 22.07.2010, 17:07, insgesamt einmal bearbeitet
Beitrag23.07.2010 um 08:19 (UTC)    
Titel:

Allerdings ist auf deiner Homepage noch nicht das Coolmenü ganz richtig!
Die Schrift ist nicht in der Mitte sondern etwas weiter oben.

Gruß
Camiyo
______________
Wenn ihr mich unterstützen wollt, würde ich mich freuen wenn ihr für mich (techmec.de) auf http://www.selbstaendig-im-netz.de/2011/05/23/blog-coaching/abstimmung-zum-blog-coaching/ abstimmt, einfach den Haken vor "Techmec.de" setzten und auf "Vote" klicken, würde mich sehr freuen!!
Beitrag23.07.2010 um 11:49 (UTC)    
Titel:

camiyo hat Folgendes geschrieben:
Allerdings ist auf deiner Homepage noch nicht das Coolmenü ganz richtig!
Die Schrift ist nicht in der Mitte sondern etwas weiter oben.

Gruß
Camiyo


Bisschen padding-top bei den Buttons und schwubs ist der Text in der Mitte ...

mfg Max
______________
Du hast eine Frage? Ich stehe dir selbstverständlich jeder Zeit zur Verfügung!
Beiträge der letzten Zeit anzeigen:   


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