Der folgende Beitrag wurde am 11. 08. 2006, 15:09 Uhr von MKay veröffentlicht.
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
Der folgende Beitrag wurde am 11. 08. 2006, 16:17 Uhr von Mathias Brodala veröffentlicht.
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 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 Hintergrundgrafiken ein? Sie vermitteln keinerlei Inhalt, gehören daher nicht ins HTML.
Einen schönen Freitag noch.
Gruß, Mathias
--
sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
„It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
[HTML Design Constraints: Logical Markup]
Der folgende Beitrag wurde am 11. 08. 2006, 16:39 Uhr von MKay veröffentlicht.
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
Der folgende Beitrag wurde am 11. 08. 2006, 16:50 Uhr von Mathias Brodala veröffentlicht.
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
--
sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
„It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
[HTML Design Constraints: Logical Markup]
Der folgende Beitrag wurde am 11. 08. 2006, 17:10 Uhr von MKay veröffentlicht.
Ok, jetzt frage ich mich nur, warum ich viel zu viele divs benutze?
Der folgende Beitrag wurde am 11. 08. 2006, 17:05 Uhr von MKay veröffentlicht.
Ok, jetzt frage ich mich nur, warum ich viel zu viele divs benutze?
Der folgende Beitrag wurde am 11. 08. 2006, 17:36 Uhr von Mathias Brodala veröffentlicht.
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
--
sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
„It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
[HTML Design Constraints: Logical Markup]
Der folgende Beitrag wurde am 11. 08. 2006, 18:11 Uhr von Mathias Brodala veröffentlicht.
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
--
sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
„It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
[HTML Design Constraints: Logical Markup]
Der folgende Beitrag wurde am 11. 08. 2006, 18:42 Uhr von jeanlucpicard veröffentlicht.
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
Der folgende Beitrag wurde am 11. 08. 2006, 19:02 Uhr von Mathias Brodala veröffentlicht.
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
--
sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
„It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
[HTML Design Constraints: Logical Markup]
Der folgende Beitrag wurde am 11. 08. 2006, 19:05 Uhr von Ingo Turski veröffentlicht.
Hi,
> Hallo Mathias.
> Gruß, Mathias
Hat der Verzicht auf Deinen Nick eine psychologische Spaltung bewirkt? ;-)
freundliche Grüße
Ingo
--
[barrierefreie Webseitenerstellung » Suchmaschinenoptimierung | em?] (Hommingberger Gepardenforelle;-)
Der folgende Beitrag wurde am 11. 08. 2006, 19:06 Uhr von Mathias Brodala veröffentlicht.
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
--
sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
„It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
[HTML Design Constraints: Logical Markup]
Der folgende Beitrag wurde am 11. 08. 2006, 19:25 Uhr von Gunnar Bittersmann veröffentlicht.
Hello out there!
> Hallo Mathias.
Du meintest „Hallo Ashura™“? (Pun intended.)
See ya up the road,
Gunnar
--
“Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
© 1998-2013 SELFHTMLImpressumSoftware: Classic Forum 3.4