Gå til innhold

[Løst]Posisjonere div'er ved siden av hverandre.

Tha_MullE

Anbefalte innlegg

Tha_MullE

Tha_MullE

Skrevet
Skrevet

Hei, jeg prøver og posisjonere divene mine, slik at img diven min, står RETT under link diven min uten noe som helst mellomrom, og at text diven min står der den står nå. Har prøvd float i alle retninger uten noe som helst "bra" resultat.

 

Her er Html kodene

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Horten. Lokal og Turist.</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">
<div id="header">
  <img src="img/header.jpg.jpg" width="900" height="214" />

</div>
  <div id="navigation">

 <ul id="MenuBar1" class="MenuBarHorizontal">
   <li><a href="index.html">Hjem</a>	   </li>
   <li><a href="Nyheter.html">Nyheter</a></li>
   <li><a href="Horten.html">Om Horten</a>	   </li>
   <li><a href="Attraksjoner.html" class="MenuBarItemSubmenu">Attraksjoner</a>
	 <ul>
	   <li><a href="Familier.html">For Familier</a></li>
	   <li><a href="Eldre.html">For Eldre</a></li>
	 </ul>
   </li>
   <li><a href="Kontakt.html">Kontakt oss</a></li>
 </ul>
</div>
	   <div id="link">
<ul>
<li><a href="http://www.vg.no"target="_blank">Verdens gang.no</a></li>
<li><a href="http://www.db.no"target="_blank">Dagbladet.no</a></li>
<li><a href="http://www.aftenposten.no"target="_blank">Aftenposten.no</a></li>
<li><a href="http://www.gjengangeren.no"target="_blank">Gjengangeren.no</a></li>
<li><a href="http://vfk.hvs.no"target="_blank">Horten VGS</a></li>

</ul>


</div>
 <div id="text">
<h1> Hjem </h1>
<p> hallo hallo hallo < /br> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nisi mi, dapibus non lacinia sit amet, sagittis fringilla odio. Aenean sit amet dolor vitae ante imperdiet accumsan ut id ipsum. Mauris ac mi sit amet eros pharetra posuere. Sed sed dui velit, eu luctus neque. Ut sed magna non mauris placerat aliquet. Duis augue ante, aliquam eu fermentum ut, tincidunt vel tellus. Nunc in lectus quis enim tempus congue. Cras lacinia egestas nisl, ut facilisis dui placerat eu. Morbi sit amet leo sit amet leo ultricies posuere vel sit amet diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut vestibulum sodales ligula, et vestibulum metus pulvinar ut. Aliquam erat volutpat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 

Cras eget tellus vitae leo sollicitudin aliquet. Donec semper justo vel erat suscipit placerat. Fusce egestas lectus sed magna dignissim euismod congue dui malesuada. Aliquam a porta dui. Phasellus tincidunt viverra erat eget lobortis. Etiam fringilla aliquet pulvinar. Duis lobortis massa libero. Proin sed urna et eros euismod placerat quis nec diam. Praesent eu congue felis. Pellentesque a dolor vel dolor dignissim varius. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris dignissim, odio eget feugiat pharetra, mi turpis adipiscing sem, vitae congue lectus elit id lorem.</p>
</div>

<div id="img">

<img src="skisse.jpg" width="170" height="170" />
<img src="skisse.jpg" width="170" height="170" />
<img src="skisse.jpg" width="170" height="170" />
<img src="skisse.jpg" width="170" height="170" />
<img src="skisse.jpg" width="170" height="170" />
<img src="skisse.jpg" width="170" height="170" />
<img src="skisse.jpg" width="170" height="170" />
<img src="skisse.jpg" width="170" height="170" />
<img src="skisse.jpg" width="170" height="170" />
<img src="skisse.jpg" width="170" height="170" />
<img src="skisse.jpg" width="170" height="170" />
<img src="skisse.jpg" width="170" height="170" />

</div>


<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>

 

Her er Css kodene:

body{
background-color:#FFF
}
#container {
background: #FFF;
margin-top:0;
margin-bottom:0px;
margin-left:auto;
margin-right:auto;
width:900px;
position:relative;
clear:both;

}
#header {
background-position:center;
font-family:Arial, Helvetica, sans-serif;

}


#link ul{
margin:0;
padding:0;
float:left;
width:179px;
background-color:#EEE;
list-style-type:none;
border-top-style:none;
border-top-width:3px;
border-top-color:AAA;
text-align:center;
position:relative;



}
#link ul li a{
width:179px;
margin:0;
padding:0;
float:left;
display:block;
text-align:center;
font-size:18px;
line-height:37px;
text-decoration:none;
border-top: 1px solid #000;
border-right: 1px solid #000;
border-left: 1px solid #000;
border-bottom: 1px solid #000;

}
#link ul li a:hover{
background-color:#CCC;
text-decoration:underline;
}
#img{
overflow:scroll;
height:490px;
width:179px;
float:left;
text-align:center;
position:relative;
clear:none;

}
#text{
text-align:center;
float:left;
position:relative;
width:719px;
border:1px solid #000;

}

 

Takker for alle svar!

Lenke til kommentar

Videoannonse

Videoannonse
Annonse
Themecreator

Themecreator

Skrevet
Skrevet (endret)

jeg ville prøvd å "tvinge" diven oppover. Den kan fungere litt dårlig om du da skifter på bredden osv, men etter scripten du har lagt ved, så fungerer det.

 

#img{

overflow:scroll;

height:490px;

width:179px;

float:left;

text-align:center;

position:relative;

clear:none;

margin-top:-163px;

}

 

-163px verdien kan du skifte til hva du vil. Jo større den er, jo høyere opp vil diven bli plassert.

Endret av Themecreator
Lenke til kommentar
sxxxe83

sxxxe83

Skrevet
Skrevet (endret)

Var det noe sånt du tenkte på? Vet ikke helt om det var den beste løsningen, men så nå ut til å fungere om jeg forstod riktig...

 

Img div ligger rett under link div uten mellomrom.

 

Kasta på en </div> // End Container div langt der nede...

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Horten. Lokal og Turist.</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">
<div id="header">
  <img src="img/header.jpg.jpg" width="900" height="214" />

</div>
  <div id="navigation">

 <ul id="MenuBar1" class="MenuBarHorizontal">
   <li><a href="index.html">Hjem</a>	   </li>
   <li><a href="Nyheter.html">Nyheter</a></li>
   <li><a href="Horten.html">Om Horten</a>	   </li>
   <li><a href="Attraksjoner.html" class="MenuBarItemSubmenu">Attraksjoner</a>
	 <ul>
	   <li><a href="Familier.html">For Familier</a></li>
	   <li><a href="Eldre.html">For Eldre</a></li>
	 </ul>
   </li>
   <li><a href="Kontakt.html">Kontakt oss</a></li>
 </ul>
</div>
	   <div id="link">
<ul>
<li><a href="http://www.vg.no"target="_blank">Verdens gang.no</a></li>
<li><a href="http://www.db.no"target="_blank">Dagbladet.no</a></li>
<li><a href="http://www.aftenposten.no"target="_blank">Aftenposten.no</a></li>
<li><a href="http://www.gjengangeren.no"target="_blank">Gjengangeren.no</a></li>
<li><a href="http://vfk.hvs.no"target="_blank">Horten VGS</a></li>

<div id="img">

<img src="skisse.jpg" width="170" height="170" />
<img src="skisse.jpg" width="170" height="170" />
<img src="skisse.jpg" width="170" height="170" />
<img src="skisse.jpg" width="170" height="170" />
<img src="skisse.jpg" width="170" height="170" />
<img src="skisse.jpg" width="170" height="170" />
<img src="skisse.jpg" width="170" height="170" />
<img src="skisse.jpg" width="170" height="170" />
<img src="skisse.jpg" width="170" height="170" />
<img src="skisse.jpg" width="170" height="170" />
<img src="skisse.jpg" width="170" height="170" />
<img src="skisse.jpg" width="170" height="170" />

</div>

</ul>


</div>
 <div id="text">
<h1> Hjem </h1>
<p> hallo hallo hallo < /br> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nisi mi, dapibus non lacinia sit amet, sagittis fringilla odio. Aenean sit amet dolor vitae ante imperdiet accumsan ut id ipsum. Mauris ac mi sit amet eros pharetra posuere. Sed sed dui velit, eu luctus neque. Ut sed magna non mauris placerat aliquet. Duis augue ante, aliquam eu fermentum ut, tincidunt vel tellus. Nunc in lectus quis enim tempus congue. Cras lacinia egestas nisl, ut facilisis dui placerat eu. Morbi sit amet leo sit amet leo ultricies posuere vel sit amet diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut vestibulum sodales ligula, et vestibulum metus pulvinar ut. Aliquam erat volutpat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 

Cras eget tellus vitae leo sollicitudin aliquet. Donec semper justo vel erat suscipit placerat. Fusce egestas lectus sed magna dignissim euismod congue dui malesuada. Aliquam a porta dui. Phasellus tincidunt viverra erat eget lobortis. Etiam fringilla aliquet pulvinar. Duis lobortis massa libero. Proin sed urna et eros euismod placerat quis nec diam. Praesent eu congue felis. Pellentesque a dolor vel dolor dignissim varius. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris dignissim, odio eget feugiat pharetra, mi turpis adipiscing sem, vitae congue lectus elit id lorem.</p>
</div>



</div>

<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>

Endret av sxxxe83
Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste

  • Hvem er aktive   0 medlemmer

    • Ingen innloggede medlemmer aktive
×
×
  • Opprett ny...