div Höhe wird ignoriert

**Quetschi** · 23.07.2007, 12:47

Re: div Höhe wird ignoriert

Original geschrieben von x16
...Es wird einfach ignoriert...

Wie äußert sich das genau?

**x16** · 23.07.2007, 13:11

Ach so, ja!

Die Höhe von 2 Pixeln wird ignoriert und stattdessen wird eine Mindesthöhe von ca. 12 pixeln nicht unterschritten. Das heißt alles über diese ca. 12px zeigt er an, aber alles drunter wird ignoriert und er wird nicht kleiner als 12.

Hab noch mal geguckt. Es sind exakt 19px, nicht 12.
Leider wird auch line-height: 2px; ignoriert.

**Quetschi** · 23.07.2007, 13:22

IE interpretiert 'height' eher wie 'min-height' - das heißt grob: Wenn der Inhalt es erfordert, wird der Div einfach entsprechend vergrößert.

font-size: 1px;

sollte helfen.

Allerdings ist mir schleierhaft, warum man ein Div 2px hoch macht und damit eine Orange Linie zu erzeugen. Evtl. missbrauchst du den Div-Tag da etwas? Stichwort: Div-Suppe?

**x16** · 23.07.2007, 13:32

Jaaaaaa jetzt gehts. Vielen Dank. Da muss man erst mal drauf komen.

Nein, das ist nur ein Beispiel. Mein Div beinhaltet in wirklichkeit ein Background Bild, keine Farben und ist 7px hoch. Hier ein Auszug:

Code:

<div class="s15 s30"></div>
<div class="s15 s30 bgim5 bottom"></div>
<div class="s13 bgim6 bottom"></div>
<div class="bgim7 center"><?php include($_SERVER['DOCUMENT_ROOT'].'news.html'); ?></div>
<div class="s15 bgim5 bottom"></div>
<div class="s16 bgim9 bottom"></div>
<div class="bgim7 center"><?php include($_SERVER['DOCUMENT_ROOT'].'forum/recent.php'); ?></div>
<div class="s15 bgim5 bottom"></div>

Alle s Klassen sind Höhen oder weiten, bgim's sind die Hintergrundbilder und bottom oder center spricht ja für sich.

Außerdem habe ich in diesem Beispiel den falschen Doctyp angegeben. Es heißt natürlich:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

**Quetschi** · 23.07.2007, 13:45

Original geschrieben von x16
Jaaaaaa jetzt gehts. Vielen Dank. Da muss man erst mal drauf komen.

Nein, das ist nur ein Beispiel. Mein Div beinhaltet in wirklichkeit ein Background Bild, keine Farben und ist 7px hoch. Hier ein Auszug:

Code:

<div class="s15 s30"></div> <div class="s15 s30 bgim5 bottom"></div> <div class="s13 bgim6 bottom"></div> <div class="bgim7 center"><?php include($_SERVER['DOCUMENT_ROOT'].'news.html'); ?></div> <div class="s15 bgim5 bottom"></div> <div class="s16 bgim9 bottom"></div> <div class="bgim7 center"><?php include($_SERVER['DOCUMENT_ROOT'].'forum/recent.php'); ?></div> <div class="s15 bgim5 bottom"></div>

Alle s Klassen sind Höhen oder weiten, bgim's sind die Hintergrundbilder und bottom oder center spricht ja für sich.

Dir ist schon klar, dass du mit deinem Code-Gerüst den Sinn und Zweck von Css-basierten Layouts praktisch völlig neutralisierst? Ist der erste Div praktisch dazu da, um Abstände herzustellen? Schon mal was von 'margin' & Co. gehört?

Und 1000 Css-Klassen zu schreiben um darin eine einzige Eigenschaft abzulegen (was offenbar der Fall ist) ist auch derbster Nonsens.

Also bitte nicht persönlich nehmen, aber das ist schon Hardcore was du da in den paar Zeilen so hinzauberst.

Befass dich für den Anfang mal mit www.css4you.de und wenn dir die ganzen Eigenschaften usw. mal geläufig sind, dann lies mal ein Buch von Eric Meyer damit du ein Gespür dafür bekommst wie man Css sinnvoll einsetzt.

Ist nur eine Empfehlung von mir - du kannst auch so wie du angefangen hast weitermachen - aber wenn du mal am Design umbauen willst, wirst schnell sehen, dass du dir selber ein Bein gestellt hast.

**x16** · 23.07.2007, 14:34

Nein, nein, ist schon ok. ich will deine meinung hören. Will ja auch dazu lernen. ich bin ehrlich, ein Buch werde ich wohl doch nicht lesen. Aber dafür mehr im Internet.

Noch mal zu meiner Verteidigung

:

Ich hatte vorher alles komplett ohne CSS gemacht. Jetzt habe ich genug Erfahrung, um alles auf CSS umzubauen und hatte jetzt auch alles geklappt. Von den S Klassen habe ich 30 Stück, ja klingt bisschen viel, aber die werden auch pro Seite min. 2-3 mal benutzt und dass von ca. 100 html dateien für den Anfang.

Soll ich diese Höhen und weiten Angaben dann lieber aus CSS löschen und in form von style="width: *px; height: *px;" in die html einbauen?

Das Div als margin/padding zu benutzen ist natürlich schwachsin! Hab ich auch schon korrigiert!

**Quetschi** · 23.07.2007, 14:50

Original geschrieben von x16
... Von den S Klassen habe ich 30 Stück, ja klingt bisschen viel, ....

Hast wohl gute Kontakte in unseren östlichen Nachbar-Staaten?

Ne, im Ernst - im Prinzip scheint es so, dass du die Probleme der alten Html-Varianten (html wurde quasi zur Formatierung benutzt) auf die neuen Techniken überträgst. Dein html-Beispiel und deine Vorgehensweise mit den "S Klassen" usw. lassen zumindest Vermutungen in die Richtung zu.

Diverse Eigenschaften von Css scheinst du ja schon zu kennen - knöpf dir vielleicht auch mal den "Wie fange ich an"-Teil von www.css4you.de vor - da wirst schonmal in die richtige Richtung gelenkt - als html-Referenz und Css-Referenz ist ansich www.selfhtml.org die erste Anlaufstelle - hab jetzt grad keine Ahnung ob es da ein gutes Tutorial gibt.

Ansonsten können die anderen User hier vielleicht noch Links für das eine oder andere gute Tutorial für Css-basierte Layouts posten.

**x16** · 23.07.2007, 14:58

OK vielen Dank.

**TobiaZ** · 23.07.2007, 15:05

(vor)gestriger "Tip of the day" vom CSS-Validator:

Geben Sie Ihren Klassen Namen, die den Inhalt der Elemente wiedergeben, nicht das Aussehen!

Beispiele gut:
headline, link (zugegeben, dafür brauch ich keine Klassen)

Beispiele schlecht:
thin-border, margin, mercedes-s

**tontechniker** · 23.07.2007, 21:03

Du kannst ja evlt. mal ein Onlinebeispiel posten, dann kann man mal zeigen wie man sowas einfacher und sinnvoller machen kann.

div Höhe wird ignoriert