probleem met html code

**Spenz** · 879 × bekeken sinds 05-01-2012, 09:43

op mijn website http://ajaxreport.nl zie je onderaan de berichten een twitter en facebook button. Deze staan allebei niet op lijn met de link. De code van de button is: <img alt="Twitter" src="http://www.doenersnet.nl/mod/theme_d...on_Twitter.png
"> Wat moet ik nu toevoegen om de button een stukje omlaag te kunnen zetten? Alvsat bedankt.

Gr

**Jasper s** · 05-01-2012, 09:46

regel erboven <br> plaatsen.

**Lodewijk d.V.** · 05-01-2012, 09:49

Voeg "vertical-align: middle;" toe aan de css die gerelateerd is aan de plaatjes voor de links.

Als je dat niet lukt kan je ook direct in de html style="vertical-align: middle;" toevoegen zowel aan het twitter plaatje als aan het facebookplaatje, maar het netjes via de css doen heeft wel de voorkeur

**Thomas De Jonghe** · 05-01-2012, 09:51

Geef ze beide een class (bijvoorbeeld social).

Daarna zet je deze lijn in je css
.entry img.social{
padding: 0 10px;}

Dit zou het normaal moeten oplossen.

**Spenz** · 05-01-2012, 10:40

En hoe zet je dit in de volgende code dan: <img alt="Twitter" src="http://www.doenersnet.nl/mod/theme_d...on_Twitter.png
"> ? Gr

Origineel gepost door Thomas De Jonghe

Geef ze beide een class (bijvoorbeeld social).

Daarna zet je deze lijn in je css
.entry img.social{
padding: 0 10px;}

Dit zou het normaal moeten oplossen.

**Lodewijk d.V.** · 05-01-2012, 10:43

<img alt="Twitter" src="http://www.doenersnet.nl/mod/theme_d...on_Twitter.png">
Wordt:
<img alt="Twitter" class="social" src="http://www.doenersnet.nl/mod/theme_d...on_Twitter.png">

Overigens zou ik wel gaan voor:
.entry img.social{
vertical-align: middle;
}
Omdat de browser dan zelf het midden berekend, in het geval van Thomas houd je geen rekening met browsers die lettertypes schalen (zoals mobiele telefoons)

**Maarten Dekker** · 05-01-2012, 11:13

Origineel gepost door Spenz

En hoe zet je dit in de volgende code dan: <img alt="Twitter" src="http://www.doenersnet.nl/mod/theme_d...on_Twitter.png
"> ? Gr

Zoiets zou het dan worden.
Ik zou de buttons + tekst samen in een div zetten:

Toevoegen aan de style.css:

Code:

.social {float:left;margin-top:20px;overflow:hidden;}
.social a {float:left;text-decoration:none;margin-right:50px;:overflow:hidden;}

Toevoegen in je code inplaats van de huidige twitter/facebook:

Code:

<div class="social">
		<a href="http://www.facebook.com/AjaxRSS" target="_blank">
			<img alt="Facebook" src="http://studioharmens.nl/img/facebook.png"></img>
			<strong>Word nu vriend van AJAX</strong>
		</a>
		<a href="http://www.twitter.com/AFCAjaxRSS" target="_blank">
			<img alt="Twitter" src="http://www.doenersnet.nl/mod/theme_doenersnet/graphics/buttons/15/Button_Twitter.png">
			<strong>Volg AJAX nu ook op Twitter</strong>
		</a>
	</div>

**Spenz** · 05-01-2012, 13:26

Dt allen werkt niet. Kan iemand mij de code sturen met het volgende erin: <div style="float: left; clear: left; margin: 0px 10px 10px 0px;"> Het heeft met die margin te maken. Hoe pas je dit in d volgende code? <img alt="Twitter" src="http://www.doenersnet.nl/mod/theme_d...on_Twitter.png
"> Denk dat ie dan op maat komt. Gr

Origineel gepost door Maarten Dekker

De code die Thomas De Jonghe gaf moet je in de style.css plaatsen.
Zoiets zou het dan worden.
Ik zou de buttons + tekst samen in een div zetten:

Toevoegen aan de style.css:

Code:

.social {float:left;margin-top:20px;overflow:hidden;}
.social a {float:left;text-decoration:none;margin-right:50px;:overflow:hidden;}

Toevoegen in je code inplaats van de huidige twitter/facebook:

Code:

<div class="social">
        <a href="http://www.facebook.com/AjaxRSS" target="_blank">
            <img alt="Facebook" src="http://studioharmens.nl/img/facebook.png"></img>
            <strong>Word nu vriend van AJAX</strong>
        </a>
        <a href="http://www.twitter.com/AFCAjaxRSS" target="_blank">
            <img alt="Twitter" src="http://www.doenersnet.nl/mod/theme_doenersnet/graphics/buttons/15/Button_Twitter.png">
            <strong>Volg AJAX nu ook op Twitter</strong>
        </a>
    </div>

**Lodewijk d.V.** · 05-01-2012, 13:48

Nogmaals, gebruik vertical-allign:
<img alt="Twitter" src="http://www.doenersnet.nl/mod/theme_d...on_Twitter.png">
Vervangen door:
<img alt="Twitter" src="http://www.doenersnet.nl/mod/theme_d...on_Twitter.png" style="vertical-align:middle">

Zojuist met Firebug getest en werkt prima
Aanvullend bericht:
Sitedeals kort de url's af met puntjes, dus je moet zelf even de juiste url invullen

**Spenz** · 05-01-2012, 14:24

Dank je! Alles werkt nu:)

Origineel gepost door Lodewijk d.V.

Nogmaals, gebruik vertical-allign:
<img alt="Twitter" src="http://www.doenersnet.nl/mod/theme_d...on_Twitter.png">
Vervangen door:
<img alt="Twitter" src="http://www.doenersnet.nl/mod/theme_d...on_Twitter.png" style="vertical-align:middle">

Zojuist met Firebug getest en werkt prima
Aanvullend bericht:
Sitedeals kort de url's af met puntjes, dus je moet zelf even de juiste url invullen

probleem met html code