Suche im Forum:
Suchen


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