[CSS] List type (square)

Door Ponzi op 10-08-2006 15:10

2.007 views

Hallo !

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

PHP Newbie

10-08-2006 15:11

een width en een height mee geven

Ponzi

10-08-2006 15:15

Als ik het zo doe


width: 5px;
height: 5px;

werkt het niet? Hoe bedoel je dan?

Jan Koehoorn

10-08-2006 15:24

Je kunt het beter zo doen:


ul {
    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.

Ponzi

10-08-2006 15:29

Hij doet het ;) Heel fel bedankt voor het goede idee Jan !

Ponzi

10-08-2006 15:41

Ik heb nog een probleempje. Eigenlijk een groot :) .

Dit is mijn css (gedeeltelijk)


.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;
}

En het is zo opgebouwd


clContainer
--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 ;) !

Ponzi

10-08-2006 15:54

Owkay :) ! Na heel lang zoeken bleek ook Google weer mijn vriend te zijn !

Voor de mensen die het interesseert: gewoon eventjes dit > clear:both; < toevoegen aan clFooter ;) .

Ponzi

11-08-2006 12:13

Nog een kleine toevoeging voor Jan ;) !

dit werkt ook:


ul 
{
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 ;) .

Erik Rijk

11-08-2006 12:19

oei oei,

je vergeet toch wel mooi een ; hoor....

Ponzi

11-08-2006 12:20

Zeg :D Geen mieren neuken hé ;)... Was maar snel getypt. En trouwens dat moet denk ik zelfs niet als het het laatste dingetje in de rij is :P .

DirkJan Heinen

11-08-2006 12:23

wat is de site link??
dan kunnen we zo afentoe even komen kijken:)

Reageren

Inloggen om te reageren