css reageert anders met een include

Status
Niet open voor verdere reacties.

verhaba

Gebruiker
Lid geworden
8 feb 2008
Berichten
79
Hallo mensen
Ik ben bezig aan een website. Ik heb een header en een rechtse navigatie menu. Tot op vandaag had ik alles in één zelfde file. Per index.php had ik steeds de code voor de navigatie en voor de header. Ik heb ook al wat opmaak via css verzorgd. Toegeven, moeilijker om te onderhouden terwijl er handigere manieren van werken zijn.
Daarom kwam ik op het idee op header (header.php) en navigatie-menu ( navbar_right.php) in elk een apart php'tjes te bewaren en ze gewoon te includen in gelijk welke pagina ik deze twee nodig heb. Alle files verwijzen naar hetzelfde css bestand.
Nu, daar zit het probleem. Ik merk een verschil in opmaak. klik op de screenshots op het verschil te zien. Is dit normaal en hoe kan ik dit oplossen?
Alvast bedankt voor jullie hulp.

site met include

site zonder include

default.css
PHP:
body{
	position: absolute;
	background-color:#000000}
	
font {color:#CCCCCC}

/* Header in een divje plaatsen */
#header {
	margin-top: 10px;
	margin-left: 50px;
	width:750px;
	height: 200px;
	background-image: url(../../images/header.jpg);
	background-repeat:no-repeat}

/* horizontale navigatiebar */
#navbar_horiz{
margin-bottom: 0.5em;
margin-top: 160px;
}
#navbar_horiz ul {
background-color: silver;
text-align: center;
margin-left: 0;
padding-left: 0;
border-bottom: 1px solid gray;
width: 750px;
}

#navbar_horiz li {
list-style-type: none;
padding: 0.5em 1.2em;
border-left: 1px solid white;
display: inline;
vertical-align:middle;
}
#navbar_horiz li:first-child {
border: none;
}

/* Rechtse navigatie bar*/	
#navbar_right{
	position:absolute;
	background-color:#FFFFFF;
	margin-left: 660px;
	width: 145px;
	height: 630px;
	font-family:Verdana, Calibri, Cambria}

.navbar_top{
	background: #1E5791;
	height: 35px;
	vertical-align:middle;
	text-align: center;
	text-decoration:underline;
	font-family:Courier New, Courier, monospace;
	color: #FFFFFF;
	font-size:18px;
	font-style:italic;
	font-variant:small-caps;
	border-width:2px;
	border-color:#FFFFFF;
	border-style:solid;
	}	

.li_navbar{
	font-family:Verdana, Calibri, Cambria, Arial, Helvetica, sans-serif;
	font-size:12px;
	}

#main {
	position:absolute;
	background-color:#666666;
	width: 600px;
	margin-left: 50px;
	height: 630px;
	font-family: verdana, Calibri;
	font-size:18pt;
}

header.php
PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="shortcut icoN" href="images/andi_europe.ico">
<title>The Big Blue New</title>
<link href="../../css/default.css" rel="stylesheet" type="text/css"/>
</head>

<body>
<div id="header">
<div class="navbar_horiz">
<ul>
<li> Start </li>
<li> Noordzee </li>
<li> Duikshop </li>
<li> Duikschool </li>
<li> Gastenboek </li>
<li> leden toevoegen </li>
</ul>
</div>
</div>
</body>

navbar_right.php:
PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="shortcut icoN" href="../../images/andi_europe.ico">
<title>The Big Blue New</title>
<link href="../../css/default.css" rel="stylesheet" type="text/css"/>
</head>

<body>
<div id="navbar_right"> 
<p class="navbar_top"> duikshop </p>
<ul>
<li class="li_navbar"> winkel </li>
<li class="li_navbar"> nieuws </li>
</ul>

<p class="navbar_top">rebreather</p>
<ul>
<li class="li_navbar"> rEvo </li>
<li class="li_navbar"> opleidingen </li>
</ul>

<p class="navbar_top"> login </p>
<Form method="post" action="login.php">
<p class="li_navbar">username:<br> <input type="text" name="username" width="150px">
<br> password: <br><input type="password" name="password" width="75%"></p>
<input type="submit" value="login" width="25px">
<input name="reset" type="reset" id="reset" value="reset" width = "25px">

</Form>
</div>
</body>
</html>

main.php
PHP:
<?php
include 'header.php';
include 'navbar_right.php';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="shortcut icoN" href="../../images/andi_europe.ico">
<title>The Big Blue New</title>
<link href="../../css/default.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="main"> main div </div>
</body>
</html>
 
Laatst bewerkt:
Als je met include werkt moet je er wel voor zorgen dat de resultaatpagina nog steeds geldige (X)HTML is. Wat een include doet is de code uit een ander bestand invoegen op de plaats van het include-commando..

Als je dit doet met de files die jij hier opgeeft, sta je met enkele keren een doctype/html/body/heads in de gezamelijke resultaatpagina (kijk maar even naar de bron).
 
Als je met include werkt moet je er wel voor zorgen dat de resultaatpagina nog steeds geldige (X)HTML is. Wat een include doet is de code uit een ander bestand invoegen op de plaats van het include-commando..

Als je dit doet met de files die jij hier opgeeft, sta je met enkele keren een doctype/html/body/heads in de gezamelijke resultaatpagina (kijk maar even naar de bron).

OK thanks for the tip. Ik zal het later eens nakijken. Zou dit het probleem zijn denk je? Ik vind je opmerking terecht, maar vrees voor de oplossing van mijn probleem...:confused:
Toch een welgemeende dank u wel. :thumb:
 
Tja, ik wil niet ***lig doen en zo, maar als je denkt dat twee keer 'n doctype, twee keer 'n body, twee keer 'n head, enz. enz. geen gigantische problemen opleveren...
Ik weet niet of al je problemen zijn opgelost als je dat corrigeert, maar ik garandeer je wel problemen als je 't níét oplost.
 
Tja, ik wil niet ***lig doen en zo, maar als je denkt dat twee keer 'n doctype, twee keer 'n body, twee keer 'n head, enz. enz. geen gigantische problemen opleveren...
Ik weet niet of al je problemen zijn opgelost als je dat corrigeert, maar ik garandeer je wel problemen als je 't níét oplost.

Hey Goeroeboeroe. Overschot van gelijk heb je. En zal het ook aanpassen eens ik de include gebruik. Maar zelfs zonder loopt het fout... het moet dus iets zijn met mijn css... Maar wat... damned... ik geraak hier percies niet uit...
 
't Kan prima zijn dat 't iets met je css te maken heeft. Maar omdat die die dubbele body enz. hoe dan ook voor problemen zorgt, moet je eerst dat corrigeren.
Als je eerst die fout uit je css weghaalt (als dat al zou lukken), heb je 'n grote kans dat er weer fouten in komen als je pas daarna die dubbele body enz. weghaalt.
Overigens is dat vrij makkelijk. Op de plaats van die include, in de php-pagina die daar moet komen, moet je ALLEEN maar neerzetten wat precies op die plaats moet komen. Dus alsof je 'n stuk uit 'n bestaande pagina kopieert. Zonder head, zonder doctype, alleen maar wat op die plaats staat. Dus ook geen verwijzing naar 'n css-bestand, want dat staat al in de head van de uiteindelijke pagina.
 
't Kan prima zijn dat 't iets met je css te maken heeft. Maar omdat die die dubbele body enz. hoe dan ook voor problemen zorgt, moet je eerst dat corrigeren.
Als je eerst die fout uit je css weghaalt (als dat al zou lukken), heb je 'n grote kans dat er weer fouten in komen als je pas daarna die dubbele body enz. weghaalt.
Overigens is dat vrij makkelijk. Op de plaats van die include, in de php-pagina die daar moet komen, moet je ALLEEN maar neerzetten wat precies op die plaats moet komen. Dus alsof je 'n stuk uit 'n bestaande pagina kopieert. Zonder head, zonder doctype, alleen maar wat op die plaats staat. Dus ook geen verwijzing naar 'n css-bestand, want dat staat al in de head van de uiteindelijke pagina.

Hey Goeroeboeroe,
Dank je om zo aan te dringen... :thumb: Idd. Het probleem is voor IE opgelost. FF is nog ietsjes anders. Kleine nota mss: Ik had oorspronkelijk als syntax voor include:
PHP:
<?php
include 'header.php'
?>

En dat werkte niet.
Wat wel werkt is:
PHP:
<?php include ("header.php") ?>

Evengoed. Het probleem is althans van de baan (als is het alleen voor IE. Met wat meer tijd en geduld, pas ik dat ook wel aan voor FF). Hartelijk bedankt voor je hulp. Het heeft me héél veel geholpen, voor het examen van deze avond.
Mocht ik langs Amsterdam passeren, kunnen we er ene op drinken. Nen goeie Belgische trappist. groetjes
 
Ha, hé. ho, die ken ik, en dan nooit naar Amsterdam komen. Ik kom zaterdag wel even langs in Dendermonde :D
Mooi dat 't gelukt is. Overigens kun je beter 'n site maken in Firefox of Opera of Safari of Google Chrome, en daarna pas in Internet Explorer. Die eerste vier houden zich veel en veel beter aan de standaard.
Firefox is 't makkelijkste, want die heeft 'n hele batterij extensies die kunnen helpen bij 't maken van 'n site.
 
Ha, hé. ho, die ken ik, en dan nooit naar Amsterdam komen. Ik kom zaterdag wel even langs in Dendermonde :D
Mooi dat 't gelukt is. Overigens kun je beter 'n site maken in Firefox of Opera of Safari of Google Chrome, en daarna pas in Internet Explorer. Die eerste vier houden zich veel en veel beter aan de standaard.
Firefox is 't makkelijkste, want die heeft 'n hele batterij extensies die kunnen helpen bij 't maken van 'n site.

Hey Goeroeboeroe, normaal kom ik éénmaal per jaar richting Amsterdam. Ik bezoek graag Keukenhof in Lisse. Dus is het niet echt onwaarschijnlijk dat ik zou langs komen in Amsterdam. Evengoed, altijd welkom in Dendermonde
Hoe kan ik mijn FF problemen nu oplossen? Alles html elements afgaan in mijn css of ze wel compliant zijn met FF? of is er een andere snellere manier?
 
Zoals ik 't doe, en 't overgrote deel van de mensen die meer dan 'n enkele site voor zichzelf maken of zo:
Je maakt eerst 'n site die goed werkt in Firefox. Die werkt (net als Safari, Google Chrome en Opera) redelijk goed volgens de standaarden van w3c. Firefox is handig om dat je daar heel nuttige extensies voor hebt, zoals Firebug:
https://addons.mozilla.org/en-US/firefox/addon/1843

Html Validator:
https://addons.mozilla.org/en-US/firefox/addon/249

Web Developer:
https://addons.mozilla.org/en-US/firefox/addon/60

En nog vele honderden andere:
https://addons.mozilla.org/en-US/firefox/browse/type:1/cat:4

IE 8 is trouwens ook redelijk standaardgetrouw voor html en css, maar hun ingebouwde Developer Tools kunnen nog niet in de schaduw staan wat betreft mogelijkheden van de bovengenoemde extensies.
Als 't in Firefox werkt, werkt 't hoogstwaarschijnlijk ook in IE 8, Safari, Google Chrome en Opera. En met 'n beetje geluk ook in IE 7. IE 6, tja, of je dat nog moet ondersteunen... Persoonlijk zorg ik dat 't leesbaar is en zo in IE 6, en verder geloof ik 't tegenwoordig wel. (Steeds meer sitebouwers doen dat inmiddels.)
IE 7 en IE 6 kun je dan vervolgens temmen met conditional comments.

Als je in IE gaat ontwikkelen, wordt 't ook goed weergegeven (afhankelijk van je precieze code en zo) als 't niet volgens de standaard is. Ziet 't er dus fantastisch uit in IE, zie je bagger in andere browsers.
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan