Problemer med meny (CSS)

[TCi]

Menyen på siden min blir ikke liggende på linjemed banneren. Det blir et mellomrom. Jeg har ikke satt doctype på siden før nylig så jeg merket det ikke før da.

 

Siden min er: http://home.no.net/eholten/

 

Koden til menyen er en modifisert en fra en CSS tutorial derfor har jeg ikke 100% kontroll over hva den gjøre selv.

 

Dette er koden som er aktuell, som brukes til menyen:

 

#navcontainer ul {
width: 100%;
list-style-type: none;
margin: 0;
padding: 0;
background: url("images/navBarBg.gif") repeat-x 20px;
display: block;
text-align: center;
font: 10px/20px "Lucida Grande", verdana, sans-serif;
}

#navcontainer li {
list-style-type: none;
margin: 0;
padding: 0;
float: left;
background: url("images/navBarBg.gif") repeat-x 20px;
display: block;
text-align: center;

}

#navcontainer a{
color: #000;
text-decoration: none;
display: block;
width: 74px;
border-bottom: 1px solid #A8B090;
border-left: 1px solid #A8B090;
}

 

Dersom dere trenger å se på mer kode så er linken til CSS filen:

http://home.no.net/eholten/basic3.css

[ingveh]

Prøv å legg dette øverst i stilarket:

* {
 margin: 0;
 padding: 0;
}

[TCi]

Det fungerte nok ikke. Hadde ingen påvirkning, men takk for tipset.

[mohuhau]

Sett #banwrap {width: 534px; }

Trenger du virkelig #banwrap? kan du ikke bare pytte banneret ditt inn i #wrap?

 

Kjør også siden din gjennom validatorene:

xhtml, css

Endret 26. april 2005 av mohuhau

[TCi]

Fikk fikset problemet med mellomrommet nå. Men fremdeles tomrom til høyre for menyen.

 

Jeg har planer om å validere siden etterhvert. Ikke en prioritet akkurat nå.

[Mira]

Fikk fikset problemet med mellomrommet nå. Men fremdeles tomrom til høyre for menyen.

 

Jeg har planer om å validere siden etterhvert. Ikke en prioritet akkurat nå.

Nå mente han vel ikke at du skulle validere bare for morro skyld, men at validering ofte kan få deg til å se problemer som du ikke så før. Som for eksempel at man har glemt å lukke en tag, eller ikke lukket i det hele tatt...

[pgdx]

Alle webutviklere vet dette:

Hendelsesforløpet på sidens utvikling:

1. Mekk HTML- og CSS-kodingen slik at den ser noenlunde rett ut i Firefox (eventuelt Opera)
   
2. Sjekk om siden er rett med en validator
   
3. Rett opp i eventuelle feil
   
4. Få den til å fungere i IE, ikke nødvendigvis med samme features som i Firefox, Opera og andre nettlesere som følger standardene, da dette ikke alltid er mulig
   
5. Få hacks validert
   

[TCi]

Siden er ikke en prioritering for meg pga. jeg har måtte jobbe med mye annet. Og pga. av dette så har jeg ikke hatt tid til å validere koden. Det tar kanskje kort tid å validere, men som sagt har jeg ikke tatt meg tid til det ennå.

 

Jeg lurte om dere visste om hvorfor menyen er litt feil, resten fikser jeg selv uten problemer.

[kroekkete]

Siden er ikke en prioritering for meg pga. jeg har måtte jobbe med mye annet. Og pga. av dette så har jeg ikke hatt tid til å validere koden. Det tar kanskje kort tid å validere, men som sagt har jeg ikke tatt meg tid til det ennå.

 

Jeg lurte om dere visste om hvorfor menyen er litt feil, resten fikser jeg selv uten problemer.

Følg denne lenken, så har du validert både html og css i løpet av et par minutter. Får du opp noen feilmeldinger hjelper de deg muligens med å løse problemet ditt. Jeg tror det er det de foregående innleggene her forsøker å si...

 

Mvh Primaxx

[TCi]

Da har jeg fikset valideringen. Som jeg regnet med, så hadde det ingen betydning. Så har noen ideer om hva som skyldes at menyen har et mellomrom på høyre side?

[pgdx]

Et tips:

h3 { clear:both}

 

Nå har jeg ikke akkurat satt meg inn i hvordan du har laget den menyen, men det kan jo skyldes mye... Padding/margin-feil? Feil i matematikken din?

[mohuhau]

Bra du fikset valideringen. Problemet var ikke at jeg trodde valideringen ville fikse problemet i dette tilfellet, men det at jeg må sjekke gjennom alle feilene for å se om disse kan påvirke resultatet er veldig unødvendig. Når du ber om hjelp her bør du alltid fikse koden din så godt du kan først. Slik blir det enklere og raskere for oss å hjelpe deg, noe som gjør at det er større sansynlighet for at du får den hjelpen du trenger.

 

Så til problemet med menyen din:

Det er flere måter å fikse det på, men den enkleste er nok å endre høyden i #banwrap til 139px og legge til

background: url("images/navBarBg.gif") repeat-x;

i #menu. Dette gjør at du kan fjerne

background: url("images/navBarBg.gif") repeat-x;

de andre plassene der du har dette.

Du kunne forresten klart deg uten mange av disse nøstede divene dine...

Endret 27. april 2005 av mohuhau

[Cubal]

Du kan prøve å øke bredden på det siste elementet i menyen med et par pixler..

Siden du allerede har gitt denne en klasse, kan du legge til:

#navcontainer a.lightblue {  
width: 79px;}

 

Sikkert ikke den beste løsningen, men det kan fungere

[TCi]

Takk for tipsene. Jeg klarte å få til en løsning på det, takket være tipsene. Det jeg gjorde er:

 

Laget en ny "klasse" for den lyseblåe knappen.

#navcontainer a.lightblue { background: url("images/navBarBg_lightblue.gif") repeat-x; width:79px; background: url("images/navBarBg.gif") repeat-x; }

 

Og takket være tipset til Cubal så fungerte dette topp sammen.

 

Takk for hjelpen hele gjengen!