Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss

Vraag over extern stijlblad

9 views
Skip to first unread message

George

unread,
Apr 30, 2013, 9:16:10 AM4/30/13
to
Voor mijn site www.lucyonline.nl gebruik ik al jaren een extern
stijlblad, styleLucy.css. Onderdeel hiervan is onderstaande selector (ik
geloof dat dit zo heet).
nadeel hiervan is dat ik, naast deze code <link rel="STYLESHEET"
href="css/styleLucy.css" type= "text/css">, op elke pagina deze class?
<div class = 'mijntekstDiv'> erbij moet zetten (Ik begrijp trouwens niet
goed waarom dit een 'class' is. Volgens mij begint dat toch altijd met
een punt?) Het liefste zou ik dit onderbrengen in de 'bestaande' body-
of html-tag binnen het stijlblad. Ik heb wat testjes gedaan, maar dat
werkte niet goed. Als het maar herkend wordt door: <link
rel="STYLESHEET" href="css/styleLucy.css" type= "text/css">

Je merkt het al: ik heb weinig kennis van css. Jaren geleden heb ik op
advies van 'iemand' (ik meen Warden Dave) de 'div.mijntekstDiv'
toegevoegd (die op zich goed werkt) maar is verder altijd een raadsel
voor mij gebleven.

Ik hoop dat iemand mij hierbij kan helpen. Houd er alsjeblieft rekening
mee dat ik absoluut geen kenner ben...

}
div.mijntekstDiv {
background : #efe9d0; /* kleur achtergrond middendeel*/
padding : 15px; /* middendeel vergroten/verkleinen*/
border : 1px solid #8A643F; /* bruine rand om middendeel */
margin-left : auto; /* ruimte links rechts vergroten/verkleinen */
margin-right : auto;
min-width : 500px; /* minimale breedte middendeel*/
max-width : 900px; /* maximale breedte middendeel*/
}

]-[oRus

unread,
Apr 30, 2013, 6:07:03 PM4/30/13
to
Op 30-04-2013 plaatste George dit op zijn scherm :
> Voor mijn site www.lucyonline.nl gebruik ik al jaren een extern
> stijlblad, styleLucy.css. Onderdeel hiervan is onderstaande selector
> (ik geloof dat dit zo heet).
> nadeel hiervan is dat ik, naast deze code <link rel="STYLESHEET"
> href="css/styleLucy.css" type= "text/css">, op elke pagina deze
> class? <div class = 'mijntekstDiv'> erbij moet zetten (Ik begrijp
> trouwens niet goed waarom dit een 'class' is. Volgens mij begint dat
> toch altijd met een punt?)

Alleen in de stylesheet begint de stijl met een punt, immers:
'div.mijntekstDiv' waarbij ook 'div' kan worden weggelaten...
Bij het gebruik in de pagina wordt de punt niet toegevoegd.


Het liefste zou ik dit onderbrengen in de
> 'bestaande' body- of html-tag binnen het stijlblad.

Het stijlblad heeft geen body en/of html tags. Dat is alleen voor de
feitelijk pagina.

Ik heb wat
> testjes gedaan, maar dat werkte niet goed. Als het maar herkend wordt
> door: <link rel="STYLESHEET" href="css/styleLucy.css" type=
> "text/css">

Een extern stijlblad dus. Zoals het nu is.

> Je merkt het al: ik heb weinig kennis van css. Jaren geleden heb ik
> op advies van 'iemand' (ik meen Warden Dave) de 'div.mijntekstDiv'
> toegevoegd (die op zich goed werkt) maar is verder altijd een raadsel
> voor mij gebleven.

Misschien heb je iets aan handleidinghtml.nl, waar een en ander op een
eenvoudige en stapsgewijze manier wordt besproken.

> Ik hoop dat iemand mij hierbij kan helpen. Houd er alsjeblieft
> rekening mee dat ik absoluut geen kenner ben...

Je kan die opmaakstijl uit het externe blad ook opnemen in de
<head>-sectie van de pagina, maar dan moet je die ook weer in elke
pagina die je web bevat invoegen. Bovendien moet je dan nog steeds de
div opmaken met die class-declaratie. En dan is de beoogde winst
omgeslagen in puur verlies. Bovendien zou je op het moment dat je iets
aan de stijl wilt veranderen, dat weer in ELKE pagina met die <div>
moeten doen. En een extern stijlblad is nu juist om dat te voorkomen!!

Die regel in de head kan je gewoon knippen en plakken, zeker als je die
definieert als href="/css/style.....".
En die div-regel kan je ook kopiᅵren.

Kortom: gewoon laten zoals het is.....

--
Vriendelijke groeten,

]-[oRus


George

unread,
May 2, 2013, 5:02:39 AM5/2/13
to
Hallo,

Zeer bedankt voor je uitgebreide en duidelijk reactie. Ik zal reacties
geven achter jouw antwoorden....

Op 1-5-2013 00:07, ]-[oRus schreef:
> Op 30-04-2013 plaatste George dit op zijn scherm :
>> Voor mijn site www.lucyonline.nl gebruik ik al jaren een extern
>> stijlblad, styleLucy.css. Onderdeel hiervan is onderstaande selector
>> (ik geloof dat dit zo heet).
>> nadeel hiervan is dat ik, naast deze code <link rel="STYLESHEET"
>> href="css/styleLucy.css" type= "text/css">, op elke pagina deze class?
>> <div class = 'mijntekstDiv'> erbij moet zetten (Ik begrijp trouwens
>> niet goed waarom dit een 'class' is. Volgens mij begint dat toch
>> altijd met een punt?)
>
> Alleen in de stylesheet begint de stijl met een punt, immers:
> 'div.mijntekstDiv' waarbij ook 'div' kan worden weggelaten...
> Bij het gebruik in de pagina wordt de punt niet toegevoegd.

Dit was het kleine mysterie voor mij. Nu ik weet dat je 'div' (voor de
punt) weg kunt laten, is alles ineens veel duidelijker

> Het liefste zou ik dit onderbrengen in de
>> 'bestaande' body- of html-tag binnen het stijlblad.
>
> Het stijlblad heeft geen body en/of html tags. Dat is alleen voor de
> feitelijk pagina.

Ik bedoelde niet zo zeer een tag, zo heb ik dit bijvoorbeeld ook in het
stijlblad staan:
html {
scrollbar-base-color: #DCDCDC; /* midden grijs */
scrollbar-arrow-color: #ED6B24; /* oranje pijlen */
scrollbar-track-color: #BCBCBC;
scrollbar-shadow-color: #ED6B24; /* oranje border */
}


> Ik heb wat
>> testjes gedaan, maar dat werkte niet goed. Als het maar herkend wordt
>> door: <link rel="STYLESHEET" href="css/styleLucy.css" type= "text/css">
>
> Een extern stijlblad dus. Zoals het nu is.
>
>> Je merkt het al: ik heb weinig kennis van css. Jaren geleden heb ik op
>> advies van 'iemand' (ik meen Warden Dave) de 'div.mijntekstDiv'
>> toegevoegd (die op zich goed werkt) maar is verder altijd een raadsel
>> voor mij gebleven.
>
> Misschien heb je iets aan handleidinghtml.nl, waar een en ander op een
> eenvoudige en stapsgewijze manier wordt besproken.

Ik zal zeker gaan kijken.....

>> Ik hoop dat iemand mij hierbij kan helpen. Houd er alsjeblieft
>> rekening mee dat ik absoluut geen kenner ben...
>
> Je kan die opmaakstijl uit het externe blad ook opnemen in de
> <head>-sectie van de pagina, maar dan moet je die ook weer in elke
> pagina die je web bevat invoegen. Bovendien moet je dan nog steeds de
> div opmaken met die class-declaratie. En dan is de beoogde winst
> omgeslagen in puur verlies. Bovendien zou je op het moment dat je iets
> aan de stijl wilt veranderen, dat weer in ELKE pagina met die <div>
> moeten doen. En een extern stijlblad is nu juist om dat te voorkomen!!

Nee, ik vind zo'n extern stijlblad ook veel beter, zeker met veel pagina's.

> Die regel in de head kan je gewoon knippen en plakken, zeker als je die
> definieert als href="/css/style.....".
> En die div-regel kan je ook kopiëren.

Ja, prima tip. kopieren en vervangen...

> Kortom: gewoon laten zoals het is.....

Nogmaals bedankt voor je uitleg!!

Groet, George



Rob

unread,
May 2, 2013, 5:10:49 AM5/2/13
to
Je kunt wel in je stylesheet zetten:

div {
hoe je die div wilt hebben
}

Dan hoef je alleen nog maar <div> zonder class in je pagina's te
zetten.

George

unread,
May 2, 2013, 5:36:07 AM5/2/13
to
Op 2-5-2013 11:10, Rob schreef:
Bedankt voor je aanvullende info. Ik zal er mijn voordeel mee doen...

George

]-[oRus

unread,
May 2, 2013, 11:29:59 AM5/2/13
to
Op 02-05-2013 schreef George:
Het kan, maar dan moet je er rekening mee houden dat ELKE <div>
dezelfde opmaak krijgt en dat je dus bij andere wensen ook elke <div>
moet aanpassen aan de speciale wensen.
Ik heb bv. afbeeldingen meestal in een geneste div staan om beeld en
tekst onvoorwaardelijk bijeen te houden.
En hoeveel werk is het nu helemaal om even die tekst class=... erbij te
zetten?
Je bent dan veel universeler bezig en dat is nu juiste de bedoeling van
CSS.

Ik zou zeggen: niet doen dus.....!

--
Vriendelijke groeten,

Piet


Rob

unread,
May 2, 2013, 12:07:23 PM5/2/13
to
- oRus <ho...@fake.invalid> wrote:
>>> Je kunt wel in je stylesheet zetten:
>>>
>>> div {
>>> hoe je die div wilt hebben
>>> }
>>>
>>> Dan hoef je alleen nog maar <div> zonder class in je pagina's te
>>> zetten.
>>>
>
>> Bedankt voor je aanvullende info. Ik zal er mijn voordeel mee doen...
>
>> George
>
> Het kan, maar dan moet je er rekening mee houden dat ELKE <div>
> dezelfde opmaak krijgt en dat je dus bij andere wensen ook elke <div>
> moet aanpassen aan de speciale wensen.
> Ik heb bv. afbeeldingen meestal in een geneste div staan om beeld en
> tekst onvoorwaardelijk bijeen te houden.

Bedenk wel dat als je met geneste divs en styles aan de gang gaat je
zowizo wat meer van de materie moet snappen want er zijn ook styles
die inherited worden, dus overgenomen van de bovenliggende div zelfs
al zit daar een class op.

George

unread,
May 3, 2013, 7:29:07 AM5/3/13
to
Op 2-5-2013 18:07, Rob schreef:
Leuk dat je me nog even waarschuwt...

Ik dacht aan (wat ik nogal vaak doe), het volgende divje in het
stijlblad te maken: <div align="center"></div>, maar als ik je reactie
lees, dan toch maar niet.

Misschien mag ik je nog een vraagje stellen: Ik ben een beetje aan het
experimenteren met HTML5/SCC3. Zo heb ik een paar knoppen in elkaar
geknutseld, maar ik krijg ze met geen mogelijkheid gecentreerd.

In stijlblad:
#nav a { <!--buttons-->
background-color: #ffffff;
border : solid 1px #804000;
color : #804000;
font-size : 14px;
text-align : center;
text-decoration : none;
padding : 2px 4px 2px 5px;
margin : 5px;
display : block;
float : left;
width : 80px;
height: 15px;
}

In de pagina:
(Ik heb al verschillende combinaties bedacht, maar helaas...)

<div align="center">
<div id="nav">
<a href="../index.html">Home</a>
<a href="JavaScript:CloseIt()">Sluit</a> <!-- denk aan verwijzing
'PopupScript' in de kop-->
</div>
</div>

groet, george

Rob

unread,
May 3, 2013, 12:02:03 PM5/3/13
to
Wat je daar centreert is de tekst in de buttons, ik neem aan dat
dat wel werkt. Maar nou wil je ook de buttons zelf centreren in
een bovenliggende div ofzo?

George

unread,
May 3, 2013, 3:56:59 PM5/3/13
to
Op 3-5-2013 18:02, Rob schreef:
Ja, ik wil dus de buttons centreren in de pagina zelf.
Hierbij de url van de pagina. Geeft denk ik wat meer duidelijkheid.
Wel een beetje rommelig, maar het is dan ook om te 'rommelen'. :-)

http://www.lucyonline.nl/excluservice/oefenpagina-3/oefenpagina-3.html

George

Rob

unread,
May 3, 2013, 4:07:19 PM5/3/13
to
Een div met align="center" dat werkt niet.
Dat werkt wel met een table tag. Maar ja een table dat "mag niet" he?
Zelf gebruik ik voor ongeveer dit doel op onze eigen websites ook
nog steeds tables...

Je kunt wel die div een class of id mee geven waaraan je
in je stylesheet weer die "text-align: center;" stijl koppelt.

Eric Bednarz

unread,
May 3, 2013, 7:47:59 PM5/3/13
to
George <gvd...@xs4all.nl> writes:

> Ja, ik wil dus de buttons centreren in de pagina zelf.
> Hierbij de url van de pagina.

Goed idee.

> http://www.lucyonline.nl/excluservice/oefenpagina-3/oefenpagina-3.html

Zoek de verschillen.

http://sandbox.bednarz.nl/tmp/oefenpagina.png

robert

unread,
May 4, 2013, 1:56:25 AM5/4/13
to
Rob <nom...@example.com>:
> Maar ja een table dat "mag niet" he?

Voor tabellen 'mogen' tables gewoon, hoor. Voor vormgeving zijn ze toch
minstens een jaar of 10 niet meer nodig.

--
robert

George

unread,
May 5, 2013, 1:07:19 PM5/5/13
to
Op 3-5-2013 22:07, Rob schreef:
Sorry dat ik wat laat reageer; mooi weer, visite....

Bedankt voor je reactie; het is inmiddels, na veel vallen en opstaan
gelukt, om de knoppen te centreren.
E:\deb12285\excluservice\oefenpagina-3\oefenpagina-3.html

Gr, George

George

unread,
May 5, 2013, 1:16:18 PM5/5/13
to
Op 4-5-2013 01:47, Eric Bednarz schreef:
Sorry, ik begrijp niet goed wat je hiermee bedoelt.

text align: center; is om de tekst in de button te centreren
float: left; als je dit weghaalt, worden de buttons onder elkaar gezet
height: 15px; dit is voor de hoogte van de button, en dat is de goede hoogte

Die andere voorbeelden zeggen me niets..

Groet, george


George

unread,
May 5, 2013, 1:18:56 PM5/5/13
to
Op 5-5-2013 19:07, George schreef:
Sorry, de link moet zijn:
http://www.lucyonline.nl/excluservice/oefenpagina-3/oefenpagina-3.html

en... inderdaad, na frames worden zo langzaam ook de tabellen in de ban
gedaan...

Eric Bednarz

unread,
May 6, 2013, 5:51:42 PM5/6/13
to
George <gvd...@xs4all.nl> writes:

> Op 4-5-2013 01:47, Eric Bednarz schreef:
>> George <gvd...@xs4all.nl> writes:
>>
>>> Ja, ik wil dus de buttons centreren in de pagina zelf.
>>> Hierbij de url van de pagina.
>>
>> Goed idee.
>>
>>> http://www.lucyonline.nl/excluservice/oefenpagina-3/oefenpagina-3.html
>>
>> Zoek de verschillen.
>>
>> http://sandbox.bednarz.nl/tmp/oefenpagina.png
>>
>
> Sorry, ik begrijp niet goed wat je hiermee bedoelt.

Volgens mij beodelde ik ermee te laten zien hoe je de buttons kan
centreren in de pagina zelf.

> text align: center; is om de tekst in de button te centreren
> float: left; als je dit weghaalt, worden de buttons onder elkaar gezet

http://sandbox.bednarz.nl/tmp/oefenpagina-spiekbriefje.png

> height: 15px; dit is voor de hoogte van de button, en dat is de goede hoogte

Als ik even uit de hoogte mag praten, de *goede* hoogte is 'auto', maar
wellicht is dat nog even te hoog gegrepen. :^)

George

unread,
May 7, 2013, 2:52:08 PM5/7/13
to
Op 6-5-2013 23:51, Eric Bednarz schreef:
Het is bij mij al snel 'te hoog gegrepen' hoor, maar dit snapte ik nog
net. Met 'auto' wordt de knop iets te hoog, vandaar...

Bedankt voor de les....

Erick T. Barkhuis

unread,
May 7, 2013, 3:31:16 PM5/7/13
to
George:

>Op 6-5-2013 23:51, Eric Bednarz schreef:

>>>height: 15px; dit is voor de hoogte van de button, en dat is de
>>>goede hoogte
>>
>>Als ik even uit de hoogte mag praten, de goede hoogte is 'auto',
>>maar wellicht is dat nog even te hoog gegrepen. :^)
>
>Het is bij mij al snel 'te hoog gegrepen' hoor, maar dit snapte ik
>nog net. Met 'auto' wordt de knop iets te hoog, vandaar...

Oh, práchtig!

--
Erick
(pakt de popcorn er bij)

Eric Bednarz

unread,
May 8, 2013, 6:01:54 PM5/8/13
to
George <gvd...@xs4all.nl> writes:

>>> height: 15px; dit is voor de hoogte van de button, en dat is de goede hoogte
>>
>> Als ik even uit de hoogte mag praten, de *goede* hoogte is 'auto', maar
>> wellicht is dat nog even te hoog gegrepen. :^)
>
> Het is bij mij al snel 'te hoog gegrepen' hoor, maar dit snapte ik nog
> net. Met 'auto' wordt de knop iets te hoog, vandaar...

Als de knop iets te hoog is kan je dat probleem prima ontknopen
m.b.v. padding en eventueel line-height.

Met een vaste hoogte - en dan nog eens in pixels - is je knop voordat je
het weet bij iemand anders te laag; dat *mag* je natuurlijk willen, maar
*verplicht* om dit sort dingen slecht te doen ben je alleen als je in
opdracht van de gemiddelde top-10 e-marketing toko werkt.

George

unread,
May 11, 2013, 7:00:11 AM5/11/13
to
Op 9-5-2013 00:01, Eric Bednarz schreef:
Bedank voor je aanvullende info. Ik ga het eens met verschillende
browsers (en instellingen) bekijken. Ik ben een eenvoudig amateurtje op
dit gebied, dus van de gegeven tips pik ik altijd weer wat mee. Mooi!
0 new messages