<div style="height:100%"> - Valide?

[Benjamin Kühn]

Hi,

ich möchte es endlich einmal schaffen, dass meine Homepage valide ist. Das Redesign und die komplette Umstrukturierung halte ich für den richtigen Anlass. Momentan benutze ich dort eine Tabelle, die eine Höhe von 100% aufweist. Dies bemängelt der Validator natürlich. Wie kann ich das sonst lösen? Kann ich die Höhe eines <div> angeben?

Danke und viele Grüße aus Wolfsburg
Ben

[Orlando]

Hi Benjamin,

ich möchte es endlich einmal schaffen, dass meine Homepage valide ist.

das ist der erste Schritt. Der zweite sollte nun sein, das Markup semantisch wertvoll zu gestalten. Das heißt, auf Layout-Tabellen generell zu verzichten.

Momentan benutze ich dort eine Tabelle, die eine Höhe von 100% aufweist. Dies bemängelt der Validator natürlich. Wie kann ich das sonst lösen? Kann ich die Höhe eines <div> angeben?

Nur weil es das Attribut "height" für Tabellen nicht gibt, heißt das nicht, dass man nicht auch ihnen height:100% per CSS zuweisen könnte. Allerdings führt das oft zu Problemen, da sich diese Angabe auf das Elternelement bezieht.

Versuche, die Tabelle zu ersetzen. Eine Höhenangabe ist selten notwendig, da die Elemente ohnehin nur so hoch sind, wie ihr Inhalt es erfordert.

Grüße,
 Roland

[Benjamin Kühn]

Hi Roland,

das ist der erste Schritt. Der zweite sollte nun sein, das Markup semantisch wertvoll zu gestalten. Das heißt, auf Layout-Tabellen generell zu verzichten.

Das werde ich versuchen. Sind dann div's die richtige Alternative? Habe mich damit noch nicht beschäftigt, weil ich eigentlich immer Tabellen genutzt habe...

Versuche, die Tabelle zu ersetzen. Eine Höhenangabe ist selten notwendig, da die Elemente ohnehin nur so hoch sind, wie ihr Inhalt es erfordert.

Also notwendig ist die Höhe nicht unbedingt, aber es würde einfach besser aussehen. Ich möchte, dass auf jeder Auflösung die komplette Höhe genutzt wird, weil das einfach zum Screendesign dazu gehört. Darum möchte ich auf die Höhenangabe keinesfalls verzichten. :-)

Danke und Gruß
Ben

[chlori]

Hi

das ist der erste Schritt. Der zweite sollte nun sein,
das Markup semantisch wertvoll zu gestalten. Das heißt,
auf Layout-Tabellen generell zu verzichten.

Das werde ich versuchen. Sind dann div's die richtige
Alternative?

Nein, CSS ist die Alternative. Du wirst vermutlich das eine
oder andere Div brauchen, aber verwende nur Divs wo sie
nötig sind.

Du kannst zB ein Bild direkt positionieren ohne es in ein
Div zu packen.

<img style="position:relative; ..." [...]>

(Vermutlich aber dann im externen Stylesheet)

Gruss
chlori

[Benjamin Kühn]

Hi Chlori,

Nein, CSS ist die Alternative. Du wirst vermutlich das eine
oder andere Div brauchen, aber verwende nur Divs wo sie
nötig sind.

So zum Beispiel für Texte und die Navigation oder?

Du kannst zB ein Bild direkt positionieren ohne es in ein
Div zu packen.

<img style="position:relative; ..." [...]>

Hm, diese Variante habe ich gar nicht bedacht... Dann werde ich das so probieren. :-)

(Vermutlich aber dann im externen Stylesheet)

Wäre wohl die ordentlichste Variante oder? :-)

Danke und liebe Grüße
Ben

[chlori]

Hi

Nein, CSS ist die Alternative. Du wirst vermutlich das eine
oder andere Div brauchen, aber verwende nur Divs wo sie
nötig sind.

So zum Beispiel für Texte

<p style="...

und die Navigation oder?

<ul style="...

(Vermutlich aber dann im externen Stylesheet)

Wäre wohl die ordentlichste Variante oder? :-)

Ja. Nur für ein Forum eignet sich das weniger gut... ;)

Gruss
chlori

[Benjamin Kühn]

Hi Chlori,

danke für die Hilfestellung. :-)

Das Attribut position ist doch aber Element von CSS 2.0 oder? Kann ich das trotzdem verwenden?

(Vermutlich aber dann im externen Stylesheet)

Wäre wohl die ordentlichste Variante oder? :-)

Ja. Nur für ein Forum eignet sich das weniger gut... ;)

Nun gut, das mag wohl sein ;-)

Gruß
Ben

[chlori]

Hi

Das Attribut position ist doch aber Element von CSS 2.0 oder?

Die CSS 2.0-Spezifikation kam glaube ich 1998 raus...

Kann ich das trotzdem verwenden?

Ja, verwenden schon. Aber zB fixed wird nicht von allen
unterstützt (IE).

Tipp: Lies auch mal über float nach!

Gruss
chlori

[Benjamin Kühn]

Hi Chlori,

Tipp: Lies auch mal über float nach!

Habe ich gerade getan. Bislang habe ich ja keine Elemente, die umflossen werden, aber ist sicherlich mal sehr nützlich. Danke. :-)

Sag mal, ich glaub ich bin gerade zu blöd. Wie zentrier ich denn nun z.B. meine Logo-Grafik? Ich habe ihr die Klasse "header" zugewiesen. Dort steht dann in der CSS-Datei:

.header { position:relative; top:0px;  }

Wie stelle ich jetzt ein, dass die Grafik immer zentriert sein soll? Bin irgendwie ratlos...

Danke und Gruß
Ben

[chlori]

Hi

Wie zentrier ich denn nun z.B. meine Logo-Grafik?

<body style="text-align:center;">
<img [...]>
</body>

Mit <body> meine ich hier das übergeordnete Element.
Kann aber gut <body> sein bei einem Logo.

Gruss
chlori

[Benjamin Kühn]

Hi Chlori,

Wie zentrier ich denn nun z.B. meine Logo-Grafik?

<body style="text-align:center;">
<img [...]>
</body>

Danke... Hätt ich ja eigentlich auch mal selbst drauf kommen können... :-/ Kann mal einer das Brett vor meinem Kopf entfernen bitte? :-)

Gruß
Ben

[dbenzhuser]

N'Obend

<img style="position:relative; ..." [...]>

Man beachte, dass img ein Inline-Element ist, und daher in den Strict-Doctypes nicht direkt im Body stehen darf. Ergo muss irgendwas drumrum, ein div ist, gerade wenn anschließend positioniert wird, die Lösung mit den wenigsten Komplikationen.

Tschö,
dbenzhuser

[Cheatah]

Hi,

Sind dann div's die richtige Alternative?

stelle Dir die Frage, was der Inhalt eines Elements für einen Zweck erfüllt. Ist es beispielsweise ein Absatz im Fließtext, heißt das Element <p>. Geht es um eine Liste von Links - typischerweise z.B. in der Navigation - ist es <ul><li><a>. Geht es um tabellarische Daten, hast Du <table> mit all seinen Kindern. <div> dient dazu, _unsemantisch_ zu gruppieren (wobei der Begriff auch solche Semantik beinhaltet, die in HTML nicht vorgesehen ist; so interessiert sich HTML beispielsweise nicht dafür, ob Du eine Gruppe von Links und Texten als "Footer" bezeichnen möchtest, ergo ist ein <div id="footer"> sinnvoll).

Ich möchte, dass auf jeder Auflösung

Bitte benutze diesen Begriff niemals wieder. Im </archiv/> erfährst Du, warum er für Dich absolut uninteressant ist.

Cheatah

[Benjamin Kühn]

Hi Cheatah,

stelle Dir die Frage, was der Inhalt eines Elements für einen Zweck erfüllt. Ist es beispielsweise ein Absatz im Fließtext, heißt das Element <p>. Geht es um eine Liste von Links - typischerweise z.B. in der Navigation - ist es <ul><li><a>. Geht es um tabellarische Daten, hast Du <table> mit all seinen Kindern. <div> dient dazu, _unsemantisch_ zu gruppieren (wobei der Begriff auch solche Semantik beinhaltet, die in HTML nicht vorgesehen ist; so interessiert sich HTML beispielsweise nicht dafür, ob Du eine Gruppe von Links und Texten als "Footer" bezeichnen möchtest, ergo ist ein <div id="footer"> sinnvoll).

Damit hast du wohl recht. Bislang hab ich ziemlich sinnlos die Elemente eingesetzt. Werde ab jetzt mal etwas "intelligenter" basteln. Danke für dein Posting! :-)

Ich möchte, dass auf jeder Auflösung

Bitte benutze diesen Begriff niemals wieder. Im </archiv/> erfährst Du, warum er für Dich absolut uninteressant ist.

Geht klar, Chef. ;-)

Grüße
Ben

[Jeena Paradies]

Hallo,

Sind dann div's die richtige Alternative?

stelle Dir die Frage, was der Inhalt eines Elements für einen Zweck erfüllt. Ist es beispielsweise ein Absatz im Fließtext, heißt das Element <p>. Geht es um eine Liste von Links - typischerweise z.B. in der Navigation - ist es <ul><li><a>. Geht es um tabellarische Daten, hast Du <table> mit all seinen Kindern. <div> dient dazu, _unsemantisch_ zu gruppieren (wobei der Begriff auch solche Semantik beinhaltet, die in HTML nicht vorgesehen ist; so interessiert sich HTML beispielsweise nicht dafür, ob Du eine Gruppe von Links und Texten als "Footer" bezeichnen möchtest, ergo ist ein <div id="footer"> sinnvoll).

Ich finde genau solche Postings sollten hier viel öfter erscheinen. Ich habe oft das Gefühl dass die Leute verschiedene Sachen benutzen ohne zu wissen wozu die überhaupt gut sind, bzw. was sie aussagen. Wenn mann sich das nämlich verinnerlicht dann tut man sich mit dem auszeichnen und anschließendem Formatieren per CSS 100fach leichter.

Grüße
Jeena Paradies

[Benjamin Kühn]

Hi,

hab schon wieder ein Problem. Ich habe jetzt meine obere Navigation (der dicke grüne Balken) als <div> eingefügt und zentriert. Im IE klappt das auch, aber im Netscape wird der Balken am linken Rand angezeigt. Warum?

http://www.bens-homepage.de/neu/index2.php

Die Klasse für die <div> heißt menu_oben und die sieht so aus:

.menu_oben         {  width: 796px;
  height: 15px;
                     background-color: #3B4F3C;
                     color: #FFFFFF;
  padding-right: 10px;
  font-size: 7.5pt;
  position: relative;
  top: -2px;
  align: center; }

Hilfe! :-)

Danke und viele Grüße
Ben

[dbenzhuser]

N'Obend

.menu_oben {
  width: 796px;
  height: 15px;
  background-color: #3B4F3C;
  color: #FFFFFF;
  padding-right: 10px;
  font-size: 7.5pt;
  position: relative;
  top: -2px;
  align: center;  <-- wenn dann "text-align:center;"
}

Außerdem, das ist hier das eigentliche Problem, werden Block-Elemente (div ist eins) über dem margin positioniert.
Schreibe zusätzlich rein:

margin-left:auto;
margin-right:auto;

Dat sollte klappen. (IE kennts nicht, für den muss daher wie bisher das Elternelement text-align:center bekommen)

Tschö,
dbenzhuser

[Benjamin Kühn]

Hi,

Schreibe zusätzlich rein:

margin-left:auto;
margin-right:auto;

Stimmt, das klappt. Danke! :-) Das einzige Problem ist jetzt noch, dass dort die (oder der oder das?) <div> irgendwie zu breit ist... *seufz* Woran liegt denn das nun wieder?

Danke und Gruß
Ben