nicht angemeldet
IE verschiebt DIV nach unten bei geringer Fensterbreite
Struppihi,
mein Problem in aller Kürze: Layout ist im Prinzip ganz einfach aufgebaut: Oben ein Kopf (div) , darunter Navigation (div) und rechts neben der Navigation der Inhalt (ebenfalls div). Und unter dem Ganzen ein Footer. Navigation float:left, Footer clear:both. DIVs sind relativ angeordnet.
Damit der Inhalt auch immer schön in einer Linie steht, auch wenn er mal weiter nach untengeht als die Navigation, wird er mit margin-left:210px vom linken Rand weggehalten.
Schaut also so ungefähr aus:
----Kopf-----
Navi Inhalt
----Footer----
Funktioniert grundsätzlich auch ganz prima, nur bei geringerer Bildschirmauflösung, oder wenn man das Browserfenster eben enstsprechend verkleinert (zB unter 700px breit, wenn im Inhalts-div eine 400 px breite Grafik ist und Navi 210px breit ist), rutscht der ganze Inhalt-div ein Stück hinunter, und zwar bis unter das Ende der Navigation. Horizontal steht er eh immer noch an der richtigen Stelle (wegen margin-left), nur eben nicht mehr direkt unter dem Kopf-div.
Schaut dann so in etwa aus:
----Kopf-----
Navi
Inhalt
----Footer----
Eigenartigerweise tritt dieses Problem aber nur beim IE auf, NS lässt Navi und Inhalt ordentlich nebeneinander stehen, auch wenn's eng wird.
Bin ich der erste, dem das passiert, oder hat jemand von Euch auch schon so ein ähnliches Problem gehabt oder sonst eine Idee, woran es liegen könnte?
Danke für Eure Hilfe schon mal im Vorhinein!
-
Zur Demonstration meines Problems etwas Quelltext:
<html>
<head>
</head>
<body><!-- Kopf -->
<div>hallo welt</div><!-- Navi -->
<div style="margin-left: 12px; float:left; max-width:210px;">
Navigation<br>
Punkt 1<br>
Punkt 2<br>
Punkt 3<br>
Punkt 4<br>
Punkt 5<br>
Punkt 6<br>
Punkt 7<br>
Punkt 8<br>
Punkt 9<br>
Punkt 10<br>
Punkt 11<br>
Punkt 12<br>
usw.
</div><!-- Inhalt -->
<div style="margin-left:210px; margin-right:20px;">
Und das ist jetz der tolle Inhalt:<br>
<img src="irgendwas" width="400" height="50">
</div><!-- Footer -->
<div style="clear:both">das war's...</div></body>
</html>hi,
mein Problem in aller Kürze: Layout ist im Prinzip ganz einfach aufgebaut: Oben ein Kopf (div) , darunter Navigation (div) und rechts neben der Navigation der Inhalt (ebenfalls div). Und unter dem Ganzen ein Footer. Navigation float:left, Footer clear:both. DIVs sind relativ angeordnet.
Damit der Inhalt auch immer schön in einer Linie steht, auch wenn er mal weiter nach untengeht als die Navigation, wird er mit margin-left:210px vom linken Rand weggehalten.
Schaut also so ungefähr aus:----Kopf-----
Navi Inhalt
----Footer----
Funktioniert grundsätzlich auch ganz prima, nur bei geringerer Bildschirmauflösung, oder wenn man das Browserfenster eben enstsprechend verkleinert (zB unter 700px breit, wenn im Inhalts-div eine 400 px breite Grafik ist und Navi 210px breit ist), rutscht der ganze Inhalt-div ein Stück hinunter, und zwar bis unter das Ende der Navigation. Horizontal steht er eh immer noch an der richtigen Stelle (wegen margin-left), nur eben nicht mehr direkt unter dem Kopf-div.
Schaut dann so in etwa aus:
----Kopf-----
Navi
Inhalt
----Footer----
Eigenartigerweise tritt dieses Problem aber nur beim IE auf, NS lässt Navi und Inhalt ordentlich nebeneinander stehen, auch wenn's eng wird.
Bin ich der erste, dem das passiert, oder hat jemand von Euch auch schon so ein ähnliches Problem gehabt oder sonst eine Idee, woran es liegen könnte?
Danke für Eure Hilfe schon mal im Vorhinein!
-
<html>
<head>
<style type="text/css"><!--div {border:1px solid black;}
#container {width:800px;}
#navi {float:left;width:195px;}
#inhalt {float:right;width:600px;}
#footer {clear:both;}
//--></style>
</head>
<body><div id="container">
<div id="logo">Logo</div>
<div id="navi">
<ul><li>home</li><li>logo</li><li>haus</li><li>garten</li></ul>
</div><div id="inhalt">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas eget purus. Nulla in lorem at lectus nonummy hendrerit. Aenean euismod. Sed non diam sed orci dignissim ornare. Nullam quis pede accumsan turpis lobortis bibendum. Morbi et orci. Etiam suscipit tortor id dui. Etiam ullamcorper leo vel tellus. Suspendisse condimentum lorem eu lorem. Suspendisse vulputate mattis lectus. Curabitur nisi libero, posuere sed, porta at, ullamcorper cursus, diam. Aenean sit amet quam. Aliquam enim urna, imperdiet sit amet, vestibulum quis, lobortis ut, ante.</p>
</div><div id="footer">Copyright by Besitzer</div>
</div></body>
</html>Jetzt bin ich echt müde...
-
#inhalt {float:right;width:600px;}
floar right ist natürlich unnötig... ist ein alter fehler von mir ^^
-
hi Mike,
tolle Lösung!
Nur gibt's jetzt ein neues Problem: Und zwar ist das ganze Layout auf 800 px begrenzt - vorher konnte die gesamte zur Verfügung stehende Breite ausgefüllt werden. Aber ich denke, die Richtung stimmt, die Idee mit dem Container ist sicher gut - werd mir das Ganze noch genauer anschauen!
dank+gn8 erst mal,
Matthias
#inhalt {float:right;width:600px;}
floar right ist natürlich unnötig... ist ein alter fehler von mir ^^
-
Nur gibt's jetzt ein neues Problem: Und zwar ist das ganze Layout auf 800 px begrenzt
Du kannst die 800px zu 1024px oder zu 50% oder zu 20em machen oder sonst was... Der Flexibilität sind dadurch keine Grenzen gesetzt.
-
stimmt, aber wenn ich Prozentwerte nehme, ist es erstens nicht mehr ganz einfach, ein vernünftiges Layout zusammenzukriegen (wenn's zB mit der Hintergrundgrafik zusammenpassen soll,...) und zweitens verrutscht dann bei breiterem Inhalt (zB breitere Grafik, nobr-Bereiche,...) wieder der ganze Inhalt nach unten.
Ich hätte halt lieber so ein schönes "liquid Layout", wie bei http://www.drweb.de/csstechnik/liquid-design.shtml beschrieben, das für Mini-Bildschirmchen von 300 bis Riesenmonitore mit 3000pc Breite noch einigermaßen ansehbar ist (ich weiß, bescheidener Anspruch).
Ich denke, ich werde mir ein kleines Javascript basteln, das 1. Browser überprüft (Problem tritt ja nur beim IE auf, 2. Bildschirmbreite ermittelt und wenn die geringer ist als die vorgesehene Mindestbreite, 3. dem Container einfach einen festen Wert zuweist. Damit sollte das Problem gelöst sein, etwas Eleganteres fällt mir auch nicht mehr ein. Aber danke, Mike, für die Mühe und für die rettende Idee mit dem Container!Übrigens, bin ich auch jetzt erst draufgekommen, tritt das Problem auch hier bei selfhtml bei den mehrspaltigen Layouts auf, außer bei denen mit festen Pixelwerten: http://de.selfhtml.org/css/layouts/mehrspaltige.htm - verkleinert man das Browserfenster, rutscht auch da alles nach unten.
Scheint aber bisher noch niemanden bunruhigt zu haben.lg, Matthias
Nur gibt's jetzt ein neues Problem: Und zwar ist das ganze Layout auf 800 px begrenzt
Du kannst die 800px zu 1024px oder zu 50% oder zu 20em machen oder sonst was... Der Flexibilität sind dadurch keine Grenzen gesetzt.
-
stimmt, aber wenn ich Prozentwerte nehme, ist es erstens nicht mehr ganz einfach, ein vernünftiges Layout zusammenzukriegen (wenn's zB mit der Hintergrundgrafik zusammenpassen soll,...) und zweitens verrutscht dann bei breiterem Inhalt (zB breitere Grafik, nobr-Bereiche,...) wieder der ganze Inhalt nach unten.
nichts ist perfekt. irgendwelche grenzen sind die natürlich gesetzt, wie jedem der eine seite baut. du musst dich entscheiden was dir am wichitgsten ist. wenn du eine zu breite grafik setztst, besteht immer ein problem. fürn hintergrund gibst auch flexibele grafiken, wobei ich gar keine setzen würde außer speziell positionierte, so dass die probleme maximal vermieden werden.
Ich hätte halt lieber so ein schönes "liquid Layout", wie bei http://www.drweb.de/csstechnik/liquid-design.shtml beschrieben,
ich habs nicht ganz gelesen, aber hier wird auch mit prozenten gearbeitet.
Ich denke, ich werde mir ein kleines Javascript basteln, das 1. Browser überprüft (Problem tritt ja nur beim IE auf, 2. Bildschirmbreite ermittelt und wenn die geringer ist als die vorgesehene Mindestbreite, 3. dem Container einfach einen festen Wert zuweist. Damit sollte das Problem gelöst sein, etwas Eleganteres fällt mir auch nicht mehr ein.
Mit JavaScript kenne ich micht nicht aus, aber ich halte es eigentlich für unnötig, dass du dir so viel Mühe machst. Wird deine Seite von Leuten mit 3200 und 320 px auflösung besucht und wie oft? wer ist deine zielgruppe? außerdem sind sowohl die handys auch die browser auf dem pc inzwischen in der lage die seiten "richtig" darzustellen. irgendwann sind die ausgabegeräte auch zuständig.
Aber danke, Mike, für die Mühe und für die rettende Idee mit dem Container!
Bitte ;)
Übrigens, bin ich auch jetzt erst draufgekommen, tritt das Problem auch hier bei selfhtml bei den mehrspaltigen Layouts auf, außer bei denen mit festen Pixelwerten: http://de.selfhtml.org/css/layouts/mehrspaltige.htm - verkleinert man das Browserfenster, rutscht auch da alles nach unten.
Ich weiss, gar nicht was du meinst. Ich habs nicht gefunden. ??
http://www.leeb-online.net - Ist das deine Seite? Es ist schonmal gut, dass du Farben gewählt hast, die dem Auge gut tun, wenn das auch nicht mein persönlicher Geschmack ist. Aber das Design ist zu trotzdem verwirrend, verspielt im Sinne von, das Auge wird nicht "geleitet", überall ist etwas, man weiss icht wohim man schauen soll, was ist wichtig, was nicht. Man muss sich erstmal einne Zeit lang orientieren und darauf haben die meisten keine Lust. Z.B. war ich auch "überfordert" und habe die Seite dann verlassen, weil ich keine Lust hatte, mir in jede Ecke etwas anzuschauen und dann zu entscheiden, was wichtig ist. Beim zweiten hinschauen habe ich mir das Menü angeschaut, habe auf "News, Hot Links,
Tipps und Tricks" geklickt und wurde irgendwo hingeführt. Ich wusste nicht wohin, ich kam auch nur ober das "zurück" buttin wieder zurück. das war verwirrend.Wenn du mehr von meinem Blabla hören willst, lass michs wissen, dann gebe ich noch mehr von meinem Senf ab ;)
Investiere in Ecke Design auch etwas Zeit. Ich empfehle dir diese Seite [link=http://show.andyrutledge.com] Ich liebe sie ;) Es sind zwar keine Tutorials dabei aber bei den "Redux" Artikeln lernste eine Menge wenn du aufmerksam liest. Selber findest du natürlich auch viel, wenn du suchst.
-
-
-
-
-
-
-
Hi, erstmal ist ein Link zum Problemfall immer hilfreich. Ich weiss nicht, ob ich dein Problem richtig verstanden habe, aber wenn ja, würde es vielleicht helfen float:right dem inhalt zuzuweisen. Wie gesagt, ein Link wäre hilfreich.
Ich würde nicht margin-left:210pc setzen sondern eine relative Angabe machen...
-
Hallo Mike!
Danke für Deine Hilfe! Homepage ist erst in Arbeit, daher kann ich Dir leider keinen Link anbieten. Ich hab aber den Quelltext von einer abgespeckten Seite, bei dem das Problem genau so auftritt, da ins Forum gestellt: http://forum.de.selfhtml.org/?t=164431&m=1071770
Mit float:right beim Inhalt war das Problem leider nicht gelöst, float bezieht sich ja auf das nachfolgende Element (http://de.selfhtml.org/css/eigenschaften/positionierung.htm#float).
danke + lg, Matthias
Hi, erstmal ist ein Link zum Problemfall immer hilfreich. Ich weiss nicht, ob ich dein Problem richtig verstanden habe, aber wenn ja, würde es vielleicht helfen float:right dem inhalt zuzuweisen. Wie gesagt, ein Link wäre hilfreich.
Ich würde nicht margin-left:210pc setzen sondern eine relative Angabe machen...
-
-
Funktioniert grundsätzlich auch ganz prima, nur bei geringerer Bildschirmauflösung, oder wenn man das Browserfenster eben enstsprechend verkleinert (zB unter 700px breit, wenn im Inhalts-div eine 400 px breite Grafik ist und Navi 210px breit ist), rutscht der ganze Inhalt-div ein Stück hinunter, und zwar bis unter das Ende der Navigation. Horizontal steht er eh immer noch an der richtigen Stelle (wegen margin-left), nur eben nicht mehr direkt unter dem Kopf-div.
Das ist eine Eigenschaft von float, wenn der Platz nicht mehr nebeneinander ausreicht werden die Inhalte untereinander gestellt.
Eigenartigerweise tritt dieses Problem aber nur beim IE auf, NS lässt Navi und Inhalt ordentlich nebeneinander stehen, auch wenn's eng wird.
Das "Problem" sollte auch in anderen Browsern auftreten,
Struppi.
-
hm, aber unsinnig, dass er's nach unten verschiebt, wenn mit margin-left ein Abstand definiert ist - er gewinnt dadurch ja horizontal keinen Platz. Bei NS verrutscht übrigens nichts.
Ne andere Idee, wie ich Navi und Inhalt auf gleicher Höhe halten könnte?
lg, Matthias
Funktioniert grundsätzlich auch ganz prima, nur bei geringerer Bildschirmauflösung, oder wenn man das Browserfenster eben enstsprechend verkleinert (zB unter 700px breit, wenn im Inhalts-div eine 400 px breite Grafik ist und Navi 210px breit ist), rutscht der ganze Inhalt-div ein Stück hinunter, und zwar bis unter das Ende der Navigation. Horizontal steht er eh immer noch an der richtigen Stelle (wegen margin-left), nur eben nicht mehr direkt unter dem Kopf-div.
Das ist eine Eigenschaft von float, wenn der Platz nicht mehr nebeneinander ausreicht werden die Inhalte untereinander gestellt.
Eigenartigerweise tritt dieses Problem aber nur beim IE auf, NS lässt Navi und Inhalt ordentlich nebeneinander stehen, auch wenn's eng wird.
Das "Problem" sollte auch in anderen Browsern auftreten,
Struppi.
-
Ne andere Idee, wie ich Navi und Inhalt auf gleicher Höhe halten könnte?
nicht mit float.
Struppi.
-
-