andere weergave in chrome dan in IE

Status
Niet open voor verdere reacties.
M

Merijnbosma

Gebruiker
Lid geworden
7 jun 2011
Berichten
189
Hallo,

Ik ben een site in elkaar aan het knutselen (http://www.wifocarr.nl/2012/Projecten/Projecten.html) en ik zie nu in chrome balken met de achtergrond kleur (gewoon transparante ruimte in de divs) boven en onder de header en onder de navigatie balk. Iemand die mij daar mee kan helpen?

Ohja en voor de oplettende kijker :P .... ik heb in IE een andere afbeelding dan in chrome, toen ik dat zag brak me de klomp :confused:

THNX!! Mvg Merijn
 
Bedankt voor de reactie!!

Ik heb de w3 validator gebruikt en heb nu wel dezelfde weergave in chrome en IE (de rest moet ik nog testen).

Nu zit ik alleen nog met de balken zoals beschreven:
Ik ben een site in elkaar aan het knutselen (http://www.wifocarr.nl/2012/Projecten/Projecten.html) en ik zie nu in chrome balken met de achtergrond kleur (gewoon transparante ruimte in de divs) boven en onder de header en onder de navigatie balk. Iemand die mij daar mee kan helpen?
Klik om te vergroten...

en nu valt me op dat deze balken op sommige pagina's er niet zijn en op een ander zit er weer zon balk verticaal rechts naast de site...

Iemand een idee?

Thnx
 
Oeps. Ik zie nu 1 vrachtauto en allemaal kruisjes van die andere vrachtauto's. Gisteren was dat nog niet. Ook in Chrome en Safari
 
Haha ja dat klopt had 7 van die vrachtauto's draaien met maar 1 gelinkt dus was steeds gokken haha. Ik knoei ondertussen wat verder aan de site dus veranderingen zullen voorkomen idd.

Alleen ik ben bang dat als niemand me helpt met die vage balken dat die wel blijven :P
 
Hallo, Merijn. Ik heb hier een complete uitleg over DIV, CSS, Floating, positioning enz enz. Ik denk dat je hier wel mee weg kunt komen. Ik gebruik deze zelf ook wel eens om eens te kijken hoe alles in elkaar zit. Leuk om wat van te leren. En wellicht kun je jou probleem hiermee ook oplossen.

http://www.sitemasters.be/tutorials/5/1/90/CSS/Div_element
 
Laatst bewerkt:
Alleen ik ben bang dat als niemand me helpt met die vage balken dat die wel blijven. :P
Klik om te vergroten...

Angst is een slechte raadgever! ;)
Code: 
.c1 p, 
.c1 ul { 
   margin: 0;
   }
Toelichting: browsers geven <p>'s en <ul>'s standaard een margin-top en margin-bottom mee, ook al is die niet opgegeven.
In de <div id="masthead" class="c1"> zit een <p> met het image; dan krijgt het img die margins (aan de bovenkant onder de bovenrand van het scherm zit ook zo'n leeg stuk).
Het menu zit in de <ul id="navigatie" class="c2"> die in de <div class="c1"> zit. De <ul> heeft weliswaar een opgegeven hoogte, maar de margins beginnen pas daarboven en daaronder.
In dit geval zitten zowel de betrokken <p> als de betrokken <ul> in de cascade onder een div met de class="c1", dus door ".c1 p" en ".c1 ul" in de styles op {margin:0;} te zetten is het leed geleden.
  • NB: voor de snelle diagnose van dit soort dingen: de add-on Firebug voor Firefox even binnenhalen. Als je in het linkervenster de elementen openklikt en over de html-code van een element hovert, zie je in geel de margins erbij. In het rechtervenster zie je wat er wel of niet aan css-opdrachten voor dat element zijn gegeven. Dat kan je online wijzigen of aanvullen, om meteen te zien wat er gebeurt.
Met vriendelijke groet.
CSShunter
 
Nog ff een vraag over dezelfde site lichtelijk ander onderwerp...

De linker div wil ik graag op rekken tot de onderkant van de site, ik heb al gegoogled en geprobeerd maar niks werkte (bij mij :p)

Kan iermand mij hieermee helpen?

THNX!! Groeten Merijn
 
Hoi Merijn,
Heb je deze al eens geprobeerd?
Code: 
body {
	min-height: 100%;
	margin: 0;
	padding: 0;
	background: #dcd3c1 url(../Pictures/Bgleftcol.jpg) repeat-y;
	}
/* [... en het bg-img weghalen bij de #left_col] */
Toelichting:
  • De linkerkolom wordt alleen maar zo hoog als de inhoud die er in zit. Daarom komt z'n bg-img ook niet verder.
  • Je moet in een laag daaronder zitten, d.w.z. in een omvattende container, waar zowel de linkerkolom als het rechter-gedeelte in zit. Als daar het bg-img in zit (met verticale herhaling), kan het meerekken met de inhoud van de hoogste van de twee kolommen (links of rechts).
  • Hier kan het gordijntje met het bg-image prima opgehangen worden aan de <body>, want de header en het menu zijn er gewoon overheen geplakt, zodat daar de linkerkolom-achtergrond niet te zien is. Maar eigenlijk loopt de kolom-achtergrond daar stiekem onder door.
  • Waar het kolom-img niet zit, is er de gewone background-color van de <body>: #dcd3c1.
  • De techniek heet "faux columns", en meer uitleg zit hier.
    (In de uitwerking aldaar is het wat ingewikkelder, omdat daar wegens gedeeltelijke transparantie op andere plekken de <body> niet als ophangpunt gebruikt kan worden; maar het principe blijft hetzelfde.)
Met vriendelijke groet,
CSShunter
________
PS: Het img hoeft ook helemaal geen 800px hoog te zijn: het is één kleur en herhaalt zich toch naar beneden. Met een tot 16 kleuren gereduceerd gif'je red je het ook:

wifo-kolom.gif


wifo-kolom.gif​

Als de breedte maar de breedte van je kolom is, gaat het altijd goed.
 
Hey CSShunter,

Het werkt super :) Uitleg is ook weer fantastisch, helder en duidelijk (Y)
Kudos en +1 voor jou ;)

Groeten Merijn
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan