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

Kleines Table Konstrukt zu CSS Layout

T

Tomcat 12345

Neues Mitglied
Hallo Leute,

wie baut man diese Table hier mit Div/Span und CSS nach, so dass sie exakt die gleichen dynamsichen Eigenschaften hat. Sie eigentlich einfach aus, hab es aber nicht hinbekommen. Bei float oder inline klappt das mit den 50% nicht mehr.

<table style="width: 100%; background-color: Orange;">
<tr>
<td style="width: 50%; text-align: center;"><a href="#"><img src="..." width="55" height="34"></a></td>
<td style="width: 50%; text-align: center;"><a href="#"><img src="..." width="55" height="34"></a></td>
</tr>
</table>

Danke!
 
Tomcat 12345 schrieb:
Bei float oder inline klappt das mit den 50% nicht mehr.
Zum Vergrößern anklicken....
Wie kommst du denn darauf?

HTML: 
<div style="background-color:orange;">
	<p style="margin:0; padding:0; float:left; width: 50%; text-align: center;"><a href="#" style="background-color:red;"><img src="" width="55" height="34"></a></p>
	<p style="margin:0; padding:0; float:right; width: 50%; text-align: center;"><a href="#" style="background-color:red;"><img src="" width="55" height="34"></a></p>
	<br style="clear:both;">
</div>
 
Danke für die Hilfe. Wahrscheinlich hab ich einfach das zweite float vergessen. Es ist aber irgendwie auch schräg, das float muss gesetzt werden, damit das width: 50% ausgeführt wird. Mehr verändert das float aber nicht, die spans sind schon inline, die Grafiken liegen daher korrekt nebeneinander auch ohne float.

Ich hab das gleiche hier mal mit span und div anstelle p und br gemacht, da ich p eigentlich nie verwende und br nur als Textumbruch, nicht jedoch im Layout. Funktioniert genauso.

HTML: 
<div style="background-color:orange;">
   <span style="float:left; width: 50%; text-align: center;"><img src="" width="58" height="34"></span>
   <span style="float:left; width: 50%; text-align: center;"><img src="" width="60" height="34"></span>
   <div style="clear: both"></div>
</div>

Eine Problem gibt es noch. Unter den Bildern sind ca. 2 Pixel frei, d.h. das umschließende div ist 2 Pixel zu hoch. Ironischerweise ist das nicht so, wenn man den doctype weg nimmt und im Quirks rendern lässt. Paddings und margins auf 0 bei span und img verändert daran nichts. Any Idea?
 
Du hast den Code von Space Vampire nicht wirklich übernommen. Statt einem <p> nutzt Du ein <span>-Element, wodurch sich auch der von dir festgestellte Effekt beim float und width erklären lässt. <span> ist ein Inline-Element, <p> ein Blockelement. Dadurch verhalten sie sich erstmal grundsätzlich unterschiedlich.

Auf das clear-Element kannst Du btw. verzichten. Also ausgehend von dem Code von Space Vampire wäre das hier passend für dich:

HTML: 
<div style="background-color:orange;overflow: hidden;">
	<p style="margin:0; padding:0; float:left; width: 50%; text-align: center;"><a href="#" style="background-color:red;"><img src="" width="55" height="34"></a></p>
	<p style="margin:0; padding:0; float:right; width: 50%; text-align: center;"><a href="#" style="background-color:red;"><img src="" width="55" height="34"></a></p>
</div>

Dadurch verschwindet sicherlich auch dieser 2 Pixel Abstand unten.

Den Doctype solltest Du immer drinne lassen. Denn ohne Doctype kannst Du überhaupt nicht mehr sicher sein, wie ein Browser das dann darstellt.
 
Nein threadi, leider nicht. Ich wünschte Du hättest recht. Ich hab's hier mal als ganze Seite, einmal die p / br Version, dann meine span / Div und eine weitere Alternative mit ganz anderem display, nämlich table. Alle drei geben das gleiche aus.

Das Problem ist aber, dass die Divs nicht 32 Px hoch sind (hab jetzt mal das Bild ausgetauscht), sondern exakt 36.5833px. Den Wert kann man nachlesen, wenn man rechts drauf klickt und im FFox das Element bzw. die berechneten Werte des Stils untersucht. Nimmt man den Doctype raus, stimmt's aber auf einmal.

Das clear muss auf jeden Fall rein, wenn ich es weg lasse, verschmelzen nachfolgende Elemente.

HTML: 
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<div style="background-color:  Orange;">
 <p style="margin:0; padding:0; float:left; width: 50%; text-align: center;"><a href="#" style="background-color:red;"><img src="http://www.google.com/images/icons/ui/gprofile_button-32.png" width="32" height="32"></a></p>
 <p style="margin:0; padding:0; float:right; width: 50%; text-align: center;"><a href="#" style="background-color:red;"><img src="http://www.google.com/images/icons/ui/gprofile_button-32.png" width="32" height="32"></a></p>
   <br style="clear:both;">
</div>
<br />
<div style="background-color: Olive;">
 <span style="float:left; width: 50%; text-align: center; padding: 0px; margin: 0px;"><img src="http://www.google.com/images/icons/ui/gprofile_button-32.png" width="32" height="32"></span>
 <span style="float:left; width: 50%; text-align: center; padding: 0px; margin: 0px;"><img src="http://www.google.com/images/icons/ui/gprofile_button-32.png" width="32" height="32"></span>
   <div style="clear: both"></div>
</div>
<br />
<div id="" style="display: table; width: 100%">
   <span style="background-color: Silver; display: table-cell; width: 50%; text-align: center;"><img src="http://www.google.com/images/icons/ui/gprofile_button-32.png" width="32" height="32"></span>
   <span style="background-color: Maroon; display: table-cell; width: 50%; text-align: center;"><img src="http://www.google.com/images/icons/ui/gprofile_button-32.png" width="32" height="32"></span>
</div> 
<br />

</body>
</html>
 
Solche Pixelangaben kann doch kein Display ausgeben? Oo

Die Abstände solltest Du mit

Code: 
* { margin: 0;padding 0; }

generell für alle Elemente nullen.

Das <span> müsstest Du, wie schon gesagt, auch zu einem Blockelement machen damit es wie ein <p> wird. Dazu reicht die Angabe von
Code: 
display: block;
bei diesem Element. Ggfs. musst Du auch noch die Zeilenhöhe setzen um die Gesamthöhe zu verringern.
 
Lies Dir doch mal genau durch, was ich schreibe... 36.5833px will ich nicht setzen, sondern es wird gesetzt, wenn ich keine Höhe angebe. Dein letzter Satz ist aber die Lösung: "Ggfs. musst Du auch noch die Zeilenhöhe setzen um die Gesamthöhe zu verringern." - genau das ist es, gibt man den div / span / p auch eine 32px Höhe, verschwindet die Lücke. In meinem Fall funktioniert es dann ausreichend. Allerdings werden intern immer noch 36.5833px berechnet, markiert man das <a Tag wie hier mit roter farbe, ragt es unter dem Div raus und zwar in allen Browsern. Für mich jetzt kein Problem.

Ob das display auf block oder inline steht, macht keinen Unterschied, sowohl mit p, als auch mit span funktioniert es... schau doch mal - ich hab den Code dazu extra reingestellt, um es zu zeigen.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben