Like en Tweeten button naast elkaar [iFrame]

[Verwijderd]

Beste tweakers,

Ik heb een website gebouwd met Drupal 7 en heb op de frontpage een like, tweet en follow button. Deze staan standaard onder elkaar, echter zou ik deze in de footer naast elkaar willen plaatsen alleen lukt dit niet. Hebben jullie enig idee hoe ik dit voorelkaar zou kunnen krijgen?

Alvast duizendmaal thanks voor jullie hulp!

Op de volgende website kun je zien wat ik bedoel: *spam*

Hier volgt de code:

HTML:

<p><iframe allowtransparency="true" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.trattoriaaronica.nl&amp;send=false&amp;layout=button_count&amp;width=450&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21" style="border:none; overflow:hidden; width:450px; height:21px;"></iframe></p>
<p><a class="twitter-share-button" data-lang="nl" data-text="Trattoria Aronica, eten op z'n Italiaans!" data-url="http://www.trattoriaaronica.nl" href="https://twitter.com/share">Tweeten</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></p>
<p><a class="twitter-follow-button" data-lang="nl" data-show-count="false" href="https://twitter.com/TrattAronica">@TrattAronica volgen</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></p>

[ Voor 1% gewijzigd door NMe op 13-08-2012 18:52 . Reden: Code tags. ]

[geert1]

Om elk van de drie knoppen zit een p-element, oftewel een paragraaf. Deze zou je kunnen voorzien van een beetje css (bijvoorbeeld "float: left") om ze naast elkaar te krijgen. Binnen elk van de drie p-elementen wordt een iframe gezet. Deze zou je eventueel nog een vaste breedte kunnen geven via css, om zo het één en ander wat netter uit te lijnen als het eenmaal naast elkaar staat.

Edit: De p-tags weghalen zoals hieronder staat is inderdaad ook een prima manier. p-elementen zijn standaard blok-elementen, wat onder meer betekent dat ze onder elkaar komen. Je kunt dit gedrag overschrijven door bijvoorbeeld "display: inline", "display: inline-block" of "float: left" in te stellen, of je laat de elementen helemaal weg.

[ Voor 30% gewijzigd door geert1 op 13-08-2012 18:55 ]

[Verwijderd]

Of je haalt gewoon die p-tags weg
Kom op zeg, ga eens rommelen met die HTML code voor je iets vraagt.

[Verwijderd]

<p><iframe allowtransparency="true" frameborder="0" scrolling="no"

Toen ik dat las stopte ik met lezen

Geef je p tags een extra class genaamd knoppie

CSS:
.knoppie { float: left; margin: 4px; }

[ Voor 31% gewijzigd door Verwijderd op 13-08-2012 18:50 ]

[Verwijderd]

Sorry jongens, het is niet dat ik lui ben, maar ik snap gewoon niet wat er staat. De code wordt automatisch gegenereerd, ik heb de website zonder inhoudelijke CSS/HTML kennis gemaakt. Misschien was deze vraag te noobig voor dit forum, als dat het geval is bied ik mijn verontschuldigingen.

edit:

oof, ik blijf rommelen, p's weghalen, codes invoegen, maar volgens mij doe ik het helemaal verkeerd. Als iemand een voorbeeld zou willen geven binnen mijn code zou ik het erg op prijs stellen.

[ Voor 26% gewijzigd door Verwijderd op 13-08-2012 20:08 ]

[markvt]

Haal alle <p> en </p> weg

<p> = paragraaf, wat dus standaard op een nieuwe regel begint.

[funkeey]

Alle stijling terzijde, ik zou de nieuwere facebook like button gebruiken, niet deze oude meuk.

https://developers.facebook.com/docs/reference/plugins/like/

[ Voor 28% gewijzigd door funkeey op 13-08-2012 20:41 ]

[Verwijderd]

markvt schreef op maandag 13 augustus 2012 @ 20:36:
Haal alle <p> en </p> weg

<p> = paragraaf, wat dus standaard op een nieuwe regel begint.

Dank voor jullie reacties! Ik heb de <p> - </p> weggehaald alleen blijven de knoppen onder elkaar

De FB like knop heb ik gisteren van hun site gehaald, is er inmiddels weer een nieuwe?

code:

HTML:

<p><iframe allowtransparency="true" float:="left" frameborder="0" left="" scrolling="yes" src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.trattoriaaronica.nl&amp;send=false&amp;layout=button_count&amp;width=450&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21" style="border:none; overflow:hidden; width:450px; height:21px;"></iframe><a class="twitter-share-button" data-lang="nl" data-text="Trattoria Aronica, eten op z'n Italiaans!" data-url="http://www.trattoriaaronica.nl" href="https://twitter.com/share">Tweeten</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script><a class="twitter-follow-button" data-lang="nl" data-show-count="false" float:="left" href="https://twitter.com/TrattAronica">@TrattAronica volgen</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></p>

[ Voor 60% gewijzigd door Verwijderd op 13-08-2012 20:45 ]

[iChaos]

Daar staat nog steeds <p>?

Verander <p> in <p class="weetikveelwelkeknop">, en zet in je CSS:

.weetikveelwelkeknop {
display: inline;
}

[geert1]

Blijft toch problematisch met dit soort topics dat de reacties uit losse kreten bestaan, terwijl het de topicstarter overduidelijk ontbreekt aan basiskennis (no offence). Ik zou voor willen stellen dat je eerst eens de basics van html en css leert. CSS is geen taal om alleen leuke visuele trucjes en hacks mee uit te voeren totdat je toevallig iets hebt dat werkt. Het is een instrument om volledig de controle te pakken over je opmaak, en daarbij is het onmisbaar dat je snapt hoe bijvoorbeeld blok-elementen gerenderd worden, hoe het float-systeem werkt, hoe verschillende css-eigenschappen effect hebben in je pagina, hoe je html opgebouwd hoort te zijn, enz.

Oftewel: Voor dit "probleem" zijn vele makkelijke oplossingen, en hiervan zijn al enkele aangedragen in dit topic. Je echte probleem zit echter iets dieper, want je gaat veel vaker tegen dit soort dingen aanlopen als je de basis niet onder de knie hebt. Ik heb nog niet echt een standaard-linkje die de basis echt goed uitlegt, maar wat ik zo snel kon vinden is bijvoorbeeld deze en deze (heeft links een aantal hoofdstukken). Je zult zien dat werken met html en css pas leuk is als je het een beetje snapt. Dat voorkomt een hoop frustratie, bugfixing, slechte code, enzovoort. Succes!

[Verwijderd]

Dank je voor je reactie geert! Ik zal je links goed bestuderen.

Ik zeg ook eerlijk, ik snap totaal niet wat bedoeld werd met 'zet dit in je CSS'. Er duiken dan vragen op als: "welke CSS file moet ik hebben?" "waar in de CSS file moet ik het plaatsen" etc...

Drupal is over het algemeen vrij simpel. Om een pagina te maken klik ik op add content en add page, echter zal ik meer kennis moeten hebben wil ik de betreffende page ook kunnen opmaken.

Ik weet bijvoorbeeld niet eens hoe ik de achtergrond van de website aanpas zodat ik een leuke pattern heb ipv een kleurtje.

Wederom bedankt!

[Loadichus]

Het blijft zeer, maar dan ook zeer belangrijk om je basis te kennen. In ieder geval wat je met een stylesheet/ css kan bereiken.

Om je niet helemaal te ontmoedigen heb ik een klein voorbeeldje voor je gemaakt
http://jsfiddle.net/Luvu3/1/

[Verwijderd]

Loadichus schreef op dinsdag 14 augustus 2012 @ 15:01:
Het blijft zeer, maar dan ook zeer belangrijk om je basis te kennen. In ieder geval wat je met een stylesheet/ css kan bereiken.

Om je niet helemaal te ontmoedigen heb ik een klein voorbeeldje voor je gemaakt
http://jsfiddle.net/Luvu3/1/

Thanks Load,

Dit heeft wel degelijk geholpen. Tot dusver heb ik het volgende:
http://jsfiddle.net/Luvu3/20/

Helaas werkt dit alleen niet op de website zelf nog Als ik dat scriptje paste in een nieuwe page, komen ze toch weer onder elkaar.

[ Voor 6% gewijzigd door Verwijderd op 14-08-2012 17:06 ]

[Harm]

Wilde gok: heeft het parentelement wel voldoende width?

[Loadichus]

Verwijderd schreef op dinsdag 14 augustus 2012 @ 17:05:
Helaas werkt dit alleen niet op de website zelf nog Als ik dat scriptje paste in een nieuwe page, komen ze toch weer onder elkaar.

Waarschijnlijk overruled de stylesheet (van je cms) de standaard instellingen. De enige manier om dit werkend te krijgen is een class te maken in je stylesheet en deze aan de buttons koppelen.

Ik heb weer een voorbeeld voor je: http://jsfiddle.net/Luvu3/28/

de tekst die in het rechtervak staat is dus je CSS! deze regel zul je dus in je stylesheet moeten verwerken (meestal style.css genoemd). Pas daarna kun je deze regel (class) oproepen en gebruiken in je html.

dus deze plaatsen in je css (stylesheet.css)\

code:

p.buttons {float:left}

*als je hier float:right van maakt zie je ook dan de buttons rechts gaan uitlijnen.

en via een class functie aanroepen op de locatie waar de buttons moeten komen

code:

<p class="buttons">

Harm schreef op dinsdag 14 augustus 2012 @ 23:53:
Wilde gok: heeft het parentelement wel voldoende width?

De totale breedte van de knoppen mogen idd de totale breedte van de parent idd niet overschrijven.

[ Voor 7% gewijzigd door Loadichus op 15-08-2012 09:24 . Reden: *voorbeeld toegevoegd ]

[Verwijderd]

Loadichus schreef op woensdag 15 augustus 2012 @ 09:19:
[...]

Waarschijnlijk overruled de stylesheet (van je cms) de standaard instellingen. De enige manier om dit werkend te krijgen is een class te maken in je stylesheet en deze aan de buttons koppelen.

Ik heb weer een voorbeeld voor je: http://jsfiddle.net/Luvu3/28/

de tekst die in het rechtervak staat is dus je CSS! deze regel zul je dus in je stylesheet moeten verwerken (meestal style.css genoemd). Pas daarna kun je deze regel (class) oproepen en gebruiken in je html.

dus deze plaatsen in je css (stylesheet.css)\

code:

p.buttons {float:left}

*als je hier float:right van maakt zie je ook dan de buttons rechts gaan uitlijnen.

en via een class functie aanroepen op de locatie waar de buttons moeten komen

code:

<p class="buttons">

[...]

De totale breedte van de knoppen mogen idd de totale breedte van de parent idd niet overschrijven.

Wow, dat was super duidelijk! Ik begin te begrijpen hoe het werkt. Je plaatst als het ware een gedragsregel in je styles.css en je verwijst in je html daarnaar.

Ik heb p.buttons {float:left} in de styles.css van de betreffende theme geplakt en heb zo de html code aangepast. We zijn er bijna, de like en tweet button worden naast elkaar weergegeven, de volg knop is ietwat recalcitrant en weigert.

Ze staan nu in de footer: *snip*
Nogmaal, 1000x thanks!

[ Voor 1% gewijzigd door Creepy op 19-08-2012 23:28 ]

[Loadichus]

Loadichus schreef op woensdag 15 augustus 2012 @ 09:19:
De totale breedte van de knoppen mogen idd de totale breedte van de parent idd niet overschrijven.

Zoals gemeld komt dat door de Widget (in dit geval de parent), deze heeft een maximale breedte die kleiner is dan de 3 buttons. Hierdoor komt de laatste button er onder.

Volgens mij kun je het aantal widgets in de footer wel instellen 2 of 3 en dan is het ook opgelost.

[ Voor 30% gewijzigd door Loadichus op 15-08-2012 15:01 ]

[Verwijderd]

Loadichus schreef op woensdag 15 augustus 2012 @ 14:50:
[...]


Zoals gemeld komt dat door de Widget (in dit geval de parent), deze heeft een maximale breedte die kleiner is dan de 3 buttons. Hierdoor komt de laatste button er onder.

Volgens mij kun je het aantal widgets in de footer wel instellen 2 of 3 en dan is het ook opgelost.

Yep, daar was ik nu naar aan het kijken. In de styles.css staat wel een sectie met de FOOTER instellingen, maar als ik hier de width aanpas gebeurt er verder niks:

.footer-box {
float: left;
width: 215px;
margin-right: 20px;
margin-bottom: 20px;

Het geprobeerd deze op 900px te zetten zonder resultaat. Trouwens, als ik een compleet nieuwe pagina maak, gebeurt precies hetzelfde en daar zou wel voldoende ruimte moeten zijn, toch?

[Loadichus]

Dit zou je niet in de stylesheet hoeven aanpassen. In Wordpress (ben ik iets meer in thuis) kun je namelijk het aantal widgets instellen die je gebruikt om de onderkant pagina. Deze worden uitgelijnd met percentages.
Kijk daarom even binnen het CMS of er niet ergens een optie is om bijvoorbeeld 2 widgets in je footer te gebruiken.

En anders komt het omdat het laatste element niet binnen de andere valt.
Zie afbeelding:



-- edit --

De laatste <p> element krijgt geen float mee.

Als ik met firebug de laatste p een float left mee geef is het wel goed:

[ Voor 38% gewijzigd door Loadichus op 15-08-2012 15:09 . Reden: afbeelding ]

[Verwijderd]

Ik zie het, met firebug kan ik ook een float: left; toevoegen. Vreemd dat de toevoeging in styles.css niet voor de laatste button werkt.

Het is gelukt. Met firebug heb ik de regel gevonden (179) en heb daar de float aan toegevoegd!

Nu ff kijken hoe ik de afstanden tussen de buttons kan aanpassen

edit:

woops, dat was dus niet goed, hij had m'n hele layout float left gezet.

[ Voor 59% gewijzigd door Verwijderd op 15-08-2012 16:56 ]

[Loadichus]

Het lijkt nog steeds een apart element. Je zou van het hele geheel 1 paragraaf kunnen maken?

code:

<p class="buttons">
*code button 1
*code button 2
*code button 3
</p>

Zo moeten alle elementen in één paragraaf vallen met dezelfde class.

[Verwijderd]

Loadichus schreef op woensdag 15 augustus 2012 @ 17:04:
Het lijkt nog steeds een apart element. Je zou van het hele geheel 1 paragraaf kunnen maken?

code:

<p class="buttons">
*code button 1
*code button 2
*code button 3
</p>

Zo moeten alle elementen in één paragraaf vallen met dezelfde class.

Zo staat hij er reeds in, als 1 paragraaf:

code:

<p class="buttons">
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.trattoriaaronica.nl&amp;send=false&amp;layout=button_count&amp;width=450&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21" style="border:none; overflow:hidden; width:130px; height:21px;"></iframe>
<a class="twitter-share-button" data-lang="nl" data-text="Trattoria Aronica, eten op z'n Italiaans!" data-url="http://www.trattoriaaronica.nl" href="https://twitter.com/share">Tweeten</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); </script>
<a class="twitter-follow-button" data-lang="nl" data-show-count="false" href="https://twitter.com/TrattAronica">@TrattAronica volgen</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</p>

[Loadichus]

Het blijft modderen in de code maar goed je zou het volgende kunnen proberen:
http://jsfiddle.net/Luvu3/60/

dus een paragraaf om elk element, maar ik heb gevoel dat dit ook niet gaat werken. Er zit ergens nog een width vast, of hij plaatst het element er buiten.

[Verwijderd]

omg, dat lijkt te werken... Ff in de footer proberen. Ubervaag zeg

Nou dit lijkt de oplossing te zijn! Thanks load, had t niet zonder jou gekund. Nu even kijken hoe ik de buttons kan laten aansluiten, er is nu nogal wat 'white space' tussen.

[ Voor 57% gewijzigd door Verwijderd op 15-08-2012 17:27 ]

[Loadichus]

Even op google zoeken naar: CSS Margin

--- edit ---
zoiets zal je waarschijnlijk helpen : http://jsfiddle.net/Luvu3/61/

[ Voor 52% gewijzigd door Loadichus op 16-08-2012 14:31 . Reden: fiddle voorbeeld ]

[Verwijderd]

Hey Load,

Bedankt voor al je hulp en je links. Dankzij jou heb ik nu tenminste een klein beetje inzicht in de relatie tussen HTML en CSS. Ik ben nu jouw links aan het bestuderen en probeer te experimenteren met de verschillende commandos. Ik denk dat ik nu de website veel beter kan customizen!

Mijn volgend doel is de background aanpassen. Ipv een kleurtje een mooie pattern maken

Overigens wil ik iedereen in de thread bedanken voor jullie geduld. Newbies kunnen vervelend zijn, maar deze is jullie erg dankbaar!