menu'tje verspringt

Status
Niet open voor verdere reacties.
T

the goose

Gebruiker
Lid geworden
15 feb 2007
Berichten
86
Hey,

ik ben bezig met het maken van een website voor mijn studentenclub. Nu heb ik gewerkt aan de pagina "foto's", maar zoals je ziet, verspringt "Archief" op deze pagina een beetje naar onder vergeleken met bv. "Archief" op de pagina praesidium. Hoe komt dit?

fotos.php:
PHP: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
		<title></title>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<link href="../default.css" rel="stylesheet" type="text/css" />
		<meta name="keywords" content="Verzameling" />
		<meta name="description" content="Verzameling" />
		<link rel="shortcut icon" href="favicon.ico" />
		<!-- Start VisualLightBox.com HEAD section -->
				<link rel="stylesheet" href="engine/css/lightbox.css" type="text/css" media="screen" />
		<script src="engine/js/prototype.js" type="text/javascript"></script>
		<script src="engine/js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
		<script src="engine/js/lightbox.js" type="text/javascript"></script>

		<style>
			.gallery {
				zoom:1;
				width:auto;				
			}
			.gallery a {
				display:block;
				float:left;
				margin:5px;
				opacity:0.87;
				text-align:center;
			}
			.gallery a:hover {
				opacity:1;
			}
			.gallery a img {
				border:none;
				display:block;
			}
			.gallery a#vlightbox{display:none}
		</style>
		<!-- End VisualLightBox.com HEAD section -->
</head>

<body>
<div id="menu">
	<?php include("../navigatie.php"); ?>
</div>
<!-- end #menu -->

<div id="header">
	<h1></h1>
	<h2></h2>
</div>

<!-- end #header -->

<div id="wrapper">
	<div id="content">
		<div id="posts">
			<div class="post">
				<h2 class="title">Verzameling</h2>
				<div class="story">
	<!-- Start VisualLightBox.com BODY section -->	
	<div class="gallery">
		<a href="./data/images/5015_92887854735_623304735_1788809_4041530_n1.jpg" rel="lightbox[sample]" title="5015_92887854735_623304735_1788809_4041530_n[1]"><img src="./data/thumbnails/5015_92887854735_623304735_1788809_4041530_n1.png" /></a>
	<a href="./data/images/5023_222057390382_513600382_7466002_1302900_n1.jpg" rel="lightbox[sample]" title="5023_222057390382_513600382_7466002_1302900_n[1]"><img src="./data/thumbnails/5023_222057390382_513600382_7466002_1302900_n1.png" /></a>
	<a href="./data/images/5023_222057490382_513600382_7466020_4583093_n1.jpg" rel="lightbox[sample]" title="5023_222057490382_513600382_7466020_4583093_n[1]"><img src="./data/thumbnails/5023_222057490382_513600382_7466020_4583093_n1.png" /></a>
	<a href="./data/images/5023_222057670382_513600382_7466053_2981953_n1.jpg" rel="lightbox[sample]" title="5023_222057670382_513600382_7466053_2981953_n[1]"><img src="./data/thumbnails/5023_222057670382_513600382_7466053_2981953_n1.png" /></a>
	<a href="./data/images/5023_222057680382_513600382_7466055_5503621_n1.jpg" rel="lightbox[sample]" title="5023_222057680382_513600382_7466055_5503621_n[1]"><img src="./data/thumbnails/5023_222057680382_513600382_7466055_5503621_n1.png" /></a>
	<a href="./data/images/5023_222057945382_513600382_7466097_7068524_n1.jpg" rel="lightbox[sample]" title="5023_222057945382_513600382_7466097_7068524_n[1]"><img src="./data/thumbnails/5023_222057945382_513600382_7466097_7068524_n1.png" /></a>

	<!--[if lte IE 6]><script src="engine/js/pngfix_vlb.js" type="text/javascript"></script><![endif]-->
	<a id="vlightbox" href="http://visuallightbox.com/">Web Page Photo Gallery by VisualLightbox.com</a>
	</div>
	<!-- End VisualLightBox.com BODY section -->
				</div>

			</div>

		</div>
		<!-- end #posts -->
		<div id="links">
			<?php include("../archief_fotos.php"); ?>
		</div>
		<!-- end #links -->
		<div style="clear: both;">&nbsp;</div>
	</div>
</div>
<!-- end #content -->
<div id="footer">
	<?php include("../footer.php"); ?>
</div>
<!-- end #footer -->
</body>
</html>

De css zal ik ook maar geven, hoewel ik hier niets veranderd heb bij het werken aan de pagina van foto's.

Code: 
body {
	margin: 0;
	padding: 0;
	background: #749865 url(images/img01.gif) repeat-x;
	font: normal small Arial, Helvetica, sans-serif;
	line-height: 1.8em;
	color: #404040;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: normal;
	color: #468259;
}

h2 {
	padding-left: 20px;
	padding-bottom: 2px;
	background: url(images/img07.gif) no-repeat left center;
	font-size: 22px;
}

h3 {
	margin-bottom: 1em;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: .9em;
	font-weight: bold;
}

p, blockquote, ul, ol {
	margin-top: 0;
}

blockquote {
	padding: 0 0 0 40px;
	background: url(images/img11.gif) no-repeat;
	font: italic small Georgia, "Times New Roman", Times, serif;
	line-height: 1.6em;
}

a {
	background: url(images/img03.gif) repeat-x left bottom;
	text-decoration: none;
	color: #468259;
}

a:hover {
	background: none;
	text-decoration: underline;
}

/* Wrapper */

#wrapper {
	background: #FFFFFF url(images/img04.gif) repeat-x left bottom;
}

/* Menu */

#menu {
	width: 990px;
	height: 60px;
	margin: 0 auto;
}

#menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#menu li {
	display: block;
	float: left;
	width: 105px;
	height: 60px;
	padding: 0 0 0 2px;
	background: url(images/img02.gif) no-repeat;
}

#menu a {
	display: block;
	width: 65;
	height: 36px;
	text-align: center;
	padding-top: 19px;
	background: none;
	letter-spacing: -1px;
	font: normal 1.15em Georgia, "Times New Roman", Times, serif;
	color: #E1E9E2;
}

#menu a:hover {
	border-bottom: 4px solid #5A7C50;
	text-decoration: none;
	color: #FFFFFF;
}

#menu .active a {
	background: #E1E9E2;
	border-bottom: 4px solid #E1E9E2;
	text-decoration: none;
	color: #749865;
}

/* Header */

#header {
	width: 754px;
	height: 247px;
	margin: 0 auto;
	padding: 13px 0 0 0;
}

#header h1 {
	float: left;
	width: 104px;
	height: 110px;
	padding: 104px 100px 0 20px;
	background: url(images/img05.jpg) no-repeat;
	line-height: 32px;
	font-size: 30px;
}

#header h2 {
	float: right;
	width: 494px;
	height: 34px;
	padding: 180px 20px 0 0;
	background: url(images/img06.jpg) no-repeat;
	text-transform: lowercase;
	text-align: right;
	letter-spacing: -1px;
	font-size: 22px;
	color: #FFFFFF;
}

/* Content */

#content {
	width: 750px;
	margin: 0 auto;
}

/* Posts */

#posts {
	float: right;
	width: 510px;
}

#posts .post {
	padding-bottom: 30px;
}

#posts .story {
	padding: 15px 20px 0 20px;
	background: url(images/img10.gif) repeat-x
}

#posts .meta {
	padding: 5px 0 0 20px;
	background: url(images/img03.gif) repeat-x;
}

#posts .meta p {
	margin: 0;
	line-height: normal;
	font-size: smaller;
}

#posts ul {
	list-style: url(images/img12.gif);
}

#posts ul li {
}

/* Links */

#links {
	float: left;
	width: 220px;
}

#links ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#links li ul {
	padding: 15px 20px 30px 20px;
	background: url(images/img10.gif) repeat-x
}

#links li li {
	padding: 3px 0;
	background: url(images/img03.gif) repeat-x left bottom;
}

#links li a {
	background: none;
}

#links li i {
	font-size: smaller;
}

/* Activity */

#activities {
	float: left;
	width: 750px;
}

#activities .post {
	padding-bottom: 30px;
	border: 0px;
}

#activities .story {
	padding: 15px 20px 0 20px;
	background: url(images/img10.gif) repeat-x;
}

#activities .meta {
	padding: 5px 0 0 20px;
	background: url(images/img03.gif) repeat-x;
}

#activities .meta p {
	margin: 0;
	line-height: normal;
	font-size: smaller;
}

#activities ul {
	list-style: url(images/img12.gif);
}

#activities ul li {
}


/* Footer */

#footer {
	padding: 40px 0 60px 0;
	background: url(images/img08.gif) repeat-x;
}

#footer p {
	width: 750px;
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #A6C09B;
}

#footer a {
	background: none;
	font-weight: bold;
	color: #A6C09B;
}

#legal {
	margin: 0 auto;
	text-align: right;
	font-size: 12px;
}

#brand {
	margin: -35px auto 0 auto;
	padding: 10px 0 0 35px;
	letter-spacing: -1px;
	font-size: 12px;
}

/* Table */

td.helpHed { 
	border-bottom: 2px solid #739366;
	border-left: 0px;
	background: transparant;
	text-align: left;
	text-indent: 5px;
	font-family: Georgia, Times New Roman, Times, serif
	font-weight: bold;
	font-size: 11px;
	color: #404040;
}

table.sofT { 
	text-align: left;
	font-family: Georgia, Times New Roman, Times, serif
	font-weight: normal;
	font-size: 11px;
	color: #404040;
	width: 710px;
	background: transparant;
	border: 0px;
	border-collapse: collapse;
	border-spacing: 0px;
}

table.sofT td {
	padding-bottom: 11px;
	vertical-align: top;
}

table.nieuwsbrief td {
	padding-bottom: 11px;
}

Alvast bedankt!

Gr,
The goose
 
Laatst bewerkt:
Hallo,
Ik denk dat ik 't probleem heb gevonden, maar dat is iets anders dan dat ik de oplossing heb.
In je pagina fotos.php zit 'n vreemde code. Als ik die weghaal, dan komt je Archief 'n regel hoger te staan. Kennelijk heeft die onzichtbare code de uitwerking van 'n nieuwe regel, in ieder geval in Firefox en Internet Explorer 6, in Opera niet.
Op die pagina fotos.php staat het volgende:
<div id="links">
Daar gelijk onder staat een regel die begint met drie spaties. Dan volgt dat onzichtbare teken, waarvan ik ook niet de code kan achterhalen. Dan volgen nog twee spaties en <ul>
Dus die regel is:
spatie-spatie-spatie-???-spatie-spatie<ul>
Dit is dus kennelijk iets dat je editor toevoegt. Als je dat onzichtbare teken weghaalt dat op de plaats van de vraagtekens staat, verdwijnt de nieuwe regel.
Als ik je site door de validator haal, krijg ik een waarschuwing dat er 'n Byte-Order Mark wordt toegevoegd. Ik weet dat dat in Internet Explorer 7 kan zorgen voor vreemde nieuwe regels. Maar voorzover ik weet alleen in IE 7. Als je dat ergens in je editor kan uitschakelen, moet je dat doen. Het is 'n overbodige toevoeging die in oudere browsers voor problemen kan zorgen.

Als je je bestanden opslaat, moet je dat doen als utf-8. Dat kun je ergens instellen in je editor, meestal ergens in de voorkeuren. Ik neem aan dat je dat al doet, maar voor de zekerheid.
Als je dat teken verwijdert, zou het in principe opgelost moeten zijn. Als het blijft terugkomen, dan zou ik eigenlijk geen oplossing weten, behalve 'n andere editor.
 
Laatst bewerkt:
Hmm er staat inderdaad een raar tekentje daar. Ik weet alleen niet goed hoe ik dat moet verwijderen. Alle bestanden zijn opgeslagen als utf-8.

Ik werk voor dit menu met een include functie.

In fotos.php:

PHP: 
		<div id="links">
			<?php include("../archief_fotos.php"); ?>
		</div>

archief_fotos.php ziet er zo uit:
PHP: 
			<ul>
				<li>
					<h2>Archief</h2>
					<ul>
						<li><a href="fotos.php">Verzameling</a></li>
						<li><a href="verzameling_2.php">Kopie van verzameling</a></li>
					</ul>
				</li>
			</ul>

Maar ik snap niet goed wat hier fout aan is...

Alvast bedankt voor je hulp!

Gr,
the goose
 
O, dat is mooi, jij ziet 't dus. Ik heb me wezenloos gezocht omdat 't bij mij onzichtbaar is.
Ik heb gewoon die hele regel met <ul> verwijderd en er opnieuw ingezet. Daarmee was dat tekentje weg. Ik neem aan dat het in je php-bestand zit, dus dan zou je dat ook gewoon zo moeten kunnen bewerken.

Edit: ik keek even niet helemaal goed.
Als dat je hele archief_fotos.php is, dan zou ik 't gewoon even helemaal vernieuwen. Dan weet je zeker dat je dat vreemde ding kwijt bent. Zullen we alleen nooit weten wat 't was, helaas...
 
Laatst bewerkt:
Heel vreemd, maar nu werkt het dus, alhoewel de code exact hetzelfde is gebleven en ik de regels gewoon opnieuw heb getypt. Bedankt voor je antwoord! :D
 
Ik heb ooit 'n editor gehad die te pas en te onpas onzichtbare codes invoegde. Hopeloos. Ik neem aan dat jouw editor gewoon 'n keertje de hik heeft gehad. Dat is mijn van diep technisch inzicht getuigende omschrijving van 'n onverklaarbaar iets.
Die editor heeft één nut gehad: als iets absoluut onverklarbaar is, heb ik geleerd de hele regel weg te halen en opnieuw te typen.
Hier had ik op 'n gegeven moment zoveel code weggehaald, dat de code voor de twee pagina's exact hetzelfde was. Alleen zagen ze er niet hetzelfde uit. Oftewel: hoe 'n waardeloze editor je toch nog iets kan leren :)
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan