css altijd beginnen met 2 letters

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Pagina: 1 2 volgende »

Tom aan t Goor

Tom aan t Goor

12/06/2011 15:14:28
Quote Anchor link
ik wil dat als er een stukje (hyperlink) tekst staat, dat het standaard begint met 2 spaties, alleen ik heb geen idee hoe dat moet.

.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?
 
PHP hulp

PHP hulp

29/11/2020 08:53:03
 
Arjan -

Arjan -

12/06/2011 15:18:16
Quote Anchor link
display: block;
 
Tom aan t Goor

Tom aan t Goor

12/06/2011 15:21:32
Quote Anchor link
die bedoel ik niet
 
Erik van de Locht

Erik van de Locht

12/06/2011 15:29:39
Quote Anchor link
Mag ik vragen waarom je iets altijd met 2 spaties wil laten beginnen? Met CSS kun je niet de tekst veranderen, wel opmaak. Zo te zien gebruik je nu een 6-pixel padding aan de linkerzijde, voldoet dat niet? Echter kan het zo zijn dat de padding niet goed werkt omdat je niet aangeeft dat de eerste 3 parameters in pixels zijn.

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)
PHP script in nieuw venster Selecteer het PHP script
1
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;
}
 
Ozzie PHP

Ozzie PHP

12/06/2011 15:39:17
Quote Anchor link
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)

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
.list_side a {
  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
 
Wouter J

Wouter J

12/06/2011 16:02:54
Quote Anchor link
Verder kan je met CSS wel tekst veranderen:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
a:before
{
  content: '  ';
}


@Ozzie, met text-decoration: none; lijkt het geen link maar het is het nog wel. (voorbeeld)
 
Ozzie PHP

Ozzie PHP

12/06/2011 16:10:57
Quote Anchor link
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 :)
 
Arjan -

Arjan -

12/06/2011 16:23:58
Quote Anchor link
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).
 
Ozzie PHP

Ozzie PHP

12/06/2011 16:30:14
Quote Anchor link
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).

als 0px=0 dan is 30px=30 dus kun je overal die px weglaten. Lijkt me niet toch?
 
Arjan -

Arjan -

12/06/2011 16:31:20
Quote Anchor link
Ozzie PHP op 12/06/2011 16:30:14:
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).

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 -
 
Ozzie PHP

Ozzie PHP

12/06/2011 16:34:12
Quote Anchor link
Oké, ik snap wat je bedoelt. Dus jij zet als je padding of margin aangeeft nooit px achter de 0? Is dat dan wel 'valid'?
 
Wouter J

Wouter J

12/06/2011 16:42:22
Quote Anchor link
Zodra je in CSS 0 hebt kan je pixel (px) weglaten. Dit maakt je code iets sneller, maar vooral ook makkelijker te schrijven.
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

Ozzie PHP

12/06/2011 16:44:55
Quote Anchor link
oké, thanks! weer wat geleerd...
 
John Acid

John Acid

14/06/2011 18:59:20
Quote Anchor link
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)

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
.list_side a {
  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
 
Niek Weevers

Niek Weevers

14/06/2011 19:23:09
Quote Anchor link
De padding kan maar dit telt dan voor de hele link. Om een stukje wit te laten voordat de tekst begint, is de text-indent bedacht.
 
John Acid

John Acid

14/06/2011 19:57:50
Quote Anchor link
Kun je de links niet gewoon tussen spantags zetten aangezien links alleen maar een klein stukje tekst/zin zijn?
Dan heb je de mogelijkheid om de linkerkant van de links, via css/class/id, meer ruimte te geven.
 
Ozzie PHP

Ozzie PHP

14/06/2011 20:04:14
Quote Anchor link
John Acid op 14/06/2011 18:59:20:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
.list_side a {
  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
 
John Acid

John Acid

14/06/2011 20:07:08
Quote Anchor link
Ozzie PHP op 14/06/2011 20:04:14:
John Acid op 14/06/2011 18:59:20:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
.list_side a {
  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)
PHP script in nieuw venster Selecteer het PHP script
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)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
span.ewr{
padding-left: 1em;
}
Gewijzigd op 15/06/2011 17:58:02 door John Acid
 
Niek Weevers

Niek Weevers

16/06/2011 16:01:02
Quote Anchor link
Heeft totaal geen zin om een span in een link te zetten. Het werkt wel, maar is overbodig.
Gewoon een padding of text-indent op de link. Ook geen margin gebruiken in dit geval.
 
Ozzie PHP

Ozzie PHP

16/06/2011 16:55:46
Quote Anchor link
@Niek: waarom geen margin?
 
John Acid

John Acid

16/06/2011 18:21:47
Quote Anchor link
Text-indent werkt bij het a element niet, net even geprobeerd.
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
 

Pagina: 1 2 volgende »



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.