Div lägger sig under annan div

8 svar · 653 visningar · startad av SimOnline 19 maj 2006

SimOnlineMedlem sedan juli 20031 132 inlägg

Frågan19 maj 2006 07:59#1

Jag har lite problem enligt bifogade skärmdump. Som ni ser flyter den rosa rutan ut under bilden. Jag skulle vilja att så länge texten ovanför är så kort att den rosa rutan hamnar ovanför bildens nederkant ska den krympas ihop till bredden på textstycket. Men om rutan pga textens längd hamnar under bilden ska den ha full bredd.

Html-kod:

<div id="latestpost">
			<img src="senaste.gif" />
			<div class="wrapper">
				<div id="bloggbild">
					<img src="barto-01.jpg" /></div>
				
				<div id="entry">
					<h1>Phasellus vel dui Barto <span id="timestamp">12 maj</span></h1>
					<p><--- text ---></p>
				</div>
				<div id="latestpostmeta">
					<p><--- text i den rosa rutan ---></p>
				</div>
				<div class="clear">
				</div>	
				
			</div>
			
			<img src="latest_footer.gif" class="footer" /></div>

CSS-kod:

#latestpost {
	background-image:url(latest_bg.gif);
	background-repeat:repeat-y;
	padding:0;
}

.wrapper {
	padding:5px 50px;
}

#bloggbild {
border:5px solid #fff;
float:left;
margin-right:20px;
padding:0;
}

#bloggbild img {
margin:0;
padding:0;
}

.clear {
clear:both;
}

#latestpostmeta {
background-color:#FCF4F5;
color:#999999;
padding:0;
font-size:70%;
border:1px solid #F1A7AB;
margin-top:10px;
text-align:center;
}

#entry {
}

Tacksam för hjälp :)

stephanMedlem sedan feb. 2006117 inlägg

22 maj 2006 07:33#2

Är verkligen koden du postade komplett?

Klippte in i dreamweaver för att testa, men sidan blir inte som på bilden...

wally_91Medlem sedan feb. 2006511 inlägg

22 maj 2006 08:04#3

koden e ju inte komplett!

wally_91Medlem sedan feb. 2006511 inlägg

22 maj 2006 08:05#4

den sista <div> är fel placerad. Den ska vara längst in i hörnet under den första div-taggen.

tantenMedlem sedan nov. 20051 596 inlägg

22 maj 2006 08:28#5

Jag skulle nog ha haft allt i en div med float left på bilden och class på de andra "sakerna".
Men varför har du en h1 här? Kommer det då inte att komma fler h1:or på samma sida? Varför inte ha en stylad p i stället?

SimOnlineMedlem sedan juli 20031 132 inlägg

22 maj 2006 21:28#6

wally_91 skrev:

koden e ju inte komplett!

Vad skulle behövas mer menar du? Ni har ju fått allt som gäller just detta.

wally_91 skrev:

den sista <div> är fel placerad. Den ska vara längst in i hörnet under den första div-taggen.

Hur menar du egentligen? Kan du utveckla dig lite?

tanten skrev:

Jag skulle nog ha haft allt i en div med float left på bilden och class på de andra "sakerna".

Allt ligger ju i en div (.wrapper) och bilden har ju redan float:left. Varför skulle de andra ha class för? De förekommer ju bara en gång på sidan, och det skulle ju inte avhjälpa mitt problem.

tanten skrev:

Men varför har du en h1 här? Kommer det då inte att komma fler h1:or på samma sida? Varför inte ha en stylad p i stället?

Jag har h1 för att det är en rubrik och då ska h*-taggarna användas (http://24timmarsbloggen.se/arkiv/2005/01/riktlinje_515aa.php)

Varför skulle det spela nån roll att det förekommer flera h1:or på samma sida?

zcorpanMedlem sedan dec. 20042 245 inlägg

22 maj 2006 22:25#7

#latestpostmeta { clear:left; }

[ins] Jaha, bra att jag läser igenom frågan ordentligt innan jag svarar... :r

Jag är osäker på om det går öht. Floatade boxar påverkar bara subsekventa radboxar, inte blockboxar.
[/ins]

NiponMedlem sedan juli 2003270 inlägg

23 maj 2006 07:59#8

SimOnline skrev:

Varför skulle det spela nån roll att det förekommer flera h1:or på samma sida?

Kolla den här tråden. :)

http://www.webforum.nu/showthread.php?t=143869

tantenMedlem sedan nov. 20051 596 inlägg

23 maj 2006 12:48#9

Allt ligger ju i en div (.wrapper) och bilden har ju redan float:left. Varför skulle de andra ha class för? De förekommer ju bara en gång på sidan, och det skulle ju inte avhjälpa mitt problem.

Ok, kanske lite överdrivet med class på allt, det är bara jag som brukar använda bild inne i samma div som flytande text. Kan du inte prova med att göra om bara
detta till class då och se om du får som du vill. <p class="latestpostmeta"> och lägga in den direkt efter </div> för entry-diven och ha samma värden för .latestpostmeta{.... som du nu har för #latestpostmeta men att du lägger till float:left;
För säkerhets skull så hade jag nog satt höjden på bilden också i css.
Jag tror du får som du vill då.

Fast å andra sidan kan det ju räcka med float på #latestpostmeta också. Kan vara jag som tänker på aldeles för mycket flytande text, för som det är nu så kommer inte din rosa textruta att flyta om den bara delvis kommit en bit under bilden. Då kommer den fortsätta rakt ner. Vill du den ska flyta runt bilden så ska all text in i samma div som bilden...