15 berichten aan het bekijken - 1 tot 15 (van in totaal 15)
  • Q:
    Bijdrager
    steene

    Hoeveel pixels = 1 enter?

    Ik wil alles pixel perfect krijgen…
    Ik heb op deze pagina: http://www.cineme.be/geziene-films
    een lijst met films en daarnaast sterren.

    Het probleem is dat mijn afbeelding van sterren of wel te groot ofwel te klein zijn. Waardoor het op het einde van de lijst niet meer op dezelfde baseline staat.

    Hoe kan ik nu de gewenste grootte bepalen van de sterren? Ze zijn nu iets te klein en staan in 13,25 pixels hoog.

    Het font is arial in 12 punt, als dat van belang is, de tekst staat weliswaar in bold.

    Of is er een beter manier om dit aan te pakken? (de sterren bedoel ik)

    nu staan de tekst en de afbeeldingen in divs, die bijeen gehouden wordt door 1 grote div.

    Alvast bedankt!
    Stijn

    ps. ik mag op die site ook enkele fijne t-shirts weggeven, bekijk de homepage eens… (sorry voor het gespam)

    Bijdrager
    KingAchille

    Je kan beginnen met je images een klasse te geven. Op die manier kan je perfect stylen.
    En andere (minder correcte, maar wel gemakkelijkere) oplossing is om alles in een tabel te steken. Op die manier ben je er zeker van dat alles gelijk staat van hoogte.

    Waarom steek je je css trouwens niet allemaal in een externe css file? Veel gemakkelijker!

    Geblokkeerd
    Anoniem

    Hoeveel pixels = 1 enter

    Er is geen enkel correct antwoord mogelijk, aangezien het van te veel factoren afhankelijk is.

    Geblokkeerd
    Anoniem

    13,25px is niet goed… halve pixels zorgen voor een wazig beeld.

    Hoe hoog 1 enter is in pixels is afhankelijk van fontgrootte, regelafstand en nog een hele berg factoren. Je zou daarnaast je font ook niet in Punten moeten zetten met websites, maar in Pixels of Ems;)

    Eigenlijk kunnen we je dus niet echt goed helpen met de specifieke vragen die je stelt, buiten wat KingAchille je al als tips mee geeft:)

    Bijdrager
    Jeordy

    Je kan regelhoogte instellen in css met line-height. Daar kan je dus bepalen hoe hoog 1 enter is.

    Bijdrager
    martijnG

    off topic:

    is het gebruik van defenition lists geen mooiere oplossing?

    </p>
    <p><style type="text/css"></p>
    <p>dl, dt, dd<br />
    {<br />
    	margin: 0;<br />
    	padding: 0;<br />
    	line-height: 20px;<br />
    }</p>
    <p>dt {<br />
    	padding: 0;<br />
    	float: left;<br />
    	width: 200px;<br />
    }</p>
    <p></style></p>
    <p><dl compact=""><br />
    	<dt>La Haine</dt><br />
    		<dd><img src="http://www.onemorething.nl/wp-content/themes/onemorething/external-image.php?src=http://www.cineme.be/images/3.&ext=jpg&h=d5fd2a84957721cea300fc73d215b818&t=1585727544" class=""></dd><br />
    	<dt>25th hour</dt><br />
    		<dd><img src="http://www.onemorething.nl/wp-content/themes/onemorething/external-image.php?src=http://www.cineme.be/images/3.&ext=jpg&h=d5fd2a84957721cea300fc73d215b818&t=1585727544" class=""></dd><br />
    	<dt>The tourist</dt><br />
    		<dd><img src="http://www.cineme.be/images/2.jpg" class=""></dd><br />
    	<dt>How do you know</dt><br />
    		<dd><img src="http://www.cineme.be/images/2.jpg" class=""></dd><br />
    	<dt>Eraserhead</dt><br />
    		<dd><img src="http://www.cineme.be/images/2.jpg" class=""></dd><br />
    	<dt>Country Strong</dt><br />
    		<dd><img src="http://www.cineme.be/images/2.jpg" class=""></dd><br />
    	<dt>Firebreather</dt><br />
    		<dd><img src="http://www.cineme.be/images/2.jpg" class=""></dd><br />
    	<dt>Little Fockers</dt><br />
    		<dd><img src="http://www.cineme.be/images/1.jpg" class=""></dd><br />
    </dl><br />
     
    Bijdrager
    martijnG

    De code tag op dit forum is brak… nog een keer dan…

    dl, dt, dd
    {
    margin: 0;
    padding: 0;
    line-height: 20px;
    }

    dt {
    padding: 0;
    float: left;
    width: 200px;
    }

    <dl compact=””>
    <dt>La Haine</dt>
    <dd><img src=”http://www.onemorething.nl/wp-content/themes/onemorething/external-image.php?src=http://www.cineme.be/images/3.&ext=jpg&h=d5fd2a84957721cea300fc73d215b818&t=1585727544&#8243; class=””></dd>
    <dt>25th hour</dt>
    <dd><img src=”http://www.onemorething.nl/wp-content/themes/onemorething/external-image.php?src=http://www.cineme.be/images/3.&ext=jpg&h=d5fd2a84957721cea300fc73d215b818&t=1585727544&#8243; class=””></dd>
    <dt>The tourist</dt>
    <dd><img src=”http://www.cineme.be/images/2.jpg&#8221; class=””></dd>
    <dt>How do you know</dt>
    <dd><img src=”http://www.cineme.be/images/2.jpg&#8221; class=””></dd>
    <dt>Eraserhead</dt>
    <dd><img src=”http://www.cineme.be/images/2.jpg&#8221; class=””></dd>
    <dt>Country Strong</dt>
    <dd><img src=”http://www.cineme.be/images/2.jpg&#8221; class=””></dd>
    <dt>Firebreather</dt>
    <dd><img src=”http://www.cineme.be/images/2.jpg&#8221; class=””></dd>
    <dt>Little Fockers</dt>
    <dd><img src=”http://www.cineme.be/images/1.jpg&#8221; class=””></dd>
    </dl>

    Bijdrager
    Jakko Westerbeke
    martijnG op 13 april 2011

    De code tag op dit forum is brak…

    Geen lege regels erin gebruiken, dan gaat het goed.

    Bijdrager
    martijnG

    Geen lege regels erin gebruiken, dan gaat het goed.

    Nee in de source zitten geen <p> tags, deze worden gegenereerd door een return of enter of zo. Daarnaast wordt erbij de posting geen rekening gehouden met tabs.
    ps de originele gepaste tekst is “grenlin” vrij en schone utf-8.

    ter verbetering:

    dt {
    padding: 0; <– paading is niet nodig, zit al in de regel erboven
    float: left;
    width: 200px;
    }
    <dl compact=””> <– compact=”” is overblijfsel uit BBedit, ook niet nodig

    Bijdrager
    steene

    martijnG ik probeer het morgen uit!
    alvast bedankt!!!

    Bijdrager
    Jakko Westerbeke
    martijnG op 13 april 2011

    Nee in de source zitten geen <p> tags

    Ik zei: “geen lege regels erin gebruiken,” niet: “geen <p>-tags gebruiken” …

    Met lege regels:

    </p>
    <p><style type="text/css"></p>
    <p>dl, dt, dd<br />
    {<br />
    	margin: 0;

    Zonder lege regels:

    <style type="text/css"><br />
    dl, dt, dd<br />
    {<br />
    	margin: 0;

    Maar inderdaad is dit een ellendige beperking van dit forum. Binnen code-tags zou het forum nergens aan moeten komen, maar het gaat dus wel bijvoorbeeld regeleindes vervangen, witruimte weghalen en smiley-codes veranderen in afbeeldingen.

    Bijdrager
    steene

    Ik krijg de MartijnG code niet aan de praat …

    de code nu is met divs en ziet er als volgt uit:

    <br />
    <div style="width:250px; background:#FFF;"></p>
    <p><div style="width:150px; background:#FFF; float: left;"></p>
    <p><strong>La Haine<br />
    25th hour<br />
    Hereafter<br />
    The tourist<br />
    How do you know<br />
    Eraserhead<br />
    Country Strong<br />
    Firebreather<br />
    Little Fockers</strong></p>
    <p></div></p>
    <p><div style="width:100px; background:#FFF; float: right;"></p>
    <p><img src="http://www.onemorething.nl/wp-content/themes/onemorething/external-image.php?src=http://www.cineme.be/images/3.&ext=jpg&h=d5fd2a84957721cea300fc73d215b818&t=1585727544"/><br />
    <img src="http://www.onemorething.nl/wp-content/themes/onemorething/external-image.php?src=http://www.cineme.be/images/3.&ext=jpg&h=d5fd2a84957721cea300fc73d215b818&t=1585727544"/><br />
    <img src="http://www.onemorething.nl/wp-content/themes/onemorething/external-image.php?src=http://www.cineme.be/images/3.&ext=jpg&h=d5fd2a84957721cea300fc73d215b818&t=1585727544"/><br />
    <img src="http://www.cineme.be/images/2.jpg"/><br />
    <img src="http://www.cineme.be/images/2.jpg"/><br />
    <img src="http://www.cineme.be/images/2.jpg"/><br />
    <img src="http://www.cineme.be/images/2.jpg"/><br />
    <img src="http://www.cineme.be/images/2.jpg"/><br />
    <img src="http://www.cineme.be/images/2.jpg"/><br />
    <img src="http://www.cineme.be/images/1.jpg"/><br />
    </div><br />
    </div><br />
     

    Maar het probleem stelt zich meer en meer hoe langer de lijst wordt, natuurlijk?

    Bijdrager
    Jakko Westerbeke

    Ik zou wat jij probeert te doen op een heel andere manier uitvoeren … dit is namelijk waar tabellen voor uitgevonden zijn:

    <table><br />
    <tr><td>La Haine</td> <td><img src="http://www.onemorething.nl/wp-content/themes/onemorething/external-image.php?src=http://www.cineme.be/images/3.&ext=jpg&h=d5fd2a84957721cea300fc73d215b818&t=1585727544"/></td></tr><br />
    <tr><td>25th hour</td> <td><img src="http://www.onemorething.nl/wp-content/themes/onemorething/external-image.php?src=http://www.cineme.be/images/3.&ext=jpg&h=d5fd2a84957721cea300fc73d215b818&t=1585727544"/></td></tr><br />
    <!-- enz. --><br />
    </table>

    Op deze manier blijft alles altijd netjes op dezelfde hoogte staan en heb je geen last van het probleem waar jij tegenaanloopt, namelijk verschillende regelhoogtes.

    Bijdrager
    steene

    Tables dus :-) Dat ik daar eigenlijk nooit aan gedacht heb, logisch toch!

    Hartelijk dank Jakko! Dat ziet er keurig uit!

    Bijdrager
    Jakko Westerbeke

    Tegenwoordig hebben veel webontwerpers een aversie tegen tabellen, maar dat komt omdat die vroeger gebruikt werden om de paginaopmaak te verzorgen, iets wat (tegenwoordig) beter met DIV’s te doen is. Wat jij wilt is in meerdere kolommen waarden die bij elkaar horen, op een rijtje zetten, en daarvoor is een tabel echter wel de aangewezen oplossing:)

15 berichten aan het bekijken - 1 tot 15 (van in totaal 15)

Je moet ingelogd zijn om een reactie op dit onderwerp te kunnen geven.