[CSS] voor dummies #16

quote:

Op dinsdag 26 april 2011 21:06 schreef DaFan het volgende:

[..]

Zag net op W3C ook dat em's aangeraden worden.
Maar 14px <> 1.4em maar ook niet 0.875em (volgens W3C)

[..]

Wat is het nou dan

Edit; lijkt erop dat 14px = 1.3em in Chrome en IE8, maar 11px is wel 0.6875em. Wordt er niet veel duidelijker op.
Edit2; is het aan te raden dat ik ALLE px verander in em?

62,5% van 16 is 10.

quote:

Op dinsdag 26 april 2011 21:16 schreef Light het volgende:

[..]

Die waarden zijn misschien wel overal hetzelfde, maar ze zijn over het algemeen niet wat je wilt. Dan moet je dus alsnog vanalles specificeren. Kun je het net zo goed in 1 keer doen, meteen naar de waarden die je wel wilt.

Ik heb liever controle, ik koppel elementen met dezelfde 'sematische' opmaakwaarde ook bij elkaar. Bijvoorbeeld alle elementen waarvan hetzelfde font gespecificeerd is in 1, dan hoef ik het ook maar 1 keer aan te passen als ik voor een andere waarde kies.

quote:

[..]

Dat geldt alleen als de standaard lettergrootte in de browser op 16px staat. Meestal wel de standaardwaarde, maar er volledig op vertrouwen is misschien wat link. Overigens levert een font-size van 75% op de body dan 12px op.

Als die standaard lettergrootte anders is dan 16px heeft dat een reden, meteen het voordeel van em's. Idealiter wissel je em's en px slim af om een website op basis van fontschaling slim te laten schalen. Helaas werkten developers daar niet aan mee waardoor er nu een 'schaal-alles' functie in nagenoeg elke browser zit, dan krijg je snel bij inzoomen dat je verticaal moet scrollen.

quote:

Op dinsdag 26 april 2011 21:27 schreef n8n het volgende:

Ik heb liever controle, ik koppel elementen met dezelfde 'sematische' opmaakwaarde ook bij elkaar. Bijvoorbeeld alle elementen waarvan hetzelfde font gespecificeerd is in 1, dan hoef ik het ook maar 1 keer aan te passen als ik voor een andere waarde kies.

Die controle heb je ook zonder reset-css wel. Dingen combineren ben ik het wel mee eens, in ieder geval voor dingen die logisch gezien ook bij elkaar horen.

quote:

Als die standaard lettergrootte anders is dan 16px heeft dat een reden, meteen het voordeel van em's. Idealiter wissel je em's en px slim af om een website op basis van fontschaling slim te laten schalen. Helaas werkten developers daar niet aan mee waardoor er nu een 'schaal-alles' functie in nagenoeg elke browser zit, dan krijg je snel bij inzoomen dat je verticaal moet scrollen.

Ik begin meestal met een grootte in px (op html en body) en alle font-sizes daarna stel ik in met em's.

quote:

Op dinsdag 26 april 2011 21:36 schreef Light het volgende:

[..]

Die controle heb je ook zonder reset-css wel. Dingen combineren ben ik het wel mee eens, in ieder geval voor dingen die logisch gezien ook bij elkaar horen.

[..]

Uiteindelijk gaat het er om wat je zelf het prettigst vind werken, het resultaat telt. Beide manieren hebben iets om voor te zeggen

quote:

Ik begin meestal met een grootte in px (op html en body) en alle font-sizes daarna stel ik in met em's.

Ligt aan de website, ik kijk altijd van welke waarden het waar wenselijk is als ze schalen en tot op welke hoogte. Een goede werkwijze vinden neemt wat tijd in beslag maar daarna gaat het vrijwel vanzelf

Thanks beide.

Oi, graag wat hulp:

Ik heb een div "Content" en een div "Footer"

Ik heb mijn content geen hoogte meegegeven, en bij meer content wordt het dus groter, en gaat Footer omlaag.

In de footer heb ik 2 plaatjes naast elkaar, omdat ze floaten (1 links 1 rechts) heb ik er een clearfix bij gedaan.

Nu is het probleem dat zodra mijn content groter word, alleen links of alleen rechts mee gaat, en het andere plaatje dus blijft staan. Wat doe ik fout?

HTML:

<div id="content">
<div id="main">
<div id="mainTop"></div>
<div id="mainHolder">
<div id="mainContent">uyguoyboubguy</div>
</div>
<div id="mainBottom"></div>
</div><!-- end of mainright -->

<div id="side">
<div id="sideTop"></div>
<div id="sideHolder">
<div id="sideContent">uyguoyboubguy</div>
</div>
<div id="sideBottom"></div>
</div><!-- end of side -->

<div id="side2">
<div id="sideContent2">uyguoyboubguy</div>
</div><!-- end of side -->

<div class"clearFix"></div>
</div><!-- end of content -->

<div id="footer">
<div id="left"></div>
<div id="right"></div>
<div class="clearFix"></div>
</div><!-- end of footer -->

CSS:
#side2{
background: url(images/twitter.jpg);
width: 300px;
height: 242px;
float: right;
padding: 0;
margin-right: 100px;
border: 3px solid #4fa600;
margin-bottom: 10px;
}

#sideContent2{
background: none;
width:auto;
margin:10px 10px;
padding: 0 10px 0 10px;
overflow:hidden;
}

#footer{
background: none;
width: 100%;
height: 206px;
margin-top: 500px;
}

#left{
background: url(images/bgleft.png);
width: 50%;
height: 206px;
float:left;
}

#right{
background: url(images/bgright.png);
width: 50%;
height: 206px;
float: right;
}

.clearFix { clear: both; display: block; font-size: 0; line-height: 0%; height: 0; visibility: hidden; }

Kan iemand mij vertellen wat ik fout doe? Het lijkt mij dat ik nog iets in #footer zou moeten zetten waardoor het bij elkaar blijft, aangezien dat de div is die ze bij elkaar houden moet.

Hopelijk kan iemand mij hiermee helpen, bedankt!

Zet maar een testcase online, met deze warboel van div's en id's kunnen de meesten vast niks.

Err, ik heb alleen het deel van de css geplakt van wat ik dacht dat ertoe deed, ze hebben allemaal een functie. Of de namen praktisch zijn of niet zou nu even niet uit mogen maken (Het wordt mij later pas duidelijk waar ze voor zijn, dan pas ik ze aan, en tot die tijd noem ik ze zo ;P)

Ik heb clear:both gedaan in de footer, en het probleem is weg :p Thanks alot

Kan ik hier ook normale HTML vragen stellen?

Zoja: als ik een pdf in een iframe laadt, doet ie dat in principe goed in Chrome en Safari, maar in Firefox vraagt ie om de pdf te downloaden (IE geen idee, zit op Mac). Hoe is dit te fixen?

quote:

Op woensdag 11 mei 2011 17:56 schreef Nashje het volgende:
Kan ik hier ook normale HTML vragen stellen?

Zoja: als ik een pdf in een iframe laadt, doet ie dat in principe goed in Chrome en Safari, maar in Firefox vraagt ie om de pdf te downloaden (IE geen idee, zit op Mac). Hoe is dit te fixen?

das volgens mij een client instelling...

quote:

Op woensdag 11 mei 2011 18:05 schreef mschol het volgende:

[..]

das volgens mij een client instelling...

En hoe verander ik die?

Overigens nog een vraag: onder de iframe verschijnt een flink aantal pixels een grote witte ruimte.. En dat komt zeker niet door heights, margins of paddings. Wtf is dit?

Adobe heeft geen Firefox-plugin uitgebracht volgens mij voor de Mac. Zie: http://support.mozilla.co(...)s%20within%20Firefox - toevallig pas op het werk een klant die er ook over klaagde en toen heb ik het uitgezocht. Er zijn dus wel diverse plugins die dit alsnog mogelijk maken.

Ah, dus dit probleem komt enkel voor onder Firefox gebruikers op de Mac? Dat is nog te overzien dan.

Vraag 2 was: onder de iframe verschijnt een flink aantal pixels grote witte ruimte.. En dat komt zeker niet door heights, margins of paddings. Wát is dit?

quote:

Op woensdag 11 mei 2011 22:07 schreef Nashje het volgende:
Ah, dus dit probleem komt enkel voor onder Firefox gebruikers op de Mac? Dat is nog te overzien dan.

Vraag 2 was: onder de iframe verschijnt een flink aantal pixels grote witte ruimte.. En dat komt zeker niet door heights, margins of paddings. Wát is dit?

hoe weet je zo zeker dat het geen paddings, margins of heights zijn?
kijk eens met firebug

Omdat ik dat heb getest natuurlijk...

Firefox geeft geen whitespace, Chrome wel. Safari ook niet.

edit; problem solved I guess. I-frame staat buiten een div en daarom geeft ie whitespace... Snap niet hoe, maar oke.

vraagje: hoe kan ik 1 regel van een drop down menu een tekstkleur geven dat ook werkt bij firefox & chrome?
ik heb nu zoiets:

maar alleen IE8 pakt dit, FF en chrome blijven het zwart weergeven, in het dropdown menu is hij wel grijs
optie A is de standaard geselecteerde optie overigens
ik zie vast wat over het hoofd....

[ Bericht 3% gewijzigd door mschol op 21-05-2011 14:24:33 ]

Ik krijg mijn sticky footer met geen mogelijkheid de goede hoogte. De wrapdiv die ik gebruik wordt minstens 2 keer zo hoog als de footer zelf, en ik krijg 'm maar niet lager. Dit moet wel, want de footer moet een doorlopende achtergrond hebben, en dat lijkt alleen te kunnen met de wrapdiv. Ik heb alles al geprobeerd, height 100%, hoogte in pixels (Maar dan lijkt hij alleen van onder korter te worden), min-height van 100%, height auto, alle hoogtes uit om te zien wat het doet, alle margins uit, niets werkt.

Kan iemand helpen?

Mocht je denken meer code nodig te hebben, vraag maar, ik weet even niet welke allemaal relevant zijn

quote:

Op dinsdag 24 mei 2011 10:18 schreef KomtTijd... het volgende:
alleen css kan ik weing mee, behalve constateren dat:

[ code verwijderd ]

geen functie heeft.

Testcase + firebug. Dan is het zo opgelost.

Ik geef je even de site. Ik zit de hele dag met firebug, en testcase of niet, het lijkt hier niets op te lossen

Vraag:

Ben een newbie in XML en ik moet weten hoe ik data in een XML bestand wegschrijf, en dat daarna weer daaruit kan ophalen.

Je stelt geen vraag, maar je noemt je schoolopdracht.
In een topic waaruit blijkt dat je het echt niet snapt. Ik wens je HEEL veel succes met het verwerken van XML d.m.v CSS.

Iemand problemen met :hover in Firefox 4?

De website waar ik en m'n projectgroepje aan werkt reageert niet meer op de mouse overs. Momenteel is het iets met opacity: 0.4; en ik snap dat dat nog relatief nieuwe css code is, maar hij reageert ook niet op standaard background: red; enzo.

[ Bericht 39% gewijzigd door Mirel op 30-05-2011 15:10:08 ]

quote:

Op maandag 30 mei 2011 16:15 schreef KomtTijd... het volgende:
relatief nieuwe CSS? Opacity is gewoon CSS2 hoor.

Waar gaat het trouwens over? Ik zie nergens hovers....

De menuknoppen links hebben hovers die werken in Opera IE en Chrome, maar niet in Firefox 4.

edit: oh godver in de nieuwe IE is helemaaaaaaal naar de klote. Ergens na het installeren van plugins of iets aanpassen in de css ging het dus vreselijk mis maar ik weet niet meer waar.

quote:

Op maandag 30 mei 2011 16:32 schreef KomtTijd... het volgende:

[..]

Je bedoelt die knoppen die uberhaupt niet zichtbaar zijn als je je browservenster iets kleiner maakt?

Die knoppen hebben géén hovers. Dus daar gaat ook niets mee gebeuren als je er overheen gaat met je muis.

Die linkjes zijn wordpress category linkjes, opgeroepen dmv van cat-item-bla en ze een kleurtje gegeven. Ergens werkten ze nog (nog steeds in chrome en opera) maar ik ben een beetje de draad kwijt geraakt na een weekje en ik weet niet meer wanneer het mis is gegaan.

Dat dat hele menubalkje zo'n stomme absolute position heeft is een moeilijkheid die we nou eenmaal op die manier hadden opgelost. Wel kut ja, hij is met left: -140px ten opzichte van de container naar links geduwd. Zucht

quote:

Op maandag 30 mei 2011 16:34 schreef KomtTijd... het volgende:

[..]

Tip: begin voortaan te ontwikkelen voor een standaard-compliant browser, en ga daarna pas hacks invoeren om (oudere versies van) IE mee te krijgen. In plaats van andersom.

Het is iets om mee te nemen voor de volgende keer. Ik heb eerder met 2 partners tot nu toe 3 websites gedaan, zonder problemen met layout gekut over de verschillende browsers. Ik denk dat we deze keer veel te snel gingen met teveel dingen tegelijk.

quote:

Op maandag 30 mei 2011 16:39 schreef KomtTijd... het volgende:
naja uitzoeken dus waar de css-regels van die knopjes staan, en waar die hover gebleven is.

Daar is niks mee gedaan. Die staan gewoon op dezelfde plek en opera en chrome lezen die gewoon uit, dus ikw eet het ook niet. Denk dat een andere css regel de boosdoener is.