---

Hej, jeg er forholdsvis ny inden for hjemmeside faget :) men tænkte dog alligevel jeg ville tage skridtet videre og forsøge mig med et Css design som jeg ville gøre personligt. Efter et par dage stødte jeg selvfølgelig på mit første problem :) min navigations bar. Den har lige pt 4 felter som jeg meget gerne ville have lavet til 5 eller 3 ( dog hvis det bliver til 3 skal jeg også ud i noget dropdown menu og jeg ved ikke om det kan lade sig gøre i et allerede lavet design?)
Jeg bruger primært Frontpage men har dog forsøgt mig med Kompozer men synes ikke jeg havde noget held :(
Jeg ved ikke hvor meget at mit script i skal bruge for at hjælp hvis det dog overhoved er muligt :(
Link til hjemmesiden: www.Helund.info

Navi bar script
<div><ul class="navbar">
       <li><a class="nav" href="Didmytime2.html">Om Os</a></li>
       <li><a href="#" class="nav">Avlshopper</a></li>
       <li><a href="#" class="nav">Ungheste</a></li>
       <li><a href="#" class="nav">Føl</a></li>
</ul></div>

Mvh
Findus10

---

Læs dig til megen god viden om CSS menuer og dropdown menuer herhttp://www.webdesign101.dk/www/cssmenu/

---

Det var ikke rigtig det jeg ledte efter desværre :(

Mit Style sheet ser således ud: ( ved ikke om det kan hjælpe )
/* Generated by KompoZer */
body {
margin-top: 0px;
margin-bottom: 30px;
background-color: #333333;
}
#container {
margin: 2px auto;
width: 810px;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 11px;
line-height: 1.6em;
color: #666666;
background-color: #666666;
}
#container2 {
border-style: solid;
border-color: #110000;
border-width: 0 1px 1px;
margin: 0 auto;
width: 810px;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 11px;
line-height: 1.6em;
color: #efefef;
background-color: #666666;
}
h1 {
font-family: "Courier New",Monospace;
font-weight: normal;
font-size: 32px;
color: #efefef;
margin-bottom: 30px;
background-color: #666666;
padding-left: 35px;
}
h2 {
border: 1px solid #000000;
color: #efefef;
font-size: 140%;
font-family: Arial,Helvetica,sans-serif;
background-color: #999999;
padding-left: 20px;
}
a {
color: #eeeeee;
text-decoration: none;
font-weight: bold;
}
a:hover {
color: #ffffff;
font-weight: bold;
text-decoration: underline;
}
a img {
border: none;
}
img.left, img.center, img.right {
border: 1px solid #110000;
padding: 4px;
background-color: #efefef;
}
img.left {
margin: 0 12px 5px 0;
float: left;
}
img.center {
margin: 0 auto 5px;
display: block;
}
img.right {
margin: 0 0 5px 20px;
float: right;
}
form {
float: right;
font-size: 9px;
}
input {
border: 1px solid #2763a5;
padding: 3px;
background-color: #ffffff;
color: #999999;
font-size: 11px;
}
.button {
border: 1px solid #2763a5;
padding: 2px;
background-color: #6da6e2;
color: #ffffff;
font-size: 11px;
}
#header {
border-width: 1px 1px 0;
border-top: 1px solid #110000;
border-left: 1px solid #110000;
border-right: 1px solid #110000;
width: 810px;
padding-bottom: 10px;
padding-top: 10px;
clear: both;
background-color: #666666;
}
#header p {
margin-top: -20px;
margin-left: 60px;
color: #efefef;
}
ul.navbar {
border: 1px solid #110000;
padding: 0;
list-style-type: none;
float: left;
display: inline;
width: 100%;
line-height: 1px;
clear: both;
background-color: #555551;
margin-left: 0px;
volume: 50;
}
ul.navbar li {
display: inline;
margin-right: 0px;
}
a.nav:link, a.nav:visited {
border-left: 1px solid #eeeeee;
border-right: 1px solid #eeeeee;
margin: 0;
padding: 1em 2px 1em 0;
display: block;
float: left;
width: 24.5%;
text-decoration: none;
background-color: #555551;
color: #ffffff;
text-align: center;
}
a.nav:hover {
border-left: 1px solid #dddddd;
border-right: 1px solid #dddddd;
margin: 0;
padding: 1em 2px 1em 0;
float: left;
text-decoration: none;
background-color: #333333;
color: #ffffff;
width: 24.5%;
display: table-row;
}
a.nav:active {
margin: 0;
padding: 1em 0;
display: block;
float: left;
width: 24.5%;
text-decoration: none;
background-color: #999999;
color: #ffffff;
}
#content {
width: 560px;
padding-left: 10px;
padding-right: 10px;
padding-top: 5px;
float: left;
margin-top: 5px;
}
#content p {
border-bottom: 1px solid #dddddd;
padding-bottom: 20px;
}
#sidebar {
border-left: 1px solid #dddddd;
width: 188px;
padding-left: 21px;
padding-right: 10px;
padding-top: 5px;
float: right;
margin-top: 5px;
}
#sidebar p {
border-bottom: 1px solid #dddddd;
padding-bottom: 10px;
}
#footer {
border-top: 1px solid #000000;
padding: 0px 2px;
margin-top: 15px;
clear: both;
width: 806px;
background-color: #222224;
}
#footer p {
padding: 5px;
color: #efefef;
text-align: center;
}
#footer p a {
color: #efefef;
font-weight: 100;
}
#footer p a:hover {
color: #dddddd;
text-decoration: none;
}

Jeg er dog kommet frem til det er padding i:
a.nav:link, a.nav:visited {
border-left: 1px solid #eeeeee;
border-right: 1px solid #eeeeee;
margin: 0;
padding: 1em 2px 1em 0;
display: block;
float: left;
width: 24.5%;
text-decoration: none;
background-color: #555551;
color: #ffffff;
text-align: center;

jeg skal rode med men kan simpelthen ikke få det til at passe :(

---

Prøv at sætte width: 24.5% til 19.9%

og tilføj et menu punkt mere

<div><ul class="navbar">
<li><a class="nav" href="Didmytime2.html">Om Os</a></li>
<li><a href="#" class="nav">Avlshopper</a></li>
<li><a href="#" class="nav">Ungheste</a></li>
<li><a href="#" class="nav">Føl</a></li>
<li><a href="#" class="nav">Ny</a></li></ul></div>

---

Det skulle være 19.5%

skal så se så'n ud

a.nav:link, a.nav:visited {
border-left: 1px solid #eeeeee;
border-right: 1px solid #eeeeee;
margin: 0;
padding: 1em 2px 1em 0;
display: block;
float: left;
width: 19.5%;
text-decoration: none;
background-color: #555551;
color: #ffffff;
text-align: center;
}
a.nav:hover {
border-left: 1px solid #dddddd;
border-right: 1px solid #dddddd;
margin: 0;
padding: 1em 2px 1em 0;
float: left;
text-decoration: none;
background-color: #333333;
color: #ffffff;
width: 19.5%;
display: table-row;
}
a.nav:active {
margin: 0;
padding: 1em 0;
display: block;
float: left;
width: 19.5%;
text-decoration: none;
background-color: #999999;
color: #ffffff;
}

---

En lille tester
http://kortlink.dk/76w2

---

Tusind tak for svaret, det virkede perfekt :) :)

MvH
Findus10

---

Velbekommen

---

Og hvis du nu ændrer

a.nav:active {
margin: 0;
padding: 1em 0;
display: block;
float: left;
width: 19.5%;
text-decoration: none;
background-color: #999999;
color: #ffffff;
}

til
a.nav:active {
border-left: 1px solid #dddddd;
border-right: 1px solid #dddddd;
margin: 0;
padding: 1em 2px 1em 0;
float: left;
text-decoration: none;
background-color: #999999;
color: #ffffff;
width: 19.5%;
display: table-row;
}

så hopper linjen ikke når man klikker

Eftersom du ikke er logget ind i systemet, kan du ikke skrive et indlæg til dette spørgsmål.

Hvis du ikke allerede er registreret, kan du gratis blive medlem, ved at trykke på "Bliv medlem" ude i menuen.