Forum Mjukvara Programmering och digitalt skapande Tråd

Centrera meny (HTML&CSS)

1
Skriv svar
Permalänk
Medlem
●

Centrera meny (HTML&CSS)

Jag vill centrera "knapparna" till mitten av skärmen men fortfarande ha kvar den svarta "baren" tvärs över hela skärmen.
Hur gör jag? Här är min kod:

HTML

<!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>Namnlöst dokument</title>
	<link href="styles.css" rel="stylesheet" type="text/css" />
</head>

<body>

	<div id='cssmenu'>
<ul class="baren">
   <li class='active '><a href='index.html'><span>Hem</span></a></li>
   <li class='has-sub '><a href='amnen.html'><span>Ämnen</span></a>
      <ul>
         <li class='has-sub '><a href='matte.html'><span>Matte</span></a>
            <ul>
               <li><a href='#'><span>Logaritmer</span></a></li>
               <li><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
         <li class='has-sub '><a href='svenska.html'><span>Svenska</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
         <li class='has-sub '><a href='engelska.html'><span>Engelska</span></a>
            <ul>
               <li><a href='#'><span>Item</span></a></li>
               <li><a href='#'><span>Item</span></a></li>
            </ul>
         </li>
         <li class='has-sub '><a href='fysik.html'><span>Fysik</span></a>
            <ul>
               <li><a href='#'><span>Item</span></a></li>
               <li><a href='#'><span>Item</span></a></li>
            </ul>
         </li>
         <li class='has-sub '><a href='kemi.html'><span>Kemi</span></a>
            <ul>
               <li><a href='#'><span>Item</span></a></li>
               <li><a href='#'><span>Item</span></a></li>
            </ul>
         </li>
         <li class='has-sub '><a href='idrott.html'><span>Idrott</span></a>
            <ul>
               <li><a href='#'><span>Item</span></a></li>
               <li><a href='#'><span>Item</span></a></li>
            </ul>
         </li>
         <li class='has-sub '><a href='data.html'><span>Datorteknik</span></a>
            <ul>
               <li><a href='#'><span>Item</span></a></li>
               <li><a href='#'><span>Item</span></a></li>
            </ul>
         </li>
         <li class='has-sub '><a href='webb.html'><span>Webbutveckling</span></a>
            <ul>
               <li><a href='#'><span>Item</span></a></li>
               <li><a href='#'><span>Item</span></a></li>
            </ul>
         </li>
         <li class='has-sub '><a href='pro.html'><span>Programmering</span></a>
            <ul>
               <li><a href='#'><span>Item</span></a></li>
               <li><a href='#'><span>Item</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='http://www.facebook.com/groups/234799953244397/' target='_blank'><span>Facebook</span></a></li>
   <li class='has-sub '><a href='http://www.gyf.se/larskaggskolan/' target='_blank'><span>Lars Kagg</span></a>
      <ul>
         <li><a href='http://melpomene.webuntis.com/WebUntis/?school=Kalmar_LK#Time...' target='_blank'><span>Schemat</span></a></li>
         <li><a href='https://dexter.kalmar.se/Default.asp?page=auth/common/login' target='_blank'><span>Dexter</span></a></li>
         <li><a href='http://www.gyf.se/sv/kostenheten/Matsedel-Lars-Kagg/' target='_blank'><span>Matsedeln</span></a></li>
      </ul>
   </li>
   <li><a href='bra.html'><span>Bra länkar</span></a></li>
   <li><a href='om.html'><span>Om sidan</span></a></li>
   <li><a href='kon.html'><span>Kontakta mig</span></a></li>
</ul>
</div>


</body>
</html>
Dold text

CSS

#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
  margin: 0;
  padding: 0;
  position: relative;
}
#cssmenu {
  height: 49px;
  border-radius: 5px 5px 0 0;
  -moz-border-radius: 5px 5px 0 0;
  -webkit-border-radius: 5px 5px 0 0;
  background: #141414;
  background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
  background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
  background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
  filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#32323a', EndColorStr='#141414', GradientType=0);
  border-bottom: 2px solid #0fa1e0;

  
}

.baren {
	margin-left:auto;
 	margin-right:auto;

}
#cssmenu:after,
#cssmenu ul:after {
  content: '';
  display: block;
  clear: both;
}
#cssmenu a {
  background: #141414;
  background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
  background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
  background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
  filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#32323a', EndColorStr='#141414', GradientType=0);
  color: #ffffff;
  display: inline-block;
  font-family: Helvetica, Arial, Verdana, sans-serif;
  font-size: 12px;
  line-height: 49px;
  padding: 0 20px;
  text-decoration: none;
}
#cssmenu ul {
  list-style: none;
}
#cssmenu > ul {
  float: left;
}
#cssmenu > ul > li {
  float: left;
}
#cssmenu > ul > li:hover:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  bottom: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #0fa1e0;
  margin-left: -10px;
}
#cssmenu > ul > li:first-child > a {
  border-radius: 5px 0 0 0;
  -moz-border-radius: 5px 0 0 0;
  -webkit-border-radius: 5px 0 0 0;
}
#cssmenu > ul > li:last-child > a {
  border-radius: 0 5px 0 0;
  -moz-border-radius: 0 5px 0 0;
  -webkit-border-radius: 0 5px 0 0;
}
#cssmenu > ul > li.active > a {
  box-shadow: inset 0 0 3px #000000;
  -moz-box-shadow: inset 0 0 3px #000000;
  -webkit-box-shadow: inset 0 0 3px #000000;
  background: #070707;
  background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
  background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
  background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
  filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#26262c', EndColorStr='#070707', GradientType=0);
}
#cssmenu > ul > li:hover > a {
  background: #070707;
  background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
  background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
  background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
  filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#26262c', EndColorStr='#070707', GradientType=0);
  box-shadow: inset 0 0 3px #000000;
  -moz-box-shadow: inset 0 0 3px #000000;
  -webkit-box-shadow: inset 0 0 3px #000000;
}
#cssmenu .has-sub {
  z-index: 1;
}
#cssmenu .has-sub:hover > ul {
  display: block;
}
#cssmenu .has-sub ul {
  display: none;
  position: absolute;
  width: 200px;
  top: 100%;
  left: 0;
}
#cssmenu .has-sub ul li {
  *margin-bottom: -1px;
}
#cssmenu .has-sub ul li a {
  background: #0fa1e0;
  border-bottom: 1px dotted #6fc7ec;
  filter: none;
  font-size: 11px;
  display: block;
  line-height: 120%;
  padding: 10px;
}
#cssmenu .has-sub ul li:hover a {
  background: #0c7fb0;
}
#cssmenu .has-sub .has-sub:hover > ul {
  display: block;
}
#cssmenu .has-sub .has-sub ul {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
}
#cssmenu .has-sub .has-sub ul li a {
  background: #0c7fb0;
  border-bottom: 1px dotted #6db2d0;
}
#cssmenu .has-sub .has-sub ul li a:hover {
  background: #095c80;
}
Dold text

Vore bra om ni kunde markera vad det är ni ändrar/lägger till, samt skriva det utanför koden så jag hittar det
PS. Har inte skrivit all kod själv, har lite svårt att sätta mig in i den...

Tack på förhand

Redigera
Citera flera Citera
Permalänk
Medlem
●

Typ sådär?
http://jsfiddle.net/VatsA/

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Full Strike:

Typ sådär?
http://jsfiddle.net/VatsA/

Gå till inlägget

Tack så mycket!
Skulle du ha lust att markerar vart du har ändrat, med en kommentar eller något? Har lite svårt att se vad du har gjort

la även till en background image via css och då la sig allt till vänster, vf?
Så här skrev jag:

body {
background-image:url(Bilder/low_contrast_linen.png);
}

Senast redigerat
Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av johan1007:

Tack så mycket!
Skulle du ha lust att markerar vart du har ändrat, med en kommentar eller något? Har lite svårt att se vad du har gjort

Gå till inlägget

Sure! http://jsfiddle.net/VatsA/9/

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Full Strike:

Sure! http://jsfiddle.net/VatsA/9/

Gå till inlägget

Tack igen!
Vet inte om du såg men uppdaterade inlägget över. Ta gärna en titt om du har lust

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av johan1007:

Tack igen!
Vet inte om du såg men uppdaterade inlägget över. Ta gärna en titt om du har lust

Gå till inlägget

Funkar fint för mig

http://jsfiddle.net/VatsA/10/

Redigera
Citera flera Citera
1
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara