For some reason this text isn't being centered.
#highlightheader
{
background-color:#006600;
color:white;
font-size:30px;
text-align:center;
font-weight:bold;
}
<span id="highlightheader">example text</span>
http://tinkerbin.com/eoJprUq5 (jfiddle going too slow, used this one instead)
EDIT: i ONLY want the text to be highlighted, not have a whole green bar across.
span is an inline tag
add display:block to css
http://tinkerbin.com/oBgV5mcU
a span is an inline element, whereas a block element like <div> would work... alternatively add display: block; to your css.
You should use a div around the span, especially since you want a heading here. As mentioned in the other answers, span should be used for inline elements. You're using it right for highlighting but positioning should be done through div.
Try that:
div.center{
text-align:center;
}
#highlightheader
{
background-color:#006600;
color:white;
font-size:30px;
font-weight:bold;
}
<div class=center>
<span id="highlightheader">example text</span>
</div>
Add a display: block; to the #highlightheader. <span> is an inline element!
Hi there try to use this with your css
padding:0px 50px 0px 50px;
Because you use SPAN and span is an inline element. Use display:block in CSS or better p-tag <p> or div with width:100% to center your text.
Edit:
#highlightheader {
text-align:center;
}
#highlightheader span {
background-color:#006600;
color:white;
font-size:30px;
text-align:center;
font-weight:bold;
}
<p id="highlightheader"><span>example text</span></p>
Span is an inline element. This means its width will auto fit to the size of its contents. Instead, change the span to a p tag - a block element. Block elements have a default with of 100% of the parent.
You can see a demo here
Related
I need a CSS only solution to make pairs of <a> tags inline, but not all in a row. For example, in this JSFiddle http://jsfiddle.net/vLakfsLv/, I want two rows of two black squares.
<div>
<a></a>
<a></a>
<a></a>
<a></a>
</div>
a{
width:100px;
height:100px;
display:inline-block;
margin-right:20px;
background-color:black;
}
Obviously you can do this by wrapping the <a> tags with <div>s but I need a CSS hack. I cannot edit the HTML.
EDIT:
Please don't accomplish this with width because the width is constantly changing.
Why not display:block and float:left to the <a> and a clear:left to the correct nth-child ?
( you didn't say you needed IE* support )
Float everything to the left, make your third <a> tag (using a:nth-child(3)) clear the floats to the left. here's a fiddle
Try this:
a{
float: left;
}
a:nth-child(odd){
clear: both;
}
div {
overflow: hidden; /* Clear float */
}
Demo
you could give them margins, specifically left or rights, and/or give the surrounding div (of the four blocks) a set width. they will adjust to that.
Try this solution:
div {
width: 240px; /* 100 + 20 + 100 + 20 */
font-size: 0; /* To avoid additional space */
}
Demo
You don't need font-size: 0 if you get rid of spaces in between elements:
<div><!--
--><a></a><!--
--><a></a><!--
--><a></a><!--
--><a></a><!--
--></div>
you can use float like this:
a{
width:100px;
height:100px;
float: left;
margin-right:20px;
margin-bottom: 20px;
background-color:black;
}
a:nth-child(3n){
clear:both;
}
http://jsfiddle.net/vLakfsLv/8/
ive got a list set up with a background image set to the left of each of the lines of text
although they dont seem to line up, i put a span around the text to try and reposition the text but it didnt seem to work
heres the code im using..
HTML
<ul class="price-features">
<li><span>One page website with contact form</span></li>
<li><span>Social Media Integration</span></li>
<li><span>One year hosting + Domain registration</span></li>
</ul>
CSS
.price-features{
margin-top:30px;
}
.price-features li{
background-image:url(/images/prices/orange-arrow.png);
background-repeat:no-repeat;
background-position:left;
padding-left:15px;
height:30px;
border-bottom:#999 1px solid;
background-color:#996;
}
.price-features li span{
padding-top:5px;
}
http://i.stack.imgur.com/rV1LM.png
Padding only affects block-level elements. You'll need to either change your span to be a block-level element or override the default display to be block or inline-block.
.price-features li span{
display: block;
padding-top:5px;
}
I am trying to back three background images in css appear inline
<div id="hd_but2"></div>
<div id="hd_div1"></div>
<div id="hd_but1"></div>
and
#hd_but2 {
background-image:url('1.png');
background-repeat:no-repeat;
height:28px;
width:49px;
margin-top:9px;
}
#hd_div1 {
background-image:url('2.png');
background-repeat:no-repeat;
height:46px;
width:4px;
}
#hd_but1 {
background-image:url('3.png');
background-repeat:no-repeat;
height:28px;
width:29px;
margin-top:9px;
}
But everytime i change the divs to inline it requires content, like text, to show the background images...how can i do this without putting text into the containers...whats a better way to do this?
Use display:inline-block instead of display:inline
Here is jsfiddle http://jsfiddle.net/rmL9s/
Hi you can used two method
table-cell or inline-block
Demo if you used table-cell http://jsfiddle.net/rohitazad/XTVbu/7/
or
or if you used inline-block demo http://jsfiddle.net/rohitazad/XTVbu/8/
Have you tried using display: inline-block?
I am trying to get a background color to stick strictly to the text of the heading and not span the entire width of the page. I understand that block level elements take up the entire width of the page, so I was wondering if there was a way around this besides forcing inline styles.
EDIT: If I were to use display: inline-block; why is it that even though I specify text-align: center; my headers are still left aligned? Should I use a float instead?
Or displaying as an inline-block could meet most use cases:
h1 {
background-color: red;
display: inline-block;
}
Perhaps something like this:
In HTML:
<div id="Heading">
<span id="HeadingText">HEADING TEXT</span>
</div>
In CSS:
#Heading
{
/* Formatting of full heading */
}
#HeadingText
{
/* Formatting for just heading text */
background-color: #00ff00;
}
Guessing from your question, this isn't the answer you are looking for, but it may be useful.
EDIT:
Alternatively, this should work as well. But I'm pretty sure this is what you want to avoid (inline, right?)...
<h1 style="background-color:#660000; display:inline;">Heading<h1>
This would solve this problem I think:
<div id="Heading">
<div id="HeadingText">HEADING TEXT</div>
</div>
And your css would be:
#Heading{
background-color:#CCC;
}
#HeadingText{
display:inline-block;
background-color:#FF0000;
}
You must specify the text-align:center; attribute to the parent element containing your div block to center your header and its background with display:inline-block;
I have this code :
<a class="botton_menu" href="#">first</a>
<a class="botton_menu" href="#">second</a>
<a class="botton_menu" href="#">third</a>
a.botton_menu
{
padding:0 14px 0 7px;
font-family:Arial;
font-weight:bold;
font-size:50px;
line-height:45px;
background-color:#FF0000;
color:#781a77;
margin-bottom:3px;
height:46px;
letter-spacing: -3px;
text-decoration:none;
display:block;
}
and I'd like to have that red background color as long as the text, not until the screen size (display:block).
How can I do this?
The display:block; is what it causing it to stretch out like that.
Solutions:
Change from display:block; to display:inline-block; (or even use the default, display:inline; what's the reason for you setting it to block in the first place?)
Use float:left;.
Manually set the width property.
Obviously the third option only works if you know what width you want. The other two solutions will cause the elements to be positioned next to each other, rather than stacked. In both cases, you'll need to tell the next element to drop onto the next line.
With display:inline-block; or display:inline;, this can be acheived with a line feed; either a hard-coded <br> tag, or in CSS, using the :after selector, and adding a line feed there. With float:left;, you'd need to add use clear:both;.
You have to create an element in the a element: jsfiddle
<a><span>foo</span></a>
If you insist on having your a elements display:block you need to have them float:left and then clear them. Then the background/element will be as long as the content.
use display:inline-block; and put <br/> between tags, this will solve your problem.