posisjonerings problem med css!

beatex · 11. november 2004

Har akkurat satt meg litt inn i css, utrolig gøy. Jeg har et problem med at fremstillinga av linkene blir posisjonert feil i opera, IE og firefox. I opera kommer linkene for langt opp, i IE for langt ned mens i firefox vises de riktig. Regner med det er noe med kodinga men klarer ikke å se hva det er. Noen som har en idé om hva som er galt?

Pixelreactor

CSS

body {

text-align: center;

margin-top: 0px;

background-image: url('../bilder/bakgrunn4.gif') ;

}

#container {

width: 656px;

margin: 0px auto;

text-align: left;

background: url('../bilder/hovedbildeny.gif') no-repeat;

}

a:link {

font-family: arial;

text-decoration: none;

color: #333333;

font-size: 12px;

}

a:visited {

font-family: arial;

text-decoration: none;

color: #333333;

font-size: 12px;

}

a:hover {

font-family: arial;

text-decoration: none;

color: #f0f0f0;

font-size: 12px;

background: #596DB6;

}

a:active {

font-family: arial;

text-decoration: none;

color: #333333;

font-size: 12px;

}

.strek {

font-size: 12px;

}

#linker {

padding-top: 42px;

padding-left: 460px;

}

#tekstbox {

padding: 0 28px 0 290;

}

.tekst {

font-family: arial;

font-size: 12px;

line-height: 18px;

}

h2 {

font-family: arial;

font-size: 14px;

font-weight: bold;

padding-left: 300px;

margin-top: 30px;

color: #333333;

}

ul

{

list-style-type:circle;

list-style-position:inside;

padding-left: 290px;

font-size: 11px;

font-color: #333333;

font-family: sans-serif;

}

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Untitled Document</title>

</head>

<body>

<p><a href="#">Hovedside</a> <span class="strek">|</span> <a href="#">Prosjekter</a>

<span class="strek">|</span> <a href="#">Kontakt</a></p>

</div>

<p class="tekst">Sliter med å få de forskjellige nettleserene

til å vise oppsettet riktig. Har akkurat begynt med CSS så har

nok mye å lære. Men det som er problemet er at linkene over

vises forskjellig i opera, IE og firefox. I opera kommer linkene litt lenger

opp, i IE litt lenger ned, mens i firefox vises det perfekt slik jeg vil

at det skal vises i alle browsere. Hva har jeg gjort feil?</p>

</div></div>

</body>

</html>

FuLu · 11. november 2004

Prøv å ha #linker p { margin: 0; } eventuelt og padding: 0; så kan du styre plassering av meny/linker (i høyden) med padding-top/bottom f.eks.

Eller så kan du like greit droppe å ha linkene i en P, du har dem jo i en DIV.. ikke noe poeng å ha dem i en P da?

Endret 11. november 2004 av FuLu

beatex · 12. november 2004

Takk for svar FuLu. Skal teste det når jeg kommer hjem fra jobb. Jeg er ikke helt stabil på css enda så godt å få hjelp fra dere som kan det:)

absent · 12. november 2004

Du kan også prøve å legge til denne koden i css dokumentet:

* {
margin: 0;
padding: 0;
}

Dette vil så vidt jeg vet elimenere padding og margin feil mellom nettlesere. Rett meg hvis jeg tar feil

Ellers, når det gjelder sida di, så vil jeg bare påpeke noen småting Ser at du har glemt å legge inn en tittel i head elementet, noe som er greit fordi den da kommer opp "riktig" hvis du skal legge sida i søkemotorer. et lite søk på Untitled Document gir mange treff, som viser at dette er en relativt vanlig feil

Ellers, når det kommer til semantikk, bør du legge linkene dine inn i en liste, fordi en meny med linker kan betegnes som en uordnet liste (du bruker elementet <ul>). Denne kan formateres som du vil med CSS, det er bare å lese, sikker på at du finner ut av det

Mente ikke å pirke, ville bare gi deg en liten pekepinn, siden du akkurat har begynt med CSS Lykke til videre!

EDIT: Skriveleif

Endret 12. november 2004 av absent

beatex · 12. november 2004

Hopp!

Har ikke glemt å legge inn tittel i head elementet, er foreløpig bare en testside så skal få det inn etterhver Når det gjelder semantikken har du nok helt rett, skal legge linkene i en liste når jeg får tid. Tar litt tid å komme inn i alle elementene. Takk for tipsene absent :thumbup:

absent · 12. november 2004

Har ikke glemt å legge inn tittel i head elementet, er foreløpig bare en testside så skal få det inn etterhvert

Okey

Bare hyggelig

beatex · 12. november 2004

Hai hai!

Fikk linkene til å posisjonere seg riktig, i alle fall i IE og firefox, ikke testet i opera enda men regner med at det funker der også. Takker for all hjelp , kommer sikkert tilbake med flere spørgesmål senere.

beatex · 12. november 2004

huff!

Utrolig rart, funker som sagt fint i IE og FF men i opera kommer linkene høyere opp enn det de skal. Går det ann å feks skrive en kode for kun opera slik at jeg kan posisjonere linkene et par pixler ned? Eller finnes det en annen løsning? Det er ikke veldig mye linkene blir flyttet i opera men hadde vært greit å få det 100%.

her er koden (ikke mye forandret siden sist):

CSS

body {

text-align: center;

margin-top: 0px;

background-image: url('../bilder/bakgrunn4.gif') ;

}

#container {

width: 656px;

margin: 0px auto;

text-align: left;

background: url('../bilder/hovedbildeny.gif') no-repeat;

height: 500px;

}

a:link {

font-family: arial;

text-decoration: none;

color: #333333;

font-size: 12px;

}

a:visited {

font-family: arial;

text-decoration: none;

color: #333333;

font-size: 12px;

}

a:hover {

font-family: arial;

text-decoration: none;

color: #f0f0f0;

font-size: 12px;

background: #596DB6;

}

a:active {

font-family: arial;

text-decoration: none;

color: #333333;

font-size: 12px;

}

.strek {

font-size: 12px;

}

#linker {

padding-left: 450px;

padding-top: 59px;

}

/* top right bottom left */

#tekstbox {

padding: 0px 28px 0px 290px;

}

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Pixelreactor</title>

</head>

<body>

<div id="linker"> <a href="#">Hovedside</a> <span class="strek">|</span> <a href="#">Prosjekter</a>

<span class="strek">|</span> <a href="#">Kontakt</a></div>

</div>

</body>

</html>

absent · 13. november 2004

Hvis du har litt kunnskap om php, kan du lese litt her

Arve Systad · 13. november 2004

Fåreslår at du heller laster opp sida en plass og gir oss en link til den. Da ser vi kanskje feilen først, og finner fram koden og ser på den når vi veit ka vi skal sjå etter

Endret 13. november 2004 av arve87

beatex · 13. november 2004

Ja selvf . Her er linken: Pixelreactor

Prøvde også å legge inn *{padding:0; margin:0;} uten at det funka. Div´en i opera går ikke så langt ned som i IE og FF. Noen idéer?

Ja der har du en interessant side absent, tskal se på den, takker.

Endret 13. november 2004 av beatex

Logg inn

posisjonerings problem med css!

Anbefalte innlegg

beatex

Lenke til kommentar

Videoannonse

FuLu

Lenke til kommentar

beatex

Lenke til kommentar

absent

Lenke til kommentar

beatex

Lenke til kommentar

absent

Lenke til kommentar

beatex

Lenke til kommentar

beatex

Lenke til kommentar

absent

Lenke til kommentar

Arve Systad

Lenke til kommentar

beatex

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer