woher kommt die kleine Stufe?

[snitch]

morgen zusammen,

beschäftige mich gerade (endlich) näher mit CSS-Layouts und habe eine kleine Frage zu dieser Datei: CSS-Test
im FF sowie im IE gibt es hier ein kleine Kante bei der Box "Suche" und "Inhalt".
Waraum? Wie bekomme ich den Fehler weg?

thx
snitch

[Tom]

Hello,

bevor Du irgendwie weitermachst, solltest Du Dir das
http://de.selfhtml.org/navigation/suche/index.htm?Suchanfrage=boxmodel
verinnerlichen. Das hat mich schon oft genug fast zum Wahnsinn getrieben, vor allem, weil die Browser da auch alle irgendwelche Macken haben.

Harzliche Grüße aus http://www.annerschbarrich.de

Tom

[snitch]

http://de.selfhtml.org/navigation/suche/index.htm?Suchanfrage=boxmodel

verinnerlichen. Das hat mich schon oft genug fast zum Wahnsinn getrieben, vor allem, weil die Browser da auch alle irgendwelche Macken haben.

du wirst lachen, aber ich habe mich schon den ein oder anderen Tag in das ganze System eingelesen. Die verlinkte Datei habe ich schon ungefähr 10 Mal bearbeitet bevor ich sie überhaupt _so_ weit gebracht habe. ;-)
Also ich weiß schon einiges zu diesem Thema.
Aber warum hier diese kleine Stufe ist - keinen Schimmer.

Hilfe!

[Efchen]

Aber warum hier diese kleine Stufe ist - keinen Schimmer.

Pure Mathematik, wenn man - wie Du das von Dir sagst - das Box Model kennt. :-)

[snitch]

Aber warum hier diese kleine Stufe ist - keinen Schimmer.

Pure Mathematik, wenn man - wie Du das von Dir sagst - das Box Model kennt. :-)

ah, stimmt. Ich hatte die linke Seite als Bezugspunkt vergessen - mein Fehler.
Ich kann aber an eine relative größe keine Absolute addieren lassen. Was wäre in diesem Fall denn eine _schöne_ Lösung für die 2 Pixel.
1. Rahmen weg (ich will aber einen Rahmen)
2. Rahmen-Div um jedes Element (aufwendig)
3. Border: 0.01 em (bis zu einer gewissn Größe beim FF zumindest annehmbar)
4. Such-Box mit float:clear runterholen und über margin -XX wieder hochsetzen und margin left 8 em einrücken. (das selbe Problem mit Border nur in der Vertikalen ... *ahhh*)
5. ???

Hilfe zur Selbsthilfe erwünscht. :-)

[Efchen]

Ich kann aber an eine relative größe keine Absolute addieren lassen.

Richtig.

Hilfe zur Selbsthilfe erwünscht. :-)

Ist bereits vor über 1 1/2 Stunden erfolgt.

[snitch]

Dein derzeitiger Code ist pure <div>-Suppe, die in der Semantik der missbräuchlichen Verwendung von Tabellen zu Layout-Zwecken in nichts nachsteht.

sorry hatte ich nicht gesehen - war zwischenzeitlich beim Blutspenden  - wirklich! *g*
Also bezüglich semantik, dass wäre noch alles gekommen aber ich habe mich wohl zu sehr auf die Darstellung im Browser fixiert.
Und das _Tabellendenken_ sitzt einfach noch zu tief.

Deine <div>s für Darstellung und Suche sind doch eigentlich Überschriften für die Bereiche darunter? Also auszeichnen mit <h2> (beide, da sie gleichrangig sind).

diese beiden Kästen werden noch mit verschiedenstem Inhalt gefüllt und werden dann vermutlich auch nicht mehr gleich breit sein. Aber im Moment nur zur Darstellung.

Ich habe die Datei nochmal überarbeitet und neu hochgeladen

Mein Stufenproblem ist jetzt quasi weg und die Semantik sollte jetzt um einiges besser sein.

[Efchen]

Und das _Tabellendenken_ sitzt einfach noch zu tief.

Dabei ist das Tabellendenken ja total verkehrt und eigentlich sinnlos. :-)

Deine <div>s für Darstellung und Suche sind doch eigentlich Überschriften für die Bereiche darunter? Also auszeichnen mit <h2> (beide, da sie gleichrangig sind).
diese beiden Kästen werden noch mit verschiedenstem Inhalt gefüllt und werden dann vermutlich auch nicht mehr gleich breit sein. Aber im Moment nur zur Darstellung.

Deswegen sind sie trotzdem beide Überschriften und beide mit <h2> auszuzeichnen. Wie sie dargestellt werden sollen, hat mit der Struktur der Seite rein gar nichts zu tun.

Mein Stufenproblem ist jetzt quasi weg und die Semantik sollte jetzt um einiges besser sein.

Ach so, "Darstellung" und "Suche" sollen zusammen ein weiteres Menü ergeben? Dann mach auch daraus eines! Mit einer <ul> selbstverständlich. Ich hatte das vorher anders verstanden und sehe jetzt an der neuen Version der Seite, wie Du es gemeint hast. Auch hier sind <div>s fehl am Platze.

Aber der Rest sieht gleich viieeeel besser aus. Nur der #wrapper stört mich noch. Wozu ist der da? Ich sehe da keinen Sinn, zumal das clear ja nicht mehr nötig sein wird, wenn Du das obere Menü als Liste ausgezeichnet hast.

[snitch]

Ach so, "Darstellung" und "Suche" sollen zusammen ein weiteres Menü ergeben? Dann mach auch daraus eines! Mit einer <ul> selbstverständlich. Ich hatte das vorher anders verstanden und sehe jetzt an der neuen Version der Seite, wie Du es gemeint hast. Auch hier sind <div>s fehl am Platze.

es sink KEINE Überschriften ;-)
in den Kasten _Darstellung_ kommen noch verschiedene Buttons und Funktionen für Anzeige / Ausgabe - Barrierefreiheit und so.
und _Suche_ wird mit einem Suchfeld und einem Button bestückt.

also hier wieder ein paar Erweiterungen: Datei akt.

Aber der Rest sieht gleich viieeeel besser aus. Nur der #wrapper stört mich noch. Wozu ist der da? Ich sehe da keinen Sinn, zumal das clear ja nicht mehr nötig sein wird, wenn Du das obere Menü als Liste ausgezeichnet hast.

mit dem wrapper habe ich _Inhalt_ und _Status_ einfacher unter Kontrolle ...

gleich noch ne Frage: wenn ich der #Rahmen eine Hintergrundfarbe gebe, blendet der IE (bis jetzt nur in IE getestet) mir meinen Head aus - je nach Größe des Fensters bzw, nach Lust und Laune des IEs ;-)
Why?

nighty night
snitch

[Efchen]

in den Kasten _Darstellung_ kommen noch verschiedene Buttons und Funktionen für Anzeige / Ausgabe - Barrierefreiheit und so.
und _Suche_ wird mit einem Suchfeld und einem Button bestückt.

Dann empfehle ich Dir, diesen Inhalt auch jetzt schon da rein zu schreiben. Semantik kann man schlecht machen, wenn noch kein Inhalt da ist. Oder man muss es ständig nachbessern, was man dann aber wieder oft vergisst. Weswegen es auch so viele div-Suppen gibt.
JETZT sieht das nämlich total besxcheuert aus :-) mit dem <div> um das <h2> rum, und jeder, der das kommentieren soll, würde sagen "Das ist überflüssig" und würde Dich belehren mit Dingen, die Du vermutlich schon verstanden hast.

also hier wieder ein paar Erweiterungen:

Das sieht mit jedem Mal besser aus. Optik UND Struktur. Lob!

mit dem wrapper habe ich _Inhalt_ und _Status_ einfacher unter Kontrolle ...

Hmmm...der wahre Grund ist, dass Du ihn brauchst, um die Elemente darin (nav und inhalt) auf gleiche Höhe geCLEARt unter Darstellung und Suche zu bringen. Also, er darf da bleiben :-)

#darstellung/#suche:
float:left ODER display:inline (float alleine reicht hier).

gleich noch ne Frage: wenn ich der #Rahmen eine Hintergrundfarbe gebe, blendet der IE (bis jetzt nur in IE getestet)

Du solltest CSS-Layouts IMMER zuerst in einem Gecko (Mozilla, Firefox, ...) testen, denn der IE hat zu viele Fehler. Damit erzeugst Du validen Code, die Fehler des IE werden danach, teilweise durch Hacks, ausgebügelt.

mir meinen Head aus - je nach Größe des Fensters bzw, nach Lust und Laune des IEs ;-)
Why?

*IE unter Linux rauskram*
Hmmm...der spinnt :-)

Im ersten Moment sieht das so aus, als läge das irgendwie am z-index. Aber eigentlich kann das nicht sein...*grübel*

margin:0 3em 0 3em kann man übrigens kürzer schreiben:
margin:0 3em;

Nein, sorry, mit dem IE-Problem stehe ich jetzt auch auf dem Schlauch. Und da der IE unter Linux bei mir häufig zu Abstürzen neigt, macht das Testen da auch keinen Spaß.
Also nach ein paar Tests sieht es für mich aus, als läge es wirklich am z-index. Wenn man dem head mal ein position:absolute und nen hohen z-index verpasst, ist der Header auf jeden Fall wieder zu sehen, aber der Rattenschwanz an Problemen, der dann folgt, ist unglaublich.

Es muss da irgendeine einfache Lösung geben. Irgendein trivialer Fehler in Deinem Code, der das auslöst. So ein seltsames Verhalten legt normalerweise nichtmal der IE an den Tag.

[snitch]

danke dir nochmal für deine Hilfe, hat mich sehr weitergebracht.
Ich arbeite momentan nur nebenbei weiter an dieser Seite. aber sie wächst und wächst :-)

Es muss da irgendeine einfache Lösung geben. Irgendein trivialer Fehler in Deinem Code, der das auslöst. So ein seltsames Verhalten legt normalerweise nichtmal der IE an den Tag.

denke ich auch. im Zweifel muss halt ein weitereres DIV dafür herhalten ... ja ja ich weiß ;-)

ich werde die Tage diesbezüglich noch einen Thread starten - die Lösung kennt hier bestimmt jemand.

so far, thx and cu
snitch

[snitch]

ihr habt Probleme da oben ... *g*

also jetzt doch noch eine kleine Frage, und sie hat auch mit Stufen zu tun.
im IE ist ein Einzug vor dem Formular Datei

hab schon so gut wie jeden Parameter ausprobiert und außer margin-left auf Minus zu setzen fällt mir nichts mehr ein. :-|

thx

PS: nicht durch den "Verbinder" stören lassen.
bin jetzt zu faul die - mittlerweile gewachsene - Ordnerstruktur mit den Bildern noch hochzuladen.

[Efchen]

im IE ist ein Einzug vor dem Formular Datei

Vergessen, was hochzuladen? Auf der Seite ist kein <form>ular.

[snitch]

Vergessen, was hochzuladen? Auf der Seite ist kein

<form>ular.

Hö?
im Suchfeld ...
die Datei muss da sein.

[Efchen]

die Datei muss da sein.

Sorry, war wohl ein Caching-Problem.

Tja...was soll ich sagen...luschtig.
Keine margins, keine behindernden floats

Irgendwie würde ich das dennoch in die Kategorie float/display:inline einordnen, habe aber bisher keine Lösung gefunden.

[snitch]

die Datei muss da sein.

Sorry, war wohl ein Caching-Problem.

Tja...was soll ich sagen...luschtig.
Keine margins, keine behindernden floats

Irgendwie würde ich das dennoch in die Kategorie float/display:inline einordnen, habe aber bisher keine Lösung gefunden.

ja der IE ist immer für einen Spaß zu haben :-P

also ich hab den Fehler gefunden. das Formular war garnicht valide - zumindest nicht nach _XHTML1.0 strict_.
die <input>s müssen in ein <fieldset> und *tada*
keine Probleme mehr.

aber trotzdem ist da eine gewisse Problematik ... falls das hier noch jemand mitliest und interessiert hier ein Link

viele Grüße und ich geh jetzt ins Schwimmbad :-))
snitch

[Efchen]

also ich hab den Fehler gefunden. das Formular war garnicht valide - zumindest nicht nach _XHTML1.0 strict_.
die <input>s müssen in ein <fieldset> und *tada*
keine Probleme mehr.

Hmmm...ja, daran hab ich gar nicht gedacht. Und das, obwohl ich immer sage, dass sich eine Fehlersuche bei der Darstellung nur bei validem HTML lohnt.

Aber ich verstehe trotzdem nicht, warum der IE da so reagiert.

viele Grüße und ich geh jetzt ins Schwimmbad :-))

Bah. Und ich muss gleich bei 35.4 Grad noch knapp 40 min mit dem Fahrrad nach Hause fahren.
*stöhn*schwitz*

[snitch]

Bah. Und ich muss gleich bei 35.4 Grad noch knapp 40 min mit dem Fahrrad nach Hause fahren.
*stöhn*schwitz*

ohhh... ;-)

Mal ne Frage zu Außenabständen:
als Beispiel gleich mal wieder meine Datei
ich habe hier über margin 4em angegeben.
wenn jetzt aber das Fenster relativ schmal ist und die Schriftgröße von Browserseite höher gestellt wird als _normal_ dann ist 4em eigentlich viel zu viel.

Ich suche jetzt eine Möglichkeit diese 4em ab einer bestimmten  Fenstergröße (was mit _min-widht_ ginge) UND ab einer bestimmten Schriftgröße kleiner werden zu lassen bzw. eigentlich könnte der Abstand dann ganz wegfallen.

mit JavaScript hätte ich da schon eine Idee aber mit CSS wäre es natürlich schöner.

thx

[Efchen]

wenn jetzt aber das Fenster relativ schmal ist und die Schriftgröße von Browserseite höher gestellt wird als _normal_ dann ist 4em eigentlich viel zu viel.

Das kann nicht sein. Denn mit der Einheit "em" machst Du die Größe ja abhängig von der Schriftgröße. Ein Abstand in em, der bei Schriftgröße n gut aussieht, sieht bei Schriftgröße 3n genauso gut aus.

Natürlich, wenn das Verhältnis von Schrift- zu Browsergröße zu klein wird, dann knallt das Layout irgendwann durch, das ist logisch. Bei einer Schriftgröße von 10em kriegt man auch bei großen Fenstern nicht mehr so viel drauf ;-)

Ich suche jetzt eine Möglichkeit diese 4em ab einer bestimmten  Fenstergröße (was mit _min-widht_ ginge) UND ab einer bestimmten Schriftgröße kleiner werden zu lassen bzw. eigentlich könnte der Abstand dann ganz wegfallen.

No way mit CSS. Mit der Einheit "em" definierst Du Größen in Abhängigkeit von der Schriftgröße, mit der Einheit "%" Größen in Abhängigkeit zur Größe des Browserfensters. Mischen kann man das nicht.

mit JavaScript hätte ich da schon eine Idee aber mit CSS wäre es natürlich schöner.

Ja, mit JavaScript könnte man diesbezüglich ne Menge machen, wenn darunter die Nutzbarkeit nicht leiden würde.

[snitch]

Mischen kann man das nicht.

HAHA! und es geht doch!
Auflösung 1280 x 1024, Firefox, Schriftgröße _normal_
4em entsprechen 64px, 10% entsprechen auch 64px
margin:0 10% 0 4em = valide

So, damit ist der rechte Rand fest, wenn jemand das Browserfenster verkleinert - kein störendes ruckeln.

und die linke ist fest, wenn die Schriftgröße geändert wird.
Der Unterschied der beiden Abstände fällt dem Leihen erst recht spät auf und ich finde es nicht soo schlimm.

insgesamt ein guter Kompromis wie ich finde *stolz bin* :o)

[Efchen]

insgesamt ein guter Kompromis wie ich finde *stolz bin* :o)

Für mich ist es schon zu spät und zu HEIß, das noch verstehen zu können.
Hauptsache ist, Du bist zufrieden :-)

[Ingo Turski]

Hi,

HAHA! und es geht doch!
Auflösung 1280 x 1024, Firefox, Schriftgröße _normal_
4em entsprechen 64px, 10% entsprechen auch 64px
margin:0 10% 0 4em = valide

natürlich geht das. Die Werte für margin können individuell angegeben werden.
Und stolz sein kannst Du, weil Du erkannt hast, daß sich bei margin der Wert % auf die Boxgröße bezieht. ;-)

freundliche Grüße
Ingo

[snitch]

Und stolz sein kannst Du, weil Du erkannt hast, daß sich bei margin der Wert % auf die Boxgröße bezieht. ;-)

Moment, wie meinen?
% bezieht sich doch auf die Fensterbreite?!
wenn ich 50% eingebe dann ist immer exakt die Hälfte des Bildschirms _Leerraum_, _Ma immrgin_ wie aucher.
damit wir von dem Selben reden, hier nochmal die entsprechende Datei mit 50% margin-right.

[Ingo Turski]

Hi,

% bezieht sich doch auf die Fensterbreite?!
wenn ich 50% eingebe dann ist immer exakt die Hälfte des Bildschirms _Leerraum_, _Ma immrgin_ wie aucher.

Nein. Es bezieht sich auf die Breite der umgebenden Box.

damit wir von dem Selben reden, hier nochmal die entsprechende Datei mit 50% margin-right.

Hier ist das Elternelement body, welches die gesamte Fensterbreite einnimmt.

freundliche Grüße
Ingo

[snitch]

damit wir von dem Selben reden, hier nochmal die entsprechende Datei mit 50% margin-right.
Hier ist das Elternelement body, welches die gesamte Fensterbreite einnimmt.

hm, okay.
und weiter? klingt so, als ob du mir damit noch irgendwas sagen möchtest. ;-)
kann man das für Praxis irgendwie nutzen?
Mir würde da spontan einfallen, mein Rahmen-DIV wegzunehmen und den Rahmen und Abstand über BODY zu definieren ...

Grüße aus dem verregneten Nürnberg :-|
snitch

[Ingo Turski]

Hi,

Hier ist das Elternelement body, welches die gesamte Fensterbreite einnimmt.

hm, okay.
und weiter? klingt so, als ob du mir damit noch irgendwas sagen möchtest. ;-)

Nur, daß sich in Deinem Beispiel die 50% nach der Fensterbreite richten, weil kein Elternelement diese einschränkt.

Mir würde da spontan einfallen, mein Rahmen-DIV wegzunehmen und den Rahmen und Abstand über BODY zu definieren ...

Natürlich geht das - in moderen Browsern sogar über das html-Element.
Z.B.: body { width:50%; border: 1px solid black; }

freundliche Grüße
Ingo

[Efchen]

% bezieht sich doch auf die Fensterbreite?!
wenn ich 50% eingebe dann ist immer exakt die Hälfte des Bildschirms _Leerraum_

Was denn nun, Fensterbreite oder Bildschirmbreite?

Mal abgesehen davon, dass es in diesem Fall keines von beiden ist, ist zwischen Fensterbreite und Bildschirmbreite in den meisten Fällen ein himmelweiter Unterschied :-)

[Struppi]

also hier wieder ein paar Erweiterungen: Datei akt.

Warum müssen eigentlich #darstellung und #suche floaten?
Ich seh dafür keinen Grund.

Struppi.

[Efchen]

Warum müssen eigentlich #darstellung und #suche floaten?
Ich seh dafür keinen Grund.

Wie bringst Du sonst zwei Block-Elemente nebeneinander?

[Struppi]

Warum müssen eigentlich #darstellung und #suche floaten?
Ich seh dafür keinen Grund.

Wie bringst Du sonst zwei Block-Elemente nebeneinander?

Blockelemente?

#darstellung, #suche{
float:left;
width:10em;
height:3em;
font-size:1em;
margin:-1em 0 1em 1em;
background:#55EEEE;
display:inline; /* f&uuml;r den IE Einzugs-Bug */

Struppi.

[Efchen]

Warum müssen eigentlich #darstellung und #suche floaten?
Ich seh dafür keinen Grund.

Wie bringst Du sonst zwei Block-Elemente nebeneinander?

Blockelemente?
float:left;

Mit float, na also.

[Ingo Turski]

Hi,

Deine Seite ist ja nun schon ganz anders, aber trotzdem:

4. Such-Box mit float:clear runterholen und über margin -XX wieder hochsetzen und margin left 8 em einrücken. (das selbe Problem mit Border nur in der Vertikalen ... *ahhh*)

fast.
#suche {display:block;float:none;margin-left:8em;}
#inhalt {margin-top:0;}

Du vergißt, daß nur x-1 nebeneinander zu setzende Elemente gefloatet sein müssen.

freundliche Grüße
Ingo

[Efchen]

im FF sowie im IE gibt es hier ein kleine Kante bei der Box "Suche" und "Inhalt".
Waraum? Wie bekomme ich den Fehler weg?

Indem Du Deine Größen nochmal überdenkst.

#Suche ist 6em+1em+1em+2px vom linken Rand weg.
#inhalt ist aber nur 8em vom linken Rand weg.

Den Fehler hast Du selbst produziert.

[Efchen]

Moin,

beschäftige mich gerade (endlich) näher mit CSS-Layouts

Dann solltest Du Dich auch mit der Semantik beschäftigen. Für ein gutes CSS-Layout brauchst Du eine solide HTML-Basis. Dazu gehört auch eine richtige Semantik. Bei Dir gibts keine Semantik. Das liegt natürlich größtenteils an dem fehlenden Inhalt.

Der HEAD stellt wohl eine Überschrift dar. Also zeichne diesen auch als solche aus (<h1> ist wohl angebracht).

Deine Navigation ist semantisch nicht als solche erkennbar. Sie ist derzeit ein Text bestehend aus mehreren Worten, die in der Struktur mit dem Layout-Tag <br> getrennt werden. Ein Menü ist idR eine Liste. Also zeichne sie als solche aus (<ul>).

Deine <div>s für Darstellung und Suche sind doch eigentlich Überschriften für die Bereiche darunter? Also auszeichnen mit <h2> (beide, da sie gleichrangig sind).

Jetzt erst gibt es einen Grund, ein <div> zu benutzen. Nämlich um #darstellung und #nav zu einem Block zusammenzufassen, den Du dann mit float links floaten lassen kannst. #Suche und #inhalt gruppierst Du mit einem <div> zu einem Bereich, der nicht gefloatet wird, und einen festen margin-left bekommt. Dann ist auch Dein "Stufenproblem" weg.

Der Footer ist ein normaler Textabsatz, also solltest Du den auch als solchen auszeichnen (<p>), auch hier ist kein <div> nötig. Dein derzeitiger Code ist pure <div>-Suppe, die in der Semantik der missbräuchlichen Verwendung von Tabellen zu Layout-Zwecken in nichts nachsteht.

Gruß,
-Efchen