J-C
Lounge-Member
So ... ich hätte da gern mal wieder ein CSS-Problem.
man stelle sich vor ich habe eine reihe von (News)-Artikeln, jeweils mit Bild und Text.
nun sollen Bild und text jeweils abwechselnd rechts bzw links angeordnet sein - also etwa so:
BILD TEXT
TEXT BILD
BILD TEXT
TEXT BILD
...
nur leider bekomme ich das irgendwie nicht hin ... muss wohl im moment einen Knotenim Kopf haben ...
im Moment hab ich da zwei verschiedene Ansätze
und der CSS-Code dazu:
man stelle sich vor ich habe eine reihe von (News)-Artikeln, jeweils mit Bild und Text.
nun sollen Bild und text jeweils abwechselnd rechts bzw links angeordnet sein - also etwa so:
BILD TEXT
TEXT BILD
BILD TEXT
TEXT BILD
...
nur leider bekomme ich das irgendwie nicht hin ... muss wohl im moment einen Knotenim Kopf haben ...
im Moment hab ich da zwei verschiedene Ansätze
Code:
<div id='day1'>
<div id='day1header' class='day1header'></div>
<!-- Ansatz 1 -->
<div class='entry'>
<div class='picture leftpic'><img src='images/test.jpg' />
<div class='descriptiontext rightdescription'>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy </div></div>
<!-- Ansatz 2 -->
<p class='descriptiontext leftdescription' style="color: #F00">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
</p>
<img src='images/test.jpg' class='picture rightpic' />
</div>
und der CSS-Code dazu:
Code:
.day1header {
background-image: url(../images/day_01.jpg);
width: 400px;
height: 75px;
margin-bottom: 30px;
}
.descriptiontext {
border: 1px solid #000;
text-indent: 10px;
width: 250px;
margin-bottom: 50px;
position: relative;
top: 0px;
}
.rightdescription {
position: relative;
left: 150px;
}
.leftdescription {
position: relative;
left: 0px;
}
.picture {
border: 1px solid #000;
width: 150px;
height: 150px;
position: relative;
top: 0px;
}
.leftpic {
position: relative;
left: 0px;
}
.rightpic {
position: relative;
left: 260px;
}