Menu werkt niet

[j-a]

Ik heb een website gemaakt, maar ik wil het menu nog even wat aanpassen. Nu is het gewoon een lijst met links, ik wil graag dat het een menu wordt met wat meer interactie.

Aan de hand van Website maken voor Dummies heb ik met CoffeeCup een menu gemaakt. Dat gaat allemaal goed, maar als ik het menu op de website wil integreren lukt dat niet. Ik krijg de tekst wel te zien, maar geen knoppen. Ook via de website van CoffeeCup heb ik het geprobeerd, maar het wil niet. Persoonlijk denk ik dat er iets misgaat met het aanspreken van het .css-bestand.

Ik heb het menu staan op www.geitefok.com/test.html Zo ziet het eruit, terwijl er knoppen omheen zouden moeten zitten. Het vreemde is overigens dat als ik in CoffeeCup op 'preview' klik ik de knippen ook al niet te zien krijg, maar alleen een lijst, exact zoals het nu op de website staat.

 

[Solaris]

Nou ik zie nergens waar je je stylesheet hebt...

Kijk hier eens: http://css.maxdesign.com.au/listamatic/index.htm

of zelfs hier: http://www.dynamicdrive.com/style/csslibrary/category/C1/

 

[j-a]

De verwijzing naar het stylesheet staat boven de head. Ik meen dat dat de plaats is waar het hoort te staan. Ik zal het nog eens opnieuw proberen en dan exact kijken wat ik doe. In ieder geval bedankt voor het kijken. Ook de links zal ik zo wat nader bekijken.

 

[j-a]

Via één van uw links kwam ik op dit menu uit: http://www.dynamicdrive.com/style/csslibrary/item/nested_side_bar_menu/

Die zou ik graag op mijn website willen hebben. Er staan twee codes. Eén CSS-bestand en een HTML-code. Ik heb een CSS-bestand aangemaakt met kladblok en deze menu.css genoemd. Daarnaast heb ik de HTML-code in mijn pagina geplakt op de plaats waar ik het menu wil hebben. Ik begrijp dat dit onmogelijk goed kan gaan, omdat de CSS-code niet aan wordt geroepen vanuit de HTML-code. Wat moet ik doen om het menu draaiende te krijgen?

EDIT: Het helpt misschien om te zeggen dat ik me pas sinds vier weken verdiep in HTML en CSS en dat ik daar dan ook bitter weinig verstand van heb. De website die ik gemaakt heb is met veel pijn en moeite uit mijn vingers gekomen, met de hulp van dit forum en het forum van Kompozer ben ik tot dit resultaat gekomen.

 

[j-a]

Nou, ik heb het voor elkaar gekregen! Ik kwam het programma Wonder Web Ware CSS Menu Generator, een hele mond vol, tegen. Het menu werkt, behalve niet in IE... Daar verschijnt het menu achter de tekst van de centrale kolom. Nu heb ik al gezocht op internet, maar ik kan hier maar weinig goede informatie over vinden.

Daarnaast staan er voor de menuopties kleine witte blokjes. Ze verschijnen bij mij links van het linkermenu, als een soort van uitstulpsels. Ik zou die graag willen verwijderen, maar kan er maar niet achterkomen welke code die blokjes aanstuurt. Ik heb de CSS-code naar hier geupload.

 

[pum]

die witte blokjes krijg je omdat sommige html elementen standaard een waarde meekrijgen, voorbeelden zijn bijvoorbeeld:

<h1><h6> kopjes
<p></p> paragraaf
<ul><li></li></ul> lijsten
<img> afbeeldingen

zo krijgt een list standaard bullets mee, je kunt dit uitzetten door in je css bij de desbetreffende lijst list-style:none; neer te zetten.

ul li {
        list-style-type:square;
}

zorgt voor de blokjes.

Paar tips voor je css, ik zag dat je alle <h> tags apart opmaakt. elke<h> heeft dezelfde eigenschappen alleen de kleur is verschillend. je zou dit ook op deze manier op kunnen maken:

h1, h2, h3, h4, h5, h6{
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
font-style:normal;
}

h1, h3, h5 { color:#000000; }
h3, h6 { color:#666666; }
h4, { color:#FF6600; }

de komma zorgt er voor dat je meerdere elementen de zelfde stijl mee kunt geven.
door vervolgens dieper de defini�ren kun je deze stijl overrulen.

Met html css kun je gebruik maken van de DOM (document object model)
Door hier gebruik van te maken kun je stijlen overrulen en specifieker benaderen.

voorbeeld:

h1{
font-size:12px;
font-weight:bold;
color:000000;
}

geld voor alle <h1> tags op de gehele website. wil je nu alleen de kleur van de h tags in sidebar anders hebben kun je dat zo defini�ren

#sidebar h1{
color:e9e9e9;
}

dus hoe specifieker je definieert des te belangrijker de regel word. Dit is in het begin erg lastig te begrijpen maar door dit goed onder de knie te krijgen kun je hele schone css schrijven.

Probeer te kijken welke tags het meest voorkomen op je website (en geef deze de opmaak mee). Alles wat anders is kun je later specifieker defini�ren en opmaken.

wil je echt goed worden in html: ga dan eens kijken wat elk element inhoud.
- wat zijn block elementen
- wat zijn inline elementen
- welke standaard eigenschappen krijgt elk element mee
- hoe werkt de DOM
- wat doet een doctype

handige tools voor je html:
- Firebug (onmisbaar bij het bouwen van een website, en bughunting)
- w3 validator (http://validator.w3.org/)

hoop tekst, hoop dat je er iets aan hebt

 

[j-a]

Hartelijk dank voor de reactie. Het probleem met het menu had ik gelukkig al opgelost!

Betreffende het CSS-bestand. Dat zijn zeer handige tips inderdaad. Ik gebruik eigenlijk twee soorten koppen. Hoofdkoppen, bovenaan elke pagina, en subkoppen, die ik in lange verhalen gebruik. Het is mij gelukt dit nu aan te passen in het CSS-bestand. Als ik H1 krijg dan krijg ik nu exact dezelfde titel zoals ik die in html gemaakt had. Super! Alleen blijkt het wel wat lastig aan te passen in Kompozer, het programma dat ik gebruik. Dat heeft dan denk ik te maken omdat het om .php bestanden gaat.

Edit: Het werkt inderdaad in een HTML-bestand zonder het gebruik van PHP-include. Met PHP-include werkt het niet.

 

[pum]

klopt je kunt alleen de werking van php zien als je het plaats op een webserver (moet deze wel php ondersteunen), of gebruik maakt van wamp. de php includes werken niet als je het op je desktop hebt staan.

om lokaal te draaien op je computer zonder gebruik te maken van een webserver gebruik je gewoon wamp. (http://www.wampserver.com/en/)

 

[j-a]

Het is gelukt allemaal! De HTML-code ziet er nu een stuk overzichtelijker uit. Dank daarvoor!

Ik heb nog een klein vraagje. Niet betrekking op CSS, maar over de invulling van het menu. Ik heb namelijk een fotoalbum op mijn website, maar ik wil ook een pagina met video's erbij. Nu zou ik graag willen dat ik die twee zaken, fotoalbum en menu, onder één kopje kan zetten in het menu, waarna die twee koppen uit het menu schuiven (net zoals ik op het moment heb bij 'over ons'). Maar nu kan ik niet op een goede naam komen om dat samen te vatten. Ik zat aan 'media' te denken, maar dat dekt de lading niet goed. Lijkt net alsof het voor journalisten is en ik denk dat het voor bezoekers ook niet duidelijk is. Heeft iemand een idee?

 

[pum]

Beeld of media

 

[csshunter]

 

[pum]

:d

 

[j-a]

Ha, dat is ook een mooie ja. Het is nu toch maar 'media' geworden. Bedankt voor het meedenken allen.

 

[csshunter]

Oké. Maar nog ter overweging:
Bij een knop Media op een website denk ik altijd in eerste instantie:

• dat is zeker een pagina met krantenknipsels e.d. ("wij in de media"),
• of het is een pagina met persberichten (intussen verouderd, want de recente persberichten zullen onder de knop Nieuws staan),
• of het is een pagina waar journalisten uit de media terecht kunnen voor meer informatie,
• of het is een pagina met linkjes naar de "sociale media" waar de bewoners van de site ook actief op zijn (twitter, linkedin, facebook, hyves, enz.).

... en op die knop klik ik pas als ik alle andere knoppen op de site al gehad heb (als ik er dan nog ben).
Ik elk geval is het voor mij geen aandachtstrekker, en denk ik niet "Hé leuk, daar zullen hun kiekjes staan - gauw kijken".

Misschien toch "In beeld" of "Beeld & geluid" of gewoon "Foto / video"?

 

[pum]

ben het idd met css hunter eens als je het zo bekijkt kan media idd van alles zijn, misschien is (bekijk ons of in beeld) nog niet eens zo'n raar idee om te gebruiken

 

[j-a]

Dat was dus ook mijn eerste overweging. Media lijkt het, voor mij, net alsof het voor journalisten is. Maar toen het er eenmaal stond vond ik het wel kunnen. Na het lezen van uw reactie heb ik het toch nog gewijzigd (ik ben dus overgehaald ;-) ) in 'Beeld & Geluid'.

EDIT: Toch weer veranderd, ditmaal in 'In beeld'. Zo blijft het denk ik.