• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Willkommen DIV, Adieu TABLE

D

Der_Johnny

Neues Mitglied
Ich bin jetzt hingegangen und habe das Layout der Webseite mit DIVs neugestaltet und mich von den Tables verabschiedet. Das entschlackt ganz schön den Code.

Das hat soweit auch gut geklappt, nur fällt mir im IE jetzt ungewollte Leerräume im linken Menü auf. Im Firefox besteht das Problem nicht:

| Gemeindezentrum Auerstraße - Mülheim

Hab ich irgendwo margins oder paddings übersehen?
 
Werbung:
Dass du vom Tabellenlayout weg willst, ist löblich, aber dann tausche nicht einen Fehler gegen einen Anderen.

Das Element div wird verwendet, um mehrere Elemente zu gruppieren, um sie dann gemeinsam zu Formatieren, nicht um damit Listen zu bauen. Es ist nicht das neue Wundermittel fürs Layout.

Eine Überschrift sollte auch als solche ausgezeichnet werden.

Das ist keine Überschirft, nur weil das div die ID header hat.
PHP: 
<div id="header">Ueberschrift</div>
Das ist eine Überschrift
PHP: 
<h1>Überschrift</h1>
Das ist keine Liste und auch kein Menü
PHP: 
<div id="navigation">
  <div class="submenu_item">&nbsp;</div>
  <div class="submenu_item">&nbsp;</div>
  <div class="submenu_item">&nbsp;</div>
  <div class="submenu_item">&nbsp;</div>
</div>
Das ist ein Menü
PHP: 
<ul id="navigation">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
Wenn du es korrekt auszeichnest, können auch Screenreader den Inhalt richtig interpretieren, die richten sich nämlich nach den verwendeten Tags und nicht nach deinen ID's.
 
Werbung:
_Thor_ schrieb:
Das ist keine Überschirft, nur weil das div die ID header hat.
PHP: 
<div id="header">Ueberschrift</div>
Das ist eine Überschrift
PHP: 
<h1>Überschrift</h1>
Zum Vergrößern anklicken....

Habe ich das an irgendeiner Stelle der Seite so gemacht? Ist mir jetzt garnicht bewusst?

_Thor_ schrieb:
Das ist keine Liste und auch kein Menü
PHP: 
<div id="navigation">
  <div class="submenu_item">&nbsp;</div>
  <div class="submenu_item">&nbsp;</div>
  <div class="submenu_item">&nbsp;</div>
  <div class="submenu_item">&nbsp;</div>
</div>
Das ist ein Menü
PHP: 
<ul id="navigation">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
Zum Vergrößern anklicken....

Das Submenü ist in der index.php unsichtbar. Der Gedanke dahinter ist z.B. unter der Rubrik "Über uns" ersichtlich. Dieses "Menü" kann nicht mit <ul> <li> abgebildet werden, oder irre ich mich da?

Das normale Menü auf der linken Seite werde ich jetzt mal in <ul> Manier nachbilden. Mal schauen, ob der IE damit besser kann...
 
Der_Johnny schrieb:
Habe ich das an irgendeiner Stelle der Seite so gemacht? Ist mir jetzt garnicht bewusst?
Zum Vergrößern anklicken....

Das war ein Beispiel, bei dir sieht es z.B. so aus
Code: 
<p class="Stil2"><b>Grundlage unseres Glaubens</b></p>
Das ist aber auch eine Überschrift und sollte wie folgt ausgezeichnet werden
PHP: 
<h2>Grundlage unseres Glaubens</h2>
Das Submenü ist in der index.php unsichtbar. Der Gedanke dahinter ist z.B. unter der Rubrik "Über uns" ersichtlich. Dieses "Menü" kann nicht mit <ul> <li> abgebildet werden, oder irre ich mich da?
Zum Vergrößern anklicken....
Ja, da irrst du.
Warum sollte es nicht als Liste ausgezeichnet werden können?
 
_Thor_ schrieb:
Das war ein Beispiel, bei dir sieht es z.B. so aus
Code: 
<p class="Stil2"><b>Grundlage unseres Glaubens</b></p>
Das ist aber auch eine Überschrift und sollte wie folgt ausgezeichnet werden
PHP: 
<h2>Grundlage unseres Glaubens</h2>
Ja, da irrst du.
Warum sollte es nicht als Liste ausgezeichnet werden können?
Zum Vergrößern anklicken....

Ok, Du hast Recht. Das sind noch Relikte aus damaliger Zeit (header). Das werde ich kosmetisch noch verschönern...

Das submenu sollte aber horizontal unter dem Banner auftauchen, daher frage ich mich, ob man das überhaupt mit <ul> abbilden kann?!

Ich hab übrigens jetzt mal das Hauptmenü mit <ul> abgebildet und jetzt sind überall (Firefox, Chrome, IE) die komischen Abstände zwischen den Menüpunkten, obwohl margin und padding = 0 ist. Strange...

Siehe hier:

Vision | Gemeindezentrum Auerstraße - Mülheim
 
Werbung:
Der_Johnny schrieb:
Das submenu sollte aber horizontal unter dem Banner auftauchen, daher frage ich mich, ob man das überhaupt mit <ul> abbilden kann?!
Zum Vergrößern anklicken....

Ja natürlich geht das, float: left bringt die Listenelemente nebeneinander.

Ich hab übrigens jetzt mal das Hauptmenü mit <ul> abgebildet und jetzt sind überall (Firefox, Chrome, IE) die komischen Abstände zwischen den Menüpunkten, obwohl margin und padding = 0 ist. Strange...
Zum Vergrößern anklicken....
Dann zerschneide das Bild doch nicht in so viele Teile. Welchen Sinn haben die 3 px hohen Grafiken zwischen den Einträgen? Warum gibt es die extra und sind nicht Teil der eigentlichen Hintergrundbilder?
 
_Thor_ schrieb:
Ja natürlich geht das, float: left bringt die Listenelemente nebeneinander.
Zum Vergrößern anklicken....

Nagut, so geht es natürlich auch. Warum ich nicht darauf gekommen bin... ;)

_Thor_ schrieb:
Dann zerschneide das Bild doch nicht in so viele Teile. Welchen Sinn haben die 3 px hohen Grafiken zwischen den Einträgen? Warum gibt es die extra und sind nicht Teil der eigentlichen Hintergrundbilder?
Zum Vergrößern anklicken....

Das ist eine gute Frage, warum ich diese 3px Schnipsel dazwischen gequetscht habe. Ich habe diese jetzt weggelassen, bzw. das Menü mal neu zerschnibbelt. Es sieht schon besser aus, aber zwischen der ersten Grafik und der zweiten gibt es immer noch einen Abstand von 2 Pixeln...

Zu sehen hier:

Vision | Gemeindezentrum Auerstraße - Mülheim
 
Werbung:
prm schrieb:
Versuch mal das:


Erklärung: Lücke am unteren Bildrand

Dennoch würde es m.E. Sinn machen, die gesamte Grafik ul als Hintergrund zuzuweisen.
Zum Vergrößern anklicken....

Das hat zumindest den gewünschten Effekt im Firefox und Chrome. Aber im IE ist die Lücke immer noch da.

Die gesamte Grafik als Hintergrund zu verwenden habe ich mir auch schon überlegt. Aber dann müsste ich mir überlegen, wie ich die Hover Effekte hinbekomme. Das ist mir momentan noch nicht ganz klar...

Hast Du eine Idee?
 
Werbung:
Der_Johnny schrieb:
Das submenu sollte aber horizontal unter dem Banner auftauchen, daher frage ich mich, ob man das überhaupt mit <ul> abbilden kann?!
Zum Vergrößern anklicken....
Der Witz an der richtigen Arbeitsweise mit CSS-Layout ist, dass man HTML (Inhalt) strikt von CSS (Layout/Design) trennt. Nicht nur, dass man CSS nur in ein externes Stylesheet schreibt, man benennt Klassen und IDs im HTML-Code auch mit semantischer Bedeutung, nicht mit layouttechnischer.
UND man muss auch diese Trennung im Kopf haben:

Da HTML ja nur für die logische Auszeichnung des Inhalts ist (weswegen ja auch div-Layout und Tabellen-Layout beides gleichermaßen Quatsch ist), ist es völlig egal, wie sich eine Liste ohne weitere Formatierung im Browser darstellt. Bei HTML geht es gar nicht um die Darstellung. Deswegen ist Dein Satz oben eigentlich auch Falsch, weil man eine Liste nicht abbildet. Man zeichnet nur aus. Wie das aussieht, ist beim Schreiben des HTML-Codes Wurscht. Das passiert erst im nächsten Schritt, nachdem der Inhalt semantisch korrekt ausgezeichnet ist, mit CSS.

Immer schön "Trennung von Inhalt und Layout" praktizieren, dann wird das ganze Thema um einiges einfacher!
 
Ja, ich bin fleißig dabei, mir diese semantische und layouttechnische Trennung vor Augen zu halten. Langsam komme ich dahin, bin aber noch in den Anfängen...
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben