Gå til innhold

[Løst] Problemer med CSS og div's

The_Lozer

Anbefalte innlegg

The_Lozer

The_Lozer

Skrevet
Skrevet

Hei, som emne sier, så har jeg problemer med css og div's. Ting havner rett og slett ikke der jeg vil det skal havne.

 

Så jeg trenger nok litt/ endel hjelp på denne fronten, css har aldri vært helt med meg, selv om det mest sannsynlig er andre veien.

 

HTML kode:

 

<!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>Lorem ipsum dolor sit amet</title>
<link rel="shortcut icon" href="./Images/favicon.ico" type="image/x-icon"/>
<link rel="icon" href="./Images/favicon.ico" type="image/ico"/>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="container">
<div id="top">
  <img src="./Images/logo.png" height="100" width="100" />
  <h1>Lorem ipsum dolor sit amet</h1>
</div>
<div id="sideMenu">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt mi a elit suscipit sagittis. Etiam congue vehicula lectus sit amet tincidunt. Ut ut tellus id orci tristique bibendum. Curabitur fringilla molestie pharetra. Nunc nisi purus, dictum ut dapibus vitae, hendrerit ut ipsum. Donec id ipsum diam. Integer eu vestibulum ante. Nulla fermentum, magna ut sodales dictum, nisi turpis sagittis dui, eget mattis arcu est mollis sem. Donec varius, felis lobortis mattis fermentum, nisl dolor facilisis erat, eu rhoncus diam ante a orci. Vivamus ultrices elementum arcu. In mattis, sem at elementum lobortis, leo lectus ultrices eros, sed ultricies est quam vel nibh. Vivamus convallis lorem a quam hendrerit condimentum. Praesent id velit ac arcu auctor pellentesque. Nulla in lorem eget lacus vehicula tempor eget vel velit. Vivamus at velit ligula, et cursus metus. Donec enim velit, rhoncus vel pellentesque a, fermentum quis enim.
Donec vel ligula a metus convallis vehicula. Vestibulum leo lacus, eleifend vitae bibendum in, dictum sit amet purus. Aenean vitae dignissim justo. Mauris et dictum massa. Suspendisse vestibulum sapien sed purus venenatis ut vulputate tortor pretium. Ut accumsan porttitor ipsum aliquet euismod. Duis eget magna et lorem aliquam vehicula eu vitae lacus. Vestibulum tempus varius justo ac pretium. Phasellus venenatis lectus quis massa rutrum varius.
 </div>
<div id="mainSite">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt mi a elit suscipit sagittis. Etiam congue vehicula lectus sit amet tincidunt. Ut ut tellus id orci tristique bibendum. Curabitur fringilla molestie pharetra. Nunc nisi purus, dictum ut dapibus vitae, hendrerit ut ipsum. Donec id ipsum diam. Integer eu vestibulum ante. Nulla fermentum, magna ut sodales dictum, nisi turpis sagittis dui, eget mattis arcu est mollis sem. Donec varius, felis lobortis mattis fermentum, nisl dolor facilisis erat, eu rhoncus diam ante a orci. Vivamus ultrices elementum arcu. In mattis, sem at elementum lobortis, leo lectus ultrices eros, sed ultricies est quam vel nibh. Vivamus convallis lorem a quam hendrerit condimentum. Praesent id velit ac arcu auctor pellentesque. Nulla in lorem eget lacus vehicula tempor eget vel velit. Vivamus at velit ligula, et cursus metus. Donec enim velit, rhoncus vel pellentesque a, fermentum quis enim.
Donec vel ligula a metus convallis vehicula. Vestibulum leo lacus, eleifend vitae bibendum in, dictum sit amet purus. Aenean vitae dignissim justo. Mauris et dictum massa. Suspendisse vestibulum sapien sed purus venenatis ut vulputate tortor pretium. Ut accumsan porttitor ipsum aliquet euismod. Duis eget magna et lorem aliquam vehicula eu vitae lacus. Vestibulum tempus varius justo ac pretium. Phasellus venenatis lectus quis massa rutrum varius.
Etiam vel est vitae mi pharetra hendrerit. Quisque laoreet rutrum ligula, congue gravida dui elementum nec. Aenean pellentesque risus a quam tincidunt vel pretium metus pellentesque. Aliquam ultrices, quam sit amet laoreet malesuada, nunc augue ullamcorper quam, ut interdum justo purus et augue. Sed dui enim, fermentum sit amet facilisis quis, sodales et ligula. Integer tristique eleifend elit. Nulla in ullamcorper dui. Ut commodo convallis dolor, id egestas elit elementum id. Sed pretium imperdiet convallis. Pellentesque vestibulum ligula non erat pharetra aliquet. Nullam gravida consequat orci id lacinia.
Donec dignissim neque at nunc vehicula quis sodales sem tempus. Quisque pulvinar, arcu quis dapibus sagittis, nisl augue condimentum lectus, eget blandit orci massa non mauris. Quisque id est lorem, ornare vehicula erat. Nullam sit amet tellus non erat ultricies elementum. Duis quis diam sed ligula elementum bibendum quis at orci. Praesent feugiat viverra arcu, nec molestie arcu lacinia sed. Quisque euismod velit at dui rutrum pellentesque. Pellentesque eget consectetur felis.
Sed convallis fringilla scelerisque. Donec pellentesque ullamcorper odio ut blandit. Maecenas imperdiet erat eu eros cursus eu aliquet arcu consectetur. Suspendisse potenti. Praesent at enim odio, at euismod massa. Aenean quam sapien, mattis non adipiscing a, pulvinar eu nulla. Maecenas luctus lacus eget libero posuere aliquet. Suspendisse neque tortor, dapibus vel molestie ut, tempus non velit. Suspendisse malesuada, lacus sed tristique tempor, enim felis sodales tellus, tempus feugiat erat metus at eros.
   </div>
</div>
</body>
</html>

 

CSS kode:

 

@charset "utf-8";
/* CSS Document */
body {
background:#CCC;
}
#container {
width: 1280px;
background:#FFF;
border: #000000 solid 1px;
margin: auto auto;
font-family: "Times New Roman", Times, serif;
}
#top {
border-bottom: solid 1px #000000;
height: 100px;
width: 1280px;
}
#top h1{
font-size:54px;
font-weight: bold;
margin-left: 20px;
margin-top: 19px;
float: left;
}
#top img{
width: 100px;
height: 100px;
float: left;
}
#main {
width: 1280px;
}
#main a, a:visited {
color: #FF0000;
text-decoration: none;
}
#main a:hover {
color: #000000;
}
#sideMenu {
width: 259px;
padding: 10px;
border-right: solid 1px #000000;
float: left;
}
#mainSite {
margin: 0px 0px 0px 0px;
padding: 10px;
width: 980px;
float:left;
}

 

omtrent slik skal det se ut, bilde fra DW, eneste unntak er at background color i #container skal være med helt til bunnen av #main

post-95369-0-60834000-1345981111_thumb.png

 

meeen, slik ser det altså ut i ie, opera og firefox.

post-95369-0-74629600-1345981206_thumb.png

 

Takker for svar og hjelp, ha en god dag! :)

Lenke til kommentar

Videoannonse

Videoannonse
Annonse
The_Lozer

The_Lozer

Skrevet
  • Forfatter
Skrevet (endret)

Takker for svar!

 

usynlig border hadde ingenting for seg.

 

Det hjalp å flytte sideMenu under mainSite og endre floats.

 

Men mangler fortsatt at den hvite bakgrunnen i container skal følge hele den opptatte plassen på siden.

 

Dessuten så ser jeg at right-border på sideMenu ikke treffer bottom-border på top, her er det et hopp på ca 15px, forslag til å løse dette også?

post-95369-0-73220700-1345982602_thumb.png

Endret av The_Lozer
Lenke til kommentar
Leon83

Leon83

Skrevet
Skrevet

Oppdaget det samme som Kontorstol angående feil float osv.

 

Du kan bruke position: absolute til å plassere sideMenu akkurat der du vil ha den. Men da er det viktig å vite hvordan relative og absolute positioning fungerer. "Moder"-div'en må nemlig være satt til position:relative, ellers så vil sideMenu posisjonere seg i forhold til body. Dette kan være greit å vite om generelt også hvis man vil plassere et element hvor man vil inne i en div.

 

Prøv dette:

#container {
position: relative;
}

 

#sideMenu {
position: absolute;
top: 102px;
}

Lenke til kommentar
The_Lozer

The_Lozer

Skrevet
  • Forfatter
Skrevet

Takk for svar, ja, det løste noe.

Men klarte omsider å løse det selv, dukker sikkert opp nye utfordringer.

 

løste det slik:

 

@charset "utf-8";
/* CSS Document */
body {
background:#CCC;
}
#container {
width: 1280px;
background:#FFF;
margin: auto auto;
font-family: "Times New Roman", Times, serif;
}
#top {
border: solid 1px #000000;
height: 100px;
width: 1279px;
}
#top h1{
font-size:54px;
font-weight: bold;
margin-left: 20px;
margin-top: 19px;
float: left;
}
#top img{
width: 100px;
height: 100px;
float: left;
}
#main {
width: 1279px;
position:fixed;
background: #FFFFFF;
border-bottom: solid 1px #000000;
border-left: solid 1px #000000;
border-right: solid 1px #000000;
}
#main a, a:visited {
color: #FF0000;
text-decoration: none;
}
#main a:hover {
color: #000000;
}
#sideMenu {
width: 258px;
padding: 10px;
border-right: solid 1px #000000;
float: left;
}
#mainSite {
margin: 0px 0px 0px 0px;
padding: 10px;
width: 980px;
float:right;
}

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
×
×
  • Opprett ny...