css altijd beginnen met 2 letters
.list_side a
{
text-align: left;
color: #fff;
padding: 0 0 0 6px;
text-decoration: none;
}
dit is standaard, wat moet ik er aan toevoegen?
Wil je het enkel met 2 spaties beginnen om te zorgen dat het een stukje uit de kant staat? In dat geval zou margin of padding prima voldoen. Houd er echter rekening mee dat padding een afstand is BINNEN het element is en margin BUITEN het element.
Code (php)
1
2
3
4
5
6
2
3
4
5
6
.list_side a {
text-align: left; /* Is dit wel nuttig? left is default */
color: #fff;
margin-left: 6px;
text-decoration: none;
}
text-align: left; /* Is dit wel nuttig? left is default */
color: #fff;
margin-left: 6px;
text-decoration: none;
}
padding: 0 0 0 6px;
eens in
padding: 0px 0px 0px 30px;
(30 px kun je aanpassen)
Let op. Ik zeg dit nu even uit m'n hoofd, maar waarschijnlijk is de witruimte die vóór de link staat nu aanklikbaar (moet je zelf even testen). Dat betekent dat als je op de witruimte klikt dat dan de link ook werkt. Dat is misschien wat vreemd. In dat geval moet je het anders aanpakken (uit m'n hoofd)
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
.list_side a {
color:#fff;
display:block;
float:left;
margin:0px 10px;
padding:0px;
text-decoration:none;
}
color:#fff;
display:block;
float:left;
margin:0px 10px;
padding:0px;
text-decoration:none;
}
Gewijzigd op 12/06/2011 15:41:08 door Ozzie PHP
Code (php)
1
2
3
4
2
3
4
a:before
{
content: ' ';
}
{
content: ' ';
}
@Ozzie, met text-decoration: none; lijkt het geen link maar het is het nog wel. (voorbeeld)
Wouter J op 12/06/2011 16:02:54:
@Ozzie, met text-decoration: none; lijkt het geen link maar het is het nog wel. (voorbeeld)
Aardig dat je dat zegt Wouter :) maar ik weet alleen niet waarom je het zegt. Ik heb dit overgenomen uit de code van de topicstarter. Text-decoration:none zorgt ervoor dat er geen lijntje onder een link komt te staan en blijkbaar wil de topicstarter dat. So don't blame me hahaha :)
Overigens maakt het niet uit of je 0 0 0 30px doet of 0px 0px 0px 30px. Immers, 0(px) = 0(px).
Arjan - op 12/06/2011 16:23:58:
Je kan inderdaad content (waaronder spaties) toevoegen middels css, maar css is opmaak en html is content. Dus de vraag is of je dit moet willen. Je kan beter gebruik maken van een padding-left zoals je zelf al aangeeft.
Overigens maakt het niet uit of je 0 0 0 30px doet of 0px 0px 0px 30px. Immers, 0(px) = 0(px).
Overigens maakt het niet uit of je 0 0 0 30px doet of 0px 0px 0px 30px. Immers, 0(px) = 0(px).
als 0px=0 dan is 30px=30 dus kun je overal die px weglaten. Lijkt me niet toch?
Ozzie PHP op 12/06/2011 16:30:14:
als 0px=0 dan is 30px=30 dus kun je overal die px weglaten. Lijkt me niet toch?
Arjan - op 12/06/2011 16:23:58:
Je kan inderdaad content (waaronder spaties) toevoegen middels css, maar css is opmaak en html is content. Dus de vraag is of je dit moet willen. Je kan beter gebruik maken van een padding-left zoals je zelf al aangeeft.
Overigens maakt het niet uit of je 0 0 0 30px doet of 0px 0px 0px 30px. Immers, 0(px) = 0(px).
Overigens maakt het niet uit of je 0 0 0 30px doet of 0px 0px 0px 30px. Immers, 0(px) = 0(px).
als 0px=0 dan is 30px=30 dus kun je overal die px weglaten. Lijkt me niet toch?
Dat zeg ik toch niet. 0 = 0 of dat nou 0 meter is of 0 cm. 0 blijft 0. 30 zegt niets als je de eenheid niet weet... 30 meter is wat anders dan 30cm (zoals je begrijpt)
Gewijzigd op 12/06/2011 16:32:02 door Arjan -
Bij 30 kan dit ook, maar dan wordt je overgeleverd aan je browser. Het ligt aan de defaults welke eenheid je dan gebruikt.
Ozzie PHP op 12/06/2011 15:39:17:
Verander
padding: 0 0 0 6px;
eens in
padding: 0px 0px 0px 30px;
(30 px kun je aanpassen)
Let op. Ik zeg dit nu even uit m'n hoofd, maar waarschijnlijk is de witruimte die vóór de link staat nu aanklikbaar (moet je zelf even testen). Dat betekent dat als je op de witruimte klikt dat dan de link ook werkt. Dat is misschien wat vreemd. In dat geval moet je het anders aanpakken (uit m'n hoofd)
padding: 0 0 0 6px;
eens in
padding: 0px 0px 0px 30px;
(30 px kun je aanpassen)
Let op. Ik zeg dit nu even uit m'n hoofd, maar waarschijnlijk is de witruimte die vóór de link staat nu aanklikbaar (moet je zelf even testen). Dat betekent dat als je op de witruimte klikt dat dan de link ook werkt. Dat is misschien wat vreemd. In dat geval moet je het anders aanpakken (uit m'n hoofd)
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
.list_side a {
color:#fff;
display:block;
float:left;
margin:0px 10px;
padding:0px;
text-decoration:none;
}
color:#fff;
display:block;
float:left;
margin:0px 10px;
padding:0px;
text-decoration:none;
}
In dit voorbeeld is de margin onjuist, aangezien je nu margin-top en margin-right definieert,(je weet wel, met de klok mee, top, right, bottom, left) Soms is het, volgens mij, beter om gewoon margin-top en margin-left te gebruiken ipv shorthand.
Zoals al gezegd, bij 0 hoeft er geen maat eenheid achter maar bij een positief (of negatief) getal wel, anders krijg je geheid problemen met verschillende browsers.
Gewijzigd op 14/06/2011 19:01:33 door John Acid
Dan heb je de mogelijkheid om de linkerkant van de links, via css/class/id, meer ruimte te geven.
John Acid op 14/06/2011 18:59:20:
In dit voorbeeld is de margin onjuist, aangezien je nu margin-top en margin-right definieert,(je weet wel, met de klok mee, top, right, bottom, left) Soms is het, volgens mij, beter om gewoon margin-top en margin-left te gebruiken ipv shorthand.
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
.list_side a {
color:#fff;
display:block;
float:left;
margin:0px 10px;
padding:0px;
text-decoration:none;
}
color:#fff;
display:block;
float:left;
margin:0px 10px;
padding:0px;
text-decoration:none;
}
In dit voorbeeld is de margin onjuist, aangezien je nu margin-top en margin-right definieert,(je weet wel, met de klok mee, top, right, bottom, left) Soms is het, volgens mij, beter om gewoon margin-top en margin-left te gebruiken ipv shorthand.
Dit is niet correct.
"margin:0px 10px;" geeft de margin voor top en bottom aan (namelijk 0px) en voor left en right (namelijk 10px). Dit klopt dus gewoon
@Niek: text-indent is bedoeld voor het laten inspringen van de 1e regel van een paragraaf.
Gewijzigd op 14/06/2011 20:04:43 door Ozzie PHP
Ozzie PHP op 14/06/2011 20:04:14:
Dit is niet correct.
"margin:0px 10px;" geeft de margin voor top en bottom aan (namelijk 0px) en voor left en right (namelijk 10px). Dit klopt dus gewoon
John Acid op 14/06/2011 18:59:20:
In dit voorbeeld is de margin onjuist, aangezien je nu margin-top en margin-right definieert,(je weet wel, met de klok mee, top, right, bottom, left) Soms is het, volgens mij, beter om gewoon margin-top en margin-left te gebruiken ipv shorthand.
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
.list_side a {
color:#fff;
display:block;
float:left;
margin:0px 10px;
padding:0px;
text-decoration:none;
}
color:#fff;
display:block;
float:left;
margin:0px 10px;
padding:0px;
text-decoration:none;
}
In dit voorbeeld is de margin onjuist, aangezien je nu margin-top en margin-right definieert,(je weet wel, met de klok mee, top, right, bottom, left) Soms is het, volgens mij, beter om gewoon margin-top en margin-left te gebruiken ipv shorthand.
Dit is niet correct.
"margin:0px 10px;" geeft de margin voor top en bottom aan (namelijk 0px) en voor left en right (namelijk 10px). Dit klopt dus gewoon
Idd, je hebt gelijk, ik was te voorbarig.LOL.
Toevoeging op 14/06/2011 20:58:23:
Ik dacht aan zoiets;
html:
Code (php)
1
<p>Dit is een stuk tekst waarin de <a href="#"><span class="ewr">hyperlink</span></a> meer ruimte links heeft.</P>
ewr=extra witruimte
css:
Code (php)
1
2
3
2
3
span.ewr{
padding-left: 1em;
}
padding-left: 1em;
}
Gewijzigd op 15/06/2011 17:58:02 door John Acid
Gewoon een padding of text-indent op de link. Ook geen margin gebruiken in dit geval.
Padding-left in het a element werkt wel, maar om te voorkomen dat dan alle hyperlinks dit gaan doen is het wel verstandig om er een aparte class aan te geven, speciaal voor een bepaald categorie hyperlinks.
Tenzij dit natuurlijk gewenst is.
Bij teksten gebruik je meestal padding, bij de <p> tag doe je dit ook en links zijn ook stukjes tekst.
Dat is althans mijn mening
Gewijzigd op 17/06/2011 14:31:20 door John Acid