login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Layout

Offline Simax - 21/09/2006 12:48
Avatar van SimaxOnbekend Beste mensen,

Ik probeer mijn index.php op te bouwen met divjes ipv een tabel.
Met welke code(css) kan ik 3 divjes langs elkaar krijge?

MvG,
Generix

23 antwoorden

Gesponsorde links
Offline marten - 21/09/2006 12:55
Avatar van marten Beheerder horizontaal of verticaal naast het elkaar?
Offline Simax - 21/09/2006 12:55
Avatar van Simax Onbekend horizontaal graag 
Offline marten - 21/09/2006 13:12 (laatste wijziging 21/09/2006 13:13)
Avatar van marten Beheerder het kan op deze manier:

index.php
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <hmtl>
  2. 	<head>
  3. 		<link rel="stylesheet" href="stijl.css" TYPE="text/css">
  4. 	</head>
  5.  
  6. 	<body>
  7. 		<div class="container">
  8. 			<div class="a"></div>
  9. 			<div class="b"></div>
  10. 			<div class="c"></div>
  11. 		</div>
  12. 	</body>
  13. </html>


stijl.css
php code - Bekijk de code zonder highlighting - Klap code in 
  1. div.container {
  2. 	position:		absolute;
  3. 	height:			100%;
  4. 	width:			100%;
  5. 	z-index:		0;
  6. }
  7.  
  8. div.a {
  9. 	position:	absolute;
  10. 	height:		100%;
  11. 	background-color:	#336699;
  12. 	width:		33%;
  13. 	left:		0px;
  14. 	z-index:	1;
  15. }
  16.  
  17. div.b {
  18. 	position:	absolute;
  19. 	height:		100%;
  20. 	background-color:	#CCCCCC;
  21. 	width:		33%;
  22. 	left:		33%;
  23. 	z-index:	1;
  24. }
  25.  
  26. div.c {
  27. 	position:	absolute;
  28. 	height:		100%;
  29. 	background-color:	#000;
  30. 	width:		33%;
  31. 	left:		66%;
  32. 	z-index:	1;
  33. }
Offline Simax - 21/09/2006 13:19 (laatste wijziging 21/09/2006 13:21)
Avatar van Simax Onbekend Ik wil ongeveer zo een layout als hieronder:

__________
|.................|
|__________|
|__________|
| |.............| |
| |.............| |
| |.............| |
| |.............| |
|_|_______|_|
|__________|

Krijg alleen die 3 divjes niet langs elkaar 

MvG,
Generix
Offline marten - 21/09/2006 13:24
Avatar van marten Beheerder working on it moment
Offline Simax - 21/09/2006 13:47
Avatar van Simax Onbekend Komt er nog een oplossing  
Offline marten - 21/09/2006 13:49
Avatar van marten Beheerder kan je lezen? 
working on it 
Offline Simax - 21/09/2006 13:50
Avatar van Simax Onbekend Ok, dan is het goed.

Alvast bedankt 

MvG,
Generix
Offline xSc - 21/09/2006 13:53 (laatste wijziging 21/09/2006 14:54)
Avatar van xSc Onbekend - Maak een hoofddiv van 100% hoog met position: absolute;
- Maak de 3 divs daarin. Geef de divs position: relative; mee. Geef de eerste en de tweede een hoogte mee, de derde zal dan zijn eigen hoogte krijgen.

De breedte kun je wel gewoon opgeven, bijv. 100%.
Offline marten - 21/09/2006 14:02
Avatar van marten Beheerder css -->
http://www.pastebin.be/2774/

html -->
http://www.pastebin.be/2775/
Offline Simax - 21/09/2006 14:29
Avatar van Simax Onbekend Style.css
body.index
{
background-color: EEEEEE;
margin-top: 10;
margin-left: auto;
margin-right: auto;
margin-bottom: 10;
text-align: center;
}

body.center
{

}


div.index
{
background-color: FFFF;
border-color: 000000;
border-style: solid;
border-width: 1;
height: auto;
width: 810;
}

div.top
{
border-color: 000000;
border-style: solid;
border-width: 1;
height: 160;
width: 800;
}

div.menu
{
border-color: 000000;
border-style: solid;
border-width: 1;
padding: 10;
height: 40;
width: 800;
}

div.left
{
border-color: 000000;
border-style: solid;
border-width: 1;
height: auto;
width: 180;
}

div.center
{
border-color: 000000;
border-style: solid;
border-width: 1;
height: auto;
width: 440;
}

div.right
{
border-color: 000000;
border-style: solid;
border-width: 1;
height: auto;
width: 180;
}

div.bottom
{
border-color: 000000;
border-style: double;
border-width: 1;
text-align: center;
height: 40;
width: 800;
}


p.bold
{
color: 000000;
font-family: verdana;
font-size: 10;
font-style: normal;
font-weight: bold;
text-decoration: none;
}
p.black
{
color: 000000;
font-family: verdana;
font-size: 10;
font-style: normal;
font-weight: normal;
text-decoration: none;
}


table
{
border-color: 000000;
border-style: solid;
border-width: 1;
}
th
{
background-color: DDDDDD;
border-color: FFFFFF;
border-style: solid;
border-width: 0;
text-align: left;
}
td
{
background-color: EEEEEE;
border-color: FFFFFF;
border-style: solid;
border-width: 0;
text-align: left;
}


a.black
{
color: 000000;
font-family: verdana;
font-size: 10;
font-style: normal;
font-weight: normal;
text-decoration: none;
}
a:hover.black
{
color: 990000;
font-family: verdana;
font-size: 10;
font-style: normal;
font-weight: normal;
text-decoration: underline;
}
a.bold
{
color: 000000;
font-family: verdana;
font-size: 10;
font-style: normal;
font-weight: bold;
text-decoration: none;
}
a:hover.bold
{
color: 990000;
font-family: verdana;
font-size: 10;
font-style: normal;
font-weight: bold;
text-decoration: underline;
}

Dit als resultaat:
Http://members.home.nl/royvanbreugel/
Offline Gerard - 21/09/2006 14:42 (laatste wijziging 21/09/2006 16:07)
Avatar van Gerard Ouwe rakker Generix, graag zou ik zien dat je dat soort dingen voortaan paste op www.plaatscode.be en daarna de link hier neer zet. Dit soort lappen code maken het er niet overzichtelijker op hier 

edit:
Ik zie inderdaad ook dat plaatscode down is. Achja, je kan altijd nog gebruik maken van pastebin.be
Offline Simax - 21/09/2006 15:51 (laatste wijziging 21/09/2006 15:57)
Avatar van Simax Onbekend Ik weet het.

Kreeg een foutmelding toen ik www.plaatscode.be opende 

Sorry voor het ongemak.

Maar wie kan mij helpen  

MvG,
Generix
Offline Vakama - 21/09/2006 18:12
Avatar van Vakama HTML beginner Hoe bedoel je langs elkaar?
ik werk meestal met divs, dus ik denk wel dat ik je kan helpen?
Offline jeroenoa - 21/09/2006 19:37
Avatar van jeroenoa Onbekend Je moet ze de divs "links" "center" "rechts" allemaal een

float: left;

meegeven ;)
Offline Simax - 22/09/2006 08:12 (laatste wijziging 22/09/2006 08:46)
Avatar van Simax Onbekend Ok, dat kan..

Maar wat als ik ze in het midden wil hebben?

Met: float: left; staan ze links 

Iemand een oplossing?

MvG,
Generix
Offline putbruy - 22/09/2006 09:27
Avatar van putbruy HTML beginner eens dit proberen:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. div.left
  2. {
  3. border-color: 000000;
  4. border-style: solid;
  5. border-width: 1;
  6. height: auto;
  7. width: 180px;
  8. float: left;
  9. }
  10.  
  11. div.center
  12. {
  13. border-color: 000000;
  14. border-style: solid;
  15. border-width: 1;
  16. height: auto;
  17. width: 440px;
  18. float: left;
  19. }
  20.  
  21. div.right
  22. {
  23. border-color: 000000;
  24. border-style: solid;
  25. border-width: 1;
  26. height: auto;
  27. width: 180px;
  28. float: left;
  29. }

met dit in je html:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <div class="left">
  2. <iframe src="left.htm" frameborder="0" scrolling="no" width="180">
  3. </iframe>
  4. </div>
  5. <div class="center">
  6. <iframe src="home.htm" frameborder="0" scrolling="no"  name="center" width="440">
  7. </iframe>
  8. </div>
  9. <div class="right">
  10. <iframe src="right.htm" frameborder="0" scrolling="no"  width="180">
  11. </iframe>
  12. </div>
Offline Simax - 22/09/2006 09:30
Avatar van Simax Onbekend Alvast bedantk voor jullie hulp 

Kan het niet op een andere manier?

Nu lijnen mijn divjes uit naar links.

Ik wil ze eigenlijk gecentreerd hebben.

MvG,
Generix
Offline marten - 22/09/2006 09:47
Avatar van marten Beheerder Werkte dat voorbeeld van mij niet dan?
Offline putbruy - 22/09/2006 09:50 (laatste wijziging 22/09/2006 09:52)
Avatar van putbruy HTML beginner
Citaat:
Nu lijnen mijn divjes uit naar links.

in IE in ieder geval niet hoor ... 
de totale breedte van de divs is 800,net zoveel als de container waar ze in staan,ik snap je 'in het midden zetten' probleem dus niet echt
Offline Simax - 22/09/2006 10:00 (laatste wijziging 22/09/2006 10:39)
Avatar van Simax Onbekend Mijn container wordt 900px breed.

Ik wil aan beide kanten 50px overhouden van mijn container.

Met float: left; werkt dit niet, omdat mijn divjes dan links uitlijnen.

Iemand een oplossing?

MvG,
Generix
Offline putbruy - 22/09/2006 10:40
Avatar van putbruy HTML beginner margin-left 50 px relatief toepassen dan op de 1ste div ?
Offline Simax - 22/09/2006 10:43
Avatar van Simax Onbekend Alvast bedankt iedereen 

Ik begrijp dat ik mijn divjes niet op een andere manier dan met float: left; kan centreren?

MvG,
Generix
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.236s