Gå til innhold

hvordan få det sånn...en meny?

melli123

Av melli123
i Programmering og webutvikling

Anbefalte innlegg

melli123

melli123

Skrevet
Skrevet (endret)

jeg klarer ikke få til en meny. men jeg har et bilde slik at dere kan se hvordan jeg ønsker å få det.

se her

EDIT:skivefeil på bilde ...det skal stå guivarchdesign.com, ikke dsign.com, mene men...

jeg bruker css og koden ser slik ut.

 

#wrap {

widht: 600px;
margin: 0 auto;
text-align: center;


}

#top {  
width: 600px;
height: 200px;

}


#middle {

width: 590px;
text-align: left;
background-color: #ffffff;
border-bottom: 5px solid #D95334;
border-right: 5px solid #D95334;
border-left: 5px solid #D95334;  	



}


#bottom {

width: 590px;
height: 30px;
text-align: left;
background-color: #ffffff;
border-bottom: 5px solid #D95334;
border-right: 5px solid #D95334;
border-left: 5px solid #D95334;	


}

 

det er slik den er nå, cssen altså, men vet ikke hva jeg skal skrive slik at jeg får den menyer der.

 

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html> 
<head> 
<title>// Guivarchdesign.com 1.1.2 //</title> 
<link rel="stylesheet" type="text/css" href="web.css" /> 
</head>





<body>


<div id="wrap">

<div id="top"> 
<img src="header.jpg" width="600" height="200">





<div id="middle">


<p><h3>Lorem ipsum</h3></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam imperdiet ornare lacus. Morbi id urna a ligula dapibus venenatis. Praesent placerat, neque ac fermentum placerat, sapien arcu molestie tellus, pellentesque varius libero elit at turpis. Morbi in sem quis odio semper iaculis. Integer convallis, purus ac vestibulum sagittis, dolor turpis ornare arcu, fringilla sagittis metus ante at risus. Donec adipiscing, elit fringilla dapibus ultricies, est nisl pulvinar urna, pretium interdum leo enim vel odio. Pellentesque mattis dolor. Nam turpis mauris, ullamcorper sit amet, condimentum vel, sagittis in, arcu. Vivamus varius, wisi in consectetuer aliquet, magna mi congue augue, commodo adipiscing nunc lacus vitae justo. Morbi sed tortor. 

Nunc varius enim id dui. In pharetra odio id lectus. Donec turpis. Proin ullamcorper massa ut wisi. Proin nonummy. Fusce rhoncus, enim non sagittis accumsan, sapien felis molestie est, a bibendum sapien velit et dui. Phasellus mattis. Phasellus ut augue. Maecenas posuere wisi ac mauris. Nulla facilisi. 

Sed metus est, ornare ut, nonummy quis, auctor sit amet, diam. Pellentesque pede neque, posuere at, mollis vel, fermentum vitae, sapien. Nam sit amet erat. Nunc viverra purus. Curabitur pellentesque iaculis elit. Fusce dignissim risus id elit. Donec eleifend pretium enim. Praesent nibh ipsum, facilisis id, sagittis in, sollicitudin non, lectus. Nunc vel lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer vel lorem. Nulla aliquet ligula in tellus. Nullam eget wisi ut metus molestie feugiat. 

Pellentesque id dui. Etiam pulvinar metus sit amet sapien. Suspendisse potenti. Sed sit amet lacus eget nunc lacinia vehicula. Integer bibendum aliquam massa. Curabitur ornare. Suspendisse a libero. Quisque sem. Aenean nunc lectus, sollicitudin a, auctor quis, consectetuer sit amet, neque. Morbi a leo in eros mollis eleifend. Sed blandit felis sed lectus. 
</p> 




</div>

<div id="bottom"> 
</div>







</body>

</html>

Endret av VgaR
Lenke til kommentar

Videoannonse

Videoannonse
Annonse
Loomy

Loomy

Skrevet
Skrevet (endret)

Først og fremst; legg til følgende i HTMLen:

<div id="h0yre">Noe innhold her</div>

Dette kan du f.eks plassere rett før bottom'en begynner (men etter at "middle" er avsluttet).

 

Så må du fixe CSSen litt:

  • Legg til float:left; på #middle
  • Juster width på #middle slik at både den og #h0yre får plass*
  • Lag en ny id: div#h0yre, gi den ønskede egenskaper (width, border og sånn) og sett float:left; på den (viktig, viktig!)
  • Sjekk siden i IE, Opera og Firefox. Deretter fikser du bugsene i IE ;)
  • Fiks skriveleif i #wrap (widht vs. width)

EDIT: Mekket liste..

 

 

* Husk at faktisk bredde = width + padding (høyre OG venstre) + margin (høyre OG venstre) + border. Hvis #h0yre, i Internet Explorer, legger seg under #middle er det et sikkert tegn på at det ikke er plass til dem begge på de 600 pixlene som #wrap'en er.

Endret av Loomy
Lenke til kommentar
melli123

melli123

Skrevet
  • Forfatter
Skrevet

hva er feil med CSSen?

#wrap {

width: 600px;
margin: 0 auto;
text-align: center;


}

#top {  
width: 600px;
height: 200px;

}


#middle {

width: 450px;
text-align: left;
background-color: #ffffff;
border-bottom: 5px solid #D95334;
border-right: 5px solid #D95334;
border-left: 5px solid #D95334;	
float: left;  



}
#hoyre {

}

div#hoyre {

width: 150px;

border-left: 5px solid #D95334;

float: left;

}

#bottom {

width: 590px;
height: 50px;
text-align: left;
background-color: #ffffff;	
}

Lenke til kommentar
PoleCat

PoleCat

Skrevet
Skrevet

Border blir også lagt til på bredden. ;) (ikke i IE5, så da skriver du width /**/ : xxpx; (det det egentlig skal være, uten å regne med padding/borders) som en andreverdi og setter !important bak den første).

Eks:

 

#vgar {
width: 200px !important;
width /**/ : 230px;
padding: 10px;
border: 5px solid #000;
}

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...