[CSS] voor dummies - deel 9

Index

» digital corner

» development

actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
pi_60944092
quote:
Op maandag 18 augustus 2008 22:53 schreef Light het volgende:
Een probleempje waar ik laatst mee zat en wat ik niet opgelost kreeg met css. Misschien heeft iemand hier nog een idee hoe het met css netjes moet kunnen?

Eerst het probleem:
[ code verwijderd ]

Waar het > staat moet een plaatje komen. Dat kan normaal heel goed met een list-style-image, maar dan zit ik in de knoop met de datum die daarvoor staat. Bij een andere variant waar die datum er niet is, wordt alles uiteraard als list weergegeven. En semantisch gezien is dit ook een lijst, dus wilde ik het ook zo weergeven. Maar door de vreemde plaatsing van de datum is me dat niet gelukt.

Heeft iemand een idee hoe ik dit had kunnen oplossen met een list, en wel zo dat als de titel na de > te lang wordt, deze gaat inspringen zodat alles netjes onder elkaar blijft staan?
Zorgen dat je datum altijd in hetzelfde formaat is (dus altijd dd-mm-yyyy en niet één keer d-mm-yy en de andere keer dd-m-yyyy) en deze een vaste breedte laten hanteren (monospace lettertype gebruiken?), vervolgens het plaatje als background-image, en de te 'wrappen' tekst in een span.
  dinsdag 19 augustus 2008 @ 09:37:42 #154
12880 CraZaay
prettig gestoord
pi_60944519
Of de datum in een span (of misschien is de datum zo belangrijk dat het een kop moet zijn?) en die een negatieve margin-left geven. Rest dan positioneren met padding-left en de afbeelding als achtergrondafbeelding. Dan maakt de breedte van de datum ook niet meer uit.
  zondag 24 augustus 2008 @ 18:19:11 #155
225631 Rotzooi
Herr Rotzooi voor u..
pi_61089845
tvp
And the number is 61.000.000, who has number 61.000.000? BINGO!
pi_61109770
hmm ik ben weer eens met mn menu-vanuit-een-database aan het stoeien, maar ik kom dr niet uit (klote css ).

Het menu heb ik qua opzet hiervandaan geplukt: http://tutorials.alsacreations.com/deroulant/

(grootste verschil is dat ik de opbouw als moeder/dochter structuur in een database heb staan en met 2 loopjes dit er uit pluk - dat werkt).

Enige wat mij niet lukt is het centreren ... op http://pestforum.nl/users/test.php draai ik een testje, op http://pestforum.nl/users/white.css staat't CSS - de boosdoener. left = 50% zet het linkerpunt van het menu mooi gecentreerd - maar ik wil dus het hele menu centreren.

Mocht iemand weten hoe - dan hoor ik het heel graag - Ik kan wel handmatig centreren, maar dat is niet echt een oplossing bij een dynamisch menu
pi_61114155
Help
  maandag 25 augustus 2008 @ 17:18:53 #158
145090 HenkBenzinetank
Toegevoegde waarde
pi_61114898
Komt ie dan he:

1
2
3
4
5
6
7
8		#menu {
height: 20px /* hoogte van de knoppen */'
width: 700px; /* breedte van het menu, nodig om te centreren */
margin: 0 auto; /* zet linker en rechter marges op automatisch, dus het menu in het midden */
top: 75px;
z-index: 100px;
line-height: /* finishing touch, centreer tekst verticaal */
}


persoonlijk vind ik het een beetje een zuur menu. Als je muis eraf hovert, blijft ie open staan.
pi_61119309
quote:
Op maandag 25 augustus 2008 14:00 schreef LeeHarveyOswald het volgende:
hmm ik ben weer eens met mn menu-vanuit-een-database aan het stoeien, maar ik kom dr niet uit (klote css ).

Het menu heb ik qua opzet hiervandaan geplukt: http://tutorials.alsacreations.com/deroulant/

(grootste verschil is dat ik de opbouw als moeder/dochter structuur in een database heb staan en met 2 loopjes dit er uit pluk - dat werkt).

Enige wat mij niet lukt is het centreren ... op http://pestforum.nl/users/test.php draai ik een testje, op http://pestforum.nl/users/white.css staat't CSS - de boosdoener. left = 50% zet het linkerpunt van het menu mooi gecentreerd - maar ik wil dus het hele menu centreren.

Mocht iemand weten hoe - dan hoor ik het heel graag - Ik kan wel handmatig centreren, maar dat is niet echt een oplossing bij een dynamisch menu
Om iets te centreren moet je het een breedte geven (en dan een kleinere breedte dan het element waar het in staat). Als je body 1000px breed is en je menu ook dan valt er niet veel te centreren En als je body 1000px breed is en je menu 500px dan kun je wel centreren. Probleem met een dynamisch menu is dat je niet weet hoeveel items er in zitten, dus hoe breed het menu moet worden. Dat kun je wel weer oplossen met een stukje javascript. Een idee is dan om in je template ( / html) een variabele te setten die aangeeft hoeveel menu-items er zijn. De rest regel je dan met een stukje javascript in een ander bestand.
fokstok.nl
pi_61119345
quote:
Op maandag 25 augustus 2008 17:18 schreef HenkBenzinetank het volgende:
Komt ie dan he:
[ code verwijderd ]

persoonlijk vind ik het een beetje een zuur menu. Als je muis eraf hovert, blijft ie open staan.
Eens. Ik vind de Son of Suckerfish-implementatie altijd wel handig. En lekker overzichtelijk klein
fokstok.nl
  maandag 25 augustus 2008 @ 20:06:10 #161
145090 HenkBenzinetank
Toegevoegde waarde
pi_61119578
quote:
Op maandag 25 augustus 2008 19:57 schreef Light het volgende:

[..]

Om iets te centreren moet je het een breedte geven (en dan een kleinere breedte dan het element waar het in staat). Als je body 1000px breed is en je menu ook dan valt er niet veel te centreren En als je body 1000px breed is en je menu 500px dan kun je wel centreren. Probleem met een dynamisch menu is dat je niet weet hoeveel items er in zitten, dus hoe breed het menu moet worden. Dat kun je wel weer oplossen met een stukje javascript. Een idee is dan om in je template ( / html) een variabele te setten die aangeeft hoeveel menu-items er zijn. De rest regel je dan met een stukje javascript in een ander bestand.
min-width zou dan kunnen werken
  maandag 25 augustus 2008 @ 20:09:57 #162
12880 CraZaay
prettig gestoord
pi_61119699
quote:
Op maandag 25 augustus 2008 20:06 schreef HenkBenzinetank het volgende:

min-width zou dan kunnen werken
Maar niet erg IE6 compatible helaas.
  maandag 25 augustus 2008 @ 20:19:52 #163
145090 HenkBenzinetank
Toegevoegde waarde
pi_61119950
Daar zijn oplossingen voor
  maandag 25 augustus 2008 @ 20:30:21 #164
12880 CraZaay
prettig gestoord
pi_61120306
quote:
Op maandag 25 augustus 2008 20:19 schreef HenkBenzinetank het volgende:
Daar zijn oplossingen voor
Geef die er dan meteen bij zou ik zeggen, anders is het een redelijk loze suggestie imo
  maandag 25 augustus 2008 @ 20:33:15 #165
145090 HenkBenzinetank
Toegevoegde waarde
pi_61120397
1
2
3
4
5
6
7
8
9		 
body {
  width: 100%;
  height: 100%;
  min-width:800px; /* This takes care of all the 'decent' browsers */
  margin: 0px;
  padding: 0px;  /*optional*/
  /* Optionally set text-align: center; and increase the padding if you wish to have the page centered with margins... */
}


of

1
2		min-width: 600px;
width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? "1200px" : "auto");


u vraagt, google draait
pi_61120570
quote:
Op maandag 25 augustus 2008 17:18 schreef HenkBenzinetank het volgende:
Komt ie dan he:
[ code verwijderd ]

persoonlijk vind ik het een beetje een zuur menu. Als je muis eraf hovert, blijft ie open staan.
1
2
3
4
5
6
7
8		#menu {
position: absolute;
width: 700px; /* breedte van het menu, nodig om te centreren */
margin: 0 auto; /* zet linker en rechter marges op automatisch, dus het menu in het midden */
top: 75px;
z-index: 100px;
line-height: /* finishing touch, centreer tekst verticaal */
}

Dit zou ook moeten werken als het menu breder is?

Dit is de variatie die ik daarop gebruikt heb (Zonder Pos. absolute; verplaatst de tekst als ik over het menu scroll). Nu lijnt hij hem volledig links uit (anders wel gecentreerd).

En de vaste knophoogte heb ik dr uitgesloopt, dit omdat een knop ook 2 regels kan bevatten. .
pi_61120599
quote:
Op maandag 25 augustus 2008 20:33 schreef HenkBenzinetank het volgende:

[ code verwijderd ]

of
[ code verwijderd ]

u vraagt, google draait
Dus dit is meer wat ik nodig heb?
  maandag 25 augustus 2008 @ 21:36:05 #168
12880 CraZaay
prettig gestoord
pi_61122523
CSS expressions zijn niet echt lekker overigens, heeft een sterke (negatieve) invloed op rendering van je pagina in een browser.
pi_61123893
quote:
Op maandag 25 augustus 2008 20:09 schreef CraZaay het volgende:

[..]

Maar niet erg IE6 compatible helaas.
IE6 moet dan ook dood.
fokstok.nl
  maandag 25 augustus 2008 @ 22:12:21 #170
12880 CraZaay
prettig gestoord
pi_61123986
quote:
Op maandag 25 augustus 2008 22:09 schreef Light het volgende:

IE6 moet dan ook dood.
Eensch. Maar maak dat die 30+% van alle internetgebruikers ook maar wijs
pi_61124187
quote:
Op maandag 25 augustus 2008 22:12 schreef CraZaay het volgende:

[..]

Eensch. Maar maak dat die 30+% van alle internetgebruikers ook maar wijs
Gewoon Windows Update gebruiken. Is dat ding toch ergens goed voor
fokstok.nl
pi_61124899
quote:
Op maandag 25 augustus 2008 22:18 schreef Light het volgende:

[..]

Gewoon Windows Update gebruiken. Is dat ding toch ergens goed voor
Sinds wanneer haalt die Firefox binnen?
pi_61125199
quote:
Op maandag 25 augustus 2008 22:39 schreef LeeHarveyOswald het volgende:

[..]

Sinds wanneer haalt die Firefox binnen?
Hmm.... goed punt.. Maar 'k maak liever iets voor IE7 dan voor IE6. IE7 werkt al 100x beter. (En voor de rest van de browserwars kunnen we vast beter een ander topic opzoeken.)
fokstok.nl
  maandag 25 augustus 2008 @ 22:56:06 #174
145090 HenkBenzinetank
Toegevoegde waarde
pi_61125506
Punt is alleen dat uitgerekend je klanten op hun kantoortjes vaak allemaal een verrotte windows xp installatie met IE6 hebben..
  maandag 25 augustus 2008 @ 23:02:44 #175
12880 CraZaay
prettig gestoord
pi_61125705
quote:
Op maandag 25 augustus 2008 22:56 schreef HenkBenzinetank het volgende:
Punt is alleen dat uitgerekend je klanten op hun kantoortjes vaak allemaal een verrotte windows xp installatie met IE6 hebben..
Yip. En je kan nog zo vurig willen dat mensen upgraden naar IE7, feit blijft dat 3 op alle 10 bezoekers IE6 gebruiken. Da's best veel
pi_61125984
quote:
Op maandag 25 augustus 2008 23:02 schreef CraZaay het volgende:

[..]

Yip. En je kan nog zo vurig willen dat mensen upgraden naar IE7, feit blijft dat 3 op alle 10 bezoekers IE6 gebruiken. Da's best veel
Zo'n 29% van de IE gebruikers van 2 van mijn sites (boeroendoek.nl en pestforum.nl) gebruiken op dit moment nog IE6. Dat is dus minder dan 1/3e van de IE gebruikers. 70% van de bezoekers is een IE bezoeker, dus pakweg 1/5e van de bezoekers is IE6 (en dat op ca. 5000 bezoekers/maand, redelijk representatief dus).

0,2% van de IE gebruikers gebruikt een versie ouder dan 6.0
  maandag 25 augustus 2008 @ 23:32:23 #177
12880 CraZaay
prettig gestoord
pi_61126708
Het ligt ook aan de doelgroep natuurlijk; de grotere publiekssites die ik ontwikkel hebben al gauw 90+% (!!) IE bezoekers. Nadeel van sites voor het grote publiek is dat ze vaak op scholen en kantoren gebruikt worden (en tussen 9.00 en 17.00 komt daar het merendeel van het bezoek vandaan), en daar hebben ze weer relatief veel IE6.

We zullen ermee moeten leven
pi_61130922
quote:
Op maandag 25 augustus 2008 23:32 schreef CraZaay het volgende:
Het ligt ook aan de doelgroep natuurlijk; de grotere publiekssites die ik ontwikkel hebben al gauw 90+% (!!) IE bezoekers. Nadeel van sites voor het grote publiek is dat ze vaak op scholen en kantoren gebruikt worden (en tussen 9.00 en 17.00 komt daar het merendeel van het bezoek vandaan), en daar hebben ze weer relatief veel IE6.

We zullen ermee moeten leven
Verschilt bij mij ook heel veel. Als ik de Boekenbox (uit m'n sig) of mijn blog neem dan zit ik gemiddeld op 57% Mozilla (waarvan 40% Firefox ouder dan versie 3.x), 15% IE7, 21% IE6 en de rest Safari/Opera/etc.

Bij de gemiddelde applicatie van m'n werk zit ik makkelijk boven de 80% aan IE gebruikers, waarvan het grootste percentage jammer genoeg nog steeds op IE6. Wel merk ik dat steeds meer mensen, zowel bij mijn thuisprojectjes als bij mijn grotere projecten op het werk, steeds meer interesse hebben in andere browsers en veel klanten ook al aangeven dat hun website/applicatie 'wel op alle browsers moet werken'. Goede ontwikkeling vind ik zelf, dan vallen al die prutsers die nog steeds enkel voor browser X devven al buiten de boot.
  dinsdag 26 augustus 2008 @ 11:36:06 #179
145090 HenkBenzinetank
Toegevoegde waarde
pi_61134091
Op mijn site (veel bezocht door creatieven) is het aandeel IE6 marginaal, Safari en Opera scoren (net als FF natuurlijk) veel hoger. Er is daarom vrijwel geen tijd gestoken in het IE6 compatibel maken
  dinsdag 26 augustus 2008 @ 11:54:39 #180
12880 CraZaay
prettig gestoord
pi_61134537
quote:
Op dinsdag 26 augustus 2008 11:36 schreef HenkBenzinetank het volgende:
Op mijn site (veel bezocht door creatieven) is het aandeel IE6 marginaal, Safari en Opera scoren (net als FF natuurlijk) veel hoger. Er is daarom vrijwel geen tijd gestoken in het IE6 compatibel maken
Lucky you
  dinsdag 26 augustus 2008 @ 12:07:53 #181
145090 HenkBenzinetank
Toegevoegde waarde
pi_61134913
Het is slecht, ik weet het.. Maar tering, upgrade gewoon eens dan (ja ik bevind me in een luxepositie dat ik me dat kan verlangen)!
pi_61141066
quote:
Op maandag 25 augustus 2008 23:32 schreef CraZaay het volgende:
Het ligt ook aan de doelgroep natuurlijk; de grotere publiekssites die ik ontwikkel hebben al gauw 90+% (!!) IE bezoekers. Nadeel van sites voor het grote publiek is dat ze vaak op scholen en kantoren gebruikt worden (en tussen 9.00 en 17.00 komt daar het merendeel van het bezoek vandaan), en daar hebben ze weer relatief veel IE6.

We zullen ermee moeten leven
Zelfde gaat op voor pestforum.nl. Meeste hits komen van kennisnet, onder schooltijd. Ook daar valt het kwartje dus.

Boeroendoek.nl is wat algemener (maar wel veel minder bezoekers).
pi_61141112
quote:
Op dinsdag 26 augustus 2008 08:41 schreef Tuvai.net het volgende:

[..]

Verschilt bij mij ook heel veel. Als ik de Boekenbox (uit m'n sig) of mijn blog neem dan zit ik gemiddeld op 57% Mozilla (waarvan 40% Firefox ouder dan versie 3.x), 15% IE7, 21% IE6 en de rest Safari/Opera/etc.

Bij de gemiddelde applicatie van m'n werk zit ik makkelijk boven de 80% aan IE gebruikers, waarvan het grootste percentage jammer genoeg nog steeds op IE6. Wel merk ik dat steeds meer mensen, zowel bij mijn thuisprojectjes als bij mijn grotere projecten op het werk, steeds meer interesse hebben in andere browsers en veel klanten ook al aangeven dat hun website/applicatie 'wel op alle browsers moet werken'. Goede ontwikkeling vind ik zelf, dan vallen al die prutsers die nog steeds enkel voor browser X devven al buiten de boot.
Ik zie de variatie in besturingssystemen ook langzaam aan toenemen Lichte stijging Linux, forse stijging MacOs ...

Zelfs af en toe wat bezoekers van af een console
  dinsdag 26 augustus 2008 @ 16:32:57 #184
12880 CraZaay
prettig gestoord
pi_61142282
Ik zie ook steeds meer iPhone als device in de statistieken staan
pi_61188493
is er een mogelijkheid om een background in een textarea fixed te maken? het lukt mij niet...
pi_61192810
ik bedoel dus eigenlijk dat de achtergrond in het tekstvak blijft staan als het vak groter (scrollbaar) wordt d.m.v. typen
  donderdag 28 augustus 2008 @ 23:42:39 #187
164509 Banzaiaap
Tony Rocky Horror
pi_61207466
quote:
Op donderdag 28 augustus 2008 14:43 schreef ruud_fr het volgende:
ik bedoel dus eigenlijk dat de achtergrond in het tekstvak blijft staan als het vak groter (scrollbaar) wordt d.m.v. typen
Euh?

.tekstvak{background: url(plaatjeurl.jpg) no-repeat top center;}

Ofzoiets?
pi_61207963
pi_61211007
quote:
Op donderdag 28 augustus 2008 11:57 schreef ruud_fr het volgende:
is er een mogelijkheid om een background in een textarea fixed te maken? het lukt mij niet...
1
2
3		textarea {
    background-position: bottom left;
}
fokstok.nl
  vrijdag 29 augustus 2008 @ 08:07:26 #190
12880 CraZaay
prettig gestoord
pi_61211313
Met "position" scrollt de afbeelding nog steeds mee uiteraard. Het kan niet door simpelweg de textarea te stylen; "background-attachment: fixed" werkt niet in IE6. Als je het ook in IE6 wilt laten werken kom je uit bij een element met de gewenste achtergrondafbeelding en daarbinnen de textarea met "background: transparent".
pi_61211388
In Firefox is het voldoende om de textarea een hoogte en breedte te geven, en dan natuurlijk een achtergrond. Als de content langer wordt, krijg je een scrollbalk voor de content maar niet voor de textarea zelf. De achtergrond blijft dus mooi op z'n plaats.

In IE(6 en 7) scrollt de achtergrond mee omhoog met de tekst. Met een position: bottom zorg je dat de achtergrond altijd onderaan blijft staan, ook als er meer tekst wordt ingevoerd. Ook hier geldt weer dat je wel een hoogte en breedte op moet geven. Het nadeel is dat als iemand met de cursortoetsen weer omhoog gaat scrollen, de achtergrond naar beneden gaat.
fokstok.nl
  vrijdag 29 augustus 2008 @ 09:01:00 #192
12880 CraZaay
prettig gestoord
pi_61212034
quote:
Op vrijdag 29 augustus 2008 08:17 schreef Light het volgende:
Het nadeel is dat als iemand met de cursortoetsen weer omhoog gaat scrollen, de achtergrond naar beneden gaat.
Lijkt mij nogal een show stopper
pi_61213654
bedankt voor de reacties, ik zal vanavond of in het weekend even kijken
  vrijdag 29 augustus 2008 @ 12:35:32 #194
145090 HenkBenzinetank
Toegevoegde waarde
pi_61217670
quote:
Op vrijdag 29 augustus 2008 08:07 schreef CraZaay het volgende:
Met "position" scrollt de afbeelding nog steeds mee uiteraard. Het kan niet door simpelweg de textarea te stylen; "background-attachment: fixed" werkt niet in IE6. Als je het ook in IE6 wilt laten werken kom je uit bij een element met de gewenste achtergrondafbeelding en daarbinnen de textarea met "background: transparent".
prima oplossing dus
pi_61374594
Ik heb een vraag.

Een site wil ik opdelen in het volgende

HEADER
LI-MID-RE
FOOTER

Nu heb ik de header, content en footer voor elkaar, echter wil het niet lukken om het middelste gedeelte goed te krijgen.

Wat wil ik met het middelste gedeelte!?

Links & Rechts zijn vast qua maat
MID is variabel en moet meerekken met de breedte van het scherm.

Echter moet de content (mid) kunnen doorlopen... en dat lukt mij niet.

Zie: http://www.bruggema.nl/3/ en voor de stijlsheet: http://www.bruggema.nl/3/stijl.css

Ik heb gezocht via google naar fixed 3 columns maar helaas, niets dat mij kon helpen
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_61374936
een div "float:left" én "clear:both" geven, gaat blijkbaar niet zo goed.

Dat je middelste div niet meeloopt komt doordat er geen enkel object instaat wat in de natuurlijke float zit. Normaal gesproken kun je dit oplossen door een lege div met "clear:both" maar dat gaat dus niet omdat je met deze opzet ook alle divs een float meegeeft (en die div dus alsnog uit de natuurlijke float haalt)
pi_61375074
Overigens zitten er nogal wat fouten in je opzet. Sowieso is je hele code erg onoverzichtelijk (de helft van de CSS staat verwoven in je HTML, de andere helft in eentwéé externe sheets

Maar voor bijv. div .middle geef je een "top: 10px" op, terwijl die div geen position heeft.

Volgens mij heb je geen idee wat je aant doen bent en heb je het grootste deel van de code van andere sites of uit tutorials gecopiëerd of niet?
  donderdag 4 september 2008 @ 14:40:00 #198
12880 CraZaay
prettig gestoord
pi_61375741
quote:
Op donderdag 4 september 2008 13:52 schreef Chandler het volgende:

Wat wil ik met het middelste gedeelte!?

Links & Rechts zijn vast qua maat
MID is variabel en moet meerekken met de breedte van het scherm.

Echter moet de content (mid) kunnen doorlopen... en dat lukt mij niet.
The holy grail http://www.alistapart.com/articles/holygrail
pi_61375856
mcDavid; de ene stijlsheet is gemaakt door de slicer, de andere door mij, de stijles die je in de HTML ziet zijn tijdelijk, om alleen maar de opzet aan te geven, niets meer niets minder. Er zijn idd delen van de stijl.css gekopieerd van andere plekjes op het internet, juist omdat ik er zelf niet uitkwam!..

Maar heb je een oplossing? want anders ben ik bang dat ik weer voor tabellen moet gaan kiezen...
The people who lost my respect will never get a capital letter for their name again.
Like trump...
  donderdag 4 september 2008 @ 14:46:39 #200
12880 CraZaay
prettig gestoord
pi_61375874
quote:
Op donderdag 4 september 2008 14:45 schreef Chandler het volgende:

want anders ben ik bang dat ik weer voor tabellen moet gaan kiezen...
Lutser Maar check mijn link...
pi_61375935
quote:
Op donderdag 4 september 2008 14:40 schreef CraZaay het volgende:

[..]

The holy grail http://www.alistapart.com/articles/holygrail
Het lullige is dat die in IE7 weer niet werkt! (tenminste hier, zie eerste voorbeeld)
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_61375946
quote:
Op donderdag 4 september 2008 @ 14:45 schreef Chandler het volgende:
mcDavid; de ene stijlsheet is gemaakt door de slicer, de andere door mij, de stijles die je in de HTML ziet zijn tijdelijk, om alleen maar de opzet aan te geven, niets meer niets minder. Er zijn idd delen van de stijl.css gekopieerd van andere plekjes op het internet, juist omdat ik er zelf niet uitkwam!..

Maar heb je een oplossing? want anders ben ik bang dat ik weer voor tabellen moet gaan kiezen...
quote:
Op donderdag 4 september 2008 @ 14:07 schreef mcDavid het volgende:
een div "float:left" én "clear:both" geven, gaat blijkbaar niet zo goed.

Dat je middelste div niet meeloopt komt doordat er geen enkel object instaat wat in de natuurlijke float zit. Normaal gesproken kun je dit oplossen door een lege div met "clear:both" maar dat gaat dus niet omdat je met deze opzet ook alle divs een float meegeeft (en die div dus alsnog uit de natuurlijke float haalt)
  donderdag 4 september 2008 @ 14:51:37 #203
12880 CraZaay
prettig gestoord
pi_61375979
quote:
Op donderdag 4 september 2008 14:49 schreef Chandler het volgende:

Het lullige is dat die in IE7 weer niet werkt! (tenminste hier, zie eerste voorbeeld)
Even zelf googlen anders? Er zijn ongetwijfeld kleine modificaties te vinden op deze aanpak die prima werken.
pi_61376032
quote:
Op donderdag 4 september 2008 14:50 schreef mcDavid het volgende:
Ik probeer je te begrijpen maar doe het gewoon niet
quote:
Op donderdag 4 september 2008 14:51 schreef CraZaay het volgende:
Even zelf googlen anders? Er zijn ongetwijfeld kleine modificaties te vinden op deze aanpak die prima werken.
Dat heb ik dus de gehele ochtend al gedaan maar niets 'simpels' kunnen vinden, maar goed ik zoek ook altijd verkeerd

-edit-
fix gevonden
http://www.gerd-riesselmann.net/examples/paddedholygrail.html
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_61379925
clear:both

is het antwoord

En dan niet ook nog float:left of iets anders op een element gooien! Wat je doet doormiddel van de ".middle div" in je eigen css!
pi_61382105
quote:
Op vrijdag 29 augustus 2008 08:07 schreef CraZaay het volgende:
Als je het ook in IE6 wilt laten werken kom je uit bij een element met de gewenste achtergrondafbeelding en daarbinnen de textarea met "background: transparent".


thanks
pi_61385669
Jongens, ik heb er de hele dag mee zitten stoeien en een hoop gelezen maar kom er gewoon domweg niet uit... het probleem is de stomme float; op zich heb ik deze nodig om ze netjes naast elkaar te krijgen, maar zodra de linker en rechter kant 'weg' zijn vallen de plaatjes daar over de opengedeeltes heen

Ik heb The holy grail en een hoop fixes daarvan en nog veel meer sites bezocht maar helaas wil er niet in en wil het niet vinden

Preview tot zover:
http://www.bruggema.nl/3

voor jullie ongetwijfeld een eitje maar ik blijf het ondanks alle tips gewoon niet zien.... grrr
The people who lost my respect will never get a capital letter for their name again.
Like trump...
  donderdag 4 september 2008 @ 21:46:05 #208
12880 CraZaay
prettig gestoord
pi_61386329
quote:
Op donderdag 4 september 2008 19:10 schreef ruud_fr het volgende:



thanks
Graag gedaan

Ik ben de afgelopen paar dagen bezig geweest met wat "kleine aanpassingen" qua html/css aan een begin dit jaar door een andere partij gebouwde website. Wat een hoop stront zeg. Tabellen, alles het liefst absoluut gepositioneerd, gekloot met floats, inline & externe styles en gewoon brakke semantiek (een kop? dan pak je toch een span met "font-size: 24px"?). Doe ik NOOIT meer
pi_61387744
quote:
Op donderdag 4 september 2008 21:21 schreef Chandler het volgende:
Jongens, ik heb er de hele dag mee zitten stoeien en een hoop gelezen maar kom er gewoon domweg niet uit... het probleem is de stomme float; op zich heb ik deze nodig om ze netjes naast elkaar te krijgen, maar zodra de linker en rechter kant 'weg' zijn vallen de plaatjes daar over de opengedeeltes heen :(

Ik heb The holy grail en een hoop fixes daarvan en nog veel meer sites bezocht maar helaas :{ wil er niet in en wil het niet vinden :P

Preview tot zover:
http://www.bruggema.nl/3

voor jullie ongetwijfeld een eitje maar ik blijf het ondanks alle tips gewoon niet zien.... grrr
Ik zie in je css niet meteen een padding bij de container. En bij de holy grail staat content voor de linker- en rechterkolom, bij jou niet.

Back to basic tijd dus:
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18		<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Geklooi voor Chandler</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div id="header"></div>
<div id="container">
   <div id="content"></div>
   <div id="left"></div>
   <div id="right"></div>
</div>
<div id="footer"></div>
</body>
</html>


css
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		html, body {
   width: 100%;
   margin: 0;
   padding: 0;
}
#header {
   height: 10px;
   width: 100%;
   background: #f00;
}
#container {
   padding-left: 160px;
   padding-right: 160px;
}
#left, #right {
   width: 160px;
   height: 600px;
   background: url(http://www.bruggema.nl/3/afbeeldingen/wide-skyscraper.gif);
   float: left;
   position: relative;
}
#left {
   margin-left: -100%;
   right: 160px;
}
#right {
   margin-right: -160px;
}
#content {
   height: 700px;
   width: 100%;
   float: left;
   background: #ff8;
}
#footer {
   clear: both;
   background: #8ff;
   float: left;
   height: 10px;
   width: 100%;
}


Have fun :)
fokstok.nl
pi_61387890
quote:
Op donderdag 4 september 2008 21:46 schreef CraZaay het volgende:

[..]

Graag gedaan

Ik ben de afgelopen paar dagen bezig geweest met wat "kleine aanpassingen" qua html/css aan een begin dit jaar door een andere partij gebouwde website. Wat een hoop stront zeg. Tabellen, alles het liefst absoluut gepositioneerd, gekloot met floats, inline & externe styles en gewoon brakke semantiek (een kop? dan pak je toch een span met "font-size: 24px"?). Doe ik NOOIT meer
Ik mocht/moest vandaag een menu-item toevoegen aan een menu dat met een tabel was gemaakt. Alles bleef gewoon staan verder, er was voldoende ruimte om iets toe te voegen. En dat was al een ramp Met enkel het toevoegen van een <td> ben je er uiteraard niet.
fokstok.nl
pi_61388328
Ah, het genot van het moeten rotzooien met andermans programmatuur / markup.

Ik had laatst ook zo'n projectje waar ik zowel aan de serverkant als aan de voorkant aanpassingen moest doen. Het C# gedeelte ging an sich nog, de voorkant was zo ongeveer een beetje helemaal opgezet met tabellen en absoluut gepositioneerde bagger.
pi_61388732
quote:
Op donderdag 4 september 2008 22:49 schreef Tuvai.net het volgende:
Ah, het genot van het moeten rotzooien met andermans programmatuur / markup.

Ik had laatst ook zo'n projectje waar ik zowel aan de serverkant als aan de voorkant aanpassingen moest doen. Het C# gedeelte ging an sich nog, de voorkant was zo ongeveer een beetje helemaal opgezet met tabellen en absoluut gepositioneerde bagger.
Tabellen vind ik echt een ramp, zeker voor layout.
Dingen absoluut positioneren kan soms best nuttig zijn, maar dat moet je per geval afwegen. Mijn voorkeur gaat iig uit naar floats
fokstok.nl
  donderdag 4 september 2008 @ 23:08:40 #213
12880 CraZaay
prettig gestoord
pi_61388835
De achterkant (Ruby on Rails) hebben we volledig moeten herschrijven, daar was niets mee aan te vangen
pi_61388896
quote:
Op donderdag 4 september 2008 23:04 schreef Light het volgende:

[..]

Tabellen vind ik echt een ramp, zeker voor layout.
Dingen absoluut positioneren kan soms best nuttig zijn, maar dat moet je per geval afwegen. Mijn voorkeur gaat iig uit naar floats
Absolute positionering kan inderdaad handig zijn en ik gebruik het zelf vrij regelmatig voor fixed menu`tjes en dergelijke. Het is echter gewoon kut om een heel menu met subitems en andere afhankelijkheden op een dusdanige manier absoluut te positioneren, dat bij het toevoegen van een nieuw element zo'n beetje alles dat niet absoluut gepositioneerd is, niet meer op z'n plaats staat en daardoor de wél absoluut gepositioneerde elementen niet meer op de juiste plek staan.
  donderdag 4 september 2008 @ 23:16:16 #215
145090 HenkBenzinetank
Toegevoegde waarde
pi_61389020
quote:
Op donderdag 4 september 2008 21:46 schreef CraZaay het volgende:

[..]

Graag gedaan

Ik ben de afgelopen paar dagen bezig geweest met wat "kleine aanpassingen" qua html/css aan een begin dit jaar door een andere partij gebouwde website. Wat een hoop stront zeg. Tabellen, alles het liefst absoluut gepositioneerd, gekloot met floats, inline & externe styles en gewoon brakke semantiek (een kop? dan pak je toch een span met "font-size: 24px"?). Doe ik NOOIT meer
Welcome to my world.. Ik doe bijna niet anders
pi_61389083
De truc is dan ook om eerst alle floats te doen en pas aan het eind de absoluut gepositioneerde elementen. En dat gaat dan over de volgorde van de elementen in de html.
fokstok.nl
pi_61390149
quote:
Op donderdag 4 september 2008 @ 21:21 schreef Chandler het volgende:
Jongens, ik heb er de hele dag mee zitten stoeien en een hoop gelezen maar kom er gewoon domweg niet uit... het probleem is de stomme float; op zich heb ik deze nodig om ze netjes naast elkaar te krijgen, maar zodra de linker en rechter kant 'weg' zijn vallen de plaatjes daar over de opengedeeltes heen

Ik heb The holy grail en een hoop fixes daarvan en nog veel meer sites bezocht maar helaas wil er niet in en wil het niet vinden

Preview tot zover:
http://www.bruggema.nl/3

voor jullie ongetwijfeld een eitje maar ik blijf het ondanks alle tips gewoon niet zien.... grrr
Hier kunnen we echt weinig mee, je verhaal is veel te vaag!

Maak anders eens een voorbeeld met alléén de elementen die mis gaan, zo eenvoudig mogelijk!
Helpt je wellicht ook om zelf inzicht te krijgen in wat er mis gaat!
  vrijdag 5 september 2008 @ 00:14:55 #218
12880 CraZaay
prettig gestoord
pi_61390368
Ik heb ook het idee dat je iets teveel tegelijk wilt. Maak eerst eens de basis aan de hand van die "holy grail" met IE7 fixes, dus header, footer en drie kolommen. Geef ze allemaal een achtergrondkleurtje en zet er een paar regels tekst in om te testen. Werkt dat niet, kom dan hier met je code. Werkt dat wel, voeg dan stuk voor stuk de andere elementen toe, zonder je oude CSS te hergebruiken (anders krijg je weer per ongeluk floats die je niet wilt, etc etc). Werkt het niet, probeer het dan niet op te lossen door zonder te weten wat het doet te pas en te onpas floats, etc toe te gaan voegen
pi_61393953
Ik zal het probleem voorleggen.

Eingelijk wil ik precies hetzelfde dat een tabel doet.

1
2
3
4
5
6
7		<table width="100%">
<tr>
    <td width="160">Links</td>
    <td>Midden</td>
    <td width="160">Rechts</td>
</tr>
</table>


In het geval van bovenstaand tabel worden alle velden evenlang ongeacht welk veld het langste is. Gebruik ik floats voor bijvoorbeeld afbeeldingen dan blijven de afbeeldingen binnen dat kader en overlappen bv niet rechts zoals met de holy grail etc wel.

http://www.bruggema.nl/3/grail.html

Ik wil dus een oplossing vinden voor het feit dat de afbeeldingen gewoon binnen het middelste gedeelte blijven, niets meer niets minder

Ik heb de float verwijderd maar dan komen ze onder elkaar, ook een display inline werkt niet aangezien dan de background en padding/margins niet meer van toepassing zijn wordt gek van CSS

De versie van Light is ook aardig maar heeft ook zijn beperkingen
http://www.bruggema.nl/3/light.html

Ik hoop dat ik duidelijk genoeg ben, en loop denk ik weer tegen iets onmogelijks aan... stom dat tabellen nog steeds moeilijk te evenaren zijn middels divs en css...
The people who lost my respect will never get a capital letter for their name again.
Like trump...
  vrijdag 5 september 2008 @ 10:02:48 #220
12880 CraZaay
prettig gestoord
pi_61394766
Ik snap je probleem nog steeds niet. Wanneer ik in de code op http://www.bruggema.nl/3/grail.html al die divs met een afbeelding erin "float: left" geef dan vallen ze uiteraard onder buiten de div; je hebt ze immers uit de flow gehaald. Is dat je probleem? Zo ja, een "overflow: auto" op #imagelist lost het dan op (alternatief voor "clear").
pi_61395613
Het probleem is idd opgelost door de overflow: auto; al snap ik niet precies waarom!?

ik ga eens kijken waarom overflow: auto dit precies oplost (misschien leer ik er wat van... )
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_61395685
quote:
Op vrijdag 5 september 2008 09:24 schreef Chandler het volgende:

De versie van Light is ook aardig maar heeft ook zijn beperkingen
http://www.bruggema.nl/3/light.html
In de CSS staat een height bij #content. Sloop die er eens uit, dan ben je al een stuk verder
fokstok.nl
pi_61396933
Heb ik al gedaan werkt nu aardig goed
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_61397568
Dat bedoel ik, je CSS is al veel te verward door andere dingen om nog goed te kunnen zien wat je aant doen bent

Het verbaast me overigens dat "overflow:auto" ook werkt. Deze eigenschap heeft namelijk niets met de float van een element te maken. Alleen maar met wat er gebeurd als de content niet in een element past.

clear:both geeft in ieder geval aan dat dit element aan beide kanten geen elementen mag hebben die gefloat zijn. Daardoor gaat dit element er onder staan. Dat is wat je wilt.

Als je wilt dat alle div's tot de onderkant doorlopen, gebruik je ipv borders e.d. op de divs, een achtergrondafbeelding in de parent div die je verticaal herhaald. De divs lopen dan niet echt door, maar dat lijkt wel zo.
  vrijdag 5 september 2008 @ 13:35:15 #225
12880 CraZaay
prettig gestoord
pi_61400621
quote:
Op vrijdag 5 september 2008 11:47 schreef mcDavid het volgende:

Het verbaast me overigens dat "overflow:auto" ook werkt. Deze eigenschap heeft namelijk niets met de float van een element te maken. Alleen maar met wat er gebeurd als de content niet in een element past.
Juist, en op deze manier zeg je "wanneer de gefloate elementen binnen mij niet passen, maak me dan automatisch groter".

Met andere woorden: een niet-floating div met daarin alleen gefloate elementen (die dus uit de flow zijn en visueel buiten de div vallen), kun je mee laten schalen met de elementen binnen die div door "overflow: auto" te gebruiken (mits je div geen "height" heeft).
pi_61400846
Overflow:auto geeft aan dat een div scrollbalken krijgt indien de content groter is als de div. Het gedrag wat jij beschrijft is gewoon standaard gedrag van div's. Daarom vind ik het vaag.
  vrijdag 5 september 2008 @ 13:47:26 #227
12880 CraZaay
prettig gestoord
pi_61400948
quote:
Op vrijdag 5 september 2008 13:44 schreef mcDavid het volgende:
Overflow:auto geeft aan dat een div scrollbalken krijgt indien de content groter is als de div.
Alleen wanneer je een height gedefinieerd hebt.
quote:
Het gedrag wat jij beschrijft is gewoon standaard gedrag van div's. Daarom vind ik het vaag.
Het standaard gedrag is dat de floating elementen uit de flow zijn en de parent dus niet "meerekt". Dat los je hiermee dus op. Het staat inderdaad niet in de CSS specs (die zeggen alleen dat "overflow: auto" iets met scrollbalken zou moeten doen, maar dat user-agents zelf mogen beslissen hoe en wat).
pi_61402150
Super uitleg CraZaay, zou bijna zeggen begin een tutoriaal site
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_61406105
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		/* Link Colors */
h1 a {
   color:#000;
   text-decoration:none;
   }
h1 a:hover {
   color:#000;
   }
#content a {
   text-decoration:none;
   font-weight:none;
   }
#content a:hover {
   text-decoration:none;
   }
[b]#footer a {
font-family: Bookman Old Style;
text-decoration:none;
a:link, a:visited{
color: #fff;
text-decoration: none;
a:hover, a:active{
color: #fff;
text-decoration: none;
}[/b]

a:link, a:visited{
color: #000;
text-decoration: none;
}

a:hover, a:active{
color: #000;
text-decoration: none;
} 
Ik wil graag bij de footer dat de links wit worden.... maar ze blijven zwart
  vrijdag 5 september 2008 @ 16:50:32 #230
12880 CraZaay
prettig gestoord
pi_61406125
quote:
Op vrijdag 5 september 2008 14:29 schreef Chandler het volgende:
Super uitleg CraZaay, zou bijna zeggen begin een tutoriaal site
Hehe. Ben er ooit mee begonnen, maar heb (helaas?) mijn handen vol aan ander werk
  vrijdag 5 september 2008 @ 16:52:54 #231
12880 CraZaay
prettig gestoord
pi_61406206
quote:
Op vrijdag 5 september 2008 16:49 schreef hello_moto1992 het volgende:

[ code verwijderd ]

Ik wil graag bij de footer dat de links wit worden.... maar ze blijven zwart
Er klopt niets van je syntax, pas dat eerst eens aan in je post. Je opent { die je niet sluit, etc.
pi_61750189
Hoi

Ik heb een stukje CSS:

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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150		/* Misc. */

* {
   margin:0;
   padding:0;
   }
html, body {

   }
body {
   font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; /* Hier worden de lettertypes aangegeven. Als bijvoorbeeld "Trecbuchet MS" niet op de pc van de gebruiker staat, wordt "Arial" gebruikt enzovoort.*/
   font-size : 12px; /* Dit geeft de grootte van de letters aan */
   background-color: #444444;  /* Dit is de achtergrondkleur*/
   }
img {
   border: none; /* Dit geeft aan of een afbeelding op de website door een rand moet worden omgeven. */
   }
p {
   margin-bottom:10px;/* Dit geeft de afstand van de tekst of een ander element minimaal 10 pixels moet zijn */
   line-height:20px; /* Dit geeft de regelhoogte aan */
   }
/* Structure */
#wrapper { /* De wrapper is "opeenhoping" van de "header", "content" en de "footer"*/
   width:650px; /* Dit geeft de wijdte van het element aan */
   height:600px; /* Dit geeft de hoogte van het element aan  */
   margin:0 auto; /* Dit geeft de ruimte  tussen de verschillende elementen. Deze is hier op nul gezet, zodat ze goed op elkaar aansluiten   */
   border:2px solid #000; /* De border geeft de lijn om de wrapper aan. Deze is hier dus 2 pixels dik.  */
   border-bottom:0 !important; /* Hier wordt de lijn onder aan de "wrapper mee aangegeven. Dit is dus eigenlijk een uitzondering op de gewone "border". Important! geeft aan dat de browser deze regel niet mag overslaan als er iets niet goed uitkomt.  */
   background-color: white;
   }
#header {
   width:630px;
        height:160px;
   border-bottom: 2px solid #000;
   font-size:30px;
   background-image: url('afbeeldingen_achtergronden/achtergrond.jpg');
   padding-left: 20px;
   margin: 0px;
   }
   }
#content {
   padding-left: 50px;
        text-align: right; 
padding: 25px; !important
/* Dit geeft aan dat een afbeelding of tekst minimaal 25 pixels van de rand van het element moet staan.  */
   }
#sidebar {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
width: 200px;
padding: 0px;
margin: 0px;
}
#sidebar h1 {
display: block;
background-color:#FF9900;
font-size: 100%;
padding: 3px 0 5px 3px;
border: 1px solid #000000;
color: #333333;
margin: 0px;
width:200px;
}

#sidebar ul {
list-style: none;
margin: 0px;
padding: 0px;
border: 1px;
}
#sidebar ul li {
margin: 0px;
padding: 0px;
}
#sidebar ul li a {
font-size: 100%;
display: block;
border-bottom: 1px dashed #C39C4E;
padding: 5px 0px 2px 4px;
text-decoration: none;
color: #666666;
width:200px;
}
#vertmenu ul li a:hover, #vertmenu ul li a:focus {
color: #000000;
background-color: #eeeeee;
}

#footer {
   width:610px;
   height:50px;
   margin:0 auto;
   border-top: 1px solid #000; 
   border: 2px solid #000;
   background-color: #000; /* Dit geeft de achtergrondkleur aan */
   padding-right: 20px;
   padding-left: 20px;
   color: #fff;
   }
oration:none;
   }

/* Headings */
#header h1{
   color:white;
}
h1 {
   font-size:30px;
   font-weight:normal;
   letter-spacing:-1px;
   }
h2 {
   font-size:16px;
}

/* Link Colors */
h1 a {
   color:#000;
   text-decoration:none;
   }
h1 a:hover {
   color:#000;
   }
#content a {
   text-decoration:none;
   font-weight:none;
   }
#content a:hover {
   text-decoration:none;
   }
#footer a {
font-family: Bookman Old Style;
text-decoration:none;
a:visited
color: #fff;
text-decoration: none;
a:active
color: #fff;
text-decoration: none;
}

a:link, a:visited{
color: #000;
text-decoration: none;
}

a:hover, a:active{
color: #000;
text-decoration: none;
} 


Hoe krijg ik in vredesnaam de tekst in de center naast de sidebar?

Van:


Naar:



Iemand die een opzetje kan geven?
  vrijdag 19 september 2008 @ 09:28:42 #233
164509 Banzaiaap
Tony Rocky Horror
pi_61751043
Het menu en je content in twee aparte div's zetten en allebei {float:left;} geven
pi_61751104
quote:
Op vrijdag 19 september 2008 09:28 schreef Banzaiaap het volgende:
Het menu en je content in twee aparte div's zetten en allebei {float:left;} geven
Inderdaad, echter hoef je de div met content niet in een float te zetten maar enkel een margin-left mee te geven. Vergeet niet dat je elementen uit hun normale document-flow haalt wanneer je ze gaat floaten.

EDIT: Of toch niet, 'k was even de IE6 gap bug vergeten.

[ Bericht 6% gewijzigd door Tuvai.net op 19-09-2008 09:56:04 ]
pi_61751464
knip
pi_61751481
Kan iemand mij vertellen waarom mijn button 'active' blijft? Hij blijft altijd ingedrukt zodra ie eenmaal is aangeklikt:

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		#navigatie{
display: block;
align: center;
margin: 0 0 0 15px;

padding: 0px;
width: 725px;
height: 53px;
}
#navigatie ul, #navigatie li{
display: block;
margin: 0px;
padding: 0px;
align: center;
}
#navigatie li a, #navigatie li a:hover{
display: block;
align: center;
width: 725px;
height: 53px;
background: url(http://mijn-domein/wp-content/themes/default/images/Menu.jpg) no-repeat 0 0;
text-indent: -9999px;
line-height: 10px;
}
#navigatie li a:hover{
background: url(http://mijn-domein/wp-content/themes/default/images/Menuu.jpg) no-repeat 0 0px;
}
#navigatie li a, #navigatie li a:active{
background-image: url(http://mijn-domein/wp-content/themes/default/images/Menuu.jpg);
}

(Noobie I know )
pi_61753957
quote:
Op vrijdag 19 september 2008 @ 09:48 schreef Cracka-ass het volgende:
Kan iemand mij vertellen waarom mijn button 'active' blijft? Hij blijft altijd ingedrukt zodra ie eenmaal is aangeklikt:
[ code verwijderd ]

(Noobie I know )
quote:
Op vrijdag 19 september 2008 @ 03:35 schreef mcDavid het volgende:

[..]

niet dat het in de verste verte maar iets met PHP of MySQL te maken heeft, maar als je alle declaraties voor een psuedo-class ook aan de gewone class meegeeft, zal er weinig veranderen inderdaad.
pi_61758728
quote:
Op vrijdag 19 september 2008 09:28 schreef Banzaiaap het volgende:
Het menu en je content in twee aparte div's zetten en allebei {float:left;} geven
Bedankt voor je hulp, het is al gelukt. Het was nog wel een beetje irritant doordat de tekst van de content half door de sidebar heen ging, maar dat heb ik veranderd door de breedte van de sidebar aan te passen. Dit had geen gevolgen voor het uiterlijk van de sidebar. Met padding-left in de content lukt het niet ( ).
pi_61759217
quote:
Op vrijdag 19 september 2008 @ 14:01 schreef hello_moto1992 het volgende:

[..]

Bedankt voor je hulp, het is al gelukt. Het was nog wel een beetje irritant doordat de tekst van de content half door de sidebar heen ging, maar dat heb ik veranderd door de breedte van de sidebar aan te passen. Dit had geen gevolgen voor het uiterlijk van de sidebar. Met padding-left in de content lukt het niet ( ).
In principe moet het goed gaan als je de content een magrin-left geeft even groot (of net een pixel groter) als de breedte van de sidebar...
pi_61936896
Ik ontdekte zojuist iets grappigs, en vaak best handigs:
als je een element een padding en een breedte geeft, wordt de padding bij de breedte opgeteld.
tenzij je -1 achter de breedte declaratie zet, dan is dat niet het geval! (althans, in IE7 en Fx)

ik heb even een demonstratie gemaakt:
http://duft.nl/test.html

nog ff een beetje uitbreiden en dan door browserschreenshots.org halen...

-edit-
het lijkt te komen doordat de breedte daardoor ongeldig wordt... kun je dus net zo goed weglaten
en ik denken iets spannends ontdekt te hebben...

[ Bericht 21% gewijzigd door mcDavid op 26-09-2008 18:26:41 ]
pi_61940736
tvp
pi_61940910
quote:
Op vrijdag 26 september 2008 18:18 schreef mcDavid het volgende:
Ik ontdekte zojuist iets grappigs, en vaak best handigs:
als je een element een padding en een breedte geeft, wordt de padding bij de breedte opgeteld.
tenzij je -1 achter de breedte declaratie zet, dan is dat niet het geval! (althans, in IE7 en Fx)

ik heb even een demonstratie gemaakt:
http://duft.nl/test.html

nog ff een beetje uitbreiden en dan door browserschreenshots.org halen...

-edit-
het lijkt te komen doordat de breedte daardoor ongeldig wordt... kun je dus net zo goed weglaten
en ik denken iets spannends ontdekt te hebben...
Je had het natuurlijk ook kunnen testen met een smallere div.

En als je geen breedte instelt en wel padding gebruikt dan is de breedte inclusief padding 100%. Stel je wel een breedte in dan komt de padding daarbij (behalve in IE6).
fokstok.nl
  zaterdag 27 september 2008 @ 09:34:56 #243
12880 CraZaay
prettig gestoord
pi_61948041
quote:
Op vrijdag 26 september 2008 21:14 schreef Light het volgende:

En als je geen breedte instelt en wel padding gebruikt dan is de breedte inclusief padding 100%. Stel je wel een breedte in dan komt de padding daarbij (behalve in IE6).
In IE6 ook, zolang je een geldig doctype gebruikt (en dat doe je uiteraard ).
pi_61948773
quote:
Op zaterdag 27 september 2008 09:34 schreef CraZaay het volgende:

[..]

In IE6 ook, zolang je een geldig doctype gebruikt (en dat doe je uiteraard ).
Ik gebruik altijd een geldig doctype, meestal xhtml 1.0 transitional. En toch moet ik allerlei IE6-hacks gaan toepassen.
fokstok.nl
pi_61950108
quote:
Op vrijdag 26 september 2008 21:14 schreef Light het volgende:

[..]

Je had het natuurlijk ook kunnen testen met een smallere div.

En als je geen breedte instelt en wel padding gebruikt dan is de breedte inclusief padding 100%. Stel je wel een breedte in dan komt de padding daarbij (behalve in IE6).
Daar kwam ik ook achter ja, ik zat dus onnodig moeilijk te doen... inmiddels doet mijn menutje het prima (ook in IE6, met de nodige IE6-specifieke CSS)
pi_62120722
Hoi,

Ik ben een CSS noob en zou graag van jullie expertise gebruikmaken, zelf red ik het namelijk niet. Kort even mijn uitleg: ik heb een website gemaakt met een afbeelding als logo bovenaan de pagina( http://img253.imageshack.us/img253/5634/logobuonissimodn7.gif ) waarbij ik gewerkt heb met image maps. Image maps blijken echter totaal niet meer 'done' te zijn en nu word ik aangeraden het boeltje met CSS te klaren ( animated gif op gif ).

Het logo is reeds aangepast (check: http://filifestijn.leadhoster.com), maar de noodzakelijke CSS-code geeft me hoofdbrekens. Op die site kan je zien dat ik wat geëxperimenteerd heb met de positie maar afhankelijk van de schermresolutie wordt waarom 'kok aan huis? verkeerd weergegeven.

De bedoeling is dus gewoon om alles te krijgen zoals in het aanvankelijke logo staat, maar dan met gewone tekst (omdat dat sneller inlaadt, beter is etc etc.) Dit moet door positionering gebeuren maar welke? absolute of relatieve?
Zelf dacht ik: absoluut en relatief t.a.v. WAT is ook nog belangrijk. In principe kanik mijn tekst absoluut positioneren tav mijn afbeelding maar niet absoluut tav de pagina omdat bij een andere schermresolutie het er dan anders uitziet. Verder zou ik mijn tekst relatief kunne positioneren tav de BREEDTE omdat mijn afbeelding toch gecentreerd is, maar niet relatief tav de lengte van de pagina omdat de lengte van de pagina kan verschillen.

In theorie zou ik zeggen: positioneer de tekst relatief gezien tav de breedte van de pagina in percentages en absoluut gezien tav de lengte van de pagina. Maar waarschijnlijk zit ik fout.

Zoals je ziet weet ik nog niet hoe ik er theoretisch uitraak laat staan het coderen in CSS. Hopelijk kan iemand me met zijn/haar inzichten helpen!

groeten
pi_62133047
Ook de position-tag in CSS moet je proberen zoveel mogelijk te vermijden. Niet omdat het 'slecht' is ofzo, maar als je het teveel gebruikt raak je binnen de kortste keren het overzicht kwijt. Niet handig dus. en ik denk dat je het ook zonder kunt.
ik zou de pagina als ik jou was ongeveer zo opbouwen:
1
2
3
4
5
6
7		<div class='container'>
<div class='header'>
<img class='logo' src='logo.gif' /> <img class='plaatje' src='plaatje.gif'  />
</div>
<div class='content'>
</div>
</div>


de div .container geef je een breedte naar keuze (bijv 770px, dan is'ie in een 800x600 resolutie beeldvullend), en de margin links en rechts zet je op 'auto', dan schuift die div automatisch naar het midden.

Voor je header zou ik 2 plaatjes gebruiken: je logo (strak uitgeknipt!) en het plaatje rechts daarvan.
Met margins zorg je dat de plaatjes op de goeie positie komen. De witte lijntjes maak je m.b.v. borders.

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

[ Bericht 1% gewijzigd door mcDavid op 04-10-2008 19:45:30 ]
pi_62133906
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
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.
fokstok.nl
pi_62134019
ik knal er meestal gewoon "yellow", "red", "blue", "grey", "purple", of wat me maar te binnen schiet in
  zaterdag 4 oktober 2008 @ 20:16:45 #250
145090 HenkBenzinetank
Toegevoegde waarde
pi_62134143
nothing beats #f00, fool!
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.
pi_62854327
quote:
Op zaterdag 1 november 2008 01:00 schreef mcDavid het volgende:
Mot je ook ff een scriptje schijven dat die achtergrondafbeeldingen ook nog een keer via DOM invoegt
Natuurlijk, maar dan moet ik b.v. een javascript array hebben met alle objecten en hun achtergrond afbeeldingen. Vind ik geen nette oplossing. Tevens dat 40x in de CSS zetten.

Waarom Microschoft niet een IE6 upgrade uitbrengt om dingen als transparency voor PNG toe te voegen is mij overigens een raadsel...
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')