Opbouwen van site met div

Door Roel H op 29-08-2010 20:42

5.698 views

Aangezien mijn huidige site niet al te fraai is probeer ik die opnieuw te maken..
En nu probeer ik hem dus met <div> dingen op te bouwen. helaas krijg ik het niet geheel voor elkaar zoals ik wil.

heb een main-div waar ik alles binnen probeer te zetten als ik de header en het menu erin plaats pakt die nog de achtergrond van de main div.
nu probeer ik onder het menu een linker een midden en een rechter stuk te krijgen.

maar als ik een linker kolom maak en daarin weer divjes plaats valt dit eigenlijk weer buiten de main div. als ik dan de linker kolom verwijder en dan wel de divjes laat staan die daarin staan komt het wel binnen de maindiv te staan..

Euhmz ja begrijpen jullie het nog :)

Heb een voorbeeldje bijgevoegd zoals ik het graag zou willen maar niet krijg..

iemand tips hoe ik het wel zo voor elkaar krijg.?
alvast bedankt.

Elio vp

29-08-2010 20:54

Wat heb je momenteel al?

Kan je je cssstyle eens laten zien..

In principe is het niet zo moeilijk hoor..

Je maakt in jou geval 3 "hoofd" div's

#header
#content
#footer

dan om het simpel te houden voor je content maak je 3 divjes

.links
.center
.rechts

En zo kan je rustig verder op bouwen..

Let wel op dat je totale breedte van die .links/rechts/center evenveel als je breedte van je #content.

En anders moet je eens online kijken voor wat css tutorials..want ik kan het toch niet goed uitleggen :p
heel moeilijk is het niet ze..

Succes!!

Obelix Idefix

29-08-2010 20:55

code?

Milo S

29-08-2010 21:19 gewijzigd op 29-08-2010 21:20

Stel je hebt de volgende html opbouw binnen je body.


<div class="wrapper">
	
    <div class="header">
    </div>
    
    <ul class="menu">
    	<li><a class="men" href="">Sample</a></li>
        <li><a class="men" href="">Sample</a></li>
        <li><a class="men" href="">Sample</a></li>
        <li><a class="men" href="">Sample</a></li>
        <li><a class="men" href="">Sample</a></li>
    </ul>
    
    <div class="left">
    	<div class="blok">
        </div>
        
        <div class="blok">
        </div>
    </div>
    
    <div class="middle">
    </div>
    
    <div class="right">
    	<div class="blok">
        </div>
        
        <div class="blok">
        </div>
    </div>

</div>

Dan kan je door middel van css classes je pagina opmaken.
Hierin staat met commentaar wat nodig is om jou opbouw te geven derest kan je zelf toevoegen.


body {
/*
Aangeven welke lettertyp, kleur, formaat.
*/	
}
div.wrapper {
/*
Vaste breedte meegeven en margin: 0px auto; zodat hij in het midden komt.
*/
}

div.header {
/*
Deze div geef je vaste breedte en hoogte
En je float naar links
*/	
}

div.left {
/*
Deze div geeft je een vaste breedte + een left margin.
En je float naar links.
*/
}
div.right {
/*
Deze div geeft je een vaste breedte + een right margin.
En je float naar links.
*/	
}
	div.blok {
	/*
	De div geeft je een vaste breedte en eventueel een lijntje / achtergrond kleur.
	En je float naar links.
	*/
	}
	
div.middle {
/*
Deze float je naar links met een vaste breedte.
*/
}

voor een menu moet je maar even googlen op "menu html css" dan vind je zoveel goede resultaten, ik heb nu geen tijd meer om dat te laten zien dus moet je even googlen.

Roel H

30-08-2010 20:55



<div id="mainsite">
<!--- BEGIN HEADER  -->
<div id="header">
<img src="images/layout/header.jpg" style="opacity: 0.2; filter: alpha(opacity=20);">
</div>
<!--- END HEADER  -->

<!--- BEGIN MENU  -->
<div id="smoothmenu1" class="ddsmoothmenu"> 
<ul>

<li><a href="#">Gastenboek</a>
  <ul>
  <li><a href="sponsor.php">Bekijken</a></li>
  <li><a href="clubvan.php">Schrijven</a></li>
  </ul>
</li>
<li><a href="contact.php">Contact</a></li>
</ul>
</div>
<!--- END MENU  -->
<!--- BEGIN mainleft  -->

<!--- BEGIN fotoleft  -->
<div id="mainleft">
<div id="fotoleft">
<img src="images/tijdelijk/foto200.jpg" />
</div>
<!--- BEGIN fotoleft  -->
<div id="sponsortable">
<div id="headsmall">
TITEL
</div>
TABEL 1
</div>
</div>

<!--- END mainleft  -->
</div>
</div>

en de css


div#mainsite{
	width:1024px;
    left: 50%;
    margin-left: -512px; /* - (width/2) */
    position: relative;
	border-left:1px solid black;
	border-right:1px solid black;
	height:100%;
	background-color: #CCCCCC;
}

div#header {
	border: 0 none;
	top-margin:0px;
	margin-bottom:0px;
}


div#sponsortable {
	width: 210px;
	height: 100%;
	border: 1px solid black;
	margin-left: 6px;
	background-color:#000;
	color:#0F3;
	text-align:center;
	height: 100%;
}

div#headsmall {
	width: 198px;
	border: 1px solid black;
	margin: 5px;
	text-align:center;
	
}

div#mainleft {
	width: 225px;
	height: 100%;
	background-color:#C00;
	float: left;
}

div#fotoleft {
	width: 200px;
	background-color:#C00;
	margin: 12px;
	background-color:#000;
}

Dat was dus wat ik tot nu toe had maar dat ging dan dus niet goed.
Ben nu bezig de dingen die hierboven staat uit te proberen kijken of dat wel lukt.

In ieder geval al bedankt voor de hulp.

Milo S

30-08-2010 21:57

Als het niet lukt, meld het maar dan zet ik de echt nodige dingen er in zodat je alleen nog maar extra design stukken er in hoeft te stoppen ;).

Roel H

10-10-2010 16:45

Nou ons seizoen voorbij is heb ik weer wat tijd om hier mee bezig te gaan.

Helaas wil het me dus nog steeds niet lukken.. de "basis" ( header en daaronder 3 rijen naast elkaar) krijg ik er wel in maar als ik dan wat extra's toevoeg gaat alles in de war :)

- Ariën -

10-10-2010 16:50

Wat voeg je dan waar toe?

Roel H

10-10-2010 16:52 gewijzigd op 11-10-2010 15:16

Aar anoniem op 10/10/2010 16:50:30

Wat voeg je dan waar toe?

Als ik in het midden gedeelte iets bij voeg zorgt dat ervoor dat alles weer verspringt en doet.
dus een main content midden div en daarin dus weer een paar verdeel divjes plaats.

[size=xsmall]Toevoeging op 10/10/2010 17:29:01:[/size]

Als ik een border links en rechts aangeef aan de "hoofd" div dan geeft hij deze border alleen aan de header ook als ik er nog een "content" div onderzet.. als ik hierbij geen class of id aangeef bij de content div dan wordt de border wel weergegeven.

<div id=hoofd>
<div id=header>
De header
</div>

<div id=content>
De content
</div>
</div>

Roel H

11-10-2010 20:37

Wederom druk bezig, en het werkt nu ongeveer. maar probeer nu een div te centreren in een div. als ik google kom ik veel spul tegen over het centreren van een div op midden van scherm.

iemand idee? of zit ik verkeerd te zoeken ?

Milo S

11-10-2010 20:45

IE: text-align: center;
FF en derest: margin: 0px auto;

Reageren

Inloggen om te reageren