Encountering a CSS push down problem, been searching for fix but not able to find out what exactly is the problem. All the icons are displayed in a stairs-like layout. Need your help in fixing this.
HTML
<div style="/*float: left; width:153.6px;" */ class="footerStyles">
<h4 style=" margin: 0; font-size: 100%;">CONNECT</h4>
<br/>
<br/>
<br/>
<div class="clear"></div>
</div>
CSS
.connectWith{
/*background-position: left center;
background-repeat: no-repeat;
padding-top: 8px;
padding-bottom: 8px;
padding-left: 40px;*/
margin-right: 0;
padding: 0;
float: left;
}
/* email ---------- */
.email{
width: 50px;
height: 50px;
text-decoration: none;
display: block;
text-indent: -9999px;
background-image: url("http://www.browsealoud.com/images/browsealoud/plus/uk/firefox.jpg");
background-position: 0 0;
}
.email:hover{
background-position: 0 50px;
}
/* twitter ---------- */
.twitter{
width: 50px;
height: 50px;
text-decoration: none;
display: block;
text-indent: -9999px;
background-image: url("http://www.browsealoud.com/images/browsealoud/plus/uk/firefox.jpg");
background-position: 0 0;
}
.twitter:hover{
background-position: 0 50px;
}
/* facebook ---------- */
.facebook{
width: 50px;
height: 50px;
text-decoration: none;
display: block;
text-decoration: -9999px;
background-image: url("http://www.browsealoud.com/images/browsealoud/plus/uk/firefox.jpg");
background-position: 0 0;
}
.facebook:hover{
background-position: 0 50px;
}
/* google+ ---------- */
.googleplus{
width: 50px;
height: 50px;
text-decoration: none;
display: block;
text-decoration: -9999px;
background-image: url("http://www.browsealoud.com/images/browsealoud/plus/uk/firefox.jpg");
background-position: 0 0;
}
.googleplus:hover{
background-position: 0 50px;
}
JSFiddle
If you want them side-by-side, then you should remove the <br />s you have. That's what's causing the stair effect.
http://jsfiddle.net/HZ4UU/1/
If you want them to display one underneath the other, then you shouldn't have it floated at all.
You just need to include property clear:both (or left, right).
Take out <br> element after each <a> tag and your problem will vanish. You are floating a elements left, but they are also separated with <br> tags that have some default margin and padding.
Related
I have a background image that's about 1200 (w) x 800 (h) but i just want to use the whole 100% resolution for it. I have a button inside this div container but it's not displaying correctly. The background image won't expand to it's full resolution. It seems like it's only showing enough to allow the button to show.
.endFoot {
background-image: url('https://via.placeholder.com/900x900');
background-size: cover;
width: 100%;
height: 100%;
}
.customButton {
position: relative;
bottom: 0;
left: 41%;
padding: 25px 35px;
font-size: 16px;
cursor: pointed;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
background-color: #AB0002;
border: none;
border-radius: 15px;
}
<div class="endFoot">
<button class="customButton">TEXT</button>
</div>
here's a little picture demonstrating what's going wrong vs what i want:
This has nothing to do with background image not expanding. Your div is simply not tall enough to show more of the image. Going off of your diagram, you want to add some padding to .endFoot.
background-size: cover; is a good choice, but you may also want to consider centering the position with background-position: 50% 50%;.
.endFoot {
background-image: url('https://via.placeholder.com/900x900');
background-size: cover;
background-position: 50% 50%;
width: 100%;
background-repeat: no-repeat;
padding: 400px 0 0 0;
height: 100%;
}
.customButton {
position: relative;
bottom: 0;
left: 41%;
padding: 25px 35px;
font-size: 16px;
cursor: pointed;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
background-color: #AB0002;
border: none;
border-radius: 15px;
}
<div class="endFoot">
<button class="customButton">TEXT</button>
</div>
If you would like the endFoot div to have the same height as the background, just set the height to 800px, because 100% doesn't change anything in this case.
Also set the endFoot position to relative in order to put the botton to the correct position.
If you are trying to achieve full screen background try :
.endFoot {
width: 100vw;
height: 100vh;
}
For browser support informations of vh and vw units check : https://caniuse.com/#feat=viewport-units
Just add text-align:center to .endFoot class to make center button and add some margin to .customButton class for leave some space to bottom.
.endFoot {
background-image: url('https://via.placeholder.com/900x900');
background-size: cover;
background-position: 50% 50%;
width: 100%;
background-repeat: no-repeat;
padding: 400px 0 0 0px;
height: 100%;
position: relative;
text-align: center;
}
.customButton {
padding: 25px 35px;
font-size: 16px;
cursor: pointed;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
background-color: #AB0002;
border: none;
border-radius: 15px;
margin-bottom: 10px;
}
<div class="endFoot">
<button class="customButton">TEXT</button>
</div>
I have a spaninside the anchorelement.
All I want is:
1) Have a width for the anchor text, so that it does not overlap on the span element.
2) The span element should be aligned to the first line of the anchor text
3) The span element to be right of the anchor text
a {
width: 147px;
display: inline-block!important;
}
span.expand {
background: url(https://cdn2.iconfinder.com/data/icons/deadsimple/youtube.gif) no-repeat right center;
text-decoration: none !important;
padding-right: 14px;
margin-left: 100px;
}
<a href="#">
Enrollment to communication skills
<span class="expand"></span>
</a>
I have no other choice but to use span inside anchor, even though it is not a recommended.
Not sure what you want to achieve, but based on what you have mentioned, here is the solution.
WORKING DEMO
The CSS Change:
a {
width: auto;
display: inline-block!important;
}
span.expand {
background: url(https://cdn2.iconfinder.com/data/icons/deadsimple/youtube.gif) no-repeat right center;
text-decoration: none !important;
background-position: top right;
padding: 11px;
float: right;
}
Edited CSS Change:
If the width needs to exist without setting it to auto, below is the code.
WORKING DEMO WITHOUT AUTO WIDTH
a {
width: 135px;
display: inline-block;
position: relative;
}
span.expand {
background: url(https://cdn2.iconfinder.com/data/icons/deadsimple/youtube.gif) no-repeat right center;
text-decoration: none !important;
background-position: 0 0px;
padding: 11px;
position: absolute;
z-index: 1;
top: 1px;
right: 17px;
}
Hope this helps.
You can do this in a few ways. One way is by moving the <span> outside the anchor. Another way is by adding the background image to the anchor and remove the span.
Both ways are visible in this JSFiddle: https://jsfiddle.net/xpoa06x8/
<a href="#">
<!-- using a backgroundimage -->
Enrollment to communication skills
</a>
<br/><br/><br/><br/><br/>
<a class="href" href="#">
<!-- using an extra span -->
Enrollment to communication skills
</a>
<span class="extend"></span>
CSS:
a {
width: 146px;
display: inline-block!important;
background-image: url(https://cdn2.iconfinder.com/data/icons/deadsimple/youtube.gif);
background-repeat: no-repeat;
background-position: 120px 0px;
}
/* Second example */
.href{
background-image: none;
float:left;
display:block !important;
}
.extend{
display:block;
float:left;
background-image: url(https://cdn2.iconfinder.com/data/icons/deadsimple/youtube.gif);
background-repeat: no-repeat;
width:15px;
height:15px;
}
Working fiddle
I added :after pseudo-element instead .extend with position:absolute;
a {
width: 147px;
display: inline-block!important;
position:relative
}
a:after {
background: url(https://cdn2.iconfinder.com/data/icons/deadsimple/youtube.gif) no-repeat right center;
text-decoration: none !important;
width: 15px;
height: 15px;
vertical-align: baseline;
display: block;
margin-left: 5px;
content: '';
position: absolute;
right: -10px;
top: 0;
}
I'm trying to put the blue div at the bottom of this picture, and I'm stuck for some reason.
My CSS:
.boxes {
margin-left: 4%;
margin-right: -4px;
height: 345px;
padding: 5px;
font-size: 12px;
}
.box-one{
background-image: url("uploadir.com/u/nxa8310f");
background-repeat: no-repeat;
background-size: cover;
}
.index-image-text {
padding-bottom: 0;
margin-bottom: 0;
font-weight: bold;
color: white;
background-color: #2E3192;
}
HTML:
<div class="boxes img-rounded box-one grid-20">
<h1>Pottery Painting</h1>
<p class="index-image-text">
Testing<br>
</p>
</div>
It shows the little gap on both sides, but i want it all the way at the bottom of the div, and without the gap.
This is what it's showing:
https://sc-cdn.scaleengine.net/i/b4a1b72231a52f3a4977f68b76c0a7ad.png
this is what I want it to show:
https://sc-cdn.scaleengine.net/i/c66fe095c68250837b4b320c87bf72f0.png
any ideas? here's a fiddle: jsfiddle.net/kzaLx2vb/
May be this help.
HTML:
<div class="boxes img-rounded box-one grid-20">
<h1>Pottery Painting</h1>
<p class="index-image-text">Testing</p>
</div>
CSS:
body {
width: 300px;
}
.boxes {
margin-left: 4%;
margin-right: -4px;
height: 345px;
font-size: 12px;
}
.box-one{
background-image: url("http://uploadir.com/u/nxa8310f");
background-repeat: no-repeat;
background-size: cover;
}
.index-image-text {
padding-bottom: 0;
margin-bottom: 0;
position:relative;
top:75%;
font-weight: bold;
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
color: white;
background-color: #2E3192;
text-align: center;
padding-top: 10px;
}
h1 {
padding-top: 30px;
text-align: center;
color:#FFF;
}
JSFiddle: http://jsfiddle.net/5q354m3h/
A good way to achieve what you want is to give the box a relative style:
.box-one{
position:relative;
}
and then absolutely position your index-image-text
.index-image-text {
position:absolute;
bottom: 0;
left:0;
right:0;
}
http://jsfiddle.net/kzaLx2vb/11/
CSS:
.boxes {
margin-left: 4%;
margin-right: -4px;
height: 345px;
font-size: 12px;
/* addition code */
padding: 0; /*change your padding from 5px to 0*/
position: relative; /* set to relative to be the reference outter box */
border-radius: 10px; /* rounded corner based on the reference image */
overflow: hidden; /* to cut out for the bottom rounded corner */
max-width: 320px; /* this line not required*/
}
.box-one{
background-image: url("http://uploadir.com/u/nxa8310f");
background-repeat: no-repeat;
background-size: cover;
}
h1 {
color: #fff;
text-align: center;
}
.index-image-text {
padding-bottom: 0;
margin-bottom: 0;
font-weight: bold;
color: white;
background-color: #2E3192;
/* addition code */
margin: 0; /* override default padding value on "p" tag */
padding-top: 10px; /* spacing based on the reference image */
position: absolute; /* set to absolute to position within relative outter box */
bottom: 0; /* make the inner box stick to the bottom of outter box */
width: 100%; /* stretch the inner box to fill up outter box */
text-align: center; /* position based on the reference image */
font-family: verdana; /* font fammily based on the image */
}
I have an image 200px x 100px which acts as a background image to a link.
On hovering, the bg image changes.
Fiddle here: http://jsfiddle.net/EnsFK/
As you can see from the image, the text is not aligned with the image and appears at the bottom. Is there a way to align the text so it is in the middle (Aligned with the small dot?) I've tried vertical-align and
line-height but to no avail.
.current-location {
line-height: 24px;
background-size: 48px 24px;
height: 24px;
width: 24px;
text-decoration: none;
position: relative;
line-height: 24px;
vertical-align: middle;
}
.current-location span {
background: url(images/mobile/current-location.gif) left top no-repeat;
display: inline-block;
background-position: 0px 0px;
background-size: 48px 24px;
height: 24px;
width: 24px;
margin-right: 10px;
}
.current-location:hover span {
display: inline-block;
background-position: -24px 0px;
background-size: 48px 24px;
height: 24px;
width: 24px;
}
Rather than using an empty span in your markup, you could use pseudo elements.
Something like this:
.current-location:before {
content: '';
/* image here */
margin-right: x px; /* however much you need */
vertical-align: middle;
}
FIDDLE
Markup:
Use this location
CSS
.current-location {
line-height: 24px;
background-size: 48px 24px;
height: 24px;
width: 24px;
text-decoration: none;
position: relative;
}
.current-location:before {
content: '';
background: url(http://i39.tinypic.com/2lk5lci.png) left top no-repeat;
display: inline-block;
background-position: 0px 0px;
background-size: 48px 24px;
height: 24px;
width: 24px;
margin-right: 10px;
vertical-align: middle;
}
.current-location:hover:before {
background-position: -24px 0px;
}
You can either change the line-height of the text to fit the image's location, or play with background-position property for the image's position to fit it to the text.
Working jsFiddle - also removed some of the unnecessary code.
.current-location {
line-height: 24px;
height: 24px;
text-decoration: none;
position: relative;
line-height: 26px;
display:inline-block;
}
.current-location span {
background: url(http://i39.tinypic.com/2lk5lci.png) left top no-repeat;
display: inline-block;
background-position: 0px 0px;
background-size: 48px 24px;
height: 24px;
width: 24px;
margin-right: 10px;
vertical-align:top;
}
.current-location:hover span {
background-position: -24px 0px;
}
Note: this is usually done without the <span> element using background on the anchor itself. However you method will work just as fine with the new CSS..
I like to use this css snippet for vertical centering
#text{
position:absolute;
top:50%;
height:240px;
margin-top:-120px; /* negative half of the height */
}
#container {
position: relative;
height: 400px;
}
<div id="container">
<div id="text"><span>Text.....</span></div>
</div>
Your link is aligned properly look at your image instead
background: url(images/mobile/current-location.gif) left top no-repeat;
If you want it to be center aligned you should consider doing...
background: url(images/mobile/current-location.gif) center center no-repeat;
Also give the true width and height of the image for this method to work.
display: inline-block;
has problems with ie6 you will need to use:
display:inline-block;
*zoom: 1;
*display: inline;
try and stay away from vertical alignment.
How about a version with no images and no extra markup? http://jsfiddle.net/6aaZX/
For this HTML:
Use this location
This CSS:
a {
display: inline-block;
color: #333;
text-decoration: none;
font-family: sans-serif;
padding-left: 4em;
line-height: 2;
}
a:before {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background: #81B995;
content: '';
display: inline-block;
width: 0.7em;
height: 0.7em;
border: 0.4em solid #B7E2C8;
margin-right: 1em;
vertical-align: -0.3em;
}
It requires support for border-radius, but that's it - nothing fancy otherwise. If you did need to use an image, you could apply it to the :before pseudo element, as suggested by Danield
I have the following image with dimensions of 200px w x 100px h. Basically, I need the link to look like this
* link
where * is the image. The hover state should kick in when both the image and link are hovered on. My html & css is as follows, but it doesn't seem to work:
Us this location
.current-location {
background-position: 0 0px;
background: url(images/current-location.png) left top no-repeat;
background-size: 48px 24px;
height: 24px;
width: 24px;
text-decoration: none;
}
.current-location:hover {
background-position: -24px 0px;
background-size: 48px 24px;
height: 24px;
width: 24px;
}
I think a better solution would be not to use images at all:
add a span in the <a>:
<span>*</span> Us this location
Style it to show on hover:
.current-location {
background-size: 48px 24px;
height: 24px;
width: 24px;
text-decoration: none;
position: relative;
padding-left: 20px;
}
.current-location span {
display: none;
color: red;
position: absolute;
left: 0;
}
.current-location:hover span {
display: inline-block;
background-position: -24px 0px;
background-size: 48px 24px;
height: 24px;
width: 24px;
}
SEE FIDDLE
Maybe you should try to set display: block to the .current-location class. Also I don't think that Us this location will be nicely put in 24px by width.