Toon posts:

[CSS] Achtergrond verdwijnt :(

Pagina: 1
Acties:

Verwijderd

Topicstarter
Goedemiddag GOT-ers,

Tegenwoordig zie ik veel pagina's die bijna volledig in CSS zijn gemaakt, dus ik dacht dat kan ik ook.
Mooi niet dus!

De bedoeling is dat ik een design maak die volledig (100% breed) over de pagina verspreid is. De breete loopt door met een background (repeat).

Toen ik mijn slices in DIV's had gezet zag ik dat er een ruimte tussen de plaatjes zat.
Na veel zoeken heb ik een oplossing gevonden, namelijk:

CSS code:
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
#content 
{
    width: 100%;
    height: 100%;
    margin: 0px;        
}

body {
    margin: 0px;
}

#header 
{
    background-image: url(include/images/header_verloop.jpg);
    background-color:#FFFFFF;
    background-repeat:repeat-x;
    
    width:100%;
    

}
.row_image {
    margin  : 0px;
    padding : 0px;
    float   :left;
        display :table-cell;
}


HTML code:
code:
1
2
3
4
5
6
7
8
9
<div id="content">

  <div id="header"> 
        <div class="row_image">[img]"include/images/header_beeldmerk.jpg"[/img]</div>
        <div class="row_image">[img]"include/images/header_fdb.jpg"[/img]</div>
        <div class="row_image">[img]"include/images/header_beeldmerk-04.jpg"[/img]</div>        
  </div>

</div>


Dit werkt prima, alleen het probleem is dat de achtergrond die doorloopt om de pagina 100% te maken verdwijnt. Het heeft met de "float: left;" code te maken. Als ik die weg haal zie ik de achtergrond weer, maar dan zie ik de ruimte tussen de plaatjes ook weer.

Ook hier heb ik al uren aan besteed om het probleem te vinden! Ik weet totaal niet waarop ik moet zoeken.

Iemand die mij kan helpen?

Hartelijk bedankt!

  • crisp
  • Registratie: Februari 2000
  • Laatst online: 00:07

crisp

Devver

Pixelated

Cascading Stylesheet:
1
#header { overflow: auto; }

Dit zorgt voor clearing van je floats.

Intentionally left blank


  • frickY
  • Registratie: Juli 2001
  • Laatst online: 21-04 13:13
Cascading Stylesheet:
1
2
3
html, body {
  width: 100%
}
;)
Je body-tag is evenals je div-tag een HTML entiteit. Indien je deze geen vaste breedte geeft schaalt deze automatisch naar de benodigde breedte, namelijk die van zijn childs.

Zie hier onder me ;)

[ Voor 7% gewijzigd door frickY op 05-12-2005 15:55 ]


  • crisp
  • Registratie: Februari 2000
  • Laatst online: 00:07

crisp

Devver

Pixelated

frickY schreef op maandag 05 december 2005 @ 15:40:
Cascading Stylesheet:
1
2
3
html, body {
  width: 100%
}
;)
Je body-tag is evenals je div-tag een HTML entiteit. Indien je deze geen vaste breedte geeft schaalt deze automatisch naar de benodigde breedte, namelijk die van zijn childs.
Not true; block-level elementen pakken altijd de volledig beschikbare breedte. Qua hoogte heb je gelijk.

Intentionally left blank


  • frickY
  • Registratie: Juli 2001
  • Laatst online: 21-04 13:13
Argh.. je hebt helemaal gelijk :X