1200px width in een 900px container

zondag 20 maart 2011 02:33

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Is dit eigenlijk wel mogelijk? Zit al een tijdje te zoeken maar voor hetzelfde geld kan het niet eens.
Wanneer ik een container heb van 900px en in die container wil ik een div zetten die breder is dan 900px, bijvoorbeeld de hele breedte van het beeldscherm. Is dit mogelijk? Zo ja, hoe gaat dit in z'n werk?

zondag 20 maart 2011 02:49

Acties:

0 Henk 'm!

MueR

Admin Tweakers Discord

is niet lief

Zoekterm: overflow.

Anyone who gets in between me and my morning coffee should be insecure.

zondag 20 maart 2011 02:53

Acties:

0 Henk 'm!

Oaquasis

Of door het te brede blok een position:relative; mee te geven...

HTML:

<head>

<style type="text/css">
#container{
    width:900px;
    height:600px;
    background:#F00;

}

#breedblok{
    width:1200px;
    height:200px;
    background:#000;
    position:relative;
}
</style>

</head>
<body>
<div id="container">
    <div id="breedblok">Hallo</div>
</div>

</body>

Met het de positie tag (top, right, bottom, left) kun je de positie van het blok tov de container nog beinvloeden.

zondag 20 maart 2011 03:32

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Ik komt niet verder met de overflow functie, en position:relative; helpt ook niets. Ik zal mijzelf iets verduidelijken, wat ik wil bereiken is het volgende:

Afbeeldingslocatie: http://i53.tinypic.com/bbxbd.jpg

Afbeeldingslocatie: http://i53.tinypic.com/bbxbd.jpg

Wat ik nu heb is;

CSS:

code:

body                {   background:url(images/bg.jpg) repeat-y; background-position:center; background-color:#000; margin:0px;  }

#container          {   width:900px; margin-top:22px; margin-left:auto; margin-right:auto;  }
#nav                {   width:900px; height:107px;  }
#logo               {   float:left; width:81px; height:107px; background:url(images/logo.jpg);  }
#links              {   float:left; width:540px; margin-left:279px; margin-top:76px; height:31px; background:#F00;  }
#header             {   width:100%; height:500px; background:#F00;  }

HTML:

code:

<body>

<div id="container">
    <div id="nav">
        <div id="logo"></div>
        <div id="links"></div>
    </div>
    <div id="header"></div>
</div>

</body>

De container is de container uiteraard. De "header" div is hetgeen wat 100% browser breedte moet krijgen. Is dit überhaupt mogelijk op de manier hoe ik het probeer?

zondag 20 maart 2011 12:51

Acties:

0 Henk 'm!

Oaquasis

Voor het gemak, zou ik afstappen van het idee dat de Header in de Content zit. Ik neem namelijk niet aan, dat er content onder de header div komt te staan. Als je de Nav div en de Content div los ziet, zit je met je code heel dicht bij...

Container div is even groot als de hele pagina, maar begint op 22px van de top.

Centreren van de Nav div, doe je met margin: 0 auto; ( de 0 is top en bottom margin, de auto is de links en rechts margin.

Let op dat je met de Header div een min-width:900px mee geeft, anders ziet het er raar uit als de pagina kleiner wordt dan 900px.

Css

Cascading Stylesheet:

body{background-color:#000; margin:0 auto;color:#FFF;}

#container{margin-top:22px;}
#nav{margin:0 auto;width:900px; height:107px; background:#0F0;}
#logo{float:left; width:81px; height:107px; background:#00F;}
#links{float:right; width:540px; margin-top:76px; height:31px; background:#F00;}

#header{min-width:900px;width:100%; height:500px; background:#FF0;}
#content{margin:0 auto;width:900px; height:200px; background:#0F0;}

Html

HTML:

<div id="container">
    <div id="nav">
        <div id="logo">Nav</div>
        <div id="links">Links</div>
        Nav overig
    </div>
    <div id="header">Header</div>
    <div id="content">Content</div>
</div>

maandag 21 maart 2011 20:36

Acties:

0 Henk 'm!

Keeper

<3 Ruby

Verwijderd schreef op zondag 20 maart 2011 @ 03:32: Is dit überhaupt mogelijk op de manier hoe ik het probeer?

Nee. Je moet je manier van denken omdraaien: in plaats van dat je een block uit de container laat springen, maak je je container juist 100% breed en duw je de blokken die je niet op volle breedte wil hebben naar binnen toe met een fixed breedte en auto marges.

woensdag 23 maart 2011 22:22

Acties:

0 Henk 'm!

Walance

Hm.. wat zal ik hier schrijven

Je hebt in de css van je header "width: 100%" staan, daarmee gaat het nooit werken op de manier dat jij wil. Als je width of height op 100% zet, dan is dat 100% van de parent, in jouw geval dus, 100% van de div met id "container".

Je kunt dan inderdaad beter doen wat Keeper boven mij zegt.

Onderwerpen