Suche im Forum:
Suchen


Autor Nachricht
Beitrag25.03.2010 um 11:13 (UTC)    
Titel: Navigation oben/ transparent
Antworten mit Zitat
Hallo kann ich bei diesem Code für die "Navigation Oben" im Ice Blue auch die buttons transparent coden? Sodass dann praktisch nur noch der die Links zu sehen sind. Wenn ja wie? Ihr könnt euch ja mal den header angucken auf www.por-test.de.tl da soll die navi in den orangenen balken.

Danke für eure Hilfe!


Zitat:

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

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

div.menu
{
position: absolute;
z-index: 3;
top: 80px;
left: 50%;
margin-left:-290px;
width: 100%;
}

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

.menu a
{
border: 1px solid #F2F2F2;
background-color:#000C32;
padding-top: 9px;
text-decoration: none;
text-align: center;
font-weight: bold;
cursor: pointer;
margin: 0px 10px;
display: block;
height: 25px;
color: #FFFFFF;
}

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

#smenu1, #smenu2, #smenu3
{
font-size: 13px;
display: none;
width: 200px;
float: left;
}

#smenu1 a, #smenu2 a, #smenu3 a
{
font-size: 13px;
font-weight: bold;
padding-top: 9px;
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>

<div class="menu">
<li><a href="javascript:void(0);" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">TITEL Navi-Button 1</a>
<ul id="smenu1" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">
<li><a href="http://HIER SEITE 1.htm" target="_self">Seiten-Name 1</a></li>
<li><a href="http://HIER SEITE 2.htm" target="_self">Seiten-Name 2</a></li>
<li><a href="http://HIER SEITE 3.htm" target="_self">Seiten-Name 3</a></li>
</ul>
</li>

<li><a href="javascript:void(0);" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">TITEL NAVI-Button 2</a>
<ul id="smenu2" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">
<li><a href="http://HIER SEITE 1.htm" target="_self">Seiten-Name 1</a></li>
<li><a href="http://HIER SEITE 2.htm" target="_self">Seiten-Name 2</a></li>
<li><a href="http://HIER SEITE 3.htm" target="_self">Seiten-Name 3</a></li>
</ul>
</li>

<li><a href="javascript:void(0);" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">TITEL NAVI-BUTTON 3</a>
<ul id="smenu3" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">
<li><a href="http://HIER SEITE 1.htm" target="_self">Seiten-Name 1</a></li>
<li><a href="http://HIER SEITE 2.htm" target="_self">Seiten-Name 2</a></li>
<li><a href="http://HIER SEITE 3.htm" target="_self">Seiten-Name 3</a></li>
</ul>
</li>
</ul>
</div>


Zuletzt bearbeitet von por-test am 25.03.2010, 12:14, insgesamt einmal bearbeitet
↑
Beitrag25.03.2010 um 15:56 (UTC)    
Titel:
Antworten mit Zitat
Du kannst dein Coolemenü nicht mit left: 50% positionieren, wenn deine restliche
Seite sich nach den normalen left Wert richtet und somit links dargestellt wird.

Dies führt zu Darstellungsproblemen bei verschiedenen Auflösungen.

Versuche mal folgendes - den roten Wert anpassen. (Buttons sind transparent)

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

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

div.menu
{
position: absolute;
z-index: 3;
top: 80px;
left: 100px;
width: 100%;
}

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

.menu a
{
border: 1px solid #F2F2F2;
background-color: transparent;
padding-top: 9px;
text-decoration: none;
text-align: center;
font-weight: bold;
cursor: pointer;
margin: 0px 10px;
display: block;
height: 25px;
color: #FFFFFF;
}

.menu a:hover
{
background-color: transparent;
}

#smenu1, #smenu2, #smenu3
{
font-size: 13px;
display: none;
width: 200px;
float: left;
}

#smenu1 a, #smenu2 a, #smenu3 a
{
font-size: 13px;
font-weight: bold;
padding-top: 9px;
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>

<div class="menu">
<li><a href="javascript:void(0);" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">TITEL Navi-Button 1</a>
<ul id="smenu1" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">
<li><a href="http://HIER SEITE 1.htm" target="_self">Seiten-Name 1</a></li>
<li><a href="http://HIER SEITE 2.htm" target="_self">Seiten-Name 2</a></li>
<li><a href="http://HIER SEITE 3.htm" target="_self">Seiten-Name 3</a></li>
</ul>
</li>

<li><a href="javascript:void(0);" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">TITEL NAVI-Button 2</a>
<ul id="smenu2" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">
<li><a href="http://HIER SEITE 1.htm" target="_self">Seiten-Name 1</a></li>
<li><a href="http://HIER SEITE 2.htm" target="_self">Seiten-Name 2</a></li>
<li><a href="http://HIER SEITE 3.htm" target="_self">Seiten-Name 3</a></li>
</ul>
</li>

<li><a href="javascript:void(0);" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">TITEL NAVI-BUTTON 3</a>
<ul id="smenu3" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">
<li><a href="http://HIER SEITE 1.htm" target="_self">Seiten-Name 1</a></li>
<li><a href="http://HIER SEITE 2.htm" target="_self">Seiten-Name 2</a></li>
<li><a href="http://HIER SEITE 3.htm" target="_self">Seiten-Name 3</a></li>
</ul>
</li>
</ul>
</div>

______________
Spendet jetzt für den User -Name entfernt - , damit er sich ein Duden kaufen kann, da seine Schreibkünste die einens 11-jährigen sehr stark ähneln. Smile
↑
Beitrag26.03.2010 um 10:33 (UTC)    
Titel:
Antworten mit Zitat
Danke, sieht jetzt im Firefox so aus wie ich es mir vorgestellt habe. Aber im IE passt die positionierung nicht. Wo muss ich etwas ändern das die einzelnen Links näher zusammen rücken?

www.por-test.de.tl

Hier mal mein Code der Navi:

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

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

div.menu
{
position: absolute;
z-index: 3;
top: 340px;
left:25px;
width: 100%;
}

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

.menu a
{
border: 1px solid transparent;
background-color:transparent;
padding-top: 9px;
text-decoration: none;
text-align: center;
font-weight: bold;
cursor: pointer;
margin: 0px 10px;
display: block;
height: 25px;
color: transparent;
}

.menu a:hover
{
background-color: transparent;
}

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

#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a, #smenu5 a, #smenu6 a
{
font-size: 9px;
font-weight: bold;
padding-top: 9px;
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>

<div class="menu">
<li><a href="http://www.por-festival.de/Home.htm" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">Home</a>
<ul id="smenu1" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">
</ul>
</li>

<li><a href="http://www.por-festival.de/Infos.htm" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">Infos</a>
<ul id="smenu1" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">
</ul>
</li>

<li><a href="http://www.por-festival.de/Acts.htm" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">Acts</a>
<ul id="smenu1" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">
</ul>
</li>

<li><a href="http://www.por-festival.de/Fotos/index.htm" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">Galerie</a>
<ul id="smenu1" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">
</ul>
</li>

<li><a href="http://www.por-festival.de/Verlosung.htm" onmouseover="montre('smenu5');" onmouseout="cache('smenu5');">Verlosung</a>
<ul id="smenu1" onmouseover="montre('smenu5');" onmouseout="cache('smenu5');">
</ul>
</li>

<li><a href="http://www.por-festival.de/Anfahrt.htm" onmouseover="montre('smenu6');" onmouseout="cache('smenu6');">Anfahrt</a>
<ul id="smenu1" onmouseover="montre('smenu6');" onmouseout="cache('smenu6');">
</ul>
</li>
</ul>
</div>




↑
Beitrag28.03.2010 um 10:19 (UTC)    
Titel:
Antworten mit Zitat
Hat keiner eine Antwort auf das Problem?
↑
Beiträge der letzten Zeit anzeigen:   
  • Seite 1 von 1

  •  
    • Gehe zu:  


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

© 2024 webme GmbH, Deutschland. Alle Rechte vorbehalten.