Verdammte DIVs

Computer: Software & Programmierung HTML & CSS
#1

Hallo,

ich bin grad dabei, meine Seite von den veralteten Tabellen auf DIVs umzustellen - aber bald raste ich völlig aus.

Vielleicht können die Könner sich mal diese beiden Seiten anschaun:

http://www.jezirah.de/katzen01
http://www.jezirah.de/teneriffa00

Beide beziehen sich auf das gleiche CSS, trotzdem funzt die untere Navigation nicht. Bei der ersten Seite sitzt die Navigation in einem DIV brav, wo sie soll, nämlich untendrunter mit einem kleinen Abstand zum Text und zentriert. Beim zweiten sitzt sie im Text drin. Warum???

Ich habs mit floating probiert, ich habs mit absoluten und relativen Positionen probiert - jetzt weiß ich nicht mehr weiter …

Hier der CSS-Part für die DIVs - Box1 umgibt alles und soll zentriert im Bildschirm sitzen, der Content sitzt in Box5, die in Box1 sitzt, die Navi (Box6) sitzt in Box5 - ich habe auch versucht, die Navi in Box1 zu setzen, dann rutscht sie aber trotz aller Bemühungen ganz nach oben …:

#box1 {border:0px; width:900px; background-color:#FFECBF; padding:10px; position:relative;}

#box2 {border:0px; width:768px; text-align:center; top:20px; right:10px;
margin-left:0px; margin-right:0px; margin-top:0px; margin-bottom:0px; position:absolute;}

#box3 {border:0px; width:130px; text-align:left; top:115px; left:0;
margin-left:10px; margin-right:0px; position:absolute;}

#box4 {border:0px; width:768px; text-align:center; top:115px; right:0;
margin-left:0px; margin-right:10px; position:absolute;}

#box5 {border:0px; width:768px; text-align:left; top:115px; right:0;
margin-left:0px; margin-right:10px; position:absolute;}

#box6 {border:0px; width:768px; text-align:center; float:right;
margin-left:0px; margin-right:0px; margin-top:10px; margin-bottom:20px;}

Dazu kommt noch, dass ich Box1 keine eigene Hintergrundfarbe geben kann (sprich, damit sich die eigentliche Seite vom Bilschirm abhebt), weil das entweder nur als Strich ganz oben angezeigt wird oder, bei height:100% nur in Höhe des Bildschirms - muss man scrollen, läuft der Text unten aus Box1 raus, sprich, die Box passt sich nicht dynamisch an. Ich habs schon mit clearfix u.ä. probiert, funzt alles nicht.

Hilfe?

Gruß
Cess

#2

Uah,

der erste Teil ist gelöst, ich hatte im einen Text anstatt „id“ „class“ angegeben … Asche auf mein Haupt.

Das Problem hier bleibt aber bestehen:

Dazu kommt noch, dass ich Box1 keine eigene Hintergrundfarbe
geben kann (sprich, damit sich die eigentliche Seite vom
Bilschirm abhebt), weil das entweder nur als Strich ganz oben
angezeigt wird oder, bei height:100% nur in Höhe des
Bildschirms - muss man scrollen, läuft der Text unten aus Box1
raus, sprich, die Box passt sich nicht dynamisch an. Ich habs
schon mit clearfix u.ä. probiert, funzt alles nicht.

Gruß
Cess

#3

Hallo,

Das Problem hier bleibt aber bestehen:

Dazu kommt noch, dass ich Box1 keine eigene Hintergrundfarbe
geben kann (sprich, damit sich die eigentliche Seite vom
Bilschirm abhebt), weil das entweder nur als Strich ganz oben
angezeigt wird oder, bei height:100% nur in Höhe des
Bildschirms

Das hört sich nach kaputtem HTML an. Der HTML-Validator zeigt an, dass die beiden Seiten, die du oben verlinkt hast, beide ein zu viel haben. Das kann dazu führen, dass bestimmte Eigenschaften nicht funktionieren. Vielleicht täusche ich mich auch…

Also erstmal das HTML validieren, dann ums CSS kümmern. Ich selbst habe auch viel Zeit mit der Fehlersuche im CSS verbracht, obwohl das nicht das Problem war.
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.j…

Noch ein kleiner Tipp: Beim erstellen erstmal mit Firefox oder Opera (oder Safari oder Konqueror) arbeiten, also mit Browsern, die mit CSS ziemlich gut umgehen können. Danach kannst du immer noch IE-Hacks einbauen.

HTH,
Moritz

#4

Mh,

Das hört sich nach kaputtem HTML an. Der HTML-Validator zeigt
an, dass die beiden Seiten, die du oben verlinkt hast, beide
ein zu viel haben. Das kann dazu führen, dass
bestimmte Eigenschaften nicht funktionieren. Vielleicht
täusche ich mich auch…

ich kann kein zu-viel-div finden, aber ich guck mir das nochmal in Ruhe an.

Noch ein kleiner Tipp: Beim erstellen erstmal mit Firefox oder
Opera (oder Safari oder Konqueror) arbeiten, also mit
Browsern, die mit CSS ziemlich gut umgehen können. Danach
kannst du immer noch IE-Hacks einbauen.

Ich arbeite ohnehin in Firefox, IE nutz ich nur am Ende um zu gucken, dass es da auch läuft. :smile:

Gruß
Cess

#5

Hallo Cess!

„Cess“ schrieb:

ich bin grad dabei, meine Seite von den veralteten Tabellen
auf DIVs umzustellen - aber bald raste ich völlig aus.

Immer schön ruhig bleiben :wink:

Vielleicht können die Könner sich mal diese beiden Seiten
anschaun:

http://www.jezirah.de/katzen01
http://www.jezirah.de/teneriffa00

Ich zähle mich zwar nicht zu diesem Kreis, habe aber trotzem ein paar
Anregungen.

Alle Browser werden durch die von Dir angegebene Dokumenttyp-Deklaration
in den Quirks Mode versetzt:
http://jendryschik.de/wsdev/einfuehrung/css/browser-…
Browser-Kompatibilität

Besser:

statt:

Validiere Deine Seiten und beseitige alle Fehler und Warnungen:
http://jigsaw.w3.org/css-validator/validator?uri=htt…
float center ist kein float-Wert : center

body {background-color:#FFECBF;
statt:
body {background-color:#FFECBF; ;

gehört in die Stylesheet-Datei.

sollte eigentlich per CSS formatiert werden.

Punkte(pt) sind als Maßeinheit für Bildschirmdarstellungen nicht geeignet:
http://dciwam.de/faq/gute-websites/richtige-schriftg…
Die „richtige“ Schriftgrösse

Dazu kommt noch, dass ich Box1 keine eigene Hintergrundfarbe
geben kann (sprich, damit sich die eigentliche Seite vom
Bilschirm abhebt), weil das entweder nur als Strich ganz oben
angezeigt wird oder, bei height:100% nur in Höhe des
Bildschirms - muss man scrollen, läuft der Text unten aus Box1
raus, sprich, die Box passt sich nicht dynamisch an. Ich habs
schon mit clearfix u.ä. probiert, funzt alles nicht.

Teste mal:
#box1 {border: 1px solid black; width:900px; background-color:#CCC; padding:10px; position:relative; height:100%; overflow: auto; background-attachment:fixed;}

Gruss Oliver

#6

Hallo,

Das hört sich nach kaputtem HTML an. Der HTML-Validator zeigt
an, dass die beiden Seiten, die du oben verlinkt hast, beide
ein zu viel haben. Das kann dazu führen, dass
bestimmte Eigenschaften nicht funktionieren. Vielleicht
täusche ich mich auch…

ich kann kein zu-viel-div finden, aber ich guck mir das
nochmal in Ruhe an.

Ich inzwischen auch nicht mehr, zum Zeitpunkt des schreibens gabs noch einen :wink:

Grüße,
Moritz

#7

Hallo Cess!

Interessant hierzu auch:
http://frixon.de/tuts/dheight.html
Eine dynamische Höhe von 100%

http://www.xs4all.nl/~ppk/css2tests/100percheight.html
100% height

http://www.carsten-protsch.de/zwischennetz/doctype/p…
Browser ignorieren Prozentangaben für height

Gruss Oliver

#8

Klar,

Ich inzwischen auch nicht mehr, zum Zeitpunkt des schreibens
gabs noch einen :wink:

ich habs auch gefunden und gelöscht. :smile:

Gruß
Cess

#9

Hey,

gehört in die Stylesheet-Datei.
sollte eigentlich per CSS formatiert
werden.

ja, das sind noch die Altlasten - sind auch noch diverse Tabellen drin, ich mach das so nach und nach, wenn ich mal Zeit habe.

Punkte(pt) sind als Maßeinheit für Bildschirmdarstellungen
nicht geeignet:
http://dciwam.de/faq/gute-websites/richtige-schriftg…
Die „richtige“ Schriftgrösse

Dito.

Teste mal:
#box1 {border: 1px solid black; width:900px;
background-color:#CCC; padding:10px; position:relative;
height:100%; overflow: auto; background-attachment:fixed;}

Vielen lieben Dank - ich werds die Tage mal ausprobieren (jetzt ist das Wochenende leider schon wieder rum, mal gucken, wann ich dazu komme). Ich werde aber auf jeden Fall berichten, ob es funktioniert hat!

Grüße
Cess

#10

Hallo Cess,

Dazu kommt noch, dass ich Box1 keine eigene Hintergrundfarbe
geben kann (sprich, damit sich die eigentliche Seite vom
Bilschirm abhebt), weil das entweder nur als Strich ganz oben
angezeigt wird oder, bei height:100% nur in Höhe des
Bildschirms - muss man scrollen, läuft der Text unten aus Box1
raus, sprich, die Box passt sich nicht dynamisch an. Ich habs
schon mit clearfix u.ä. probiert, funzt alles nicht.

clear funktioniert nur bei float-Elementen. Das einzige was bei Dir floatet ist das untere Menü, und das eigentlich unnötigerweise. Du hast alle anderen Boxen in #box1 als position:absolute definiert. Das heißt, sie sind losgelöst vom Dokumentfluss und beeinflussen deshalb nicht die Höhe des Elements #box1, welches sie umgibt.

Die fixe breite ist von #box1 ist schon mal ein guter Anfang. Arbeite mit den Elementen innerhalb von #box1 (etwas aussagekräftigere ids wären nicht von Nachteil :wink:) nun mit float, z.B. das Menü lass links floaten, die anderen Boxen ebenso. Gib den floatenden Boxen alle eine fixe Breite - Du musst dabei darauf achten, dass die Breite der Elemente nicht die 900px von #box1 überschreitet, weil der Browser die Elemente sonst umbricht. Immer dann, wenn Du willst, dass die folgenden Elemente nur unterhalb der vorangehenden floatenden Elemente angezeigt werden, füge ein Element ein, dass cleart. Um es leichter zu haben, gib den boxen die Eigenschaft border:1px solid; - dann siehst Du auf Anhieb, was wo landet und wieviel Platz die Elemente einnehmen. Beachte, dass die Breite eines Elements sich aus dem margin links+rechts, dem padding links+rechts und der Breite des Borders links+rechts zusammensetzt. Dann kommst Du sicher ziemlich schnell ans Ziel. Schließe dann unten mit einem clearenden Element ab, und die gesamte #box1 wird den Inhalt umgeben.

Viel Erfolg,
Rudy

1 Like
#11

Hi Rudy,

ich hatte zunächst alles auf float anstatt auf absoluten/relativen Positionen. Die Positionierung war ein weiterer Versuch. Ich werd aber in einer ruhigen Minute eure Antworten hier nach und nach durchprobieren. :smile:

Vielen Dank auch dir für die Antwort
Cess

#12

Genial!

one.

http://jigsaw.w3.org/css-validator/validator?uri=htt…
float center ist kein float-Wert : center

Is weg.

body {background-color:#FFECBF;
statt:
body {background-color:#FFECBF; ;

Ebenso.

gehört in die Stylesheet-Datei.

Hier gibts ein Problem - ich bekomm es nicht so ins Stylesheet, dass Box1 mittig sitzt. Klappt nur auf die Art - wenn du ne Idee hast …

sollte eigentlich per CSS formatiert
werden.

Habe ich versucht - funktioniert irgendwie auch nicht. Ich müsste das dann wohl im entsprechenden div im CSS formatieren, aber ich will nicht jeden Text, der in Box5 sitzt, im Blocksatz haten.

Punkte(pt) sind als Maßeinheit für Bildschirmdarstellungen
nicht geeignet:
http://dciwam.de/faq/gute-websites/richtige-schriftg…
Die „richtige“ Schriftgrösse

Habe ich auf em geändert.

#box1 {border: 1px solid black; width:900px;
background-color:#CCC; padding:10px; position:relative;
height:100%; overflow: auto; background-attachment:fixed;}

Das funktioniert! Damit muss ich aber noch rumspielen, irgendwie gefällt mir was noch nicht. Aber genial, dass es überhaupt geht! DANKE!

Auch ansonsten habe ich versucht, Formatierungen weigehendst ins CSS zu schreiben. Bei justify und center hats nicht hingehauen, bei vielem anderen schon.

Was ich nicht nachvollziehen kann: Muss ich einem Link eine Hintergrundfarbe definieren? Der Validator beschwert sich, es wäre keine Hintergrundfarbe für die Links definiert …

Gruß
Cess

#13

Hallo Cess!

„Cess“ schrieb:

Genial!

Done.

Hm.
Davon sehe ich nichts. Hast Du:

abändert in:

http://jigsaw.w3.org/css-validator/validator?uri=htt…
float center ist kein float-Wert : center

Is weg.

Jetzt sagt der CSS-Validator:
Zeile: 46 Kontext : #text04
Die Eigenschaft valign existiert nicht : middle
Zeile: 58 Kontext : dl.ImgCenter
Die Eigenschaft align existiert nicht : center

Außerdem sagt mir meine Fehler-Console im Firefox:
Warnung: Das Stylesheet http://www.jezirah.de/stylesheet wurde geladen,
obwohl sein MIME-Typ, „text/plain“, nicht „text/css“ ist.

Das Stylesheet muß den MIME-Typ „text/css“ erhalten.

Füge also in den Header, vor:

Folgendes ein:

Die Zeichenkodierung im HTTP-Header (iso-8859-15) weicht von der
Zeichenkodierung im Meta-Tag (iso-8859-1) ab:
http://www.validome.org/validate/?uri=http://www.jez…

body {background-color:#FFECBF;
statt:
body {background-color:#FFECBF; ;

Ebenso.

OK.

gehört in die Stylesheet-Datei.

Hier gibts ein Problem - ich bekomm es nicht so ins
Stylesheet, dass Box1 mittig sitzt. Klappt nur auf die Art -
wenn du ne Idee hast …

Definiere im Stylesheet::
body { margin:0; padding:0; }

siehe auch:
http://www.thestyleworks.de/tut-art/centerblock.shtml

Schau Dir Deine Seiten mal an, wenn die div-Boxen mit
{ border: 1px solid black; … } definiert werden.
Das Layout schaut dann nicht so gut aus. :wink:

„Rudy“ hat schon nicht Unrecht. Du solltest eine umgebende
Divbox erstellen, und dann mit float/clear arbeiten.

Einige Templates dazu findest Du z.B. unter:
http://www.intensivstation.ch/templates/

Du könntest dabei mit „XHTML“ arbeiten:
http://jendryschik.de/wsdev/einfuehrung/xhtml/

sollte eigentlich per CSS formatiert
werden.

Habe ich versucht - funktioniert irgendwie auch nicht. Ich
müsste das dann wohl im entsprechenden div im CSS formatieren,
aber ich will nicht jeden Text, der in Box5 sitzt, im
Blocksatz haten.

Für „justify“ im Stylesheet definieren:
p { text-align:center; }
p.justify { text-align:justify; }
In die HTML-Datei:
…

Punkte(pt) sind als Maßeinheit für Bildschirmdarstellungen
nicht geeignet:
http://dciwam.de/faq/gute-websites/richtige-schriftg…
Die „richtige“ Schriftgrösse

Habe ich auf em geändert.

OK.

#box1 {border: 1px solid black; width:900px;
background-color:#CCC; padding:10px; position:relative;
height:100%; overflow: auto; background-attachment:fixed;}

Das funktioniert! Damit muss ich aber noch rumspielen,
irgendwie gefällt mir was noch nicht. Aber genial, dass es
überhaupt geht! DANKE!

Bitte, gern geschehen.
Ich empfinde dies jedoch nicht als optimale Lösung.

Was ich nicht nachvollziehen kann: Muss ich einem Link eine
Hintergrundfarbe definieren? Der Validator beschwert sich, es
wäre keine Hintergrundfarbe für die Links definiert …

Das W3C oder anderer Institutionen _empfehlen_ ausnahmslos das
explizite gemeinsame Angeben von Vorder- und Hintergrundfarbe:
http://www.websitedev.de/css/validator-faq
http://www.w3.org/TR/WCAG10-CSS-TECHS/#style-colors
http://www.css.nu/articles/CSS-colours.html

Hier wartet noch Arbeit auf Dich :wink:
http://www.htmlhelp.org/cgi-bin/validate.cgi?url=htt…

Gruss Oliver

#14

Hallo Cess!

Es muss heißen:

Sonst ist der Mozilla weiter im Quirks Mode.

Oder aber:

:wink:

Gruss Oliver

#15

So,

http://www.htmlhelp.org/cgi-bin/validate.cgi?url=htt…

hab alles getan und gemacht - was jetzt noch als „Fehler“ angezeigt wird, ist dtml, das ich behalten werde! :smile:

Gruß
Cess