On my personal website I am trying to put some small buttons that link to my other online profiles (linkedIn, StackOverflow etc.).
I have added html to a Text widget in the sidebar of my home page. And the buttons work as expected.
Where I am having trouble though is getting these buttons to all be on the same line - and I can't for the life of me figure out why they are on different lines.
The HTML code i use is:
<!-- LinkedIn Piece -->
<a href="https://nz.linkedin.com/pub/samuel-passmore/59/403/70a" style="text-decoration:none">
<img src="https://static.licdn.com/scds/common/u/img/webpromo/btn_in_20x15.png" width="30" height="22.5" border="0" style = "border-radius: 0em"></a>
<!-- StackOverflow Piece -->
<a href="http://stackoverflow.com/users/1544746/sampassmore" style="text-decoration:none;width: 30px">
<img src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a" width="30" height="22.5"></a>
And you can see the current result on my webpage
www.sampassmore.com
I think I have narrowed the issue down to the margins on the img tags, but setting them to 0px did not seem to do anything.
Does anyone have any other suggestions?
Add a class to the 3 widgets then add a display: inline-block property. You need that property to change the size of a tags and to display them inline properly. For example:
a.social-icons {
display: inline-block
}
Related
I'm using Wordpress 5.2.2 with Newspress Extend theme as the parent.
I restored the default settings of the theme in Appearance --> Newspress Options in an attempt to fix something unrelated, and lost the custom html/inline css that floated the advertisements, one left and one right to be sandwiching the logo. Oops. I tried to guess the replacement code based on my very limited knowledge of html/css and it's rendering them above not only the logo, but the top menu as well. I know this change can be done in this section because I'm just trying to restore it to what it was from the previous developer. Help would be greatly appreciated.
Appearance --> Newspress Options --> General Options --> Custom code within Head area (all pages)
<img src="http://ebonynewstoday.com/wp-content/uploads/2017/10/FLO_16975_Education-Print-Ad-Ebony-News-Today_10.625x10.445-GLOBE-C.jpg" alt="fla lottery" style="float:left; max-width: 25%;">
<img src="http://ebonynewstoday.com/wp-content/uploads/2017/10/SEH_EbonyNewsAd_OCT2017-1.jpg" alt="southeastern honda"/ style="float: right; max-width: 25%;">
custom css screenshot
logo screenshot in Newspress theme's custom interface
page in question
Your ads are sitting outside of the container div. They're actually sitting above the site's metatags at the moment. CSS is a powerful tool, but it shouldn't be used to over-correct or mask improper HTML structure. You need to stuff your ads into their respective divs.
This is how your HTML should look, specifically for your header div:
<div id="header">
<div id="header-content">
<!-- Site Titele and Description Goes Here -->
<div class="topadlft"><img src="http://ebonynewstoday.com/wp-content/uploads/2017/10/FLO_16975_Education-Print-Ad-Ebony-News-Today_10.625x10.445-GLOBE-C.jpg" alt="fla lottery"><img src="http://ebonynewstoday.com/wp-content/themes/newspress-extend/images/ad3.png"></div>
<img class="site-logo" src="http://ebonynewstoday.com/wp-content/uploads/2017/04/Ebony_LOGOHorizontal_Color.gif"><h1 class="site-title-hidden">Ebony News Today</h1>
<h2 class="site-title-hidden">"The Heartbeat of Our Community"</h2>
<div class="topadrt"><img src="http://ebonynewstoday.com/wp-content/uploads/2017/10/SEH_EbonyNewsAd_OCT2017-1.jpg" alt="southeastern honda"><img src="http://ebonynewstoday.com/wp-content/themes/newspress-extend/images/ad3.png"></div>
</div><!-- header-content -->
<div class="heading-date">Friday, October 4, 2019</div>
</div>
You will also want to turn off the "display:none;" selectors in your CSS file for the "topadlft" and "topadrt" classes. Also remove the inline styles from each ad image. You're going to want the div classes that contain the ads to do the heavy lifting here. Inline styles will just cause further complications.
Once you've addressed the above, you should wind up with something that looks like this:
Fixed Header Image
My website: cultpops.com
I'm trying to get the top left logo on my site to link to the 'about' portion on my page. As per another stackoverflow topic, I placed [a href="#about"][/a] around said logo and [a id="about"][/a] around said portion. What am I missing here?
I see you really put [a id=”about”] in your code. This is not an html tag. html tags always are like this <htmltag> and not with square brackets
If you want to link to an anchor you just need to give an id to the html element you want (doesn't have to be an <a> tag).
The easiest way to do this is for example on the image above your about section.
Set your editor to text instead of visual and add an id to your image or the a tag around it. It will look like this.
<a href="http://www.cultpops.com/wp-content/uploads/2015/05/logo21.png" id="about">
<img class="alignnone size-full wp-image-97" src="http://www.cultpops.com/wp-content/uploads/2015/05/logo21.png" alt="logo2" width="97" height="133">
</a>
Place the following around the "img src="example.com/image.png" tag:
<a href="http://example.com/youraboutpage">
<img src="example.com/image.png">
</a>
I can see you are using wordpress -the logo image tag is in your header.php file available in Appearance>Editor
Hope this helps
Admin Alex
I need some help here.
I found the "Miniport" template by "html5up" and I want to use this template as a base for my future projetc.
The demo can be seen here: http://html5up.net/miniport
On the demo we can see that bellow the website menu is an circular image and next to it is some texts. I need to know how to remove that image and center the texts so the texts can match the rest of the template (the site has the divs centered too).
I dont have much skills on css nor html5. Im a fan and I want to learn.
If anybode can help me, please..
Sorry about my english.
I too am using this template.
In order to remove the image, open the html document.
Delete this code that is found between ~line 42—46: (this is what formats and holds your image)
<article class="container" id="top">
<div class="row">
<div class="4u">
<span class="image fit"><img src="images/angela.jpg" alt="" width="118%" height="350" /></span>
</div>
Reformat the div tag:
<div class="8u"> to <div class="container" align="center">
By doing this, you are modifying the style within the html document rather than the css doc. This is good since you do not want to change every div tag in the html doc, just this one. Additionally, adding align="center" helps override most css formatting within your divs. You can use that trick later on in your site.
On a side note, double check that you like the command the contact form uses. I do not, since it opens up my computer's email app rather than directly sending the email through the webpage. That's my next project.
Enjoy!
I built a simple site as part of teaching myself HTML, CSS and JQuery. You can see it here: http://davideyre.co.uk
It was working fine for a while, but now in the 'contact' div several of the images have disappeared. The blue email image remains and the mouseover works to switch to the black email image, but the Twitter, LinkedIn and Google images are not displaying at all.
When I looked at them using the Inspect Element plugin on Firefox, it appears that an img class is being applied to these three icons. This code shows the first list item (the email icon) and the second list item (the Twitter icon) with the img class applied to it.
<div id="contact">
<ul>
<li class="menuimage">
<a target="_blank" href="mailto:david#davideyre.co.uk">
<img width="60" height="60" src="http://davideyre.co.uk/images/email_blue.png" data-other-src="http://davideyre.co.uk/images/emailblack.png">
</a>
</li>
<li class="menuimage">
<a target="_blank" href="http://twitter.com/davideyre">
<img class="qzsombkdzpaqphznltst" width="60" height="60" src="http://davideyre.co.uk/images/twitter_blue.png" data-other-src="http://davideyre.co.uk/images/twitterblack.png">
</a>
</li>
I have no idea how this img class is being applied to the images.
Many thanks to MarkB, IAteYourKitten and Bondye. It was the Adblocker in Firefox. :)
I wonder why you are using the class menuimage. You don't use it in your CSS.
I would try adding some styling to the menuimage class in CSS to see if you can affect the styling of the list tag. Or remove the menuimage class from the list tag and add it to the image tag item, and try to add styling.
In the footer of the website, I would like to include social widgets. Facebook one is working just fine, Tripadvisor comes with a many lines of code and and is not really styled, jumps off my footer etc.
How do I eventually style the widget which is not styled? If I change anything in the code, a message:
"Please check the TripAdvisor code and install again."
This is their code
<div id="TA_socialButtonBubbles675" class="TA_socialButtonBubbles">
<ul id="7xYqVoY8wKU" class="TA_links LV2VKytU2yB">
<a target="_blank" href="http://www.tripadvisor.com/Attraction_Review-g274707-d6883393- Reviews-I_Love_Segway_Private_Tours-Prague_Bohemia.html">
<img src="http://www.tripadvisor.com/img/cdsi/img2/branding/socialWidget/20x28_green-21693-2.png"/>
</a>
</li>
</ul>
</div>
<script src="http://www.jscache.com/wejs?wtype=socialButtonBubbles&uniq=675&locationId=6883393&color=green&size=rect&lang=en_US&langversion=2"></script>
The main problem is that it jumps out of the footer and does not stay in line like I would like to.
Screenshot:
The whole site to check is : http://ilovesegway.com
The best way for you to get it exactly like you want is for you to open your site in your browser of choice and tinker with the styling in the browsers developer tools.
I went in and slightly modified the parent div. I gave it a display: inline-block
<div id="TA_socialButtonBubbles675"
class="TA_socialButtonBubbles"
style="display: inline-block">...
That wasn't enough so I also changed two children divs to inherit the vertical-align styles.
<div class="socialWidgetContainer" had a style of display: table-cell which I removed.
<div class="socialWidget" style="vertical-align: inherit;"
I assume the second modification was generated content by trip advisor, but you should still be able to style this via a .css file or even some JavaScript.
I did all this through the chrome dev tools.
Have you tried using an iframe, similar to what the Facebook widget uses? That way, you could put the TripAdvisor code in a separate HTML fragment and let the iframe dictate where you want the widget to go. That way, you're not fighting against whatever styles are being pushed at you from TripAdvisor's scripts.
<!-- Facebook widget -->
<iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2FI-Love-Segway%2F540468152732697&width=100&layout=button&action=like&show_faces=false&share=false&height=35&appId=487866241269315" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:35px;padding-top:15px;" allowTransparency="true"></iframe>
<!-- Trip Advisor widget; add whatever styles or parameters you need -->
<iframe src="YOURSITE/tripaddvisor.php"></iframe>
You can still apply css rules to the included content. Consider making #TA_socialButtonBubbles675 position:relative and moving it manually to where you would like it to appear. I had some luck with:
#TA_socialButtonBubbles675
{
position: relative;
top: -116px;
left: 360px;
}