[ CSS ] problemen met background-image

[Verwijderd]

Hoi,

Ik heb 2 pagina's, de eerste pagina

http://hoaxer.be/bugme/index.html is alles in orde (Valid XHTML & CSS),
de 2de pagina loopt het echter fout => http://hoaxer.be/bugme/profiel.html (ook Valid XHTML & CSS)

Door één of andere reden valt de background-image van de content weg

Cascading Stylesheet:

#content {
    padding:5px;
    background-image: url(http://hoaxer.be/bugme/_images/bg_content.gif);
    background-repeat: repeat-x;
    background-attachment: fixed;
    background-position: left top;
    background-color: #248BBD;
}

Ik heb absoluut geen idee wat ik fout doe, het enige verschil is dat de index uit 3 div's naast elkaar bestaat & profiel.html uit 2 div's naast elkaar ... maar in beide pagina's zit zowel #homepage als #profile mee in de div #content

De css code van de eerste pagina is

Cascading Stylesheet:

#homepage { 
    clear:left;
}

#box-left {
    width:200px;
    border-right:1px dotted #EFEFEF;
    float:left;
    margin-left:-6px;
    
}

#box-middle {
    width:540px;
    float:left;
    padding:5px;
}

#box-right {
    width:200px;
    border-left:1px dotted #EFEFEF;
    float:left;
    margin-right:-6px;
}

Die van de 2de pagina is

Cascading Stylesheet:

#profile {
    clear:left;
}

#profile-menu {
    width:200px;
    border-right:1px dotted #EFEFEF;
    float:left;
    margin-left:-6px;
    
}

#profile-content {
    width:740px;
    float:left;
    margin-right:-6px;
}

[ Voor 14% gewijzigd door Verwijderd op 20-10-2007 12:28 ]

[torx]

Ik merk dat als ik float:left weghaal uit #profile-content, dat de background het weer doet. Alleen de tekst staat niet goed.

Zou deze link misschien helpen?

[RuudBurger]

je moet met float, inderdaad opletten dat hij dan vaak in Firefox (weet niet precies hoe het zit in andere browsers) dan niet een hoogte mee krijgt.
Als deze hoogte niet altijd een bepaalde hoogte is kun je dit oplosen, door in het object onderaan een object te hebben met een clear:both; erop (beetje dirty, maar werkt wel), en vaak heb je er toch al een element inzitten waar je dit op kan toepassen.
Een overflow:hidden; is ook een oplossing, op het element met de float zelf.

Verder zie ik in je code dat je floats gebruikt waar ze helemaal niet nodig zijn.. op de navigation bijvoorbeeld, hiermee ga je bij moeilijke css layouts echt problemen mee krijgen als je zo door blijft gaan.

edit:
of ik lees wat hierboven is gepost gewoon, wat op hetzelfde neerkomt ^^

[ Voor 6% gewijzigd door RuudBurger op 20-10-2007 14:26 ]

[ibmos2warp]

Waarom maak je eigenlijk dezelfde css voor in princiepe dezelfde code, alleen dan met een andere naam?
Je hebt een stukje (bijvoorbeeld): (deze is dus van die pagina die de fout ingaat)

HTML:

  <!-- start content --> 
  <div id="content"> 
    <div id="profile"> 
        <div id="profile-menu">

Waarom doe je dat niet hetzelfde als: (dit is de goede pagina)

HTML:

<!-- start content --> 
  <div id="content"> 
    <div id="homepage"> 
      <div id="box-left">

Tis precies hetzelfde.

Wat ik bedoel te zeggen is: Je maakt het jezelf gewoon te moeilijk. Je kunt gewoon "boxen" die op dezelfde plek zitten op andere pagina's gebruiken. Je hoeft niet steeds opnieuw voor elke pagina css aan te maken.
En zoals RandomT aangeeft, je kunt het oplossen door in #profile overflow: hidden te zetten.

[ Voor 29% gewijzigd door ibmos2warp op 20-10-2007 14:38 ]