login  Naam:   Wachtwoord: 
Registreer je!
 Forum

include verandert css?!? (Opgelost)

Offline verhaba - 05/05/2009 15:41 (laatste wijziging 05/05/2009 16:15)
Avatar van verhabaLid Hallo
Ik weet niet niet goed in welk gedeelte van het forum in dit moet plaatsen. Aan de moderator om erover te beslissen. :-)
Ik ben een site aant ontwikkelen in php, waarbij ik gebruik maak van css voor de opmaak. daar ben ik al naarstig aan bezig. Nu de site bestaat uit twee delen: een header, een main en een rechter navigatiebar. In de header zit wel ook een navbar, maar die doet hier ff nie mee.
Om me het onderhoud later makkelijker te maken, dacht ik de header en de navbar te includen. Momenteel had ik voor iedere pagina code voor de header en de navigatiebar, vandaar dat ik me het vele werk wil besparen later via de include.
Nu komt mijn probleem. Mijn css bedraagt zich anders. zie maar:
site zonder include
site met include 
Hoe komt dit? Beter nog hoe kan ik dit voorkomen?

code default.css:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. /* CSS Document The Bigblue */
  2. body{
  3. 	position: absolute;
  4. 	background-color:#000000}
  5.  
  6. font {color:#CCCCCC}
  7.  
  8. /* Header in een divje plaatsen */
  9. #header {
  10. 	margin-top: 10px;
  11. 	margin-left: 50px;
  12. 	width:750px;
  13. 	height: 200px;
  14. 	background-image: url(../../images/header.jpg);
  15. 	background-repeat:no-repeat}
  16.  
  17. /* horizontale navigatiebar */
  18. #navbar_horiz{
  19. 	position:absolute;
  20. 	margin-top: 160px;
  21. 	margin-bottom: 0.5em;
  22. 	width:750px;
  23. }
  24. #navbar_horiz ul {
  25. 	background-color: silver;
  26. 	text-align: center;
  27. 	margin-left: 0;
  28. 	padding-left: 0;
  29. 	border-bottom: 1px solid gray;
  30. }
  31.  
  32. #navbar_horiz li {
  33. 	list-style-type: none;
  34. 	padding: 0.5em 1.2em;
  35. 	border-left: 1px solid white;
  36. 	display: inline;
  37. 	vertical-align:middle;
  38. }
  39. #navbar_horiz li:first-child {
  40. 	border: none;
  41. }
  42.  
  43. /* Rechtse navigatie bar*/	
  44. #navbar_right{
  45. 	position:absolute;
  46. 	background-color:#FFFFFF;
  47. 	margin-left: 660px;
  48. 	width: 145px;
  49. 	height: 630px;
  50. 	font-family:Verdana, Calibri, Cambria}
  51.  
  52. .navbar_top{
  53. 	background: #1E5791;
  54. 	height: 35px;
  55. 	vertical-align:middle;
  56. 	text-align: center;
  57. 	text-decoration:underline;
  58. 	font-family:Courier New, Courier, monospace;
  59. 	color: #FFFFFF;
  60. 	font-size:18px;
  61. 	font-style:italic;
  62. 	font-variant:small-caps;
  63. 	border-width:2px;
  64. 	border-color:#FFFFFF;
  65. 	border-style:solid;
  66. 	}	
  67.  
  68. .li_navbar{
  69. 	font-family:Verdana, Calibri, Cambria, Arial, Helvetica, sans-serif;
  70. 	font-size:12px;
  71. 	}
  72.  
  73. #main {
  74. 	position:absolute;
  75. 	background-color:#666666;
  76. 	width: 600px;
  77. 	margin-left: 50px;
  78. 	height: 630px;
  79. 	font-family: verdana, Calibri;
  80. 	font-size:18pt;
  81. }


code main.php

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <?php
  2. include 'header.php';
  3. include 'navbar_right.php';
  4. ?>
  5. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  6. <html xmlns="http://www.w3.org/1999/xhtml">
  7. <head>
  8. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  9. <link rel="shortcut icoN" href="../../images/andi_europe.ico">
  10. <title>The Big Blue New</title>
  11. <link href="../../css/default.css" rel="stylesheet" type="text/css"/>
  12. </head>
  13. <body>
  14. <div id="main"> main div </div>
  15. </body>
  16. </html>


code navbar_right.php

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 rel="shortcut icoN" href="../../images/andi_europe.ico">
  6. <title>The Big Blue New</title>
  7. <link href="../../css/default.css" rel="stylesheet" type="text/css"/>
  8. </head>
  9.  
  10. <body>
  11. <div id="navbar_right"> 
  12. <p class="navbar_top"> duikshop </p>
  13. <ul>
  14. <li class="li_navbar"> winkel </li>
  15. <li class="li_navbar"> nieuws </li>
  16. </ul>
  17.  
  18. <p class="navbar_top">rebreather</p>
  19. <ul>
  20. <li class="li_navbar"> rEvo </li>
  21. <li class="li_navbar"> opleidingen </li>
  22. </ul>
  23.  
  24. <p class="navbar_top"> login </p>
  25. <Form method="post" action="login.php">
  26. <p class="li_navbar">username:<br> <input type="text" name="username" width="150px">
  27. <br> password: <br><input type="password" name="password" width="75%"></p>
  28. <input type="submit" value="login" width="25px">
  29. <input name="reset" type="reset" id="reset" value="reset" width = "25px">
  30.  
  31. </Form>
  32. </div>
  33. </body>
  34. </html>

code header.php
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 rel="shortcut icoN" href="images/andi_europe.ico">
  6. <title>The Big Blue New</title>
  7. <link href="../../css/default.css" rel="stylesheet" type="text/css"/>
  8. </head>
  9.  
  10. <body>
  11. <div id="header">
  12. <div class="navbar_horiz">
  13. <ul>
  14. <li> Start </li>
  15. <li> Noordzee </li>
  16. <li> Duikshop </li>
  17. <li> Duikschool </li>
  18. <li> Gastenboek </li>
  19. <li> leden toevoegen </li>
  20. </ul>
  21. </div>			
  22. </div>
  23. </body>
  24. </html>

6 antwoorden

Gesponsorde links
Offline Koen - 05/05/2009 16:04
Avatar van Koen PHP expert Zonder code zijn we niet zoveel...
Offline Wim - 05/05/2009 16:09
Avatar van Wim Crew algemeen waarschijnlijk heb je output in het bestand dat je include die je niet wil. Druk eens op CTRL+A om alles te selecteren, waarschijnlijk staan er enters of tekst boven je header....
Offline WouterPSV - 05/05/2009 16:13
Avatar van WouterPSV Lid Als je nu een template.php gebruikt?

Als ik je namelijk goed begrijpt wil je gewoon als je één ding aanpast dat het dan gelijk overal toegepast wordt.

In de template.php kun je dan alles in wijzigen en word het gelijk toegepast op alle pagina's. Ik gebruik het ook. Het scheelt een hoop werk.

In template.php include hierin dan weer dingen zoals het menu, footer etc., omdat het dan makkelijker is alles terug te vinden, en de code word niet zo lang.

Misschien is het iets wat je verder kan helpen.
Offline verhaba - 05/05/2009 16:17
Avatar van verhaba Lid Hey WouterPSV
Idd, dat is het alternatief. Maar dat blijf je nog steeds met herhalende code zitten (nml de header en de navigatie bar rechts) en dat wil ik net vermijden.
Offline WouterPSV - 05/05/2009 16:20
Avatar van WouterPSV Lid Die kun je dan toch includen in je template.php ?

Of ik snap niet helemaal wat je met herhalende code bedoel  
Offline verhaba - 05/05/2009 16:32
Avatar van verhaba Lid Hm... idd. ipv twee afzonderlijke bestanden zou ik dan ééntje hebben... idd werkt nog handiger. Had het anderbegrepen.
Maar ik hou het momenteel bij... Om gewoon niet nog eens te moeten veranderen... Ik ben al blij als het werkt... Veranderen ai ai ai...
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.217s