Menu problemer, hjælp please!

Du skal nok rette i CSS'en så. Prøv at lægge:

float:left;
display:block;

på linksene.

Hmm det hjælper ikke helt.

.menu_select
{
      color:#FFF;
    background-color:#000;
    background:#fff url(http://dkti.netposten.dk/graphics/bgON.gif) repeat-x top right;
    float:left;
    display:block;


}


.menu_hover
{
    color:#FFF;
    background-color:#000;
    background:#fff url(http://dkti.netposten.dk/graphics/bgON.gif) repeat-x top right;
    float:left;
    display:block;

}

Hjælper det lidt, hjælper det slet ikke eller er det blevet værre? :)
Det kan være, du også skal prøve at sætte height:noget px; på

Jeg må lige vende tilbage til det om nogen dage, der er opstået nogen vigtigere opgaver lige pt. Men fedt du gider hjælpe w13! :)

Så er jeg tilbage. :)

Hvis jeg giver den en height hopper og danser det hele. Det ser ud som om den bliver presset ned?

Dette er hvad jeg er kommet frem til:
.menu_passive A.menu_select, .menu_passive A.menu_hover
{ 
    color:#FFF;
    font-size:15px;
    border-top:none;
    text-decoration:underline;
    background:#608ab0 ;
    float:left;
    display:block;
    height:25px;
    padding:3px;
}

Jeg har droppet det med baggrunds billede. Tror det bliver fint med bare en farve..

Det skyldes vel, at padding lægges til height/width, så derfor bliver boksene større ved hover, hvor du lægger padding:3px; på. Border bliver i øvrigt også lagt til height/width, men det ser ikke ud til, du bruger det, eller hvad?

Jeg satte padding på, for ellers er boksen helt tæt på teksten. Den hopper også selvom der ikke er padding. Jeg har fjernet den så du kan se det.

Understregningen øger nok også højden. Prøv at give den en ekstra padding, når man _ikke_ holder musen over.

Det er samme prob uden understregning...

Prøv lige at vise mig både CSS-koden for linket uden hover og linket med hover.

Hvilken padding gav du den, som ikke havde hover?

Nvm. den sidste kommentar. =)

Den er lige ved at være der!

.menu_passive
{
    background: #123C76;
    color:#608ab0;
    font-family:Arial;
    border-top:3px solid #608ab0;
    border-bottom:1px solid #608ab0;
    font-size:15px;
    text-align:center;
    font-weight:bold;
}

.menu_select
{ 
    color:#ffffff;
    background:#608ab0 ;
    height:26px;
    line-height:26px;
    font-size:15px;
    text-align:center;
    font-weight:bold;
}

.menu_hover
{ 
    color:#ffffff;
    background:#608ab0 ;
    height:26px;
    line-height:26px;
    font-size:15px;
    text-align:center;
    font-weight:bold;
}

Det eneste der er tilbage, er at den ikke er bold ved hover, og at den får ikke den rigtige farve i "passive"

Men den er da tæt på at være der.

Det burde din kode jo gøre. Så må der være noget andet CSS, der går ind og ødelægger det.

I øvrigt har du 2 steder i din kode, hvor der står:

style="width:260;"

hvilket skal være:

style="width:260px;"

Det kan FireFox nemlig ikke forstå, og derfor brokker den sig over det i fejlkonsollen.

Hele css'en er her:

body {           
    font-family: Arial;   
    color:#001B38;
    padding:5px;
    font-size:12px;                                   
}
#content
{
    margin-left:20px;
    margin-right:10px;
}

#footer
{
    border-top:1px solid #999;
    padding-top:5px;
 
}

td {           
    font-family: Arial;   
    color:#001B38;                                   
}

input, select, checkbox, textarea {
    font-family: Arial;   
    font-size: 12px;   
    color:#001B38;                                   

}
p {
    font-family: Arial;   
    font-size: 13px;   
    margin-top : 0px;
    margin-bottom :10px;
    padding-top: 10px;
    color:#001B38;   
    line-height:17px;   
}
li {
    font-family: Arial;   
    font-size: 13px;   
    margin-top : 0px;
    margin-bottom :10px;
    color:#001B38;   
    line-height:17px;   
}
h1 {
    font-family: Arial;
    margin-top: 0px;
    margin-bottom: 8px;
    FONT-SIZE: 19px;
    color: #001B38;
    font-weight: normal;
    padding-top:10px;
}
h2 {
    font-family: Arial;
    margin-top: 15px;
    margin-bottom: 6px;
    FONT-SIZE: 15px;
    color: #001B38;
    font-weight: bold;
    padding-top:10px;
}



.menu_passive
{
    background: #123C76;
    color:#608ab0;
    font-family:Arial;
    border-top:3px solid #608ab0;
    border-bottom:1px solid #608ab0;
    font-size:15px;
    text-align:center;
    font-weight:bold;
}

.menu_select
{ 
    color:#ffffff;
    background:#608ab0 ;
    height:26px;
    line-height:26px;
    font-size:15px;
    text-align:center;
    font-weight:bold;
}

.menu_hover
{ 
    color:#ffffff;
    background:#608ab0 ;
    height:26px;
    line-height:26px;
    font-size:15px;
    text-align:center;
    font-weight:bold;
}

Jeg må lige finde de 2 steder, det går jo ikke. :)

Så er de 2 rettet.

Har du fundet fejlene?

Ja, men menuen er ikke helt som den skal være. Jeg fandt ud af, at den hvide farve kom fra menu elementet på min masterpage. Men da jeg fjernede den hvide, kom der en underlig lilla farve. Så nu skal jeg lige finde ud af hvad der sker.

Jeg mangler det sidste, kan ikke se hvor fejlen ligger!

I får lige hele menuen her:

css:
.menu_passive
{
    background: #123C76;
    color:#80bbd6;
    font-family:Arial;
    border-top:3px solid #608ab0;
    font-size:15px;
    text-align:center;
    font-weight:bold;
}

.menu_select
{ 
    color:#ffffff;
    background:#608ab0 ;
    height:26px;
    line-height:26px;
    font-size:15px;
    text-align:center;
    font-weight:bold;
}

.menu_hover
{ 
    color:#ffffff;
    background:#608ab0 ;
    height:26px;
    line-height:26px;
    font-size:15px;
    text-align:center;
    font-weight:bold;
}

kode:
<asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1"
                    Orientation="Horizontal" StaticDisplayLevels="2" font-size="15px"
                    StaticPopOutImageTextFormatString="" StaticSubMenuIndent="2px"
                    CssClass="menu_passive" ForeColor="#80BBD6"
                    StaticTopSeparatorImageUrl="~/Graphics/bgDIVIDER.gif">
                    <StaticMenuStyle Width="100%" />
                    <StaticSelectedStyle
                        CssClass="menu_select" font-size="15px" ForeColor="White" />
                    <StaticMenuItemStyle font-size="15px" />
                    <StaticHoverStyle Font-Bold="True"
                        CssClass="menu_hover" font-size="15px" ForeColor="White" />
                </asp:Menu>

Problemet er at knappen ikke fylder helt ud, der mangler lidt til højre.

Jeg kan ikke rigtig finde ud af det table-halløj, som asp.NET laver.

Prøv at køre følgende i din adresselinje, når du ser siden:

java script:for(var i=0,im=document.getElementsByTagName("*");i<im.length;i++)im[i].style.border="1px solid red";void(0)

Så ser du en rød ramme om alle elementer og kan se, hvordan menuen er bygget op af en masse celler.

Ja det kan jeg godt se. Det er som om der ikke er noget i de felter der er problemer med?

Eller et padding/margin-problem pga. alle de nestede tabeller, som du kan se der er, hvis du kigger i Vis Kilde.

Hvor ser du padding/margin problem? :)

Jeg tænker bare, at det nok skyldes det. Når du kigger i koden ser du, at der ligger en masse tabeller i tabeller og der er sikkert noget margin på, hvor tæt tabeller må ligge. Måske er det dét, som giver dig mellemrummet.

Ja det kan måske godt være... Det er da utroligt det skal være så besværligt at lave en menu i .net! Det er da lettere at lave den selv.

Svar for point.

:) Ja.

Tak for point! :)