Page 1 of 1
[HTML-CSS]Basic lay-out vraagje
Posted: Sat Jul 18, 2009 3:28 pm
by Fristi
Loha
Ben voor een 2de zit project dus een website aant maken, maar gezien ik hier amper ervaring me heb ben ik dit heel stapsgewijs aant doen.
De bedoeling is om hem zowel deftig weer te laten geven in IE als in FF.
Nu zit ik bij het begin al met een probleem.
hierkan je het begin vinden.
Als je dit in FF bekijkt dan zie je normaal een gecentreerde lay-out met een rood, blauw en oranje blok die mooi op elkaar aansluiten.
Bekijk ik dit in IE (versie 6 e.v.) dan plakt dit in men linkerbovenhoek, verdwijnt een stuk van het rode deel (omdat ik een -margin in men css heb gezet, doe ik dit niet, dan krijg ik in FF whitespace boven het rode deel), zijn er nog grijze stukjes tussen de drie vlakken, ...
hier vind je men code:
Code: Select all
body{
font-size:100%;
margin:0px;
padding:0px
}
div.container{
width:75%;
margin-left:auto;
margin-right:auto;
background-color:gray
}
div.header{
margin-top:-16px;
height:100px;
background-color:red
}
div.contents{
margin-top:-16px;
background-color:blue
}
div.footer{
margin-top:-16px;
height:50px;
background-color:orange
}
td.right {
text-align:right
}
en
Code: Select all
<html>
<head>
<link rel="stylesheet" type="text/css" href="frontpage.css" />
<title>startpage test</title>
</head>
<body>
<div class="container">
<div class="header">
<p>This is supposed to be a header</p>
</div>
<div class="contents">
<p>This is a test</p>
<form name="registerInput">
<table>
<tr>
<td class="right"><p>First Name: </p></td>
<td><input type="text"></td>
</tr>
<tr>
<td class="right"><p>Last Name: </p></td>
<td><input type="text"></td>
</tr>
<tr>
<td class="right">Password: </td>
<td><input type="password"></td>
<td><p style="font-size:0.625em">(8 to 16 alphanumerical characters)</p></td>
</tr>
</table>
</form>
</div>
<div class="footer">
<p>This is supposed to be a footer</p>
</div>
</div>
</body>
</html>
Iemand enig idee hoe dit op te lossen? (met validatable css/html code liefst
)
Posted: Sat Jul 18, 2009 3:35 pm
by Fristi
Heb al een stuk opgelost.
Door
toe te voegen kan ik men -margin's wegdoen en er toch voor zorgen dat er geen whitespace is in FF en dat die ook deftig getoond wordt in IE.
Wel een nieuw probleem, tussen mijn contents div en men footer div is nu een stuk grijs...Ik kan hier natuurlijk gewoon de -margin laten staan, of is er gewoon een automatische margin van een ander element dat hier voor zorgt?
Blijft er ook nog het probleem van niet centreren in IE -.-"
Posted: Sat Jul 18, 2009 3:40 pm
by Fristi
oke, weer een stapke verder, heb de grijze ruimte tussen oranje ne blauwe deel ook kunnen wegkrijgen door:
toe te voegen
Posted: Sat Jul 18, 2009 3:44 pm
by Fristi
K, heb net men eigen probleem opgelost, blijkbaar was een doctype toevoegen genoeg om het op te lossen.
(Ik weet dat da er normaal altijd bijmoet, was ook van zin dat er bij te zetten, maar blijkbaar is het dus de bedoelign dat ge het er onmiddelijk bijzet -.-")
Posted: Sat Jul 18, 2009 6:23 pm
by Robbe
Dit soort problemen heb ik al eens tegen gekomen op
Gigadesign, misschien eens de moeite van in die archieven te duiken als ge nog zo eens iets tegenkomt
Posted: Sat Jul 18, 2009 6:48 pm
by Fristi
Ik ga gegarandeerd nog zon dingen tegenkomen gezien mijn gebrek aan ervarign met css e.d. (en gezien het de non-compliance van IE >.<)
Posted: Sat Jul 18, 2009 10:59 pm
by Pieter Belmans
Of ge leert eerst wat semantiek is! En labels! En be hip, gebruik html5! En schrijf geen foute xhtml en geef het dan een html4 transitional (*shivers*) doctype!
En lucky bastards in tweede zit, nu is het terug webbased
. Ze beseften misschien dat het project in 1e zit totally useless was op databasevlak...
Posted: Sun Jul 19, 2009 12:10 am
by Fristi
dude, ik ben opt moment de w3schoosl tut's aant volgen, HTML 5 is nog ni volledig goegekeurd dus ik hou het bij de 4.
XHTML 2 development is gestopt dus ga ik het gewoon bij HTML houde.
labels was een goeie tip en ben nu aant lezen over semantics, maar ne mens moet ergens beginnen ^^
Zegt da laatste maar is tege de goethals trouwens, heb da er ooit op onderwijscommissie uitgegooid en hij haalde het bove op onze presentatie..(om maar te zeggen, he won't agree)
Posted: Sun Jul 19, 2009 1:43 pm
by nasam
HTML5 zou ik niet gebruiken, al is het een pak cooler dan HTML4 de nieuwe elementen (<nav>, <section>, ...) om layout weer te geven worden niet herkend in IE (ook niet in v.
(er is wel een javascript work-around, maar dat is ook niet echt semantisch) (en een soortgelijk probleem zit ook in firefox 2 en ouder (mozilla 1.
)
Ik zou me zelf trouwens geen zorgen maken over IE 6 (of ouder). Zelfs grote websites zoals youtube enzo ondersteunen dit niet meer, dus ik denk dat het heel verdedigbaar is tegenover proffen als ze daar over zouden klagen.
Schone layout trouwens
EDIT: zoals Pieter eigenlijk al aangaf: je layout je form door middel van tables (/me huivert) dit kan je veel beter doen door
Code: Select all
<p><label for="first_name">First name></label><input name="first_name" id="first_name" type="text" /></p>
Daarna moet je je label maar gewoon een width geven en de tekst rechts uitlijnen (of andere leuke trucs toepassen zodat het uitlijnt)
Posted: Sun Jul 19, 2009 2:33 pm
by Pieter Belmans
En zelfs <p> is niet helemaal goed. Als ge het handig wilt uitlijnen, gebruik een <fieldset>, dat is het blocklevel element bij uitstek om inputs te groeperen.
Posted: Sun Jul 19, 2009 2:38 pm
by nasam
Pieter Belmans wrote:En zelfs <p> is niet helemaal goed. Als ge het handig wilt uitlijnen, gebruik een <fieldset>, dat is het blocklevel element bij uitstek om inputs te groeperen.
P is om een paragraaf te maken zodat elk field op een nieuwe lijn start (div is mss iets beter hier, of gewoon <br /> na elk label is mss nog het best)
<fieldset> is om verschillende invoervelden op een goede manier te groeperen...
Posted: Sun Jul 19, 2009 2:50 pm
by Pieter Belmans
The P element represents a paragraph.
http://www.w3.org/TR/html401/struct/text.html#h-9.3.1
Maar voor de liefhebbers, op quirksmode.org heeft ppk ergens een interessante beschouwing rond de semantiek en styling van inputs staan. Ik zou opteren voor de combinatie van <fieldset> en <br> (ik wist heus wel dat dat een groepering is
).
Posted: Sun Jul 19, 2009 9:21 pm
by Fristi
ff voor de duidelijkheid, hetgeen op men fenix sta is intussen outdated besefte ik me daarnet
MAar goe, ik zeg het, heb hier quasi geen ervaring mee, oit wel is mee geklooid, maar nooit iets deftig me gedaan.
Wat IE6 betreft had ik ook al opgemerkt en wa dingen over gelezen en de conclusie al gemaakt om er foert tegen te zeggen