Ik wil een mooie balk in mijn site

Status
Niet open voor verdere reacties.
mathijsf

mathijsf

Gebruiker
Lid geworden
12 dec 2010
Berichten
99
Ik wil een mooie balk in mijn site. Ik weet niet precies hoe het heet.

voorbeeld www.maftopia.nl.
Ik bedoel de balk. Waar "crewpagina", "statistieken", "inloggen" staat.

Graag uitgebreide uitleg. En als er namen in moeten staan. Zet dat er dan duidelijk in.
 
Heb je zelf al gezocht op google...
Want er staan genoeg tutorials op het internet hoe je ze moet maken.
De gene die ik gebruikt heb moet ik even opzoeken..
 
Wil je die dan even zeggen.

Ik heb op google gezocht, kan niks vinden.

Geef anders een goede zoeknaam op.
 
Welke handleiding dan?

Maar ik bedoel niet zoiets(als je handleiding 3 bedoeld)

Ik wil er net zo als op http://maftopia.nl.
Met de muis erover heen gaan. En dan krijg je een net iets ander kleurtje. En ik wil ook weten hoe je zorgt dat het uitklapt.
 
Ik weet niet meer welke van de handleiding het was, is ook weer jaar of 2 geleden dat ik die gebruikt hebt. Maar het staat er tussen.
 
Globale handleiding om zoiets als de navigatiebalk van maftopia.nl te maken:
  • Maak een <div> aan met de hoogte van de balk plus iets meer voor het aanwijsdriehoekje.
  • Maak een image met de kleur en de hoogte van de balk, bv. 100px breed, en plaats die als achtergrondfiguur met een horizontale herhaling (repeat-x) in deze <div>.
  • Maak de links aan met de hoogte van balk+driehoekje, en een bepaalde breedte.
  • Geef de links een {display:block;} mee.
  • Maak de afbeelding met het driehoekje voor als je wilt hoveren: met de breedte en de hoogte van de link.
  • Laat de afbeelding verschijnen bij hover door deze als achtergrond-afbeelding op te geven met #menu a:hover, #menu :focus { background: url(images/menu-bg.gif);}.
  • Op dezelfde manier kan je de kleur van de link met de color-eigenschap bij de hoverstatus in de css zetten.
Zo zou ie moeten werken. :)

Met vriendelijke groet,
CSShunter
 
Nop, jij gaat het zelf doen! :)
De gebruiksaanwijzing staat hier al boven. Als je ergens vastloopt, kunnen we verder zien.
Maar wat heb je al?
  • Svp een link naar een testpagina zoals ie er nu uitziet.
  • Svp een link naar de afbeelding van hoe jouw balk er uit moet komen te zien.
  • En svp een link naar de afbeelding van hoe het hoveren over een link op de balk er uit moet komen te zien (het plaatje met het driehoekje of iets dergelijks).
Met vriendelijke groet,
CSShunter
 
O. :rolleyes:
Nu snap ik 'm niet meer.
  • In je beginvraag #1 vroeg je hoe je een menu als van www.maftopia.nl moet maken: d.w.z. met de muis er overheen gaan en dan een plaatje met driehoekje eronder zien. Daarop heb ik geantwoord in mijn tips van nummer #8.
  • Maar nu vraag je hoe je een klikbaar uitklapmenu-menu moet maken zoals in www.pro-light.nl. Dat is iets heel anders.
Wat moet het nu precies worden?

Met vriendelijke groet,
CSShunter
____________
PS:
De pagina www.adverteren.webs.com/midden%20home.html, waar de balk in moet komen, is volgens de html-validator ongeldige html, en heeft in de gauwigheid 24 Errors, 4 warnings.
Het is denk ik wel handig om eerst die fouten er uit te halen, voordat je verder gaat met de balk.
 
Die fouten,

dat kan komen. Omdat ik er nu een forum in aan het zetten ben. + ik was net bezig met een inlogscherm.

Hoe kan het eigenlijk dat ik zoveel warnings en errors heb.(nu 8minder)
 
Laatst bewerkt:
(...) Ik wil die van Maftopia.nl
Klik om te vergroten...
O.k., dan gaan we verder waar we gebleven waren.

Hoe kan het eigenlijk dat ik zoveel warnings en errors heb.(nu 8minder)
Klik om te vergroten...
Op dit moment (18-12, 0:15) zitten er in midden%20home.html nog steeds 29 fouten, zegt de validator. Waarom? Nou, omdat er dingen niet in staan, die er wel in horen; omdat er dingen wel in staan die er niet in horen; en er dingen zijn die er verkeerd in staan.
Paar voorbeelden:
  • Er zit geen DOCtype in, maar dat moet wel. Zie de link hieronder in m'n handtekening voor het ophalen van een goed DOCtype. Ik zou HTML4.01 nemen.
  • Er zit een tag <center> in, maar dat is een element van vóór december ... 1999, en sindsdien verboden html.
  • <body bgcolor="ffffff"> mist in elk geval de # bij de kleurcode: <body bgcolor="#ffffff">. Maar "bgcolor" is ook een afgekeurde eigenschap, en mag niet meer gebruikt worden. Dit kan beter in de css; maar hier kan het net zo goed weggelaten worden, want het is wit, en dat is het standaard al.
  • Er ontbreken </center>'s, of ze staan op de verkeerde plaats. Maar omdat <center> niet mag, hoeft dit niet gecorrigeerd te worden: alles van <center> en </center> kan er gewoon uit. Centreren kan/moet met css geregeld worden.
Het kan zijn, dat je dit soort dingen overgenomen hebt uit een of andere handleiding, of dat een web-editor programma het er in gezet heeft. Maar dan is dat geen goede editor of geen goed programma!
Daarin wordt de samenhang van html en css heel goed uitgelegd, en de belangrijkste richtlijnen die je zeker moet volgen als je een site opzet.

O ja, als je al die <center>'s er uit gehaald hebt, zal de html-validator een stuk toeschietelijker zijn. Vaak veroorzaakt de ene fout ook een fout op een andere plaats, en dat is hier het geval.
Soms ben je met één fout-correctie dan ook meteen 4 of meer andere fouten kwijt! :)
Gewoon een kwestie van geduldig van boven naar beneden de fouten wegwerken. In het commentaar van de html-validator staat altijd wat er aan de hand is (alleen een beetje in jargon, dan moet je maar even vragen).

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Het driehoekje hoeft niet.

Dan is het wat makkelijker of niet.
 
Mathijs als je de afbeelding hover niet kan maken met css, is er natuurlijk altijd nog een oplossing voor javascript. Mijn vraag is alleen waarom je de stappen niet hebt gevolgd die CSShunter je hebt gegeven eerder op deze topic.
csshunter
Globale handleiding om zoiets als de navigatiebalk van maftopia.nl te maken:
Maak een <div> aan met de hoogte van de balk plus iets meer voor het aanwijsdriehoekje.
Maak een image met de kleur en de hoogte van de balk, bv. 100px breed, en plaats die als achtergrondfiguur met een horizontale herhaling (repeat-x) in deze <div>.
Maak de links aan met de hoogte van balk+driehoekje, en een bepaalde breedte.
Geef de links een {display:block;} mee.
Maak de afbeelding met het driehoekje voor als je wilt hoveren: met de breedte en de hoogte van de link.
Laat de afbeelding verschijnen bij hover door deze als achtergrond-afbeelding op te geven met #menu a:hover, #menu :focus { background: url(images/menu-bg.gif);}.
Op dezelfde manier kan je de kleur van de link met de color-eigenschap bij de hoverstatus in de css zetten.
Klik om te vergroten...


Als je eventueel met dreamweaver werkt, kun je ook de roll-over image gebruiken en deze op de goede plaats te zetten met natuurlijk css (list-style ).
 
Ik krijg het hem toch niet voor elkaar.

Ik heb ook nog nooit met css gewerkt.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan