Får ikke sentrert menyen (dropdown funnet på nett)

lilminime · 11. september 2006

Hei, jeg fant et dropdown meny en plass på nettet, som jeg brukte til min fars hjemmeside. Det oppstår derimot et problem, jeg klarer ikke og få sentrert hele menyen. Her er index filen:

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

<html>
<head>  <title>Bodøelv.no -> Forside</title>  <link rel="shortcut icon" href="bilder/favicon.ico" />
 <meta name="Beskrivelse" content="Kampanjetilbud oversikt, Jobbstatus, Informasjon ++." />
 <meta name="Kopirettighet" content="Alt materiale på denne siden tilhører Bodøelv Veiservice AS." />
 <meta name="Design og Utvikling" content="Ståle Andreassen" />
 <link rel="stylesheet" type="text/css" href="inc/stilark.css" />
 <script type="text/javascript">
 	<!--//--><![CDATA[//><!--
   sfHover = function() {
   	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
     for (var i=0; i<sfEls.length; i++) {
     	sfEls[i].onmouseover=function() {
       this.className+=" sfhover";
     	}
     	sfEls[i].onmouseout=function() {
       this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
     	}
     	}
     }
   if (window.attachEvent) window.attachEvent("onload", sfHover);
 	//--><!]]>
   sfHover = function() {
   	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
   	for (var i=0; i<sfEls.length; i++) {
     sfEls[i].onmouseover=function() {
     	this.className+=" sfhover";
     }
     sfEls[i].onmouseout=function() {
     	this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
     }
   	}
   }
if (window.attachEvent) window.attachEvent("onload", sfHover);

</script>

</head>
<body bgcolor="#C7CFDC">
<div class="ramme">
 <div class="logo">
 	<img src="bilder/banner.png" class="logo" alt="Esso Bodøelv Veiservice AS" />
 </div>
 	<div>
 	<ul id="nav">  
   <li>

   	<a style="color:#FFFFFF" href="?p=forside">Forside</a>
     <ul class="whiteul">
     	<li class="whiteli"><a class="whitea" href="http://www.coop.no/">Coop kort</a></li>
     </ul> 
   </li>	
   <li >
   	<a style="color:#FFFFFF" href="?p=bilvask">Bilvask</a> 
   </li>	
   <li>

   	<a style="color:#FFFFFF" href="?p=kampanjetilbud">Kampanjetilbud</a>
     <ul class="whiteul">
     	<li class="whiteli"><a class="whitea" href="?p=kampanjetilbud&type=Fastfood">Fastfood</a></li>
     	<li class="whiteli"><a class="whitea" href="?p=kampanjetilbud&type=Kaffe">Kaffe</a></li>
     	<li class="whiteli"><a class="whitea" href="?p=kampanjetilbud&type=Kiosk">Kiosk</a></li>
     	<li class="whiteli"><a class="whitea" href="?p=kampanjetilbud&type=Diverse">Diverse</a></li>

     	<li class="whiteli"><a class="whitea" href="?p=kampanjetilbud&type=Is">Is</a></li>
     	<li class="whiteli"><a class="whitea" href="?p=kampanjetilbud&type=Film">FILM/DVD/CD</a></li>
     	<li class="whiteli"><a class="whitea" href="?p=kampanjetilbud&type=Telekort">Telekort</a></li>
     	<li class="whiteli"><a class="whitea" href="?p=kampanjetilbud&type=Bilpleie">Bilpleie</a></li>
 </ul> 
   </li>	
   <li >
   	<a style="color:#FFFFFF" href="#">Kontakt</a>

     <ul class="whiteul">
     	<li class="whiteli"><a class="whitea" href="?p=jobb">Søk Jobb</a></li>
     	<li class="whiteli"><a class="whitea" href="?p=annet">Annet</a></li>  	
     </ul> 
   </li>	
   <li >
   	<a style="color:#FFFFFF" href="?p=omoss">Om oss</a>
   </li>
 </div>


 <div class="reklame">
 	<br />Lenker<br /><a href="http://www.essomastercard.no">
 	<img src="bilder/mastercard.jpg" alt="Trykk her for og gå til Esso Mastercard" /></a><br /><br />
 	Våre produkter:<br /><br /><a href="http://www.esso.com/norway-norwegian/LCW/P_S.asp"><img src="bilder/produktlink.jpg" width="50%" alt="Trykk her for og gå til våre oljeprodukter" /></a><br /><br />Andre lenker:<br /><br /><a href="http://www.norsk-tipping.no/page?id=14&tp=lsr">
 	<img src="http://www.norsk-tipping.no/binary?id=96" style="width: 80%; margin-bottom: 5px;" alt="Trykk her for og gå til Norsk-Tipping (Lang oddsen)" /></a>
 </div>
 <div class="innhold">

 	<marquee scrolldelay="140" ><a href="?p=kampanjetilbud" style="color: #000000;">150 gr Hamburger inkl. 0,5 l mineralvann</a></marquee>
 	<h4>VELKOMMEN TIL BODØELV VEISERVICE AS - ESSO-BODØELV</h4>
 	<img src="../uploads/00001.jpg" width="340px" align="left" style="margin: 5px; left: 500px; border: 1px solid #CC0000;" alt="Bilde" />
   
   <p style="padding: 5px;">
   	<b>Vi er en bensinstasjon i Bodø, lokalisert i krysset Olav V gt og Riksvei 80. Åpningstider hverdager fra kl 06:00 om morgenen til kl 24:00 om kvelden. Vi har kanskje Bodø's beste bilvaskeanlegg, med moderne bilvaskemaskin og to lyse og oppvarmede selv-vaske haller</b>
   </p>
   
   <p style="padding: 5px;">

   	Vi prøver å levere det du som kunde ønsker, hver dag, med fersk kaffe, ferske matpakker og baguetter samt stort utvalg av annen fastfood. Bruk linkene for å få vite mer, og klikk gjærne på linkene til venstre for å komme til noen av våre sammarbeidspartnere.</p>
   
   <p style="margin: 10px; color: #CC0000;">
   	<a href="http://www.coop.no">
   	<img style="float: left; margin-right: 5px; width: 140px;" src="../uploads/Coop_medlemskort.gif" alt="Coop Medlemmskor gir store rabattfordeler" /></a>
   </p>
   <br /><a style="color: #CC0000;" href="http://www.coop.no"><b>Coop-kortet</b></a> gir bonus på<br /> alle kjøphos oss. 20 øre pr.<br />liter på drivstoff.<br /> 10% rabatt på service og vask
 </div>  <div class="adskiltinnhold">Eneretts kopirettighet Bodøelv Veiservice AS.
 	Design og utvikling; <a href="http://www.quickneasy.org" style="font: bold 11px sans-serif; color: #FFFFFF;">Ståle Andreassen</a>

 </div>
</div>
<a href="inc/logginn.php" style="color: #C7CFDC;">- Logg inn</a>
</body>
</html>

CSS kode

body {
margin: 0px;
padding-top: 10px;
padding-bottom: 10px;
}
.ramme {
position: relative;
background-color: #FFFFFF;
width: 885px;
margin: 0px auto;
border: 1px solid #000000;
}
.logo {
position: relative;
width: auto;
text-align: left;
border-top: 0px solid #000000;
border-right: 0px solid #000000;
border-bottom: 1px solid #000000;
border-left: 0px solid #000000;
}
img.logo {
position: relative;
margin: 10px;
width: 344px;
border: 1px solid #FFFFFF;
}
marquee {
position: relative;
color: #000000;
}
.innhold {
position: relative;
left: -1px;
float: left;
width: 683px;
text-align: left;
font-size: 13px;
font-family: Arial, Trebuchet MS;
border-left: 1px solid #000000;
border-bottom: 0px solid #000000;
border-right: 0px solid #000000;
background-color: #FFFFFF;
}
.reklame {
position: relative;
text-align: center;
float: left;
width: 200px;
top: 0%;
margin: 0px;
border-left: 0px solid #000000;
border-right: 1px solid #000000;
font-size: 14px;
font-family: Arial, Trebuchet MS;
background-color: #FFFFFF;
}
.adskiltinnhold  {
position: relative;
width: auto;
padding-top: 5px;
padding-bottom: 5px;
text-align: center;
clear: both;
font-family: Arial, Trebuchet MS;
font-size: 11px;
font-weight: bold;
border-top: 1px solid #000000;
border-left: 0px solid #000000;
border-bottom: 0px solid #000000;
border-right: 0px solid #000000;
background-color: #CC0000;
}
img {
border: 0px;
}
h4 {
position: relative;
text-align: center;
margin: 0px;
}
h3 {
margin: 0px;
}
a:link {
color: #FFFFFF;
background-color:transparent;
text-decoration: none;
}
a:visited {
color: #FFFFFF;
background-color: transparent;
text-decoration: none;
}
a:active {
color: #000000;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: #000000;
background-color: transparent;
text-decoration: none;
}
a.kampanjetilbud {
hover: #000000;
visited: #CC0000;
color: #CC0000;
}


/* Photo Zoom CSS */
#zoom { position: relative; top: 10px; left: 10px; width: 75px; background-color: rgb(255, 255, 255); z-index: 2; }
#zoom a.p1, #zoom a.p1:visited { border: 0pt none; background: rgb(255, 255, 255) none repeat scroll 0%; display: block; width: 0px; height: 0px; text-decoration: none; top: 0pt; left: 0pt; z-index: 2; }
#zoom a img { border: 0pt none; z-index: 2;}
#zoom a.p1:hover { text-decoration: none; background-color: rgb(140, 151, 163); color: rgb(0, 0, 0); }
#zoom a .large { border: 0px none; display: block; position: absolute; width: 1px; height: 1px; top: -1px; left: -1px; }
#zoom a.p1:hover .large { border: 1px solid black; display: block; position: absolute; top: -100px; left: 150px; width: 600px; height: 400px; }
/* End Photo Zoom CSS */

marque {
position: relative;
font: bold 15px verdana;
}
#nav, #nav ul {
position: relative;
margin: 0px auto;
float: left;
width: 100%;
list-style: none;
line-height: 1.3;
background: #CC0000;
font-weight: bold;
padding: 0;
border: solid #000000;
border-width: 1px 0;
z-index:100;


}

#nav a {
display: block;
color: #FFFFFF;
text-decoration: none;
padding: 0.15em 0.35em;
font-weight: bold;
}

#nav a.daddy {
background: url(http://www.htmldog.com/articles/suckerfish/dropdowns/example/rightarrow2.gif) center right no-repeat;
}

#nav li {
float: left;
padding: 0;



}

#nav li ul {
position: absolute;
left: -999em;
height: auto;
width: 14.4em;
w\idth: 13.9em;
font-weight: normal;
border-width: 0.25em;
margin: 0;
}

#nav li li {
padding-right: 1em;
width: 13em
}

#nav li ul a {
width: 13em;
w\idth: 9em;
}

#nav li ul ul {
margin: -4ve.75em 0 0 14em;

}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}

#nav li:hover, #nav li.sfhover {
background: #000000;
}

#content {
clear: left;
}

#content a {
color: #FFFFFF;
}

#content a:hover {
text-decoration: none;
}

#scaffolding {
height: 70px;
background: white no-repeat;
border: 1px solid #000000;
border-width: 1px 0 0 0;
margin: 1em 0 0 0;
}

#scaffolding a {
text-decoration: none;
text-indent: -999em;
display: block;
height: 70px;
background: no-repeat;
background-position: 181px 0;
}

#scaffolding a:hover {
background-position: 181px -70px;
}
#nav .whiteul 
{
width: 160px;
background-color: #FFFFFF;
border: solid #000000 0px;
}


#nav .whiteli
{
width:160px;
   background-color: #000000;
border: solid 1px black;
}

#nav .whitea
{
width:150px;
color: #ffffff;
background-color: #CC0000;

}
#nav .whitea:hover 
{
background: #000000;
color:#FFFFFF;
}
#nav .whitea2
{
   width:170px;
   color: #000000;
   background-color: #FFFFFF;

}
#nav .whitea2:hover 
{
background: #000000;
color:#FFFFFF;
}

Takk for svar :love:

Endret 11. september 2006 av [email protected]

lilminime · 13. september 2006

Hei, beklager bumpingen, men tenkte det var bedre enn og lage ny post:P

Virkelig ingen som ser løsningen her?

Arve Systad · 13. september 2006

Post gjerne ei lenke til sida di, er ofte lettare å sjå problemet i praksis enn å lese ti tonn kode

lilminime · 13. september 2006

http://www.bodoelv.no/?p=forside

Arve Systad · 13. september 2006

Ser du har ein del posisjonering i meny-listene dine. Kva med å fjerne dette? Så lenge du har "positoin: whatever;" der så vil nemlig ikkje margin: 0 auto; fungere som det skal.

lilminime · 13. september 2006

funket ikke :/

noen andre tips?

**TSP** · 16. oktober 2006

Jeg har samme problem for øyeblikket.

<html>

<head>
<meta http-equiv="Content-Language" content="no-bok">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<link href="style.css" type="text/css" rel="stylesheet" / >
<title>Ny side 1</title>
</head>

<body>
Dette er en test av mine magiske evner

<div id="lorem">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis 
nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie 
consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit 
praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend 
option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est 
usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt 
saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam 
littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima 
et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.

</div>
</body>

</html>

style.css:

body {
background-color: #271616;
}

#lorem { 
height: 100px;
width: 320px;
color: purple; 
background: white;
position: absolute; top:50%; left:50%;
}

Jeg har prøvd å bytte ut, position: whatever med margin: 0 auto; men det virker ikke.

Er forøvrig IE som det er prøvd i ikke noen andre, da dette er noe vi gjør på skolen og der har de jo knapt hørt om FF og Opera =P

Forøvrig har ikke denne koden noe hensiktsmessig med seg, bare holder på med å vekke opp gammel kunnskap siden vi skal lage hjemmeside på skolen :wee:

Endret 16. oktober 2006 av The Strategy-player

834HF42F242 · 16. oktober 2006

#lorem { 
height: 100px;
width: 320px;
color: purple; 
background: white;
margin-left: auto;
margin-right: auto;
}

Endret 16. oktober 2006 av neitakk

**TSP** · 16. oktober 2006

#lorem { 
height: 100px;
width: 320px;
color: purple; 
background: white;
margin-left: auto;
margin-right: auto;
}

7080452[/snapback]

Det der virker heller ikke :hmm:

834HF42F242 · 16. oktober 2006

Skal du ha den sentrert i forhold til både horisontal og vertikal linje?

**TSP** · 16. oktober 2006

Ja.. Tror det? Boksen skal være midt på.. Det er ikke venstre eller høyre kant som skal det.

834HF42F242 · 16. oktober 2006

Da må du nok bruke java for å få regnet ut posisjon i forhold til høyden. Husk at denne endrer seg hele tiden, og at det er noe som er veldig vanskelig å få til.

Sentrert horisontalt.

**TSP** · 16. oktober 2006

Hmm? Det som er rart er at en i klassen klarte det med

margin: 0 auto;

Så hvorfor ikke det virker i min css/html kan jeg ikke forstå. Kan da virkerlig ikke være så vanskelig å få en div helt sentrert? Utifra div'ns midtpunkt? Kan bare ikke fatte det, og som sagt, en annen i klassen klarte det med margin: 0 auto;

Logg inn

Får ikke sentrert menyen (dropdown funnet på nett)

Anbefalte innlegg

lilminime

Lenke til kommentar

Videoannonse

lilminime

Lenke til kommentar

Arve Systad

Lenke til kommentar

lilminime

Lenke til kommentar

Arve Systad

Lenke til kommentar

lilminime

Lenke til kommentar

TSP

Lenke til kommentar

834HF42F242

Lenke til kommentar

TSP

Lenke til kommentar

834HF42F242

Lenke til kommentar

TSP

Lenke til kommentar

834HF42F242

Lenke til kommentar

TSP

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer