[CSS] Elementen binnen een A tag dichter op elkaar zetten.

[TheNephilim]

Ik was gisteren al druk aan het stoeien met het volgende, maar kom er ook vandaag weer niet uit. Het probleem is dat ik een twitter widget heb, met daarin de naam en gebruikersnaam van de persoon. Deze moeten netjes onder elkaar staan.

Hieronder een uitgeklede versie van het geheel.

HTML:

<ul class="tweets">
    <li class="tweet">
        <a class="profile-link" href="#">
            <strong class="fullname">Person.Name</strong>
            <br />
            <span class="username"><s>@</s><b>username</b></span>
        </a>
    </li>
</ul>

Cascading Stylesheet:

ul {
    margin: 0;
    padding: 0;
}
ul li {
    width: 200px;
    list-style: none;
}
.profile-link {
    text-decoration: none;
}
.profile-link:hover .fullname {
    text-decoration: underline;
}
.username {
    font-size: 0.8em;
    color: #999;
}
.username s {
    text-decoration: none;
}
.username b {
    font-weight: normal;
}

Wat wil ik?

Dat de .username dichter op de .fullname komt te staan.

Wat heb ik geprobeerd?

• De twee namen scheiden met display: block; width: 100%; in plaats van <br />
• line-height aanpassen.
• margin-top: -npx

Wat mis ik hier? De twee regels moet je toch gewoon met (in ieder geval) margin-top: -npx dichter op elkaar kunnen brengen? Positieve margin werkt wel gewoon...

Case op jsFiddle: http://jsfiddle.net/zV6Yg/

[jeroenikke]

line-height: 0.9; in je ul werkt in ieder geval in jsfiddle

[ThomasG]

Als je de <br/> weghaalt, en zowel de .fullname als .username een display: block geeft, staan ze al dichter op elkaar. Je kunt dat met een line-height in .profile-link verder verkleinen, of juist vergroten.

[TheNephilim]

jeroenikke schreef op woensdag 03 juli 2013 @ 11:19:
line-height: 0.9; in je ul werkt in ieder geval in jsfiddle

Werkt inderdaad, maar liever doe ik dat dichter op het element. Anders moet ik de 'standaard' lijnhoogte voor de tekst weer aanpassen. Jammer dat het geen effect heeft als ik het aanpas op .profile-link

ThomasG schreef op woensdag 03 juli 2013 @ 11:22:
Als je de <br/> weghaalt, en zowel de .fullname als .username een display: block geeft, staan ze al dichter op elkaar. Je kunt dat met een line-height in .profile-link verder verkleinen, of juist vergroten.

Dit had ik al eens geprobeerd, wilde toen niet netjes. Nu wel! Dit is denk ik de beste oplossing, de enige aanmerking hierop is dat de link op de hele regel 'aanklikbaar' is en niet alleen op de tekst elementen zelf.

Zoals gezegd, mooier heb ik het nog niet voor elkaar gekregen. Thanks voor de input! ^^

[Kayr]

TheNephilim schreef op woensdag 03 juli 2013 @ 11:28:
[...]


Werkt inderdaad, maar liever doe ik dat dichter op het element. Anders moet ik de 'standaard' lijnhoogte voor de tekst weer aanpassen. Jammer dat het geen effect heeft als ik het aanpas op .profile-link


[...]


Dit had ik al eens geprobeerd, wilde toen niet netjes. Nu wel! Dit is denk ik de beste oplossing, de enige aanmerking hierop is dat de link op de hele regel 'aanklikbaar' is en niet alleen op de tekst elementen zelf.

Zoals gezegd, mooier heb ik het nog niet voor elkaar gekregen. Thanks voor de input! ^^

http://jsfiddle.net/zV6Yg/8/

[incaz]

op de a een 'display: inline-block;' dan werkt de line-height daar ook. En je hebt niet de hele regel aanklikbaar. (Maar wel het kleine stukje whitespace naast '@username')

[TheNephilim]

incaz schreef op woensdag 03 juli 2013 @ 12:02:
op de a een 'display: inline-block;' dan werkt de line-height daar ook. En je hebt niet de hele regel aanklikbaar. (Maar wel het kleine stukje whitespace naast '@username')

Dat werkt inderdaad ook! Tot nu toe de meest 'cleane' oplossing. Slechts de breedte en hoogte van de .fullname is aanklikbaar. Niet de ruimte er achter.

Bedankt!