Jag har i koden nedanför skapat 5 st rutor i önskad storlek och placering. Hej "float:none;" på itemStory var väl det enda som behövdes, och TACK! så jättemycket =)CSS-design-problem, svårt?
Allt fungerar bra i FF, men tyvär så är det 1 ruta som flyttar sig i IE.
Om ni kopierar all kod och skapar ett eget dokument så kommer ni se den rutan färgad i blå/lila färg.
Meningen är att den färgade rutan ska ligga längst ner till höger, till höger om den vita rutan till vänster. Inte som nu, tvärs över den större av dom vita rutorna(vilket gör att det ser ut som att det är 6 st block).
(Alla vita rutor är där dom ska, och det ska fungera i både IE och FF)
<code>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
.itemPicture {
width:180px;
height:180px;
text-align:center;
float:left;
}
.itemInfo {
width:372px;
height:95px;
text-align:left;
background:#FFFFFF;
border:1px #AAAAAA solid;
padding:10px;
float:left;
}
.itemVotes {
width:372px;
height:21px;
text-align:left;
background:#FFFFFF;
border:1px #AAAAAA solid;
padding:10px;
overflow:hidden;
position:relative;
top:20px;
float:left;
}
.itemStory {
width:528px;
height:76px;
text-align:left;
background:#FFFFFF;
--background-attachment: fixed;
border:1px #AAAAAA solid;
padding:22px;
overflow:auto;
position:relative;
top:20px;
float:left;
clear:both;
}
.itemScreens {
width:231px;
height:76px;
text-align:left;
background:#FFFFFF;
border:1px #AAAAAA solid;
padding:22px;
overflow:auto;
position:relative;
top:40px;
float:left;
clear:both
}
.itemPerson {
width:231px;
height:76px;
text-align:left;
background:#AAAAFF;
border:1px #AAAAAA solid;
padding:22px;
overflow:auto;
position:relative;
top:40px;
left:20px;
float:left;
}
</style>
</head>
<body>
<div style="width:800px;margin:auto">
<div class="itemPicture"></div>
<div class="itemInfo"></div>
<div class="itemVotes"></div>
<div class="itemStory"></div>
<div class="itemScreens"></div>
<div class="itemPerson"></div>
</div>
</body>
</html>
</code>Sv: CSS-design-problem, svårt?
Inte helt lätt att få till det men så här blev det: (visar bara CSS eftersom det är där jag ändrade)
Ser hyfsat lika ut både i IE och FF
<code>
<style>
.itemPicture {
width:180px;
height:180px;
text-align:center;
float:left;
border:1px #AAAAAA solid;
}
.itemInfo {
width:372px;
height:95px;
text-align:left;
background:#FFFFFF;
border:1px #AAAAAA solid;
padding:10px;
float:left;
}
.itemVotes {
width:372px;
height:23px;
text-align:left;
background:#FFFFFF;
border:1px #AAAAAA solid;
padding:10px;
overflow:hidden;
position:relative;
top:20px;
float:left;
}
.itemStory {
width:528px;
height:76px;
text-align:left;
background:#FFFFFF;
--background-attachment: fixed;
border:1px #AAAAAA solid;
padding:22px;
overflow:auto;
position:relative;
top:20px;
float:none; '<== satte float:none på den
clear:both;
}
.itemScreens {
width:231px;
height:76px;
text-align:left;
background:#FFFFFF;
border:1px #AAAAAA solid;
padding:22px;
overflow:auto;
position:relative;
top:40px;
float:left;
clear:both
}
.itemPerson {
width:231px;
height:76px;
text-align:left;
background:#AAAAFF;
border:1px #AAAAAA solid;
padding:22px;
overflow:auto;
position:relative;
top:40px; '<== ändrade top till 40
left:20px;
float:left;
}
</style>
</code>
Hoppas det var så här du ville ha det.
//Anna-KarinSv: CSS-design-problem, svårt?