[HTML-CSS]Basic lay-out vraagje

Examenroosters, algemene discussies, ...

Moderator: Praesidium

User avatar
Fristi
WOZ
Posts: 4565

[HTML-CSS]Basic lay-out vraagje

Post#1 » Sat Jul 18, 2009 3:28 pm

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 :P)
Fristi Ad Infinitum

WINAK WOZ 2013 - ...
WINAK Magister Fristi 2012-2013
WINAK Feest 2011-2012
WINAK Schachtentemmer 2010-2011
WINAK Scriptor 2008-2009 | 2009-2010

User avatar
Fristi
WOZ
Posts: 4565

Post#2 » Sat Jul 18, 2009 3:35 pm

Heb al een stuk opgelost.
Door

Code: Select all

p{
margin:0;
padding:0;
}
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 -.-"
Fristi Ad Infinitum

WINAK WOZ 2013 - ...
WINAK Magister Fristi 2012-2013
WINAK Feest 2011-2012
WINAK Schachtentemmer 2010-2011
WINAK Scriptor 2008-2009 | 2009-2010

User avatar
Fristi
WOZ
Posts: 4565

Post#3 » Sat Jul 18, 2009 3:40 pm

oke, weer een stapke verder, heb de grijze ruimte tussen oranje ne blauwe deel ook kunnen wegkrijgen door:

Code: Select all

form{
padding:0;
margin:0;
}
toe te voegen :P
Fristi Ad Infinitum

WINAK WOZ 2013 - ...
WINAK Magister Fristi 2012-2013
WINAK Feest 2011-2012
WINAK Schachtentemmer 2010-2011
WINAK Scriptor 2008-2009 | 2009-2010

User avatar
Fristi
WOZ
Posts: 4565

Post#4 » Sat Jul 18, 2009 3:44 pm

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 -.-")
Fristi Ad Infinitum

WINAK WOZ 2013 - ...
WINAK Magister Fristi 2012-2013
WINAK Feest 2011-2012
WINAK Schachtentemmer 2010-2011
WINAK Scriptor 2008-2009 | 2009-2010

User avatar
Robbe
WOZ
Posts: 2161
Contact:

Post#5 » Sat Jul 18, 2009 6:23 pm

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 ;)
"I'm not afraid of falling, I'm afraid of landing" -- Sam
How To Ask Questions The Smart Way

Zingen? UKA-n dat ook!

User avatar
Fristi
WOZ
Posts: 4565

Post#6 » Sat Jul 18, 2009 6:48 pm

Ik ga gegarandeerd nog zon dingen tegenkomen gezien mijn gebrek aan ervarign met css e.d. (en gezien het de non-compliance van IE >.<)
Fristi Ad Infinitum

WINAK WOZ 2013 - ...
WINAK Magister Fristi 2012-2013
WINAK Feest 2011-2012
WINAK Schachtentemmer 2010-2011
WINAK Scriptor 2008-2009 | 2009-2010

Pieter Belmans
Posts: 593
Contact:

Post#7 » Sat Jul 18, 2009 10:59 pm

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 :P. Ze beseften misschien dat het project in 1e zit totally useless was op databasevlak...

User avatar
Fristi
WOZ
Posts: 4565

Post#8 » Sun Jul 19, 2009 12:10 am

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)
Fristi Ad Infinitum

WINAK WOZ 2013 - ...
WINAK Magister Fristi 2012-2013
WINAK Feest 2011-2012
WINAK Schachtentemmer 2010-2011
WINAK Scriptor 2008-2009 | 2009-2010

User avatar
nasam
Posts: 233
Contact:

Post#9 » Sun Jul 19, 2009 1:43 pm

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. 8) (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.8))

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)
http://www.nathansamson.be" onclick="window.open(this.href);return false; Flattr me!Image

Pieter Belmans
Posts: 593
Contact:

Post#10 » Sun Jul 19, 2009 2:33 pm

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.

User avatar
nasam
Posts: 233
Contact:

Post#11 » Sun Jul 19, 2009 2:38 pm

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...
http://www.nathansamson.be" onclick="window.open(this.href);return false; Flattr me!Image

Pieter Belmans
Posts: 593
Contact:

Post#12 » Sun Jul 19, 2009 2:50 pm

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 ;)).

User avatar
Fristi
WOZ
Posts: 4565

Post#13 » Sun Jul 19, 2009 9:21 pm

ff voor de duidelijkheid, hetgeen op men fenix sta is intussen outdated besefte ik me daarnet :P

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 :P
Fristi Ad Infinitum

WINAK WOZ 2013 - ...
WINAK Magister Fristi 2012-2013
WINAK Feest 2011-2012
WINAK Schachtentemmer 2010-2011
WINAK Scriptor 2008-2009 | 2009-2010

Return to “Algemeen”

Who is online

Users browsing this forum: No registered users and 7 guests