Stretch plaatje in DIV
ik ben bezig een background plaatje in te stellen voor het menu.
Dit plaatje moet gestretched worden zo breed als het menu word.
Dus altijd zo breed als het DIVje.
Zou iemand mij de code hier voor willen geven?
Heb al gezocht maar kom er niet uit!
thnx!!!
Wat voor backgroundplaatje is het, kan je dat eens laten zien?
je kan je background foto stretchen door repeat x and y met CSS te gebruiken
Dit is het plaatje.
Het DIVje word net zo groot als het menu.
Het menu word uit een db gehaald.
Dus het DIVje verandert van grootte..
@mohamed
repeat x and y?
Dat ga ik even opzoeken.
thnx
de linkerkant (mag heel smal zijn) en de rechterkant, die moet lang zijn. (het kan ook met repeat-x zoals mohamed aangaf, maar dan heb je in dit geval 3 plaatjes nodig.
Overigens gebruik je voor een menu-item geen <div> maar een keurige <ol><li> lijst.
Dat komt er dan ongeveer zo uit te zien in code:
HTML:
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<div id="navigation">
<ul>
<li><a>Link1</a></li>
<li><a>Link2</a></li>
<li><a>Link3</a></li>
</ul>
</div>
<ul>
<li><a>Link1</a></li>
<li><a>Link2</a></li>
<li><a>Link3</a></li>
</ul>
</div>
CSS
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
#navigation{
width:200px;
float:left;
height:20px;
margin-bottom:10px;
}
#navigation ul {
list-style:none;
}
#navigation li a{
background-image:url("rechterkant.gif");
}
#navigation li{
background-image:url("linkerkant.gif");
}
#navigation a {
float:left;
display:block;
padding:3px 12px 4px 4px;
background-repeat: no-repeat;
background-position: right top;
text-decoration:none;
color:#000000;
font-size:12px;
font-weight:bold;
}
#navigation li {
float:left;
padding:0 0 0 8px;
margin:0 8px 0 0;
height:auto;
background-repeat: no-repeat;
background-position: left top;
}
width:200px;
float:left;
height:20px;
margin-bottom:10px;
}
#navigation ul {
list-style:none;
}
#navigation li a{
background-image:url("rechterkant.gif");
}
#navigation li{
background-image:url("linkerkant.gif");
}
#navigation a {
float:left;
display:block;
padding:3px 12px 4px 4px;
background-repeat: no-repeat;
background-position: right top;
text-decoration:none;
color:#000000;
font-size:12px;
font-weight:bold;
}
#navigation li {
float:left;
padding:0 0 0 8px;
margin:0 8px 0 0;
height:auto;
background-repeat: no-repeat;
background-position: left top;
}
Mijn menu word horizontaal, niet verticaal..
Maar.. geen punt!
Super bedankt!
Sorry, dat wist ik niet , maar het gaat erom dat het met de afbeeldingen werkt, dit kan je allemaal nog wel aanpassen denk ik zo.