nicht angemeldet
verschiedene layer an immer der gleichen stelle einblenden
hallo,
wie bekomme ich es hin, dass ich verschiedene layer an der gleichen stelle ein- bzw. wieder ausblenden kann.
bitte mal diese seite ansehen: http://www.mediengestalten.com/test/test_sw.html
es sollen alle subnavis an der gleichen stelle, wie subnavi1 angezeigt werden.
bin ratlos. hab schon verschiedenes ausprobiert aber komme einfach nicht drauf.
gruß
corinna
-
http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm#position
http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm#z_index
jede anweisung (und auch eine variablen-definition oder -wertzuweisung ist solch eine) bitte mit einem semikolon abschliessen.-
PS:
http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm#visibilitywer suched, der findet. ;-)
-
ja, auf diesen seiten war ich schon überall.
das problem ist, dass ich diese layer nicht fix positionieren kann, da sie sich sonst mit der größe des browserfenster verschieben.
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Drei Boxen, 1</title><SCRIPT language="JavaScript1.2">
// Einige Browserobjekte abfragen und speichern:
ns4 = (document.layers)? true:false;
ie4 = (document.all)? true:false;
v6 = (document.getElementById)? true:false;// Layer anzeigen, je nach Browsermöglichkeiten
function showlayer(layerid)
{
if (ns4) {document.layers[layerid].display = "block";}
else if (v6) {document.getElementById(layerid).style.display = "block";}
else if (ie4) {document.all[layerid].style.display = "inline";}
}// Layer verstecken, genau das gleiche, nur andersrum ;)
function hidelayer(layerid)
{
if (ns4) {document.layers[layerid].display = "none";}
else if (v6) {document.getElementById(layerid).style.display = "none";}
else if (ie4) {document.all[layerid].style.display = "none";}
}
</script><style type="text/css">
body {
font-family : Arial, sans-serif;
font-size : 12px;
width : 788px;
background-color : white;
border : 1px solid #5F0000;
margin : 10% auto auto auto;
padding: 0px;
}
/*#top {
width: 800px;
background: #e2e2e2;
height: 100px;
border-top : 10px solid #5F0000;
border-right : 10px solid #5F0000;
border-left : 10px solid #5F0000;}*/
#logo {
border : 4px solid #a1a1a1;
background: #ccf;
width:300px;
height:70px;
float:left;
}
#bildoben {
border-top : 4px solid #a1a1a1;
border-bottom : 4px solid #a1a1a1;
border-right: 4px solid #a1a1a1;
background: #ccf;
width:476px;
height:70px;
float:left;
}
#navibg {
border-left : 4px solid #a1a1a1;
border-bottom : 4px solid #a1a1a1;
border-right: 4px solid #a1a1a1;
background: fuchsia;
width:300px;
height:150px;
float:left;
clear:left;
}
#navi {
border-left : 0px solid #a1a1a1;
border-bottom : 0px solid #a1a1a1;
border-right: 4px solid #a1a1a1;
background: #ccf;
width:120px;
height:150px;
float:left;}
.navi {display:none; width:176px; height:150px; border: none; position:absolute; background:#ffffff; float:right;}#content {
border-bottom : 4px solid #a1a1a1;
border-right: 4px solid #a1a1a1;
background: #ccf;
width:476px;
height:417px;
float:right;
}#bildlinks {
border-left : 4px solid #a1a1a1;
border-bottom : 4px solid #a1a1a1;
border-right: 4px solid #a1a1a1;
background: #ccf;
width:300px;
height:150px;
float:left;
}
#news {
border-left : 4px solid #a1a1a1;
border-bottom : 4px solid #a1a1a1;
border-right: 4px solid #a1a1a1;
background: #ccf;
width:300px;
height:109px;
float:left;
clear:left
}#footer{
background-color: gray;
width:780px;
height:15px;
border-bottom : 4px solid #a1a1a1;
border-right : 4px solid #a1a1a1;
border-left : 4px solid #a1a1a1;
clear:left;
}
#links {background: #ccf; width:150px; height:150px; float:left;}
#links a {display: block; text-align: center;
padding: 5px 10px; margin: 0 0 1px; border-width: 0;
text-decoration: none; color: #FFC; background: #444;
border-right: 5px solid #505050;}
#links a:hover {color: #411; background: #AAA;
border-right: 5px double white;}#links a span {display: none;}
#links a:hover span {display: block;
position: absolute; top: 180px; left: 0; width: 125px;
padding: 5px; margin: 10px; z-index: 100;
color: #AAA; background: black;
font: 10px Verdana, sans-serif; text-align: center;}
</style>
</head>
<body>
<!--<div id="top">top</div>-->
<div id="logo">logo</div>
<div id="bildoben">bild oben</div>
<div id="navibg">
<div id="navi">navi<br>
<a href="whatever" onmouseover="showlayer('subnavi1');" onmouseout="hidelayer('subnavi1');">Dein Link</a><br />
<a href="whatever" onmouseover="showlayer('subnavi2');" onmouseout="hidelayer('subnavi2');">2</a><br />
<a href="whatever" onmouseover="showlayer('subnavi3');" onmouseout="hidelayer('subnavi3');">3</a><br />
<a href="whatever" onmouseover="showlayer('subnavi4');" onmouseout="hidelayer('subnavi4');">4</a><br />
<a href="whatever" onmouseover="showlayer('subnavi5');" onmouseout="hidelayer('subnavi5');">5</a><br />
<a href="whatever" onmouseover="showlayer('subnavi6');" onmouseout="hidelayer('subnavi6');">6</a><br />
<a href="whatever" onmouseover="showlayer('subnavi7');" onmouseout="hidelayer('subnavi7');">7</a>
</div>
<div id="subnavi1" class="navi">subnavi1</div>
<div id="subnavi2" class="navi">subnavi2</div>
<div id="subnavi3" class="navi">subnavi3</div>
<div id="subnavi4" class="navi">subnavi4</div>
<div id="subnavi5" class="navi">subnavi5</div>
<div id="subnavi6" class="navi">subnavi6</div>
<div id="subnavi7" class="navi">subnavi7</div></div>
<div id="content">content</div>
<div id="bildlinks">bildlinks
</div>
<div id="news">news</div>
<div id="footer">footer</div>
</body></html>
und als kleiner zusatztip für eine javascript-freie lösung:
http://www.koivi.com/css-tool-tip/-
leider gibts immer noch ein geht nicht dabei.
nämlich im opera und mozilla.trotzdem danke.
ich wernde mir mal den link genauer ansehen.
gruß
-
hi hi ihr
wenn du position:relative setzt klappt es im NN7 aber im IE6 nicht mehr
ich habe versuch eine weiche einzubauen klappt aber dann auch nicht richtig :-((
<!--[if gte ie 5]>
<style type="text/css">
.navi {display:none; width:176px; height:150px; border: none; position:absolute; background:#ffffff; float:right;}
</style>
<![endif]-->gute nacht
bis bis roman
-
hmmm, schade.
trotzdem besten dank.
-
hi hi
ich hatte noch einen fehler drin :-(( jetzt klappt es im IE6 und nn7
habe fertig oder einfach bin müde
bis bis roman
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Drei Boxen, 1</title><SCRIPT language="JavaScript1.2">
// Einige Browserobjekte abfragen und speichern:
ns4 = (document.layers)? true:false;
ie4 = (document.all)? true:false;
v6 = (document.getElementById)? true:false;// Layer anzeigen, je nach Browsermöglichkeiten
function showlayer(layerid)
{
if (ns4) {document.layers[layerid].display = "block";}
else if (v6) {document.getElementById(layerid).style.display = "block";}
else if (ie4) {document.all[layerid].style.display = "inline";}
}// Layer verstecken, genau das gleiche, nur andersrum ;)
function hidelayer(layerid)
{
if (ns4) {document.layers[layerid].display = "none";}
else if (v6) {document.getElementById(layerid).style.display = "none";}
else if (ie4) {document.all[layerid].style.display = "none";}
}
</script><style type="text/css">
body {
font-family : Arial, sans-serif;
font-size : 12px;
width : 788px;
background-color : white;
border : 1px solid #5F0000;
margin : 10% auto auto auto;
padding: 0px;
}
/*#top {
width: 800px;
background: #e2e2e2;
height: 100px;
border-top : 10px solid #5F0000;
border-right : 10px solid #5F0000;
border-left : 10px solid #5F0000;}*/
#logo {
border : 4px solid #a1a1a1;
background: #ccf;
width:300px;
height:70px;
float:left;
}
#bildoben {
border-top : 4px solid #a1a1a1;
border-bottom : 4px solid #a1a1a1;
border-right: 4px solid #a1a1a1;
background: #ccf;
width:476px;
height:70px;
float:left;
}
#navibg {
border-left : 4px solid #a1a1a1;
border-bottom : 4px solid #a1a1a1;
border-right: 4px solid #a1a1a1;
background: fuchsia;
width:300px;
height:150px;
float:left;
clear:left;
}
#navi {
border-left : 0px solid #a1a1a1;
border-bottom : 0px solid #a1a1a1;
border-right: 4px solid #a1a1a1;
background: #ccf;
width:120px;
height:150px;
float:left;}
.navi {display:none; width:176px; height:150px; border: none; position:relative; background:#ffffff; float:right;}#content {
border-bottom : 4px solid #a1a1a1;
border-right: 4px solid #a1a1a1;
background: #ccf;
width:476px;
height:417px;
float:right;
}#bildlinks {
border-left : 4px solid #a1a1a1;
border-bottom : 4px solid #a1a1a1;
border-right: 4px solid #a1a1a1;
background: #ccf;
width:300px;
height:150px;
float:left;
}
#news {
border-left : 4px solid #a1a1a1;
border-bottom : 4px solid #a1a1a1;
border-right: 4px solid #a1a1a1;
background: #ccf;
width:300px;
height:109px;
float:left;
clear:left
}#footer{
background-color: gray;
width:780px;
height:15px;
border-bottom : 4px solid #a1a1a1;
border-right : 4px solid #a1a1a1;
border-left : 4px solid #a1a1a1;
clear:left;
}
#links {background: #ccf; width:150px; height:150px; float:left;}
#links a {display: block; text-align: center;
padding: 5px 10px; margin: 0 0 1px; border-width: 0;
text-decoration: none; color: #FFC; background: #444;
border-right: 5px solid #505050;}
#links a:hover {color: #411; background: #AAA;
border-right: 5px double white;}#links a span {display: none;}
#links a:hover span {display: block;
position: absolute; top: 180px; left: 0; width: 125px;
padding: 5px; margin: 10px; z-index: 100;
color: #AAA; background: black;
font: 10px Verdana, sans-serif; text-align: center;}
</style>
<!--[if gte ie 5]>
<style type="text/css">
#navibg {
border-left : 4px solid #a1a1a1;
border-bottom : 4px solid #a1a1a1;
border-right: 4px solid #a1a1a1;
background: fuchsia;
width:300px;
height:150px;
float:left;
clear:left;
}
#navi {
border-left : 0px solid #a1a1a1;
border-bottom : 0px solid #a1a1a1;
border-right: 4px solid #a1a1a1;
background: #ccf;
width:120px;
height:150px;
float:left;
}
.navi {display:none; width:176px; height:150px; border: none; position:absolute; background:#ffffff; float:right;}
</style>
<![endif]--></head>
<body>
<!--<div id="top">top</div>-->
<div id="logo">logo</div>
<div id="bildoben">bild oben</div>
<div id="navibg">
<div id="navi">navi<br>
<a href="whatever" onmouseover="showlayer('subnavi1');" onmouseout="hidelayer('subnavi1');">Dein Link</a><br />
<a href="whatever" onmouseover="showlayer('subnavi2');" onmouseout="hidelayer('subnavi2');">2</a><br />
<a href="whatever" onmouseover="showlayer('subnavi3');" onmouseout="hidelayer('subnavi3');">3</a><br />
<a href="whatever" onmouseover="showlayer('subnavi4');" onmouseout="hidelayer('subnavi4');">4</a><br />
<a href="whatever" onmouseover="showlayer('subnavi5');" onmouseout="hidelayer('subnavi5');">5</a><br />
<a href="whatever" onmouseover="showlayer('subnavi6');" onmouseout="hidelayer('subnavi6');">6</a><br />
<a href="whatever" onmouseover="showlayer('subnavi7');" onmouseout="hidelayer('subnavi7');">7</a>
</div>
<div id="subnavi1" class="navi">subnavi1</div>
<div id="subnavi2" class="navi">subnavi2</div>
<div id="subnavi3" class="navi">subnavi3</div>
<div id="subnavi4" class="navi">subnavi4</div>
<div id="subnavi5" class="navi">subnavi5</div>
<div id="subnavi6" class="navi">subnavi6</div>
<div id="subnavi7" class="navi">subnavi7</div></div>
<div id="content">content</div>
<div id="bildlinks">bildlinks
</div>
<div id="news">news</div>
<div id="footer">footer</div>
</body></html>
-
du wirst feierlich zum held des abends gekürt.
ich weiß zwar noch nicht, was du gemacht hast, aber es funktionert.muss mir das jetzt mal genauer ansehen.
besten dank.gruß
corinna-
du wirst feierlich zum held des abends gekürt.
ich weiß zwar noch nicht, was du gemacht hast, aber es funktionert.boah!
die hälfte der arbeit hab ich gemacht und er sackt die loorbeeren ein!
will auch ein bussie haben! *gg* ;-Dgrüsse, raik
-
hi hi
ich hehaupte mal das corinna 80% der arbeit gemacht hat.
du hast also die hälfte gemacht sind 50%. zusammen habt ihr also 130% leistung gebracht. da wir ja auf 100% kommen müssen bleibt mir nur der part der LEISTUNGSBREMSE -30%.was beschwerst du dich da noch :-))
ich fand das mal wieder ein schönes beis.. wir drei haben uns zusammen hoch geschaukelt und am ende kamm was GUTES rum.
bis bis roman
-
hi hi
ich hehaupte mal das corinna 80% der arbeit gemacht hat.
du hast also die hälfte gemacht sind 50%. zusammen habt ihr also 130% leistung gebracht. da wir ja auf 100% kommen müssen bleibt mir nur der part der LEISTUNGSBREMSE -30%.was beschwerst du dich da noch :-))
ich fand das mal wieder ein schönes beis.. wir drei haben uns zusammen hoch geschaukelt und am ende kamm was GUTES rum.
bis bis roman
hehe, jo :-D
grüsse, bis zum nächsten mal ;-)
-
hallo ihr beiden,
besten dank an euch beide.
ich denke nicht, dass einer beleidigt sein braucht, ihr habt mir beide auf jeden fall sehr weitergeholfen.
und braucht bestimmt irgendwann mal wieder hilfe.
da werde ich gerne auf euch zurückkommen.gruß
corinna-
so, und schon habe ich wieder eine frage.
wenn ich das stylesheet auslagere, zerhaut es mir einiges beim mouseover der buttonslösung?
danke und gruß
zu finden hier: http://www.mediengestalten.com/test/test_.html
-
hi Corinna # so eine begrüßung ist was feines *fg*
ich habe mal kurz rein geschaut. du verwendest öfters die gleich ID ich behaupte mal das das verboten ist.
ohne dein CSS und JS fällt es mir schwer da was zu zusagen.
was willst du mit change(....) erreichen?schreib doch ein ganz neues posting. ich denke dann bekommst du mehr antworten
bis bis roman
--
P.S. manchmal wundere ich mich schon über die postings (fragen u. antworten) die man hier geboten bekommt(meine eigenen [leider] mit eingenommen)
=> ich denke mir meinen teil und ziehe das beste daraus :-)-
hi Corinna # so eine begrüßung ist was feines *fg*
ich habe mal kurz rein geschaut. du verwendest öfters die gleich ID ich behaupte mal das das verboten ist.
ohne dein CSS und JS fällt es mir schwer da was zu zusagen.
was willst du mit change(....) erreichen?change verändert die button farbe.
schreib doch ein ganz neues posting. ich denke dann bekommst du mehr antworten
keine lust. ich habe gestern schon ein neues posting geschrieben, weil ich probleme beim drucken aus dem ie 6.0 habe. aber das hat nicht wirklich was gebracht außer blöden antworten. also bleibe ich lieber bei dem posting ;-)
eigentlich habe ich gerade schonmal genatwortet, aber irgendwie ist die antwort jetzt weg!?
gruß
corinna
-
-
wer hat denn da die position der navi-layer wieder auf "relative" gesetzt? ze ze ze ;-)
brauchst du die angabe des z-index wirklich, oder hast du mal probiert, die weg zulassen?
(hab grad nicht die zeit, das alles selbst zu testen)id's und name's müssen eindeutig sein, d.h., sie dürfen sich nicht wiederholen.
und gewöhn dir mal an, nach einem attribut immer ein leerzeichen zu machen:
<p id="eins" class="navipunkte" onmouseover="showlayer ...
^
|
hier z.b.ich hoffe, das hilft schon, versuchs erst mal :-)
grüsse, raik
-
wer hat denn da die position der navi-layer wieder auf "relative" gesetzt? ze ze ze ;-)
oops, das war wohl ein versehen. ich hab noch ein bisschen rumprobiert, was passiert, wenn man hier oder da was ändert. naja, dabei ist das dann wohl so geblieben. hab ich geändert und es geht. im ie. nicht im opera oder im netscape.
brauchst du die angabe des z-index wirklich, oder hast du mal probiert, die weg zulassen?
ne, braucht ich nicht wirklich.
(hab grad nicht die zeit, das alles selbst zu testen)
id's und name's müssen eindeutig sein, d.h., sie dürfen sich nicht wiederholen.
und gewöhn dir mal an, nach einem attribut immer ein leerzeichen zu machen:
<p id="eins" class="navipunkte" onmouseover="showlayer ...
^
|
hier z.b.nochmal oops. mache ich eigentlich schon immer. habe ich hier wohl übersehen.
ich hoffe, das hilft schon, versuchs erst mal :-)
grüsse, raik
-
wer hat denn da die position der navi-layer wieder auf "relative" gesetzt? ze ze ze ;-)
postiion relative funktionert im opera und natscape irgendwie nicht richtig. daher habe ich die auf reltive gesetzt.
gruß
corinna-
hi hi ihr
wer hat denn da die position der navi-layer wieder auf "relative" gesetzt? ze ze ze ;-)
postiion relative funktionert im opera und natscape irgendwie nicht richtig. daher habe ich die auf reltive gesetzt.
der netscap braucht relative und der ie6 absolute deshalb auch
<!--[if gte ie 5]> das war doch der trick
<style type="text/css">
..
..wobleibt den dein css und js *fg*
bis bis roman
--
P.S. manchmal wundere ich mich schon über die postings (fragen u. antworten) die man hier geboten bekommt(meine eigenen [leider] mit eingenommen)
=> ich denke mir meinen teil und ziehe das beste daraus :-)-
hilfe, totale verwirrung.
hallo,
ich habe eindeutig zu lange an der gleichen seite rungebastelt.
naja, mittlerweile funktioniert alles ganz gut. zumindest unter ie 6.0, opera und netscape 7.0.und es klappt auch mit ausgelagertem css.
alles prima.
nochmal danke an euch.gruß
corinna-
hi hi
alles prima.
nochmal danke an euch.^^^^^
was heist hier danke ich ess gern pizza *fg*bis bis roman
--
P.S. manchmal wundere ich mich schon über die postings (fragen u. antworten) die man hier geboten bekommt(meine eigenen [leider] mit eingenommen)
=> ich denke mir meinen teil und ziehe das beste daraus :-)-
was? ich versteh kein wort?
ich hab aber noch ein ganz anderes problem.
im ie ist die unternavi mit position:absolute angegeben, sonst spinnt der ie ja völlig. wenn ich jetzt das browserfenster größer oder kleiner ziehe bleibt diese layer stehen, während sich alles andere mitbewegt.
ahhh, bitte hilfe!!!1
gruß
corinna-
... wenn ich jetzt das browserfenster größer oder kleiner ziehe bleibt diese layer stehen, während sich alles andere mitbewegt.
öhm, bei mir bleibt nix stehen. was meinst du genau?
immer noch die gleiche seite: ?
http://www.mediengestalten.com/test/test_.htmlgrüsse, raik
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
hi hi corinna
kannst du mal deine CSS datei posten?
bis bis roman
-
gerne,
ich hab sie aber schon wieder diverse male verändert und auch eine lösung gefunden, die im ie funktioniert, aber nicht im mozilla und opera.naja, hier;
body {
font-family : Arial, sans-serif;
font-size : 12px;
width : 788px;
background-color : white;
border : 1px solid #5F0000;
margin : 10% auto auto auto;
padding: 0px;
}#logo {
border : 4px solid #a1a1a1;
background: #ccf;
width:300px;
height:70px;
float:left;
}
#bildoben {
border-top : 4px solid #a1a1a1;
border-bottom : 4px solid #a1a1a1;
border-right: 4px solid #a1a1a1;
background: #ccf;
width:476px;
height:70px;
float:left;
}
#navibg {
border-left : 4px solid #a1a1a1;
border-bottom : 4px solid #a1a1a1;
border-right: 4px solid #a1a1a1;
background: fuchsia;
width:300px;
height:150px;
float:left;
}
#navi {
border-left : 0px solid #a1a1a1;
border-bottom : 0px solid #a1a1a1;
border-right: 4px solid #a1a1a1;
background: #ccf;
width:120px;
height:150px;
float:left;}
#subnavi1 { visibility: hidden; width:176px;height:150px; float:right; border: none; background: #ffffff; }
#subnavi2 { visibility: hidden; width:176px;height:150px; float:right; border: none; background: #ffffff; position:relative;}
#subnavi3 { visibility: hidden; width:176px;height:150px; float:right; border: none; background: #ffffff; position:absolute}
#subnavi4 { visibility: hidden; width:176px;height:150px; float:right; border: none; background: #ffffff; position:absolute}
#subnavi5 { visibility: hidden; width:176px;height:150px; float:right; border: none; background: #ffffff; position:absolute}
#subnavi6 { visibility: hidden; width:176px;height:150px; float:right; border: none; background: #ffffff; position:absolute}
#subnavi7 { visibility: hidden; width:176px;height:150px; float:right; border: none; background: #ffffff; position:absolute}
#content {
border-bottom : 4px solid #a1a1a1;
border-right: 4px solid #a1a1a1;
background: #ccf;
width:476px;
height:417px;
float:right;
}#bildlinks {
border-left : 4px solid #a1a1a1;
border-bottom : 4px solid #a1a1a1;
border-right: 4px solid #a1a1a1;
background: #ccf;
width:300px;
height:150px;
float:left;
}
#news {
border-left : 4px solid #a1a1a1;
border-bottom : 4px solid #a1a1a1;
border-right: 4px solid #a1a1a1;
background: #ccf;
width:300px;
height:109px;
float:left;
clear:left
}#footer{
background-color: gray;
width:780px;
height:15px;
border-bottom : 4px solid #a1a1a1;
border-right : 4px solid #a1a1a1;
border-left : 4px solid #a1a1a1;
clear:left;
}
-