nicht angemeldet
Markup bzw. CSS bei diesem Schnipsel in Ordnung?
0 0 0 0 0 0 
Gunnar Bittersmann
0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
0
0 Gunnar Bittersmann
0
0 Gunnar Bittersmann
Markup bzw. CSS bei diesem Schnipsel in Ordnung?
Hallo,
eine Frage zu folgendem Code:
<html>
<head>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
#foto {
width: 250px;
height: 320px;
float: left;
background: green;
}
#beschreibungFoto {
height: 320px;
display: table-cell;
vertical-align: middle;
padding: 10px;
background: yellow;
}
</style>
</head>
<body>
<div id="content">
<h2>Startseite</h2>
<div>
<img id="foto" src="test.jpg"/>
<div id="beschreibungFoto">
<p>Beschreibung Foto Zeile 1</p>
<p>Beschreibung Foto Zeile 2</p>
<p>Beschreibung Foto Zeile 3</p>
</div>
</div>
<h3>Hobbys</h3>
<ul>
<li>Hobby 1</li>
<li>Hobby 2</li>
<li>Hobby 3</li>
</ul>
</div>
</body>
</html>
Es geht mir momentan nur um die Darstellung im Firefox. Mit dem von mir genutzen Markup und dem entsprechenden CSS wird der ganze Kram im Firefox so dargestellt wie ich das gerne hätte. Die Frage ist, ob das Markup bzw. das CSS so in Ordnung sind, oder ob man die gleiche Darstellung auch mit einem eleganteren Lösungsweg erreichen könnte?
Des weiteren eine Frage zu der CSS-Zeile "display: table-cell;". Der Kram wird nur dann so dargestellt wie ich das gerne hätte, wenn ich diese Zeile im Code lasse. Ich weiß aber nicht warum der ganze Kram ohne diese Zeile nicht auch wie gewünscht dargestellt wird. Könnt ihr mir vielleicht sagen warum diese Zeile notwendig ist bzw. was sie genau macht?
-
eine Frage zu folgendem Code:
DOCTYPE fehlt
<html>
<head>CSS besser in eine File auslagern und via <link> einbinden.
<style type="text/css"> * { margin: 0px; padding: 0px; }Sehr Böse!
kein color und background für body definiert!
#foto { width: 250px; height: 320px; float: left; background: green;color fehlt!
} #beschreibungFoto { height: 320px; display: table-cell;vertical-align: middle;
padding: 10px;
background: yellow;
}color fehlt!
</style><title> Element fehlt.
</head>
<body>
<div id="content">
<h2>Startseite</h2>
<div>
<img id="foto" src="test.jpg"/>
<div id="beschreibungFoto">
<p>Beschreibung Foto Zeile 1</p>
<p>Beschreibung Foto Zeile 2</p>
<p>Beschreibung Foto Zeile 3</p>
</div>
</div>
<h3>Hobbys</h3>
<ul>
<li>Hobby 1</li>
<li>Hobby 2</li>
<li>Hobby 3</li>
</ul>
</div>
</body>
</html>> Es geht mir momentan nur um die Darstellung im Firefox. Mit dem von mir genutzen Markup und dem entsprechenden CSS wird der ganze Kram im Firefox so dargestellt wie ich das gerne hätte. Die Frage ist, ob das Markup bzw. das CSS so in Ordnung sind, oder ob man die gleiche Darstellung auch mit einem eleganteren Lösungsweg erreichen könnte? Warum fragst du nicht den Validator? Das kommt darauf an, was deine Seite später noch beinhaltet. > Des weiteren eine Frage zu der CSS-Zeile "display: table-cell;". Der Kram wird nur dann so dargestellt wie ich das gerne hätte, wenn ich diese Zeile im Code lasse. Weil vertical-align je nach display-typ etwas verschiedenes bedeutet. Um Bild neben Text anzuordnen, hättest du ja das Bild statt zu floaten auch gleich mit table-cell beschreiben können. Das hätte dir mindestens clearing Effekte erspart. Eine andere Methode ist display-inline-block. mfg Beat -- ><o(((°> ><o(((°> <°)))o>< ><o(((°>o Der Valigator leibt diese Fische-
@@Beat:
nuqneH
kein color und background für body definiert!
Warum sollte? Soll doch jeder Nutzer die Seite so angezeigt bekommen wie in seinem Nutzerstylesheet steht.
#foto { width: 250px; height: 320px; float: left; background: green;Wozu genau dient diese Angabe einer Hintergrundfarbe? Ist das Bild teilweise transparent?
color fehlt!
Häh? Eine Textfarbe für ein Bild?
Achso, du meinst für den Alternativtext …
<img id="foto" src="test.jpg"/>… den es gar nicht gibt. Aber geben sollte.
Qapla'
--
Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)
-
-
<div> <img id="foto" src="test.jpg"/> <div id="beschreibungFoto"> <p>Beschreibung Foto Zeile 1</p> <p>Beschreibung Foto Zeile 2</p> <p>Beschreibung Foto Zeile 3</p> </div> </div><div class="img"> <img /> <div> <p>foo<p> <p>bar<p> <p>baz<p> </div> </div>div.img { } div.img img { } div.img div { } div.img p { }Sollte eigentlich reichen.
Vorteil:
- mehrere Bilder auf einer Seite
- Kürzere Selektoren
ggf. kann man auch noch auf das div-Element verzichten.
Alternativ als Definitionsliste - da steh ich persönlich aber nicht so drauf:
<dl class="image"> <dd> <img /> </dd> <dt> <p>foo<p> <p>bar<p> <p>baz<p> </dt> </dl>-
<div class="img">
<img />
<div>
<p>foo<p>
<p>bar<p>
<p>baz<p>
</div>
</div>> > ~~~css div.img { } > div.img img { } > div.img div { } > div.img p { }Sollte eigentlich reichen.
Vorteil:
- mehrere Bilder auf einer Seite
- Kürzere Selektoren
ggf. kann man auch noch auf das div-Element verzichten.
Auf welches div-Element kann ich verzichten? Auf das aüßere (<div class="img">) oder auf das innere (<div>). Wie würde denn dann das CSS aussehen um die von mir gewünschte Anordnung zu erreichen. Nicht das ich das nicht selbst hinbekomme, es nist nur so das mich dieses Problem schon recht lange beschäftigt. Ich möchte halt die optimale Lösung.
-
Auf welches div-Element kann ich verzichten? Auf das aüßere (<div class="img">) oder auf das innere (<div>).
Auf das innere, allerdings macht es den Code weniger flexibel.
Wie würde denn dann das CSS aussehen um die von mir gewünschte Anordnung zu erreichen. Nicht das ich das nicht selbst hinbekomme, es nist nur so das mich dieses Problem schon recht lange beschäftigt. Ich möchte halt die optimale Lösung.
Lass das gruppierende Element drinnen, sonst tust du dich mit dem Gelben Hintergrund neben dem Bild schwer. Zur formatierung solltest du ggf. auf den Vorschlag von Beat eingehen (inline-block) oder schlichtweg mit float arbeiten.
-
Das ist jetzt meine aktueller Code:
<html> <head> <style type="text/css"> * { margin: 0px; padding: 0px; } div.picWithText img { width: 250px; height: 320px; float: left; background: green; } div.picWithText div { height: 320px; background: blue; } </style> </head> <body> <div id="content"> <h2>Überschrift der Seite</h2> <div class="picWithText"> <img src="typo3temp/pics/6b2bc080a6.jpg" width="300" height="398" alt="" /> <div> <p>Bildbeschreibung Zeile 1</p> <p>Bildbeschreibung Zeile 2</p> <p>Bildbeschreibung Zeile 3</p> </div> </div> <div class="csc-header csc-header-n2"> <h3>Hobbys</h3> </div> <ul class="csc-bulletlist csc-bulletlist-0"> <li class="odd">Hobby 1</li> <li class="even">Hobby 2</li> <li class="odd">Hobby 3</li> </ul> </div> </body> </html>Ich schaffe es leider nicht die drei Zeilen mit der Bildbeschreibung vertical in ihrem Container zu zentrieren. Wie mache ich das am besten.
div.picWithText div {
height: 320px;
background: blue;
vertical-align: middle;
}Das "vertical-align: middle" zeigt leider keine Wirkung. Ne Ahnung warum das keine Wirkung zeigt bzw. wie ich das am einfachsten löse?
-
@@HanSolo:
nuqneH
Das "vertical-align: middle" zeigt leider keine Wirkung. Ne Ahnung warum das keine Wirkung zeigt
Weil’s so spezifiziert wurde. [CSS2 §10.8]
Qapla'
--
Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)-
@@HanSolo:
nuqneH
Das "vertical-align: middle" zeigt leider keine Wirkung. Ne Ahnung warum das keine Wirkung zeigt
Weil’s so spezifiziert wurde. [CSS2 §10.8]
Qapla'
Kannst du mir vielleicht bei der Lösung behilflich sein? Wie würdest du denn die Zentrierung umsetzen?
-
Kannst du mir vielleicht bei der Lösung behilflich sein? Wie würdest du denn die Zentrierung umsetzen?
Du wirst entweder display:inline-block
oder das unsicherer table-cell verwenden müssen<div id="outer"
><img
><p</div>
#outer > *{
display:inline; /* MSIE und Opera Trigger */
display:inline-block;
vertical-align:middle;
}
#outer > img {width:30%; }
#outer > p { width:69.9%; }inline-block erfordert eine besondere Achtsamkeit mit whitespace.
Zudem gilt es Rundungsfehler zu beachten.mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische-
So damit bin ich dann wieder ganz am Anfang. Hab's so gemacht und im Firefox getestet. Jetzt wird wieder alles falsch dargestellt :-(
<html> <head> <style type="text/css"> * { margin: 0px; padding: 0px; } div.picWithText { display: inline; /* MSIE und Opera Trigger */ display: inline-block; vertical-align: middle; } div.picWithText img { width: width: 30%; height: 320px; background: green; } div.picWithText div { width: 69.9%; height: 320px; background: blue; } div.picWithText p { } </style> </head> <body> <div id="content"> <h2>Überschrift der Seite</h2> <div class="picWithText"> <img src="typo3temp/pics/6b2bc080a6.jpg" width="300" height="398" alt="" /> <div> <p>Bildbeschreibung Zeile 1</p> <p>Bildbeschreibung Zeile 2</p> <p>Bildbeschreibung Zeile 3</p> </div> </div> <div class="csc-header csc-header-n2"> <h3>Hobbys</h3> </div> <ul class="csc-bulletlist csc-bulletlist-0"> <li class="odd">Hobby 1</li> <li class="even">Hobby 2</li> <li class="odd">Hobby 3</li> </ul> </div> </body> </html>-
So damit bin ich dann wieder ganz am Anfang. Hab's so gemacht und im Firefox getestet. Jetzt wird wieder alles falsch dargestellt :-(
Bachte, dass ich nicht #outer mit display: inline-block beschreibe, sondern dessen unmittelbare Children
mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische-
Bachte, dass ich nicht #outer mit display: inline-block beschreibe, sondern dessen unmittelbare Children
So hab's jetzt so gemacht:
div.picWithText > *{ display: inline; /* MSIE und Opera Trigger */ display: inline-block; vertical-align: middle; } div.picWithText img { width: width: 30%; height: 320px; background: green; } div.picWithText div { width: 69.9%; height: 320px; background: blue; }Scheint jetzt zu funktionieren. Die ein oder andere Frage hab ich trotzdem noch:
1.)
Ist die Verwednung von "> *" zur Auswahl der direkten Kinder in alles Browser Nutzbar oder machen hier manche Browser Probleme?2.)
Die drei zeilen die das Foto beschreiben werden leider immernoch nicht zentriert angezeigt. Ohje, warum ist das nur so kompliziert. Ich bin echt am verzweifeln.-
1.)
Ist die Verwednung von "> *" zur Auswahl der direkten Kinder in alles Browser Nutzbar oder machen hier manche Browser Probleme?MSIE 6!
2.)
Die drei Zeilen die das Foto beschreiben werden leider immernoch nicht zentriert angezeigt. Ohje, warum ist das nur so kompliziert. Ich bin echt am verzweifeln.Du machst dir mit height das Leben kompliziert.
mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische-
1.)
Ist die Verwednung von "> *" zur Auswahl der direkten Kinder in alles Browser Nutzbar oder machen hier manche Browser Probleme?MSIE 6!
Was würdest du mir den vorschlagen, damit es uach im MSIE 6 funktioniert. Am besten redundant in beide Kinder reinkopieren, oder geht das auch irgendwie eleganter.
2.)
Die drei Zeilen die das Foto beschreiben werden leider immernoch nicht zentriert angezeigt. Ohje, warum ist das nur so kompliziert. Ich bin echt am verzweifeln.Du machst dir mit height das Leben kompliziert.
Besten Danke ;-).
-
Was würdest du mir den vorschlagen, damit es uach im MSIE 6 funktioniert.
Im Allegmeinen muss es im MSIE6 nicht schön aussehen, sondern lediglich der Inhalt brauchbar angezeigt werden. Ich sehe da keine nennenswerte Probleme.
Andernfalls du ja ein
#outer p {display:block}
nachfügen kannst.mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische-
Hab's grad mal mit diesem Code im IE7 getestet, das klappt es leider auch nicht. Was kann ich denn tun, damit es auch im IE7 richtig angezeigt wird?
<html> <head> <style type="text/css"> * { margin: 0px; padding: 0px; } div.picWithText > *{ display: inline; /* MSIE und Opera Trigger */ display: inline-block; vertical-align: middle; } div.picWithText img { width: width: 30%; height: 320px; background: green; } div.picWithText div { width: 69.9%; background: blue; } div.picWithText p { } </style> </head> <body> <div id="content"> <h2>Überschrift der Seite</h2> <div class="picWithText"> <img src="typo3temp/pics/6b2bc080a6.jpg" width="300" height="398" alt="" /> <div> <p>Bildbeschreibung Zeile 1</p> <p>Bildbeschreibung Zeile 2</p> <p>Bildbeschreibung Zeile 3</p> </div> </div> <div class="csc-header csc-header-n2"> <h3>Hobbys</h3> </div> <ul class="csc-bulletlist csc-bulletlist-0"> <li class="odd">Hobby 1</li> <li class="even">Hobby 2</li> <li class="odd">Hobby 3</li> </ul> </div> </body> </html>-
Hab's grad mal mit diesem Code im IE7 getestet, das klappt es leider auch nicht. Was kann ich denn tun, damit es auch im IE7 richtig angezeigt wird?
Den richtigen DOCTYPE (variante strict) als erstes in deinem Document definieren!
Du wurdest jetzt zweimal darauf aufmerksam gemacht.mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische-
Den richtigen DOCTYPE (variante strict) als erstes in deinem Document definieren!
Hab jetzt diesen reingepackt:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de"> ... </html>Klappt trotzdem nur im Firefox und nicht im IE7? Noch weitere Tipps?
-
Den richtigen DOCTYPE (variante strict) als erstes in deinem Document definieren!
Hab jetzt diesen reingepackt:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
...
</html>Achso, wir schreiben XHTML. Und was sagt der Validator? Der hat nämlich endlich etwas zu sagen. mfg Beat -- ><o(((°> ><o(((°> <°)))o>< ><o(((°>o Der Valigator leibt diese Fische-
Achso, wir schreiben XHTML. Und was sagt der Validator?
Der hat nämlich endlich etwas zu sagen.Hab die Fehler die der W3C Validator angezeigt hat behoben. Jetzt validiert die Seite ohne Fehler, trotzdem wird sie nach wie vor im IE7 nicht so dargestellt wie ich mir das vorstelle.
:-( so eine Mist.
-
Hab die Fehler die der W3C Validator angezeigt hat behoben. Jetzt validiert die Seite ohne Fehler, trotzdem wird sie nach wie vor im IE7 nicht so dargestellt wie ich mir das vorstelle.
:-( so eine Mist.
Wenn du jetzt den Code rausrücken würdest inklusive CSS, könnte man schon beinahe wieder ins Gespräch kommen.
PS: Ich hätte eigentlich eher den HTML Doctype der strict Variante bevorzugt statt XHTML.
Das erspart ein paar ungemütliche Einsichten, nämlich, dass XHTML wegen MSIE als HTML ausgeliefert werden soll, also gar nicht nach XML Regeln geparst wird.mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische-
Wenn du jetzt den Code rausrücken würdest inklusive CSS, könnte man schon beinahe wieder ins Gespräch kommen.
Klar rück ich den Code raus :-):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de"> <head> <title>Testseite</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta name="Author" content="Harry Hirsch"/> <meta name="description" content="Malen nach Zahlen"/> <link href="css/main.css" rel="stylesheet" type="text/css"/> <style type="text/css"> * { margin: 0px; padding: 0px; } div.picWithText > *{ display: inline; /* MSIE und Opera Trigger */ display: inline-block; vertical-align: middle; } div.picWithText img { width: width: 30%; height: 320px; background: green; } div.picWithText div { width: 69.9%; background: blue; } div.picWithText p { } </style> </head> <body> <div id="content"> <h2>Willkommen bei mir</h2> <div class="picWithText"> <img src="typo3temp/pics/6b2bc080a6.jpg" width="300" height="398" alt="" /> <div> <p>Zeile 1</p> <p>Zeile 2</p> <p>Zeile 3</p> </div> </div> <div class="csc-header csc-header-n2"> <h3>Taetigkeitsschwerpunkte</h3> </div> <ul class="csc-bulletlist csc-bulletlist-0"> <li class="odd">Zeile 1</li> <li class="even">Zeile 2</li> <li class="odd">Zeile 3</li> </ul> </div> </body> </html>-
<link href="css/main.css" rel="stylesheet" type="text/css"/>
Und was steht in diesem File?
Betrifft die "Geschwister Inline Elemente" der display:inline-block Elemente:
Ich kann dir jetzt nur sagen, dass Whitespace auch space ist. Entweder du eliminierst ihn, oder du verwendest HTML Kommentare zur Strukturierung.mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische-
<link href="css/main.css" rel="stylesheet" type="text/css"/>
Und was steht in diesem File?
Genau das was in diedem File steht hab ich in das CSS in head-kopiert.
Betrifft die "Geschwister Inline Elemente" der display:inline-block Elemente:
Ich kann dir jetzt nur sagen, dass Whitespace auch space ist. Entweder du eliminierst ihn, oder du verwendest HTML Kommentare zur Strukturierung.mmm, dass heißt du was wo der Fehler ist? Wie kann ich ihn denn beheben, so das es auch im IE7 funktioniert?
-
mmm, dass heißt du was wo der Fehler ist? Wie kann ich ihn denn beheben, so das es auch im IE7 funktioniert?
Ich habe jetzt rumgetestet, habe aber keinen Fix für den MSIE gefunden.
Das erstaunt mich deshalb, weil ich schon ein Layout geschrieben habe, welches inline-block anwendet, für MSIE aber inline anwendet.
link zu meinem layout ist der Link im head dieses Postings.mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische-
mmm, dass heißt du was wo der Fehler ist? Wie kann ich ihn denn beheben, so das es auch im IE7 funktioniert?
Ich habe jetzt rumgetestet, habe aber keinen Fix für den MSIE gefunden.
Das erstaunt mich deshalb, weil ich schon ein Layout geschrieben habe, welches inline-block anwendet, für MSIE aber inline anwendet.
link zu meinem layout ist der Link im head dieses Postings.mfg Beat
Wenn das OK ist werde ich nochmal einen neuen Thread starten, damit sich die anderen den Code auch mal anschauen. Vielleicht weiß dann irgend jemand anderes Rat. Seit so nett un deklariere den neuen Thread dann bitte nicht als Doppelposting.
-
@@HanSolo:
nuqneH
Wenn das OK ist werde ich nochmal einen neuen Thread starten
NAK, nicht OK.
damit sich die anderen den Code auch mal anschauen.
Das tun die anderen auch hier.
Seit so nett un deklariere den neuen Thread dann bitte nicht als Doppelposting.
Sei so nett und verfasse keine Doppelpostings!
Qapla'
--
Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck) -
Works in MSIE 7
Beachte dass ich dein markup etwas verändert habe.
Ich arbeite hier mit Conditional Comments für MSIE7
Diese setzen im Code eine id, die ich im CSS verwenden kann.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de"> <head> <title>Testseite</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="Author" content="Harry Hirsch" /> <meta name="description" content="Malen nach Zahlen" /> <style type="text/css"> body{ margin:0;padding:0; } .picWithText { display: block; } .picWithText .desc { display: inline-block; vertical-align: top; width:60%; height:1%; background: blue; } .picWithText .img { display: inline-block; vertical-align: middle; width: 39.9%; background: red; } #msie7 .picWithText .img, #msie7 .picWithText .desc { display:inline; } .picWithText p { margin:0;} </style> </head> <body> <!--[if IE 7]><div id="msie7"><![endif]--> <div id="content"> <h2>Willkommen bei mir</h2> <div class="picWithText"><!-- --><div class="img"><img src="" alt="ksdjfh" width="200" height="298"></div><!-- --><div class="desc"> <p>Zeile 1</p> <p>Zeile 2</p> <p>Zeile 3</p> </div><!-- --></div> <!--[if IE 7]></div><![endif]--> </body> </html>mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische-
Erstmal vielen Danke für Deine Mühe, dennoch überlegen ich mir doch lieber folgende Variante zu verwenden. Sie hat folgende Vorteile:
- funktioniert in IE6, 7 und 8 ohne Conditional Comments
- im Markup sind weniger Klassen notwendig
- die CSS Formatierung ist viel einfacher zu verstehen
hier der Code:
* { margin: 0px; padding: 0px; } div.picWithText img { float: left; width: 250px; height: 320px; background: green; } div.picWithText div { height: 320px; background: blue; }<div id="content"> <h2>Willkommen</h2> <div class="picWithText"> <img src="" alt="" /> <div> <p>Zeile 1</p> <p>Zeile 2</p> <p>Zeile 3</p> </div> </div> <h3>Taetigkeitsschwerpunkte</h3> <ul class="csc-bulletlist csc-bulletlist-0"> <li class="odd">Zeile 1</li> <li class="even">Zeile 2</li> <li class="odd">Zeile 3</li> </ul> </div>Was spricht denn gegen diese Lösung?
-
- {
margin: 0px;
padding: 0px;
}
Das ist böse, habe ich schon gesagt.
Aber das wirst du noch selber rausfinden.div.picWithText img {
float: left;
width: 250px;
height: 320px;
background: green;
}du vertraust auf eine fixierte Höhe.
div.picWithText div {
height: 320px;
background: blue;
}Hier ebenfalls. Was wenn die Children in diesem div mehr/weniger Höhe beanspruchen. > ~~~html > <div id="content"> > <h2>Willkommen</h2> > > <div class="picWithText"> > <img src="" alt="" /> > > <div> > <p>Zeile 1</p> > <p>Zeile 2</p> > <p>Zeile 3</p> > </div> > </div> ..... > </div> >Was spricht denn gegen diese Lösung?
Soweit ich sehe, wirst du das eher zufällig gegeneinander vertikal zentrieren können. Damit hast du eines deiner erstens Anliegen verleugnet.
mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische-
Hast schon recht... naja ich werd mich mal ein wenig weiter mit deiner Lösung auseinander setzen.
Besten Dank für die Hilfe jedenfalls
- {
-
-
-
-
Ich kann dir jetzt nur sagen, dass Whitespace auch space ist. Entweder du eliminierst ihn, oder du verwendest HTML Kommentare zur Strukturierung.
mmm, dass heißt du was wo der Fehler ist? Wie kann ich ihn denn beheben, so das es auch im IE7 funktioniert?
Die whitespaces zwischen den Elementen entfernen. Den Quelltext reparsen wenns darum geht - dafür hast du ja schon einen eigenen Thread.
Schick mir eine E-Mail, dann schick ich dir den Rohling für die Extension an der ich grade arbeite die solche Kunststücke spielen kann.
-
-
-
-
@@Beat:
nuqneH
PS: Ich hätte eigentlich eher den HTML Doctype der strict Variante bevorzugt statt XHTML.
Ich nicht. XHTML hat für den Autor etliche Vorteile gegenüber HTML.
Das erspart ein paar ungemütliche Einsichten, nämlich, dass XHTML wegen MSIE als HTML ausgeliefert werden soll, also gar nicht nach XML Regeln geparst wird.
An der Auslieferung von HTML-kompatiblem XHTML als 'text/html' ist nichts Ungemütliches.
Qapla'
--
Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)
-
-
-
-
-
-
-
-
-
So funktionieren tut es jetzt so wie ich möchte. In Zukunft wäre ich auch gerne dazu in der Lage selbst auf sowas zu kommen, deshalb sollte ich den Code auch verstehen. Deswegen abschließend noch ein paar Fragen dem CSS:
div.picWithText > *{ display: inline; /* MSIE und Opera Trigger */ display: inline-block; vertical-align: middle; } div.picWithText img { width: 30%; height: 320px; background: green; } div.picWithText div { width: 69.9%; background: blue; }1.)
img ist ja normalerweise ein Inline-Element. div ist normalerweise ein Block-Element. Mit Hilfe von "display: inline-block;" werden beide Elemente zu Inline-Block-Elementen transformiert. Äußerlich wird also für beide Elemente einen Block, für den Breite, Höhe und Außenabstand angegeben werden kann erzeugt, während die Elemente jedoch im laufenden Textfluss belassen werden. Mmmm hier hört es dann schon auf. Ich hab zwar nachgelesen was ein Inline-Block-Element ist, kann trotzdem nicht nachvollziehen wie du aus das CSS gekommen bist geschweige denn verstehe ich warum das jetzt richtig dargestellt wird.2.)
Mit " width: width: 30%;" bzw. " width: width: 69.9%;" teilst du ja den verfügbaren Platz auf. Warum nimmst du denn nicht 70.0% sondern 69.9%?3.)
Kann ich dem Foto keine genaue Pixelbreite zuweisen und der Beschreibung den ganzen Rest?4.)
Warum ist diese Zeile notwendig:display: inline; /* MSIE und Opera Trigger */
Wie kommst du auf diese Zeile
-
1.)
img ist ja normalerweise ein Inline-Element.Nicht ganz. einem Inline Element kannst du normalerweise keine height zuweisen. Einem img hingegen schon, weil es ein inline-replaced Element ist, das heisst, es hat eine intrinsische Höhe.
2.)
Mit " width: width: 30%;" bzw. " width: width: 69.9%;" teilst du ja den verfügbaren Platz auf. Warum nimmst du denn nicht 70.0% sondern 69.9%?Rundungsfehler. Alle browser rechnen ja letztlich in Pixel um und erzeugen dabei jedoch Rundungsfehler.
Wenn durch Addition der Breiten mehr als 100% herauskommt, hast du ein radikal verschiedenes Erscheinungsbild.3.)
Kann ich dem Foto keine genaue Pixelbreite zuweisen und der Beschreibung den ganzen Rest?Dafür müsstes du statt dem <img> ein wrapperelement als inline-block Element verwenden. Dann kannst du dem darin enthaltenen <img> immer noch eine eigene Angabe geben.
Warum ist diese Zeile notwendig:
display: inline; /* MSIE und Opera Trigger */
Wie kommst du auf diese Zeile
MSIE 6 und 7 verstehen kein inline-block, werden also die inline-block Anweisung nicht parsen.
Sie haben aber zugleich eine nicht konformante Ausführung von inline-Elementen, denen sie ein vertikales padding und height zugestehen.
Darum kommt bei diesen Browsern in etwa das gleiche zustande.Opera war früher sehr an MSIE angelehnt und hat noch ein paar Bugs geerbt aus dieser Zeit. Auch Opera kann man diese Mängel durch das vorangehende inline abgewöhnen.
mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische-
Besten Dank...
...wie bist du denn auf diesen Code gekommen? Ich wüßte garnicht wie ich da vorgehen muß. Kannst du vielleicht noch ein bißchen was dazu erklären. Du scheinst den Code ja bestens zu verstehen, da du ja auch gleich wußtest, dass durch meine "height"-Zuweisung die Beschreibung des Bildes nicht mittig dargestellt wurde. Ich würde diesen Code gerne so gut verstehen, dass ich dazu in der Lage bin selbst auf solche Sachen zu kommen. Dazu benötige ich allerdings Deine Hilfe. Wäre sehr nett, wenn du dich noch einmal bemühen würdest und den ganzen Kram etwsa detailierter erläutern würdest.
-
...wie bist du denn auf diesen Code gekommen?
Wie die Jungfrau zum Kind.
Du musst verstehen, dass solange bei einem Blockelement (und ein inline-Blockelement sieht von Innen wie ein Blockelement aus), height auf auto ist, die Höhe des Elements sich summiert durch den Bedarf der Children.
Sobald du aber die Höhe anders also auto definierst, treffen für dieses Element overflow Eigenschaften zu.
Von Aussen sieht ein Inline-Block Element wie ein inline Element aus. Das heisst, ich kann ein solches Element mittels vertical-align Element relativ zur Grundlinie des Parentelements ausrichten.
Würdest du einem inline-block noch ein border geben, dann würdest du denn Unterschied zwischen height:auto bzw non-auto Werten verstehen.
Bei vertical-align:middle wird die mitte der Höhe der inline-block Box auf die Mittellinie des äusseren Elements gestellt. Mittellinie meint hier die mittlere Höhe aller Line-Boxen pro Zeile des äusseren Elements.
zu vertical-align aus CSS2.1
"middle
Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent."
x-height ist nicht dokumentiert, meint in etwa aber die Mittellinie der durch line-height gegeben Zeilenhöhe des Parent-Elements.mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische
-
-
-
-
-
-
-
@@HanSolo:
nuqneH
<html>
Beat hatte dich schon auf die fehlende DOCTYPE-Angabe hingewiesen.
Quirks-Modus ist wohl selten eine gute Idee.
Qapla'
--
Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)
-
-
-
-
-
-