css hacks achtergrond

[dejobse]

Beste mensen,

Ik ben momenteel aan de site glasfiltermedium.eu de huidige pagina's kan je momenteel hier vinden.

Nu in firefox werkt alles zoals gewoonlijk mooi en leuk zonder enige fout. de kleine foutjes van de sitemap kan ik zelf wel oplossen maar de achtergrond is een groter probleem.. de achtergronden werken niet.. alleen de kleur wordt weergegeven.

De css voor de achtergronden:

	background-image:  url(../pics/bgschaduw.png), url(../pics/bgtop.png) , url(../pics/bgbot.png);
	background-repeat:  repeat-y, repeat-x , repeat-x;
	background-position: center, top , bottom;
	background-color:#CCC;

Dan heb ik ook nog iets. Dit heb ik zelf ooit is uitgevonden, geen idee of het mag of niet maar in firefox wel, zelf een soort tag's maken maar dan anders:

groen{
	color:#0C0;
}
rood{
	color:#C00;
}

Als ik nu tekst tussen <groen></groen> zet wordt deze tekst groen, altans in firefox.. in internet explorer werkt dit niet.


Nu mijn vraag is hoe ik dit op zou kunnen lossen?


In ieder geval alvast bedankt.

 

[tecsman]

De css voor de achtergronden:

background-image:  url(../pics/bgschaduw.png), url(../pics/bgtop.png) , url(../pics/bgbot.png);
background-repeat:  repeat-y, repeat-x , repeat-x;
background-position: center, top , bottom;
background-color:#CCC;

Dit kan helemaal niet werken. Drie achtergrond images bij één selector is hardstikke illegaal. Net als de repeat-x herhalen en drie verschillende posities.
Ik snap wel dat elk van die drie posities bedoeld is voor één image,
maar je mag het niet zo coderen.
http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Fglasfiltermedium.eu%2Fsite%2Fnl%2Findex.php

Dan heb ik ook nog iets. Dit heb ik zelf ooit is uitgevonden, geen idee of het mag of niet maar in firefox wel, zelf een soort tag's maken maar dan anders:

groen{ color:#0C0;}
rood{ color:#C00;}

Als ik nu tekst tussen <groen></groen> zet wordt deze tekst groen, altans in firefox.. in internet explorer werkt dit niet.

In HTML? Lijkt me sterk.

Als je met XML gaat experimenteren zou het kunnen;
in XML mag je je eigen tags maken
maar dan moet je ze wel hebben gedefinieerd in je DTD of XML Schema.

 

[dejobse]

Met xml heb ik nog geen ervaring dus ga ik dit ook niet gebruiken in deze site, ook vrij onmogelijk om dit nu nog toe te voegen in de site denk ik...

Maar in firefox werkt het toch allemaal... oke ik begrijp dat het heel slecht ge schreven is, vind ik ook, maar dit was het eenige wat ik kon bedenken... Hier moet dan toch een andere manier voor zijn?

bedankt voor je reactie

 

[tecsman]

Hier moet dan toch een andere manier voor zijn?

Als je een achtergrond wilt die uit meerdere images bestaat
zul je elke image moeten ophangen aan een ander element.

Als je een <div> hebt met daarin een <p>
heb je al twee 'hooks' om iets aan op te hangen.

Een <div> met daarin een <h2> en een <p> geeft je al drie hooks.

Deze techniek staat je niet alleen toe om meerdere background-images te gebruiken,
maar is meteen ook een goeie implementatie van gestructureerde tekst;
koppen plaats je in <h1(,2,3,4)>-elementen en tekst in <p>-elementen en niet los in <div>-jes.

De praktische uitwerking van het gebruik van verschillende elementen om background-images aan op te hangen
staat prima beschreven in het boek van Dan Cederholm, Bulletproof web design

 

[dejobse]

Dank je voor hulp, maar als je een bg toewijst aan een p of een h1,2,3,4 dan kan je toch enkel een extra bg zetten in je content aangezien deze hier worden gebruikt?

Ik weet dat mijn coding niet zo goed is maar meestal werkt dit wel trouwens, dit komt doordat ik alles op mezelf heb geleerd en dan ook het meeste zelf uitgezocht... zo onthoud je het beter maar mijn maniertjes zijn niet schitterend, i know.

maar dus, moet ik dan nog een divje rond mijn buitenste container zetten met daarin een bg?

Edit ik heb wat zitten zoeken, en ik kwam erop uit dat de manier waarop ik meerdere achtergronden in mijn site zet helemaal niet "illigaal" is het mag gewoon het is enkel css3 dus alleen de moderne browsers kunnen dit weergeven...

 

[csshunter]

Hoi dejobse,
Eerst even over de rode en groene vinkjes op de pagina http://glasfiltermedium.eu/site/nl/werking.php.
En om te beginnen: er zijn in Nederland zo'n 1,3 miljoen mensen met een vorm van kleurenblindheid (bron: www.kleurenblindheid.nl). Een slecht onderscheidend vermogen voor rood/groen komt daarbij nogal vaak voor. Een voorbeeld (getest met de kleurenblindheid-simulator http://homepage.mac.com/lpetrich/ColorBlindnessSim/WebpageCBSim.xhtml):

Vandaar dat als stelregel geldt: maak een website nooit van alleen kleuren afhankelijk.
Gebruikelijk is, om bij dit soort tabellen met voordelen/nadelen ofwel een + en - teken te gebruiken, ofwel een vinkje en een kruisje. Als "extra" kunnen die dan ook nog een kleurtje krijgen.

Om een stukje tekst groen of rood te krijgen, hoef je verder geen eigengemaakte tags te gebruiken. Dit kan gewoon met een css-class:

.rood {
   color: red;
   font-weight: bold;
   }
.groen {
   color: green;
   font-weight: bold;
   }

Hiermee worden ze tegelijkertijd altijd vet getoond, dan hoeft het <strong> er in de html ook niet telkens bij.
Als ophangpunt/kapstok/"hook" kan je in de html een <span> gebruiken:

<span class="groen">√</span>
en
<span class="rood">X</span>

Met vriendelijke groet,
CSShunter
__________
PS: ik zou nog even kijken of alle kleurtjes goed staan. Het komt me voor dat bv. bij [ecologisch verantwoord: GFM+ 100%] de kleur groen en niet rood van toepassing is.

 

[dejobse]

hey bedankt voor je antwoord, en jah van die kleuren kwa vinkje en xje trek ik me minder aan omdat het zo de opdracht is, eigenlijk gewoon snel een worddoc gekopierd en hier een opmaak aan gegeven... maar het is met die kleuren theorie wel een beter plan om ook xjes te zetten en deze kleuren staan volgens mij ook fout maar deze staan zo als ik de tabel heb gekregen dus ga ik ze niet veranderen ^^ wel jammer dat je dus echt geen tags kan maken al gaat dit duidelijk wel in css3, ik kan niet wachten tot dit de standaard is! heb je toevallig ook een idee van hoe ik de achtergrond moet fixen, gewoon meerdere divs rond mijn container zetten en dan alle margin padding op 0 zetten en dan een bg toewijzen? is dit dan een betere manier?

Dan heb ik eigenlijk nog een vraagje. de hoogte van men container minimum tot vanonder zetten, dit gaat dus niet door min-height: 100% wat ik best wel raar vind...

maar goed alvast bedankt!

 

[csshunter]

wel jammer dat je dus echt geen tags kan maken al gaat dit duidelijk wel in css3, ik kan niet wachten tot dit de standaard is!

Huh? :shocked:
Tags zijn html, en geen css. Dus css3 zal geen uitkomst bieden.
Verder zitten er in de aanstormende html5 wel een serie nieuwe tags (= elementen; evenals nieuwe attributen/eigenschappen), maar ook daar is het zelf kunnen maken van <tags> er niet bij.
Gelukkig maar! Want anders zou bv. iemand de tag <font> gaan verzinnen.
En dan zou ook het universele (uitwisselbare) karakter van html compleet naar de haaien zijn.

• Blijft staan: in XML kan het wel, maar XML is niet 1-2-3 hetzelfde als (x)html (zie reactie nr. #2 van tecsman).

Dan de achtergrond-images uit de startvraag.
Ehm, even kijken:

• de html geef je het background-img bgtop.png, met repeat-x en de grijze bg-kleur.
• de body geef je het bg-img bgbot.png, met repeat-x en positie 0 100%, maar zonder bg-kleur.
• de #container geef je links en rechts een padding van 30px, en krijgt als bg-img de bgschaduw.png, met repeat-y.
• de overige bg-images kan je nu regelen binnen de #container.

Geen css3 meer nodig, alle browser(versie)s blij!

En de vraag over de min-height 100% van de #container: die krijgt alleen een min-height, als bekend is waarvan het dan 100% moet zijn. D.z.w. de html en de body moeten ook een height van 100% toegewezen krijgen, dan is er een aanknopingspunt in de omvattende elementen. Ter compensatie van de 100% height van de body zal er voor de body een {overflow:auto;} nodig zijn, dan komt er een scrollbar bij de grote pagina's.

Met vriendelijke groet,
CSShunter