Autor |
Nachricht |
-
feuerwehr-aktuell
|
18.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
|
|
↑
|
|
|
-
zaza12test
|
18.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 |
|
↑
|
|
|
-
zaza12test
|
18.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
|
|
↑
|
|
|
-
feuerwehr-aktuell
|
|
↑
|
|
|
-
zaza12test
|
18.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 |
|
↑
|
|
|
-
zaza12test
|
18.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 |
|
↑
|
|
|
-
feuerwehr-aktuell
|
18.08.2007 um 14:04 (UTC) Titel: |
|
|
|
|
↑
|
|
|
-
zaza12test
|
18.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
Zuletzt bearbeitet von zaza12test am 18.08.2007, 15:11, insgesamt einmal bearbeitet
|
|
↑
|
|
|
-
feuerwehr-aktuell
|
18.08.2007 um 14:14 (UTC) Titel: |
|
|
|
|
↑
|
|
|
|