Lay out gemaakt nu goed coderen..
- Onderwerp starter volcom
- Startdatum
- Status
Goeroeboeroe
Terugkerende gebruiker
- Lid geworden
- 3 mei 2007
- Berichten
- 1.408
Ah, dat is verstandig. Houdt er alleen wel rekening mee dat 't merendeel van de cursussen op internet zwaar verouderd is, en dat dat er helaas vaak niet bijstaat. 'n Ooit goede cursus kan daardoor veranderd zijn in 'n inmiddels volstrekt waardeloze.
Die twee waarnaar ik linkte zijn beide nog steeds helemaal goed.
Die twee waarnaar ik linkte zijn beide nog steeds helemaal goed.
Ok dus ik heb m'n design gesliced en alleen heel de header overgenomen en dan flitser zijn code.
Maar het enigste wat ik nog wil is een buttonover doen bij al m'n buttons. En dat grijze figuurtje met info moet er wel bij vind ik.
Hoe doe ik dat dan?
Moet ik dat grijze figuurtje doen zoals flits had gedaan met die <area shape="rect" coordinates="....." />.
Hoe werk je eigenlijk met die coordinates ?
Grtz
EDIT: Grijze figuurtje is klaar
heb het design gesliced met de inhoud erbij , en heb de inhoud foto gebruikt als background voor het divje en de tekst met padding wat naar onder gezet en het is perfect nu Alleen nog de button overs ...En dat moet met hovers ?
Maar het enigste wat ik nog wil is een buttonover doen bij al m'n buttons. En dat grijze figuurtje met info moet er wel bij vind ik.
Hoe doe ik dat dan?
Moet ik dat grijze figuurtje doen zoals flits had gedaan met die <area shape="rect" coordinates="....." />.
Hoe werk je eigenlijk met die coordinates ?
Grtz
EDIT: Grijze figuurtje is klaar
heb het design gesliced met de inhoud erbij , en heb de inhoud foto gebruikt als background voor het divje en de tekst met padding wat naar onder gezet en het is perfect nu Alleen nog de button overs ...En dat moet met hovers ?
Laatst bewerkt:
Goeroeboeroe
Terugkerende gebruiker
- Lid geworden
- 3 mei 2007
- Berichten
- 1.408
Nou, dat gaat lekker, zo te zien. Toch de beste manier van leren voor de meeste mensen: gewoon lekker mee spelen.
Nu doet zich alleen 'n probleem voor. Je wilt 'n buttonover. Ik neem aan dat je bedoelt dat de buttons moeten veranderen als je er overheen hovert.
Dat is met 'n imagemap haast onmogelijk voor elkaar te krijgen. Een van de redenen dat ik persoonlijk niet zo heel wild ben van 'n imagemap.
Om die hover voor elkaar te krijgen, kan 't zijn dat je je knoppen ook apart neer moet zetten, elk in 'n <a>. Bij hoveren kun je dan gewoon de achtergrond veranderen of zo.
Ik vermoed dat dit http://css-voorbeelden.nl/menu/statisch/horizontaal/menu-008-home.html ongeveer is wat je bedoelt.
In dat geval is het beter om terug te vallen op de oorspronkelijke code van Naarling. Het menu in 'n <ul>. Elke <a> in 'n <li>. De knop komt dan als achtergrond-afbeelding in de <a>, en bij hoveren verander je gewoon de achtergrond-afbeelding. Bijkomend voordeel is dat 'n menu in 'n <ul> veel beter toegankelijk is voor spraakbrowsers e.d., en dus ook voor zoekmachines.
In de praktijk is dit iets lastiger dan 't hier staat.
Kun je 'n link geven naar waar je code online staat? Of in ieder geval alles nog 'ns hier neerzetten om te bekijken? Dan is 't iets makkelijker om concrete aanwijzingen te geven.
Nu doet zich alleen 'n probleem voor. Je wilt 'n buttonover. Ik neem aan dat je bedoelt dat de buttons moeten veranderen als je er overheen hovert.
Dat is met 'n imagemap haast onmogelijk voor elkaar te krijgen. Een van de redenen dat ik persoonlijk niet zo heel wild ben van 'n imagemap.
Om die hover voor elkaar te krijgen, kan 't zijn dat je je knoppen ook apart neer moet zetten, elk in 'n <a>. Bij hoveren kun je dan gewoon de achtergrond veranderen of zo.
Ik vermoed dat dit http://css-voorbeelden.nl/menu/statisch/horizontaal/menu-008-home.html ongeveer is wat je bedoelt.
In dat geval is het beter om terug te vallen op de oorspronkelijke code van Naarling. Het menu in 'n <ul>. Elke <a> in 'n <li>. De knop komt dan als achtergrond-afbeelding in de <a>, en bij hoveren verander je gewoon de achtergrond-afbeelding. Bijkomend voordeel is dat 'n menu in 'n <ul> veel beter toegankelijk is voor spraakbrowsers e.d., en dus ook voor zoekmachines.
In de praktijk is dit iets lastiger dan 't hier staat.
Kun je 'n link geven naar waar je code online staat? Of in ieder geval alles nog 'ns hier neerzetten om te bekijken? Dan is 't iets makkelijker om concrete aanwijzingen te geven.
Dat is inderdaad wat ik bedoel.
http://droogkuis-castermans.be/nieuw/index.html
En moet ik de buttons dan allemaal apart slicen of hoe begin ik daar net aan?
http://droogkuis-castermans.be/nieuw/index.html
En moet ik de buttons dan allemaal apart slicen of hoe begin ik daar net aan?
Goeroeboeroe
Terugkerende gebruiker
- Lid geworden
- 3 mei 2007
- Berichten
- 1.408
Je moet de afbeelding in de header kleiner maken. De knoppen moeten daar verdwijnen. Als je de code van flitsflitslfits hebt aangehouden, moet dat dus weg bij header.gif. (Ook de hoogte daar aanpassen.)
De hele imagemap verdwijnt, want daar werkt hoveren niet goed.
Dan komt er onder de kop 'n nieuwe ul#menu. Naarling had 'n div#menu, maar 'n ul#menu kan ook, de div is niet echt nodig.
In die ul komen je knoppen te staan. Je moet elke knop apart uitsnijden. Een knop voor de 'normale' toestand, en 'n knop voor de hover-toestand. Die knoppen moeten EXACT even groot zijn. Als je 'n andere grootte wilt bij de knop als je erover hovert, kan dat ook, maar dan moet de code anders.
Je moet waarschijnlijk ook 'n klein stukje grijze achtergrond meenemen, want de knop moet nou eenmaal rechthoekig zijn.
De achtergrond van de ul geef je de gewone achtergrondkleur. In de ul komt 'n <li>, eentje voor elke link. Die <li>'s float je naar links, anders komen ze onder elkaar te staan. De <li>'s geef je 'n breedte zodat ze goed verdeeld over de menubalk staan.
In elke <li> komt nu 'n link <a> te staan. En de knop zonder hoveren:
De maten voor de knop zijn waarschijnlijk niet helemaal goed. En elke knop heeft dus 'n eigen maat nodig. De title en alt zijn belangrijk voor spraakbrowsers e.d. (en dus ook voor zoekmachines).
De onderstaande maten zullen niet helemaal knoppen, dat is sleutelen. De html wordt dan ongeveer zo:
En de bijbehorende css:
De hele imagemap verdwijnt, want daar werkt hoveren niet goed.
Dan komt er onder de kop 'n nieuwe ul#menu. Naarling had 'n div#menu, maar 'n ul#menu kan ook, de div is niet echt nodig.
In die ul komen je knoppen te staan. Je moet elke knop apart uitsnijden. Een knop voor de 'normale' toestand, en 'n knop voor de hover-toestand. Die knoppen moeten EXACT even groot zijn. Als je 'n andere grootte wilt bij de knop als je erover hovert, kan dat ook, maar dan moet de code anders.
Je moet waarschijnlijk ook 'n klein stukje grijze achtergrond meenemen, want de knop moet nou eenmaal rechthoekig zijn.
De achtergrond van de ul geef je de gewone achtergrondkleur. In de ul komt 'n <li>, eentje voor elke link. Die <li>'s float je naar links, anders komen ze onder elkaar te staan. De <li>'s geef je 'n breedte zodat ze goed verdeeld over de menubalk staan.
In elke <li> komt nu 'n link <a> te staan. En de knop zonder hoveren:
HTML:
<li>
<a id="info" href="info.html" title="Meer info"><img src="info.jpg" alt="Meer info" width="86" height="50"></a>
</li>De onderstaande maten zullen niet helemaal knoppen, dat is sleutelen. De html wordt dan ongeveer zo:
HTML:
<ul id="menu">
<li>
<a id="info" href="info.html" title="Meer info"><img src="info.jpg.jpg" alt="Meer info" width="86" height="50"></a>
</li>
<li>
<a id=diensten" href="diensten.html" title="Diensten"><img src="diensten.jpg" alt="Diensten" width="160" height="50"></a>
</li>
<!-- nog drie lijst-ingangen -->
</ul>En de bijbehorende css:
Code:
ul#menu {
margin: 0; /* vanwege verschillen tussen browsers */
padding: 0 105px; /* rechts en links van de knoppen ruimte */
list-style-type: none;
background: #e5e5e5;
}
ul#menu li {
float: left; /* Anders komen ze onder elkaar te staan en niet naast elkaar */
width: 156px; /* moet ongeveer de ul vullen, samen met de padding bij de ul */
text-align: center; /* knoppen in het midden van de <li> zetten */
}
a#info { /* Elke knop heeft 'n eigen id, anders werkt 't niet */
display: inline-block; /* Nu kan ik breedte en zo gebruiken, maar ook text-align van de <li> werkt nog */
width: 86px; /* breedte van info.jpg */
height: : 50px; /* hoogte van info.jpg */
}
/* Andere knoppen net zo, maar met andere maten en id */
ul#menu img {
border: 0; /* tegen de foeilelijke blauwe border van 'n <img> in 'n <a> */
}
#menu a:hover img { /* Dit is alleen nodig als de knoppen die bij hoveren */
display: none; /* verschijnen niet perfect de originele knoppen bedekken */
}
#menu a#info:hover {
background: url(info-hover.jpg); /* Omdat de <a> 'n hoogte en breedte heeft, kan ik 'n achtergrond-afbeelding gebruiken */
}
Laatst bewerkt:
Goeroeboeroe
Terugkerende gebruiker
- Lid geworden
- 3 mei 2007
- Berichten
- 1.408
Ja, precies. De balk met de knoppen uit de header.gif. En dan alle knoppen los van elkaar maken en in hun eigen 'hok' (<img>) stoppen.
Als je begint met sites is iets wat tamelijk lastig is het loslaten van papieren ontwerpen. Als je 'n ontwerp maakt op papier, is dat af. De lezer kan er niets meer aan veranderen.
Maar die onhebbelijke bezoekers van je site hebben allemaal andere maten schermen, toolbars, favorieten/bookmarks openstaan, andere lettergroottes, zoomen in en uit, en wie weet wat voor vreselijks allemaal nog meer.
Na de revolutie gaan we dat allemaal ongetwijfeld verbieden, maar tot die tijd moet je dus zo flexibel mogelijk ontwerpen.
Door die knoppen van elkaar los te knippen, is het veel makkelijker voor al die verschillende maten te werken. Bovendien laadt je site veel sneller dan met 'n joeken van 'n achtergrond-afbeelding, of die nu gesliced is of niet.
Als je begint met sites is iets wat tamelijk lastig is het loslaten van papieren ontwerpen. Als je 'n ontwerp maakt op papier, is dat af. De lezer kan er niets meer aan veranderen.
Maar die onhebbelijke bezoekers van je site hebben allemaal andere maten schermen, toolbars, favorieten/bookmarks openstaan, andere lettergroottes, zoomen in en uit, en wie weet wat voor vreselijks allemaal nog meer.
Na de revolutie gaan we dat allemaal ongetwijfeld verbieden, maar tot die tijd moet je dus zo flexibel mogelijk ontwerpen.
Door die knoppen van elkaar los te knippen, is het veel makkelijker voor al die verschillende maten te werken. Bovendien laadt je site veel sneller dan met 'n joeken van 'n achtergrond-afbeelding, of die nu gesliced is of niet.
Goeroeboeroe
Terugkerende gebruiker
- Lid geworden
- 3 mei 2007
- Berichten
- 1.408
Ja. Als je de menubalk van de gif afsloopt, wordt hij lager, dus dan moet je de hoogte aanpassen aan de hoogte van de kleinere header.gif.
Code:
<map name="headermap" id="headermap">
<area shape="rect" coords="734,176,891,236" href="contact.html" alt="contact" title="contact" />
<area shape="rect" coords="582,176,701,236" href="route.html" alt="route" title="route" />
<area shape="rect" coords="420,176,545,236" href="prijslijst.html" alt="prijslijst" title="prijslijst" />
<area shape="rect" coords="231,176,388,236" href="diensten.html" alt="diensten" title="diensten" />
<area shape="rect" coords="110,176,198,236" href="index.html" alt="info" title="info" />
</map>en als ik het snap moet ik dat stuk vervangen met jou code?
Goeroeboeroe
Terugkerende gebruiker
- Lid geworden
- 3 mei 2007
- Berichten
- 1.408
Ja. Alleen moet je die code wel nog wat aanpassen natuurlijk, want jij hebt meer knoppen en zo en ik weet ook niet hoe je pagina's heten, dat soort dingen. En de maten van de afbeeldingen en de <a>'s moet je ook even precies opgeven, ik heb maar geraden.
Maar volgens mij moet je er gewoon lekker mee aan de slag gaan. Aan je vragen te zien snap je gewoon de hoofdlijn van wat je moet doen. Dan gaan er ongetwijfeld dingen mis, maar dan zien we je wel weer komen.
Succes!
Edit: dat is trouwens geen slechte code of zo, maar voor 'n andere knop via hoveren gewoon niet geschikt.
Maar volgens mij moet je er gewoon lekker mee aan de slag gaan. Aan je vragen te zien snap je gewoon de hoofdlijn van wat je moet doen. Dan gaan er ongetwijfeld dingen mis, maar dan zien we je wel weer komen.
Succes!
Edit: dat is trouwens geen slechte code of zo, maar voor 'n andere knop via hoveren gewoon niet geschikt.
Ik heb er al mee gespeeld en dit is het resultaat al
http://droogkuis-castermans.be/nieuw/
Alleen werkt de hover niet goed & kan ik de knoppen niet naar boven krijgen , heb al met de padding enz zitte spelen ..
http://droogkuis-castermans.be/nieuw/
Alleen werkt de hover niet goed & kan ik de knoppen niet naar boven krijgen , heb al met de padding enz zitte spelen ..
Goeroeboeroe
Terugkerende gebruiker
- Lid geworden
- 3 mei 2007
- Berichten
- 1.408
Wat je regelmatig moet doen (eigenlijk na élke verandering) is je pagina valideren. Dat kun je voor html doen op http://validator.w3.org/
en voor css op http://jigsaw.w3.org/css-validator/
(Als je in Firefox ontwikkelt, zijn er hele handige extensies die dat (vrijwel) automatisch doen. Laat maar even weten of je daar belangstelling voor hebt.)
Die validators controleren op fouten, ongelooflijk handig en veel beter dan dat mensen dat kunnen.
Als je valideert, zie je 32 fouten in je html en 2 in je css.
Meestal valt dat aantal behoorlijk mee, omdat de ene fout de andere kan oproepen. Daarom moet je ook altijd van boven naar beneden je fouten eruit halen. Het is geen uitzondering als in één keer 495 van 500 fouten verdwijnen als je de eerste fout herstelt. (Computers zijn nou eenmaal vrij dom.)
Eerst moeten die fouten eruit, want die kunnen de wildste problemen veroorzaken. Als 't dan nog niet goed werkt, wordt 't tijd verder te kijken.
In je css staat twee keer 'n : achter elkaar. bij a#info height. Dat is nou typisch zo'n fout die 'n mens niet ziet en de validator wel.
Dan de html.
'n Aantal fouten is omdat je de <img> niet afsluit met />. Omdat jij 'n doctype heb van xhtml, moet je vrijwel alles afsluiten met 'n /
Maar ik zou je aanraden 'n doctype van html te nemen. 't Leek eerst dat html 'n doodlopende weg zou worden, maar inmiddels heeft juist xhtml geen enkel nut meer voor 'n website, en dat zal nog minstens jaren zo blijven.
Veel belangrijker is dat je 'n 'strict' doctype neemt en geen transitional. Transitional was voor sites die al bestonden en die verouderde tags (al tien jaar afgeraden) gebruikten. Jij gebruikt die niet, en om te voorkomen dat je ze gaat gebruiken is strict beter.
Als je 'n strict doctype gebruikt, kun je ook volkomen probleemloos alle leuke nieuwe dingen van html5, dat momenteel wordt ingevoerd, gaan gebruiken, als je wilt.
Als je dit gaat gebruiken, ben je al 'n paar fouten kwijt.
In je commentaar staan dingen als <li> en andere tags. Ook al is het commentaar, er mag geen tag in staan. De validator raakt hier volledig van over z'n toeren, en mogelijk browsers ook. Je moet de < weghalen, of vervangen door < (kleiner dan), of door 'n ander teken dat voor jou duidelijk is, als 't maar geen < is.
Met 'n beetje geluk werkt 't (beter) als die fouten eruit zijn.
en voor css op http://jigsaw.w3.org/css-validator/
(Als je in Firefox ontwikkelt, zijn er hele handige extensies die dat (vrijwel) automatisch doen. Laat maar even weten of je daar belangstelling voor hebt.)
Die validators controleren op fouten, ongelooflijk handig en veel beter dan dat mensen dat kunnen.
Als je valideert, zie je 32 fouten in je html en 2 in je css.
Meestal valt dat aantal behoorlijk mee, omdat de ene fout de andere kan oproepen. Daarom moet je ook altijd van boven naar beneden je fouten eruit halen. Het is geen uitzondering als in één keer 495 van 500 fouten verdwijnen als je de eerste fout herstelt. (Computers zijn nou eenmaal vrij dom.)
Eerst moeten die fouten eruit, want die kunnen de wildste problemen veroorzaken. Als 't dan nog niet goed werkt, wordt 't tijd verder te kijken.
In je css staat twee keer 'n : achter elkaar. bij a#info height. Dat is nou typisch zo'n fout die 'n mens niet ziet en de validator wel.
Dan de html.
'n Aantal fouten is omdat je de <img> niet afsluit met />. Omdat jij 'n doctype heb van xhtml, moet je vrijwel alles afsluiten met 'n /
Maar ik zou je aanraden 'n doctype van html te nemen. 't Leek eerst dat html 'n doodlopende weg zou worden, maar inmiddels heeft juist xhtml geen enkel nut meer voor 'n website, en dat zal nog minstens jaren zo blijven.
Veel belangrijker is dat je 'n 'strict' doctype neemt en geen transitional. Transitional was voor sites die al bestonden en die verouderde tags (al tien jaar afgeraden) gebruikten. Jij gebruikt die niet, en om te voorkomen dat je ze gaat gebruiken is strict beter.
Als je 'n strict doctype gebruikt, kun je ook volkomen probleemloos alle leuke nieuwe dingen van html5, dat momenteel wordt ingevoerd, gaan gebruiken, als je wilt.
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">In je commentaar staan dingen als <li> en andere tags. Ook al is het commentaar, er mag geen tag in staan. De validator raakt hier volledig van over z'n toeren, en mogelijk browsers ook. Je moet de < weghalen, of vervangen door < (kleiner dan), of door 'n ander teken dat voor jou duidelijk is, als 't maar geen < is.
Met 'n beetje geluk werkt 't (beter) als die fouten eruit zijn.
Paar errors die ik niet weet op te lossen:
Onbekend pseudo-element of pseudo-class :info
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
moet ik daar gewoon die extra / weg doen?
Hier net het zelfde
<img src="info.jpg" alt="Meer info" width="86" height="50" />
hij zegt dat die / weg moet?
En zelfs als al de errors zijn opgelost , ik weet nog altijd niet hoe ik de hovers moet fixen & de buttons naar boven moet zetten ..
EDIT: ik heb over die / weg gedaan en nu geeft hij nog geen enkele error meer ..
Onbekend pseudo-element of pseudo-class :info
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
moet ik daar gewoon die extra / weg doen?
Hier net het zelfde
<img src="info.jpg" alt="Meer info" width="86" height="50" />
hij zegt dat die / weg moet?
En zelfs als al de errors zijn opgelost , ik weet nog altijd niet hoe ik de hovers moet fixen & de buttons naar boven moet zetten ..
EDIT: ik heb over die / weg gedaan en nu geeft hij nog geen enkele error meer ..
Laatst bewerkt:
Goeroeboeroe kan het dat er iets mis is met de css code?
als ik onder jou css code nog dit erbij voeg
Dan zie ik de hover wel verschijnen, alleen niet met goede maten..
Dus is er misschien iets fouts aan jou code ?
als ik onder jou css code nog dit erbij voeg
Code:
a#info:hover img {
display:none;
}
a#info:hover {
background: url(info-hover.jpg);
height: 50px;
width: 86px;
}Dan zie ik de hover wel verschijnen, alleen niet met goede maten..
Dus is er misschien iets fouts aan jou code ?
Goeroeboeroe
Terugkerende gebruiker
- Lid geworden
- 3 mei 2007
- Berichten
- 1.408
Hoho, aan mijn code is niets fout. Ik maak maar één fout per jaar en die heb ik al 's ochtends vroeg op Nieuwjaarsdag gemaakt, dus ik kan geen fouten meer maken tot in 2011.
Serieus. Ik heb alles even opnieuw van je site gedownload, dan weet ik zeker dat we 't over 't zelfde hebben. En bij mij werkt het, na 'n aantal foutjes eruit gehaald te hebben. Ook nog wat anderen dingetjes, in willekeurige volgorde.
* De regel bovenaan met charset utf-8 moet de EERSTE regel in de <head> zijn, anders werkt hij niet in sommige browsers. Dus nog voor de <title>
* In je css staat 'n fout. Je hebt
#menu a:info:hover {
Dat moet zijn:
#menu a#info:hover (zonder spaties rondom de : )
Bij a:info meldt de validator dat hij deze pseudo-selector niet kent. Bij a#info is het de <a> met id="info".
css kun je valideren op http://jigsaw.w3.org/css-validator/ Uiterst handig voor dit soort typefouten die je heel snel over het hoofd ziet.
Op deze manier kán de hover dus niet werken.
* Je moet de maten van de afbeelding aanpassen, Jouw info is 93 x 64. Bij img info.jpg staan nog 86 en 50 (ik had maar wat geraden).
* Die maat moet je dan ook aanpassen bij a#info in je css. Omdat de vervangende info-hover.jpg een achtergrond-afbeelding is, vult hij alleen maar de achtergrond van de <a>. Je moet de <a> dus de juiste maten geven.
Het stukje met de css waar de wijzigingen in komen:
a#info {
display: inline-block;
width: 93px; height: 64px; /* de maat van info.jpg en info-hover.jpg */
}
ul#menu img {border: 0;} /* kan vervallen, omdat dit al bij #kop img staat */
#menu a:hover img { /* moet blijven staan, anders 'wint' de <img> van de achtergrond-afbeelding */
display: none;
}
#menu a#info:hover { /* Hier zat de typo in */
background: url(info-hover.jpg);
}
Edit: ik heb met m'n neus gekeken. Dat stond inderdaad fout bij mij, je hebt gelijke en jouw correctie is goed. Nou heb ik 'n rotjaar, want nu heb ik m'n fout voor 2011 ook al gemaakt
Overigens was je dus goed op weg!
Edit edit: als je bij ul#menu de padding op 0 zet en ul#menu 70px hoog maakt, staan de knoppen goed. (Of vrijwel goed, misschien wil jij 't net 'n px hoger of lager).
De 30px padding die er nu staat duwt de knoppen 30 px omlaag. En omdat de ul geen hoogte heeft, passen ze zelfs normaal al niet, laat staan als je ze nog 'ns omlaag duwt.
De css bij ul#menu wordt dan:
Serieus. Ik heb alles even opnieuw van je site gedownload, dan weet ik zeker dat we 't over 't zelfde hebben. En bij mij werkt het, na 'n aantal foutjes eruit gehaald te hebben. Ook nog wat anderen dingetjes, in willekeurige volgorde.
* De regel bovenaan met charset utf-8 moet de EERSTE regel in de <head> zijn, anders werkt hij niet in sommige browsers. Dus nog voor de <title>
* In je css staat 'n fout. Je hebt
#menu a:info:hover {
Dat moet zijn:
#menu a#info:hover (zonder spaties rondom de : )
Bij a:info meldt de validator dat hij deze pseudo-selector niet kent. Bij a#info is het de <a> met id="info".
css kun je valideren op http://jigsaw.w3.org/css-validator/ Uiterst handig voor dit soort typefouten die je heel snel over het hoofd ziet.
Op deze manier kán de hover dus niet werken.
* Je moet de maten van de afbeelding aanpassen, Jouw info is 93 x 64. Bij img info.jpg staan nog 86 en 50 (ik had maar wat geraden).
* Die maat moet je dan ook aanpassen bij a#info in je css. Omdat de vervangende info-hover.jpg een achtergrond-afbeelding is, vult hij alleen maar de achtergrond van de <a>. Je moet de <a> dus de juiste maten geven.
Het stukje met de css waar de wijzigingen in komen:
a#info {
display: inline-block;
width: 93px; height: 64px; /* de maat van info.jpg en info-hover.jpg */
}
ul#menu img {border: 0;} /* kan vervallen, omdat dit al bij #kop img staat */
#menu a:hover img { /* moet blijven staan, anders 'wint' de <img> van de achtergrond-afbeelding */
display: none;
}
#menu a#info:hover { /* Hier zat de typo in */
background: url(info-hover.jpg);
}
Edit: ik heb met m'n neus gekeken. Dat stond inderdaad fout bij mij, je hebt gelijke en jouw correctie is goed. Nou heb ik 'n rotjaar, want nu heb ik m'n fout voor 2011 ook al gemaakt
Overigens was je dus goed op weg!
Edit edit: als je bij ul#menu de padding op 0 zet en ul#menu 70px hoog maakt, staan de knoppen goed. (Of vrijwel goed, misschien wil jij 't net 'n px hoger of lager).
De 30px padding die er nu staat duwt de knoppen 30 px omlaag. En omdat de ul geen hoogte heeft, passen ze zelfs normaal al niet, laat staan als je ze nog 'ns omlaag duwt.
De css bij ul#menu wordt dan:
Code:
ul#menu {
margin: 0;
padding: 0;
list-style-type: none;
background: #e5e5e5;
height: 70px;
}
Laatst bewerkt:
Goeroeboeroe
Terugkerende gebruiker
- Lid geworden
- 3 mei 2007
- Berichten
- 1.408
Alle buttons moeten even hoog worden, anders wordt het niet mooi. De breedte hangt af van wat erin staat. Dat is gewoon handmatig uitproberen. Daarbij moet de ...-hover knop dus EXACT even groot zijn als de originele knop.
Het op de juiste plaats zetten van de knoppen is dan de volgende stap. Het kan best zijn dat het niet mooi is als ze allemaal precies in het midden van 'n <li> staan. Meetkundig gezien is dat dan wel 't midden, maar voor 't oog niet. Zien we dan wel.
't Belangrijkste is dat ze even hoog zijn, anders krijg je 'n schots en scheef uiterlijk.
Ik zou, als ik jou was, steeds eerst even 'n stuk in orde maken voor je aan 't volgende begint. En ook in verschillende browsers testen.
Die marges die te groot zijn rondom de menubalk is niet zo'n probleem. Maar als je aan twee dingen tegelijk gaat werken, weet je vaak niet waardoor iets misgaat (want er gaat altijd gegarandeerd heel veel mis...)
Regelmatig valideren van html én css is daarom ook absoluut nodig. (Als je in Firefox ontwikkelt, kan dat trouwens heel simpel. Laat maar even weten als je wilt weten hoe.)
En in verschillende browsers testen.
De marge aan de onderkant van de menubalk stel je in met de margin-top bij #inhoud.
De marge aan de bovenkant is 'n ander verhaal. 'n <img> zoals header.gif is 'n inline-element, net als gewone tekst: het komt niet op 'n nieuwe regel te staan, maar gewoon in de tekst (als je niets bijzonders doet). Als je onder de letters in 'n regel 'n lijntje trekt, steken daaronder uit de p, q, e.d. Daar is die ruimte voor die je ziet.
Als je bij div#kop line-height: 0; opgeeft, is de ruimte weg. Met margin-bottom stel je 'm dan weer in op de hoogte die je wilt hebben.
Maar het is beter om 't stap voor stap te doen. Dat laatste geeft bijvoorbeeld 'n afwijking in IE 6. En dan ga je daarvoor al corrigeren terwijl je nog met de knoppen bezig bent.
O, en de usemap staat nog in je html. Die kan nu weg.
Het op de juiste plaats zetten van de knoppen is dan de volgende stap. Het kan best zijn dat het niet mooi is als ze allemaal precies in het midden van 'n <li> staan. Meetkundig gezien is dat dan wel 't midden, maar voor 't oog niet. Zien we dan wel.
't Belangrijkste is dat ze even hoog zijn, anders krijg je 'n schots en scheef uiterlijk.
Ik zou, als ik jou was, steeds eerst even 'n stuk in orde maken voor je aan 't volgende begint. En ook in verschillende browsers testen.
Die marges die te groot zijn rondom de menubalk is niet zo'n probleem. Maar als je aan twee dingen tegelijk gaat werken, weet je vaak niet waardoor iets misgaat (want er gaat altijd gegarandeerd heel veel mis...)
Regelmatig valideren van html én css is daarom ook absoluut nodig. (Als je in Firefox ontwikkelt, kan dat trouwens heel simpel. Laat maar even weten als je wilt weten hoe.)
En in verschillende browsers testen.
De marge aan de onderkant van de menubalk stel je in met de margin-top bij #inhoud.
De marge aan de bovenkant is 'n ander verhaal. 'n <img> zoals header.gif is 'n inline-element, net als gewone tekst: het komt niet op 'n nieuwe regel te staan, maar gewoon in de tekst (als je niets bijzonders doet). Als je onder de letters in 'n regel 'n lijntje trekt, steken daaronder uit de p, q, e.d. Daar is die ruimte voor die je ziet.
Als je bij div#kop line-height: 0; opgeeft, is de ruimte weg. Met margin-bottom stel je 'm dan weer in op de hoogte die je wilt hebben.
Maar het is beter om 't stap voor stap te doen. Dat laatste geeft bijvoorbeeld 'n afwijking in IE 6. En dan ga je daarvoor al corrigeren terwijl je nog met de knoppen bezig bent.
O, en de usemap staat nog in je html. Die kan nu weg.
Laatst bewerkt:
- Status
