Suche im Forum:
Suchen


« Vorheriges Thema anzeigen :: Nächstes Thema anzeigen »  
Autor Nachricht
Beitrag21.09.2012 um 20:28 (UTC)    
Titel: Brauche Hilfe beim Klappmenü :)

Hallo HPBKler,

ich habe auf meiner Homepage

http://penta-network.page.tl

ein Aufklappmenü eingebaut, was bei mir sonst immer geklappt hat, hier gibt es aber Probleme. Der Text "Guides" ist zu weit oben, wie man erkennen kann, aber wenn ich padding-top auf zB 12 setze verschiebt sich auch die normale navigation nach unten, obwohl sie eine andere id hat.

Wie kann das sein?

Hier die beiden codes:

Text über Design (Klappmenü):
Code:
<div id="pnw"></div>

<style type="text/css" media="screen">
<!--
/* Allgemeine Einstellungen (Schriftart, Schriftgröße...) */


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

/* Abstand zwischen Schrift und Rand */
.menu li a {
padding-right: 2px;
padding-top: 0px;
top:12px;}

/* Oberes Menü Nur ändern wenn anderer Header genutzt wird */
div.menu {
position: absolute;
left: 50%;
top: 120px;
margin-left: -360px;
width: 120px; }

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

/* Eigenschaften der Menüpunkte */
.menu a {
border: 1px solid #676767;
background-color: #FFFFFF;
background-image: url(http://img.webme.com/pic/p/penta-network/navibar2.png);
text-decoration: none;
text-align: center;
font-family: verdana,arial;
font-weight: bold;
font-size: 14px;
margin-top: 0px;
cursor: pointer;
margin: 0px;
display: block;
height: 40px;
color: #cccccc;
}

/* Eigenschaften der Menüpunkte HOVER */
.menu a:hover {
background-color: #D3D3D3;
background-image: url(http://img.webme.com/pic/p/penta-network/navibarhover2.png);
color: #ffffff; }






/* Aufklapp Menü */

#smenu1 {
font-size: 14px;
display: none;
padding-top: 0px;
width: 178px;
float: left; }

#smenu1 a {
font-weight: bold;
padding-top: 0px;
border-top: 0px;
cursor: pointer;
color: #cccccc; }
//-->
</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');">Guides</a>
<ul id="smenu1" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">
<li><a href="http://www.penta-network.page.tl">Tier List</a></li>
<li><a href="http://www.penta-network.page.tl">Counterpicks</a></li>
<li><a href="http://www.nilssisten.de.tl">Build Guides</a></li>
</ul>
</li>
</ul>
</li>

</div>


CSS Code (Design)
Code:
/* Nullformatierung für alle Browser */
*{padding: 0px; margin: 0px; }

/* Werbung positioniert */
table[height="102"] {
position: absolute;
left: 50%;
top: 8px;
margin-left: -255px; }

/*Background Versuch*/
#pnw {
}

/* Hintergrund hinter Design */
body {
font-family: arial;
background-image: url(http://img.webme.com/pic/p/penta-network/league-of-legends-death.jpg);
background-attachment: fixed;
background-repeat:no-repeat;
font-size: 14px;
color: #121212; }

/* Design-Container */
#container {
width: 962px;
margin: 10px auto;
overflow: hidden; }

/* Headerfeld für Logo 210 x 100 */
#header_container {
width: 210px;
height: 100px;
margin-bottom: 10px;
background-image: url(http://img.webme.com/pic/p/penta-network/pnw_top_logo.png);
border: 0px solid #a9a9a9; }

/* Titel im Headerfeld entfernt */
h1#header {display: none; }

/* Feld der Navigation */
#nav_container {
width: 960px;
height: 40px;
margin-bottom: 10px;
background-color: #232323;
background-image: url(http://img.webme.com/pic/p/penta-network/navibar2.png);
border: 1px solid #676767; }

/* Titel über Navigation entfernt */
#nav_heading {display: none; }

/* Aufzählungspunkte in Navi entfernt */
ul#nav {
list-style-type: none; }

/* Navi-Buttons */
li.nav_element {
width: 120px;
height: 40px;
float: left;
font-family: verdana,arial;
font-weight: bold; 
font-size: 14px;
text-align: center;
border-right: 1px solid #676767;
background-color: #232323;
background-image: url(http://img.webme.com/pic/p/penta-network/navibar2.png); }

/* Hover Navi-Button */
li.nav_element:hover {
background-color: #454545;
background-image: url(http://img.webme.com/pic/p/penta-network/navibarhover2.png) }

/* Linktexte in Navigation */
li.nav_element a {
display: block;
font-size: 15px;
color: #cccccc;
line-height: 40px;
text-decoration: none; }

/* Hover Linktexte Navigation */
li.nav_element a:hover { color: #ffffff; }

/* Zweites Headerfeld */
#pre_content {
width: 960px;
height: 160px;
margin-bottom: 10px;
background-color: #565656;
background-image: url(http://img.webme.com/pic/p/penta-network/headergif1.gif);
border: 0px solid #a9a9a9; }

/* Seiteninhalt rechts platziert */
#content {
float:right;
width: 665px;
min-height: 200px;
padding: 20px 20px 20px 20px;
background-color: #FFFFFF;
background-image: url();
border: 1px solid #a9a9a9;
overflow: hidden; }

/* Titel Seiteninhalt + Titel über Box */
h2#title , #sidebar_heading {
padding: 5px 0px 5px 20px;
margin: -20px -20px 15px -20px;
background-color: #565656;
color: #cccccc;
font-size: 14px;
font-weight: bold; }

/* Link im Seiteninhalt */
#content a {color: #000080; }

/* Hover Link im Seiteninhalt */
#content a:hover {color: #008080; }

/* Rechte Box links platziert */
#sidebar_container {
float: left;
width: 200px;
min-height: 200px;
padding: 20px 20px 20px 20px;
background-color: #FFFFFF;
background-image: url();
border: 1px solid #c9c9c9;
overflow: hidden; }

/* Liste in rechter Box */
#sidebar_content ul {
list-style-type: square;
margin: 15px 0px 15px 25px; }

/* Linktexte in Box */
#sidebar_content ul li a {
color: #000000;
font-size: 14px;
text-decoration: none; }

/* Hover Linktexte Box */
#sidebar_content ul li a:hover { color: chocolate; }

/* Feld unter dem Design */
#footer {
width: 920px;
padding: 20px 20px 20px 20px;
margin: auto;
background-color: #FFFFFF;
background-image: url();
border: 1px solid #c9c9c9; }

/* unnötige Felder im Design entfernt */
#pre_header {display:none;}
#post_header {display:none;}
#post_content {display:none;}
#below_content{display:none;}
#counter{display:none;}


Hoffe auf schnelle Hilfe,

Noni Smile
Beitrag21.09.2012 um 20:51 (UTC)    
Titel:

Zitat:
/* Breite der Menüpunkte */
.menu li {
width: 123px;
float: left;
line-height: 40px;
}


Du musst das Rote ergänzen, um das selbe Ergebnis wie bei deinen anderen Navigationlinks zu erzielen.

Liebe Grüße
Beitrag21.09.2012 um 21:00 (UTC)    
Titel:

Du regst mich auf -.-
Den ganzen Tag probier ich daran rum und dann ist es sowas simples.

Danke Danke Danke Very Happy Very Happy Very Happy Very Happy

lG
Noni
Beiträge der letzten Zeit anzeigen:   


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