[CSS] voor dummies - deel 9

Index

» digital corner

» development

actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
pi_62135021
quote:
Op zaterdag 4 oktober 2008 20:11 schreef mcDavid het volgende:
ik knal er meestal gewoon "yellow", "red", "blue", "grey", "purple", of wat me maar te binnen schiet in
Voor grote vlakken vind ik die kleuren niet echt prettig om naar te kijken. En daarbij is die kleurcode meestal korter
fokstok.nl
  zondag 5 oktober 2008 @ 10:01:37 #252
12880 CraZaay
prettig gestoord
pi_62142698
quote:
Op zaterdag 4 oktober 2008 19:28 schreef mcDavid het volgende:

overigens is het aan te raden om je div's tijdens het maken even een opvallende achtergrondkleur en border te geven, dan zie je beter hoe ze precies lopen
Die borders daar ben ik het niet mee eens: die maken je div aan alle kanten een pixel groter en zorgt daarom vaak voor verneukte lay-outs (bij mij iig).
pi_62169202
quote:
Op zaterdag 4 oktober 2008 20:06 schreef Light het volgende:

[..]

Ik gebruik meestal #ff8, #f8f, #8ff, #f88, #8f8 of #88f als ik even tijdelijk een opvallende lichte achtergrondkleur nodig heb. Die kleuren zijn herkenbaar genoeg, en als je een donkere tekst op een lichte achtergrond plaatst dan blijft de tekst ook leesbaar met die achtergrondkleurtjes.
#00FF00 hier
goede tip trouwens
pi_62170303
Containers even een felle kleur geven is sowieso verstandig als je een HTML layout uit je mouw gaat schudden. Al is het alleen om het hoofdgedeelte visueel even in beeld te brengen, meestal heb je immers een hoofdcontainer, header, mogelijk ook een footer en meerdere kolommen.
pi_62326364
*met blogspot css klooi*

Pfff... wat heeft blogspot er een hoop. Voor een leek als ik best lastig om de draad te volgen. Net wat zitten editten met Dreamweaver, en 'k heb de css in ieder geval extern nu.

Vage verschillen tussen Explorer en Firefox ook. Zal wel met margin en padding te maken hebben ofzo.

Misschien is 't handiger om vanuit het niets een css te maken ipv een bestaande blogspot-css aan te passen.
pi_62340926
quote:
Op zondag 12 oktober 2008 13:55 schreef DennisMoore het volgende:
*met blogspot css klooi*

Pfff... wat heeft blogspot er een hoop. Voor een leek als ik best lastig om de draad te volgen. Net wat zitten editten met Dreamweaver, en 'k heb de css in ieder geval extern nu.

Vage verschillen tussen Explorer en Firefox ook. Zal wel met margin en padding te maken hebben ofzo.

Misschien is 't handiger om vanuit het niets een css te maken ipv een bestaande blogspot-css aan te passen.
Heb je de web developer firefox addon al geinstalleerd?

ctrl-shift-f en er gaat een wereld voor je open!
  maandag 13 oktober 2008 @ 11:39:42 #257
12880 CraZaay
prettig gestoord
pi_62346747
quote:
Op maandag 13 oktober 2008 00:33 schreef mcDavid het volgende:

[..]

Heb je de web developer firefox addon al geinstalleerd?

ctrl-shift-f en er gaat een wereld voor je open!
En vergeet Firebug niet met YSlow. Die 3 Firefox plugins zijn echt onmisbaar imo.
pi_62347572
'k Ga eens experimenteren .

De ctrl-shift-f is trouwens gekaapt door Foxmarks...
-edit- @ Google

[ Bericht 28% gewijzigd door DennisMoore op 13-10-2008 12:26:12 ]
  dinsdag 14 oktober 2008 @ 14:04:39 #259
134533 donroyco
dus niet Donroyco
pi_62376608
Waarom is amazinglyenigmatic.nl in IE zo anders? Ik weet niet waar de fout zit Inmiddels is het positioneren van de 'geopend blabla' wel al gelukt..

Nu nog de tekst..


[ Bericht 24% gewijzigd door donroyco op 14-10-2008 14:15:17 ]
Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
  dinsdag 14 oktober 2008 @ 17:39:36 #260
134533 donroyco
dus niet Donroyco
pi_62382246
quote:
Op dinsdag 14 oktober 2008 14:04 schreef donroyco het volgende:
Waarom is amazinglyenigmatic.nl in IE zo anders? Ik weet niet waar de fout zit Inmiddels is het positioneren van de 'geopend blabla' wel al gelukt..

Nu nog de tekst..
Iemand die het weet?
Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
pi_62384166
Omdat je totaal geen natuurlijke float hebt?

Ik kan trouwens niet ontdekken in welke browser je 'getest' hebt, het staat bij allebei schots en scheef.

-edit-
en vraag je ook eens af hoe je site eruit ziet in een browservenster met een andere grootte.
pi_62486295
Is iemand hier bekend met een fout in Internet Explorer 7, waarbij een foto ineens horizontaal gesplitst wordt? Het vage is vooral, dat dit maar heeeeel soms gebeurd, en niet eens steeds bij dezelfde foto.
you and I ain't done Zeke!
  zaterdag 18 oktober 2008 @ 17:04:06 #263
134533 donroyco
dus niet Donroyco
pi_62486406
quote:
Op dinsdag 14 oktober 2008 19:03 schreef mcDavid het volgende:
Omdat je totaal geen natuurlijke float hebt?

Ik kan trouwens niet ontdekken in welke browser je 'getest' hebt, het staat bij allebei schots en scheef.

-edit-
en vraag je ook eens af hoe je site eruit ziet in een browservenster met een andere grootte.
Misschien een ietwat late reactie, maar dank je wel voor de moeite.. het probleem is inmiddels opgelost
Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
  zaterdag 18 oktober 2008 @ 17:25:02 #264
134533 donroyco
dus niet Donroyco
pi_62486889
Even een header gemaakt voor de OP:

Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
pi_62790839
Ik wil een menu hebben op m'n testpaginaatje:
De items staan in LI's in een UL. De UL heb ik een class meegegeven die zorgt dat het ding 800px breed is, zodat er een border om kan.
De LI's wil ik nu rechts uitlijnen. Hoe doe ik dat? Ik laat ze nu left floaten zodat ze naast elkaar staan, en dat gaat keurig. Right laten floaten heeft ongeveer het gewenste effect, behalve dat de items dan, logisch, achterstevoren staan. Dat in de HTML oplossen lijkt me geen vriendelijke oplossing. Is er een nette oplossing te bedenken, of moet ik gewoon een div toevoegen die ik de border geef, en daar de UL in mikken die ik rechts uitlijn, waarbinnen de LI's weer left floaten?
pi_62790907
ik denk dat dat laatste de beste oplossing is idd..
pi_62790946
Was er al bang voor. Ik probeer de DIVs zoveel mogelijk te beperken, maar als't moet...!
pi_62791237
Mwoah, hoewel je dr natuurlijk niet onnodig mee moet gaan strooien (hyves ) maakt het niet zoveel uit volgens mij. Divs betekenen verder niets dus behalve dat het wat extra bits zijn, zal het weinig effect hebben op de performance van je site.
  woensdag 29 oktober 2008 @ 20:01:43 #269
145090 HenkBenzinetank
Toegevoegde waarde
pi_62791406
@veldmuis: text-align: right is niet wat je bedoelt?
pi_62791562
Nee, het spul float al naar links binnen de UL, en die float overruled de text-align geloof ik.
pi_62791584
quote:
Op woensdag 29 oktober 2008 19:55 schreef mcDavid het volgende:
Mwoah, hoewel je dr natuurlijk niet onnodig mee moet gaan strooien (hyves ) maakt het niet zoveel uit volgens mij. Divs betekenen verder niets dus behalve dat het wat extra bits zijn, zal het weinig effect hebben op de performance van je site.
Ik dacht dat het bij SEO wel wat kan uitmaken?
pi_62791591
quote:
Op woensdag 29 oktober 2008 20:01 schreef HenkBenzinetank het volgende:
@veldmuis: text-align: right is niet wat je bedoelt?
Met text-align: right zorg je ervoor dat de tekst in de li's rechts wordt uitgelijnd. De enige manier om dan te zorgen dat het laatste menu-item tegen de rechterkantlijn komt te staan, is door te zorgen dat de li's zodanig worden verdeeld dat het precies uitkomt.
fokstok.nl
pi_62791645
quote:
Op woensdag 29 oktober 2008 20:06 schreef veldmuis het volgende:
Nee, het spul float al naar links binnen de UL, en die float overruled de text-align geloof ik.
float en text-align zijn verschillende dingen. En je kunt best een element float: left; en text-align: right; meegeven.
fokstok.nl
pi_62791693
quote:
Op woensdag 29 oktober 2008 19:43 schreef veldmuis het volgende:
Ik wil een menu hebben op m'n testpaginaatje:
De items staan in LI's in een UL. De UL heb ik een class meegegeven die zorgt dat het ding 800px breed is, zodat er een border om kan.
De LI's wil ik nu rechts uitlijnen. Hoe doe ik dat? Ik laat ze nu left floaten zodat ze naast elkaar staan, en dat gaat keurig. Right laten floaten heeft ongeveer het gewenste effect, behalve dat de items dan, logisch, achterstevoren staan. Dat in de HTML oplossen lijkt me geen vriendelijke oplossing. Is er een nette oplossing te bedenken, of moet ik gewoon een div toevoegen die ik de border geef, en daar de UL in mikken die ik rechts uitlijn, waarbinnen de LI's weer left floaten?
De UL width: auto; en float: right; meegeven, de LI's dan float: left; En dat in de DIV met de border.
fokstok.nl
pi_62791878
quote:
Op woensdag 29 oktober 2008 20:01 schreef HenkBenzinetank het volgende:
@veldmuis: text-align: right is niet wat je bedoelt?
Dat gaat niet werken in dit geval.. het was een ander verhaal als 't over met list items met een inline position ging

edit: moet toch eens wat vaker refreshen..
pi_62791938
quote:
Op woensdag 29 oktober 2008 20:09 schreef Light het volgende:

[..]

float en text-align zijn verschillende dingen. En je kunt best een element float: left; en text-align: right; meegeven.
Dat snap ik, maar als ik de float:left zou weglaten en wel een text-align: right meegeef staat het lijstje wel rechts in de UL. Zo bedoelde ik het
quote:
Op woensdag 29 oktober 2008 20:11 schreef Light het volgende:

[..]

De UL width: auto; en float: right; meegeven, de LI's dan float: left; En dat in de DIV met de border.
Zo heb ik het nu idd ook opgelost . Werkt prima, jammer dat er een DIV bij moet .
pi_62792225
quote:
Op woensdag 29 oktober 2008 @ 20:07 schreef veldmuis het volgende:

[..]

Ik dacht dat het bij SEO wel wat kan uitmaken?
theoretisch wel misschien... maar ik geloof daar niet zo in.

Nou ken ik de scan-algoritmes van google natuurlijk niet, maar kan me niet voorstellen dat een divje meer of minder van invloed is op je score.
  woensdag 29 oktober 2008 @ 20:39:53 #278
145090 HenkBenzinetank
Toegevoegde waarde
pi_62792653
quote:
Op woensdag 29 oktober 2008 20:07 schreef Light het volgende:

[..]

Met text-align: right zorg je ervoor dat de tekst in de li's rechts wordt uitgelijnd. De enige manier om dan te zorgen dat het laatste menu-item tegen de rechterkantlijn komt te staan, is door te zorgen dat de li's zodanig worden verdeeld dat het precies uitkomt.
i know, ik snapte alleen niet precies wat veldmuis bedoelde;
pi_62829057
morge allemaal,

Ik ben al een tijdje bezig met het ontwerpen van een template en wil het volgende bereiken.
een 100% height pagina met bover een header en beneden een footer die een vaste hoogte hebben.
Ik wil de pagina helemaal opbouwen met DIVjes en heb al heel veel artikelen gevonden over een 100% height DIV echter wil het nog niet helemaal werken.

Ik heb de pagina nu in IE en ook alleen in IE zoals ik hem wil hebben, pagina staat hieronder weergegeven
maar heb de HTML en BODY tags weg moeten halen om dit resultaat te krijgen.

kan iemand mij vertellen wat ik verkeerd doe of hoe ik dit ook werkend krijg in FF?

alvast bedankt.. Groetjes Ronny


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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111		<style TYPE="text/css">

body
 {
  margin:0;
  padding:100px 0 22px 0;

 }

  * html body
 {
  overflow:hidden;
 } 

 * html div#content
 {
  height:100%;
  overflow:hidden;
 }

 div#header{
  position:absolute;
  background-image: url(./IMG/Top.png);
  top:0;
  left:0;
  width:100%;
  height:75px;
 }
 div#menubar
 {
  background-color:#f9ffff;
  position:absolute;
  border:solid 1px #CCCCCC;
  border-left:0;
  border-right:0;
  top:75px;
  left:0;
  width:100%;
  height:25px;
 }
 div#footer
 {
  background-color:#f9ffff;
  position:absolute;
  border:solid 1px #CCCCCC;
  border-bottom:0px;
  border-left:0px;
  border-right:0px;
  bottom:0;
  left:0;
  width:100%;
  height:22px;
 }
 
 div#menutree
 {
  border:solid 1px #CCCCCC;
  overflow-y:scroll;
  background-color:#f9ffff;
  position:absolute;
  left: 0px;
  border-bottom:0px;
  border-left:0px;
  border-top:0px;
  top:0px;
  width:160px;
  height:100%;
  z-index:2;
 }
 div#main
 {
  border:solid 0px #CCCCCC;
  overflow-y:scroll;
  padding-left:160px;
  background-color:#FFFFFF;
  position:absolute;
  right: 0px;
  top:0px;
  width:100%;
  height:100%;
  z-index:1;
 }
 
 
 @media screen
 {
  body>div#header
  {
   position:fixed;
  }
  body>div#menubar
  {
   position:fixed;
  }
  body>div#footer
  {
   position:fixed;
  }
 }
 
</style>


<div id="header">Top</div>
<div id="menubar">Menubar</div>
<div id="footer">Footer</div>

<div id="content">
    <div id="menutree">Menutree</div>
    <div id="main">Content</div>
</div>


[ Bericht 31% gewijzigd door Ronster op 31-10-2008 08:30:41 ]
pi_62829183
Kun je die zooi eens tusseen [ code] en [ /code] zetten? (en dan zonder spaties na de [ )
fokstok.nl
pi_62829295
owja had de verkeerde tags gebruikt
pi_62832683
Ik heb een z-index probleem en kan er niet achterkomen hoe en waar deze vandaan komt.

Voor een site wil ik een transparante achtergrond gebruiken en daar overheen een div met inhoud laten vallen.

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		#blackout {
    opacity:.7;
    filter:alpha(opacity=70);
    position:absolute; 
    left:0; 
    top:0; 
    width:100%; 
    height:2000px; 
    z-index:3; 
    background-image:url('/layout/images/darkbackgroundimage.gif');
    display: none;
}

#popupproduktopties { 
    z-index: 4; 
    position: absolute; 
    top: -100px; 
    left: 10%; 
    width: 600px; 
    height: 500px; 
    display: block; 
    background: #fff; 
    border: 5px solid black; 
    overflow: scroll;
}


Nu heb ik 2 divjes met bovenstaande namen, echter de div blackout maakt de achtergrond 'grijs' maar de 2e div valt ook onder het grijze gedeelte terwijl deze er op moet liggen? wat doe ik fout?

Ik denk dat ik trouwens de fout al weet, de div ligt in binnen andere divs, vandaar dat de z-index meegenomen wordt, is hier een workaround voor?
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_62835507
quote:
Op vrijdag 31 oktober 2008 @ 11:10 schreef Chandler het volgende:
Ik heb een z-index probleem en kan er niet achterkomen hoe en waar deze vandaan komt.

Voor een site wil ik een transparante achtergrond gebruiken en daar overheen een div met inhoud laten vallen.
[ code verwijderd ]

Nu heb ik 2 divjes met bovenstaande namen, echter de div blackout maakt de achtergrond 'grijs' maar de 2e div valt ook onder het grijze gedeelte terwijl deze er op moet liggen? wat doe ik fout?

Ik denk dat ik trouwens de fout al weet, de div ligt in binnen andere divs, vandaar dat de z-index meegenomen wordt, is hier een workaround voor?
Nope, Z-index werkt alleen voor elementen die op het zelfde niveau genest zitten.
Makkelijkste manier is gewoon de 'hoogste' div nesten in de achtergronddiv lijkt me.
pi_62836667
Hmm.. Ik denk dat het in dit geval pittig gaat worden maar toch bedankt voor je reactie! weer wat geleerd
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_62839619
IE6... aargh. Heerlijk dat de browser er compleet uit klapt wanneer je +/- 50 transparent PNG objecten in je CSS hebt zitten.
pi_62852091
quote:
Op vrijdag 31 oktober 2008 @ 15:24 schreef Geqxon het volgende:
IE6... aargh. Heerlijk dat de browser er compleet uit klapt wanneer je +/- 50 transparent PNG objecten in je CSS hebt zitten. :+
:') Trieste boel heh. Maarja wat wil je met een browser van 7 jaar oud.

Meestal heb ik zoiets van "dan maar lelijke plaatjes hoor". Heb wel een keer een 'hack' gebruikt.

1
2
3
4		#shadow            {background: url("/images/schaduw.png") repeat;}

/* IE6 hack */
* html #shadow         {background-color:#000;back\ground-color:transparent;background-image:url(blank.gif);filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/images/schaduw.png", sizingMethod="scale");}
pi_62852707
quote:
Op vrijdag 31 oktober 2008 23:04 schreef mcDavid het volgende:

[..]

Trieste boel heh. Maarja wat wil je met een browser van 7 jaar oud.

Meestal heb ik zoiets van "dan maar lelijke plaatjes hoor". Heb wel een keer een 'hack' gebruikt.
[ code verwijderd ]



Heb ik ook in de CSS gebruikt. En dan een keer of 40. En toen bevroor IE6 compleet bij het bezoeken van de website. Het was dan ook zo'n heerlijke hippe ronde hoekjes website.
  vrijdag 31 oktober 2008 @ 23:30:01 #288
145090 HenkBenzinetank
Toegevoegde waarde
pi_62852732
dr zijn ook andere manieren om ie png's e laten slikken ipv 50x hetzelfde opnemen in de css
pi_62853009
quote:
Op vrijdag 31 oktober 2008 23:30 schreef HenkBenzinetank het volgende:
dr zijn ook andere manieren om ie png's e laten slikken ipv 50x hetzelfde opnemen in de css
Maar dan nog mis je functionaliteit. Zo vind ik het erg frustrerend dat de background-*.* elementen niet meer werken als je een PNGfix toepast in Internet Explorer 6.

zelf neem ik altijd het volgende op in mijn IE6 conditional comment:
quote:
#div,
#div h1,
#div .subdiv {
behavior:url(iepngfix.htc);
}
you and I ain't done Zeke!
  vrijdag 31 oktober 2008 @ 23:47:29 #290
145090 HenkBenzinetank
Toegevoegde waarde
pi_62853019
ook daar is een fix voor

edit
beter lezen, repeat en position werken nog steeds niet
pi_62853073
Idd als je zoiets 50x moet doen, kun je denk ik beter een javascript hack zoeken!

Heb ik toendertijd ook naar gekeken. Zijn over het algemeen een stuk omslachtiger, maar wel vaak in één keer voor de hele pagina klaar.

Maar, tegenwoordig is het gebruik van IE6 naar mijn mening ver genoeg afgenomen om die mensen dan maar een paar grijze randjes voor te schotelen. Evt. met de mededeling dat ze hun browser moeten upgraden voor optimaal kijkgemak.

[edit]
niezosnelineensjoh!
pi_62853194
quote:
Op vrijdag 31 oktober 2008 23:47 schreef HenkBenzinetank het volgende:
ook daar is een fix voor

edit
beter lezen, repeat en position werken nog steeds niet
Er is een nieuwe versie van iepngfix die wel ondersteuning heeft voor repeat en position. Zie hier
fokstok.nl
  zaterdag 1 november 2008 @ 00:01:55 #293
145090 HenkBenzinetank
Toegevoegde waarde
pi_62853289
o ja, dat was ;m

heb het laatst nog gebruikt voor een site maar kon het niet meer vinden
pi_62853781
quote:
Op vrijdag 31 oktober 2008 23:30 schreef HenkBenzinetank het volgende:
dr zijn ook andere manieren om ie png's e laten slikken ipv 50x hetzelfde opnemen in de css
Het zijn achtergrondafbeeldingen voor diverse objecten. Dat is niet met javascript aan te passen.

Tuurlijk, voor de IMG objecten met een transparante PNG gebruik ik wel javascript. Al voer je daar hetzelfde uit, dus het maakt geen verschil of je het met CSS of JS doet.

Het feit dat IE6, op welke computer dan ook, volledig crashde op deze website, is wel erg triest.
pi_62853927
quote:
Op zaterdag 1 november 2008 @ 00:29 schreef Geqxon het volgende:

[..]

Het zijn achtergrondafbeeldingen voor diverse objecten. Dat is niet met javascript aan te passen.
wie heeft je dit wijsgemaakt?
pi_62854134
quote:
Op zaterdag 1 november 2008 00:37 schreef mcDavid het volgende:

[..]

wie heeft je dit wijsgemaakt?
Hoe wil jij dan via javascript een in CSS aangeduidt achtergrond-property oproepen? Is niet mogelijk.
pi_62854168
quote:
Op zaterdag 1 november 2008 @ 00:51 schreef Geqxon het volgende:

[..]

Hoe wil jij dan via javascript een in CSS aangeduidt achtergrond-property oproepen? Is niet mogelijk.
object.style.background="..."
pi_62854199
quote:
Op zaterdag 1 november 2008 00:53 schreef mcDavid het volgende:

[..]

object.style.background="..."
Als ik die opvraag van een object waarbij de background-image in CSS is aangegeven krijg je een lege waarde.
pi_62854297
Hmm daar heb je idd gelijk in.

Mot je ook ff een scriptje schijven dat die achtergrondafbeeldingen ook nog een keer via DOM invoegt
pi_62854309
Kijk, een plaatje van de filter voorzien is simpel. Even in een for-lusje over alle PNG objecten een simpel scriptje:

1
2
3
4
5
6
7
8		   oldSrc = new String(pngObject.src);
   oldWidth = new String(pngObject.width);
   oldHeight = new String(pngObject.height);

      pngObject.src = "images/pixel_trans.gif";
      pngObject.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + oldSrc + "', sizingMethod='scale')";
      pngObject.style.width = oldWidth;
      pngObject.style.height = oldHeight;


Maar bij bijvoorbeeld een H3 met een background-image propery in CSS kun je niet de background-image property aanvragen.
actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
[CSS] voor dummies - deel 9
Index

» digital corner

» development

Forum Opties
Forumhop:
Hop naar:
(afkorting, bv 'KLB')