Layout hulp nodig!

Status
Niet open voor verdere reacties.
sorry en misschien kom ik nu heel dom over maar ik snap nog steeds niet helemaal wat block doet:o
 
Schoolboy zei:
sorry en misschien kom ik nu heel dom over maar ik snap nog steeds niet helemaal wat block doet:o
Klik om te vergroten...

... je moet het gewoon even bekijken en uitproberen.

HTML: 
<a href='#'>de eerste</a>
			<a href='#'>de tweerste</a>
			<a href='#'>de deerste</a>
			<a href='#'>de veerste</a>
			<br />
			en nu met blok
			
			<a style='{display:block}' href='#'>de eerste</a>
			<a style='{display:block}' href='#'>de tweerste</a>
			<a style='{display:block}' href='#'>de deerste</a>
			<a style='{display:block}' href='#'>de veerste</a>
			en nu met blok en float
			
			<a style='{display:block;float:left}' href='#'>de eerste</a>
			<a style='{display:block;float:left}}' href='#'>de tweerste</a>
			<a style='{display:block;float:left}}' href='#'>de deerste</a>
			<a style='{display:block;float:left}}' href='#'>de veerste</a>
			<br />
			en nu met blok en float:right
			
			<a style='{display:block;float:right}' href='#'>de eerste</a>
			<a style='{display:block;float:right}}' href='#'>de tweerste</a>
			<a style='{display:block;float:right}}' href='#'>de deerste</a>
			<a style='{display:block;float:right}}' href='#'>de veerste</a>

als je deze code even laat werken dan zie je de verschillen
 
heb het gedaan maar ik zie echt geen verschil :o
ik heb aankomende dinsdag weer een les informatica ik vraag het dan sowieso even aan mij docent en zijn antwoord zal ik hier posten.

Maar we (eigenlijk ik) ben nou heel aan het vragen over dat block gedoe maar eigenlijk wil ik dus gewoon dat mijn pagina er dus ongeveer zo uit komt te zien:
14layoutbedoeling.jpg

Dus alleen dat scrollen en de footertekst is het probleem nog.
 
voor wat betreft section links: position: fixed verwijderen
voor wat betreft de footer: in ieder geval CSS toevoeging: white-space: nowrap.

Voor de zekerheid zet ik de * met nul-waarden altijd bovenin het CSS-bestand
De gevolgen kun je zien op helpmij.hvn.nu, daar probeer ik wat dingetjes uit
En daar zie je ook wat blockverschillen
 
Tips voor mooie cijfertjes

Hoi Schoolboy,
  • In html5 is een Doctype verplicht. Zie www.whatwg.org/specs/web-apps/current-work/multipage/syntax.html#the-doctype.
  • Gebruik geen overbodige selectors. Er hoort bv. maar één h1 per pagina te zijn, dus h1{...:...;} is voldoende. De id's zijn uniek per pagina, dus daar hoeft ook niets aan vooraf te gaan, enz.
  • Geen <br>'s alleen om afstanden te scheppen; hoort met css.
  • Verwijder alle tabellen die voor opmaak bedoeld zijn en geen tabellarische gegevens bevatten. Bv. opmaak van lists hoort met css.
  • Sla geen stappen in de headers h1, h2, h3 enz. over; gebruik geen lagere header alleen voor de opmaak (kleinere letters); daarvoor is (goed geraden!) css.
  • Gebruik géén spaties in mapnamen en bestandsnamen! Bij de links zou anders steeds %20 ipv een spatie gezet moeten worden (= prettig onleesbaar); zie bv URL-encoding. Gebruik - of _ om woorden te kunnen onderscheiden.
  • Probleemoplossing: werk problemen af in de volgorde: van-boven-naar-beneden. Bv. iets in de positie van een #header of #menu of #content kan de positie van een #footer beïnvloeden. Als je net met enige moeite de #footer in orde hebt, heb je kans dat als je een #header-probleem gaat oplossen, je alles voor de #footer nog eens dunnetjes over moet doen.
  • Voor verdere ontwerp- en troubleshoot-tips: bv. Golden Rules of CSS (en de Golden Links daarin).
Succes!
CSShunter
 
Laatst bewerkt:
Bedankt allemaal!!!

@csshunter: Bedankt voor de tips! Ga er gelijk mee aan de slag!
De leraar had verschillende opties en dit is uiteindelijk de pagina geworden:
62eindproduct.jpg


De csscode van mij ziet er nu als volgt uit:
Code: 
* {  margin:0;
    border:0;
    padding:0;
}
html {
	height: 100%
}
body{
	background-color: #FAFAD2;
	height: 100%
}
header {
	background-color: #6CA325;
	padding-bottom: 1%;
	padding-top: 3%;
	height: 6%
}
header p{
	margin-left: 150px;
	font-size: 20pt;
	font: bold;
	font-weight: bold;
}
section#links {
	float: left;
	background-color: #DAA520;
	padding-left: 5px;
	clear: both;
	height: 85%
}
section#rechts {
	padding-top: 2%;
	margin-left: 150px;
	display: block;
	height: 82%
}
ul {
	padding-left: 20px
}
a:link { 
	color: black;
}
a:visited { 
	color: black; 
}
a:hover { 
	color: blue; 
}
a:active { 
	color: black; 
}
footer {
	padding-left:150px;
	background-color:#DCDCDC; 
	display: block;
	height: 3%
}

mijn html-code ziet er zo uit:
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>
				<!--[if lt IE 9]>
				<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
				<![endif]-->
	</head>
		<body>
			<header><p>Welkom op de pagina over</p></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">
			<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>

De laatste dingetjes verbeter ik nog maar ik ben in ieder geval heel erg geholpen! Allen heel erg bedankt en ik hoop dat anderen ook wat aan dit topic hebben. Ik verbeter nog de laatste dingetjes en dan lever ik hem in.

MVG,
Schoolboy
 
@Naarling of iemand anders die dit weet: Naarling gaf mij een script <!--[if it IE8]enz. Weet iemand of dit script ook bestaat voor de rest van de browsers? Dat zou geweldig zijn want dan doet mijn site het overal! (niet dat deze online gaat maar dan hoeft de docent niet veel moeite te doen voor een andere browser)
 
Schoolboy zei:
@Naarling of iemand anders die dit weet: Naarling gaf mij een script <!--[if it IE8]enz. Weet iemand of dit script ook bestaat voor de rest van de browsers?
Klik om te vergroten...
Nee, die hebben het namelijk niet nodig :D
Ok, in theorie hebben oude versies van Opera/Firefox, etc. het nodig maar die worden bijna niet gebruikt.
 
Hi,
de anchors (<a>): die met color black zou je nog in 1 regel kunnen zetten.
suc6
logging off
 
@Naarling: Bedankt voor het snelle antwoord!
@city guy: Bedankt voor de tip!
 
de anchors (<a>): die met color black zou je nog in 1 regel kunnen zetten.
Klik om te vergroten...
Nou, dat is te zeggen. De link-styles moeten in een bepaalde volgorde opgeschreven worden, anders gaat de verkeerde de vorige overrulen.
De volgorde is (tip van Goeroeboeroe):

LoVe, (s)He FAked:
Link, Visited, Hover, Focus, Active​

Dit is een goede aanvulling op het vaak gebruikte "LoVe HAte" ezelsbruggetje, want de focus-eigenschap is erg belangrijk voor de toegankelijkheid van een site. Met deze eigenschap kan je namelijk regelen wat er gebeurt als iemand met de Tab-toets van link naar link hopst: dan wordt de link die "focus" heeft in het zonnetje gezet. Anders kan je niet op het scherm zien waar je zit (want er komt dan geen muisaanwijzer). Dit Tabben gebeurt door mensen die op een of andere manier geen muis kunnen gebruiken; die kunnen dan van het toetsenbord gebruik maken om te surfen (met de toets Enter klik je op de link die voor staat).

Met dit in het achterhoofd kan de css gecomprimeerd worden tot:
Code: 
a:link, 
a:visited { 
    color: black; 
    }
a:hover,
a:focus { 
    color: blue; 
    }
a:active { 
    color: black; 
    }
Met vriendelijke groet,
CSShunter
 
Wat ook wel handig is,
Maak een layout in paint?
natuurlijk is photoshop het beste maar met paint kan het ook.
als je een html site wilt maken.
wat ook te zien is, kun je die layout die je in paint gemaakt hebt, omzetten in een html code. op http://quackit.com/ kun je allerlijk html codes vinden die je in je layout plaatsen kan. daarvoor moet je wel het aantal pixels weten van hoe groot je layout is. dat staat allemaal in quackit.
en daar leggen ze je ook uit (in het engels) hoe je je eigen website kunt bouwen. zonder een provider en toch .nl site.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan