Scripts - Tutorials - Forum - Downloads - Showcase - Contact

Artikels

VPN vergelijken

Algemeen

Beginpagina

FAQ

Grafische worm (243)

Links

Nieuwsartikels

Nieuwsarchief

Boeken programmeren

Overzicht

Samenwerken

Webhosting

Zoek op Sitemasters

Leden

Registreren

Ledenlijst

Ons team

Links

webhostingtop10.be

Sociale media

Follow @sitemasters

Sitemasters

Adverteren op Sitemasters?

Contacteer ons

RSS

Link naar ons

Donaties

Poll

Je moet ingelogd zijn om te stemmen.

Statistieken

Linkpartners

Forum

Categorieën > HTML & CSS

Css main volledige breedte (Opgelost)

smoos - 16/11/2010 13:54
PHP gevorderde		Ik wil graag me layout in tweeen delen waarbij de linkerkant fixt 200px is en de rechter al het overige. Normaal deel ik me layouts altijd fixt in en dan heb ik dit probleem niet maar nu met variable rechter kant kom ik er niet helemaal uit. Een plaatje ter illustratie http://www.ajweb.nl/layout.png Grijs is de fixt menu. Geel is het main vlak. Rood is weer een div in main met een fixt length. Deze wil ik centreren (margin: auto) binnen het main vlak. Der moet dus net zoveel geel links als rechts van dat divje zijn. Maar om margin: auto te kunnen gebruiken moet hij weten hoe breed het gele vlak is. Mmm hopelijk is het een beetje duidelijk

9 antwoorden

Gesponsorde links

Koen - 16/11/2010 15:38 (laatste wijziging 16/11/2010 15:44)
PHP expert		Je wilt dus het rode vlak gecentreerd zien in het gele vlak, correct? In dat geval moet je toch enkel weten hoe breed het rode vlak moet zijn? Dan kan je gewoon dit doen: css code - Bekijk de code zonder highlighting - Klap code in #rood { position: relative; margin: 0 auto; width: 500px; } #rood { position: relative; margin: 0 auto; width: 500px; } Het kan zijn dat je ook het rode gele vlak een position: relative; moet meegeven, maar daar ben ik niet zeker van. Succes

smoos - 16/11/2010 15:49 (laatste wijziging 16/11/2010 15:59)

PHP gevorderde

Dat heb ik geprobeerd maar dat werkt niet. Waarschijnlijk omdat de gele box geen breedte weet.

Dit is de html en css voor de verduidelijking

html4strict code - Bekijk de code zonder highlighting - Klap code in

<div id="container">
    <div id="menu">
        menu
    </div>
    <div id="main">
        <div id="content">
            De rooie box
        </div>
    </div>
</div>

<div id="container">
    <div id="menu">
        menu
    </div>
    <div id="main">
        <div id="content">
            De rooie box
        </div>
    </div>
</div>

css code - Bekijk de code zonder highlighting - Klap code in

                #container {
    position: relative;
    width: 100%;
    clear: both;
}
#menu {
    width: 200px;
    background-color: grey;
    float: left;
}
#main {
    float: left;
    background-color: yellow;
}
#content {
    width: 500px;
    margin: auto;
    position: relative;
}

            
#container {
    position: relative;
    width: 100%;
    clear: both;
}
#menu {
    width: 200px;
    background-color: grey;
    float: left;
}
#main {
    float: left;
    background-color: yellow;
}
#content {
    width: 500px;
    margin: auto;
    position: relative;
}
 

Sam - 16/11/2010 15:51
PHP expert		smoos schreef: Dat heb ik geprobeerd maar dat werkt niet. Waarschijnlijk omdat de grijze box geen breedte weet. Je grijze vlak is toch de linkerkant? 200px dus?

smoos - 16/11/2010 16:00
PHP gevorderde		Sam schreef: [..quote..] Je grijze vlak is toch de linkerkant? 200px dus? Ahja ik bedoel gele ik heb het aangepast.

IndexS - 17/11/2010 00:42

MySQL interesse

Onderstaande werkt, maar je rode blok springt wel onder de grijze als het venster te klein wordt. Hier dus kleiner dan 600px. Weet niet of je er iets aan hebt.

html4strict code - Bekijk de code zonder highlighting - Klap code in

<style type="text/css">
#container {
    clear: both;
	background-color:#00FF99;
}
#menu {
    width: 200px;
    background-color: grey;
    float: left;
}
#main {
    background-color: yellow;
	width: auto;
}
.content {
    width: 400px;
	background-color: red;
}
</style>

<div id="container" >
    <div id="menu">
        menu
    </div>
    <div id="main" align="center">
        <div class="content">
            De rooie box
        </div>
    </div>
</div>

<style type="text/css">
#container {
    clear: both;
	background-color:#00FF99;
}
#menu {
    width: 200px;
    background-color: grey;
    float: left;
}
#main {
    background-color: yellow;
	width: auto;
}
.content {
    width: 400px;
	background-color: red;
}
</style>
 
<div id="container" >
    <div id="menu">
        menu
    </div>
    <div id="main" align="center">
        <div class="content">
            De rooie box
        </div>
    </div>
</div>

Ontani - 17/11/2010 08:30 (laatste wijziging 17/11/2010 08:33)

-1

http://dl.dropbox.com/u/79192/smoos.html

css code - Bekijk de code zonder highlighting - Klap code in

                #gray {
	position: absolute;
	top: 0px;
	left: 0px;
	background-color: gray;
	width: 200px;
	min-height: 100%;
}

#yellow {
	position: relative;
	margin-left: 200px;
	background-color: yellow;
	min-height: 100%;
}

#red {
	margin: 0 auto;
	background-color: red;
	width: 500px;
	min-height: 100%;
}

            
#gray {
	position: absolute;
	top: 0px;
	left: 0px;
	background-color: gray;
	width: 200px;
	min-height: 100%;
}
 
#yellow {
	position: relative;
	margin-left: 200px;
	background-color: yellow;
	min-height: 100%;
}
 
#red {
	margin: 0 auto;
	background-color: red;
	width: 500px;
	min-height: 100%;
}
 

html4strict code - Bekijk de code zonder highlighting - Klap code in

	<div id="gray"></div>
	<div id="yellow">
		<div id="red"></div>
	</div>

<div id="gray"></div>
	<div id="yellow">
		<div id="red"></div>
	</div>

Bedankt door: smoos

IndexS - 17/11/2010 10:06 (laatste wijziging 17/11/2010 10:06)
MySQL interesse		Dat werkt beter. Alleen nog even iets van <div id="yellow" align="center"> zodat je rode vlak in het midden komt te staan.

Ontani - 17/11/2010 10:20
-1		Dat hoort die margin: 0 auto; te doen in #yellow

smoos - 17/11/2010 11:00
PHP gevorderde		Wooow thats it. Thanks!

Gesponsorde links

Dit onderwerp is gesloten.

Actiefste leden van de maand

Actieve forumberichten