Beste SD'ers,
Ik loop tegen een paar kleine CSS probleempjes aan namelijk, het plaatsen van 9 vlaggen in top-centre van de header.
En het plaatsen van een logo en banner in de header!
Vroeger kon ik dit allemaal, maar ben er heel wat jaren uit geweest! Kan iemand mij hiermee assisteren?
Het gaat om het volgende:
Ik heb een qTranslate plug in geinstalleerd. En werkt voor de rest goed.
Eenmaal op de juiste url/en/ of bijv. url/nl/ blijft hij ook op deze taal. (Er schijnt zelfs een automatische browser taal te zijn, dat als je van 1 van de 9 door mij geselecteerde talen gebruikt maakt hij hier automatisch naartoe gaat. Al heb ik geen idee hoe ik dit kan testen).
Maar nu wil ik graag 9 vlaggetjes plaatsen in de top centre van de header zodat mensen hun voorkeur taal kunnen selecteren.
De plugin zelf geeft het volgende aan:
[aangevinkt] "CSS-code toegevoegd door de plugin in de kop van de website pagina's:"
Als ik het goed begrijp is dit dus ergens toegevoegd maar toont het zich niet op de website! Iemand een idee hoe ik dit op de juiste plek kan toevoegen?Code:.qtranxs_flag_en {background-image: url(http://what2docosta.com/wp-content/plugins/qtranslate-x/flags/gb.png); background-repeat: no-repeat;} .qtranxs_flag_nl {background-image: url(http://what2docosta.com/wp-content/plugins/qtranslate-x/flags/nl.png); background-repeat: no-repeat;} .qtranxs_flag_es {background-image: url(http://what2docosta.com/wp-content/plugins/qtranslate-x/flags/es.png); background-repeat: no-repeat;} .qtranxs_flag_fr {background-image: url(http://what2docosta.com/wp-content/plugins/qtranslate-x/flags/fr.png); background-repeat: no-repeat;} .qtranxs_flag_ca {background-image: url(http://what2docosta.com/wp-content/plugins/qtranslate-x/flags/catala.png); background-repeat: no-repeat;} .qtranxs_flag_ru {background-image: url(http://what2docosta.com/wp-content/plugins/qtranslate-x/flags/ru.png); background-repeat: no-repeat;} .qtranxs_flag_de {background-image: url(http://what2docosta.com/wp-content/plugins/qtranslate-x/flags/de.png); background-repeat: no-repeat;} .qtranxs_flag_it {background-image: url(http://what2docosta.com/wp-content/plugins/qtranslate-x/flags/it.png); background-repeat: no-repeat;} .qtranxs_flag_pt {background-image: url(http://what2docosta.com/wp-content/plugins/qtranslate-x/flags/pt.png); background-repeat: no-repeat;}
Zodra ik dit namelijk weet, kan ik ook proberen om een logo en een banner in de header te plaatsen.
Met vriendelijke groeten en alvast bedankt,
Gerard
- Wie wil mij een beetje op weg helpen met wat CSS dingetjes op wordpress website?
-
27-03-2017, 13:13 #1Particulier
- Berichten
- 17
- Lid sinds
- 11 Jaar
Wie wil mij een beetje op weg helpen met wat CSS dingetjes op wordpress website?
-
In de schijnwerper
Nu 50% korting op duizenden linkopties | DR60+ DA50+ | Blogs & Links in alle nichesLinkpartnersFit Leven Gids - Fitness/Welzijn & meer - Veel contentWebsite te koopSSD Webhosting al vanaf €0,85 ! 5GB SSD Opslag - Onbeperkt Dataverkeer - SitebuilderHostingDé complete, ontzorgende Managed VPS v.a. €59,99 per maandHosting -
27-03-2017, 16:32 #2Particulier
- Berichten
- 29
- Lid sinds
- 11 Jaar
Re: Wie wil mij een beetje op weg helpen met wat CSS dingetjes op wordpress website?
Je moet het ook toewijzen aan de header container en wrap. Anders zal die daar nooit niet verschijnen aan de front-end. Betaal er anders gewoon een paar tientjes voor joh. Er is vast wel een CSS pro hier te vinden op SD.
-
27-03-2017, 17:00 #3Particulier
- Berichten
- 17
- Lid sinds
- 11 Jaar
Re: Wie wil mij een beetje op weg helpen met wat CSS dingetjes op wordpress website?
Oke, bedankt voor je reactie. Maar het punt is dat ik het zelf wil leren.
-
27-03-2017, 17:46 #4
- Berichten
- 386
- Lid sinds
- 15 Jaar
Re: Wie wil mij een beetje op weg helpen met wat CSS dingetjes op wordpress website?
De divs weten op dit moment niet hoe groot ze moeten zijn. Geef dus bij je stijlen ook even met width en height de afmetingen mee. Dan zie je ze tenminste en kun je ze met andere stijlregels wat beter proberen te positioneren.
Je zult ze daarnaast wellicht een kleine margin mee willen geven en ze misschien daarna ook netjes naast elkaar willen plaatsen, bijvoorbeeld met float: left.
-
27-03-2017, 19:20 #5Particulier
- Berichten
- 17
- Lid sinds
- 11 Jaar
Re: Wie wil mij een beetje op weg helpen met wat CSS dingetjes op wordpress website?
Top de plaatjes staan in de Header! Ik heb het met 3 van de 9 vlaggetjes geprobeerd: en ze staan onder elkaar en verschuift de rest van de header items. (not good). En ze hebben nog geen link.. (ik denk dat ze gewoon naar url/en/ etc moeten linken??) Maar waar doe ik dat?
Ik heb dit gedaan in de style.css:
Code:.qtranxs_flag_en { background-image: url(http://what2docosta.com/wp-content/plugins/qtranslate-x/flags/gb.png); background-repeat: no-repeat; margin-right: 2px; width: 18px; height: 12px; } .qtranxs_flag_nl { background-image: url(http://what2docosta.com/wp-content/plugins/qtranslate-x/flags/nl.png); background-repeat: no-repeat; margin-right: 2px; width: 18px; height: 12px; } .qtranxs_flag_es { background-image: url(http://what2docosta.com/wp-content/plugins/qtranslate-x/flags/es.png); background-repeat: no-repeat; margin-right: 2px; width: 18px; height: 12px; }
Code:</head> <body <?php body_class(); ?>> <?php do_action( 'colormag_before' ); ?> <div id="page" class="hfeed site"> <?php do_action( 'colormag_before_header' ); ?> <header id="masthead" class="site-header clearfix"> <div id="header-text-nav-container" class="clearfix"> <?php if ( get_theme_mod( 'colormag_breaking_news', 0 ) == 1 || get_theme_mod( 'colormag_date_display', 0 ) == 1 || get_theme_mod( 'colormag_social_link_activate', 0 ) == 1 ) : ?> <div class="news-bar"> <div class="inner-wrap clearfix"> <?php if (get_theme_mod('colormag_date_display', 0) == 1) colormag_date_display(); ?> <?php if (get_theme_mod('colormag_breaking_news', 0) == 1) colormag_breaking_news(); ?> <div class="qtranxs_flag_en"></div> <div class="qtranxs_flag_nl"></div> <div class="qtranxs_flag_es"></div> <?php if( get_theme_mod( 'colormag_social_link_activate', 0 ) == 1 ) { colormag_social_links(); } ?> </div> </div> <?php endif; ?> <?php if (get_theme_mod('colormag_header_image_position', 'position_two') == 'position_one') { colormag_render_header_image(); } ?>
Laatst aangepast door G.A. Bosman : 27-03-2017 om 19:31
-
27-03-2017, 19:32 #6
- Berichten
- 451
- Lid sinds
- 13 Jaar
Re: Wie wil mij een beetje op weg helpen met wat CSS dingetjes op wordpress website?
"...en ze staan onder elkaar..."
> Een div is een block element; elke div pakt zich een nieuwe regel. CSS: display:inline-block of float:left. Nog liever: gebruik een span (inline element).
"...En ze hebben nog geen link....."
> Geen <a>, geen link; simple as that.
-
27-03-2017, 20:57 #7
- Berichten
- 100
- Lid sinds
- 10 Jaar
Re: Wie wil mij een beetje op weg helpen met wat CSS dingetjes op wordpress website?
Als je zelf CSS wil leren misschien handiger om een account aan te maken op stackoverflow, daar zitten meer webdesigners etc die je met css en dergelijke op weg kunnen helpen. Daar kun je denk ik beter terecht met je CSS vragen omdat dat puur op opmaak- en programmeertaal gericht is.
Daarnaast zijn er online natuurlijk duizenden css cursussen waar zeker goede tussen zitten.
-
28-03-2017, 08:21 #8
- Berichten
- 386
- Lid sinds
- 15 Jaar
Re: Wie wil mij een beetje op weg helpen met wat CSS dingetjes op wordpress website?
Het is inderdaad niet echt specifiek voor Wordpress, maar we hebben hier ook een CSS subforum dus in principe kan het hier prima. Maar misschien zou het nog beter zijn even een paar uurtjes aan de basis van CSS en HTML te besteden voor je verder gaat, daar zul je veel meer profijt van hebben.
-
28-03-2017, 09:32 #9Particulier
- Berichten
- 17
- Lid sinds
- 11 Jaar
Re: Wie wil mij een beetje op weg helpen met wat CSS dingetjes op wordpress website?
Het is gelukt mensen! Bedankt voor alle tips en tricks! (Vooral Tjerk en Marcel)
Ik heb het volgende gedaan!
Header.php
Code:<span style="padding-left:30px; padding-top: 3px;"> <a href="http://what2docosta.com/en/"><img class="qtranxs_flag_en"></img></a> <a href="http://what2docosta.com/nl/"><img class="qtranxs_flag_nl"></img></a> <a href="http://what2docosta.com/es/"><img class="qtranxs_flag_es"></img></a> <a href="http://what2docosta.com/fr/"><img class="qtranxs_flag_fr"></img></a> <a href="http://what2docosta.com/ca/"><img class="qtranxs_flag_ca"></img></a> <a href="http://what2docosta.com/ru/"><img class="qtranxs_flag_ru"></img></a> <a href="http://what2docosta.com/it/"><img class="qtranxs_flag_it"></img></a> <a href="http://what2docosta.com/de/"><img class="qtranxs_flag_de"></img></a> <a href="http://what2docosta.com/pt/"><img class="qtranxs_flag_pt"></img></a> </span>
Code:.qtranxs_flag_en { background-image: url(http://what2docosta.com/wp-content/plugins/qtranslate-x/flags/gb.png); background-repeat: no-repeat; margin-top: 5px; margin-right: 4px; width: 18px; height: 12px; display:inline-block; } .qtranxs_flag_nl { background-image: url(http://what2docosta.com/wp-content/plugins/qtranslate-x/flags/nl.png); background-repeat: no-repeat; margin-top: 5px; margin-right: 4px; width: 18px; height: 12px; display:inline-block; } .qtranxs_flag_es { background-image: url(http://what2docosta.com/wp-content/plugins/qtranslate-x/flags/es.png); background-repeat: no-repeat; margin-top: 5px; margin-right: 4px; width: 18px; height: 12px; display:inline-block; } .qtranxs_flag_fr { background-image: url(http://what2docosta.com/wp-content/plugins/qtranslate-x/flags/fr.png); background-repeat: no-repeat; margin-top: 5px; margin-right: 4px; width: 18px; height: 12px; display:inline-block; } .qtranxs_flag_ca { background-image: url(http://what2docosta.com/wp-content/plugins/qtranslate-x/flags/catala.png); background-repeat: no-repeat; margin-top: 5px; margin-right: 4px; width: 18px; height: 12px; display:inline-block; } .qtranxs_flag_ru { background-image: url(http://what2docosta.com/wp-content/plugins/qtranslate-x/flags/ru.png); background-repeat: no-repeat; margin-top: 5px; margin-right: 4px; width: 18px; height: 12px; display:inline-block; } .qtranxs_flag_it { background-image: url(http://what2docosta.com/wp-content/plugins/qtranslate-x/flags/it.png); background-repeat: no-repeat; margin-top: 5px; margin-right: 4px; width: 18px; height: 12px; display:inline-block; } .qtranxs_flag_de { background-image: url(http://what2docosta.com/wp-content/plugins/qtranslate-x/flags/de.png); background-repeat: no-repeat; margin-top: 5px; margin-right: 4px; width: 18px; height: 12px; display:inline-block; } .qtranxs_flag_pt { background-image: url(http://what2docosta.com/wp-content/plugins/qtranslate-x/flags/pt.png); background-repeat: no-repeat; margin-top: 5px; margin-right: 4px; width: 18px; height: 12px; display:inline-block; }
-
28-03-2017, 10:24 #10
- Berichten
- 386
- Lid sinds
- 15 Jaar
Re: Wie wil mij een beetje op weg helpen met wat CSS dingetjes op wordpress website?
Fijn dat het werkt, maar het kan nog wel wat netter. Ik zou de URL voor elke vlag gewoon in de img doen als src attribuut.
Dan kun je ook volstaan met een enkele class voor elke vlag en daar voor alle vlaggetjes de dingen als margins, display, enz in zetten.
Plaats een
- + Advertentie
- + Onderwerp
Marktplaats
Webmasterforum
- Websites algemeen
- Sitechecks
- Marketing
- Domeinen algemeen
- Waardebepaling
- CMS
- Wordpress
- Joomla
- Magento
- Google algemeen
- SEO
- Analytics
- Adsense
- Adwords
- HTML / XHTML
- CSS
- Programmeren
- PHP
- Javascript
- JQuery
- MySQL
- Ondernemen algemeen
- Belastingen
- Juridisch
- Grafisch ontwerp
- Hosting Algemeen
- Hardware Info
- Offtopic