Korleis plassere to elementer på kvar sin side?

[siDDis]

Eg skal plassere tittel og timestamp under ein div som ser sånn ut:

 

<div class="newsbox_top">
			<div class="topic">
				Hei!
			</div>

			<div class="timestamp">
				24-12-2007 12:44:00
			</div>
		</div>

 

Problemet er at når eg gjer dette så kjem timestamp ein linje under mens eg vil egentleg ha dei på samme linja? Må eg får til ein spessiell CSS hack?

[exess15]

slett..

 

/Jan Tore

Endret 27. desember 2006 av exess15

[Ståle]

<div> brukes vel om en divisjon av siden, aka en del. <div> er blokkelementer, og ikke inline. Du kan vel prøve display:inline; men jeg tror ikke det er løsningen som er lurest.

 

Må du bruke <div>? Er <span> et alternativ?

[Anders Moen]

Jeg hadde brukt:

 

<div class="newsbox_top">
<div class="topic" style="float: left;">
Hei!
</div>

<div class="timestamp" style="float: left;">
24-12-2007 12:44:00
</div>
</div>

 

Du legger selvfølgelig float: left; inn i CSS fila hvor topic og timestamp står ^^

[Ståle]

Han vil ha de på samme linjen, ikke underhverandre, som han får nå og som den koden din vil gjøre.

[Anders Moen]

Den gjør ikke det, jeg bruker den der hele tida.

<div class="newsbox_top"> <-- Hvis denne er 500px -->

<div class="topic" style="float: left;"> <!-- Denne er 200px -->

Hei!

</div>

 

<div class="timestamp" style="float: left;"> <!-- 300px -->

24-12-2007 12:44:00

</div>

</div>

 

Og hvis du går til http://www.andersmoen.hotserv.dk, ser på kilden til menyen vil du se hva jeg mener og at det funker helt perfekt! Først prøvde jeg uten float: left; der, og da gikk de bare under hverandre

Endret 27. desember 2006 av Andy-Pandy

[Ståle]

Javell ok. Men det er ihvertfall en dårlig løsning.

[Anders Moen]

Ja vel, men den fungerer helt fint.

Hva skal man bruke i stedet for den da?

 

Ståle, du kan PHP, les signaturen min lol

Endret 27. desember 2006 av Andy-Pandy

[Ståle]

Et inline element, som span hvis det er mulig.

[siDDis]

Eksempelet til Andy Pandy gjer at den div'en som skal innhalde nyheita presser seg då inn mellom dei to på siden min

 

Korleis vil eit inline element span lausning sjå ut?

[Ståle]

<div class="newsbox_top">

<span class="topic">

Hei!

</span>

 

<span class="timestamp">

24-12-2007 12:44:00

</span>

</div>

 

 

eller så kan du prøve å sette display:inline; på timestamp og topic.

[siDDis]

Flott det funka jo fint, finnes det ein måte å få plassert timestamp heilt til høgre?

[Ståle]

span.timestamp {

text-align: right;

}

 

i css filen

[siDDis]

Det var det eg først trodde, men det går ikkje

[Ståle]

Du må også tilegne newsbox_top bredden av hvor langt det skal være mellom topic og timestamp.

[siDDis]

Korleis blir det gjort? noko ala width-between?

[Ståle]

newsbox_top {

width: 1px;

}

[siDDis]

Det som skjer då er at det blir ein linje for kvart ord.

 

Heller 500px hjelper ikkje.

 

div class="newsbox_top">
			<span class="topic">
				Hello World				</span>
					<span class="timestamp">
				2006-12-23				</span>

		</div>
				<div class="newsbox_body">
			Hello this is the first value.			</div>
		<div class="newsbox_bottom">
			Comments
		</div>

 

Sånn ser CSS elementene ut

 

div.newsbox_top {
font-weight: bolder;
background:       #BACAFF;
border-top: #6581C7 1px dashed;
border-left: #6581C7 1px dashed;
border-right: #6581C7 1px dashed;
border-bottom: 1px solid;
width: 505px;
}
span.topic {
letter-spacing: 4px;
font-weight: bolder;
background:       #BACAFF;
}
span.timestamp {
text-align: right;
font-weight: bolder;
background:       #BACAFF;
}
div.newsbox_body {
background:       #BACAFF;
 	font-size:        100%;
border-left: #6581C7 1px dashed;
border-right: #6581C7 1px dashed;
}
div.newsbox_bottom {
border-top: 1px solid;
border-left: #6581C7 1px dashed;
border-right: #6581C7 1px dashed;
border-bottom: #6581C7 1px dashed;
background:       #BACAFF;
 	font-size:        100%;
 	margin:           0px 0px 30px 0px;
/*float: bottom;*/
text-align:       left;
}