Avatar billede jullehansen Nybegynder
10. oktober 2005 - 19:44 Der er 7 kommentarer og
1 løsning

Div'erne har flyttet sig!

Har nu siddet og gloet mig skeløjet på min CSS-kode for at finde ud af hvad der galt. Jeg kan stadig ikke finde fejlen.
På min side www.hgc.dk har enkelte div-bokse flyttet sig fra det oprindeligt tiltænkte. Jeg synes ikke jeg har pillet ved noget og kan ikke lige se hvor det er galt.
Nogen der har en ide?





body {
    background-image: url(../graphics/bagline.gif);
    background-repeat: repeat;
    background-attachment: fixed;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    background-position: left top;
    visibility: visible;
    position: absolute;
    height:100%;
    margin:0px 5px;
    background-color: #FFFFFF;
      }
  #banner h1 {
    border: 1px solid #999999;
    background-image: url(../graphics/banner.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    visibility: visible;
    background-color: #990000;
    height: 85px;
    width: auto;
    margin-bottom: 2px;
  }
  #indhold  {
    margin: 2px 155px 5px;
    min-width: 500px;
    border: 1px solid #999999;
    background-color: #FFFFFF;
    height: auto;
  }
  #indhold p, #indhold pre {
    margin: 20px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    line-height: 15px;

  }
  #leftcol {
    margin: 2px 0px 0px 0px;
    position:absolute;
    left:0px;
    top:85px;
    width:150px;

  }
  #leftcol p{
    margin: 10px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    background-image: none;
    background-position: left top;
  }
  .leftbox {
    width: 150px;
    float: left;
    border: 1px solid #999999;
    background-color: #FFFFFF;
    margin-right: 0px;
    margin-bottom: 5px;
    margin-left: 0px;
  }
  .leftbox p {
    font-size: 10px;
    margin: 10px;
    line-height: 12px;
  }
  #rightcol {
    width: 150px;
    float: right;
    position: absolute;
    top: 90px;
    right: 0px;
    margin-bottom: 5px;
  }
  #rightcol p {
    margin: 10px 10px 10px 15px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    background-image: none;
    background-position: left top;
  } 
  .rightbox {
    width: 150px;
    background: white;
    border: 1px solid #999999;
    margin-bottom: 5px;
  }
  .rightbox p {
    font-size: 10px;
    margin: 10px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
  }
 
h4 {
    font-size: 12px;
    margin: 0;
    padding: 3px 10px;
    background-color: #990000;
    border-bottom: 1px solid #999999;
    color: #FFFFFF;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: bold;
  }
address {
    background: white;
    margin: 5px 155px;
    padding: 5px 0 5px 0px;
    font-style: normal;
    font-size: 10px;
    font-weight: bold;
    color: #990000;
    border: 1px solid #999999;
}
address a {
    font-size: 10px;
    color: #990000;
}
.manchet {
    padding: 7px 10px;
    border: 1px solid #990000;
    margin-right: 25%;
    margin-left: 25%;
    color: #990000;
    margin-bottom: 30px;
}
.manchet p{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px !important;
    color: #990000;
    padding: 0px;
}
  a {
    font-weight: normal;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #000000;
    text-decoration: none;
}
  h1 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #990000;
    padding: 0px;
    border: 0px none #990000;
    font-weight: normal;
    margin: 0px;
}
  h2 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 9px;
    color: #666666;
    padding-left: 10px;
    font-style: normal;
    font-weight: normal;
    margin: 5px 0 25px;
}
li {
    margin-right: 20px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    list-style-position: inside;
    list-style-image: none;
    list-style-type: none;
    text-indent: 15px;
    display: list-item;
    white-space: normal;
}
a:hover {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: #990000;
}
.rulle { 
    left: 10px;
    top: 30px;
    clip:    rect(5px, 5px, 5px, 5px); ;
    position: absolute
}
.tabel { 
    left: 5px;
    top: 380px;
    clip:    rect(5px, 5px, 5px, 5px); ;
    position: absolute
}
.pic {
    margin: 10px;
    float: right;
}
.textleft {
    width:48%;
    float:left;
    background-color: #FFFFFF;
}
.textright {
    width:48%;
    float:left;
    margin-left:4% !important;  /* <-- ændre */
    margin-left:2%;  /* <-- indsæt IE hack */
    background-color: #FFFFFF;
  }
#spalte1 {
    float:left;
    width: 38%;
}
#spalte2 {
    float:left;
    width: 62%;
}
#spalte3 {
    float:left;
    width: 33%;
}
Avatar billede skovenborg Nybegynder
10. oktober 2005 - 21:07 #1
Det ser da ellers fint ud... men nu ved jeg jo ikke hvordan det oprindeligt ser ud.

p.s. Det var en dejlig, indirekte hentydning til lige at forklare hvilke bokse det drejer sig om og hvordan de har flyttet sig.
Avatar billede trekkies Juniormester
10. oktober 2005 - 21:15 #2
Jeg kan heller ikke se noget galt.

Jeg har set din side med IE 6.0 og Firefox 1.07
Avatar billede trekkies Juniormester
10. oktober 2005 - 21:18 #3
Det eneste jeg kan se der flytter sig er hvis man er på forsiden og klikker på linket til cykeltøj, der flytter den højre side sig.
Avatar billede jullehansen Nybegynder
10. oktober 2005 - 22:05 #4
OK, jeg må vist hellere præcisere. Menu-boksen ligger tættere på banneret end indhold og højre siden. Vejr-boksen hænger lidt længere nede i forhold til afstanden mellem de andre bokse. Det kan godt være det er pixel-knepperi men det har været iorden tidligere.
Avatar billede notes2c Nybegynder
11. oktober 2005 - 08:47 #5
Så må dette være svaret:

#leftcol {
    margin: 0;
    position:absolute;
    left:0px;
    top:90px;
    width:150px;
}
#rightcol {
    width: 150px;
    float: right;
    position: absolute;
    top: 90px;
    right: 0px;
    margin-bottom: 5px;
}
#indhold  {
    margin: 3px 155px 5px;
    min-width: 500px;
    border: 1px solid #999;
    background-color: #FFF;
    height: auto;
}
Avatar billede jullehansen Nybegynder
11. oktober 2005 - 09:15 #6
Det er det også :o)
Mange tak for hjælpen.
Avatar billede jullehansen Nybegynder
12. oktober 2005 - 15:47 #7
Jeg har lige fået øje på noget andet mærkeligt, vejr-boksen rykker op og ned når man aktiverer mouse-over på linket i vejr-boksen og i forum-boksen. Er der en god forklaring på det?
Avatar billede notes2c Nybegynder
12. oktober 2005 - 15:54 #8
Det er fordi boksen ovenover er defineret som <div class="leftbox"> burder hvis være <div class="rightbox">
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