zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > Site- und Layoutcheck
Seite neu laden WebsiteCheck - Problem mit IE bei kleinem Fenster

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 07.04.2009, 13:15
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.10.2008
Beiträge: 16
Schoaf befindet sich auf einem aufstrebenden Ast
Standard WebsiteCheck - Problem mit IE bei kleinem Fenster

Hallo,

ich hoffe auf euren Layout-Check um mein Problem zu lösen.
Ich kann nämlich keine Lösung für mein Problem suchen weil ich es nicht gut beschreiben kann.

Die Seite ist:
Kindergruppe [Kleine Loewen von Aspern]

Mein Problem ist jetzt, dass der IE wenn ich die Fenstergröße kleiner mache als der "Haupt-Inhalt", dann rutscht das Blatt unter das Menü und das wäre schon scheußlich. Im FF macht er das nicht... Und ich weiß auch nicht warum er dorthinrutscht.

Ich hab mal alle Elemente mit Rahmen angezeigt, damit man auch sieht worum es sich handelt - die kommen klarerweise dann eh weg.

Ich möchte gerne erreichen, dass das Menü dort bleibt wo es ist und der Inhalt (auf dem Blatt) in der Mitte des restlichen Bereichs (ohne Menü) platziert wird mit einer fixen Breite. Und wenn das Fenster dafür zu wenig Platz hat soll eben gescrollt werden müssen.

Irgendwelche Tips?? Bin für Alles dankbar!


[EDIT]
CSS Validator sagt:
Zitat:
In (x)HTML+CSS, floated elements need to have a width declared. Only elements with an intrinsic width (html, img, input, textarea, select, or object) are not affected
Ist das so richtig? Soll ich wirklich für jedes DIV eine Breite angeben? Ich dachte DIVs dürfen sich an die Größe des Inhalts anpassen und sollen das auch...!? Oder heißt das, dass ich für mein Vorhaben nicht FLOAT verwenden soll?
[/EDIT]

LG Schoaf

Geändert von Schoaf (07.04.2009 um 13:59 Uhr) Grund: Ergänzung
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 11.04.2009, 00:45
Benutzerbild von plastiko
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 26.12.2007
Ort: Hannover
Beiträge: 945
plastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblick
Standard

Du meinst den IE7?
Entferne das min-width für #frame.

Im IE6 ist das menü nicht zu sehen.
Das liegt wohl an dem double-float-margin-bug.
Er schlägt zu wenn float und margin in die selbe Richtung zeigen:
Code:
#menu {
clear:left;
float:left;
height:99%;
margin:5px 0px 0px -275px;
width:270px;
}
margin-left verdoppelt sich (-550px).
__________________
MfG
Jens

Geändert von plastiko (11.04.2009 um 01:01 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 11.04.2009, 13:41
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.10.2008
Beiträge: 16
Schoaf befindet sich auf einem aufstrebenden Ast
Standard

Hallo,

vielen Dank für den Tip!
Zitat:
Zitat von plastiko Beitrag anzeigen
Du meinst den IE7?
Entferne das min-width für #frame.
Ich hab es jetzt ausgebessert wobei ich mir eigentlich sicher war, dass ich "min-width" erst reingegeben habe weil es nicht funktioniert hat. Egal jetzt gehts.

Zitat:
Zitat von plastiko Beitrag anzeigen
Im IE6 ist das menü nicht zu sehen.
Das liegt wohl an dem double-float-margin-bug.
Er schlägt zu wenn float und margin in die selbe Richtung zeigen:
Code:
#menu {
clear:left;
float:left;
height:99%;
margin:5px 0px 0px -275px;
width:270px;
}
margin-left verdoppelt sich (-550px).
Also davon weiß ich noch nichts. Vielen Dank, das wäre mir erst beim späteren Testen aufgefallen. Ich hab das hoffentlich gefixt (kann es jetzt nicht testen) mit "display: inline"

Ich hoffe jetzt funktioniert alles und ich kann endlich den ganzen Inhalt einfügen - hatte nämlich schon Angst ich muss was am Design ändern.

Vielen Dank nochmal!

LG Schoaf
Mit Zitat antworten
  #4 (permalink)  
Alt 11.04.2009, 13:57
Benutzerbild von plastiko
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 26.12.2007
Ort: Hannover
Beiträge: 945
plastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblick
Standard

Zitat:
Zitat von Schoaf Beitrag anzeigen
Also davon weiß ich noch nichts. Vielen Dank, das wäre mir erst beim späteren Testen aufgefallen. Ich hab das hoffentlich gefixt (kann es jetzt nicht testen) mit "display: inline"
Ja,
das Menü ist nun im IE6 zu sehen.
__________________
MfG
Jens
Mit Zitat antworten
  #5 (permalink)  
Alt 11.04.2009, 22:49
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.10.2008
Beiträge: 16
Schoaf befindet sich auf einem aufstrebenden Ast
Standard

Hallo!

Danke fürs kontrollieren, plastiko. Leider macht es aber im IE 5.01 noch immer Probleme...

...aber im Moment zersause ich mir meine Haare wegen einer anderen Sache. Ich glaube ich habe das ganze falsch angefangen...

Das Menü hat noch das Problem, dass es bei anderer Schriftgröße, oder anderer Schriftart doch auch anders Platziert werden könnte - das will ich eigentlich nicht. Ich finde irgendwie keinen Ansatz wie man meine Vorstellung einfach umsetzen könnte obwohl mir das Layout ziemlich einfach erscheint hackt es dann immer an irgendeiner Ecke:

Ich möchte:
- Einen Streifen Oben der die ganze Breite einnimmt (das funktioniert ja schon und ist einfach)
- Ein Menü links, sollte genau 100px von links weg sein und die größe an die Menüpunkte anpassen (letzteres geht nicht wirklich mit dem letzten Punkt)
- der Inhalt soll in der Mitte des restlichen Platzes sein (das hab ich nur geschafft indem ich das body-Element schon verschoben habe) und dort eine fixe Breite haben.

Ich checks einfach nicht.... ...bin in irgendeiner Sackgasse.
Und je mehr ich im Internet nach einer Lösung suche desto verwirrender wirds für mich ("verwende floats" , "verwende keine floats" , "verwende hacks", ....)

Weiß jemand eine Seite wo ich etwas in meiner Art finden kann?

LG Schoaf
Mit Zitat antworten
  #6 (permalink)  
Alt 12.04.2009, 01:57
Benutzerbild von plastiko
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 26.12.2007
Ort: Hannover
Beiträge: 945
plastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblick
Standard

Ehrlich gesagt, ich weiß nicht wo ich anfangen soll.
Deine Navigation bräuchte width, padding-left: 100px und float: left;
Der Inhaltsbereich daneben ein entsprechendes margin-left ohne float und width.
Der kasten in der mitte könnte dann in einen weiteres div mit fester breite sein.

Der Baumstamm bräuchte irgendwo eine Gerade die sich vertikal wiederholen lässt damit er mitwachsen kann.

Vielleicht ist dieser Buchtipp was für dich:
Little Boxes (Webseiten gestalten mit CSS)
(Teil 1 und 2)
__________________
MfG
Jens

Geändert von plastiko (12.04.2009 um 02:29 Uhr)
Mit Zitat antworten
  #7 (permalink)  
Alt 13.04.2009, 18:25
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.10.2008
Beiträge: 16
Schoaf befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von plastiko Beitrag anzeigen
Ehrlich gesagt, ich weiß nicht wo ich anfangen soll.
Deine Navigation bräuchte width, padding-left: 100px und float: left;
Der Inhaltsbereich daneben ein entsprechendes margin-left ohne float und width.
Also wenn ich das richtig verstanden habe dann meinst du width & padding-left in px angeben? Dann kann sichs aber nicht an die Schrift anpassen. Und wenn ich die Breite des Menüs in em angebe ists wohl besser gleich ein padding-left für <body> anzugeben, dann kann ich auf die 100px vergessen und einfach die gewünschten em beim Inhalt mit margin-left einrücken.
Zitat:
Zitat von plastiko Beitrag anzeigen
Der kasten in der mitte könnte dann in einen weiteres div mit fester breite sein.
Ja, klar. Linksbündig ist das auch keine Hexerei, aber IE7 zeigt bei einer zentrierten Ausrichtung schon magische Ambitionen. Da springt mir bei meinem "TestLayout" wieder der Content unter das Menü wenn das Fenster zu klein wird. Ich weiß... das hatten wir schon. aber ehrlich kein min-width drinnen!

Zitat:
Zitat von plastiko Beitrag anzeigen
Der Baumstamm bräuchte irgendwo eine Gerade die sich vertikal wiederholen lässt damit er mitwachsen kann.
Gut, das hat zwar nix mit meinem Problem zu tun...
...hatte ich mir schon überlegt und für keine gute Idee empfunden weil bei großer Auflösung dann ein langes gerades Teil entstehen würde das dann schon sehr eindeutig aussehen könnte. Und ich fands nicht so schlimm wenn der Baum da einfach irgendwo hängt. Aber das werd ich dann eh noch mit großen Auflösungen testen - wenn ich das Grunddesign einmal irgendwie hinbiegen kann. Danke für den Hinweis jedenfalls.

Zitat:
Zitat von plastiko Beitrag anzeigen
Vielleicht ist dieser Buchtipp was für dich:
Little Boxes (Webseiten gestalten mit CSS)
(Teil 1 und 2)
Werds mir mal ansehen, das hamm sie sogar bei uns an der TU... Muss ich mal ausborgen. Obwohl ich - scheinbar fälschlicherweise - der Meinung war das ich CSS schon ganz gut kann. Nur die Browserabhängigen feinheiten machen mir echt Schwierigkeiten.

Hier mein TestLayout mit dem ich jetzt das Gerüst alleine testen will um nicht an Kleinigkeiten zu scheitern:
--[____TestLayout____]--
Wie gesagt - der IE7 schiebt mir einfach den Content unter das Menü wenn das Fenster zu klein wird.
Und eigentlich hätte ich das Menü gerne so, dass es sich an die Größe des Inhalts anpasst (ohne width) aber ich hab mich schon mit width in em abfinden müssen.. ..das sollte eigentlich auch ganz gut gehen.

LG Schoaf

P.S.: Ich brenne schon auf die nächste Ohrfeige was jetzt schon wieder total falsch sein könnte...

Geändert von Schoaf (13.04.2009 um 18:27 Uhr)
Mit Zitat antworten
  #8 (permalink)  
Alt 13.04.2009, 22:37
Benutzerbild von plastiko
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 26.12.2007
Ort: Hannover
Beiträge: 945
plastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblick
Standard

Wie das ohne width für #menu geht weiß ich nicht.

min-widht ist ja nicht verkehrt es war nur das falsche Element.

Ich habe zwei Elemente außen rumgelegt:
Code:
<div id="alles">
<div id="alles-innen">
..
..
</div>
</div>
#alles habe ich das min-width gegeben (für IE7).
#alles-innen das margin-left: 100px;

Der IE kennt min-width erst ab Vers.7.
Margin-auto erst ab Vers.6
Code:
<!--[if lt IE 8]>
<style>

/* Mindestbreite: IE7 */
#alles {
min-width: 50em;
}

/* Mindestbreite: IE5-6 */
* html #alles {
 width:expression(document.body.clientWidth < 804? "800px": "auto" );
}

/* Zentrierung IE5-5.5 */
* html #content {
text-align /**/:center;
}

/* text-align aufheben IE5-5.5 */
* html .page {
text-align /**/:left;
}
</style>
  <![endif]-->
Expressions sind bestimmt nicht die beste Lösung für min-width.
Wenn du nach min-width ie suchst findest du vielleicht eine bessere Lösung.

Verzichte besser auf die Border zur Veranschaulichung.
Sie beeinflussen das Layout.
Die meißten Antwortenden haben Werkzeuge die Elemente auch so hervorheben können.
Z.B.:
https://addons.mozilla.org/de/firefox/addon/1843
Ansonsten kannst du auch unterschiedliche Hintergrundfarben verwenden.

Zitat:
Ich brenne schon auf die nächste Ohrfeige was jetzt schon wieder total falsch sein könnte...
Entschuldigung.
So wollte ich nicht rüberkommen.

Das Thema wäre im css-Forum besser aufgehoben wie im websitecheck.
__________________
MfG
Jens

Geändert von plastiko (14.04.2009 um 00:16 Uhr)
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
DIV Problem darnia CSS 1 01.04.2011 12:54
Div with mit background-image umbruch problem beim Fenster verkleinern bananarama CSS 1 29.03.2011 17:45
Mitwachsender Content und Footer Problem Bentham CSS 5 19.09.2010 12:49
IE 7: Zoom Problem, Höhen Problem, Text problem Cu Chullain CSS 4 02.09.2010 14:56
Problem: IE versteckt Text & Feedback Herbi CSS 2 11.08.2006 15:39


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:18 Uhr.