Kga er is ff naar kijken. Ik edit hier dan straks wel.
Ok ... Even geupload:
http://www.pieterjandebock.be/test/telenet/index.html
1) Het eerste wat ik gedaan heb is je inhoud.jpg en menu.jpg aangepast. De menu pastte niet 100% in de layout van het menu dus heb ik deze wat geresized.
http://www.pieterjandebock.be/test/telenet/websiteonderdelen/inhoud.jpg
2) Ik heb de code wat herwerkt:
2.1
Code:
#positionering {
width:800px;
margin:0 auto;
text-align:left;
}
[FOUT]Je had eerst margin:0 auto;. Door de 0 weg te laten staat je website in elke browser perfect gecentreerd.[/FOUT]
Sorry, hier ben ik zelf verkeerd. 0px staat voor margin langs boven en onder (dus deze mag op 0 staan) en auto staat voor margin langs links en rechts. Het is dus zeker niet verkeerd. Probeer zelfs eens of het veel verschil uitmaakt.
2.2
Code:
#nav {
list-style: none;
margin: 3px 0px 0px 24px;
padding: 0px;
height: 169px;
overflow: hidden; /* PROBLEEM 2 */
}
#nav li {
height: 34px;
}
#nav a {
outline: none;
text-decoration: none;
height: 34px;
width: 112px;
display: block;
background-image: url(websiteonderdelen/menu.jpg);
}
#nav a b {visibility: hidden}
#home a {width: 112px;} #home a:hover, #home a:focus, #home.active a {width: 112px; background-position: -112px 0px;}
#info a {width: 112px; background-position: 0px -34px;} #info a:hover, #info a:focus, #info.active a {width: 112px; background-position: 112px -34px;}
#prices a {width: 112px; background-position: 0px -68px;} #prices a:hover, #prices a:focus, #prices.active a {width: 112px; background-position: 112px -68px;}
#location a {width: 112px; background-position: 0px -102px;} #location a:hover, #location a:focus, #location.active a {width: 112px; background-position: 112px -102px;}
#contact a {width: 112px; background-position: 0px -136px;} #contact a:hover, #contact a:focus, #contact.active a {width: 112px; background-position: 112px -136px;}
Dit heeft wat uitleg nodig.
nav
- de
float attributen waren hier nu niet nodig omdat het menu onder elkaar komt. Je hoeft dus nergens te floaten.
-
margin zorgt ervoor dat je menu op de juiste plaats op de site terechtkomt, het moest 3px naar onder en 24px naar rechts opschuiven om perfect in het kadertje te passen
-
padding heb ik moeten toevoegen omdat hij anders in IE een padding van 42px gaf (geen idee hoe dat komt) en daar door uw menu middenin werd 'afgekapt'
-
overflow zorgt hiervoor dat deze in IE niet verder ging lopen naar onder toe. De knop home werd terug zichtbaar onder contact.
nav a
-
display: block -> dit zorgt ervoor dat je link een blokje wordt met de opgegeven
height en
width. Hiermee bepaal je welk deel je van je achtergrondafbeelding dus omsluit.
- je roept ook de
background-image op. Door daarna elke
li een apart
id te geven kan je gaan definiëren welk deel van de achtergrondafbeelding je juist wil
de aparte id's
- zoals hierboven gezegd krijgt elke link zijn eigen
id mee waardoor je de
background-position van een link op de afbeelding kan gaan definieren
home staat helemaal vanboven en dus standaardpositie bij het hoveren moet je bij je afbeelding 112px naar rechts opschuiven (opschuiven volgens de x-as dus), hier maakt het blijkbaar niet uit of je -112px of 112px gebruikt
info staat 34px lager dan home op je afbeelding dus moet je volgens de y-as 34px naar onder opschuiven. Bij het hoveren moet je 34px naar onder en 112px naar rechts om op het lichtere gedeelte van de menu-afbeelding te komen.
(hopelijk is dit wat duidelijk)
background-position: X Y;
X = verschuiving volgens x-as
Y = verschuiving volgens y-as
2.3
Als ik op
nav een float zette dan was er een probleem in IE. Ik heb dus een aparte div gemaakt die
nav omsluit en deze naar links gefloat.
2.4
Code:
#inhoudpositie {
font:Arial, Helvetica, sans-serif;
font-size:12px;
color:#404040;
margin: 3px 0px 0px 155px;
* margin: -169px 0px 0px 155px;
width: 619px;
height: 489px;
}
Normaalgezien zou ik hier ook een
float:left opzetten maar dit was blijkbaar niet nodig maar het leverde wel problemen op met IE dus heb ik naast de gewone
margin (die nodig was om uw div
inhoudpositie op de perfecte plaats te zetten) een
* margin gebruikt om diezelfde div ook op de juiste plaats in IE te krijgen. In IE floatte hij namelijk niet en uw tekst kwam net onder u menu (zoals het nu trouwens op u voorbeeldpagina in IE ook is. In Opera en FF werkt het wel). Dat * zorgt ervoor dat deze regel enkel van toepassing is in IE. Op die manier toont het dus in beide browsers goed.
2.5
Code:
#inhoud {
background-image:url(websiteonderdelen/inhoud.jpg);
width:800px;
height:540px;
border:none;
background-repeat:no-repeat;
overflow: hidden; /* PROBLEEM 1 */
}
Ook hier een probleempje. Door de
margin-top van
nav en
inhoudpositie op 3px te zetten verschoof de hele div
inhoud 3px naar beneden. Hierdoor kwam er een breuk in je design tussen de banner en de inhoud. Ik heb dit opgelost met
overflow: hidden
OPMERKING:
Ik ben zelf nog maar een 1,5maand bezig met CSS dus misschien dat mijn manieren ook niet echt de gemakkelijkste zijn maar het toont toch in IE, FF en Opera goed.
Ik heb wel veel moeten tweaken om alles goed te krijgen en normaal heb ik dat niet. Volgens mij kan je opbouw iets beter en ik zou het ook wat anders doen maar ik wou niet je hele design gaan aanpassen dus heb ik zoveel mogelijk geprobeert volgens jou opbouw te werken, wat uiteindelij ook wel werkt.
LAATSTE EDIT (denk ik): Ik zie net dat het probleem dat ik had bij
2.4 eigenlijk wat hetzelfde is als de beginpost. Inderdaad wel raar dat dit niet goed werkt maar volgen mij, again, ligt het aan je opbouw. Ik ga er eens over nadenken over hoe het misschien nog beter kan waardoor er niet zoveel getweakt moet worden.
Of andere - meer ervaren mensen op het forum - die je misschien beter kunnen helpen dan mij. Dan leren we beide iets bij.
ik heb al zitten zoeken hoe ik dat kan oplossen maar ik vind niets. Hier kan je het probleem zien:
