Minimale margin

11/04/2013 00:48:08

Ik wil graag dat mijn span class date uit mijn Twitterfunctie allemaal dezelfde positie hebben. Op dit moment is de positie afhankelijk van het aantal regels waaruit de tweet bestaat, omdat de class bij 2 regels naar onderen wordt verplaatst en daarmee naar de linkerkant van de zijbalk gaat.

Het zou handig geweest zijn als er een min-margin-left of iets dergelijks bestond, zodat alle class netjes op dezelfde manier worden uitgelijnd.
Iemand een idee?

Het gaat om *** Ik hoop dat jullie weten wat ik bedoel, aangezien ik het nogal lastig vind om uit te leggen. Het gaat om de Twitterfunctie aan de rechterkant, onder het kopje 'Hashtags'.

Alvast bedankt!

Gewijzigd op 19/07/2013 00:43:57 door Bas IJzelendoorn

PHP hulp

03/03/2025 19:08:02

Elwin - Fratsloos

11/04/2013 08:56:24

Je kan de inhoud van de li waarin de tags staan verdelen in twee block elementen (bijv. div's) waarbij je beide elementen float:left en clear:right meegeeft.

11/04/2013 16:11:29

Dat lijkt mij geen optie, aangezien de tweets niet handmatig worden geplaatst maar automatisch uit mijn Twitteraccount gelezen worden.
Even voor de duidelijkheid, het gaat dus om de span class date, in de CSS staat deze als volgt:

Code (php)

1
2
3
4
5

.date
{
font-style: italic;
color: #a0a0a0;
}

12/04/2013 17:35:12

Bumperrrrrrrrrrrrrrrrrrrrrr

RobertJan Doeternietoe

12/04/2013 17:48:27

Dit zou moeten werken :)

.date
{
font-style: italic;
color: #a0a0a0;
float: left;
clear: both;
}

Gewijzigd op 12/04/2013 18:04:40 door RobertJan Doeternietoe

15/04/2013 00:42:28

Nee, dat is niet het geval. Hiermee zorg je weliswaar dat alles wordt uitgelijnd, maar niet op de manier die ik bedoel. Ik wil graag dat alles uitgelijnd wordt recht onder de tweets, dus niet onder de profielafbeelding.

Eddy E

15/04/2013 10:14:28

Maak eens een screenshot van hoe het nu is en daarnaast hoe je het wel wilt hebben.
Ik snap er geen sikkepit van hoe je het wel wil hebben.

Je toont die tweet via PHP of via Javascript?
In beide gevallen kan je de HTML toch gewoon wijzigen en dus wat elementen toevoegen/verwijderen?

Als het om de <span class="date"> gaat: float: right; kan.
Of gewoon text-indent: ***px; waar *** gelijk is aan de breedte van de <a> met de avatar...

15/04/2013 15:58:19

Ik zal het inderdaad eens even uitleggen. De huidige situatie kun je gewoon bekijken op (verwijderd) De situatie hoe ik deze wil hebben kun je bekijken op (verwijderd). Zoals je ziet is de datum bij beide tweets netjes uitgelijnd, en staan ze niet op verschillende plekken.

Het Twitterscript:

Code (php)

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

<div id="sidebar">
    <section>
        <header>
            <h2>Hashtags</h2>
        </header>
        <ul class="style1 posts">
            <?php
            $starter=curl_init();
            curl_setopt($starter,CURLOPT_URL,"http://api.twitter.com/1/statuses/user_timeline/".define21.".xml?count=3");
            curl_setopt($starter,CURLOPT_RETURNTRANSFER,true);
            $twitter=curl_exec($starter);
            $tweets=new simplexmlelement($twitter);
            foreach($tweets->status as$tweet){
            ?>
            <li>
                <a href="http://www.twitter.com/<?php echo $tweet->user->screen_name; ?>" class="image align-left"><img src="<?php echo $tweet->user->profile_image_url; ?>" alt=""></a>
                <h3><?php echo $tweet->user->name; ?></h3>
                <p><?php echo hyperlinks($tweet->text); ?></p>
                <span class="date"><?php echo timestamp($tweet->created_at); ?></span>
            </li>
            <?php }
            curl_close($starter);
            ?>
        </ul>
        <a href="http://www.twitter.com/<?php echo define21; ?>" class="button" target="_blank">Lees meer</a>
    </section>
</div>

In de CSS:

Code (php)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

.image
{
    display: inline-block;
    border: solid 1px #d9d9d9;
    padding: 3px;
}
.image img
{
    display: block;
}
.align-left
{
    float: left;
    margin-right: 2em;
}
.date
{
    font-style: italic;
    color: #a0a0a0;
}

Volgens mij is dat alles wat je nodig hebt. Text-indent heb ik geprobeerd maar schijnt niet te werken.

Toevoeging op 15/04/2013 16:08:43:

De screenshot staat op (verwijderd) (zonder punt erachter). Als het goed is werkt deze link wel.

Gewijzigd op 19/07/2013 00:45:25 door Bas IJzelendoorn

Eddy E

15/04/2013 16:10:42

Geef je a.image.align-left eens height: 100px;. Of wellicht dat 90px al voldoet.
Doe er dan gelijk een width: 80px; bij en verwijder die rare margin-right: 2em;.

Wat als iemand een iets grotere avatar heeft? Staat alles scheef.
Gewoon in een container (de <a> in dit geval) gooien, die goed neerzetten en klaar.

Gewijzigd op 15/04/2013 16:18:22 door Eddy E

16/04/2013 03:28:46

Bedankt voor je antwoord! Ik heb het nu nóg simpeler opgelost. Aan diezelfde class (a.image.align-left) heb ik alleen een margin-bottom van 52px toegevoegd, en dat lost het probleem ook al op.
De grootte van de afbeeldingen is in principe niet van toepassing, op de een of andere manier wordt deze al ergens aangepast. En daarnaast wordt voorlopig alleen ons Twitteraccount gebruikt. Mochten we in de toekomst besluiten ook andere Twitteraccounts in te gaan laden dan kom ik hier indien nodig op terug.

Nogmaals bedankt! Problem solved.

Eddy E

16/04/2013 06:41:20

Effect is hetzelfde inderdaad, je maakt hem langer.

Toevoeging op 16/04/2013 06:41:25:

Effect is hetzelfde inderdaad, je maakt hem langer.

Forum berichten

Reacties

PHP scripts

PHP tutorials

Actief op PHPhulp

Minimale margin

PHP hulp

Elwin - Fratsloos

RobertJan Doeternietoe

Eddy E

Eddy E

Eddy E

Over PHPhulp

Support

Gesponsord

Extra's

Privacy