Hallo
ich möchte auf meiner Seite 2 Blockelemente mit div realisieren die nebeneinander stehen.
Einer rechts (navigation) ausgerichtet und bleibt auch dort beim verkleinern des Brauserfensters
Der 2te soll links (Text) sein und sich in der größe so anpassen das sie sich nicht Überlappen (ähnlich wie tabellen).
Wer weiß was?
Gruß Cyber-Surfer
Vollansicht: Div Variabel?
HTML-Editor phase 5 Support > Fragen, Lösungen zu HTML-Problemen bzw. Webdesign-Fragen - Talk > HTML
Ich würds nicht unbedingt absolut positionieren und man kann auch %-Angaben machen bei den <div>s.
Eine weitere gute Seite wäre diese hier: http://css.fractatulum.net/index.htm
Zum Positionieren-Üben der <div>s gibt es dort auch diesen schönen Online-Editor - am besten zwei Browser gleichzeitig aufrufen und testen - viel Spaß, ist nämlich durchaus ein Puzzle-Spiel, das Ganze, bis es endlich in allen Browsern richtig sitzt...
Aber prinzipiell müßte sich das machen lassen mit float - Angaben, damit sich dann der zweite <div>-Container daneben legt.
Eine weitere gute Seite wäre diese hier: http://css.fractatulum.net/index.htm
Zum Positionieren-Üben der <div>s gibt es dort auch diesen schönen Online-Editor - am besten zwei Browser gleichzeitig aufrufen und testen - viel Spaß, ist nämlich durchaus ein Puzzle-Spiel, das Ganze, bis es endlich in allen Browsern richtig sitzt...
Aber prinzipiell müßte sich das machen lassen mit float - Angaben, damit sich dann der zweite <div>-Container daneben legt.
Conny würde floaten ;-)
Ich würde es auch mit %-Angaben machen 80%haupt und 20% menü und absolut positionieren.
Gruß uschi
Ich würde es auch mit %-Angaben machen 80%haupt und 20% menü und absolut positionieren.
Gruß uschi
Hallo
Die Beschreibung (speziell das Beispiel) geht aber so nicht auf die wirklich
variable Breite ein. Besonders die Beschreibung von position:relative
ist mehr als verwirrend bzw. unbefriedigend.
Ich habe mir aber ein Workaround (mehr ist es wohl nicht) gebastelt.
CSS:
HTML:
Das Problem ist, daß es mit NS 4 nicht funktioniert. Wäre die Navigation
auf der linken Seite, würde es funktionieren (mit Umbau wegen padding).
Ist also nur noch die Frage, ob dies noch jemanden ernsthaft interessiert.
Nachtrag: bei #right z-index hinzugefügt, um auf die dortigen Elemente
Zugriff zu haben.
Tschö, Auge
ZITAT
ich weiß was. Und damit ich nicht alleine bleibe
"absolut Positionieren"
"absolut Positionieren"
Die Beschreibung (speziell das Beispiel) geht aber so nicht auf die wirklich
variable Breite ein. Besonders die Beschreibung von position:relative
ist mehr als verwirrend bzw. unbefriedigend.
Ich habe mir aber ein Workaround (mehr ist es wohl nicht) gebastelt.
CSS:
QUELLTEXT
#left {
left:10px;
top:10px;
padding-right:200px;
position:absolute;
}
#right {
right:10px;
top:10px;
width:180px;
position:absolute;
z-index:2;
}
left:10px;
top:10px;
padding-right:200px;
position:absolute;
}
#right {
right:10px;
top:10px;
width:180px;
position:absolute;
z-index:2;
}
HTML:
QUELLTEXT
<html>
<head>
<!-- Head-Angaben -->
</head>
<body>
<div id="left">
<!-- Hier der Inhalt -->
</div>
<div id="right">
<!-- Hier z. B. die Navi -->
</div>
</body>
</html>
<head>
<!-- Head-Angaben -->
</head>
<body>
<div id="left">
<!-- Hier der Inhalt -->
</div>
<div id="right">
<!-- Hier z. B. die Navi -->
</div>
</body>
</html>
Das Problem ist, daß es mit NS 4 nicht funktioniert. Wäre die Navigation
auf der linken Seite, würde es funktionieren (mit Umbau wegen padding).
Ist also nur noch die Frage, ob dies noch jemanden ernsthaft interessiert.
Nachtrag: bei #right z-index hinzugefügt, um auf die dortigen Elemente
Zugriff zu haben.
Tschö, Auge
Es sollte noch ernsthaft interessieren ;-)), es gibt nun mal noch viele, die den 4.xx von netscape benutzen.
Das Menü rechts ist vor allem dann nötig, wenn man seine Seiten auch für Blinde-Surfer praktikabel machen will, denn denen wird dann zuerst der Text und dann die Menülinks vorgelesen. Weiß kaum einer, aber ist ne Überlegung wert.
Gruß und gute Nacht
Uschi
Das Menü rechts ist vor allem dann nötig, wenn man seine Seiten auch für Blinde-Surfer praktikabel machen will, denn denen wird dann zuerst der Text und dann die Menülinks vorgelesen. Weiß kaum einer, aber ist ne Überlegung wert.
Gruß und gute Nacht
Uschi
Ich hab grad mal folgendes getestet:
<div style="width:150px; height: 350px; position:absolute; top:100px; right:50px;">Navi:</div>
<div style="width:60%; height:500px; float:right; margin-right:220px;">Hauptcontainer</div>
Geht im Firefox einwandfrei - aber im IE überhaupt gar nicht! Da floated der Hauptcontainer kein Stück nach rechts, und wenn ich (wie oben) - mehr als 50% width für den Hauptcontainer angeben, dann verschwindet plötzlich der Navi-Container ???
Gibts dafür ne Erklärung oder ist mein Denkansatz so vollkommen falsch?
Wäre schön, wenn mir mal einer der Experten da helfen könnte...
Edit:
Beide floaten klappt allerdings (zumindest im IE 6.0 und im Firefox):
<div style="width:150px; height: 350px;float:right; margin-right:20px;">Navi:</div>
<div style="width:60%; height:1500px; float:right; margin-right:20px;">Hauptcontainer</div>
<div style="width:150px; height: 350px; position:absolute; top:100px; right:50px;">Navi:</div>
<div style="width:60%; height:500px; float:right; margin-right:220px;">Hauptcontainer</div>
Geht im Firefox einwandfrei - aber im IE überhaupt gar nicht! Da floated der Hauptcontainer kein Stück nach rechts, und wenn ich (wie oben) - mehr als 50% width für den Hauptcontainer angeben, dann verschwindet plötzlich der Navi-Container ???
Gibts dafür ne Erklärung oder ist mein Denkansatz so vollkommen falsch?
Wäre schön, wenn mir mal einer der Experten da helfen könnte...
Edit:
Beide floaten klappt allerdings (zumindest im IE 6.0 und im Firefox):
<div style="width:150px; height: 350px;float:right; margin-right:20px;">Navi:</div>
<div style="width:60%; height:1500px; float:right; margin-right:20px;">Hauptcontainer</div>
ZITAT(amethyst @ 26.04.2004 - 1:10)
Es sollte noch ernsthaft interessieren ), es gibt nun mal noch viele, die den 4.xx von netscape benutzen.
), es gibt nun mal noch viele, die den 4.xx von netscape benutzen.Hi,
das ist hoffentlich nicht ganz ernst gemeint.
Es sind definitiv weniger, als die Usergruppe, welche ohne Javascript - aus welchen Gründen auch immer - unterwegs ist. Und *diese* Usergruppe wird immer vergessen. Wozu also um den NN4.x scheren? Die Nicht-Javascripter sind doch viel wichtiger, da mehr!
Grüße
Andreas
@Terry
Hi Terry,
soweit ich mich erinnere:
Wenn du mit float positionierst erst den Container, der positioniert wird, dann den Container der sich am ge'floateten' orientieren soll im Code plazieren.
Beispiel:
Kanns gerade nicht ausprobieren, weil ich meinen Rechner neu einrichte und Phase noch nicht wieder installiert hab.
Hi Terry,
soweit ich mich erinnere:
Wenn du mit float positionierst erst den Container, der positioniert wird, dann den Container der sich am ge'floateten' orientieren soll im Code plazieren.
Beispiel:
QUELLTEXT
<div style="float: right;">Navigationsmenü mal rechts ausgerichtet</div>
<div> Dies ist der Inhalt, der links von der Navigation erscheint</div>
<div> Dies ist der Inhalt, der links von der Navigation erscheint</div>
Kanns gerade nicht ausprobieren, weil ich meinen Rechner neu einrichte und Phase noch nicht wieder installiert hab.
Hallo Ede,
da hast Du schon recht und das funktioniert ja auch - s. Edit.
Aber im 1. Versuch sollte sich der zweite Container ja auch gar nicht am ersten ausrichten, sondern am Body - deshalb ja das große margin-right.
Erreichen wollte ich damit, dass er Navi-Container ein wenig "runter" kommt und nicht oben mit dem anderen zusammen anfängt. (O.k. - Läßt sich natürlich auch mit margin-top beim floaten erreichen...)
Wie gesagt - der Firefox zeigt es so an, wie ich es mir vorgestellt habe, der IE kommt mit der Angabe überhaupt nicht klar, er läßt dabei sogar den Navigationscontainer ganz verschwinden, sobald der Hauptcontainer >50% hat.
Nun ja, also bleibt man besser bei einer Positionierung - entweder nur floaten oder nur absolut positionieren, um den armen IE nicht zu verwirren...
da hast Du schon recht und das funktioniert ja auch - s. Edit.
Aber im 1. Versuch sollte sich der zweite Container ja auch gar nicht am ersten ausrichten, sondern am Body - deshalb ja das große margin-right.
Erreichen wollte ich damit, dass er Navi-Container ein wenig "runter" kommt und nicht oben mit dem anderen zusammen anfängt. (O.k. - Läßt sich natürlich auch mit margin-top beim floaten erreichen...)
Wie gesagt - der Firefox zeigt es so an, wie ich es mir vorgestellt habe, der IE kommt mit der Angabe überhaupt nicht klar, er läßt dabei sogar den Navigationscontainer ganz verschwinden, sobald der Hauptcontainer >50% hat.
Nun ja, also bleibt man besser bei einer Positionierung - entweder nur floaten oder nur absolut positionieren, um den armen IE nicht zu verwirren...
ZITAT(amethyst @ 26.04.2004 - 1:03)
Conny würde floaten
Ja, so ist es
@Cyber-Surfer:
Dein Navi-Container gibst Du eine feste Weite in Pixel plus ein float left.
Dein Inhalt-Container setzt sich nun automatisch daneben, da brauchst Du für die Positionierung dann nichts mehr zu tun.
Also so wie es Ede eigentlich schon ziemlich genau beschrieben hat, dem kann ich mich voll anschließen.
cu
Conny
Hallo
Die können aber auch (wie eigentlich jeder) ohne oder mit Spar-CSS.
Wie die Elemente im Quelltext stehen, ist für diese Überlegung irrelevant.
Und die bekommen den Inhalt ohne CSS vorgelesen oder gepunktet.
Ich finde die Lösung mit Prozentangaben optisch problematisch. Angenommen das
Menü bekommt 20% der Seitenbreite, ist dies bei einer Fensterauflösung von 1000 px
Breite 200 px, bei 600 px Seitenbreite sind es nur noch 120 px. Bei überlangen Worten
oder Menüs mit Graphiken sieht das alles andere als Schick aus.
Tschö, Auge
ZITAT(amethyst @ 26.04.2004 - 1:10)
Es sollte noch ernsthaft interessieren ), es gibt nun mal noch viele, die den 4.xx von netscape benutzen.
), es gibt nun mal noch viele, die den 4.xx von netscape benutzen.Die können aber auch (wie eigentlich jeder) ohne oder mit Spar-CSS.
ZITAT(amethyst @ 26.04.2004 - 1:10)
Das Menü rechts ist vor allem dann nötig, wenn man seine Seiten auch für Blinde-Surfer praktikabel machen will, denn denen wird dann zuerst der Text und dann die Menülinks vorgelesen. Weiß kaum einer, aber ist ne Überlegung wert.
Wie die Elemente im Quelltext stehen, ist für diese Überlegung irrelevant.
Und die bekommen den Inhalt ohne CSS vorgelesen oder gepunktet.
ZITAT(Terry @ 26.04.2004 - 0:58)
Ich würds nicht unbedingt absolut positionieren und man kann auch %-Angaben machen bei den <div>s.
Ich finde die Lösung mit Prozentangaben optisch problematisch. Angenommen das
Menü bekommt 20% der Seitenbreite, ist dies bei einer Fensterauflösung von 1000 px
Breite 200 px, bei 600 px Seitenbreite sind es nur noch 120 px. Bei überlangen Worten
oder Menüs mit Graphiken sieht das alles andere als Schick aus.
Tschö, Auge
ZITAT(amethyst @ 26.04.2004 - 1:10)
Das Menü rechts ist vor allem dann nötig, wenn man seine Seiten auch für Blinde-Surfer praktikabel machen will, denn denen wird dann zuerst der Text und dann die Menülinks vorgelesen.
Skiplinks existieren.
ZITAT(filmfacts @ 26.04.2004 - 7:34)
Es sind definitiv weniger, als die Usergruppe, welche ohne Javascript - aus welchen Gründen auch immer - unterwegs ist. Und *diese* Usergruppe wird immer vergessen. Wozu also um den NN4.x scheren? Die Nicht-Javascripter sind doch viel wichtiger, da mehr!
Nimm eine größere kommerzielle Seite mit 100.000 und mehr Besuchern im Monat. Selbst wenn der NN4 da nur noch auf 1% kommt, ist das eine hübsche Menge. Würdest Du darauf verzichten wollen, wenn es doch so einfach ist, seine Seite selbst für NN4 zugänglich zu halten? Keiner redet hier von identischem Layout, aber ein Minimal-Stylesheet für NN4 ist allemal drin, zur Not gehts natürlich auch ohne. Ist die Seite vernünftig strukturiert (sprich: sinnvolle Verwendung von HTML-Elementen, nicht nur endlose div-Wüsten), gibts keine Probleme.
ZITAT(Conny @ 26.04.2004 - 10:48)
@Cyber-Surfer:
Dein Navi-Container gibst Du eine feste Weite in Pixel plus ein float left.
Dein Navi-Container gibst Du eine feste Weite in Pixel plus ein float left.
Und wenn dann der Benutzer so frech ist, einfach die Schriftgröße zu erhöhen, machts laut boom ... es gibt zuviele Seiten, die komplett auf fixen Größen basieren und bei einer anderen als der vom Webterroristen beabsichtigten Winzig-Schriftgröße kollabieren. Eine Breite in em wäre IMHO die günstigere Alternative.
Gruß
n!
Dieses ist eine vereinfachte Darstellung unseres Foreninhaltes. Um die detaillierte Vollansicht mit Formatierung und Bildern zu betrachten, bitte hier klicken.