I am trying to create links for following on Facebook, twitter etc. using a sprite image. There is a plain text following links made up of these sprite images set as background. I am having problem aligning the text, the span and the 'a' links vertically.
Here is the css
.sprite a {
border:solid 1px blue;
width:20px;
height:20px;
display:inline-block;
color:#00f;
background:url('images/sprite.png') 0 0;
}
span {
border: solid 1px red;
}
Here is the HTML
<div class="sprite">
Follow us on: <span id="spriteFacebook"></span>
</div>
I am using borders just to identify the misalignment
This is how the result looks like
Shouldn't these be aligned by default? Should I use floating divs to achieve this?
Try that:
- wrap a span around your text: <span class="text">Follow us on:</span>
- float it left and give it a line height: span.text { float: left; line-height: 33px; }
http://jsfiddle.net/6s4HM/20/
Related
As i was reading all over the internet span element is inline element and does not accept vertical padding and i was like let me try it and let see. So i opened the editor and try to add vertical padding and somehow it worked.
Here is my HTML and CSS code:
span {
background-color:blue;
padding-left:5rem;
padding-bottom:5rem;
padding-top:4rem;
}
<span>
asdfasdfsadfl
</span>
I will also add the ss of it:
Could you please explain me what am I missing here?
Main purpose of using inline element is to have parts arranged in a line and not as a separate section.Even if you include padding in span tag it won't push the text
to create padding but will expand itself in outward direction without disturbing the text flow.Below is the code to prove the same
span{
background-color:blue;
padding-top: 100px;
padding-bottom:100px;
margin-top: 50px;
border: 2px solid black;
}
<p id="p" style="padding: 20px; border: 2px solid black;">block-block<span id="n"> -INLINE- </span>block-block-block-block-block-block-block-block-block-block-block-block-block-block-block-block-block-block-block-block-block-block-block-block-block-block-block-block-block-block-block-block-block-block-block-block-block-block-block-blockblock-block-block-block-block-block-block-block-block-block-block-block-block-block</p>
I am trying to create one circle around multiple words. Right now I have a circle around each word. Below is the code I am using.
HTML
<span class="numberCircle"><span>Circle</span></span>
<span class="numberCircle"><span>all</span></span>
<span class="numberCircle"><span>words</span></span>
CSS
.numberCircle {
display:inline-block;
line-height:0px;
border-radius:50%;
border:2px solid;
font-size:32px;
}
.numberCircle span {
display:inline-block;
padding-top:50%;
padding-bottom:50%;
margin-left:8px;
margin-right:8px;
}
You have created two different tags with "span" try deleting the tag without the class and try again. Having two tags one with and one without a class is redundant. Also the CSS is redundant as it is referring to two tags affecting the same markup. Dix this by creating a single tag:
<span class="class"> words </span>
Add the CSS to this tag and try again.
To add all words into this class use:
<span class="class"> <div> word 1</div> <div> word 2</div> <div> word 3</div></span>
This will also all divs to have the same class used by the CSS style sheet
Well, you can easily achieve it by wrapping your text with an element and use your .numberCircle class in that element.
HTML
<div class="numberCircle">
<span>Circle</span>
<span>all</span>
<span>djsfkhjdajh</span>
</div>
CSS
.numberCircle {
display: inline-block;
line-height: 0px;
border-radius: 50%;
border: 2px solid;
padding: 20px; /* Add spacing in the edges */
font-size: 32px;
}
.numberCircle span {
display: inline-block;
padding: 50% 0;
/* I dont think the margins are necessary in this way */
}
You can see an example of it working in here
https://jsbin.com/hekehatabu/1/edit?html,css,output
Put all the word you want to circle inside a DIV, which has the class numberCircle.
<div class="numberCircle">
<div>CIrcle</div>
<div>all</div>
<div>words</div>
</div>
I have been trying to create a new footer for my website that looks like this:
footer_nice
Unfortunately, I have only been able to recreate that in gimp, and not in html & css.
So far, I have been only partially successful. I have been able to align all the text and image so they are all collinear and inline, like this:
footer_bad
However, they are not separated into a left and a right. Whenever I try to float left or text-align right, or other combinations using divs and spans, it ends up breaking the inline property and the images and text are no longer collinear.
I have been able to seperate the text into left and right using seperate divs and spans, but only when they are not collinear, which is a bit of a bummer.
Here is my HTMl & CSS:
/* footer */
.middle > * {
vertical-align: middle;
}
footer {
color: #666;
font-size: 1.4em;
background: #191919;
border-top: 1px solid #444;
padding: 20px;
white-space: nowrap;
}
footer a {
color: #888;
display:inline-block;
}
footer a:hover {color: #BBB;}
footer img {
padding: 0px 0px 0px 4px;
}
<footer>
© <script>document.write(new Date().getFullYear());</script> WEBSITE
BUILT WITH CSS & HTML. OPTIMIZED.<span class="middle"><img src="https://placebear.com/32/25"/></span>
</footer>
Is there something I am missing? Is it some simple css that I am just forgetting? Any input would be fantastic. I hope this does not come across as a stupid question. I looked around a bit on here and w3schools and could not come to a conclusion. Thanks everybody!
Add to your HTML:
<div class="float-right> class containing your text & img that goes on the right
To your CSS:
float:right to your footer img
and
.float-right {float:right;}
Note that it may have responsive issues when viewed on mobile, but it's a quick-fix for desktop sized.
Do not forget to clear your floating elements after.
I troubleshooted some more. this is another potential solution, but the right side overflows and doesn't stay bounded to the right side of the footer.
.middle > * {
vertical-align: middle;
}
body {
padding: 20px;
background: #eee;
}
div {
display: inline-block;
margin: 0;
width:100%;
text-align: right;
}
footer {
margin: 0;
padding: 10px;
background: white;
white-space: nowrap;
}
footer a{
display: inline-block;
}
<footer>
© <script>document.write(new Date().getFullYear());</script> WEBSITE
<div class="float-right">BUILT WITH CSS & HTML. OPTIMIZED <span class="middle"><img src="https://placebear.com/32/25"/></span>
</div>
<div class="clearer"></div>
</footer>
I was not able to resolve the overflow issue with this particular solution, but as I was working on it I thought of a fix for the collinear issue with the solution offered by BrainHappy. If I add a dummy image to the left side of the footer which is the same height as the image on the right side of the footer, this would resolve the collinear alignment problem of the text and the image. This dummy image would be the same color as the background of course. depending on placement, you could adjust the padding to compensate for the presence of this dummy photo. example:
derp_fix
This solution works, but it is far from elegant. I feel dummy images are bad practice, so I may forgo images in the footer altogether. If anyone else has any other suggestions I am all ears. Thanks!
I am trying to center text that has a line going through the entire background. On either side of the text, there is some padding, where you cannot see the line at all. I am stumped as far as a good css-only way to go about this. Here is a jsfiddle that is obviously wrong, but its a start: http://jsfiddle.net/gtspk/
HTML
<span class="line">
<h2>Latest Track</h2>
</span>
CSS
.line{display:block; width:100%; border-bottom:1px solid red; margin-top:25px; text-align:center}
.line h2{font-size:15px; text-align:center; position:relative; top:10px; padding:0 15px; display:inline-block; background:white}
The problem here is that I DO NOT want to specify a width, because I will be reusing this for different headers (with different amounts of text). What is the best way to go about this via css?
UPDATE: HEre is a way to do it, but inline-block has fairly lousy browser support: http://jsfiddle.net/gtspk/3/
Here you go. Had to add a wrapping span (necessary so we can set the background to white so the line doesn't hit the text)
http://jsfiddle.net/gtspk/9/
<span class="line">
<h2><span>Latest Track</span></h2>
</span>
.line{display:block; margin:25px}
.line h2{font-size:15px; text-align:center; border-bottom:1px solid red; position:relative; }
.line h2 span { background-color: white; position: relative; top: 10px; padding: 0 10px;}
Right, sorry, misunderstood what you meant by padding. Fixed.
I have a layout issue where the internal div "data" seems to be popping out of its containing div and showing outside. I've placed coloured borders around the bottom picture and the problem I'm having is the yellow text should be in the white box, but it's not. Anyone know what the issue is here I'm currently stumped. I've tried using clear:both but it didn't seem to work.
.whiteContainer
{
border: 1px dotted red;
margin:3%;
background: white;
border-radius: 15px;
}
#display
{
border: 1px dotted green;
margin:3%;
}
.header
{
border: 1px dotted blue;
float:left;
}
.data
{
border: 1px dotted yellow;
float:right;
}
HTML portion:
<div class="whiteContainer">
<div id="display">
<div class='header'>Program Name: </div>
<br />
<div class='data'>
Strategic Project Grants
</div>
</div>
</div>
EDIT:
removing the <br/> gives me the results of http://jsfiddle.net/SgEMc/ which still pop the content of the blue and yellow elements out of the green one, which is not what I want. I can't specify an exact height for the white element because the amount of program names displayed in the white space will vary. I will also need the break statement later on as I would need something along where Header is displayed followed by a <br/> and then centered text. All this needs to be inside the white container.
Set the parent container of the data (id=display) to "overflow:hidden" or "overflow:auto". It will force the parent to conform to the shape of the floats. There are actually quite a few techniques to achieve your goal. See CSS Tricks - All About Floats, there is a section about clearing floats.
The br is the reason for the missallignment, but you need to clear the float. put a clearfix style on the white container
http://www.webtoolkit.info/css-clearfix.html
or add a clearing element after your floating elements if you don't mind the extra markup.
<br style="clear:both" />
after your data div.
then if either wraps, the container will stretch to suit the content.
Get rid of the <br /> tag in your code.
You may also want to slightly alter your CSS. This is what I used in the following jsFiddle:
.whiteContainer {
border: 1px dotted red;
margin:3%;
background: white;
border-radius: 15px;
height:50px;
}
#display {
overflow:auto;
border: 1px dotted green;
margin:4px;
}
.header {
border: 1px dotted blue;
float:left;
}
.data {
border: 1px dotted yellow;
float:right;
}
jsFiddle example.
Remove the <br>
http://jsfiddle.net/SgEMc/
remove the "br" betwen your floated elements and add overflow: hidden; to #display.
see this:
http://jsfiddle.net/HOLYCOWBATMAN/updZW/