Gå til innhold

Problem med navigasjonsmeny i CSS

Gammon

Anbefalte innlegg

Videoannonse

Videoannonse
Annonse
Nitrius

Nitrius

Skrevet
Skrevet (endret)

virker dårlig med <ul></ul> hjalp heller ikke med list-style:none outside; også

 

.HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>HavocNet - Where The Internet Collide</title>
<link rel="stylesheet" type="text/css" href="stilark.css" />
</head>
<body>
<div id="frame">
<div id="contentheader"><img src="images/banner.gif" /></div>
<div id="contentleft">
       <h1>Navigate</h1>
<ul>
<li><a href="#" class="button">button1</a></li>
<li><a href="#" class="button">button2</a></li>
<li><a href="#" class="button">button3</a></li>
<li><a href="#" class="button">button4</a></li>
<li><a href="#" class="button">button5</a></li>
<li><a href="#" class="button">button6</a></li>
</ul>
</div>

<div id="contentcenter">
 <h1>Modus Midten</h1>
<p>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 exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro 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.</p>
</div>

<div id="contentright">
 <h1>Modus Høyre</h1>
<p>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 exercitation ulliam corper.</p>
</div>

<br clear="all" /><!-- without this little <br /> NS6 and IE5PC do not stretch the frame div down to encopass the content DIVs -->

</div>
</body>
</html>

 

.CSS

body {
text-align:center;
background:#8FABC2;
}

#frame {
width:650px;
margin-right:auto;
margin-left:auto;
margin-top:10px;
padding:0px;
text-align:center;
}
 
#contentleft {
width:170px;
padding:0px;
float:left;
background:#fff;
margin-right:5px;
}

#contentcenter {
width:300px;
padding:0px;
float:left;
background:#fff;
}

#contentright {
width:170px;
padding:0px;
float:left;
background:#fff;
margin-left:5px;
}

#contentheader {
background:#fff;
}
 
p,h1,pre {
margin:0px 10px 10px 10px;
}
 
h1 {
font-size:14px;
padding-top:0px;
}
 
#contentheader {
font-size:20px;
padding:0px;
margin:0px;
margin-bottom:5px;
}

a.button {
font-weight:bold;
font-size:9px;
font-family:Verdana, Arial, Helvetica, sans-serif;
padding:2px 6px;
border-top:1px solid white;
border-right:1px solid black;
border-bottom:1px solid black;
border-left:1px solid white;
text-align:center;
min-width:75px;
text-transform:uppercase
}

a.button:link { 
background-color:#82A5DF; 
color:#FFF;
text-decoration:none;
}

a.button:visited {
background-color:#82A5DF; 
color:#fff;
text-decoration:none;
}

a.button:hover { 
background-color:#82A5DF; 
color:red;
border-color:black white white black;
text-decoration:none;
}

a.button:active { 
background-color:#369; 
color:#ccc; 
text-decoration:none;
}

li {
padding:5px;
list-style:none outside;
}

ul {
padding-bottom:10px;
}

 

 

Sånn som koden er nå blir ikke "knappene" mine midtstil....

fjerner jeg <ul></ul> taggene i .HTML blir den midtstil...

Noen som kan hjelpe meg?

 

 

Edit: Ta også hensyn til at jeg er ny til HTML og CSS :p

Endret av ToxicMan
Lenke til kommentar
N*

N*

Skrevet
Skrevet

legg til

ul {
margin-left:-10px;
}

så nermer det seg. prøv deg fram med å legge til mer.

 

det finnes sikkert en enklere løsning. men jeg orker ikke studere koden din for å finne det ut. (hvis noen vil, så værsego)

Lenke til kommentar
Nitrius

Nitrius

Skrevet
Skrevet
legg til

ul {
margin-left:-10px;
}

så nermer det seg. prøv deg fram med å legge til mer.

 

det finnes sikkert en enklere løsning. men jeg orker ikke studere koden din for å finne det ut. (hvis noen vil, så værsego)

Heheh, er sikkert en veldig dårlig kode :p men det funker for meg syns det ser bra ut :)

 

margin-left:-5px; så ble den helt nydelig, tusen takk for hjelpen N*

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