Beeldvullende website met het positie element

[Criz]

Hallo!

Ik heb een nieuw portfolio ontworpen en ben nu bezig om deze met XHTML & CSS in elkaar te programmeren. Het probleem is echter.. ik ben geen expert.

De website zal een beeldvullende website (althans de achtergrondafbeeldingen op width 100%). Ook maak ik gebruik van een centrale container DIV van 1000px width.
Het probleem is echter dat ik nu geen idee heb hoe ik de achtergrondafbeeldingen (topbar en header bijv.) op 100% breedte kan plaatsen zolang ik gebruik maak van een container. Wat ik heb geprobeerd is het "position:absolute;" element te gebruiken maar omdat alles uiteindelijk in de container DIV wordt geplaatst, worden de afbeeldingen ook op slechts 1000px breedte weergegeven. Nu las ik ergens iets over het "position:fixed" element en deze heb ik dan ook toegepast in de class van de topbar en de header. Het probleem dat ik toen tegenkwam was dat de topbar en header meescrollen zodra ik na beneden scroll.

Mijn vraag is nu hoe ik de afbeeldingen beeldvullend kan krijgen en gebruik kan maken van een (gecentreerde) container. Zoals gezegd ben ik geen expert en is de oplossing misschien heel simpel. Echter.. ik kom hier niet uit. Wie kan mij helpen hierbij?

Alvast bedankt!

 

[jefkebreda]

hoi,

probeer dit eens

<div id="header">
          <div class="wrap">
               <div class="logo">
                    <a href="#"><img src="images/logo.png"></a>
               </div>
               <p>content voor header</p>
          </div>
     </div>

wat je hier doet is zeg maar de container "wrap" binnen je elementen zetten die 100% width hebben

<div id="footer">
          <div class="wrap">
               <p>footer content</p>
          </div>
     </div>

hier precies hetzelfde maar dan voor de footer.


CSS

.wrap {
		position:relative;
		margin:0 auto;
               /*verander 900px met de gewenste breedte*/
		width:900px;
	}

	#header, #footer {
		width:100%;
		float:left;
	}

Ik hoop dat dit jou helpt met je probleem

 

[Criz]

Bedankt voor je reactie, het probleem is nu dat mijn header begint waar de container staat gepositioneerd en met een horizontale scrollbaar naar rechts moet scrollen om de rechterkant van de header te kunnen zien. Wat doe ik verkeerd?


HTML:

<div id="container">
 <div id="header">
  <div class="wrap">
   <img src="images/header1.png">
 </div>
  </div>
</div>

CSS:

#container {
width:1000px;
left:50%;
margin-left: -500px;
position:absolute;
}

.wrap {
position:relative;
margin:0 auto;
width:1000px;
}

#header {
width:100%;
height:500px;
float:left;
}

 

[jefkebreda]

Probeer die container eens weg te laten

 

[Criz]

Dat werkt, alleen heb ik die container nodig om elementen op de goede manier te positioneren.

 

[csshunter]

Hoi Criz,
Heb je een testpagina waarop we de verschijnselen kunnen zien?
Dan valt er waarschijnlijk meer over te zeggen.

Dus graag een linkje!

PS:

• Uit voorraad leverbaar en misschien bruikbaar: het Stortkoker-model (1) en het Stortkoker-model (2)

Met vriendelijke groet,
CSShunter