Seite 2 von 3
Verfasst: 14.12.2005 15:10
von shizo
jo danke, hatte problem schon gelöst
selber rumprobieren hilft, sry
das passt jetz egtl ganz gut, aber dennoch:
wie mache ich es dass das alles ned so weit nach rechts einrückt bei dem mouseover?
so das prob hätt ich auch gelöst, schaut es euch doch einfach an
Code: Alles auswählen
<?php header('Content-Language: en'); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>CSS Navigation</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>
<style type="text/css">
<!--
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
background: transparent url(images/list-off.gif) left center no-repeat;
padding-left: 15px;
text-align: left;
font: normal 11px "tahoma";
text-decoration: none;
color: #c3c3c3c3;
}
dl#menu {
width: 15em;
}
dl#menu dt {
cursor: pointer;
margin: 2px 0;;
height: 20px;
line-height: 20px;
text-align: left;
}
dl#menu dd {
}
dl#menu li {
text-align: left;
color: #CC0000;
}
dl#menu li a, dl#menu dt a {
background: transparent url(images/list-off.gif) left center no-repeat;
padding-left: 15px;
text-align: left;
font: normal 11px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
text-decoration: none;
color: #999;
}
dl#menu li a:hover, dl#menu dt a:hover {
background: transparent url(images/list-on.gif) left center no-repeat;
color: black;
}
#mentions {
font-family: verdana, arial, sans-serif;
position: left;
bottom : 200px;
left : 1px;
color: #000;
background-color: #ddd;
}
#mentions a {text-decoration: none;
color: #222;
}
#mentions a:hover{text-decoration: underline;
}
#navcontainer ul
{
list-style-type: none;
text-align: left;
}
#navcontainer ul li a
{
background: transparent url(images/list-off.gif) left center no-repeat;
padding-left: 15px;
text-align: left;
font: normal 11px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
text-decoration: none;
color: #999;
}
#navcontainer ul li a:hover
{
background: transparent url(images/list-on.gif) left center no-repeat;
color: black;
}
#navcontainer ul li a#current
{
background: transparent url(images/list-active.gif) left center no-repeat;
color: #666;
}
.Stil1 {color: #CC0000}
-->
</style>
</head>
<body>
<div id="navcontainer">
<ul id="navlist">
<dl id="menu">
<dt onmouseover="javascript:montre('smenu1');"><span class="Stil1">></span> home</dt>
<dd id="smenu1">
<ul>
<li><a href="#">>> index1</a></li>
<li><a href="#">>> index2</a></li>
</ul>
</dd>
<dt onmouseover="javascript:montre('smenu2');"><span class="Stil1">></span> news</dt>
<dd id="smenu2">
<ul>
<li><a href="#">>> latest</a></li>
<li><a href="#">>> archive</a></li>
</ul>
</dd>
<dt onmouseover="javascript:montre('smenu3');"><span class="Stil1">></span> interactive</dt>
<dd id="smenu3">
<ul>
<li><a href="#">>> forum</a></li>
<li><a href="#">>> guestbook</a></li>
</ul>
</dd>
<dt onmouseover="javascript:montre('smenu4');"><span class="Stil1">></span> webdesign</dt>
<dd id="smenu4">
<ul>
<li><a href="#">>> flash</a></li>
<li><a href="#">>> html</a></li>
</ul>
</dd>
</dl>
</ul>
</div>
</body>
</html>
Verfasst: 14.12.2005 15:37
von shizo
ok ich glaub das is jetz duie letze frage:
ich hab das skript in eine seite eingebunden (imgs fehlen jetz aber is ja egtl egal oder?)
wie kann ich die navigation bis ganz oben anrücken lassen?
und wie färbe ich die unterlinks anders ein?
Code: Alles auswählen
<?php header('Content-Language: en'); ?>
<html>
<head>
<title>.::.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>
<style type="text/css">
<!--
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
background: transparent url(images/list-off.gif) left center no-repeat;
padding-left: 5px;
text-align: left;
font: normal 12px "tahoma";
text-decoration: none;
color: #c3c3c3c3;
}
dl#menu {
width: 9em;
}
dl#menu dt {
cursor: pointer;
margin: px 0;;
height: 20px;
line-height: 20px;
text-align: left;
}
dl#menu dd {
}
dl#menu li {
text-align: left;
color: #CC0000;
}
dl#menu li a, dl#menu dt a {
background: transparent url(images/list-off.gif) left center no-repeat;
padding-left: 15px;
text-align: left;
font: normal 12px "tahoma";
text-decoration: none;
color: #929292;
}
dl#menu li a:hover, dl#menu dt a:hover {
background: transparent url(images/list-on.gif) left center no-repeat;
color: black;
}
#mentions {
font-family: verdana, arial, sans-serif;
position: left;
bottom : 200px;
left : 1px;
color: #000;
background-color: #ddd;
}
#mentions a {text-decoration: none;
color: #222;
}
#mentions a:hover{text-decoration: underline;
}
#navcontainer ul
{
list-style-type: none;
text-align: left;
}
#navcontainer ul li a
{
background: transparent url(images/list-off.gif) left center no-repeat;
padding-left: 15px;
text-align: left;
font: normal 12px "tahoma";
text-decoration: none;
color: #929292;
}
#navcontainer ul li a:hover
{
background: transparent url(images/list-on.gif) left center no-repeat;
color: black;
}
#navcontainer ul li a#current
{
background: transparent url(images/list-active.gif) left center no-repeat;
color: #666;
}
.Stil1 {color: #CC0000}
body {
background-color: #CCCCCC;
}
.Stil2 {color: #AF1F11; font-size: 12px; font-family: Tahoma;}
.Stil4 {
font-family: Tahoma;
font-size: 9px;
color: #FFFFFF;
}
.Stil5 {color: #AF1F11; font-size: 12px; font-family: Tahoma; font-weight: bold; }
.stil7 {
font-family: tahoma;
font-size: 11px;
font-weight: lighter;
color: #929292;
}
.Stil10 {font-family: tahoma; font-size: 12px; font-weight: lighter; color: #333333; }
-->
</style></head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (vorab2.psd) -->
<tr>
<td width="100%" height="100%"><table width="800" height="713" border="0" align="center" cellpadding="0" cellspacing="0" background="bg.gif" id="Tabelle_01">
<tr>
<td colspan="5"> <img src="Bilder/vorab2_01.gif" alt="" width="800" height="82"></td>
</tr>
<tr bgcolor="929292">
<td colspan="6" class="Stil4"><div align="center">evolution ex webdesign </div></td>
</tr>
<tr>
<td width="127"> </td>
<td width="1" rowspan="9"><img src="malschaun.gif" width="1" height="650" align="baseline"> </td>
<td colspan="3"> </td>
</tr>
<tr>
<td width="127" rowspan="6">
<div id="navcontainer">
<ul id="navlist">
<dl id="menu">
<dt onmouseover="javascript:montre('smenu1');"><span class="Stil1">></span> home</dt>
<dd id="smenu1">
<ul>
<li><a href="#">>> index1</a></li>
<li><a href="#">>> index2</a></li>
</ul>
</dd>
<dt onmouseover="javascript:montre('smenu2');"><span class="Stil1">></span> news</dt>
<dd id="smenu2">
<ul>
<li><a href="#">>> latest</a></li>
<li><a href="#">>> archive</a></li>
</ul>
</dd>
<dt onmouseover="javascript:montre('smenu3');"><span class="Stil1">></span> interactive</dt>
<dd id="smenu3">
<ul>
<li><a href="#">>> forum</a></li>
<li><a href="#">>> guestbook</a></li>
</ul>
</dd>
<dt onmouseover="javascript:montre('smenu4');"><span class="Stil1">></span> webdesign</dt>
<dd id="smenu4">
<ul>
<li><a href="#">>> flash</a></li>
<li><a href="#">>> html</a></li>
</ul>
</dd>
</dl>
</ul>
</div>
</td>
<td width="552" rowspan="8" valign="top" class="Stil5"><p>WILLKOMMEN_</p>
<p class="Stil10"> >> Auf der Seite von evolution-ex webdesign </p>
<p class="Stil10">Diese Seite ist noch ganz neu und befindet sich im Aufbau. </p></td>
<td background="Bilder/bggrey.gif"><span class="Stil2">SHOUTBOX_</span></td>
<td width="4" rowspan="8"> </td>
</tr>
<tr>
<td width="116" background="Bilder/bggrey.gif"><p class="Stil2"> </p>
<p> </p>
<p> </p>
<p> </p></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td height="19" background="Bilder/bggrey.gif"><span class="Stil2">LOGIN_</span></td>
</tr>
<tr>
<td height="19" background="Bilder/bggrey.gif"> </td>
</tr>
<tr>
<td rowspan="3"> </td>
</tr>
<tr>
<td height="269"> </td>
</tr>
<tr>
<td height="79"><span class="Stil4"><img src="Bilder/vorab2_12.gif" alt="" width="121" height="54" align="absbottom"></span></td>
</tr>
<tr bgcolor="929292">
<td height="19" colspan="5"><div align="right"><span class="Stil4">copyrights 2005+ by alexander meurer | all rights reserved </span> </div></td>
</tr>
</table></td>
</tr>
<!-- End ImageReady Slices -->
</body>
</html>
Verfasst: 14.12.2005 15:46
von Markus67
Hi ...
damit das Teil mal ganz nach oben kommt ...
ersetze mit:
Code: Alles auswählen
<td width="127" rowspan="6" valign="top">
<div id="navcontainer">
Markus
Verfasst: 14.12.2005 19:38
von shizo
aso ja valign top genau ^^
ja mein teil is jetz ganz oben Mr. Green
und das mit der farbe?
Verfasst: 14.12.2005 20:21
von Markus67
Hi ...
Für die Untermenüs ist der Block zuständig ...
Code: Alles auswählen
#navcontainer ul li a
{
background: transparent url(images/list-off.gif) left center no-repeat;
padding-left: 15px;
text-align: left;
font: normal 12px "tahoma";
text-decoration: none;
color: #929292;
}
und für den Mouseover-Effekt von den Untermenüs ... der hier ...
Code: Alles auswählen
#navcontainer ul li a:hover
{
background: transparent url(images/list-on.gif) left center no-repeat;
color: black;
}
Markus
Verfasst: 15.12.2005 13:42
von shizo
ok danke ... und wie bau ich einen hover effekt für das über menu ein?
und kann ich die navigation dann so gestalten, dass wenn man einen link geklickt hat die navigation offen bleibt also ausgeklappt?
Verfasst: 15.12.2005 13:51
von FatFreddy
und kann ich die navigation dann so gestalten, dass wenn man einen link geklickt hat die navigation offen bleibt also ausgeklappt?
Ersetze onmouseover durch onclick.
ok danke ... und wie bau ich einen hover effekt für das über menu ein?
onmouseover kannst du dann zur Zuweisung des Hoovereffektes benutzen.
EDIT:
Beispiel:
Code: Alles auswählen
onMouseOver="this.style.backgroundColor='#FFDE87'; onMouseOut="this.style.backgroundColor='';
FatFreddy
Verfasst: 15.12.2005 14:00
von shizo
sry hab mich nicht ganz klar ausgedrückt:
also, wenn nach einem mouseover auf einem hauptmenupunkt, dieses dann ausgefahren wurde, und ich einen unterlink anklicke, dann soll dieses untermenu ausgeklappt bleiben undder hover effekt vom untermenu bestehen bleibt.
und dann noch ne ganz simple frage: ^^
wie mache ich es dass eine grafik (in dem fall eine vertikale strichgrafik)in einer tabelle unendlich weit nach unten wiederholt wird, wie eben die tabelle verschoben wird?
mfg
alex
Verfasst: 15.12.2005 18:36
von shizo
hm also das mit dem strich hätt ich einigermaßen, nur weiß ich ned wie ich den sich nach unten wiederholen lasse ... O.o
Code: Alles auswählen
<p><div style="border-left: 1px solid #929292;">WILLKOMMEN_</div></p>
da schaut mal das is die seite:
www.evolution-ex.de
edid: problem gelöst!
bliebe nur noch das andere
also, wenn nach einem mouseover auf einem hauptmenupunkt, dieses dann ausgefahren wurde, und ich einen unterlink anklicke, dann soll dieses untermenu ausgeklappt bleiben undder hover effekt vom untermenu bestehen bleibt.
Verfasst: 15.12.2005 19:06
von FatFreddy
shizo hat geschrieben:hm also das mit dem strich hätt ich einigermaßen, nur weiß ich ned wie ich den sich nach unten wiederholen lasse ... O.o
Code: Alles auswählen
<p><div style="border-left: 1px solid #929292;">WILLKOMMEN_</div></p>
Den Rand mußt Du dem Tabellenfeld zuweisen, dann läuft er uber die gesammte Feldhöhe.
EDIT: da war ich zu langsam.
Jetzt noch etwas Abstand ( style="padding-left:5px;") zwischen Text und Linie, dann sieht es gut aus.
Das Problem mit deinem Menü wirst Du nur mit einer geänderten JS-Funktion beseitigen können.
Die Zeile "window.onload=montre;" bewirkt ein schließen aller Menüpunkte sobald eine neue Seite geladen wird.
Den hover-Effekt erreichst Du durch Verwendung von a:active im Stylesheet.
Persönliche Meinung: Spätestens wenn Du in den Submenüs mehr Unterpunkte hast, wirst Du feststellen, daß die onmouseover-Variante die Navigation sehr unkomfortabel macht.
Wenn Du mehr als 3 Unterpunkte hast und mit der Maus auf den nächstfolgenden Hauptmenüpunkt willst, klappt das Menü zu, der Mauscursor befindet sich nicht mehr auf dem Punkt, den Du erreichen wolltest und Du mußt dein Mäusle erst wieder nach oben schubsen um den gewünschten Punkt zu erreichen. Im schlimmsten Fall öffnet sich bereits vorher automatisch ein ungewünschtes Submenü und man befindet sich an völlig falscher Stelle. Solche Navigationen find ich nervig.
FatFreddy