[CSS]menu met bgimage
like always heb ik weeral een vraag ... deze keer over css
Ik ben bezig om wat css onder de knie te krijgen maar kom op het volgende "probleem" ik wil een afbeelding hebben (van een button) die achter de tekst staat (van die link) maar hoe kan ik dit in css waar maken? enige tips , tricks?
bij voorbaat dank!
Code (php)
1
2
3
2
3
a {
background: transparent url(bg_link.gif) top left no-repeat;
}
background: transparent url(bg_link.gif) top left no-repeat;
}
Zo krijg je een niet-herhalend achtergrondplaatje.
Als hij wel moet herhalen, kun je kiezen voor repeat-x, of repeat-y, in plaats van no-repeat.
is het dan niet verstandig om de link een display:block ook mee te geven? Je kan dan namelijk de hoogte en breedte van die link opgeven. Normaal gesproken heb je anders namelijk niet genoeg ruimte voor de achtergrond.
In de ul dan je li een float en een width meegeven, en de a's daarbinnen een display: block, zodat ze dat hele li vullen.
Maar ik weet niet of dat de bedoeling is ;-)
Dat kan natuurlijk ook, en is wel de beste oplossing om links in een rij een achtergrond te geven. Het ging mij er ook vooral om dat het niet handig is om gewoon een <a> een background mee te geven.
[linebreak]ik heb eerlijk gezegd nog nooit gewerkt met lists in CSS dus dit is compleet nieuw voor me :[linebreak]HTML:[linebreak]<ul>[linebreak]<li><a href="#">blabla</a></li>[linebreak]</ul>[linebreak][linebreak]css:[linebreak]a{[linebreak]background-image:url(../photoshop%20tekeningen/button.gif);[linebreak]height:50px;[linebreak]width:auto[linebreak]}[linebreak][linebreak](ik heb a vervangen door li en het werkt nu al beter ... MAAR ik krijg nu eigenlijk nog altijd hetzelfde alleen ziet het nu nog lichtblauw achter mijn link alleen ... maar die image is nie volledig :|) "Afbeelding")
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
ul li a
{
background-image:url(../photoshop%20tekeningen/button.gif);
height:50px;
width:auto
}
{
background-image:url(../photoshop%20tekeningen/button.gif);
height:50px;
width:auto
}
index.html
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
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Css Divs test</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="div1">
</div>
<ul>
<li><a href="#">blabla</a></li>
</ul>
<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In vitae tortor non ligula porta semper. Pellentesque et lorem sed sapien euismod facilisis. Proin dapibus. Donec fringilla hendrerit ante. Donec fermentum lorem eu risus. Mauris eleifend. In quis orci at quam adipiscing consectetuer. Nam sit amet felis vulputate elit ornare gravida. Pellentesque at ipsum. Duis a turpis.
Donec id lectus non leo euismod commodo. Quisque felis sem, aliquet sit amet, sagittis vel, porttitor ac, diam. Vivamus arcu ligula, egestas nec, lacinia in, feugiat porttitor, sem. Vestibulum suscipit cursus dui. Nullam elementum enim pharetra ipsum. Nunc nec dui sit amet enim pharetra condimentum. Sed a tortor. Curabitur erat augue, sodales at, imperdiet sit amet, commodo ac, urna. Duis ac arcu vel arcu sodales adipiscing. Integer at metus. Sed vel urna. Etiam laoreet scelerisque libero. Sed viverra, metus cursus commodo scelerisque, magna enim tincidunt justo, sed dapibus velit nisi quis mi. Nam fermentum.
Nulla luctus nonummy metus. Donec turpis. Ut dignissim. Nullam varius purus et pede. Aliquam ipsum ligula, auctor a, aliquet sit amet, ultrices quis, elit. Morbi tempus felis at est. Nam vestibulum enim vitae tortor. In neque metus, tincidunt nec, accumsan ut, rutrum sed, velit. Etiam id velit. Sed ullamcorper vestibulum enim. Proin accumsan nunc in dui. Nullam accumsan magna id nisi. In auctor commodo augue.
Suspendisse vitae mauris ut ligula vehicula gravida. Curabitur tincidunt eros id neque. Vestibulum suscipit purus nec tortor. Morbi quis elit quis mauris scelerisque venenatis. Duis sit amet dui eu nisi dictum ultricies. Proin vel justo vitae lorem congue scelerisque. Aliquam erat volutpat. Duis at diam rhoncus dui mattis sollicitudin. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus auctor enim nec odio. In augue pede, egestas ac, viverra id, bibendum at, arcu. Sed non elit viverra mauris rhoncus sagittis. Nulla sed nunc quis nisi aliquet dapibus. Proin et lorem luctus enim consequat viverra. Morbi quis velit. Phasellus vitae enim nec est varius vulputate. Aliquam erat volutpat. Sed rhoncus lacinia urna. Suspendisse potenti.
Praesent auctor. Aenean eget neque. Cras blandit. Mauris sollicitudin turpis pharetra enim. Vivamus vestibulum. Praesent nulla turpis, pulvinar id, mollis sit amet, dignissim convallis, pede. Aliquam in nisl eu est vehicula posuere. Vestibulum aliquet. Morbi volutpat felis ut ante. In lobortis orci nec est. Nunc rutrum, ante sit amet interdum pharetra, massa mauris posuere neque, laoreet tincidunt augue mi non nunc.
</div>
<div id="footer">
<center>
©2007 - design-code by De Cuyper Joren
</center>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Css Divs test</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="div1">
</div>
<ul>
<li><a href="#">blabla</a></li>
</ul>
<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In vitae tortor non ligula porta semper. Pellentesque et lorem sed sapien euismod facilisis. Proin dapibus. Donec fringilla hendrerit ante. Donec fermentum lorem eu risus. Mauris eleifend. In quis orci at quam adipiscing consectetuer. Nam sit amet felis vulputate elit ornare gravida. Pellentesque at ipsum. Duis a turpis.
Donec id lectus non leo euismod commodo. Quisque felis sem, aliquet sit amet, sagittis vel, porttitor ac, diam. Vivamus arcu ligula, egestas nec, lacinia in, feugiat porttitor, sem. Vestibulum suscipit cursus dui. Nullam elementum enim pharetra ipsum. Nunc nec dui sit amet enim pharetra condimentum. Sed a tortor. Curabitur erat augue, sodales at, imperdiet sit amet, commodo ac, urna. Duis ac arcu vel arcu sodales adipiscing. Integer at metus. Sed vel urna. Etiam laoreet scelerisque libero. Sed viverra, metus cursus commodo scelerisque, magna enim tincidunt justo, sed dapibus velit nisi quis mi. Nam fermentum.
Nulla luctus nonummy metus. Donec turpis. Ut dignissim. Nullam varius purus et pede. Aliquam ipsum ligula, auctor a, aliquet sit amet, ultrices quis, elit. Morbi tempus felis at est. Nam vestibulum enim vitae tortor. In neque metus, tincidunt nec, accumsan ut, rutrum sed, velit. Etiam id velit. Sed ullamcorper vestibulum enim. Proin accumsan nunc in dui. Nullam accumsan magna id nisi. In auctor commodo augue.
Suspendisse vitae mauris ut ligula vehicula gravida. Curabitur tincidunt eros id neque. Vestibulum suscipit purus nec tortor. Morbi quis elit quis mauris scelerisque venenatis. Duis sit amet dui eu nisi dictum ultricies. Proin vel justo vitae lorem congue scelerisque. Aliquam erat volutpat. Duis at diam rhoncus dui mattis sollicitudin. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus auctor enim nec odio. In augue pede, egestas ac, viverra id, bibendum at, arcu. Sed non elit viverra mauris rhoncus sagittis. Nulla sed nunc quis nisi aliquet dapibus. Proin et lorem luctus enim consequat viverra. Morbi quis velit. Phasellus vitae enim nec est varius vulputate. Aliquam erat volutpat. Sed rhoncus lacinia urna. Suspendisse potenti.
Praesent auctor. Aenean eget neque. Cras blandit. Mauris sollicitudin turpis pharetra enim. Vivamus vestibulum. Praesent nulla turpis, pulvinar id, mollis sit amet, dignissim convallis, pede. Aliquam in nisl eu est vehicula posuere. Vestibulum aliquet. Morbi volutpat felis ut ante. In lobortis orci nec est. Nunc rutrum, ante sit amet interdum pharetra, massa mauris posuere neque, laoreet tincidunt augue mi non nunc.
</div>
<div id="footer">
<center>
©2007 - design-code by De Cuyper Joren
</center>
</div>
</body>
</html>
style.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
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
/* CSS Document */
body{
background-color:#666666;
}
#div1{
width:100%;
height:200px;
margin-top:auto;
font-size:102px;
background-color:#888888;
}
#content{
border:2px #000000;
background:#888888;
position:relative;
height:auto;
width:100%;
}
#link{
height:35px;
width:100%;
}
#footer{
background-color:#999999;
width:100%;
height:auto;
font-size:16px
}
a{
background-image:url(button.gif);
height:50px;
width:auto
}
body{
background-color:#666666;
}
#div1{
width:100%;
height:200px;
margin-top:auto;
font-size:102px;
background-color:#888888;
}
#content{
border:2px #000000;
background:#888888;
position:relative;
height:auto;
width:100%;
}
#link{
height:35px;
width:100%;
}
#footer{
background-color:#999999;
width:100%;
height:auto;
font-size:16px
}
a{
background-image:url(button.gif);
height:50px;
width:auto
}
button: http://img248.imageshack.us/img248/3130/buttoneh5.gif
(ik weet ook wel dat blauw bij grijs het LELIJKSTE van al is maar het is gewoon om wat te proberen met css)