Suche im Forum:
Suchen


« Vorheriges Thema anzeigen :: Nächstes Thema anzeigen »  
Autor Nachricht
Beitrag18.08.2007 um 13:20 (UTC)    
Titel: [erledigt] drop down menü

hi bei dem menü hier kann ich i-wie nicht 5 button neben einander machen der 5 geht immer eine zeile tiefer siehe meine hp hier der code hoffe es hilft mir einer



Code:


</style>
</head>
<body>
<FONT color="white"><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: 5px;
left: 5px;
width:905px;
}

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

.menu a {
border: 0px solid #990000;
background-color: #990000;
background-image: url(http://img.webme.com/pic/r/rockforever2/button-rot-2.png);
text-decoration: none;
text-align: center;
font-weight: bold;
cursor: pointer;
margin: 0px;
display: block;
height: 28px;
color: #ffffff;
}

.menu a:hover {
background-color: #990000;
background-image: url(http://img.webme.com/pic/m/my-seid/button-rot-2-hover2.png);
}

#smenu1, #smenu2, #smenu3, #smenu4, #smenu5 {
font-size: 14px;
display: none;
width: 135px;
height: 25px;
float: left;
}

#smenu1:hover, #smenu2:hover, #smenu3:hover, #smenu4:hover, #smenu5:hover {
font-size: 14px;
display: none;
width: 135px;
height: 25px;
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;
background-image: url();
background-color: #ff0000;
}

#smenu1 a:hover, #smenu2 a:hover, #smenu3 a:hover, #smenu4 a:hover, #smenu5 a:hover {
font-weight: bold;
padding-top: 5px;
border-top: 0px;
cursor: pointer;
color: #FFFFFF;
background-image: url(URL DES UNTEREN HOVER BUTTON);
background-color: #ff0000;
}



//-->
</style>

<script type="text/javascript">
<!--
function montre(id)
<style type="text/css" media="screen">
<!--
body
{
font-family: Verdana, sans-serif;
font-size: 18px;
overflow: auto;
padding: 10px;
margin: 0px;
}

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

div.menu
{
position: absolute;
z-index: 3;
top: 180px;
left:300px;
}

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

.menu a
{
border: 1px solid #888;
background-color: #000000;
background-image: url(http://img.webme.com/pic/g/giga6test/button-normal.gif);
text-decoration: none;
text-align: center;
font-weight: bold;
cursor: default;
margin: 0px 2px;
display: block;
height: 20px;
color: #99ff00;
}

.menu a:hover
{
background-image: url(http://img.webme.com/pic/g/giga6test/button-hover.gif);
background-color: #000099;
}

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

#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a, #smenu5 a
{
font-weight: normal;
padding-top: 2px;
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">
<ul>

<li><a href="http://www.feuerwehr-aktuell.de.tl/G.ae.stebuch.htm">Gästebuch</a>
</ul>
</li>

<li><a href="http://www.feuerwehr-aktuell.de.tl/Kontakt.htm">Kontakt</a>
</ul>
</li>

<li><a href="http://www.feuerwehr-aktuell.de.tl/Umfrage.htm">Umfrage</a>
</ul>
</li>

<li><a href="http://www.feuerwehr-aktuell.de.tl/Links.htm">Links</a>
</ul>
</li>

<li><a href="http://www.feuerwehr-aktuell.de.tl/Impressum.htm">Impressum</a>
</ul>
</li>


 
</div>



Zuletzt bearbeitet von feuerwehr-aktuell am 18.08.2007, 15:15, insgesamt einmal bearbeitet
Beitrag18.08.2007 um 13:34 (UTC)    
Titel:

kannst du auch nicht weil du breite der seite nicht aufbilschirmbreite ist...
aber du kansst die breite der buttons verkleinern dann gehts auch
Beitrag18.08.2007 um 13:35 (UTC)    
Titel: Re: drop down menü

feuerwehr-aktuell hat Folgendes geschrieben:
hi bei dem menü hier kann ich i-wie nicht 5 button neben einander machen der 5 geht immer eine zeile tiefer siehe meine hp hier der code hoffe es hilft mir einer





</style>
</head>
<body>
<FONT color="white"><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: 5px;
left: 5px;
width:905px;
}

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

.menu a {
border: 0px solid #990000;
background-color: #990000;
background-image: url(http://img.webme.com/pic/r/rockforever2/button-rot-2.png);
text-decoration: none;
text-align: center;
font-weight: bold;
cursor: pointer;
margin: 0px;
display: block;
height: 28px;
color: #ffffff;
}

.menu a:hover {
background-color: #990000;
background-image: url(http://img.webme.com/pic/m/my-seid/button-rot-2-hover2.png);
}

#smenu1, #smenu2, #smenu3, #smenu4, #smenu5 {
font-size: 14px;
display: none;
width: 135px;
height: 25px;
float: left;
}

#smenu1:hover, #smenu2:hover, #smenu3:hover, #smenu4:hover, #smenu5:hover {
font-size: 14px;
display: none;
width: 135px;
height: 25px;
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;
background-image: url();
background-color: #ff0000;
}

#smenu1 a:hover, #smenu2 a:hover, #smenu3 a:hover, #smenu4 a:hover, #smenu5 a:hover {
font-weight: bold;
padding-top: 5px;
border-top: 0px;
cursor: pointer;
color: #FFFFFF;
background-image: url(URL DES UNTEREN HOVER BUTTON);
background-color: #ff0000;
}



//-->
</style>

<script type="text/javascript">
<!--
function montre(id)
<style type="text/css" media="screen">
<!--
body
{
font-family: Verdana, sans-serif;
font-size: 18px;
overflow: auto;
padding: 10px;
margin: 0px;
}

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

div.menu
{
position: absolute;
z-index: 3;
top: 180px;
left:300px;
}

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

.menu a
{
border: 1px solid #888;
background-color: #000000;
background-image: url(http://img.webme.com/pic/g/giga6test/button-normal.gif);
text-decoration: none;
text-align: center;
font-weight: bold;
cursor: default;
margin: 0px 2px;
display: block;
height: 20px;
color: #99ff00;
}

.menu a:hover
{
background-image: url(http://img.webme.com/pic/g/giga6test/button-hover.gif);
background-color: #000099;
}

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

#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a, #smenu5 a
{
font-weight: normal;
padding-top: 2px;
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">
<ul>

<li><a href="http://www.feuerwehr-aktuell.de.tl/G.ae.stebuch.htm">Gästebuch</a>
</ul>
</li>

<li><a href="http://www.feuerwehr-aktuell.de.tl/Kontakt.htm">Kontakt</a>
</ul>
</li>

<li><a href="http://www.feuerwehr-aktuell.de.tl/Umfrage.htm">Umfrage</a>
</ul>
</li>

<li><a href="http://www.feuerwehr-aktuell.de.tl/Links.htm">Links</a>
</ul>
</li>

<li><a href="http://www.feuerwehr-aktuell.de.tl/Impressum.htm">Impressum</a>
</ul>
</li>



</div>



versuch ma so


Zuletzt bearbeitet von zaza12test am 18.08.2007, 14:36, insgesamt einmal bearbeitet
Beitrag18.08.2007 um 13:55 (UTC)    
Titel:

danke es hat sogar mit 180 geklappt die grafik habe ich dan bisxchen verkleinert und jetzt sieht es perfekt aus auber wie mache ich juetzt noch das die noch imer so ein bischen mitscrollt diese leiste vom drop down menü
______________
[img:6549282cdc]http://img.webme.com/pic/f/feuerwehr-aktuell/feuerwehr2.png[/img:6549282cdc]
Stellt eure Fragen: http://www.feuerwehr-aktuell.de.tl/Frage_Box.htm
Beitrag18.08.2007 um 13:59 (UTC)    
Titel:

meinst du die navileiste soll immer mit scrollen?

position:fixed; glaub ich

naja ich markiere es gleich rot bei den code
Beitrag18.08.2007 um 14:01 (UTC)    
Titel: Re: drop down menü

</style>
</head>
<body>
<FONT color="white"><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: fixed;
z-index: 3;
top: 5px;
left: 5px;
width:905px;
}

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

.menu a {
border: 0px solid #990000;
background-color: #990000;
background-image: url(http://img.webme.com/pic/r/rockforever2/button-rot-2.png);
text-decoration: none;
text-align: center;
font-weight: bold;
cursor: pointer;
margin: 0px;
display: block;
height: 28px;
color: #ffffff;
}

.menu a:hover {
background-color: #990000;
background-image: url(http://img.webme.com/pic/m/my-seid/button-rot-2-hover2.png);
}

#smenu1, #smenu2, #smenu3, #smenu4, #smenu5 {
font-size: 14px;
display: none;
width: 135px;
height: 25px;
float: left;
}

#smenu1:hover, #smenu2:hover, #smenu3:hover, #smenu4:hover, #smenu5:hover {
font-size: 14px;
display: none;
width: 135px;
height: 25px;
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;
background-image: url();
background-color: #ff0000;
}

#smenu1 a:hover, #smenu2 a:hover, #smenu3 a:hover, #smenu4 a:hover, #smenu5 a:hover {
font-weight: bold;
padding-top: 5px;
border-top: 0px;
cursor: pointer;
color: #FFFFFF;
background-image: url(URL DES UNTEREN HOVER BUTTON);
background-color: #ff0000;
}



//-->
</style>

<script type="text/javascript">
<!--
function montre(id)
<style type="text/css" media="screen">
<!--
body
{
font-family: Verdana, sans-serif;
font-size: 18px;
overflow: auto;
padding: 10px;
margin: 0px;
}

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

div.menu
{
position: absolute;
z-index: 3;
top: 180px;
left:300px;
}

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

.menu a
{
border: 1px solid #888;
background-color: #000000;
background-image: url(http://img.webme.com/pic/g/giga6test/button-normal.gif);
text-decoration: none;
text-align: center;
font-weight: bold;
cursor: default;
margin: 0px 2px;
display: block;
height: 20px;
color: #99ff00;
}

.menu a:hover
{
background-image: url(http://img.webme.com/pic/g/giga6test/button-hover.gif);
background-color: #000099;
}

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

#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a, #smenu5 a
{
font-weight: normal;
padding-top: 2px;
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">
<ul>

<li><a href="http://www.feuerwehr-aktuell.de.tl/G.ae.stebuch.htm">Gästebuch</a>
</ul>
</li>

<li><a href="http://www.feuerwehr-aktuell.de.tl/Kontakt.htm">Kontakt</a>
</ul>
</li>

<li><a href="http://www.feuerwehr-aktuell.de.tl/Umfrage.htm">Umfrage</a>
</ul>
</li>

<li><a href="http://www.feuerwehr-aktuell.de.tl/Links.htm">Links</a>
</ul>
</li>

<li><a href="http://www.feuerwehr-aktuell.de.tl/Impressum.htm">Impressum</a>
</ul>
</li>



</div>


blau markiert
Beitrag18.08.2007 um 14:04 (UTC)    
Titel:

Beitrag18.08.2007 um 14:09 (UTC)    
Titel:

feuerwehr-aktuell hat Folgendes geschrieben:
ne die soll nicht mitscrollen sondern fikxiert sein



Code:

absolute
    Absolute Positionierung durch die Angaben left, top, right, bottom. Absolut positionierte Elemente sind außerhalb des normalen Textfluß, sie liegen über den anderen Elementen und beeinflussen somit nicht ihr Layout. Die absolute Position wird relativ zu den Rändern des Eltern-Elements berechnet, wenn dieses ebenfalls positioniert ist, oder wenn es der Seiteninhalt (<body>) ist. Da sich der Seiteninhalt scrollen lässt, werden absolut positionierte Elemente mitgescrollt.

relative
    Relative Positionierung vom normalem Fluß. Die normale Position ist wie bei static im normalem Textfluß. Die Positionierungsangaben left, top, right, bottom verschieben das Element aus dieser Position. Die nachfolgenden Elemente verhalten sich so, als wäre das Element nicht verschoben

fixed
    Wie absolute, jedoch bleibt das Element beim Scrollen stehen.

static
    Positionierung im Textfluss. Die Angaben left, top, right, bottom sind unwirksam.


na dann nim absolute Very Happy


Zuletzt bearbeitet von zaza12test am 18.08.2007, 15:11, insgesamt einmal bearbeitet
Beitrag18.08.2007 um 14:14 (UTC)    
Titel:

Beiträge der letzten Zeit anzeigen:   


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