Archief - PREVIEW: merchtemwandelt

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
b

brecko

Legacy Member
Hello,

een opdracht voor school ivm een activiteit in je gemeente.
Moet in drie browsers goed worden weergegeven.
In ie werkt ze deftig maar in ff loopt er iets mis en kan niet vinden wat...

in de site zullen wss nog fouten zitten (mss onlogische structuren of whatever)
maar daarom zet ik ze hier nu juist. Wees ni te hard tis maar mijn eerste site :)

http://users.telenet.be/jacked/Website

heb ze al eens laten valideren door w3validator, en die geeft mij twee fouten, die ik niet terug kan vinden...

Cheers
D

DevStyle

Legacy Member
Ziet er vrij ordelijk uit, maar er zijn in firefox toch 2 opvallende fouten:
- In de navigatie loopt Contact gewoon door de andere knoppen
- Je content-kader steekt vanonder uit (tenzij dit de bedoeling was?)
X

Xavez

Legacy Member
ff debuggen: in HTML 4.01 (wat gij hebt gedeclareerd in uw document bovenaan)
HTML: 
<meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1'>
<title>merchtemWANDELT</title>
<link href="style.css" rel="stylesheet" type="text/css"/>
wordt
HTML: 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>merchtemWANDELT</title>
<link href="style.css" rel="stylesheet" type="text/css">

in xhtml wordt dat

HTML: 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>merchtemWANDELT</title>
<link href="style.css" rel="stylesheet" type="text/css" />

Je kan trouwens beter meteen je hele document in xhtml omzetten, want zo goed als alle tags stemmen daar al mee overeen... dingen als <br/> moeten wel nog <br /> worden (met een spatie dus)
o

orez

Legacy Member
Xavez voor xhtml, niet vergeten de html tag aan te passen ook.

HTML: 
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>merchtemWANDELT</title>
</head>
b

brecko

Legacy Member
okay das allemaal gebeurd (dacht ik), maar nu klopt de kleur van mijn links ni meer :s

in css nagekeken en vind de fout niet.
weet er iemand ook hoe dat het komt (zoals devstyle vermeldde) dat mijn menu niet goed staat?

kritiek op site zelf (layout ed) mag ook he :)

cheers

edit: als ik hem eens laat valideren zegt hij iets over die fout van xmlnx in head?
de rest van die fouten vind ik ook ni echt terug

edit2: http://validator.w3.org/check?uri=h...et=(detect+automatically)&doctype=Inline&ss=1
R

Radiance

Legacy Member
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Waar is uw XHTML doctype naartoe? Niet moeilijk dat je allerei fouten krijgt.
b

brecko

Legacy Member
done.

plaatsing van navagatiebalk is nog steeds niet in orde. in ff wel te verstaan. in ie lukt het wel...

hier de css:

body {
background-image: url("afbeeldingen/back.gif");
background-attachment: fixed;
font-family: "Helvetica";
font-size: 12px;
text-align: center;
margin-top: 30px;
}

div#laag {
position:absolute;
left: 50%;
top: 50%;
width: 660px;
height: 520px;
margin-top: -260px;
margin-left: -330px;
border: #ffffff 1px solid;
background-color: white;
}

div#inhoud
{
width: 660px;
height: 520px;
}

ul#navlist {
margin-left: 0;
margin-right: 0;
margin-top: 3px;
white-space: no-wrap;
}

#navlist li {
display: inline;
list-style-type: none;
}

#navlist a {
padding: 6px 35px;
text-decoration: none;
}


a:link {
color: grey;
text-decoration: none;
background-color: #4f4e3d;
}

a:visited{
color: #818143;
text-decoration: none;
background-color: #ebe9ea;
}

a:hover {
color: #ebe9ea;
text-decoration: none;
background-color: #aa9e51;
}

a:active {
color: white;
text-decoration: none;
background-color: #aa9e51;
}


hr {
width: 550px;
border: none 0;
border-top: 1px dashed;
color: #aa9e51;
height: 1px;
}
b

b0bbY

Legacy Member
enkele puntjes die me meteen opvielen:
-header is té nadrukkelijk aanwezig in vergelijking met de inhoud
-content laag past niet mooi binnen het kader van de site
-menu is niet logisch opgebouwd. geef je links in de navigatie bij voorkeur een class zodat je ze een aparte stijl kan meegeven.

code kan ook beter:

-iframe is nergens voor nodig (is denk ik ook de reden dat de inhoud buiten het kader valt)
-centreren kan ook zonder absolute positionering te gebruiken

ontwerp heeft zeker potentieel, maar kan zeker nog wat verbeterd worden.
b

brecko

Legacy Member
bedankt voor de commentaar.

-ja ik begrijp wat je bedoelt met de header en soms denk ik het ook, maar ik heb toch beslist het zo te laten.

-die content moet inderdaad nog aangepast worden, al vind ik de fout niet in mijn code. in ie ist perfect, in ff te veel naar onder.

-wat bedoel je met niet logisch opgebouwd? waarom moeten ze een apparte stijl hebben?

-iframe, wat zou jij dan gebruiken?

-centreren zonder absloute positionering, hoe?

Merci alvast
X

Xavez

Legacy Member
zonder absolute positionering: alles in een container-div steken en dan voor de css margin: bovenmarge auto ondermarge auto; (ofwel gewoon margin: auto; als je geen boven- en ondermarge wil definiëren). Wel ook een breedte van uw containerdiv definiëren :).
b

brecko

Legacy Member
Xavez zei:
zonder absolute positionering: alles in een container-div steken en dan voor de css margin: bovenmarge auto ondermarge auto; (ofwel gewoon margin: auto; als je geen boven- en ondermarge wil definiëren). Wel ook een breedte van uw containerdiv definiëren :).
Klik om te vergroten...

gaat dat het probleem van de navigatiebalk oplossen?
tis namelijk zo da we da stuk code van onze leerkrecht gekregen hebben, om iets mooi gecentered te krijgen...

SveltestSword zei:
een div met overflow: scroll (of gewoon de bg laten stretchen), en dan een php include.
Klik om te vergroten...

php ken ik niet en denk ook niet dat we dat mogen gebruiken...
X

Xavez

Legacy Member
Njah, voor vertikaal te centreren moetge inderdaad wel absolute positionering gebruiken...
b

brecko

Legacy Member
en een oplossing voor het navigatie probleem in firefox?
please vrienden, het gaat hier om een jaartje Grafische en Digitale Media...
:)
X

Xavez

Legacy Member
HTML: 
<body>
<div id="laag">
	<div id="inhoud">
		<img src="afbeeldingen/Banner.jpg" alt="banner" />
			<ul id="navlist">
			   <li><a href="home.html" target="inhoud1">Home</a></li>
			   <li><a href="wandelroutes.html" target="inhoud1">Wandelroutes</a></li>
			   <li><a href="fotos.html" target="inhoud1">Foto's</a></li>
			   <li><a href="links.html" target="inhoud1">Links</a></li>
			   <li><a href="contact.html" target="inhoud1">Contact</a></li>
			</ul>
		<iframe id="inhoud1" name="inhoud1" width="640" height="230" src="home.html" frameborder="0"></iframe>
	</div>
</div>
</body>

CSS:
Code: 
body {background: url('afbeeldingen/back.gif') fixed;
	font-family: 'Helvetica', serif;
	font-size: 12px;	
	text-align: center; 
	margin: 0;
}

#laag {position:absolute;
    left: 50%; 
   	top: 50%;
   	width: 660px;
   	height: 520px;
   	margin-top: -260px; 
   	margin-left: -330px; 
	border: #ffffff 1px solid; 
	padding: 10px 0 10px 0;
	background: #fff; 
}

#inhoud {width: 660px; height: 520px;}

#navlist {margin: 0;
	list-style: none;
	padding: 0;
	margin: 12px 0;
}
	
#navlist li {display: inline;	margin: 0 3px 0 3px;}
	
#navlist a {padding: 6px 35px; text-decoration: none;}
	

a {text-decoration: none;}	

a:link {color: #aaa; background-color: #4f4e3d;}
	
a:visited {color: #818143; background-color: #ebe9ea;}

a:hover {color: #ebe9ea; background-color: #aa9e51;}
	
a:active {color: white; background-color: #aa9e51;}


hr {width: 550px;
	border: none 0;
	border-top: 1px dashed;
	color: #aa9e51;
	height: 1px;
}

I know, I know, ik ben te goed voor deze wereld... (heb wel niet álles semantisch enzo aangepast... Enkel zodanig dat het *werkt*)
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan