nicht angemeldet
Problem: Layout verschiebt sich bei verschiedenen Auflösungen...
Hallo,
ich habe leider wiedereinmal ein Problem. Ich habe mir eine Navigation "gebastelt", die ich mittig zentriert habe, und möchte nun noch rechts daneben einen Text schreiben. Doch der wird nur unter das Ganze geschrieben und wenn ich eine relative/bzw. absolute Angabe für den Text mache, dann schieben die beiden Teile bei unterschiedlichen Auflösungen unterschiedlich weit weg. Doch wie kann ich das ändern?
Hier einmal die Zentrierung:
#zentriert {
position:absolute;
top:50%;
left:50%;
width:30em;
height:20em;
margin-left:-15em;
margin-top:-10em;
}
Wäre klasse wenn mir jemand weiterhelfen könnte :)
Mit freundlichen Grüßen
Toni
-
Hallo Toni,
Hier einmal die Zentrierung:
#zentriert {
position:absolute;
top:50%;
left:50%;
width:30em;
height:20em;
margin-left:-15em;
margin-top:-10em;
}So zentriert man nicht. Benutze margin:0 auto; o.ä., fürs vertikale zentrieren Notfalls eine Tabelle. Aber auf keinen Fall position:absolute, weil da bei kleineren Viewports keine Scrollbalken entstehen. Jonathan -- [Selfcode:](http://emmanuel.dammerer.at/selfcode.html) [ie:( fl:{ br:> va:) ls:& fo:) rl:? ss:} de:> js:| ch:? mo:} zu:)](http://www.peter.in-berlin.de/projekte/selfcode/?code=ie%3A%28+fl%3A%7B+br%3A%3E+va%3A%29+ls%3A%26+fo%3A%29+rl%3A%3F+ss%3A%7D+de%3A%3E+js%3A%7C+ch%3A%3F+mo%3A%7D+zu%3A%29) -
Yerf!
Hier einmal die Zentrierung:
#zentriert {
position:absolute;a) eine Zentrierung mittels position:absolut ist problematisch, da bei schmalen Browserfenstern der Inhalt nicht mehr vollständig sichtbar wird. Benutzer besser eine Zentrierung mittels margin:auto
width:30em;
height:20em;margin:auto;
}
> Wäre klasse wenn mir jemand weiterhelfen könnte :) b) wenn du mehrere Elemente nebeneinander anordnen und gemeinsam zentrieren willst musst du die Zentrierung auf ein umgebendes Element (kann z.B. auch das <body>-Element sein) anwenden und darin dann die Elemente nebeneinander anordnen (z.B. mittels float). Gruß, Harlequin -- <!--[if IE]>This page is best viewed with a webbrowser. [Get one today!](http://www.opera.com)<![endif]-->-
Hi,
ich habe jetzt das position:absolute; weggemacht, und dafür das margin:0 auto; eingesetzt... Doch es klappt immer noch nicht?!
Kann mir vllt. nochmal jemand weiterhelfen und vllt. genauer erklären was ich machen soll?Mit freundlichen Grüßen
Toni-
Yerf!
ich habe jetzt das position:absolute; weggemacht, und dafür das margin:0 auto; eingesetzt... Doch es klappt immer noch nicht?!
Kann mir vllt. nochmal jemand weiterhelfen und vllt. genauer erklären was ich machen soll?Praktisch wäre es, einmal zu sehen, was du bisher hast. Kannst du das irgendwo mal hochladen und den Link hier posten?
Gruß,
Harlequin
--
<!--[if IE]>This page is best viewed with a webbrowser. Get one today!<![endif]-->-
Yerf!
ich habe jetzt das position:absolute; weggemacht, und dafür das margin:0 auto; eingesetzt... Doch es klappt immer noch nicht?!
Kann mir vllt. nochmal jemand weiterhelfen und vllt. genauer erklären was ich machen soll?Praktisch wäre es, einmal zu sehen, was du bisher hast. Kannst du das irgendwo mal hochladen und den Link hier posten?
Gruß,
Harlequin
Hi,
mir ist gerade eben nochwas aufgefallen... Die Navigation öffnet sich zwar, aber ich komme nicht zu den Unterpunkten, weil sich der Oberpunkt schnell wieder schließt :( .
www.fleischfressende-pflanzen.pytalhost.deMit freundlichen Grüßen
Toni-
mir ist gerade eben nochwas aufgefallen... Die Navigation öffnet sich zwar, aber ich komme nicht zu den Unterpunkten, weil sich der Oberpunkt schnell wieder schließt :( .
www.fleischfressende-pflanzen.pytalhost.deDein Menu ist aber unruhig.
Diese Arbeit mit display:none/block gefällt mir nicht.
Arbeite lieber mit position:absolute und left:-99em -> 0em.
schon wegen der Zugänglichkeit.Versuche:
#navi li{
position:relative;
}
#navi li > ul{
position:absolute;
left:-99em;
}
/* aktivieren */
#navi li:hover > ul,
#navi li > ul:hover {
left:0px;
}mfg Beat
-
Dein Menu ist aber unruhig.
Diese Arbeit mit display:none/block gefällt mir nicht.
Arbeite lieber mit position:absolute und left:-99em -> 0em.
schon wegen der Zugänglichkeit.Versuche:
#navi li{
position:relative;
}
#navi li > ul{
position:absolute;
left:-99em;
}
/* aktivieren */
#navi li:hover > ul,
#navi li > ul:hover {
left:0px;
}mfg Beat
Hi Beat,
wie soll ich das denn in den Quellcode einbauen? Kannst du mir vllt. etwas genauer sagen, wie ich das jetzt schreiben soll?Mit freundlichen Grüßen
Toni-
wie soll ich das denn in den Quellcode einbauen? Kannst du mir vllt. etwas genauer sagen, wie ich das jetzt schreiben soll?
Hmmm
Das ist CSS, das deinen Code (der im übrigen invalide ist[1]) zur Ausgangsbasis hat.
Du musst lediglich #navi durch #navigation ersetzen.[1] ein <ul> Element hat zwingend mindestens ein <li> als Child-Element.
mfg Beat
-
wie soll ich das denn in den Quellcode einbauen? Kannst du mir vllt. etwas genauer sagen, wie ich das jetzt schreiben soll?
Hmmm
Das ist CSS, das deinen Code (der im übrigen invalide ist[1]) zur Ausgangsbasis hat.
Du musst lediglich #navi durch #navigation ersetzen.[1] ein <ul> Element hat zwingend mindestens ein <li> als Child-Element.
mfg Beat
Danke!^^
Jetzt funktioniert alles :D
-
-
-
-
Hallo Toni,
mir ist gerade eben nochwas aufgefallen... Die Navigation öffnet sich zwar, aber ich komme nicht zu den Unterpunkten, weil sich der Oberpunkt schnell wieder schließt :( .
www.fleischfressende-pflanzen.pytalhost.deBei mir funktioniert im Prinzip alles. Die Seite wackelt nur deswegen, weil durch die erhöhte Seitenlänge plötzlich rechts ein Scrollbalken eingeblendet wird. Entweder du verzichtest auf die Zentrierung, oder du blendest diese ständig ein, z.B. mit overflow-y:scroll oder ähnlichem.
Jonathan
-
-
-
-