[CSS] List type (square)
Ik ben bezig met een weblog te maken en nu wilde ik daar een mooi menu voor maken. Omdat ik door heb dat tegenwoordig CSS heel handig is voor de opmaak ( :P ) ben ik dan daar maar ook mee aan de slag gegaan. Ik heb een class gemaakt en daarin 'list-style-type: square' gedefinieerd. Nu is mijn probleem: Hoe maak je dat vierkantje kleiner, want het is echt een joekel van een ding :) !
Ponzi
Code (php)
1
2
2
width: 5px;
height: 5px;
height: 5px;
werkt het niet? Hoe bedoel je dan?
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
ul {
list-style-type: none;
}
li {
background: url(bullet.gif) 2px 2px no-repeat;
padding-left: 12px;
}
list-style-type: none;
}
li {
background: url(bullet.gif) 2px 2px no-repeat;
padding-left: 12px;
}
wat je dan dus doet, is het uitschakelen van de standaard vierkantjes en bolletjes. Daarna geef je gewoon een backgroundplaatje op voor je <li>'s. Die bullet.gif maak je even zelf. De getallen (2px en 12px) moet je wel aanpassen naar je eigen situatie.
Dit is mijn css (gedeeltelijk)
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
38
39
40
41
42
43
44
45
46
47
48
49
50
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
38
39
40
41
42
43
44
45
46
47
48
49
50
.clContainer
{
margin: 0 auto;
padding: 0;
width: 750px;
border: 5px;
border-style: solid;
border-color: #C9C9C9;
background-color: #FFFFFF;
position: relative;
overflow: hidden;
}
.clHeader
{
height: 120px;
width: 750px;
background-image: url(HeaderBackground.jpg);
background-position: top center;
background-repeat: repeat-x;
position: relative;
}
.clMenu
{
margin: 0px 5px 0px 5px;
width: 200px;
border-right: 1px solid #006699;
float: left;
overflow: hidden;
text-align: left;
}
.clPage
{
overflow: hidden;
width: 530px;
text-align: left;
}
.clFooter
{
margin: 5px 0px 0px 0px;
height: 39px;
width: 750px;
text-align: center;
background-image: url(FooterBackground.gif);
background-position: top center;
background-repeat: repeat-x;
}
{
margin: 0 auto;
padding: 0;
width: 750px;
border: 5px;
border-style: solid;
border-color: #C9C9C9;
background-color: #FFFFFF;
position: relative;
overflow: hidden;
}
.clHeader
{
height: 120px;
width: 750px;
background-image: url(HeaderBackground.jpg);
background-position: top center;
background-repeat: repeat-x;
position: relative;
}
.clMenu
{
margin: 0px 5px 0px 5px;
width: 200px;
border-right: 1px solid #006699;
float: left;
overflow: hidden;
text-align: left;
}
.clPage
{
overflow: hidden;
width: 530px;
text-align: left;
}
.clFooter
{
margin: 5px 0px 0px 0px;
height: 39px;
width: 750px;
text-align: center;
background-image: url(FooterBackground.gif);
background-position: top center;
background-repeat: repeat-x;
}
En het is zo opgebouwd
Code (php)
1
2
3
4
2
3
4
clContainer
--clHeader
--clMenu - clPage (erlangs)
--clFooter
--clHeader
--clMenu - clPage (erlangs)
--clFooter
Maar als de div van het menu nu langer is als die van de pagina (clPage), dan komt de footer over het menu te liggen. Ik heb er al ettelijke uren op verspilt, maar kom er echt niet uit :( . Oh ja, ik ben nog maar een beginneling met div-layouts enzow ;) !
Voor de mensen die het interesseert: gewoon eventjes dit > clear:both; < toevoegen aan clFooter ;) .
dit werkt ook:
Code (php)
1
2
3
4
2
3
4
ul
{
list-style-image: url('bullet.gif')
}
{
list-style-image: url('bullet.gif')
}
Héhé, misschien heb ik hem nu iets bij geleerd :P ! Nee hoor, het was maar eventjes ter informatie ;) .
je vergeet toch wel mooi een ; hoor....
dan kunnen we zo afentoe even komen kijken:)
waarom zou die daar niet moeten dan?
Gewijzigd op 01/01/1970 01:00:00 door Erik Rijk
@ Erik: Omdat die als laatste staat :) . Heb gemerkt dat het dan niet moet die ; ;) .
