offen Was soll mit text-align bei einer vertikalen zentrierung bringen? Aber auch "vertical-align" bringt genausowenig wie "margin: auto 0" was man schön an dem Bild sieht: die Grafik ist nicht angegeben und der Alternativtext ist nur eine Zeile hoch. "position: relative" verwende ich bereits. Und so verläuft der Text zuerst neben und dann unterhalb der Grafik (inkl. padding).
Also das einzige was ich mir derzeit irgendwie vorstellen könnte, ist dass sich beide Spalten in der Höhe am unteren Rand ausrichten, wenn das geht? oder gibt es sonst noch eine
Lösung um die Spalten gleichhoch zu kriegen, gemessen an der höhreren?
EDIT: offen Da ich nicht sicher bin, ob das so möglich ist und ich auch unter Zeitdruck stehe, bin ich wieder zur Tabelle gewechselt. Das sieht jetzt mal soweit ganz gut aus (
Klick), aber kann mir wer verraten wo ich
standardformatierungen einer Tabelle (in xhtml) nachsehen kann, da ich gewisse automatische Abstände in einer Tabelle nachstellen muss. Auf der WC3 Seite habe ich mich jedenfalls nicht zurecht gefunden.
EDIT #2: (
Die zwei og. Themen interessieren mich nachwievor, aber)
gelöst Die Seite ist nun fertig (
so sieht das Design aus) und wollte fragen ob's daran prinzipiell was auszusetzen gibt, ausser dass ich z.B. nun doch Tabellen verwende? Andererseits seh ich gerade, dass mir der ebay-Turbo-Lister anscheind alle meiner paddings und manche meiner margins nicht erlaubt:
Screen. Zwar werde mich dabei auch an eBay(-Foren) wenden, aber wenn wer ne Idee hat warum das so ist und was ich dagegen tun kann wäre das durchaus hilfreich.
EDIT #3: gelöst So, ich habe nun die Ursache gefunden, warum mir im ebay Turbo Lister viele meiner Abstände nicht angezeigt werden. Grund ist, dass bei ebay (wenn man drüber nachdenkt eig. logisch)
Doctype, Metaangaben etc. nicht zulässig sind, nur 1 metaangabe, css und der eigentliche Text, siehe dazu:
HTML und CSS bei ebay. Dadurch schalten sich natürlich
Browser in den Quirks Mode.
Nun habe ich meinen Code mal den Regeln auf der Seite angepasst,
nur ignoriert der IE genau wie der Turbo-Lister seither meine Abstände. Im FF sieht die Seite trotzdem genauso aus. Zwar hab ich es nun auch geschafft das ganze zu zentrieren, aber die
paddings zw. den Absätzen werden noch immer ignoriert.
Ich hab dazu auch einiges im Netz gefunden, aber hat irgendwie alles nichts geholfen.
http://www.sitehatchery.com/articles/ie-box-model-bug.php
http://archivist.incutio.com/viewlist/css-discuss/82337 (3. Link)
und noch ein paar andere. Ich such noch weiter, aber wenn wer einen Box Model Hack hat, der bei mir funktionieren könnte, wäre ich sehr dankbar.
HTML:
<meta http-equiv="imagetoolbar" content="false"/>
<style type="text/css">
/*** Head Colums w. Pic ***/
#ebaybody {
min-width: 440px; /* LC width + RC fullwidth */
margin: 10px;
}
#head_lc_picture, #head_picture {
width: 150px; /* LC width */
}
/*** Rounded corners in div boxes ***/
.rnd_container {margin:4px 0;}
.rnd_content {display:block; border:0 solid #ccc; border-width:0 1px; padding: 4px}
/*** Concerning content ***/
* {border: 0; padding: 0; margin: 0; text-align: center;}
#ebaybody > hr {
border: 1px #ccc solid;
background: #ccc;
margin: 10px 0;
}
div.data {width: 94%;} /* Optical Effekt */
div.data,table {margin: 0 auto;} /* Centering */
td.alltext, div.alltext {
padding: 8px 0 8px 0px; /* half of padding -box */
}
td.alltext > p.txtpaddhead {
padding: 8px 0 8px 20px; /* half of padding -text */
}
* html td.alltext > p.txtpaddhead {
border-left: 1px transparent solid; /* IE Quirk fix */
}
div.alltext > p.txtpaddtop {
padding: 8px 0 0 0;
}
div.alltext > p.txtpaddbottom {
padding: 0 0 8px 0;
}
div.alltext > p.txtpaddboth {
padding: 8px 0 8px 0;
}
/* * html div.alltext > p.txtpaddtop, p.txtpaddbottom, p.txtpaddboth {
border-left: 1px transparent solid;
} IE Quirk fix */
td.property,td.value {
vertical-align:top;
border-bottom: 1px #ccc solid;
}
td.value {padding-left: 30px;}
ul {margin:0}
/*** General Look ***/
#ebaybody, p, td, li, span {
text-align: left; /* Vererbt */
font: normal 13px/normal 'Book Antiqua'; /* Vererbt */
background: #fff; /* Vererbt */
}
#headertop, div.headerelse {
font-weight: bold;
background: #d6dbe0;
height: 20px;
}
#headertop {
font-size: 16px;
color: #fff;
}
div.headerelse {
font-size: 15px;
color: #666;
}
td > a {font-size: 14px}
/*** Text - Look ***/
.actions {
font-family: Arial, Verdana;
font-size: 11px;
font-style: italic;
color: #666;
}
p.fullintended, p.weight {
margin-left: 8px;
}
.red, p.green, p.silver, p.blue, p.weight {
font-weight: bold;
}
.red {color: #ff0033;}
p.green {color: #33CC33;}
p.silver {color: #C0C0C0;}
p.blue {color: #0000FF;}
p.weight {color: #008080;font-style: italic;}
</style>
<div id="ebaybody">
<hr /> <!-- Horizontale Linie -->
<div class="rnd_container">
<b class="rnd_top">
<b class="rnd_b1"></b><b class="rnd_b2"></b><b class="rnd_b3"></b><b class="rnd_b4"></b>
</b>
<!-- Oberer Rand -->
<div class="rnd_content">
<div class="data">
<!-- Innerer Bereich - A -->
<div id="headertop" >Auktions-Titel</div>
<!-- Headline -->
<table><tr>
<td id="head_lc_picture">
<img id="head_picture" src="" alt="Vorschau-Bild"/>
</td>
<!-- Bild -->
<td class="alltext">
<p class="actions txtpaddhead">
Test der Formatierung actions. Funkt wies aussieht ;)<br/>
Margin-bottom wird aut. auf den Absatz angewendet.
</p>
<p class="txtpaddhead">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat. Duis autem vel
eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim
qui blandit praesent luptatum zzril delenit augue duis
dolore te feugait nulla.
</p>
</td>
<!-- Text neben Bild -->
</tr></table>
</div>
<!-- Innerer Bereich - E -->
</div>
<b class="rnd_bottom">
<b class="rnd_b4"></b><b class="rnd_b3"></b><b class="rnd_b2"></b><b class="rnd_b1"></b>
</b>
<!-- Unterer Rand -->
</div>
<div class="rnd_container">
<b class="rnd_top">
<b class="rnd_b1"></b><b class="rnd_b2"></b><b class="rnd_b3"></b><b class="rnd_b4"></b>
</b>
<!-- Oberer Rand -->
<div class="rnd_content">
<div class="data">
<!-- Innerer Bereich - A -->
<div class="headerelse">Technische Daten</div>
<!-- Headline -->
<table cellpadding="0" cellspacing="0" style="margin: 15px auto">
<tr>
<td class="property red">Head 1</td>
<td class="value"><ul>
<li>Detail 1</li>
<li>Detail 2 - ist länger</li>
</ul></td>
</tr>
<tr>
<td class="property red">Head 2 - ist länger</td>
<td class="value"><ul>
<li>Detail</li>
</ul></td>
</tr>
</table>
<!--Text-->
</div>
<!-- Innerer Bereich - E -->
</div>
<b class="rnd_bottom">
<b class="rnd_b4"></b><b class="rnd_b3"></b><b class="rnd_b2"></b><b class="rnd_b1"></b>
</b>
<!-- Unterer Rand -->
</div>
<hr /> <!-- Horizontale Linie -->
<div class="rnd_container">
<b class="rnd_top">
<b class="rnd_b1"></b><b class="rnd_b2"></b><b class="rnd_b3"></b><b class="rnd_b4"></b>
</b>
<!-- Oberer Rand -->
<div class="rnd_content">
<div class="data">
<!-- Innerer Bereich - A -->
<div class="headerelse">Details zum Verkauf</div>
<!-- Headline -->
<div class="alltext">
<p class="green txtpaddtop">Titel 1</p>
<p class="fullintended txtpaddbottom">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat. Duis autem vel
eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim
qui blandit praesent luptatum zzril delenit augue duis
dolore te feugait nulla.
</p>
<p class="actions txtpaddboth">
Eventuelle Hinweise.
</p>
<p class="green txtpaddtop">Titel 2</p>
<p class="fullintended txtpaddbottom">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat. Duis autem vel
eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim
qui blandit praesent luptatum zzril delenit augue duis
dolore te feugait nulla.
</p>
</div>
<!-- Text -->
</div>
<!-- Innerer Bereich - E -->
</div>
<b class="rnd_bottom">
<b class="rnd_b4"></b><b class="rnd_b3"></b><b class="rnd_b2"></b><b class="rnd_b1"></b>
</b>
<!-- Unterer Rand -->
</div>
<div class="rnd_container">
<b class="rnd_top">
<b class="rnd_b1"></b><b class="rnd_b2"></b><b class="rnd_b3"></b><b class="rnd_b4"></b>
</b>
<!-- Oberer Rand -->
<div class="rnd_content">
<div class="data">
<!-- Innerer Bereich - A -->
<div class="headerelse">Kauf- und Lieferbedingungen</div>
<!-- Headline -->
<div class="alltext">
<p class="blue txtpaddtop">Titel1</p>
<p class="fullintended txtpaddbottom">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat. Duis autem vel
eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim
qui blandit praesent luptatum zzril delenit augue duis
dolore te feugait nulla.
</p>
<p class="weight txtpaddboth">Was auch immer</p>
<p class="fullintended txtpaddboth">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat. Duis autem vel
eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim
qui blandit praesent luptatum zzril delenit augue duis
dolore te feugait nulla.
</p>
<p class="fullintended" style="text-align: center">
<span style="font-size: 20px; font-family: Forte; color: #666">V</span>
<span style="font-size: 14px;">iel </span>
<span style="font-size: 20px;; font-family: Forte; color: #666">S</span>
<span style="font-size: 14px;">paß und </span>
<span style="font-size: 20px; font-family: Forte; color: #666">E</span>
<span style="font-size: 14px;">rfolg beim </span>
<span style="font-size: 20px; font-family: Forte; color: #666">B</span>
<span style="font-size: 14px;">ieten.</span>
</p>
</div>
<!-- Text -->
</div>
<!-- Innerer Bereich - E -->
</div>
<b class="rnd_bottom">
<b class="rnd_b4"></b><b class="rnd_b3"></b><b class="rnd_b2"></b><b class="rnd_b1"></b>
</b>
<!-- Unterer Rand -->
</div>
<hr /> <!-- Horizontale Linie -->
<div class="rnd_container">
<b class="rnd_top">
<b class="rnd_b1"></b><b class="rnd_b2"></b><b class="rnd_b3"></b><b class="rnd_b4"></b>
</b>
<!-- Oberer Rand -->
<div class="rnd_content">
<div class="data">
<!-- Innerer Bereich - A -->
<div class="headerelse">
Fotos - zum vergrößeren auf die Darstellung klicken!
</div>
<!-- Headline -->
<table width="100%">
<tr>
<td style="width:30%">
<a href="" title="Click to open Image 1">
Eigene Aufnahme</a></td>
<!-- Foto1-Ueberschrif -->
<td style="width:30%">
<a href="" title="Click to open Image 2">
Original-Abbildung</a></td>
<!-- Foto2-Ueberschrift -->
<td style="width:30%">
<a href="" title="Click to open Image 3">
Weitere Abbildung</a></td>
<!-- Foto3-Ueberschrift -->
</tr>
<tr>
<td>
<a href="" title="Click to open Image 1">
<img src=""
style="max-width:200px; max-height:129px" alt="Grafik" /></a>
<!-- Foto1 -->
</td>
<td>
<a href="" title="Click to open Image 2">
<img src=""
style="max-width:200px; max-height:129px" alt="Grafik" /></a>
<!-- Foto2 -->
</td>
<td>
<a href="" title="Click to open Image 3">
<img src=""
style="max-width:200px; max-height:129px" alt="Grafik" /></a>
<!-- Foto3 -->
</td>
</tr>
</table>
<!-- Bilder mit Überschrift -->
</div>
<!-- Innerer Bereich - E -->
</div>
<b class="rnd_bottom">
<b class="rnd_b4"></b><b class="rnd_b3"></b><b class="rnd_b2"></b><b class="rnd_b1"></b>
</b>
<!-- Unterer Rand -->
</div>
<hr /> <!-- Horizontale Linie -->
<table width="100%"><tr>
<td >
<a href="http://validator.w3.org/check?uri=referer">
<img style="border:0;width:71px;height:25px"
src="http://www.w3.org/Icons/valid-xhtml10-blue"
alt="Valid XHTML 1.0 Strict"/></a>
</td>
<td class="actions" style="text-align:center">
Erstellt in 1280x800/1280x1024
</td>
<td style="text-align:right">
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0;width:71px;height:25px"
src="http://jigsaw.w3.org/css-validator/images/vcss-blue"
alt="CSS ist valide!" /></a>
</td>
</tr></table>
</div>
Btw. so sieht es in den unterschiedlichen Browsern aus:
FF 3.5:
Directupload.net - Du7cepub4.jpg
MS-Expression Web 2:
Directupload.net - D65fjkfbj.jpg (akzeptiert paddings, aber nicht margin: auto)
IE 8/Turbo-Lister 2 v7.3:
Directupload.net - Dgfj98p49.jpg
EDIT #4: gelöst die Zentrierung habe ich hinbekommen, code entsprechend geändert.
EDIT #5: Problem gerade
gelöst. Und zwar so:
HTML:
td.alltext p.txtpaddhead {
padding: 8px 0 8px 20px; /* half of padding -text */
}
Sprich, um genau zu sein "Element1 Element2" (Element1>Element2 würde auch gehen, ist aber nicht so gut lesbar), sowie ich aber "Element1 > Element2" verwende, ignoriert der IE meine Abstände
.
hier mal enorm einfacher mit divs:
