[CSS] voor dummies - Deel 5

quote:

Op donderdag 26 oktober 2006 19:35 schreef captain.lefteye het volgende:
Jep, ik denk dat voor de toegankelijkheid er voor deze tussenoplossing is gekozen.

'Frame' en 'toegankelijkheid' in 1 zin?

Ik ben gisteren op mijn werk bezig geweest met css en html... nu wil ik graag SKIP-BO kaartjes maken in CSS... nu zien de kaartjes er heel goed uit in IE maar in FF is het weer helemaal bagger..

Heeft iemand een idee waar de fout in zit?

http://www.bruggema.nl/skip%2Dbo/www.html

hoef niet een directe oplossing, maar tips om het zelf te kunnen zoeken!

Heeft volgens mij met je padding te maken, ie en FF behandelen dat en borders anders.
Daar moet je ff op zoeken.
Probleem waar ik zelf ook nog niet echt uitkom.

ja daar heb ik dus op gezocht maar helaas weinig goed en nuttigs gevonden

Volgens mij heeft het met de boxmodel te maken.

Waarom gebruik je overigens geen achtergrond plaatjes?

Box model, daar moet je inderdaad op zoeken

Hoe bedoel je met achtergrond plaatjes? en ik zal eens op boxmodel zoeken...

Firefox doet weer eens niet wat ik wil --> http://willem.wjbakker.com/hongkong/nieuws.php

Waarom wordt het middelste gedeelte er niet tussen gezet?

In IE6 is de layout wel goed.

Mrbombastic, ik kan je niet zo helpen, maar ik kan je aanraden dit artikel & dit artikel te lezen

quote:

Op zondag 26 november 2006 18:11 schreef Chandler het volgende:
Hoe bedoel je met achtergrond plaatjes? en ik zal eens op boxmodel zoeken...

Dat je inplaats van de tekst, een achtergrond plaatje doet met die nummers.

Ok, ik heb de pagina even wat versimpeld. Hieronder de code.



En CSS:


In FF gaat het nu nog steeds niet goed. Ik heb echt geen flauw idee waarom.

quote:

Op dinsdag 28 november 2006 00:56 schreef mrbombastic het volgende:
Ok, ik heb de pagina even wat versimpeld. Hieronder de code.
[ code verwijderd ]

En CSS:
[ code verwijderd ]

In FF gaat het nu nog steeds niet goed. Ik heb echt geen flauw idee waarom.

Het is wellicht nuttig even ergens door te nemen hoe floats (horen te) werken.
In het kort wat je op je pagina doet:
- Je maakt een links floatend element;
- Je maakt een rechts floatend element;

Wat je moet beseffen is dat floats geen ruimte innemen op de pagina, maar er als het ware 'boven zweven'.

Nu ga je een div met een vaste breedte van 709px plaatsen. De browser plaatst die div in de linker bovenhoek van het scherm (zonder rekening te houden met de float linksboven; die beïnvloedt de plaatsing van nieuwe niet-floatende divs immers niet). Nu wil je een afbeelding van 709px breed in die div plaatsen, maar de linkerbovenhoek van de div wordt al ingenomen door zwevende inhoud. Dus schuift de browser de inhoud (tekst of plaatjes) net zo lang naar beneden tot het wel past.

Wat je zou kunnen doen is de div#header een margin-left van 110px geven, zodat het blok niet overlapt met het klokje.

En ja: Internet Explorers ondersteuning van het floatmodel is kut. Vertrouw daar niet op.

quote:

Op dinsdag 28 november 2006 22:22 schreef AnGabhar het volgende:

[..]
Wat je zou kunnen doen is de div#header een margin-left van 110px geven, zodat het blok niet overlapt met het klokje.

Bedankt. .

Ik zal er rekening mee houden bij de volgende keer dat ik floats gebruik.

Ik zit met een probleem.

Op een website van mij heb ik een pagina gemaakt met een tabel, echter krijg ik voor deze tabel een stuk white space die even groot is als het tabel en als ik vanaf het eerste stukje whitespace ga selecteren zie je ook de data in het tabel geselcteerd worden. Nu vraag ik me af hoe dit mogelijk is? alle margins en paddings staan op 0!

Voorbeeld images


en (lijkt het zelfde, maar net even iets meer geselecteerd)



Je kunt het vinden op Gesloten tijd voor bepaalde vissoorten

Ik heb mijn style sheet goed doorgekeken maar kan niets vinden dat wijst op iets fouts ivm height oid.. Iemand een idee?

ik kan het probleem ook niet zo 1 2 3 vinden, maar waarom geef je de margins en paddings op in punten?

Trouwens, de grijs-witte balk loopt niet door in FireFox.

Je moet alle <br /> weghalen tussen je tabellen.



Die <br /> dingen mogen daar niet staan. Als ze er wel staan zorgen ze er voor dat er per <br /> een witregel boven de tabel verschijnt.

Heeft dus niets met het CSS te maken .

OMG!! die br's zijn me niet eens opgevallen

-edit-
Jullie hebben helemaal gelijk, moet toch maar eens een WYSIWYG editor inbouwen

quote:

Op vrijdag 22 december 2006 11:07 schreef Chandler het volgende:
OMG!! die br's zijn me niet eens opgevallen

-edit-
Jullie hebben helemaal gelijk, moet toch maar eens een WYSIWYG editor inbouwen

Je site ziet er overigens niet goed uit in Firefox 2. In IE is het geen probleem, maar in Fx loopt het niet echt lekker.

Nee, ik weet het. Maar heb helaas geen idee hoe ik de fouten oplos, heb mijn best gedaan op het menutje (linkerkant). Ook voor het laten doorlopen van het grijze menu balkje heb ik geen oplossing gevonden.

Echt lekker loopt de site niet in FF zoals je al zei, maar nogmaals krijg het zelf niet gefixt. Heb al aardig wat CSS kennis maar dit gaat me te boven

Vraagje:

ik wil <a name=""tekst">tekst</a> opmaken.
Ik heb hier invloed op met a:link{}
Maar is er ook iets waarmee uitsluitend <a name=""> mee kan opmaken? Het verschijnt nu als link in de browser en dat wil ik niet.
Hoe flik ik dat?

<a name="tekst" class="namedanchor">tekst</a>

vervolgens in je css:
a.namedanchor:link {}

quote:

Op vrijdag 22 december 2006 11:29 schreef Chandler het volgende:
Nee, ik weet het. Maar heb helaas geen idee hoe ik de fouten oplos, heb mijn best gedaan op het menutje (linkerkant). Ook voor het laten doorlopen van het grijze menu balkje heb ik geen oplossing gevonden.

Echt lekker loopt de site niet in FF zoals je al zei, maar nogmaals krijg het zelf niet gefixt. Heb al aardig wat CSS kennis maar dit gaat me te boven

zorg dat je de elementen body en html een height geeft van 100%. Standaard zijn deze elementen niet groter dan nodig is.

Voor firefox gebruik je min-height: 100%; voor een 100% vullend block-element (let op dat hij alleen hetgene waar hij in staat 100% vult! een div met 100% min-height in een div met height:50px resulteert dus in 50px hoog).

In IE6 zal dit niet werken, daar heb je height: 100% voor nodig. Echter is het aangeven van een hoogte volgens de specificaties volledig vast, dat houdt dus in dat firefox (de browser die volgens specificaties werkt (IE6 dus absoluut niet (belangrijk punt! ))) het betreffende element altijd en nooit iets anders dan 100% hoog is.

dus wat moet je doen, een hackje toepassen.
zet
height: auto !important;
height: 100%;
min-height: 100%;

IE6 doet niks met important dus houdt de laatst opgegeven waarde aan, alle andere browsers onthouden de important. IE6 wordt 100% hoog, en de rest gedraagt zich zoals normaal (en tevens zou horen).
door de min-height worden ook de andere browsers geattendeerd op een minimale hoogte.

alle browsers rekken nu uit naarmate de content groter wordt dan de opgegeven 100%.

Vergeet niet dat 100% altijd 100% van het parent-element is. Dat betekent dus als je een element met de hoogte van 100% bijvoorbeeld 50px; van de bovenkant afzet, hij ook 50px langer door zal lopen. de hoogte blijft altijd gelijk.

mzo
ga maar experimenteren.

Ik ben nog stééds zo groen als wat op het gebied van CSS en dan loop je nogal eens tegen probleempjes aan.

Ik heb een opzetje voor mijn site hier staan. Voor het gemak heb ik mijn stylesheet hier opgeslagen.

Nu wil ik het volgende. In het navigatie gedeelte heb ik vier linkjes staan: Het begin, Over mij, Portfolio en Blog. Nu ben ik lekker eigenwijs en wil ik de drie laatsten - Over Mij, Portfolio en Blog - helemaal rechts hebben, zoals ze nu dus goed staan. Het begin wil ik echter helemaal links tussen de zwarte borders hebben staan. Nu is dat, zoals jullie zien, totaal mislukt. Ik kan er met mijn beperkte kennis even niet bij. Wie o wie kan mij helpen?

Overigens realiseer ik me dat er wellicht best wat rommel in de HTML of CSS kan staan of dat ik 't een en ander eigenlijk veel logischer kan aanpakken. Suggesties op dat gebied zijn ook van harte welkom, maar het gaat me met name om het navigatieprobleempje. De headers zijn en blijven plaatjes, no question about that.

Alvast bedankt.

En als de headers plaatjes blijven, doe er dan een alt attribuut bij.

Dat van die alt attribuut was ik al van plan, maar dat is van later zorg.

Is het niet binnen CSS op te lossen, eigenlijk?

Ik heb ook een vraag! .

Heb een div tagje gemaakt met daarin een plaatje, en nou wil ik dat divding en dus het plaatje in het midden van het browservenster hebben. Sowieso horizontaal, als het even kan ook verticaal. Het plaatje is 800x600, dus eigenlijk zou ik het op 50%-400pixels moeten zetten ofzo. Hoe doe je zoiets?

Je site verticaal en horizontaal uitlijnen (site heeft bv afmetingen 960x458pixels

css:


html: