10 svar · 1 160 visningar · startad av Emil W
Hej alla Wf:are
Jag skullle vilja ha två boxar bredvid varann men vet inte hur jag ska lösa det.
Html-koden
<div class="ny"><a href="">
<img src="hemsida/orm.jpg">
</a>
<div class="list">Förslag eller Tips</div>
Har du tips eller förslag ? <br>så kan du lämna dom här
</div>
<div class="ny"><a href="">
<img src="hemsida/orm.jpg">
</a>
<div class="list">Min blogg</div>
Vill du läsa min blogg ? <br>så kan du läsa den här
</div>
Css-koden
.ny{
font-family:arial;
float:left;
font-size:8pt;
margin-left:400px;
margin-top:20px;
width:150px;
}
.ny img{
border:0px;
}
.list{
padding:3px;
width:144px;
color:#FFFFFF;
font-family:arial;
font-size:8pt;
font-weight:bold;
background-image:url(hemsida/list.png);
}
Du kan t.ex. gå in direkt i den ena div-taggen och lägga till t.ex. detta:
<div class="ny" style="float:left;">
..eller "right" istället för "left" om det passar bättre.
Men sen vill du nog ha lite avstånd mellan boxarna också, då kann du lägga till t.ex.
<div class="ny" style="float:leaft; margin-right:20px;">
eller nåt... typ...
Det funkade inte. Dom blev inte brevid varandra.
har du en parent-nod som är smalare än vad dina två boxar är? float:left skall lösa problemet normalt.
har du en parent-nod som är smalare än vad dina två boxar är? float:left skall lösa problemet normalt.
Vad är parent-nod för något ?
för jag har aldrig hört talas om det.
<div id="parent">
<div class="node"></div>
<div class="node"></div>
</div>
båda .node har #parent som en förälder nod
jag har ingen sån box runt.
Ge all genererad HTML kod, för det fungera som Danne V säger med float: http://jsbin.com/icoce4
Jag postar hela koden i stället för det funkade inte det kan vara någon annan box som stör att det inte funkar för mig.
body{
background:#000000;
margin-top:0px;
}
.box{
margin-left:150px;
width:1000px;
height:2000px;
}
.top{
background-image:url(hemsida/top.png);
color:#FFFFFF;
float:left;
width:995px;
height:100px;
}
.meny{
background-image:url(hemsida/meny.png);
padding-left:5px;
padding-top:3px;
color:#000000;
font-size:8pt;
float:left;
font-weight:bold;
font-family:arial;
width:990px;
height:18px;
}
.mitten{
background-image:url(hemsida/bg.png);
padding-left:5px;
padding-top:2px;
color:#000000;
width:990px;
float:left;
height:800px;
}
.bottom{
background-image:url(hemsida/bottom.png);
padding-left:5px;
padding-top:2px;
color:#FFFFFF;
font-family:verdana;
font-size:13px;
float:left;
font-weight:bold;
width:990px;
height:46px;
}
.meny a{
color:#000000;
text-decoration:none;
}
.meny a:hover{
color:#000000;
text-decoration:none;
}
.bottom a{
color:#FFFFFF;
text-decoration:none;
}
.bottom a:hover{
color:#FFFFFF;
text-decoration:none;
}
.logo{
width:250px;
height:50px;
margin-top:10px;
margin-left:10px;
}
.ny{
font-family:arial;
float:left;
font-size:8pt;
margin-left:400px;
margin-top:20px;
width:150px;
}
.ny img{
border:0px;
}
.list{
padding:3px;
width:144px;
color:#FFFFFF;
font-family:arial;
font-size:8pt;
font-weight:bold;
background-image:url(hemsida/list.png);
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<title>Emils hemsida</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="hemsida1.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="box">
<div class="top">
<div class="logo"><?php include('hemlogo.php'); ?></div>
</div>
<div class="meny"><a href="#">Startsida</a> - <a href="#">Galleri</a> - <a href="#">Om sida</a></div>
<div class="mitten">
<div class="ny"><a href="">
<img src="hemsida/orm.jpg">
</a>
<div class="list">Förslag eller Tips</div>
Har du tips eller förslag ? <br>så kan du lämna dom här
</div>
<div class="ny"><a href="">
<img src="hemsida/orm.jpg">
</a>
<div class="list">Min blogg</div>
Vill du läsa min blogg ? <br>så kan du läsa den här
</div>
</div>
<div class="bottom">
© Emil Wiklund 2010 - <a href="#" title="Emil Wiklund har byggt denna webbplats">Sidan gjord av Emil Wiklund</a>
</div>
</div>
</body>
</html>
För det första så har du ju en förälder till dina .ny, .mitten är ju deras förälder.
Och du har för bred, eller en riktigt överdriven padding på dina element, om jag ändrar width på .ny till 95px så hamnar dom rätt.
.mitten har en bredd på 990px, om du skall ha padding på den så få du räkna bort den på din width, exempelvis:
.mitten {
width: 990px;
padding: 10px;
}
så kommer alla dina element inne i den (som är block element) ta upp 990-20px (10px på båda sidorna).
Tack så mycket för hjälpen voigtann1 och Danne V.