Push-Nachrichten von MacTechNews.de
Würden Sie gerne aktuelle Nachrichten aus der Apple-Welt direkt über Push-Nachrichten erhalten?
Forum>Entwickler>HTML Frage

HTML Frage

breaker
breaker10.05.1019:21
Es geht um folgendes: Drei Spalten nebeneinander.
280x3 (Spaltenbreite) + 2x20px (Steg) = 880 Pixel

Müsste also nebeneinander passen. Wenn ich die DIV-Blöcke (Spalte 1-3) in eine Zeile packen, passt es auch. Der Ordnung und der späteren Übersicht halber wollte ich sie wie unten zu sehen untereinander packen. Der Browser interpretiert das aber als ein Leerschritt zwischen den Spalten, also rutscht die dritte Spalte nach unten (Safari und Firefox).

Hat jemand eine Idee, wie ich das lösen kann? Also das das vom Browser interpretierte Leerzeichen verschwindet.

<div style="margin-top: 40px; width: 880px;">
<div class="spalte1">Spalte 1</div>
<div class="spalte2">Spalte 2</div>
<div class="spalte3">Spalte 3</div>
</div>


.spalte1
    {
    width: 280px;
    margin-left: 0px;
    position: relative;
    display:inline-block;
    zoom: 1;                /*nasty IE 7 Workaround*/
    *display: inline;        /*nasty IE 7 Workaround*/
    vertical-align: top;
    background: red;
    }

.spalte2
    {
    width: 280px;
    margin-left: 20px;
    position: relative;
    display:inline-block;
    zoom: 1;                /*nasty IE 7 Workaround*/
    *display: inline;        /*nasty IE 7 Workaround*/
    vertical-align: top;
    background: red;
    }
    
.spalte3
    {
    width: 280px;
    margin-left: 20px;
    position: relative;
    display:inline-block;
    zoom: 1;                /*nasty IE 7 Workaround*/
    *display: inline;        /*nasty IE 7 Workaround*/
    vertical-align: top;
    background: red;
    }

Danke
0

Kommentare

kcnb8
kcnb810.05.1019:57
Lasse die Spalten links floaten, siehe hier:

.spalte1 {width:280px;background:red;float:left}
.spalte2 {width:280px;margin-left:20px;background:red;float:left;}
.spalte3 {width:280px;margin-left:20px;background:red;float:left;}

Dann passt das auch mit den Div-Tags untereinander.
„"Life on Earth may be quite expensive, but it includes a free annual trip around the sun." - Ashleigh Brilliant“
0
breaker
breaker10.05.1020:04
Danke.
Wie lautet jetzt noch mal der Trick, dass der dahinter liegende Seiten-Wrapper wieder wie zuvor mit nach unten läuft? Also mit der Höhe der Spalten mitwandert?

#wrapper
    {
    width: 880px;
    padding: 0px 60px 0px 30px;
    margin: 0px auto;
    text-align: left;
    position: relative;
    background: #f7c9dd;
    }


<br clear="all"> oder, gibts da auch eine schönere CSS Variante?
0
kcnb8
kcnb810.05.1020:11
#wrapper{
width: 880px;
padding:30px;
margin: 0px auto;
text-align: left;
position: relative;
background: #f7c9dd;
overflow:auto;
}
„"Life on Earth may be quite expensive, but it includes a free annual trip around the sun." - Ashleigh Brilliant“
0
kcnb8
kcnb810.05.1020:16
Achso, und natürlich die Pflichtlektüre: (Selfthtml)
„"Life on Earth may be quite expensive, but it includes a free annual trip around the sun." - Ashleigh Brilliant“
0
breaker
breaker10.05.1020:39
Jau, danke dir.
0

Kommentieren

Diese Diskussion ist bereits mehr als 3 Monate alt und kann daher nicht mehr kommentiert werden.