menu maken van afbeelding?

[djeric]

hallo.

ik wil een menu maken voor mijn website.

ik heb een beetje donkere oranje houten achtergrond van planken. en wil hier op een menu maken.

nu dacht ik aan een houten pijl met sneeuw.

maar hoe begin ik?

ik heb een plaatje gezien op internet:

https://www.google.nl/search?biw=1280&bih=658&tbm=isch&sa=1&q=wood+arrow+with+snow&oq=wood+arrow+with+snow&gs_l=img.3...366034.368108.0.368345.9.9.0.0.0.0.71.368.9.9.0....0...1c.1.29.img..9.0.0.CkcNds4URVc#facrc=_&imgdii=_&imgrc=lQJIJgEUU9uO6M%3A%3BROm28gae6IMdBM%3Bhttp%253A%252F%252Fwww.colourbox.com%252Fpreview%252F4296984-669552-wooden-arrow-signs-and-snow-vector.jpg%3Bhttp%253A%252F%252Fwww.colourbox.com%252Fvector%252Fwooden-arrow-signs-and-snow-vector-vector-4296984%3B480%3B480

op die pijl wil ik een naam/tekst schrijven. en dan vervolgens deze een link geven naar een bepaalde pagina.

maar:

1= hoe krijg ik zo pijl met zo naam erin?
2= hoe krijg ik er dan meerdere netjes onder elkaar met de pijl richting bv naar links i.p.v. naar rechts en schuin? (soort ladder)

de bedoeling is dat ik straks 10 pijlen onder elkaar hebt (liefst aan elkaar vast d.m.v. een lat/paaltje) die een tekst hebben elk, en een link naar een webpagina. een menu dus.

wie weet de oplossing?

 

[plukkies]

Hier is een klein voorbeeldtje:
CSS:

    #menu ul {  
        list-style-type: none;  
        width: 175px; 
    }  
    #menu ul li {  
        margin: 0;  
    }  
    #menu ul li a {  
        display: block;  
        padding: 15px;  
        background-image: image.gif;  
        font-family: Verdana;  
        color: white;  
    }  
    #menu ul li a:hover {  
        background-image: image.gif;  
    }

HTML:

<div id="menu">
<ul>
	<li><a href="#">blablabla</a></li>
	<li><a href="#">blablabla</a></li>
	<li><a href="#">blablabla</a></li>
	<li><a href="#">blablabla</a></li>
	<li><a href="#">blablabla</a></li>
</ul>
</div>

 

[djeric]

hey maar als ik dit doe krijg ik enkel een rijtje onder elkaar met de tekst blablabla.

ik bedoelde dus een afbeelding onderelkaar met tekst erin. en dat dan aansluitend onder elkaar.

in jou css code verwijs het door naar de .gif afbeelding. die voeg ik ook toe in het zelfde mapje waar de html code en de css code staat.
maar alsnog... geen afbeelding maar alleen tekst.

edit:

moet die blablabla in de html code de afbeelding worden?

dus zo:

<li><a href="#"><img src="image.gif" /></a></li>

?

 

[rolfohtar]

background-image: image.gif;

Zou moeten zijn:

background-image: url(image.gif) no-repeat;

De code van djeric geeft de codering van een menu weer. Dat is de basis ervan, die moet je dan stylen met CSS. Daarmee krijg je de afbeelding erin. Post eens een afbeelding met een voorbeeld van wat je wilt.

 

[djeric]

ik wil van bv deze afbeelding:



dus een menu maken.

zo stuk of 7 van deze onder elkaar. (aan elkaar geplakt)

afbeelding is in .jpg moet nog transparant gemaakt worden.

 

[NewbiProgrammer]

CSS wordt gebruikt om je html elementen een stijl te geven. Dit omvat groottes, kleur, posities, afbeeldingen et cetera.

De onderstaande code moet je een idee geven van de uitwerking. De code is niet getest en kan fouten bevatten, maar dit is wel het idee. Google staat vol met voorbeelden van navigatie lijsten (dat wil je eigenlijk maken).

<ul>
<li><a href="#" class="nav1"></a></li>
</li>

Nu hebben een lijstje met daarin één link die wordt gestyled door de klasse nav1.

/* het lijst element krijgt een lijst stijl, dit zorgt ervoor dat er geen bolletjes voor de items komen te staan */
ul {
   list-style: none;
}

/* li attribuut krijgt een hoogte en wijdte */
li {
   width: 50px;
   height: 50px;
}

/* de elementen met de klasse nav1 (li element) krijgt deze styling */
.nav1 {
   background:url(images/nav1.jpg) no-repeat 0 0;
}

 

[djeric]

De onderstaande code moet je een idee geven van de uitwerking. De code is niet getest en kan fouten bevatten, maar dit is wel het idee. Google staat vol met voorbeelden van navigatie lijsten (dat wil je eigenlijk maken).

wat ik probeer t lukt me niet.
krijg het niet voor elkaar.
pffffffff.......


ik moet het in een navigatie lijst zetten, maar hoe ik t ook formuleer, krijg het niet voorelkaar wat je uitlegt.

 

[djeric]

verwijst deze tut mij nu naar de juiste voorbeeld en uitleg?

klik hier voor de link.

Ik wil dus een plaatje wat ik hierboven hebt gepost, zo stuk of 7 onder elkaar geplakt krijgen, maar wel dat ieder plaatje een link bevat.

ik snap de css ervan niet.

 

[NewbiProgrammer]

De tutorial geeft wel het idee weer dat jij wilt bereiken. Echter wil jij een verticaal menu in plaats van een horizontaal menu zoals de tutorial beschrijft.

Laat eens zien wat je al gescript hebt dan kunnen we je verder helpen. Het idee is gewoon een lijstje maken met html zoals ik had voorgedaan (ul is een lijst-tag, li is een element-tag binnen een lijst). Die elementen ga je stijlen met css. In jouw geval wil je de elementen stijlen met een achtergrondje, daarvoor gebruik je het css attribuut background. De background krijgt een plaatje

 background: url(mijnplaatje.jpg);

Groet,
NewbiProgr

 

[djeric]

Laat eens zien wat je al gescript hebt dan kunnen we je verder helpen.

ik ben wel heel stuk verder, maar t ziet er nu bijna goed uit. (kleuren kan ik aanpassen.)

mijn html code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="nl">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<meta name="keywords" content=",zet,hier,woorden,in,voor,zoekmachine,die,slaan,op,deze,website,,,,,">

<meta name="description" content="">

<title></title>

<link href="style.css" rel="stylesheet" type="text/css">

</head>

<body>

<ul class="navigatie">
<li><a href="http://www.skihutinfo.nl" title="test"><img src="index/eenplaatje.gif" border="0" alt="test" width="150" height="80"></a></li>
<li><a href="http://www.skihutinfo.nl" title="test"><img src="index/anderplaatje.gif" border="0" alt="test" width="150" height="80"></a></li>
<li><a href="http://www.skihutinfo.nl" title="test"><img src="index/eenplaatje.gif" border="0" alt="test" width="150" height="80"></a></li>
<li><a href="http://www.skihutinfo.nl" title="test"><img src="index/anderplaatje.gif" border="0" alt="test" width="150" height="80"></a></li>
<li><a href="http://www.skihutinfo.nl" title="test"><img src="index/eenplaatje.gif" border="0" alt="test" width="150" height="80"></a></li>
<li><a href="http://www.skihutinfo.nl" title="test"><img src="index/anderplaatje.gif" border="0" alt="test" width="150" height="80"></a></li>
<li><a href="http://www.skihutinfo.nl" title="test"><img src="index/eenplaatje.gif" border="0" alt="test" width="150" height="80"></a></li>
<li><a href="http://www.skihutinfo.nl" title="test"><img src="index/anderplaatje.gif" border="0" alt="test" width="150" height="80"></a></li>
<li><a href="http://www.skihutinfo.nl" title="test"><img src="index/eenplaatje.gif" border="0" alt="test" width="150" height="80"></a></li>
<li><a href="http://www.skihutinfo.nl" title="test"><img src="index/anderplaatje.gif" border="0" alt="test" width="150" height="80"></a></li>
</ul>

<ul class="navigatie rechts">
<li><a href="http://www.skihutinfo.nl" title="test"><img src="index/eenplaatje.gif" border="0" alt="test" width="150" height="80"></a></li>
<li><a href="http://www.skihutinfo.nl" title="test"><img src="index/anderplaatje.gif" border="0" alt="test" width="150" height="80"></a></li>
<li><a href="http://www.skihutinfo.nl" title="test"><img src="index/eenplaatje.gif" border="0" alt="test" width="150" height="80"></a></li>
<li><a href="http://www.skihutinfo.nl" title="test"><img src="index/anderplaatje.gif" border="0" alt="test" width="150" height="80"></a></li>
<li><a href="http://www.skihutinfo.nl" title="test"><img src="index/eenplaatje.gif" border="0" alt="test" width="150" height="80"></a></li>
<li><a href="http://www.skihutinfo.nl" title="test"><img src="index/anderplaatje.gif" border="0" alt="test" width="150" height="80"></a></li>
<li><a href="http://www.skihutinfo.nl" title="test"><img src="index/eenplaatje.gif" border="0" alt="test" width="150" height="80"></a></li>
<li><a href="http://www.skihutinfo.nl" title="test"><img src="index/anderplaatje.gif" border="0" alt="test" width="150" height="80"></a></li>
<li><a href="http://www.skihutinfo.nl" title="test"><img src="index/eenplaatje.gif" border="0" alt="test" width="150" height="80"></a></li>
<li><a href="http://www.skihutinfo.nl" title="test"><img src="index/anderplaatje.gif" border="0" alt="test" width="150" height="80"></a></li>
</ul>

<div id="welkom">
<img alt="welkom" src="index/logo.gif" width="400" height="214">

</div>



<div id= "inhoud">

<h1 id="kop1">Wat is een skihut? Lees op deze site daar meer over.</h1>
<p id="inleiding">Want hier vertellen wij u veel informatie van wat nu in en om de skihut gebeurt. Waar je de
aprésski feesten kan vinden, en waar zich nu een skihut bevind. Maar er is meer... Je vind hier vele artiesten die op de skihut cd's staan en
alle dj's. Ook als je een baan zoekt in een skihut kun je hier terecht. De website komt steeds voller te staan met nieuwe informatie.
Heeft u intressante informatie en/of vragen, dan kun je ten alle tijden contact met mij opnemen.</p>
</div>

<p id="fotos" style="text-align: center; clear: both;">
<img id="links" src="div/1.jpg" alt="Foto 1" width="300" height="225">
<img id="rechts" src="div/2.jpg" alt="Foto 2" width="300" height="225">
<img src="div/3.jpg" alt="Foto 3" width="300" height="225">
</p>

<h2>
Deze pagina kan fouten bevatten, momenteel werken wij hieraan. onze excuses hiervoor.
</h2>

</body>
</html>

mijn css code:

body
{
background-image: url(index/achtergrond.jpg);
background-attachment: fixed
}

ul.navigatie {

font-family : verdana, Arial, Helvetica, sans-serif;

font-size : 14px;

font-weight : bold;

width : 12em;

border-right : 1px solid #666;

padding : 0;

background-color : #9cc;

color : #333;

list-style : none;

float : left;

margin-top : 0;

margin-right : 10px;

margin-bottom : 1em;

margin-left : 0;
}
ul.rechts {

float : right;

margin : 0 0 1em 10px;
}
ul.navigatie li {

margin : 0;

border-top : 1px solid #003;
}
ul.navigatie li a {

display : block;

padding : 2px 2px 2px 4px;

border-left : 10px solid #993300;

border-right : 1px solid #69c;

border-bottom : 1px solid #369;

background-color : #FFFFCC; /* Dit veranderd de achtergrond kleur van het menu in rechtse gedeelte.*/

color : #c0c0c0;

text-decoration : none;

width : 100%;
}
ul.rechts {

margin : 0 0 1em 10px;
}
html > body ul.navigatie li a {

width : auto;
}
ul.navigatie li a:hover {

border-left : 10px solid #006600;

border-right : 1px solid #69c;

border-bottom : 1px solid #369;

background-color : #ffff00;

color : #ff1493;
}

div#welkom {
text-align : center;
}

#inleiding {

background-color: #330000; /* achtergrond kleur voor de inhoud van iedere pagina.*/

color : #FFCC33; /* text kleur voor de inhoud van iedere pagina.*/

font-weight : bold;

font-size : 1.1em;

}

#inhoud {

margin : 0 12.5em;

text-align : center;
}

h1#kop1 {

color : #FF9966; /* text kleur van de titel op iedere pagina.*/

background : #330000; /* achtergrond kleur voor de titel text op iedere pagina.*/

font-size : 1.1em;

text-align : center;
}

p#fotos {

clear : both;

text-align : center;

padding-top : 15px;
}
img#links {

float : left;
}
img#rechts {

float : right;
}

is dit goed gemaakt eigenlijk?

of toch wat foutjes?

 

[djeric]

de validator vind toch wat foutjes, maar weet niet zeker wat de fout is. ik zie zelf er geen.

wie weet of bovenstaande code dan goed is opgemaakt. ?????

 

[NewbiProgrammer]

De validator vindt een foutje bij het border attribuut van je img-tag. Het border-attribuut is sinds html 4.01 (die jij gebruikt, zie je document type bovenin je html) deprecated. Dit betekent dat hij niet meer wordt ondersteund.

The border attribute of <img> is deprecated in HTML 4.01.

http://www.w3schools.com/tags/att_img_border.asp

In plaats van het border-attribuut in je html te definiëren kan je deze ook in je css definiëren.

In jouw geval wordt het dan zoiets:

.navigatie li img { /* deze regel geldt voor alle img elementen binnen een li element, die zich binnen een element met de klasse navigatie bevindt :) (om het even lastig te maken) */
    border: 0;
}
/* misschien interessant: http://stackoverflow.com/questions/2922909/should-i-use-border-none-or-border-0 */

 

[djeric]

deprecated. Dit betekent dat hij niet meer wordt ondersteund.

echt die validator is zo lekker geschreven door die techneuten

Maar bedankt het werkt! :thumb: