I'm trying to make my little icons on this page (http://www.alinewbury.com/contact.html) into links.
They're each in a div separately, but whenever I try to do:
<div class="social-btn pinterest"></div>
It doesn't seem to work! How can I link these icons to the respective websites?
The Div is supposed to be inside the Anchor tag.
Check Anchor tag usage
To make the icon click able you have to fix some issues. First of all your icons are not really linked. you can see the Hand cursor because the property defined in the class .social-btn
To make a icon clickable you should follow this approach. put the text inside a tag a better approach also you have to change the font-size:0
.social-btn a
{
padding: 22px;
font-size: 0;
}
your HTML should be like this.
<div class="social-btn pinterest">
pinterest
</div>
Related
I am trying to embed this iTunes button that I am putting on a site, but it seems to automatically alight left. Where and how in this code would I make the button center itself? Please see the example code below. Thanks!
Here's a quick fix if you have access to the css you could easily do this with flex box.
Wrap your anchor tag:
<div class="itunes">
</div>
add this css:
.itunes {
display:flex;
justify-content:center;
}
jsFiddle
Although adding inline-styles is frowned upon..., if your in a pinch this will work as well. Please don't do this unless you must:
<div style="display:flex;justify-content:center;">
</div>
note: flex box works on most browsers.
I have the top bar of my page set up as follows: Home | Contact Us etc..
It lies within a p tag inside a div id.
How would i go about setting up the :hover css on each link without having to separate them into different classes such as how I have them at the moment. Is it possible?
I don't think i used the correct css because i couldn't position them correctly without having to use different padding parameters for each class which makes the spacing look inaccurate.
via codepen: http://codepen.io/Hafkamp/pen/jabmE
html:
<div id="topinfo">
<div class="home"><p>Home |</p></div>
<div class="about"><p>About |</p></div>
<div class="contactUs"><p>Contact Us |</p></div>
<div class="map"><p>Map |</p></div>
</div><!--/topinfo tag-->
css:
.home p{padding-right:250px;}
#topbar .home p:hover{color:rgba(255,255,255,1)}
Is there an easier way to do this that is not so tedious. This method also causes the divider to have the hover effect which is not desirable.
The best way of defining menus in a page is to use "ul" and "li" tags. But if you still want to use with tag you have to use it this way:
`Home
About
contact
.home_link, .about_link, .contact_link{color: red;}
.home_link:hover, .about_link:hover, .contact_link:hover {color: blue;}`
I would give them all the same class, say topitem, and use a rule like this:
.topitem:hover p {
color:rgba(255,255,255,1);
cursor:pointer;
}
Although really, I would get rid of the interior <p> tag and reduce the selector to .topitem:hover – the text is already wrapped in a <div>, so why wrap it again? (But see Zinnia's note about the convention of using <ul> and <li> instead of nested <div>s.)
I am trying to use an icon-stack inside of a link. When I just use a single icon, everything works as normal. But when trying to use a stacked icon, it doesn't appear in the link like a single icon would.
The first method I am using is:
<span class="icon-stack"><i class="icon-circle icon-stack-base"></i><i class="icon-twitter"></i></span>tweetthis
Seen: Broken Stacked Icon
That gives me something where the two icons are both left-aligned (off center) and the icons appear over top of the text.
I had thought that including the span with the icon-stack class in place of a single <i> would be the way to do it, but it's not. This works fine:
<i class="icon-circle"></i><i class="icon-twitter"></i>tweetthis
Seen: Inline icons
I am not sure where to put the container <span>, or if there needs to be more styles added to it. I've tried various combinations. Setting the a to display:block doesn't help (there are no other styles applied to the link).
When there is no text in the link, the result is the same. Setting the .icon-stack container class to display:block does help it work, but it's not perfect since the base icon is so much bigger than the icon on top.
It this something that is possible? Or am I pushing the limits of how stacked icons should be used?
Here you go..
<a href="http://google.com">
<span class="icon-stack">
<i class="icon-check-empty icon-stack-base"></i>
<i class="icon-twitter"></i>
</span>
link text
<br/>
</a>
Span set to inline-block to ensure that the icon stays in place
body {
color:#00000;
}
a {
text-decoration:none;
color:inherit;
display:block;
}
span.icon-stack {
display:inline-block;
}
Demo: http://jsfiddle.net/aB4nU/1/
This is fixed in 3.2.1-wip branch. Or you can wait for the release tomorrow. :)
I am creating a website using Bootstrap found here:
http://www.bestcastleintown.co.uk/wp/
My issue is that on the home page my social networking buttons for Twitter and Facebook found just underneath the <header> do not align horizontally if you look closely. I was hoping that by creating a separate CSS class class="like-btn" for the list item containing the facebook button I can make them align horizontally.
<div class="bs-docs-social">
<div class="container">
<ul class="bs-docs-social-buttons">
<li class="like-btn">
<!--facebook like button-->
</li>
<li class="follow-btn">
<!--twitter follow button-->
</li>
<li class="tweet-btn">
<!--twitter tweet button-->
</li>
</ul>
</div>
</div>
However it looks like the facebook code for the like button is contained within an iframe which includes some CSS styles and unless my website happens to have the same matching protocol, domain and port as the Facebook iframe, I cannot not modify it because of Same Origin Policy.
I have noticed one CSS rule from facebook that if removed makes the buttons seem to align, but the border is removed from the bottom of the like button which is undesirable.
.pluginButtonSmall {
padding: 0 5px 2px;
}
Is there anything I can add to my .like-btn class to resolve the issue so the buttons align horizontally?
If that's causing the issue; maybe add a rule
.like-btn div {
padding: 0px;
}
or
.like-btn .pluginButtonSmall {
padding: 0px;
}
You might like to try a css rule something like...
.like-btn, .follow-btn, .tweet-btn {
float: left;
display: inline-block;
}
Use divs instead of ul> li and the use margin-top or padding-top on the social container elements to make them align horizontally. Usually you need to move them one or two pixels since not all social buttons have the same dimension.
At the bottom of getBootstrap.com they had this:
I used Chrome's developer's tools to see that the formatting came from this css file: http://getbootstrap.com/assets/css/docs.min.css
It has a license at the top that allows me to use it. So I downloaded it and made my own social media footer:
I found this thread because you are using the same class names as getBootstrap.com does, so I guess you are using bootstrap....
Instead of my background only acting as a background for the 4 different types of pottery in the ul element, the red background covers my name and navigation bar. Why is it doing this? I have tried to make everything relative positioning but doesnt seem to make a difference. Why is the ul element not following the flow of the document, it should sit below my name and navigation.
Please advise, see example here: example
If i am getting your problem correct then here is the solution
check this updated fiddle: http://jsfiddle.net/4GUkU/2/
Note: Please let me know if am lagging here so i can change as per requirement.
Browers have a difficult time with heights of floated DIVs. The easiest thing to do is to put:
<div style="clear:both;"></div>
after the tag.
The red color everywhere is due to
#featured {
...
background-color:Red;
...
}
And the UL displays below "The Pottery Club" and the nav links for me (in Chrome). Which browser are you using?
By the way, semantically you do not need to use and in a tag. tags are already interpreted vertically, unless you choose otherwise with CSS.
You could rewrite your navigation menu like so:
<nav id="nav-main">
<a title="Book Class" href="">Book Class</a>
<a title="Plan your visit" href="/visiting">Plan your visit</a>
<a title="Contact us" href="/visiting">Contact us</a>
</nav>
If you keep the and in your , a blind person's reader would read to him/her: "navigation, unordered list, list-item..." which does not make very much sense.