Problem med mellomrom mellom diver.

[Arne]

Hei!

Som de ser, så ser denne sida litt rar ut: http://arneweb.com/temp

Problemet er at det er mellomrom mellom diven: "news_top" og "news_middle".

Den ser like dum ut i både IE, O og FF.

Eg har ikkje padding-top heller... Dette er rart.

[Emancipate]

"Eg har ikkje padding-top"?

body {background-color: #737473;
    width: 100%;
    }
.main {
     background-image: url(middle.gif);
 background-repeat: repeat-y;
 height: 1200px;
 width: 600px;
 
 }
.top {
    background:  url(top.gif) no-repeat center top;
height: 27px;
width: 600px;
}
.wrap {
     width:  700px;
 min-height: 700px;
     margin-top: 0px;
     margin-right: auto;
     margin-bottom: 0px;
     margin-left: auto;
 }
.bottom {
       background: url(bottom.gif) no-repeat;
width: 600px;
height: 26px;
float: left;
clear: both;
}
.links {
      float: left;
  width: 175px;
  height: 400px;
  background: url(link.gif) no-repeat;
  margin-left: 20px;
  }
img.header {
       padding-left: 20px;
}
.news {
     width: 380px;
 height: 1000px;
 float: right;
 margin-right: 20px;
 }
.news_top {
       background: url(main_top.gif) no-repeat;
height: 24 px;
width: 380px;
padding-top: 40px; JO DU HAR PADDING-TOP HER!!!!!!!!!!!!!!!!!!!!!
}
.news_main {
            background: url(main_middle.gif) repeat-y;
width: 380px;
height: 956px;
}
.news_bottom {
            background: url(main_bottom.gif) no-repeat;
width: 380px;
height: 20px;
clear: both;
}


      

[Arne]

Sorry, eg meinte padding-top på .news_main...

Trur du å ta vekk dette vil hjelpe? Trur ikkje eg.

[Emancipate]

Tenk på det: Høyden på news top er 24 px. Innholdet skal starte 40 px fra toppen av elementet. Uansett om det hjelper eller ikke er det ikke noen god grunn til at den skal være der.

 

Og ja, det hjelper endel i IE men ikke i Opera.

[Arne]

Eg har fiksa det, men likevell virkar det ikkje. Sjå her: http://arneweb.com/temp

No er ikkje toppen der.

EDIT: Virkar i IE, men ikkje i FF.

Endret 31. mars 2006 av Fjott

[Emancipate]

Bytt ut 24 px med 24px. (Hjelper ikke, men toppen kommer tilbake.)

[Arne]

Takk, men då kjem det mellomrom mellom toppen og mellomdelen igjen.

[Arne]

Er det ingen som veit?

Kanskje dette er ein av dei meir vanskelege tinga i webdesigning?

[Kim T]

For å si en ting så er denne siden ikke akkurat så veldig bra laget. Dette med tanke på hvordan du bruker bilder som bakgrunn. Men jeg finner en ting som ikke er riktig iallefall.

 

.news_top {
       background: url(main_top.gif) no-repeat;
       height: 24px;
       width: 380px;
       clear: bottom;
}

 

Trenger du "clear" i det hele tatt? Hvis du trenger det så skal det iallefall ikke være "clear: bottom;" forsøk med "clear: right;"

[Even.]

body {background-color: #737473;
   width: 100%;
   }

.main {
    background-image: url(middle.gif);
background-repeat: repeat-y;
height: 1200px;
width: 600px;

}
.top {
   background:  url(top.gif) no-repeat center top;
height: 27px;
width: 600px;
}
.wrap {
    width:  700px;
min-height: 700px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
}
.bottom {
      background: url(bottom.gif) no-repeat;
width: 600px;
height: 26px;
float: left;
clear: both;
}
.links {
     float: left;
 width: 175px;
 height: 400px;
 background: url(link.gif) no-repeat;
 margin-left: 20px;
 }
img.header {
      padding-left: 20px;
}
.news {
    width: 380px;
height: 1000px;
float: right;
margin-right: 20px;
}
.news_top {
      background: url(main_top.gif) no-repeat;
height: 24 px;
width: 380px;
padding-top: 40px; /*Fjern denna og skriv margin: 0, padding: 0
}
.news_main {
           background: url(main_middle.gif) repeat-y;
width: 380px;
height: 956px;
}
.news_bottom {
           background: url(main_bottom.gif) no-repeat;
width: 380px;
height: 20px;
clear: both;
}

Endret 2. april 2006 av EvoZ

[Kim T]

Siden jeg er syk og ikke hadde en dritt å gjøre forsøke jeg å sette opp et forslag. Så kan du bruke det som du vil. En ting jeg ser er at du bruker en masse bagrunnsfarger på boksene. Dette gjør bakgrunnene unødvendig store. Måtte gjøre om på noen av bildene, men her er mitt resultat:

 

Arneweb

[Arne]

Tusen, tusen takk!

Men kva meiner du med mykje bakgrunnsfarger i boksene?

Det er jo berre grøn og svart!

[Kim T]

Hvis du f.eks ser på dette bildet:

 

 

Så har du mange grå pixler i bildet som er unødvendig siden du kan sette denne bakgrunnsfargen på "body" eller andre elementer. Bilde bær strengt tatt kun være den sorte kanten og det grønne innholdet.

 

Med dette så trenger du ikke et bilde for main-middle heller for da kan du bruke bagrunnsfarge grønn, med sort kantlinje.

 

Prøv å bruk minst mulig bilder i designet ditt ett lite tips.

Endret 2. april 2006 av kimthoma

[Arne]

Takkar, men problemet er ag ikkje skal ha ei border: solid 1px;, fordi det må vere runde kantar.

Eg forstår kva du meiner, men ikkje korleis eg skal utføre det i praksis.

[Kim T]

Skal forsøke å forklare:

 

Hvis du tar f.eks dette bildet:

 

 

Så har det en bredde på 370px. Hvis du da lager et div element under dette bildet som er 370 pixler bredt kan du style det slik.

 

     
#middle {
        width: 370px;
background-color: #297629;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #000000;
border-left-color: #000000;
}

 

Da vil det se like fint ut som å ha et bilde bak.

[Arne]

Aha!

Skal forsøke å få designet opp før eg opptimerar koden/sida.

Viss du ser no, har eg endra alt som eg meiner er betydlig etter din kode likevell virkar det ikkje. Det er eit hol mellom .main_top og .main_middle...

[Arne]

Er det nokon som kan hjelpe?