FlashesMedlem sedan jan. 2003282 inlägg Vill göra så här
Bild 1 | | Bild 2
-------| |-------
-------| |-------
Bild 3 | | Bild 4
Jag vill alltså ha fyra bilder med ett kors i mellan.
Min sida ser ut så här, bara ett test
<html>
<head>
<style type="text/css">
.cont { position: relative;
width: 150px;
}
.vt {float: left;
margin-bottom: 5px;
border-right: 1px solid black;
border-bottom: 1px solid black;
padding: 2px;
}
.ht { float: right;
margin-left: 5px;
margin-bottom: 5px;
border-left: 1px solid black;
border-bottom: 1px solid black;
padding: 2px;
}
.vb { float: left;
border-right: 1px solid black;
border-top: 1px solid black;
padding: 2px;
}
.hb { float: right;
margin-left: 5px;
border-left: 1px solid black;
border-top: 1px solid black;
padding: 2px;
}
</style>
</head>
<body>
<div class="cont">
<div class="vt"><img src="vanster_top.jpg" alt="Vänster Top"></div>
<div class="ht"><img src="hoger_top.jpg" alt="Höger Top"></div>
<div class="vb"><img src="vanster_bot.jpg" alt="Vänster Botten"></div>
<div class="hb"><img src="hoger_bot.jpg" alt="Höger Botten"></div>
</div>
</body>
</html>
Det fungerar om jag sätter width i cont till rätt värde 2 x bildbredd + 10px
Men annar så hamnar bild 3 och 4 på samma rad som bild 1 och 2. Hur löser jag detta?
Mvh
Jan-Olov
PalleMedlem sedan apr. 20003 174 inlägg En variant:
[red]<html>
<head>
<style type="text/css">
.vt {
float: left;
margin-bottom: 5px;
border-right: 1px solid black;
border-bottom: 1px solid black;
padding: 2px;
}
.ht {
float: left;
margin-left: 5px;
margin-bottom: 5px;
border-left: 1px solid black;
border-bottom: 1px solid black;
padding: 2px;
}
.vb {
clear: left;
float: left;
border-right: 1px solid black;
border-top: 1px solid black;
padding: 2px;
}
.hb {
float: left;
margin-left: 5px;
border-left: 1px solid black;
border-top: 1px solid black;
padding: 2px;
}
</style>
</head>
<body>
<div class="vt"><img src="vanster_top.jpg" alt="Vänster Top"></div>
<div class="ht"><img src="hoger_top.jpg" alt="Höger Top"></div>
<div class="vb"><img src="vanster_bot.jpg" alt="Vänster Botten"></div>
<div class="hb"><img src="hoger_bot.jpg" alt="Höger Botten"></div>
</body>
</html>[/red]
FlashesMedlem sedan jan. 2003282 inlägg Tyvärr, höger botten hamnar uppe bredvid höger topp.
Vänster botten hamnar däremot där den ska.
Mvh
Jan-Olov
PalleMedlem sedan apr. 20003 174 inlägg Gör så här då: ;)
[red]<html>
<head>
<style type="text/css">
.vt {
margin-bottom: 5px;
border-right: 1px solid black;
border-bottom: 1px solid black;
}
.ht {
margin-left: 5px;
margin-bottom: 5px;
border-left: 1px solid black;
border-bottom: 1px solid black;
}
.vb {
border-right: 1px solid black;
border-top: 1px solid black;
padding: 2px;
}
.hb {
margin-left: 5px;
border-left: 1px solid black;
border-top: 1px solid black;
}
</style>
</head>
<body>
<img src="vanster_top.jpg" alt="Vänster Top" class="vt"><img src="hoger_top.jpg" alt="Höger Top" class="ht"><br>
<img src="vanster_bot.jpg" alt="Vänster Botten" class="vb"><img src="hoger_bot.jpg" alt="Höger Botten" class="hb">
</body>
</html>[/red]
FlashesMedlem sedan jan. 2003282 inlägg Jo jag började så, men då fungerar inte padding: 2px;
fast bilderna ligger ju som dom ska.
Linjen i krysset hamnar då dikt mot bilderna, det var därför jag la dom i en div.
Använde din kod för att styra divarna istället, då hamnade alla bilderna under varandra.
Mvh
jan-Olov
FlashesMedlem sedan jan. 2003282 inlägg Fick hjälp av mikkeX, så här är resultatet om någon är intresserad.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
.vt {
float: left;
margin-bottom: 5px;
border-right: 1px solid black;
border-bottom: 1px solid black;
padding: 2px;
}
.ht {
float: left;
margin-left: 5px;
margin-bottom: 5px;
border-left: 1px solid black;
border-bottom: 1px solid black;
padding: 2px;
}
.vb {
clear: left;
float: left;
border-right: 1px solid black;
border-top: 1px solid black;
padding: 2px;
}
.hb {
float: left;
margin-left: 5px;
border-left: 1px solid black;
border-top: 1px solid black;
padding: 2px;
}
#clear
{
clear: left;
visibility:hidden;
}
</style>
</head>
<body>
<div class="vt"><img src="bilder/test_bild.png" alt="Vänster Top" width="149" height="89"></div>
<div class="ht"><img src="bilder/test_bild.png" alt="Höger Top" width="149" height="89"></div>
<hr id="clear">
<div class="vb"><img src="bilder/test_bild.png" alt="Vänster Botten" width="149" height="89"></div>
<div class="hb"><img src="bilder/test_bild.png" alt="Höger Botten" width="149" height="89"></div>
</body>
</html>
Tack mikkeX!
Mvh
Jan-Olov
