Avatar billede caf Nybegynder
04. september 2006 - 07:53 Der er 2 kommentarer og
1 løsning

Designet skrider ved stører browser

Jeg har dette css:

html, body {
    margin:0px;
    padding:0px;
    height:100%;
}

body {
    font-family: arial, verdana, sans-serif;
    font-size: 13px;
    background:#666666 url('baggrund.gif') no-repeat center;
    color: #FFFFFF;
}

.bodywrap {
      position: absolute;
      width: 980px;
    height: 580px;
      left: auto;
      top: 0px;
      right: auto;
      bottom: 0px;
    margin: 0px auto;
}

h1 {
    margin:0;
    padding:0;
}


#nav {
    position: absolute;
    width:980px;
    top: 118px;
    text-align:center;   
}

#nav a {
    overflow:hidden;
    text-decoration: none;
    font-family: arial, verdana, sans-serif;
    font-size: 12px ;
    letter-spacing: 0.3em;
    background: #FFFFFF;
    color: #333333;
}

#fotter  {
    position: absolute;
    width:980px;
    top: 557px;
    text-align:center;
}

#fotter a {
    overflow:hidden;
    text-decoration: none;
    font-family: arial, verdana, sans-serif;
    font-size: 12px ;
    letter-spacing: 0.3em;
    background: #FFFFFF;
    color: #333333;
}

og denne html:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<title>Billensteins vælværdsmassage</title>
    <link href="style.css" rel="stylesheet" type="text/css" >
   
</head>
<body>
<div class="bodywrap">


        <div id="nav">   
        <h1>
          <a href="index.html"><i>FORSIDE</i>&nbsp;&nbsp;&nbsp;&middot;&nbsp;&nbsp;&nbsp;</a>
          <a href="Shiatsu_Massage.html">SHIATSU MASSAGE&nbsp;&nbsp;&nbsp;&middot;&nbsp;&nbsp;&nbsp;</a>
          <a href="Dybdemassage.html">DYBDEMASSAGE&nbsp;&nbsp;&nbsp;&middot;&nbsp;&nbsp;&nbsp;</a>
          <a href="Akupressur.html">AKUPRESSUR&nbsp;&nbsp;&nbsp;&middot;&nbsp;&nbsp;&nbsp;</a>
          <a href="Healing.html">HEALING&nbsp;&nbsp;&nbsp;&middot;&nbsp;&nbsp;&nbsp;</a>
          <a href="Priser.html">PRISER</a>
        </h1>
        </div>
   

          <div id="forside">
            <h4>
            Hvad kan jeg tilbyde dig?</h4>
           
                 
            <p><b>Lider du af:</b></p>
            <ul>
            <li>Hovedpine</li>
            <li>Nakkesmerter</li>
            <li>Skuldersmerter</li>
            <li>Lændeproblemer</li>
            <li>Iskiasproblemer</li>
            <li>Ømme benmuskler</li>
            <li>Så kan jeg hjælpe dig!</li>
            </ul>
          </div>
       
        <div id="fotter">
        <h1>
        <a href="Lidt_om_Mig.html">LIDT OM MIG&nbsp;&nbsp;&nbsp;&middot;&nbsp;&nbsp;&nbsp;</a>
        <a href="Kontakt.html">KONTAKT</a>   
        </h1>
        </div>
       


</div>
</body>
</html>

Hvordan retter jeg, så linkene og indholdet ikke skrider, så snart brugerens skærm størelse er stører?

Mvh Caf
Avatar billede caf Nybegynder
04. september 2006 - 07:58 #1
Manglede lige dette css:
/**********FORSIDE**********/

#forside {
    position: relative;
    width: 440px;
    text-align: left;
    left: 53%;
    top: 40%;
}

#forside p {
    text-align: left;
    background: #FFFFFF;
    color: #333333;
}

#forside h4 {
    text-align: left;
    font-family: arial, verdana, sans-serif;
    font-size: 18px;
    background: #FFFFFF;
    color: #333333;
}

#forside li {
    text-align: left;
    background: #FFFFFF;
    color: #333333;
    margin-left: -23px;
}

#forside ul {
    text-align: left;
    background: #FFFFFF;
    color: #333333;
}
Avatar billede karmicmind Nybegynder
04. september 2006 - 17:49 #2
Prøv at flytte

    background:#666666 url('baggrund.gif') no-repeat center;

fra body til .bodywrap
Avatar billede caf Nybegynder
04. september 2006 - 19:16 #3
Hej Kaemicind

Det virker :-) tak for hjælpen.

Mvh Caf
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester