Archief - HTML/CSS: IE geeft een foute layout

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.
S

Soundstorm

Legacy Member
Hallo,

Ik ben nu al een tijdje op het gemak bezig met het redesignen van mijn site. Aangezien ik nooit een cursus of wat dan ook heb gevolgt is dit allemaal samengesteld uit dingen die ik samenraap op internet of uit tips van vrienden. Aangezien ik wel wat kan programmeren, snap ik het allemaal wel snel genoeg. Maar dat is ook een van de redenen dat ik met tabellen werk, begrijp ook niet waarom dat 'out' is evenals waarom frames niet gebruikt mogen worden.

Nu heb ik ongeveer mijn design klaar, maar blijft er een foutje optreden in IE. FF geeft geen problemen en Safari ook niet (alhoewel ik dit laatste nog niet zelf gezien heb).

Tussen header, menubalk, content en footer geeft hij wat spacing om de een of andere reden. Ik heb al verschillende dingen geprobeerd, maar als het werkt in IE, werkt het niet meer in FF...

Site is hier te zien: www.team-fq.com/test
Al hetgene nu online staat heb ik ook in een .zip gestoken. www.team-fq.com/test/team-fq.zip

Heeft er iemand een idee om dit op te lossen?

Thnx
Tom
o

orez

Legacy Member
Soundstorm zei:
Hallo,

Ik ben nu al een tijdje op het gemak bezig met het redesignen van mijn site. Aangezien ik nooit een cursus of wat dan ook heb gevolgt is dit allemaal samengesteld uit dingen die ik samenraap op internet of uit tips van vrienden. Aangezien ik wel wat kan programmeren, snap ik het allemaal wel snel genoeg. Maar dat is ook een van de redenen dat ik met tabellen werk, begrijp ook niet waarom dat 'out' is evenals waarom frames niet gebruikt mogen worden.
Klik om te vergroten...

Tabellen out ?
Tabellen zijn niet "out" , want dat is nog altijd een valid xhtml tag..

Tabellen dienen niet voor een layout maar voor tabulaire data. Dus als je tabellen gebruikt voor een layout, gebruik je ze verkeerd... zo simpel is het.
Tis trouwens ook veel simpeler om een layout te maken zonder tabellen... krijg je de fouten niet die je nu tegenkomt (of toch in minder mate.)

Frames worden niet gebruikt (mogen wel gebruikt worden) voor 1 simpele reden... zoekmachines kunnen er niet mee om, en verkleinen je kans om een mooie pagerank te hebben in google of consoorten.
S

Soundstorm

Legacy Member
Welja, ik bedoel dan ook tabellen gebruiken voor layout.

Moest ik weten hoe ik de layout kan doen zonder tabellen, had ik het wel zonder gedaan. Maar dat weet ik dus niet...
Q

Quilombo

Legacy Member
tja dat duurt toch even eer je dat snapt, maar het is idd gemakkelijker... eens je het snapt :cool:
staan genoeg links in de sticky, kijk zeker eens bij positioniseverything.net voor bugs en bij maxdesign voor een float tutorial

KULeest zei:
DIV's zijn de beste methode om te lay-outen. Ze worden, in combinatie met CSS, sterk aangeraden door het W3C. DIV's zijn handig omdat je dan meer controle krijgt over het design van je site. Table's hebben bv. properties zoals cellpadding en cellspacing die je niet kan aanpassen via CSS.
Het web wordt ook meer en meer toegankelijk via alternatieve hardware zoals PDA's of zelfs GSM's. Doordat de ruimte op die schermpjes letterlijk beperkt is, is het nagenoeg onmogelijk om gigantische tables of frames er op te proppen.

Voordelen divs:

- pagina's worre sneller geladen (1 css-file dat gecachet wordt)
- meer bandruimte en space dat je wint bij je host
- zoekmachines zullen de pagina beter kunnen indexeren
- wereldwijd wordt er nu gestreefd om zoveel mogelijk de webstandaarden te volgen
- websites worden toegankelijker gemaakt voor alle browsers en user agents
- websites zien er consistenter uit
- aanpassen site: efficiënter en minder duur
- ...
Klik om te vergroten...

=> https://www.beyondgaming.be/forums
in die thread staan er nog wel argumenten

en frames ... da's nog hardere rommel dan tabellen :D
denk dat er nog wel redenen zijn om geen frames te gebruiken, buiten het zoekmachine aspect, maar die kan ik nu nie bedenken en k heb ook geen zin om ernaar te zoeken
S

Soundstorm

Legacy Member
Ik zal het eens bekijken hoe het juist zit. Maar het grootste 'problem' dat ik heb is dat ik er nog een idee van heb hoe de footer (en de foto) onderaan blijft hangen en hoe de context naast de dingen aan de rechterkant gaat staan.

En als alles toch hoogte en breedte krijgt, kan ik niet begrijpen dat het er beter gaat uitzien op een PDA.
T

Tyfius

Legacy Member
Je hebt de mogelijkheid om verschillende CSS files te voorzien. (screen, print, projection, ...). Je kan dus een andere layout specifieren naargelang het media waardoor je website wordt bekeken. Je kan met andere woorden op het scherm van je pc een width definieren van 200px, en op een pda van 20px, alleen maar aan te passen in de juiste css file.
Wil je nadien een andere layout, kan je gewoon in je CSS file de positie van je div's aanpassen. Het maakt dus niet uit of je in je html file eerst je footer div definieert en daaronder pas de header div, de positie wordt toch in de CSS file bepaald.
S

Soundstorm

Legacy Member
Das wel handig dan, maar dat wil dan natuurlijk ook zeggen dat je een volledig nieuwe css moet schrijven per toestel dat je site gaat opvragen. Dat is volgens mij evenveel werk als moest je het met tables doen.

Ik heb ondertussen al wat zitten rondneuzen op maxdesign. Het positioneren van de header, navbar, content en sponsorblok (dat oranje geval rechts boven) zou wel lukken. Maar de footer en foto helemaal beneden krijgen en de lege ruimte tussen content en sponsor dan op te vullen, daar heb ik nog geen idee van.
o

orez

Legacy Member
Ja ge moet telkens een nieuwe css schrijven, maar veel werk is da nie..
Voor print bv ..
Geen positioning nimeer nodig. bijna geen margins... gewoon een basis lettertypke instellen voor uw headers / tekst / lettergrootte instellen / ...

En uw voorbeeld waarom niet met tables voor pda en print enzo...
Tables gaan er NIET voor zorgen dat uw backgroundkleurkes enzo wegzijn hé...
en Tables op PDA / GSM, das in de meeste gevallen al helemaal een ramp als et voor layout doeleinden wordt gebruikt.

xHTML zijn richtlijnen die zouden moeten gevolgd worden.
Dat is namelijk de taal die ervoor zorgt dat uw site altijd en overal correct zal worden weergegeven. op gelijk welk medium.
S

Soundstorm

Legacy Member
Ondertussen heb ik dit al gemaakt.
http://www.team-fq.com/test/index2.php
Het gaat inderdaad wel wat vlotter dan tabbelen zitten maken, maar het resultaat is nog altijd niet goed :(
In FF staan er nu lege balken (hetgeen ik dus eerst in IE had :p) en er is ook iets niet juist met de margin/spacing rond de tekst.

Als je in IE alles selecteert, dan zie je boven de tekst een heel klein vierkantje staan, ik heb geen idee van waar dat komt...
T

Tyfius

Legacy Member
Je code is al niet correct. Je vergeet een div, body en html af te sluiten.
S

Soundstorm

Legacy Member
Lol ja, body en html vergeten afsluiten :p Welke DIV is nog open?
De lege balken zijn nu weg in FF, dat was het probleem dus.

Maar boven en onder de tekst is er nog altijd meer plaats dan dat ik had ingesteld.
Dit is wat er in de css staat:
Code: 
#content {
	float: left;
	background-image: url(../images/transp-trans.png);
	width: 600px;
        margin: 0px;
}

#text {
	text-align: left;
	vertical-align: top;
	font-family: Verdana;
	color: white;
	font-size: 12pt;
	padding: 7px;
	margin: 0px;
}
o

orez

Legacy Member
nu niet teveel divs gaan maken ook hé ...
die div id="text" is al voor nix nodig... gewoon die <p> in uw content plaatsen.

trouwens, die text-align left enzo zal allemaal ni al te goed werken hé... ge dient da toe te passen op die p...
en op een p kun je ook ook margins enzo toepassen.

1 grote tip, voor posities enzo, werk zo weinig mogelijk met padding, en zoveel mogelijk met margins.
S

Soundstorm

Legacy Member
Ma die id=text is omdat er ook andere dingen inmoeten dan tekst, en die mogen dan geen margin/padding hebben.

Maar ik begrijp het toch goed hé? Margin is de binnenkant van het kotje en padding de buitenkant.

En wat bedoel je met toepassen op de p? Moet ik in de css dan zetten # text p {...} ? edit: ja dus :p
o

orez

Legacy Member
Soundstorm zei:
Ma die id=text is omdat er ook andere dingen inmoeten dan tekst, en die mogen dan geen margin/padding hebben.

Maar ik begrijp het toch goed hé? Margin is de binnenkant van het kotje en padding de buitenkant.

En wat bedoel je met toepassen op de p? Moet ik in de css dan zetten # text p {...} ? edit: ja dus :p
Klik om te vergroten...

margin is de buitenkant padding binnenkant.

margin = marge van je object tegenover andere objecten
padding = de afstand van alle objecten binnen je object tot de rand van dat object

En dat er nog andere dingen inmoeten is ook geen argument.
Alle andere dingen kunnen ook perfect in die #content.

Al zijn het lists, paragrafen, forms, wat dan ook...

die div #text is overbodig.
S

Soundstorm

Legacy Member
Heb die #text er nu uitgehaald. Maar op toch padding rond de tekst te krijgen (want het is toch padding dat ik nodig heb?!) moet ik dan wel #content p {padding:7px;} doen, anders maakt hij het geheel 614px breed.

Als je op about klikt, dan zie je dan als er een afbeelding inkomt de te groot is (dus breedte+14px>600px) dan gaat het sponsor gedeelte naar onder. Daarom wou ik met die apparte #tekst werken. Hoe krijg ik dat dan opgelost?

En in IE lijnt het allemaal niet zo goed uit. Het is de helft van de breedte van de scroll bar verschoven.
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