Problem mit neuem Layout

[MKay]

Hi,

bin gerade dabei mein Tabellen-Layout in eins mit Div's umzuwandeln.
Doch hab ich schon ein Problem:
http://otrkeyfinder.com/test/div.html

Im FireFox und Opera stellt ers "normal" dar, im InternetExplorer jedoch baut er vor der letzten Grafik eine Lücke ein.

Weiss jemand warum?

mfg
MKay

[Mathias Brodala]

Hallo MKay.

bin gerade dabei mein Tabellen-Layout in eins mit Div's umzuwandeln.

OK, dann höre bitte gleich wieder damit auf. Hierbei kann nur Müll herauskommen und im schlimmsten Fall tischst du eine Div–Suppe auf.

Verwende bitte _sinnvolles_ HTML; zur Verfügung stehende Elemente werden in http://de.selfhtml.org/html/allgemein/index.htm@title=SELFHTML beschrieben.

Doch hab ich schon ein Problem:
http://otrkeyfinder.com/test/div.html

Zwar noch eine Div–Tütensuppe aber der Anfang für einen großen Eintopf wurde gemacht.

Im FireFox und Opera stellt ers "normal" dar, im InternetExplorer jedoch baut er vor der letzten Grafik eine Lücke ein.

Wer ist „er“?

Weiss jemand warum?

Du lässt alles links floaten bis auf die allerletzte Grafik. Nur diese befindet sich also noch im Dokumentenfluss. Ändere dies.

Und überhaupt: warum bindest du die Grafiken nicht als http://de.selfhtml.org/css/eigenschaften/hintergrund.htm#background_image@title=Hintergrundgrafiken ein? Sie vermitteln keinerlei Inhalt, gehören daher nicht ins HTML.

Einen schönen Freitag noch.

Gruß, Mathias

[MKay]

okay, was ist nun an einem div auszusetzen? Soll ich stattdessen <p></p> verwenden?

Ich habe mich hierdran orientriert:
http://www.css4you.de/wslayout1/index.html

OK, wenn ich das letzte Element auch float=links setze, funzts, hatte gedacht ich hätte das versucht, sry.
Aber warum wird die Banner-Schrift nicht vertikal zentriert angezeigt?

danke für die Anwort

MKay

[Mathias Brodala]

Hallo MKay.

okay, was ist nun an einem div auszusetzen? Soll ich stattdessen <p></p> verwenden?

Wie ich schon sagte: nimm das, was Sinn ergibt. Willst du einen Absatz auszeichnen, nimmst du p, für Überschriften h[1-6] für Navigationen [dou]l, etc. Der Kopfbereich könnte beispielsweise durchaus ein h1–Element zur Strukturierung bekommen, sofern dort der Seitentitel oder das Thema der Site genannt wird.

Ich habe mich hierdran orientriert:
http://www.css4you.de/wslayout1/index.html

Dafür hast du aber erstaunlich viele (zu viele) div–Elemente genutzt. Und alle Beispiele auf dieser Seite haben den Mangel, dass die Navigationen schlecht ausgezeichnet wurden. Ein ul–Element wäre hier weitaus besser geeignet.

Aber warum wird die Banner-Schrift nicht vertikal zentriert angezeigt?

Weil du keine der beiden derzeitigen Möglichkeiten genutzt hast.

1. Verpasse dem Element, bei welchem es erforderlich ist, ein display:table-cell. Dass der IE zu dumm dafür ist, kann man nicht ändern.

2. Arbeite mit einer geschickten Kombination aus height und padding-top sowie padding-bottom um eine vertikale Zentrierung zu simulieren.

Einen schönen Freitag noch.

Gruß, Mathias

[MKay]

Ok, jetzt frage ich mich nur, warum ich viel zu viele divs benutze?

[MKay]

Ok, jetzt frage ich mich nur, warum ich viel zu viele divs benutze?

[Mathias Brodala]

Hallo MKay.

Warum antwortest du nicht meinem Posting, sondern deinem?

Ok, jetzt frage ich mich nur, warum ich viel zu viele divs benutze?

OK, dann werfen wir einmal einen Blick auf deinen Code:

<div style="width: 900px; margin: 0px auto; text-align: left;">  
  
 <div>  
  <img style="float: left;" src="images/logo_left.gif" width="11" height="91" border="0" alt="">  
  <img style="float: left;" src="images/logo_logo.gif" width="188" height="91" border="0" alt="">  
  <div style="float: left; display: inline; background-image: url('images/logo_bg.gif'); height: 91px; width: 500px; text-align: center; vertical-align: middle;">hier kommt ein Banner hin</div>  
  <img src="images/logo_right.gif" width="11" height="91" border="0" alt="">  
 </div>  
  
</div>

Bei mir könnte das ganze so aussehen:

<h1><img src="logo_logo.gif" height="91" width="188" /> <span>hier kommt ein Banner hin</span></h1>

Und das CSS dazu:

* {  
  margin:0;  
  padding:0;  
}  
h1 {  
  background:url(logo_bg.gif) repeat-x;  
  font-size:1em;  
  font-weight:normal;  
  margin:auto;  
  overflow:auto;  
  width:60%;  
}  
h1 * {  
  float:left;  
}  
h1 span {  
  padding:3em 0 0 3em;  
}  
h1::before { /* Alternativ musst du eben die Grafik direkt als img–Element im h1–Element platzieren, wenn es im IE funktionieren soll. */  
  content:url(logo_left.gif);  
  float:left;  
}  
h1::after { /* Dito. */  
  content:url(logo_right.gif);  
  float:right;  
}

Probleme: der IE kennt keine Pseudoelemente und Firefox stört sich an ebenselbigen. Vielleicht fällt jemand anderem hierzu noch etwas ein.

Einen schönen Freitag noch.

Gruß, Mathias

[Mathias Brodala]

Hallo Mathias.

Bei mir könnte das ganze so aussehen:

<h1><img src="logo_logo.gif" height="91" width="188" /> <span>hier kommt ein Banner hin</span></h1>

Selbst mit einer position–basierten Variante stellt sich Firefox noch quer:

* {  
  margin:0;  
  padding:0;  
}  
h1 {  
  background:url(logo_bg.gif) repeat-x;  
  font-size:1em;  
  font-weight:normal;  
  margin:auto;  
  position:relative;  
  width:60%;  
}  
h1 span {  
  outline:1px solid;  
  position:absolute;  
  top:40%;  
}  
h1::before {  
  content:url(logo_left.gif);  
}  
h1::after {  
  content:url(logo_right.gif);  
  position:absolute;  
  right:0;  
}

Irgend etwas gefällt ihm hier am ::after–Pseudoelement nicht. Was ich auch versuche, es lässt sich partout nicht am rechten Rand seines Elternelementes ausrichten, so wie es Opera und Konqueror tun.

Hm …

Einen schönen Freitag noch.

Gruß, Mathias

[jeanlucpicard]

Hallo Mathias

Bei mir könnte das ganze so aussehen:

<h1><img src="logo_logo.gif" height="91" width="188" /> <span>hier kommt ein Banner hin</span></h1>

Fehlt da nicht was im Bild? ;)

Ich glaube es handelt sich hier um das selbe Problem, das ich vor kurzem mit dem Fuchs hatte.

Live long and prosper

[Mathias Brodala]

Hallo jeanlucpicard.

Bei mir könnte das ganze so aussehen:

<h1><img src="logo_logo.gif" height="91" width="188" /> <span>hier kommt ein Banner hin</span></h1>

Fehlt da nicht was im Bild? ;)

Korrekt, hatte ich übersehen.

Ich glaube es handelt sich hier um das selbe Problem, das ich vor kurzem mit dem Fuchs hatte.

Ja, hier muss ich ausnahmsweise sagen, dass Firefox *leider* korrekt reagiert. Praxistauglich ist sein Verhalten nicht.

Nichtdestotrotz kann ich nun eine Lösung anbieten. Auf meinem Weg dahin habe ich es mit float, position und weniger Pseudoelementen versucht, aber Firefox hat jedes Mal einen Strich durch die Rechnung gemacht.

Jedenfalls funktioniert die finale Lösung nun sogar im IE.

Einen schönen Freitag noch.

Gruß, Mathias

[Ingo Turski]

Hi,

Hallo Mathias.
Gruß, Mathias

Hat der Verzicht auf Deinen Nick eine psychologische Spaltung bewirkt? ;-)

freundliche Grüße
Ingo

[Mathias Brodala]

Hallo Ingo.

Hallo Mathias.
Gruß, Mathias

Hat der Verzicht auf Deinen Nick eine psychologische Spaltung bewirkt? ;-)

Mitnichten. Ich bin so chaotisch wie eh und je.

Einen schönen Freitag noch.

Gruß, Mathias

[Gunnar Bittersmann]

Hello out there!

Hallo Mathias.

Du meintest „Hallo Ashura™“? (Pun intended.)

See ya up the road,
Gunnar