Layout hulp nodig!

Status
Niet open voor verdere reacties.
S

Schoolboy

Gebruiker
Lid geworden
23 nov 2010
Berichten
78
Hoi allemaal,

Ik moet voor school een eigen site maken voor informatica. Dit moet met html5 en css. Nou ben ik al een heel eind maar de layout wil niet lukken. Dit is hoe ik het er ongeveer uit wil hebben zien:
46layoutbedoeling.jpg


De css-codes die ik hiervoor gebruik zijn:
HTML: 
body{
	background-color: #FAFAD2;
}
header {
	background-color: #6CA325;
	width: 100%;
}
header h1{
	margin-left: 150px;
}
section#links {
	float: left;
	clear: both;
	background-color: #DAA520;
}
section#rechts {
	min-height:180px;
	margin-left: 150px;
	display: block;
}
footer {
	clear:both;
	width:100%-140px;
	margin-left:150px;
	padding-left:5px;
	background-color:#DCDCDC;
}

Kan iemand mij helpen en misschien zeggen welke html5 of css code ik moet gebruiken?

Alvast bedankt!
 
oh sorry dat het er zo uitziet:
82fout.jpg


en dat ik het eruit wil laten zien als dat ding hierboven
 
Ok duidelijk, maar wat lukt er niet? Als ik het snap kun je het volgende doen:

- Begin even helemaal opnieuw, en plaats een nieuwe div (header) en maak die width: 100%; en de hoogte
moet je zelf bepalen.
- Direct onder de header div plaats je nog een div en die maak je met de volgende code:
Code: 
#sidebar { height: nader te bepalen; float: left;
En zo ga je verder: download tevens dit programma voor het gemak.

Succes!
 
De html-code is:
HTML: 
<!Doctype html>
<html lang="nl">
	<head>
	<meta charset="utf-8">
		<link rel="stylesheet" type="text/css"
		href="site over mij.css">
			<title>Welkom</title>
	</head>
		<body>
			<header><h1>Welkom op de pagina over Mij!</h1></header>
			<section id="links">
				<table height=120>
				<tr><ul>
				<td width=120><li><a href="Hoofdpagina.html">Welkom</a></li>
				<li><a href="Feitjes.html">Feiten</a></li>
				<li><a href="Hobby.html">Hobby</a></li>
				<li><a href="Meer info.html">Meer over mij</a></li></td>
				</ul></tr>
				</table>
			</section>
			<section id="rechts">
			<br>
			<h3>Op deze site ga ik je wat meer over mijzelf vertellen.</h3>
			</section>
				<footer>
				Deze site is in opdracht gemaakt voor een cijfer voor informatica. Ik hoop dat ik hier een mooi cijfertje mee haal.
				</footer>
		</body>
</html>
 
Dat snap ik maar probeer toch eens de divs. Misschien is het probleem dan opgelost ..
 
Hi,
... als ik moet kiezen tussen een werkende onoverzichtelijke DIV en een overzichtelijke Section die niet werkt dan is mijn keus snel gemaakt. Maar ik denk dat het hier niet van toepassing is.

Neem als eerste CSS-regels op:
Code: 
* {  margin:   0;
       border:   0;
       padding:0;
}

Dan heb je de overall-uitlijning in ieder in eigen hand

Controleer eens of je CSS-bestand gevonden wordt

Terzijde: de waarde van de table-tag bij het menuutje is mij hier nog niet duidelijk evenals de BREAK voor de H3-tag.

Kijk ook of je met position: absolute de zaak in jouw layout kan dwingen.

Je DOCtype zit volgens mij toch ook niet lekker. Dat zou er bij HTML 5 toch anders uit moeten zien zodat de browser weet dat er HTML5 aangeboden wordt. (Maar daar valt over te discussieren)
AANPASSING: Het doctype blijkt dus correct te zijn
Vertel ondertussen ook even in het kort wat ze je op school hebben verteld over HTML en CSS
 
Laatst bewerkt:
Eerst even de table-uitleg, als ik die table daar plaats dan gaat het menu goed links staan en anders gaat deze half uit de linker section.
De break, die staat er gewoon omdat ik die titel een stukje naar beneden wilde hebben en dit was de makkelijkste oplossing.

Een vraagje aan jou:
Waarvoor is die border? Ik weet dat het bij tabellen om de dikte van de buitenrand gaat maar waarvoor dient het bij bijvoorbeeld de footer.

De bovenkant en de zijkant sluit dus nog net niet helemaal aan (zie plaatje hieronder) en de footer sluit niet bij geen een kant aan. Weet je hier misschien de juiste css-code voor? Met padding en margin wil het maar niet lukken.

In mijn lessen heb ik geleerd:
- De basis van een website maken
- De abbr functie
- De p functie
- Een lijstje te maken
- Header, section, footer.
- kleuren en lettertypen in css
- links maken en de kleuren daarvan enzo.
- tabellen
- een klein beetje padding en margin
- achtergrond kleur en andere kleuren instellen

Mijn site ziet er nu als volgt uit:
44fout.jpg


De html5-code is als volgt:
HTML: 
<!Doctype html>
<html lang="nl">
	<head>
	<meta charset="utf-8">
		<link rel="stylesheet" type="text/css"
		href="site over mij.css">
			<title>Welkom</title>
	</head>
		<body>
			<header><br><h1>Welkom op de pagina over</h1></header>
			<section id="links">
				<table height=120>
				<tr><ul>
				<td width=120><li><a href="Hoofdpagina.html">Welkom</a></li>
				<li><a href="Feitjes.html">Feiten</a></li>
				<li><a href="Hobby.html">Hobby</a></li>
				<li><a href="Meer info.html">Meer over mij</a></li></td>
				</ul></tr>
				</table>
			</section>
			<section id="rechts">
			<br>
			<h3>Op deze site ga ik je wat meer over mijzelf vertellen.</h3>
			</section>
				<br><br><br>
				<footer>
				Deze site is in opdracht gemaakt voor een cijfer voor informatica. Ik hoop dat ik hier een mooi cijfertje mee haal.
				</footer>
		</body>
</html>

En de CSScode ziet er zo uit:
HTML: 
body{
	background-color: #FAFAD2;
}
header {
	background-color: #6CA325;
	width: 100%;
	padding-bottom: 1%
}
header h1{
	margin-left: 150px;
	margin-top: 0px;
}
section#links {
	float: left;
	clear: both;
	background-color: #DAA520;
	position: fixed;
	padding-left: 5px;
	padding-bottom: 100%;
}
section#rechts {
	min-height:180px;
	margin-left: 150px;
	display: block;
	margin-bottom: 30%
}
a:link { 
	color: black;
}
a:visited { 
	color: black; 
}
a:hover { 
	color: blue; 
}
a:active { 
	color: black; 
}

footer {
	clear:both;
	width:100%-140px;
	margin-left:150px;
	padding-left:5px;
	background-color:#DCDCDC; 
}
 
Hi,

Even kort: heb nu weinig tijd meer. Allereerst het slechte nieuws: lang niet alle browsers ondersteunen HTML5 al goed. Mijn Firefox voor ongeveer 50% , IE8 zie ik op ongeveer 10% uitkomen.
Ik wil je eerst aanraden om de section te vervangen door de DIV. We willen eerst resultaat zien en als we een goede pagina hebben kun je omzetten naar schone HTML5

Dan de border. Bij de TABLE heeft die betrekking op het lijntje om tabel of cel.

Vanuit CSS geeft die de ruimte aan om het element.
Het gebruik van de * met de nul-definities zet je alles op 0 (dat is niet default) en kun je waarnodig dat later iets ophogen. Sleutelwoord CSS en het BOX-model

Moet nu gaan.... sorry. l8er
 
oke je hebt me heel erg geholpen
ik wist inderdaad dat html5 door weinig browsers goed ondersteunt word

Wij moeten van onze docent met google chrome werken (dus de plaatjes zijn ook van google chrome).

Ik dacht dat ik voor dat sterretje nog iets in moest vullen ofzo maar blijkbaar dus niet.

~edit~

Heb je css met * erin geplakt en het werkt!!! Ik moet alleen nog de volgende 2 dingetjes weten:
1. De footer moet nog 1 grijze balk worden (net als bovenaan alleen dan kleiner en tot de oranje balk)
2. Als ik nu scroll dan blijft mijn menu staan (vind ik opzich niet erg) Maar de groene balk gaat wel weg waardoor er linksboven dan een gat ontstaat. Snappen je wat ik bedoel of moet ik er nog ff een plaatje bij plakken?
 
Laatst bewerkt:
city guy zei:
Hi,

Even kort: heb nu weinig tijd meer. Allereerst het slechte nieuws: lang niet alle browsers ondersteunen HTML5 al goed. Mijn Firefox voor ongeveer 50% , IE8 zie ik op ongeveer 10% uitkomen.
Klik om te vergroten...
Het is inderdaad waar dat HTML5 nog nergens volledig ondersteund wordt, kan ook niet want het is een evoluerende standaard. Maar dat betekend niet dat je het niet kunt gebruiken. Wat je wel even moet doen is in de <head> van je site het volgende zetten.
HTML: 
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Als dan iemand met IE8 of lager op de site komt wordt er een stukje javascript van de google servers geplukt waardoor IE de HTML5 elementen gaat herkennen. Vervolgens stop je dit in je CSS.
Code: 
article, aside, details, figcaption, figure, footer,header, hgroup, menu, nav, section { display: block; }
Dat zorgt ervoor dat de nieuwe elementen als blokken worden weergegeven (zoals ook al met divs en veel andere HTML4 elementen gebeurt).
 
@Naarling bedankt voor die code van IE9, deze werkt top
Over die 2e code waarvoor is display: block nou precies want ik zie niet echt een verschil of hoeft dat ook niet?

@city guy de plaatjes:
Dit is als ik hem gewoon minimaliseer of open heb staan:
40klein.jpg


Dit gebeurt er als ik dan ga scrollen (dat scrollen moet ik doen als ik de footer wil zien die nog steeds niet echt als goed blokje is weergeven wat ik graag wil):
53kleinscroll.jpg


Dus allebei sowieso al heel erg bedankt voor de hulp maar ik wil de footer dus als een balkje zoals in mijn (geweldige :P) tekeningetje hierboven. Dan is mijn vraag opgelost.
 
Heb nog wat gezocht op google en vond dit

Dus toen heb ik mijn css-code veranderd in:
Code: 
body{
	background-color: #FAFAD2;
}
header {
	background-color: #6CA325;
	width: 100%;
	padding-bottom: 1%;
	clear: both;
	float: top;
	
}
header h1{
	margin-left: 150px;
	margin-top: 0px;
}
section#links {
	float: left;
	clear: both;
	background-color: #DAA520;
	position: fixed;
	padding-left: 5px;
	padding-bottom: 100%;
}
section#rechts {
	min-height:180px;
	margin-left: 150px;
	display: block;
	margin-bottom: 30%
}
a:link { 
	color: black;
}
a:visited { 
	color: black; 
}
a:hover { 
	color: blue; 
}
a:active { 
	color: black; 
}
footer {
	clear:both;
	width:100%-140px;
	margin-left:150px;
	padding-left:5px;
	background-color:#DCDCDC; 
	bottom: 0;
	position: absolute;
    margin-right: auto
}
* {  margin:0;
    border:0;
    padding:0;
}
article, aside, details, figcaption, figure, footer,header, hgroup, menu, nav, section { 
	display: block; 
}

Nogmaals mijn HTML code:
HTML: 
<html lang="nl">
	<head>
	<meta charset="utf-8">
		<link rel="stylesheet" type="text/css"
		href="site over mij.css">
			<title>Welkom</title>
				<!--[if lt IE 9]>
				<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
				<![endif]-->
	</head>
		<body>
			<header><br><h1>Welkom op de pagina over Mij!</h1></header>
			<section id="links">
				<table height=120>
				<tr><ul>
				<td width=120><li><a href="Hoofdpagina.html">Welkom</a></li>
				<li><a href="Feitjes.html">Feiten</a></li>
				<li><a href="Hobby.html">Hobby</a></li>
				<li><a href="Meer info.html">Foto's</a></li></td>
				</ul></tr>
				</table>
			</section>
			<section id="rechts">
			<br>
			<h3>Op deze site ga ik je wat meer over mijzelf vertellen.</h3>
			</section>
				<br><br><br>
				<footer>
				Deze site is in opdracht gemaakt voor een cijfer voor informatica. Ik hoop dat ik hier een mooi cijfertje mee haal.
				</footer>
		</body>
</html>

De footer staat nu dus mooi onderaan maar als mijn scherm kleiner maak, moet ik scrollen en dan gaat alles dus fout. Weten jullie hier misschien wat voor?
 
voor mij is de footer toch ook een probleem. Het verschuif probleem van de header doet zich niet in IE8 voor (of het niet verschuiven van het menu)

maar er is wel iets anders wat je zou moeten doen. HTML en CSS (content en styling) proberen we zoveel mogelijk gescheiden te houden.
In dat verband passen de <BR> niet en zou je dat met padding of margin moeten oplossen (je wilde toch een mooi cijfer?)

Ik spreek even voor m'n beurt nu: display: block;
in HTML heb je INLINE-elementen (zoals gewone tekst, links, SPAN). Deze nemen niet meer schermruimte als nodig. Ook heb je block-elementen die nemen standaard de hele schermbreedt met een break voor en na. Door het block attribuut aan een inline-element toe te kennen kun je de manier van weergeven beinvloeden. Het leuke van een block-element is dat je er het css float-attribuut aan kunt toekennen om zo bijv. IMG's naast elkaar te zetten
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan