login  Naam:   Wachtwoord: 
Registreer je!
 Forum

IE doet moeilijk bij lay-out.

Offline cowb - 09/01/2011 13:46
Avatar van cowbLid Hi all,

Ik ben bezig aan mijn nieuwe website, maar voor mijn lay-out ondervind ik een paar problemen... En ik weet echt niet waar ze vandaan komen...
Bij chrome en firefox heb ik helemaal geen problemen, en bij IE heb ik ze wel.

Probleem 1:
Mijn logo/bedrijfsnaam wordt in 2 gesneden, omdat mijn menu blauwe menu tab iedere keer een klein beetje van de rand afspringt.

Probleem 2:
Bij de contact pagina wordt heel de boel uit elkaar getrokken...

31 antwoorden

Gesponsorde links
Offline valles10 - 09/01/2011 13:50
Avatar van valles10 HTML interesse Kan je code posten, danku
Kan je preview tonen, danku
'in 2 gesneden'?
Offline cowb - 09/01/2011 14:00
Avatar van cowb Lid oei, mijn excuses. Ik was mijn url vergeten...
De code kan je dan opvragen via 'view source'

http://www.creativethree.be/index.php
Offline valles10 - 09/01/2011 14:04
Avatar van valles10 HTML interesse phoew, foei foei, tabellen, is van de jaren stilletjes 

moest je nou eens divs hebben gebruikt...
Offline WouterJ - 09/01/2011 14:52
Avatar van WouterJ HTML gevorderde Je mist een doctype. Dit moet altijd eerst, anders gaat IE in de qruiks mode (doen alsof het IE6 is).

Meer fouten:
- Lay out maak je in tabellen en niet in divs.
- HTML schrijf je met een kleine letter, in XHTML is dit zelfs verplicht.
- Gebruik geen inline CSS. Stop alles in de Stylesheet, dus geen height= enz.
- Afbeeldingen voor het design doe je met CSS: background.
- Als je een vlak wilt hebben van 1 kleur moet je geen image gebruiken, maar de kleur optie bij CSS: background.(zie vorige link)
Offline webbiexl - 09/01/2011 14:55
Avatar van webbiexl PHP interesse inderdaad, je basis structuur in tabellen is not done tegenwoordig.
div's met ID's en Classes en een goeie css ernaast doen wonderen, ik denk dat er weinig mensen trek hebben om hierin naar bugs te gaan zoeken. Maar om je een beetje op weg te helpen:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  2. <div id="Container">
  3.   <div id="Header">
  4.     <a class="logo"><img src="logo.jpg"></a>
  5.     <div class="navigation">hier je menu (in een list)</div>
  6.     <div class="keyvisual">&nbsp;</div>
  7.   </div>
  8.   <div id="Content">hier je pagina's invoegen</div>
  9.   <div id="Footer">inhoud van je footer</div>
  10. </div>
  11. </body>


css code - Bekijk de code zonder highlighting - Klap code in 
  1. /* style.css */
  2. body 
  3. {
  4.   margin: 0;
  5.   padding: 0;
  6. }
  7.  
  8. div#Container
  9. {
  10.   margin: 0 auto; /*zorgt ervoor dat pagina in het midden is uitgelijnd*/
  11.   width: 500px; /*breedte pagina*/
  12. }
  13.  
  14. div#Header {}
  15.  
  16.   a.logo {}
  17.  
  18.   div.navigation {}
  19.  
  20.   div.keyvisual {}
  21.  
  22. div#Content {}
  23.  
  24. div#Footer {}
Offline cowb - 09/01/2011 15:55
Avatar van cowb Lid Oei, bij mij is het dus allemaal een beetje ouderwets laat maar zeggen...
Maar wat is nu het beste, lay-out in tabellen of in div?
Als ik een design maak in photoshop, dan kan ik deze gewoon exporteren en ik heb deze in html...
Dus waarom zou ik met div elementen beginnen prutsen?

En welk doctype gebruik ik best?
Ik heb er nu even de standaard van dreamweaver in geplakt. Met het gevolg dat de fout in mijn navigatie opgelost is. Maar nu past deze mijn css niet helemaal correct toe in mijn tabellen.
Offline webbiexl - 09/01/2011 16:01
Avatar van webbiexl PHP interesse Div zijn veel beter, mits je ook CSS gebruikt (in een aparte stylesheet).
Photoshop is gemaakt om te designen niet om te html-en etc, daarvoor heb je dreamweaver...

doctype kan niet echt heel erg fout gaan... maar tabellen hebben hun eigen gedragingen. Het enige waar ik nog tabellen voor gebruik is voor mailings... in een website doe ik ALLES met divs tenzij er een tabel moet komen om informatie in te zetten, maar als ik zonder tabellen kan doe ik het zonder.
Offline WouterJ - 09/01/2011 16:49
Avatar van WouterJ HTML gevorderde
webbiexl schreef:
daarvoor heb je dreamweaver...

En vele andere editors. Want dreamweaver heeft ook een WYSIWYG editor, dus die zou ik niet zo snel gebruiken.
webbiexl schreef:
doctype kan niet echt heel erg fout gaan...

Een doctype kan juist wel heel veel doen! Als er geen doctype is of het doctype niet op regel 1 staat gaat IE in de qruiks mode. Dan zit je hele website door elkaar.

Dit is dus waarschijnlijk de fout bij cowb. Je kan denk ik het best HTML4 transitional doctype gebruiken.

Verder is een design in divs veel beter dan in tabellen.
Offline cowb - 09/01/2011 17:36
Avatar van cowb Lid Bedankt voor het advies in ieder geval...

Wel aangezien het hier nu niet direct over een moeilijke design gaat, heb ik al even zitten proberen om mijn design over te zetten naar div.
Maar ik sukkel een beetje met die position dingen. Dus daar moet ik me nog een beetje beter in informeren...
Offline WouterJ - 09/01/2011 18:24
Avatar van WouterJ HTML gevorderde Een goede site om je te helpen is http://www.sceneone.nl/
Die legt alles goed uit, is nederlands en bespreek goede en valid code!
Offline cowb - 09/01/2011 19:40
Avatar van cowb Lid Bedankt, dat zal iets zijn voor na de examens! :-D
Offline webbiexl - 09/01/2011 20:14 (laatste wijziging 09/01/2011 20:43)
Avatar van webbiexl PHP interesse
Waldio schreef:
[..quote..]
En vele andere editors. Want dreamweaver heeft ook een WYSIWYG editor, dus die zou ik niet zo snel gebruiken.[..quote..]


Ja dat ook maar hij zegt dat hij dreamweaver heeft dus dat...

Waldio schreef:
[..quote..]
Een doctype kan juist wel heel veel doen! Als er geen doctype is of het doctype niet op regel 1 staat gaat IE in de qruiks mode. Dan zit je hele website door elkaar.[..quote..]


dat zeg ik tog niet, het maakt in principe niet onwijs veel uit welke doctype hij gebruikt zolang hij er maar 1 inzet, en dat die tabellen niet goed gaan is logisch want die hebben hun eigen gedragingen...

Als je quote doe het dan goed ;) Dat de jager de wolf opensnijd wil nog niet zeggen dat hij een coldblooded killer is 

Positioning is eigenlijk heel simpel als je het principe doorhebt, daar dit met alles zo is 

Je hebt 2 divs (div Aa en Ab) in een div (A).
div Aa wil je rechts halverwege div A hebben en div div Ab wil je daar overheen positioneren. Nu kan je die 2 divs een positie geven dmv positioning.
Die 2 div Aa en Ab geef je position: absolute;.

Maar er is een addertje: Position: absolute; heeft altijd een container nodig om zijn positie te bepalen en de body tag heeft standaard de hoogste rang in de orde van een website en houd alles netjes binnen het "frame" (de opper-div met de verentooi en vredespijp als je het zo wilt zien).

Nu wil je niet dat ze rechts in het midden van je "frame" komen te staan maar rechts in het midden van div A. Daarvoor moet je div A ook een positie geven, namelijk position: relative;. Dit houd in dat voor de divs Aa en Ab nu relatief gezien div A de opper-div is.

Nu over het overlappen van Ab over Aa
Als je div overlappen heb je, of je het nou leuk vind of niet, je te houden aan een volgorde. Ja vervelend, maar zo is het nou eenmaal . De onderste gepositioneerde div komt bovenaan het rijtje en hoe meer laagjes je hebt, laten we zeggen, div Aa komt onderop dus bovenaan het lijstje, daarop div Ab die staat onder div Aa in het lijstje

Ab over Aa
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div class="A">
  2.   <div id="Aa"></div>
  3.   <div id="Ab"></div>
  4. </div>

wil je die Aa boven aan dan wissel je van positie...

man wat ben ik productief vandaag 
Offline WouterJ - 09/01/2011 20:28 (laatste wijziging 09/01/2011 20:28)
Avatar van WouterJ HTML gevorderde @webbiexl, ik dacht dat je bedoelde te zeggen dat een doctype niet nodig is. Maar je bedoelde te zeggen dat het soort doctype niet uitmaakt, als er maar iets staat.
Nu is dat ook niet helemaal waar, want als je HTML script en je een XHTML doctype neerzet is het niet valid...  
Offline webbiexl - 09/01/2011 20:44
Avatar van webbiexl PHP interesse Ja dat is waar, maar hij start een pagina met dreamweaver en dan gaat het al bijna niet fout.
Offline webbiexl - 09/01/2011 20:46 (laatste wijziging 09/01/2011 20:46)
Avatar van webbiexl PHP interesse edit foutje
Offline cowb - 10/01/2011 11:05 (laatste wijziging 10/01/2011 11:45)
Avatar van cowb Lid @webbiexl: ik heb ondertussen al ontdekt dat je ook met Z-index kan werken om in lagen te werken...

Is er trouwens geen website waar er wat commando's staan om div de aligneren? Ik heb heel lang moeten zoeken om dingen te vinden zoals float ed.  

Ik heb ook een reden gevonden waarom ik gebruik maakte van tabellen. Bij mijn navigatie staan er een aantal afbeeldingen naast elkaar. En wanneer ze niet in een tabel staan dan is er een zeker ruimte tussen de 2 afbeeldingen waardoor mijn navigatie balk op niks trekt...
Dit is wellicht op te lossen met een beetje CSS, alleen weet ik nog niet hoe...  
Offline WouterJ - 10/01/2011 14:47
Avatar van WouterJ HTML gevorderde Dat kun je oplossen met CSS margin/padding: http://sceneone.nl/positionering/margin.php
En een site voor aligneren is ook sceneone.nl. Lees de artikelen bij positionering maar eens, margin/padding artikel is er daar 1 van.
Offline cowb - 11/01/2011 11:29 (laatste wijziging 11/01/2011 11:30)
Avatar van cowb Lid Het raakt niet opgelost...
Mijn afbeeldingen blijven een zekere afstand van elkaar verwijderd.

zie hier... http://www.creativethree.be/index2.php

Dit is mijn code:

css code - Bekijk de code zonder highlighting - Klap code in 
  1. div#navigatie
  2. {
  3. 	width:100%;
  4. 	height:99px;
  5. 	text-align:right;
  6. 	z-index:2;
  7. 	position:absolute;
  8. 	padding:0px;
  9. 	margin:0px;
  10. }


html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="navigatie">
  2. 	  <a href="index.php?p=home&m=1"><img hspace="0" src="images/knop_home_over.jpg" border="0"></a>
  3. .
  4. .
  5. .
  6.           <a href="index.php?p=home&m=1"><img hspace="0" src="images/knop_overons.jpg" border="0"></a>
  7.     </div>
Offline Beirensg - 11/01/2011 14:12
Avatar van Beirensg HTML beginner Met float:left of right voor elke a, werkt het wel:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. div#navigatie a{
  2. float:left;
  3. }


Ook zou ik de images als background plaatsen, zodoende kan je deze met css veranderen bij hoveren. De gebruiker heeft zo geen javascript nodig voor deze acties. 

Waarom er nu wel een spacing is weet ik niet. waarschijnlijk nog ergens een kleinigheid dat over het hoofd wordt gezien. In elk geval zou ik float:left of right aanraden.
Offline cowb - 11/01/2011 15:15
Avatar van cowb Lid Dat is wel een goed idee. Maar dit voldoet niet echt aan mijn eisen.
Want dan moet ik per knop een div gaan maken met bijhorende css voor de achtergrond afbeelding...
Offline Beirensg - 11/01/2011 15:35
Avatar van Beirensg HTML beginner Images als background is maar een persoonlijke voorkeur. Maar is zeker niet verplicht. 

En werkt de float niet? ik heb deze (snel) getest in IE8 en bij mij werkte dit.
Offline cowb - 11/01/2011 17:28
Avatar van cowb Lid Float werkt wel hoor.
Maar er zitten meerdere afbeeldingen in één div, en de afbeeldingen horen gewoon mooi naast elkaar te staan, maar er zit een zeker ruimte tussen de twee afbeeldingen die ongewenst is...
Offline Beirensg - 11/01/2011 17:32
Avatar van Beirensg HTML beginner Ik heb je afbeeldingen eens bekeken, je hebt ongeveer 1 pixel breedte ertussen (ook bij float, zonder float is dit niet). Deze ruimte is er enkel bij de standaard afbeelding, niet bij de hover-afbeelding (toch niet als men float).
De kleine grijze spatie, komt er enkel en alleen door de afbeelding zelf, immers de onderste 30 pixels aan de linkerkant zijn grijs (zoals de achtergrond) ipv zwart.
Offline cowb - 12/01/2011 18:08
Avatar van cowb Lid Het heeft niks met de afbeeldingen te maken hoor...
want op mijn andere versie is het gelukt via tabellen. En nu ik met div elementen probeer te werken gaat het niet!
Offline Beirensg - 13/01/2011 10:26
Avatar van Beirensg HTML beginner Misschien heb ik mij verkeerd uitgedrukt. In CSS zet je bvb:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. div#navigatie a{
  2. float:right;
  3. }


En dan komen alle afbeeldingen exact naast elkaar, zonder spatie.

Let wel er is in elke afbeelding een grijze lijn links, dewelke ervoor zorgt dat het lijkt alsof er een minieme spatie is.
Offline cowb - 13/01/2011 12:19
Avatar van cowb Lid Ja dat is de bedoeling, die rand is er ook niet over de gehele lengte.

En wat jij me zegt lijkt niet te werken...
Mijn afbeeldingen komen dan links te staan, heel erg vreemd!
Offline Beirensg - 13/01/2011 12:57
Avatar van Beirensg HTML beginner Strange. Ik heb dit nochtans getest in IE8 en FF, beiden reageren zoals het moet de links (a) met images worden rechts geplaatst. (bij float right)

Ik heb dan nog verder gekeken en ik zie 2 problemen die mogelijks de verkeerde plaatsing tonen:
- je hebt de width van div#navigatie niet meer op 100% staan
- je gebruikt nog een andere browser, dewelke CSS anders interpreteert.

kan je de CSS eens posten zoals je deze hebt aangepast, dan kunnen we misschien verder troubleshooten.
Offline cowb - 13/01/2011 17:12 (laatste wijziging 13/01/2011 17:17)
Avatar van cowb Lid Ik werk met chrome, het probleem is inmiddels opgelost, het was blijkbaar gewoon een html bugje door mijn html/php combinatie.
Nu is het dus opgelost.

MAAR ik heb een ander vraagje...

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="content">Hier in worden mijn pagina's geladen.</div>
  2. <div id="foother">Dit moet ten aller tijde helemaal onderaan tegen het browser plakken</div>


css code - Bekijk de code zonder highlighting - Klap code in 
  1. div#container {
  2. 	width:100%;
  3. 	height:100%;
  4. 	position:relative;
  5. 	overflow:auto;
  6. }
  7.  
  8. div#foother {
  9. 	width:100%;
  10. 	background:#1f211d;
  11. 	height:41px;
  12. 	position:static; /* of absolute */
  13. 	bottom:0px;
  14. }


De bedoeling is dus dat men foother ten alle tijde helemaal onderaan tegen de onderkant van men browser plakt. Dit kan via absolute. Maar wanneer mijn content een beetje groter wordt dan overlapt deze mijn foother, en dat wil ik niet... Hoe voorkom ik dit?

Dit is de situatie waarover ik het heb...
http://www.crea...io&m=3
Als je van deze pagina naar de home pagina doorklikt dan zie je het verschil!
Offline Beirensg - 13/01/2011 17:20 (laatste wijziging 13/01/2011 18:03)
Avatar van Beirensg HTML beginner je gaat de volgende css moeten toevoegen:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. div#content{
  2. padding-bottom:30px; //height footer + 10px voor extra afstand
  3. position: relative;
  4. overflow:hidden
  5. }
  6. div#footer{
  7. height:20px; //height footer
  8. bottom: 0px;
  9. padding:0;
  10. margin:0;
  11. width:100%;
  12. position:absolute;
  13. }
  14.  
  15. body{
  16. position:relative;
  17. }



dit werkt zeker (gebruik ik ook)
Offline cowb - 18/01/2011 16:53
Avatar van cowb Lid @Beirensg: Ik heb mijn CSS aangevuld met jouw code. Het is deels opgelost. Maar mijn foother blijft nog steeds tegen het einde van mijn content plakken in plaats van aan de onderkant van de pagina! Jammer genoeg.

http://www.creativethree.be/index.php (hier staat het slecht)
http://www.crea...ct&m=5 (hier staat het goed, mooi onderaan de pagina)
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.214s