login  Naam:   Wachtwoord: 
Registreer je!
 Forum

site css

Offline dufes - 15/04/2005 19:07 (laatste wijziging 15/04/2005 21:00)
Avatar van dufesGrafische interesse ik ben nog altijd maarn beginner in dit, kheb toch al heel wat geleerd
maar kheb eens gezocht tussen het forum en tutorials maar vond nix
hoe kan ik ervoor zorgen dan men bottom tussen de twee sidebars komen maar onder de main ?

php code - Bekijk de code zonder highlighting - Klap code in 
  1. #header {
  2. 	height: 184px;
  3. 	width: 754px;
  4. 	background: url(images/header.gif) no-repeat top left;
  5. }
  6.  
  7. #sidebar {
  8. 	width: 77px;
  9. 	height: 388px;
  10. 	background: url(images/sitev3.0_02.gif) no-repeat;
  11. 	float: left;
  12. }
  13.  
  14. #sidebar2 {
  15. 	width: 74px;
  16. 	height: 388px;
  17. 	background: url(images/sitev3.0_04.gif) no-repeat;
  18. 	float: left;
  19. }
  20. #main {
  21. 	width: 603px;
  22. 	height: 368px;
  23. 	background: url(images/sitev3.0_03.gif) no-repeat;
  24. 	float: left;
  25. }
  26. #bottom {
  27. 	width: 603px;
  28. 	height: 20px;
  29. 	background: url(images/sitev3.0_05.gif) no-repeat bottom;
  30. 	clear: both;
  31. }


Edit door Fenrir: Ik doe het even zo aangezien replyen onmogelijk is:
Ik heb je code veranderd: er staat bij #bottom nu clear: both ipv float: bottom.

reply dufes: het werkt nog niet, ik zouhet tussen de twee sidebars willen , dat lukt me niet

Edit door Fenrir: Dat kan misschien toch met relative. Nu heb je 2 sidebars aan de linkerkant, is dat de bedoeling? Hoe wil je het dan ertussenin krijgen?

10 antwoorden

Gesponsorde links
Offline MothZone - 15/04/2005 23:51
Avatar van MothZone PHP ver gevorderde weet niet echt een antwoord op je vraag, maar moet die # niet . zijn?
In dreamweaver gebruikt hij toch altijd een . als het niet voor tags is...
Offline Futs - 15/04/2005 23:53
Avatar van Futs Nieuw lid @MothZone:

. = voor classes
# = voor ID's
Offline Fenrir - 16/04/2005 09:45
Avatar van Fenrir PHP expert probeer zo eens:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. #header {
  2.     height: 184px;
  3.     width: 754px;
  4.     background: url(images/header.gif) no-repeat top left;
  5. }
  6.  
  7. #sidebar {
  8.     width: 77px;
  9.     height: 388px;
  10.     background: url(images/sitev3.0_02.gif) no-repeat;
  11.     float: left;
  12. }
  13.  
  14. #sidebar2 {
  15.     width: 74px;
  16.     height: 388px;
  17.     background: url(images/sitev3.0_04.gif) no-repeat;
  18.     float: right;
  19. }
  20. #main {
  21.     width: 603px;
  22.     height: 368px;
  23.     background: url(images/sitev3.0_03.gif) no-repeat;
  24.     float: left;
  25. }
  26. #bottom {
  27.     width: 603px;
  28.     height: 20px;
  29.     background: url(images/sitev3.0_05.gif) no-repeat bottom;
  30.     clear: both;
  31. }
  32.  
  33. * {
  34. border: 1px solid #00F;
  35. }


Dat laatste staat er zodat je kunt zien waar alle div's zijn. Geef mss eens je HTML, daar kan ook de fout zitten.
Offline dufes - 16/04/2005 10:13 (laatste wijziging 16/04/2005 10:13)
Avatar van dufes Grafische interesse het is me gelukt, ik heb eens geprobeerd met z-index
het ziet er nu zo uit:

en ik wilde ook eens weten of dit wel een goede oplossing is...

css :

php code - Bekijk de code zonder highlighting - Klap code in 
  1. #header {
  2. 	height: 184px;
  3. 	width: 754px;
  4. 	background: url(images/header.gif) no-repeat top left;
  5. }
  6.  
  7. #sidebar {
  8.     	width: 77px;
  9.     	height: 388px;
  10.     	background: url(images/sitev3.0_02.gif) no-repeat;
  11.     	float: left;
  12. }
  13.  
  14. #main {
  15.     	width: 603px;
  16.    	height: 368px;
  17.    	background: url(images/sitev3.0_03.gif) no-repeat;
  18.     	float: left;
  19.  	position: absolute;
  20. 	z-index: 3;
  21. }
  22.  
  23. #sidebar2 {
  24. 	width: 677px;
  25. 	height: 388px;
  26. 	background: url(images/sitev3.0_04.gif) right;
  27. 	position: absolute;
  28. 	z-index: 1;
  29.  
  30. }
  31. #bottom {
  32.     	width: 603px;
  33.     	height: 388px;
  34.     	background: url(images/sitev3.0_05.gif) bottom;
  35.     	float: left;
  36.  	position: absolute;
  37. 	z-index: 2;
  38. }


html:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <HTML>
  2. <HEAD>
  3. <link href="style.css" rel="stylesheet" type="text/css">
  4. </HEAD>
  5. <body>
  6. <div id="header">
  7. </div>
  8. <div id="sidebar">
  9. </div>
  10. <div id="main">
  11. <iframe src="home.html" height="349" width="367" frameborder=0 name="Frame"></iframe>
  12. </div>
  13. <div id="bottom">
  14. </div>
  15. <div id="sidebar2">
  16. </div>
  17. </body>
  18. </HTML>
Offline Fenrir - 16/04/2005 10:16
Avatar van Fenrir PHP expert Deze oplossing is nogal vreemd. Ik zou de html zo doen:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="header">
  2. </div>
  3. <div id="sidebar">
  4. </div>
  5. <div id="sidebar2">
  6. </div>
  7. <div id="main">
  8. <iframe src="home.html" height="349" width="367" frameborder=0 name="Frame"></iframe>
  9. </div>
  10. <div id="bottom">
  11. </div>


en dan sidebar: float: left;
en sidebar2: float: right;

de bottom: clear: both;

en dan heb je wat je wil.
Offline dufes - 16/04/2005 10:19
Avatar van dufes Grafische interesse zo lukt het mij toch niet, de bottom blijft onder de sitebars, en deze moet ertussen
Offline Fenrir - 16/04/2005 10:38
Avatar van Fenrir PHP expert zo mss:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="header">
  2. </div>
  3. <div id="sidebar">
  4. </div>
  5. <div id="sidebar2">
  6. </div>
  7. <div id="main">
  8. <iframe src="home.html" height="349" width="367" frameborder=0 name="Frame"></iframe>
  9. <div id="bottom">
  10. </div>
  11. </div>
Offline dufes - 16/04/2005 10:39
Avatar van dufes Grafische interesse kheb het eens online gezet, mss word het je dan duidelijker

http://users.skynet.be/dufes/site/index.html
Offline Fenrir - 16/04/2005 10:45
Avatar van Fenrir PHP expert De html zo laten, en de css zo:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. #header {
  2. 	height: 184px;
  3. 	width: 754px;
  4. 	background: url(images/header.gif) no-repeat;
  5. }
  6.  
  7. #sidebar {
  8.     	width: 100px;
  9.     	height: 388px;
  10.     	background: url(images/sitev3.0_02.gif) no-repeat;
  11.     	float: left;
  12. }
  13.  
  14. #main {
  15.     	width: 543px;
  16.    	height: 368px;
  17.    	background: url(images/sitev3.0_03.gif) no-repeat;
  18. 	float: left;
  19. }
  20.  
  21. #sidebar2 {
  22. 	width: 111px;
  23. 	height: 388px;
  24. 	background: url(images/sitev3.0_04.gif) no-repeat;
  25. 	float: left;
  26. }
  27. #bottom {
  28. position: relative;
  29. top: -39px;
  30. left: 100px;
  31.     	width: 543px;
  32.     	height: 39px;
  33.     	background: url(images/sitev3.0_05.gif) no-repeat;
  34. 	clear: both;
  35. }
Offline dufes - 16/04/2005 10:47
Avatar van dufes Grafische interesse yup , nu werkt die

ty !
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.244s