login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Positioneren, borders en meer moois...

Offline Doccie - 15/08/2006 01:56 (laatste wijziging 15/08/2006 02:04)
Avatar van DoccieNieuw lid Heya,

Ik heb enkele probleempjes met mijn CSS layout.
<a href="http://www.kwb-oevel.be/Varia/BlogFlattened_blue.jpg">Dit</a> is hoe mijn layout er zou moeten uitzien en <a href="http://www.kwb-oevel.be/Varia/CSStest.html">dit</a> is hoe hij er nu uitziet...

Wat er dus mis is:
1) De title header bovenaan mijn pagina zou voorzien moeten zijn van een 1px dikke border aan de boven- en onderzijde...

2) Mijn container element zou op een bepaalde afstand van de rechtermarge moeten komen te staan.

3) Mijn top image van mijn navigatiemenuutje wordt te laag gepositioneerd... De Now(); afbeelding zou bovenaan het - voor de duidelijk - grijsgekleurde middelste gedeelte komen te staan.

4) Het calligrafisch stijl element in de rechterbovenhoek van de pagina zou ander alle andere lagen moeten komen te staan.

CSS code
php code - Bekijk de code zonder highlighting - Klap code in 
  1. /* CSS Document */
  2. body {
  3. 	background: #9999cc url(images/bl_gradient.gif) repeat-x;
  4. 	font: 100% Verdana, Arial, Helvetica, sans-serif;
  5. 	font-size: 10px;
  6. 	margin: 0px;
  7.     padding: 0px;
  8. }
  9.  
  10. #calligraph {
  11. 	background: url(images/bl_calli.png) no-repeat top right;
  12. 	position: relative;
  13. 	float: right;
  14. 	right: 0 px;
  15. 	height: 229px;
  16. 	width: 212px;
  17. 	z-index: 0;
  18. }
  19.  
  20. #container {
  21. 	background: url(images/bl_container.png) repeat-y center top;
  22. 	padding: 30px 0px 0px 0px;
  23. 	float: right;
  24. 	width: 734px;
  25. 	z-index: 1;
  26. }
  27.  
  28. #container p {
  29. 	position: relative;
  30. 	/*text-align: left;*/
  31. 	padding: 20px 30px 16px 20px;
  32. }
  33.  
  34. h1 {
  35. 	background: #55638C url(images/bl_header.jpg) no-repeat center;
  36. 	padding-left: 20px;
  37. 	padding-right: 20px;
  38. 	border-bottom: 1px #5E6E9C;
  39. 	border-top: 1px #5E6E9C;
  40. 	height: 40px;
  41. 	width: 680px;
  42. 	font-size: 1px;
  43. 	text-align: center;
  44. 	margin-left: 7px;
  45. 	z-index: 2;
  46. }
  47.  
  48.  
  49. #footer {
  50. 	background: url(images/bl_footer.jpg) repeat-x bottom;
  51. 	position: relative;
  52. 	height: 131px;
  53. 	margin-left: 7px;
  54. 	margin-right: 7px;
  55. }
  56.  
  57. #mainNav {
  58. 	/*background: url(images/bl_middle_nav.png) repeat-y;*/
  59. 	text-align: left; 
  60. 	background-color:#999999;
  61. 	margin-right: -100px;
  62. 	float: right;
  63. 	width: 172px;
  64. 	z-index: 3;
  65. }
  66.  
  67. #mainNav h2 {
  68. 	background: url(images/bl_top_nav.png) no-repeat top left;
  69. 	padding-top: 0px;
  70. 	height: 40px;
  71. }
  72.  
  73. #mainNav .last {
  74. 	background: url(images/bl_bottom_nav.png) no-repeat bottom left;
  75. 	height: 11px;
  76. 	padding-bottom: 20px;
  77. }
  78.  
  79. h2 span, h1 span, #calligraph span {
  80. 	visibility: hidden;
  81. }


HTML code
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <link href="him.css" rel="stylesheet" type="text/css">
  6. <title>Untitled Document</title>
  7. </head>
  8.  
  9. <body>
  10. <div id="calligraph"><span>Calligraphic style element</span></div>
  11. <div id="container">
  12. <div id="shadowLeft"></div>
  13. <div id="shadowRight"></div>
  14. <div id="mainNav">
  15. 	<h2><span>Recent entries</span></h2>
  16. 	<ul>
  17. 		<li>Blah</li>
  18. 		<li>Blah, blah</li>
  19. 		<li>Blah...</li>
  20. 		<li>Blah</li>
  21. 		<li>Blah, blah</li>
  22. 		<li>Blah...</li>
  23. 		<li>Blah</li>
  24. 		<li>Blah, blah</li>
  25. 		<li>Blah...</li>
  26. 	</ul>
  27. 	<div class="last"></div>
  28. </div>
  29. <h1><span>His blog</span></h1>
  30. <p>Dummy text</p>
  31. <div id="footer"></div>
  32. </div>
  33. </body>
  34. </html>


Ze hebben mij al aangeraden om geen absolute positionering te gebruiken, maar daardoor krijg ik mijn container element dus niet meer gepositioneerd zoals ik het wil... 

5 antwoorden

Gesponsorde links
Offline CDNC - 15/08/2006 21:31
Avatar van CDNC PHP ver gevorderde
php code - Bekijk de code zonder highlighting - Klap code in 
  1. #mainNav .last {
  2.   background: url(images/bl_bottom_nav.png) no-repeat bottom left;
  3.   height: 11px;
  4.   padding-bottom: 20px;
  5. }

#mainNav .last => klopt niet juist, en ik zei ook ergens z-index, z-index werkt enkel als je position:absolute erbij haalt.

en wat zijn de redenen waarom 'ze' absolute positionering afraden?
Offline Riny - 15/08/2006 21:50
Avatar van Riny Nieuw lid @CDNC:

Hoezo klopt #mainNav .last niet?

Kan makkelijk hoor.
Offline CDNC - 15/08/2006 21:53
Avatar van CDNC PHP ver gevorderde ik vermoed dat het #mainNav, .last moet zijn ?
Offline Riny - 15/08/2006 21:56
Avatar van Riny Nieuw lid Niet met wat zijn bedoeling is 

Je kunt nu 'last' definieren binnen 'mainNav'..

Bijvoorbeeld:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="mainNav">
  2.     <div class="last"></div>
  3. </div>


Dan werkt .last alleen binnen #mainNav 
Offline Doccie - 16/08/2006 23:50
Avatar van Doccie Nieuw lid absolute positionering werd afgeraden voor beginners blijkbaar, en over het algemeen ook... Geen idee waarom... 

En dat is indeed wat ik momenteel doe OnlineGamer 

Anyhoo, ik ben ondertussen al een beetje gevorderd... met het nodige gefoefel ziet alles er nu goed uit behalve dan de navigatie.
Ik kan momenteel geen voorbeeld posten, maar ik zal dat zo spoedig mogelijk proberen te doen :-)
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.196s