CSS: Editten fonts en padding

[Verwijderd]

Nadat mijn vorige topic ivm. mijn zoektocht naar een CSS held is verwijderd zit er niets anders op dan zelf te gaan klussen. Mijn pogingen daartoe (inc. zoektocht op google) zijn echter niet geslaagd, vandaar dit topic. De bedoeling is als volgt: de pagina (het bovenste plaatje) moet er zo uit komen te zien als het onderste plaatje.

Pagina:


Moet worden:

Let op: vergeet de graphic voor het kopje, deze kan buiten beschouwing worden gelaten.

Hoewel beide plaatjes niet van bijster goede kwaliteit zijn illustreren ze de bedoeling: de uitlijning en het font moeten anders. Waar moet ik gaan zoeken, en waar moet ik daarbij op letten? (de desbetreffende div geeft geen relevante informatie, en lijnen daar aan toevoegen lijkt geen effect te hebben) Als dit nodig is kan ik delen van de sheet posten.

[ Voor 6% gewijzigd door Verwijderd op 27-06-2007 02:26 ]

[Verwijderd]

Voor zover ik kan zien is het font hetzelfde, toch?

Voor uitlijning moet je eens hier kijken: CSS Text-alignment. In het eerste plaatje is de tekst gejustified. In het tweede plaatje is het links uitgelijnd.

edit:
Sorry, ik zat niet goed te kijken. De tekst is in beide gevallen justified. Waar het op verschilt is line-height. Check dit: CSS Line-height.

[ Voor 29% gewijzigd door Verwijderd op 27-06-2007 02:55 ]

[curry684]

Verwijderd schreef op woensdag 27 juni 2007 @ 02:49:
Voor zover ik kan zien is het font hetzelfde, toch?

Mwah voor het tweede plaatje moet ie even ClearType uitzetten, maar voor de rest is het zo te zien gewoon Arial ja

Sorry, ik zat niet goed te kijken. De tekst is in beide gevallen justified. Waar het op verschilt is line-height. Check dit: CSS Line-height.

Line-height: 1.5em zou al veel moeten helpen, evenals een margin:0 op de p en hX elementen.

[Verwijderd]

Check de margins van de <p> en <h> elementen. Deze hebben verschillende waardes in alle browsers.

[Verwijderd]

curry684 schreef op woensdag 27 juni 2007 @ 03:11:
[...]

Mwah voor het tweede plaatje moet ie even ClearType uitzetten, maar voor de rest is het zo te zien

Ik ga zo even pielen met die uitlijning.. Cleartype uitschakelen, wie/wat/waar en vooral hoe fix ik dat ?

[Verwijderd]

Verwijderd schreef op woensdag 27 juni 2007 @ 11:52:
[...]

Ik ga zo even pielen met die uitlijning.. Cleartype uitschakelen, wie/wat/waar en vooral hoe fix ik dat ?

Niet. Cleartype (Anti Alias) uitzetten

[Verwijderd]

De kleur van de font lijkt ook iets anders te zijn... LIgt dit aan dat ClearType of gewoon aan de verschillende benadering?

Verwijderd schreef op woensdag 27 juni 2007 @ 02:49:
Waar het op verschilt is line-height. Check dit: CSS Line-height.

Waar zou ik dit dan moeten plaatsen? In de desbetreffende div of in de tekstspecificatie's van dat stukje?

[Mad Marty]

Verwijderd schreef op woensdag 27 juni 2007 @ 13:36:


[...]

Waar zou ik dit dan moeten plaatsen? In de desbetreffende div of in de tekstspecificatie's van dat stukje?

Oei, dit is wel heel basic. In je .css natuurlijk!

Misschien eerst eens verdiepen in de basics van html/css?
http://www.w3schools.com/html/default.asp
http://www.w3schools.com/css/default.asp

[ Voor 20% gewijzigd door Mad Marty op 27-06-2007 13:41 ]

[BasieP]

Verwijderd schreef op woensdag 27 juni 2007 @ 13:36:
De kleur van de font lijkt ook iets anders te zijn... LIgt dit aan dat ClearType of gewoon aan de verschillende benadering?

das cleartype

Waar zou ik dit dan moeten plaatsen? In de desbetreffende div of in de tekstspecificatie's van dat stukje?

ik zou zeggen test het uit
We gaan niet voorkauwen hier

[Verwijderd]

Als ik dat lijntje ga zitten uitpielen terwijl ik geen idee heb of ik enigszins in de buurt zit van het juiste gedeelte in de CSS (ja, zover was ik al Marty ) is dat niet bepaald effectief werken. Waar in de CSS moet ik het zo'n beetje zoeken?

[Mad Marty]

Dat weten wij natuurlijk niet, want wij hebben je source niet. Daarom gaf ik je ook die links. Verdiep je eerst eens in classes en id's.

[Verwijderd]

De namen van wat in de CSS met wat in het HTML-bestand correspondeert is het probleem niet. Er zijn echter verschillende mogelijkheden. Moet dit in de aanwijzingen voor de hoofdtekts, of in de opmaakcodes voor de betreffende div, of waar moet dat naartoe?

[Mad Marty]

Neem nu eerst eens op je gemak de tijd om je in de basics te verdiepen. Dat kost je misschien een half uurtje, maar bespaart je daarna erg veel tijd. Het is common practice (nouja, in ieder geval het beste) om opmaak en inhoud te scheiden, dus wat denk je zelf waar het moet? En wat let je dit gewoon eens uit te proberen?

[ Voor 7% gewijzigd door Mad Marty op 27-06-2007 13:53 ]

[mithras]

Verwijderd schreef op woensdag 27 juni 2007 @ 13:50:
De namen van wat in de CSS met wat in het HTML-bestand correspondeert is het probleem niet. Er zijn echter verschillende mogelijkheden. Moet dit in de aanwijzingen voor de hoofdtekts, of in de opmaakcodes voor de betreffende div, of waar moet dat naartoe?

Leer eerst wat css doet en wat je ermee kan: http://w3schools.com/css. Als je geen idee hebt waar de opmaak te plaatsen heb je kennelijk niet het niveau wat er van je verwacht wordt, nofi.

[Verwijderd]

De reden dat ik dat niet gedaan heb is dat het om deze 2 lullige puntjes gaat en ik verder niet meer met m'n fikken aan hoef te zitten. Zodra deze boel loopt (als deze twee puntjes zijn opgelost) komt er vanzelf een budget.

[BasieP]

nou dan zal ik je maar uit de brand helpen:
het kan op zowel de div als de tekst er in,

de keuze afhankelijk van wat handiger is, als jij meerderre tekst blokken binnen je div hebt, dan is het handig om het op het divje toe te passen, anders liefst de tekst.

[Verwijderd]

Kijk, nu komen we ergens. Het is gefixt, nu nog een manier bedenken om die tekst ietsje donkerder te krijgen. Bedankt!

Edit er is nog steeds een ruimte verschil zichtbaar tussen het kopje en de gele balk en het kopje en de tekst daaronder... Dit lijkt me een padding probleem, ga ik nu mee aan de slag.

[ Voor 44% gewijzigd door Verwijderd op 27-06-2007 14:27 ]

[Verwijderd]

Is het ene probleem opgelost, dient zich weer een nieuwe aan:



De bedoeling is dat het plaatje op gelijke hoogte komt met de tekst (bovenkant op gelijke hoogte) en dat er ruimte komt tussen het plaatje en de tekst. Nu heb ik een HTML code ingevoegd in een nieuw weblog-entry. Hoe kan ik dit het beste regelen?

[mithras]

Hoewel de uitspraak "plaatjes zeggen meer dan 1000 woorden is", doet het bij het webdesignen de hard-coded html het toch echt beter hoor. Het is een groot giswerk welke semantiek jij achter die screenshots hebt zitten. Hoe je alles in elkaar hebt gezet is belangrijker om je probleem duidelijk te maken dan een plaatje.

Je problemen zijn grotendeels margin / padding problemen. Je kan het oplossen door de margin en/of padding van een van de twee conflicterende elementen aan te passen. Welke dat zijn en welke kant je de eigenschap op moet veranderen (meer of minder) ligt aan jouw design, je kan het ook op vele manieren oplossen.

[Verwijderd]

Verwijderd schreef op woensdag 27 juni 2007 @ 15:32:

Nu heb ik een HTML code ingevoegd

M'n glazen bol is in reparatie (onder garantie gelukkig), dus welke code heb je ingevoegd?

[Verwijderd]

Het gaat om een CMS. Het bovenstaande is 1 entry. Voordat het onzinverhaaltje van start gaat heb ik dit ingevoegd:

code:

<img src="http://i2.photobucket.com/albums/y31/Cubarix/151205_ninja.jpg" align="right">

Ik wilde hiermee zeggen dat het plaatje niet in een aparte div staat.

[BasieP]

wauw 1 regel code.. nu weten we waar het plaatje staat, en dat ie rechts uitgelijnd is...

* BasieP gokt dat css het plaatje ook nog beinvloed, ik zet 5 euro in, wie bied er meer?

_{en ja, das sarcasme}

[ Voor 7% gewijzigd door BasieP op 27-06-2007 17:28 ]

[Verwijderd]

/me geeft Basie een dikke knuffel...

...en wijst hem op:

Ik wilde hiermee zeggen dat het plaatje niet in een aparte div staat.

[mithras]

Gokje:

HTML:

<div id="content">
Lorem ipsum
<img>
Lorem ipsum
</div>

HTML:

<div id="content">
<p>Lorem ipsum</p>
<img>
<p>Lorem ipsum</p>
</div>

HTML:

<div id="content">
<p>Lorem ipsum
<img>
Lorem ipsum</p>

Moet ik nog even doorgaan? Je kan er een tabel omheen bakken, weet ik veel wat. Een duidelijke (en eenduidige) testcase helpt -nogmaals- heel veel meer hoor!

[dB90]

kijk even naar hspace en vspace

[Verwijderd]

Het probleem lijk ik te kunnen oplossen door het volgende te doen:

Cascading Stylesheet:

img {
padding : 4px 0px 0px 10px;
}

Het probleem is dan alleen dat alle plaatjes verschuiven, incl. de header en de menuknopjes. En dat is natuurlijk niet de bedoeling. Iemand ?

[ Voor 6% gewijzigd door Verwijderd op 27-06-2007 20:11 ]

[krvabo]

Je img een id geven en dat gebruiken.


edit: of:

Cascading Stylesheet:

#IDvanDIVmetContent img { padding: ... }

of

Cascading Stylesheet:

#IDvanDIVmetContent > img { padding: ... }

http://www.w3.org/TR/REC-CSS2/selector.html

En zoals al eerder opgemerkt: verdiep je eens in css.. of webdevelopen in het algemeen.
Desnoods ga je via google op zoek naar sites die webdesigners aanbieden (particulier), betaal je 10-20 euro per uur en je bent onder de 50 euro klaar.

[ Voor 26% gewijzigd door krvabo op 27-06-2007 20:22 ]

[Verwijderd]

Inmiddels is het probleem opgelost. Ik heb het nu geformuleerd als .entry img {, wat je voor de edit suggereerde. Waarom heb je dit naderhand weggehaald?

En zoals ik al eerder zei:

Verwijderd schreef op woensdag 27 juni 2007 @ 14:05:
De reden dat ik dat niet gedaan heb is dat het om deze 2 lullige puntjes gaat en ik verder niet meer met m'n fikken aan hoef te zitten. Zodra deze boel loopt (als deze twee puntjes zijn opgelost) komt er vanzelf een budget.

[krvabo]

Verwijderd schreef op woensdag 27 juni 2007 @ 20:33:
Inmiddels is het probleem opgelost. Ik heb het nu geformuleerd als .entry img {, wat je voor de edit suggereerde. Waarom heb je dit naderhand weggehaald?

Omdat ik niet wist of je class of ID gebruikte in je html
#test is voor

HTML:

<div id="test"></div>

.test is voor

HTML:

<div class="test"></div>

[ Voor 3% gewijzigd door krvabo op 27-06-2007 20:35 ]

[Verwijderd]

Een id kenmerkt zich door minder ingrijpende opmaakcodes dan een class o.i.d. ?

[curry684]

Verwijderd schreef op woensdag 27 juni 2007 @ 20:52:
Een id kenmerkt zich door minder ingrijpende opmaakcodes dan een class o.i.d. ?

Echt, ga een basiscursus lezen ergens want dit soort vragen gaat nergens over.

Als je hier op GoT geholpen wil worden, doe dan asjeblieft op z'n minst alsof je enige minimale inzet zelf hebt getoond.

[krvabo]

Verwijderd schreef op woensdag 27 juni 2007 @ 20:52:
Een id kenmerkt zich door minder ingrijpende opmaakcodes dan een class o.i.d. ?

Ik ben het eens met onderstaande:

curry684 schreef op woensdag 27 juni 2007 @ 20:55:
[...]

Echt, ga een basiscursus lezen ergens want dit soort vragen gaat nergens over.

Als je hier op GoT geholpen wil worden, doe dan asjeblieft op z'n minst alsof je enige minimale inzet zelf hebt getoond.

Maar:
ID staat voor identifier
class staat voor klasse, duh.

Een ID is _één_ element, een class _kan_ meerdere elementen bevatten. Een ID is echt altijd maar één element.

[Verwijderd]

Thnx krvabo, dat verklaart een hoop Ik heb enkele jaren een weblog onderhouden op een door een kennis gebouwde CMS, door steeds een stapje verder te gaan ben ik toen verder gekomen. Dat verschil kon ik echter nooit achterhalen. Helaas is voor dat ene stapje tegelijk nu geen tijd, maar het lijkt erop dat ik de grootste struikelblokken gehad heb

[Verwijderd]

krvabo schreef op woensdag 27 juni 2007 @ 20:58:
[...]

Ik ben het eens met onderstaande:

[...]

Maar:
ID staat voor identifier
class staat voor klasse, duh.

Een ID is _één_ element, een class _kan_ meerdere elementen bevatten. Een ID is echt altijd maar één element.

in jip en janneke taal:

een ID kan je maar aan 1 element toewijzen = een ID is uniek voor 1 persoon
een class kan je aan meerdere elementen toewijzen = er zitten meer mensen in een klas

dus niet een class kan meerdere elementen bevatten, dat klopt van geen kant.

wellicht bedoel je dat ook, maar je verwoord het een beetje verwarrend...

krvabo schreef op woensdag 27 juni 2007 @ 20:17:
Desnoods ga je via google op zoek naar sites die webdesigners aanbieden (particulier), betaal je 10-20 euro per uur en je bent onder de 50 euro klaar.

[ Voor 23% gewijzigd door Verwijderd op 27-06-2007 21:15 ]

[krvabo]

Verwijderd schreef op woensdag 27 juni 2007 @ 21:11:
[...]


in jip en janneke taal:

een ID kan je maar aan 1 element toewijzen = een ID is uniek voor 1 persoon
een class kan je aan meerdere elementen toewijzen = er zitten meer mensen in een klas

dus niet een class kan meerdere elementen bevatten, dat klopt van geen kant.

wellicht bedoel je dat ook, maar je verwoord het een beetje verwarrend...


[...]

Omvatten, aanwijzen.. zo bedoelde ik het dus ook ja

Maar als je aan een freelancertje zonder erg veel ervaring meer dan 20 euro per uur betaald dan ben je gek imho
Voor een beginnend freelancer is een bedrag tot 20 euro heel redelijk?

Of je geeft natuurlijk een fixed prijs. Maar daar zijn volgens mij al meerdere topics over gegaan

[Verwijderd]

Dtat bedrag klopt... De gemiddelde pool doet het voor 12 euro

[André]

curry684 schreef op woensdag 27 juni 2007 @ 20:55:
[...]

Echt, ga een basiscursus lezen ergens want dit soort vragen gaat nergens over.

Als je hier op GoT geholpen wil worden, doe dan asjeblieft op z'n minst alsof je enige minimale inzet zelf hebt getoond.

En daar is het mee gezegd. Het is hier niet je persoonlijke helpdesk