Lager side - trenger litt hjelp

[Grith]

Jeg mistenker at denne bugen har noe å gjøre med positioning i CSS-fila. Jeg var ikke sikker på hva jeg skulle bruke (relative, absolute osv.), så det hadde vært flott om noen kunne vært så grei å tatt en rask titt på CSS-en for å se om jeg har gjort noe feil i forhold til det nevnte!

 

CSS-koden:

Klikk for å se/fjerne innholdet nedenfor

html {
background-image: url(grafikk/backgr.jpg);
}

body {
font-family: arial, helvetica;
text-align: left;
width: 800px;
height: auto;
position: absolute;
left: 50%;
margin: 0 0 0 -400px;
overflow: hidden;
}

* {
margin: 0;
padding: 0;
border: 0;
}

#header a{
width: 800px;
height: 200px;
position: absolute;
margin:0 0 0 -400px;
left: 50%; top: 0;
text-indent: -99999px;
background-image: url(grafikk/header.jpg);
overflow: hidden;
border-right-style: solid;
border-left-style: solid;
border-width: 4px;
border-color: #000000;
}

#menu {
position: absolute;
margin-top: 200px;
width: 800px;
height: 35px;
background-image: url(grafikk/menu.jpg);	
border-right-style: solid;
border-left-style: solid;
border-width: 4px;
border-color: #000000;
}

#menu ul {
list-style-type: none;
text-align: center;
border-top-style: solid;
border-bottom-style: solid;
border-width: 3px;
border-color: #000000;
padding: 5px 0px 5px 0px;
}

#menu ul li {
display: inline;
padding: 5px 30px 5px 30px;
margin-left: -2px;
margin-right: -2px;
}

#menu ul li a {
text-decoration: none;
text-transform: uppercase;
font-size: 0.7em;
color: white;
}

#menu ul li:hover {
border-color: #500000;
border-top-style: solid;
border-bottom-style: solid;
border-width: 3px;
}

#wrap {
width: 800px;
height: auto;
position: absolute; 
margin:0 0 0 -400px;
left: 50%; top: 235px;	
border-right-style: solid;
border-left-style: solid;
border-width: 4px;
border-color: #000000;
}

#sidebar {
width: 198px;
height: auto;
min-height: 600px;
float: left;
border-right-style: solid;
border-width: 2px;
border-color: #000000;
background-image: url(grafikk/sidebar.jpg);
}

#sidebar ul {
list-style-type: none;
text-align: left;
margin-top: 50px;
margin-left: 10px;
margin-right: 20px;
}

#sidebar ul li {
display: block;
margin-top: 5px;
padding-bottom: 2px;
padding-left: 10px;
border-style: solid;
border-left-width: 10px;
border-bottom-width: 1px;
border-color: #000000;
}

#sidebar ul li a, ul li a:visited {
text-decoration: none;
color: black;
}

#sidebar ul li:hover {
border-left-color: #500000;
}

#content {
width: 600px;
height: auto;
min-height: 600px;
float: right;
background-image: url(grafikk/content.jpg);
}

#content p {
margin: 10px 20px 10px 20px;
}

#content h2 {
margin: 40px 20px 30px 20px;
text-transform: uppercase;
color: #400000;
}

#content img {
border-width: 2px;
border-style: solid;
border-color: black;
margin: 50px 20px 50px 20px;
}

#footer {
width: 800px;
font-size: 7pt;
clear: both;
text-align: center;
background-image: url(grafikk/menu.jpg);
padding: 6px 0px 6px 0px;
border-top-style: solid;
border-bottom-style: solid;
border-width: 3px;
border-left-width: 4px;
border-right-width: 4px;
border-color: #000000;
}

#footer p {
color: white;
}

#footer a {
color: white;
text-decoration: none;
}

#footer a:hover {
text-decoration: underline;
}

Endret 5. mars 2007 av Grith

[attach]

oi, dobbelpost.

Endret 5. mars 2007 av attach

[attach]

Du trenger ikke å bruke position i det hele tatt. La heller elementene flyte etter hverandre.

[Runar]

Hva er vitsen med "overflow: hidden;"? Det blir jo umulig å se på siden hvis den er større enn skjermen din.

[Grith]

@Runar: Fjernet overflow nå og det løste problemet med scrollen! Takk takk!

 

Ellers så har jeg fiklet litt rundt med CSS-koden. Klarte ikke å fjerne position-tagen, men gjorde ting litt enklere og nå funker siden (nesten) bra i samtlige tre nettlesere!

 

Dermed gjenstår følgende problemer:

 

1. Menyen blir rar i Opera når du trykker på en link som fører til index.html?

 

2. Tegnene æ, ø og å vises ikke korrekt i Firefox og Opera. Dette funker i IE?

 

3. Bildet på forsiden kommer ikke fram slik det skal være i IE?

 

4. Det dukker opp rare tegn ( ) på toppen av siden i Firefox og Opera? Når jeg trykker på "Vis kildekode" kommer disse tegnene fram foran doctype uten at jeg har skrevet dem der selv.

 

Ellers tar jeg som sagt gjerne imot generell kritikk på siden!

Endret 5. mars 2007 av Grith