sabbacusMedlem sedan juli 2002630 inlägg Tjenamoss. Jag undrar hur man placerar en div så att dess position ändras utefter storleken på en annan div.
jag har två div:ar
<div class="namn1">text</div>
och
<div class="namn2">annan text</div>
Jag vill att namn2-div:en alltid ska ligga, t.ex. fem pixlar nedanför slutet på namn1-div:en
Ungefär som en ny rad i en tabell alltså.
css:en till namn1:
div.namn1{
position:absolute;
width: 400px;
left: 170px;
top: 10px;
background-color: #000000;
layer-background-color: #000000;
}
Tacksam för hjälp.
/S
PallemanMedlem sedan dec. 2000557 inlägg Måste div1 ligga som position:absolute ?
Om det inte är ett måste kan du ju lösa det på dätta sätt:
<html><head>
<style type="text/css">
<!--
div.namn1{
width: 400px;
left: 170px;
top: 10px;
background-color: #000000;
layer-background-color: #000000;
}
div.namn2{
width: 400px;
margin: 5px 0px 170px 0px;
background-color: #ccc;
}
//-->
</style>
</head><body>
<div class="namn1">text</div>
<div class="namn2">annan text</div>
</body></html>
sabbacusMedlem sedan juli 2002630 inlägg Ska testa detta.
Vad har position:absolute för funktion eg. om man nu kan vara utan den ( i detta fall)?
Jag ska läsa på om det under dagen, men jag antar att det blir lättare att fatta om någon beskriver der i vardagligt språk.
/S
sabbacusMedlem sedan juli 2002630 inlägg Har nu testat utan position:absolute, och då lägger sig allt på vänsterflanken (d.v.s. den högra rutan" (se länk nedan) lägger sig åt vänster den med :-/)
Det jag skulle vilja är att de två gula rutorna är placerade där de är medan den gråa rutan ska placeras under den högra rutan. Detta verkar inte gå någet vidare när jag sitter bakom tangenterna :-/
Antar att någon får ge mig en lektion i hur man _ska_ bygga hemsidor med <div>:ar å stilmallar
:)
/S
(namn1 = left, namn2 = right)
Sidan:
http://www.wadur.vxu.se/songbook/index.php
Stilmall:
http://www.wadur.vxu.se/songbook/style.css
sabbacusMedlem sedan juli 2002630 inlägg Kan tillägga att den gråa rutan knappt syns i IE då den ligger bakom de två andra rutorna. Kolla emellan den två gula så synd lite av den :)
PallemanMedlem sedan dec. 2000557 inlägg Detta borde fungera bättre..
Det jag har gjort är..
1. Plockat bort Position:absolue från stylemallen då detta attribut gör själva div´en till ett layer, och det vill vi inte.
2. Skapat en ny div som heter div.block, inne i denna div placerar vi div.left och div.right. Eftersom vi har en fast bredd på div.block lägger vi div.left flytande till vänster och div.right flytande till höger.
3. Flyttat ut div.credits och lagt den under div.block.
CSS-mall:
[FONT=arial][RED]body {
background-color: #fff; /*Vit*/
font-family: verdana;
font-size: 10px;
}
div.block {
width: 555px;
background-color: #fff;
}
div.left {
float: left;
padding: 3px;
border: 1px solid #000;
width: 150px;
background-color: #ffffcc;
}
div.right {
float: right;
padding: 3px;
border: 1px solid #000;
width: 400px;
background-color: #ffffcc;
}
div.credits {
text-align: center;
width: 555px;
margin: 5px 0px 0px 0px;
background-color: #ccc;
}
/*div.xcredits{
text-align: center;
float: bottom;
width: 400px;
left: 170px;
padding: 3px;
margin: 1px;
background-color: transparent;
background-color: #ffcc66;
layer-background-color: #ffcc66;
}*/
a {
text-decoration: none;
color: #2A4485;
font-size: 10px;
}
a:hover {
color: #ff0000;
text-decoration: underline;
}[/RED][/FONT]
HTML:
[FONT=arial][RED]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<META name="Author" content="Magnus Karlsson (sabbacus@linux.nu)">
<META name="description" content="Sångbo©ken - [url]http://www.wadur.vxu.se[/url]">
<META name="keywords" content="wadur, wädur, väsjö, sångbok, studentsånger, fest, phest, studentajävel, holkas">
<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<LINK rel="stylesheet" type="text/css" href="style.css">
<title>Sångbo©ken online</title>
</head>
<body>
<div class="block">
<div class="left">
<b class="center">Visa</b><br>
<a href="view.php?view=category">Visa kategorier</a><br>
<b class="center">Söka</b><br>
<a href="search.php">sök sång</a><br>
<b class="center">Övrigt</b><br>
<a href="index.php">Start</a><br><br>
<a href="http://validator.w3.org/check/referer"><img border="0" src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01!" height="31" width="88"></a>
</div>
<div class="right">
<b>Sångbo©ken online</b><br>
Välkommen till onlineversionen av <a href="http://www.wadur.vxu.se">Wädurs</a> sångbo©k.
</div>
</div>
<div class="credits">
<a href="http://www.wadur.vxu.se" class="credits">©</a> 2002 <a href="http://www.wadur.vxu.se">wädur</a>
</div>
</body>
</html>[/RED][/FONT]
sabbacusMedlem sedan juli 2002630 inlägg Fick pula lite (555px var för lite) men nu funkar det jättebäst.
Tackar!
http://www.wadur.vxu.se/songbook/index.php
PallemanMedlem sedan dec. 2000557 inlägg Aha, läste fel i din text, trodde den gråa rutan skulle ligga underst.. :OO
Kul att det fungerar bra nu! :)
sabbacusMedlem sedan juli 2002630 inlägg Den skulle ligga underst i koden jag skickade men jag tyckte att den blidde snyggare om man lade den där den ligger nu.
