Here is my jsfiddle DEMO
I need to add social icons next text "follow us".
And I have to work with each link. but i have only one image..
So i need to set position something like that.but i just confused how to set.
HTML
<div class="social-bar">
<p class="follow-us">Follow Us</p>
<a>
<img src="http://s13.postimg.org/63sed3cjn/social_icons.png" />
</a>
</div>
Can anyone help me to fix this,?
Thanks,
You can use background-image. demo fiddle
HTML:
<div class="social-bar">
<p class="follow-us">
<span class="follow">Follow Us</span>
</p>
</div>
CSS:
.social-bar{
border-top:1px solid red;
width:922px;
background-color:#ef9d9d;
border-radius: 3px;
border: 1px solid #e48181;
height:49px;
margin:0 auto;
margin-bottom:20px;
position: relative;
}
.social-bar p{
font-family:Arial;
font-size:16px;
color: #fff;
margin-left:10px;
}
.social {
background-image: url(http://s13.postimg.org/63sed3cjn/social_icons.png);
display: inline-block;
width: 25px;
height: 25px;
}
.social.twitter {
background-position: -35px 0;
}
.social.google {
background-position: -70px 0;
}
.social.pinterest {
background-position: -100px 0;
}
Instead of <p> use span tag
<div class="social-bar">
<span class="follow-us">Follow Us</span>
<img src="http://s13.postimg.org/63sed3cjn/social_icons.png" /></a>
</div>
vertical-align: super;
display: inline-block; add this lines in your .social-bar p. Then it will work
Related
I've been struggling with this simple and basic problem for the last day and can't seem to find a solution for it nowhere.
I'm having a container div on my website, in which there are four social network buttons, and what I'm trying to achieve is vertically align them in to the middle
of the container, so there's equal amount of free space on top of them and underneath them.
Please note, that I've linke normalize.css and reset.css to my html.
Muh code:
HTML
<div class="social-line-container">
<div class="social-line-buttons-group">
<a href="#0"><img src="socialicons/facebook.png" alt="FB"><a/>
<a href="#0"><img src="socialicons/twitter.png" alt="TW"><a/>
<a href="#0"><img src="socialicons/google.png" alt="GO"><a/>
<a href="#0"><img src="socialicons/youtube.png" alt="YT"><a/>
</div>
</div>
CSS
.social-line-container {
width: 66%;
height: inherit;
margin: 0 auto;
}
.social-line-buttons-group a{
display: inline-block;
vertical-align: middle;
height: 100%;
float: right;
padding: 2px;
margin: 0 3px;
}
Any help will be much appreciated.
All you need to add is clear
.social-line-container {
width: 66%;
height: inherit;
margin: 0 auto;
}
.social-line-buttons-group a {
display: inline-block;
/*vertical-align: middle;*/
height: 100%;
float: right;
clear: both; /* add */
padding: 2px;
margin: 0 3px;
}
<div class="social-line-container">
<div class="social-line-buttons-group">
<a href="#0">
<img src="socialicons/facebook.png" alt="FB"><a/>
<a href="#0">
<img src="socialicons/twitter.png" alt="TW"><a/>
<a href="#0">
<img src="socialicons/google.png" alt="GO"><a/>
<a href="#0">
<img src="socialicons/youtube.png" alt="YT"><a/>
</div>
</div>
.social-line-container{
border:2px solid black;
}
.social-line-buttons-group{
display:flex;
align-items: center;
justify-content: center;
height:100%;
}
.social-line-buttons-group a{
padding: 2px;
margin: 0 3px;
}
img{
width:50px;
height:50px;
}
<div class="social-line-container">
<div class="social-line-buttons-group">
<img src="http://lh3.googleusercontent.com/-ElsaNCI_yKg/VcXI_VFictI/AAAAAAAAINA/MeFjL1Ymaac/s640/StylzzZ%252520%252528289%252529.png" alt="FB">
<img src="https://upload.wikimedia.org/wikipedia/it/archive/0/09/20160903181541!Twitter_bird_logo.png" alt="TW">
<img src="http://www.userlogos.org/files/logos/annyella/google3.png" alt="GO">
<img src="http://logok.org/wp-content/uploads/2014/08/YouTube-logo-play-icon-219x286.png" alt="YT">
</div>
</div>
(The title might sound stupid but I don't know how to put it more sophisticated.)
As you can see in the follwing screenshots, I have 3 stacked divs.
<div class="col-xs-3">
<div class="center-horizontal-inline">
<a class="upvote" href="#" data-id="iZheLNnewWtMhPTQd">
</div>
<div class="score">
115
<span class="badge score-diff vertical-align"> +5 </span>
</div>
<div class="center-horizontal-inline">
</div>
The one in the middle contains the number (115). The other two the vote-arrows. For the one containing the number, I want to add a "badge" (in bootstrap context) right next to the number, let's say to the right. You can see my attempt shining through the colored overlay.
The goal is to leave the number centered respectively to the arrow-icons, while placing the badge with an offset (or "right next to") respectively to the number.
My attempt was to set a float: right; for the badge, but as you can see, the number has an offset now. When I try position: absolute; on the badge, there is no offset (as wanted), but I can't get the badge right next to the number, I can only attach it to the right border because I don't have the number as positioning-reference anymore.
Hope my explanation was clear enough. I also didn't know how to search for that problem...
EDIT 1:
As I want it to look like (positioning-wise):
Here we go, using relative and absolute positions together:
DEMO: http://jsfiddle.net/1qbo7uwn/
HTML
<div class="score">
<span class="score-wrap">
<span class="score-main">123</span>
<span class="score-diff">8</span>
</span>
</div>
CSS
.score {
width: 80px;
border: 2px solid blue;
padding: 10px 0;
text-align: center;
}
.score-wrap {
display: inline-block;
position: relative;
}
.score-main {
border: 2px solid green;
}
.score-diff {
position: absolute;
border: 2px solid red;
left: 100%;
top: -2px;
}
Added some span tags in the HTML.
EDIT: vertical align of everything, by setting line height.
http://jsfiddle.net/1qbo7uwn/1/
As you said you are okay with HTML modification. Here's my attempt:
Demo Fiddle
HTML
<div class="wrap">
<div class="vote up">
<i class="fa fa-angle-up"></i>
</div>
<div class="stat">
<span class="score">115
<span class="badge">+5</span>
</span>
</div>
<div class="vote inactive">
<i class="fa fa-angle-down"></i>
</div>
</div>
CSS
.wrap{
margin: 100px;
text-align:center;
}
.vote{
font-size:36px;
}
.up{
color:green;
}
.down{
color:red;
}
.inactive{
color:gray;
}
.score{
position: relative;
display:block;
padding: 5px 0;
}
.badge{
background: #eee;
padding:5px 10px;
border-radius: 30px;
position: absolute;
top:0;
margin-left:10px;
}
Try
Demo: http://jsfiddle.net/tamilcselvan/rjv1xxo2/1/
.center-horizontal-inline {
font-size: 2em;
text-align: center;
}
.score {
text-align: center;
}
.score:after {
content:attr(data-badge);
position: absolute;
margin-left: .4em;
font-size: x-small;
min-width: 10px;
padding: 3px 7px;
font-size: 12px;
font-weight: 700;
line-height: 1;
color: #FFF;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
background-color: #777;
border-radius: 10px;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-xs-3">
<div class="center-horizontal-inline vote"> <i class="glyphicon glyphicon-chevron-up"></i>
</div>
<div class="score" data-badge="+5">115</div>
<div class="center-horizontal-inline"> <i class="glyphicon glyphicon-chevron-down"></i>
</div>
</div>
How do I overlay a paragraph of text over the image (homepagepic.jpg) in the middle of the page.
I want to write a bunch of text over the image, I have done quite a lot of research but I haven't come across much to be honest. Thanks very much indeed in advance
HTML:
<center>
<h1>Welcome To The Kingston University Survey Page</h1>
</center>
<img src="kingstonunilogo.jpg" id="uni" alt="uni logo"/>
<br/>
<div id="buttons">
<button onclick="window.location='http://www.google.com'" type="button home-button">Home</button>
<button onclick="window.location='http://www.google.com'" type="button contact-button">Contact Us</button>
LogIn
</div>
<br/><br/><br/><br/><br/><br/>
<img src="homepagepic.jpg" alt="homepagepic" id="middlepic" />
<br/>
<div id="footer">
©
<img class="social-badge" src="facebookpic.png" alt="facebook logo" onclick="window.location.href='http://www.facebook.com'">
<img class="social-badge" src="twitterpic.jpg" alt="twitter logo" onclick="window.location.href='http://www.twitter.com'">
</div>
CSS:
h1 {
margin:0px;
padding:0px;
}
body {
background-color: #A9D0F5;
}
#middlepic {
display: block; margin: 0 auto;
}
#uni {
display: block; width: 200px; height: 175px; float:left;
}
#footer {
width: 100%; height:100px; display: inline-block; text-align: center;
}
#buttons {
display: block;
margin: 0 auto;
width: 50%;
}
button {
height: 30px;
width: 200px;
background-color: #ccc;
border-radius: 10px;
}
a {
text-decoration: none; color: #000;
}
.social-badge {
width: 40px;
}
Why dont you make a new div and put the homepagepic.jpg as its background and then write in that div.
<div id="written">
This text is over the image
</div>
and in CSS
#written
{
background-image : url(***** here comes the url of image homepagepic.jpg*****);
}
If you don't want to use background-image use position:absolute for the paragraph http://jsfiddle.net/8cup75k3/
p{
width:500px;
position:absolute;
margin-top:-100px;
color:green;
}
Use CSS
background-image: url('kingstonunilogo.jpg');
A semantic approach would be to use a figure element with an absolutely positioned figcaption.
Something like this:
figure { position: relative; }
figcaption {
position: absolute;
top: 0; left; 0;
}
<figure>
<img src="http://placehold.it/240" />
<figcaption>This is overlay text.</figcaption>
</figure>
Okay so I am trying to integrate a link into the flow of the paragraph (directly to the right of '1.' but for some reason it is not showing up? How do I make it integrate into the flow.
Here is a http://jsfiddle.net/5CMfv/ for reference
Thanks
<div id="home-infobox">
<div class="infobox_picture">
<img src="images/image1.png" width="91" height="90">
<a style="position:absolute; padding-left:30px;"><h1>Image1</h1><p>Kappa kappa kaap 1. <p>more</p></a>
</div>
<div class="infobox_picture">
<img src="images/news.jpg" width="92" height="90">
<a style="position:absolute; padding-left:30px;"><h1>NEWS</h1><p>DKappakpapapapa</p> </a>
</div>
<div class="infobox_picture">
<img src="images/314.JPG" width="93" height="90">
<a style="position:absolute; padding-left:30px;"><h1>The Team</h1><p>KappaKappa </p> </a>
</div>
</div>
#home-infobox{
height: 335px;
background-color:#425eb4;
background-repeat: no-repeat;
background-position: left top;
width: 450px;
float: left;
position: absolute;
top:250px;
left:80px;
}
#home-infobox{
height: 335px;
background-color:#425eb4;
background-repeat: no-repeat;
background-position: left top;
width: 450px;
float: left;
position: absolute;
top:250px;
left:80px;
}
.infobox_picture {
margin-top: 15px;
margin-right: 10px;
margin-bottom: 15px;
margin-left: 10px;
clear: both;
background-position: center bottom;
background-repeat: no-repeat;
background-color: white;
height: 90px;
position: relative;
}
.home-infobox ~ .home-infobox:before {
content: '';
position: absolute;
left: 0;
top: -8px;
width: 100%;
border-top: 1px solid black;
}
#home_infobox p a{
color: #3B4B7E;
text-decoration: none;
z-index:999;
position:relative;
}
#home_infobox p a:hover{
color: #475883;
text-decoration: underline;
}
h1 {font-family:'Montserrat', sans-serif; font-size:15px; position:relative; z- index:999}
h2 {font-family: 'Montserrat', sans-serif; font-size:25px; position:relative;}
h3 {font-family:'Montserrat', sans-serif; font-size:15px; position:relative; z-index:999}
You have invalid HTML:
<p>Kappa kappa kaap 1.<p>more</p>
should be:
<p>Kappa kappa kaap 1. more</p>
On further inspection, you have other HTML issues as well.
http://validator.w3.org/
You can do it like this:
<div class="infobox_picture">
<img src="images/image1.png" width="91" height="90">
<div style="display:inline-block; position:absolute; padding-left:30px;">
<h1>Image1</h1>
<p>Kappa kappa kaap 1.</p>
<p>more</p>
</div>
</div>
An a element always has to have an href attribute. It's better to put an 'a' inside a text element. So, i'va put a div element on de place where you had an 'a' element, and added the display:inline-block css-property to make this block element behave somewhat like the inline 'a' element.
I have two image links that need to be centered with a little shifting.
My problem is that one link cause the other to be unclickable.
DEMO - The right one can't be clicked
HTML:
<div class="my_class" id="my_id1">
<a href="URL">
<img src="//placehold.it/200x150" />
</a>
</div>
<div class="my_class" id="my_id2">
<a href="URL2">
<img src="//placehold.it/200x150" />
</a>
</div>
css:
#my_id1
{
left: 120px;
}
#my_id2
{
right: 120px;
top: -157px;
}
.my_class
{
text-align:center;
position:relative;
display: block;
margin-left: auto;
margin-right: auto;
}
.my_class
{
text-align:center;
position:relative;
display: block;
margin: 0px, auto;
}
img{
border:1px solid red;
}
Here is the modified code:
<div class="my_class" id="my_id1"> <a href="URL">
<img src="//placehold.it/200x150" />
</a>
</div>
<div class="my_class" id="my_id2"> <a href="URL2">
<img src="//placehold.it/200x150" />
</a>
</div>
And the CSS:
#my_id1 {
float: left;
left: 150px;
}
#my_id2 {
float:right;
right: 150px;
}
.my_class {
text-align:center;
position:relative;
display: block;
margin-left: auto;
margin-right: auto;
}
.my_class {
text-align:center;
position:relative;
display: block;
margin: 0px, auto;
}
img {
border:1px solid red;
}
You need to float those containers : http://jsfiddle.net/GbzSQ/5/
Your first div overlaps over the other, so you need to float them and then use margins to position them properly.
.my_class{
float:left;
width:200px;
}
The divs of the links are just on top of each other.
So the mouse does not "see the bottom link".
Try using display inline in the divs with defined width.
I would use some floats or display:inline-block 's.
I made an update of your Fiddle with the Floats.
http://jsfiddle.net/cfknoop/GbzSQ/7/
#my_id1 {
float:left;
}
#my_id2 {
float:right;
}
The wrapper needs to be cleared with an clearfix or something.
Try not to use negative positioning, it's bad practice and will cause issues such as this. Try defining the size of the containing divide, position that, then float the divs within this.
I'll put together a quick fiddle to show you.
http://jsfiddle.net/GbzSQ/23/
And here's the HTML:
<div class="container" id="container">
<div class="my_class1" id="my_id1">
<a href="URL">
<img src="//placehold.it/200x150" alt="1" />
</a>
</div>
<div class="my_class2" id="my_id2">
<a href="URL2">
<img src="//placehold.it/200x150" alt="2" />
</a>
</div>
</div>
And the CSS:
.my_class2 {
text-align:center;
float: right;
position:relative;
display: block;
margin: 0 auto;
}
.my_class1 {
text-align:center;
float: left;
position:relative;
display: block;
margin: 0 auto;
margin-right: 20px;
}
img{
border:1px solid red;
}
.container {
width: 440px;
height: 200px;
display: block;
margin: 0 auto;
}