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.
Related
I have a heading which is likely to span over two lines, i'd like the heading to have a background color but for it to only span the width of the text on the line, like this:
http://f.cl.ly/items/0r3N2l3A1K3c3h2F3E3l/Screen%20Shot%202013-06-30%20at%2000.18.16.png
So far all the solutions I have found only appear to work against a background with a solid colour, anyone have any ideas how I can achieve this?
What your are requesting for is an old question that come up again and again once in a while , text or inline element cannot achieve it, element formated as a box will turn out to be square or rectangle.
The only way to do it , is to set side by side inline-block elements wrapping words or groups of words.
Script server or javascript can help you, so you should not have to mind text markup while typing.
The idea looks like this : http://jsfiddle.net/rnCTL/
h1 span {
background: #fff;
line-height:44px;
padding:4px 4px 4px 10px;
margin:0;
display:inline-block;
}
.headline-black {
height:219px;
width:367px;
background:url(http://f.cl.ly/items/0r3N2l3A1K3c3h2F3E3l/Screen%20Shot%202013-06-30%20at%2000.18.16.png);
padding:40px;
box-sizing:border-box;
}
Try this.
Basically if you have a containing background element you can any element on top of it with another background.
Check out the Fiddle
h1{
width:200px;
background:white;
display:inline-block;
margin-left:60px;
}
I've done this in situations where you put a <span> within the Header tag and applying the background color to that. Bear in mind, you won't have any padding where the line breaks: check out this fiddle - http://jsfiddle.net/R5ZsG/
If you can put a   that would work to pad where it breaks but you might not have full control over it.
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
I'm new to the html & css design. I have following design of css-
span.menu a:link, span.menu a:visited
{
display:block;
font-weight:bold;
color:#0000CC;
background-color:#E8EEFD;
text-align:center;
padding:4px;
text-decoration:none;
width:70px;
padding:5px;
border:5px solid gray;
margin:0px;
}
I want to place three link by using tag which should be shown in the following manner-
Calls Customers Venders
and i want to treat them as menu for this they should be placed in horizontal manner. But when i'm running my css design then they placed in the vertical manner like -
calls
customers
vendors
how to do this?
thanks.
Try using display:inline-block if you want to be able to set the width and have them inline.
This won't work with Internet Explorer 6, an alternative would be using float:left. However, this can have complications as the elements will be removed from the normal flow and if there is no other content in the parent element then its height would be reduced to 0. This could be overcome by adding overflow:auto to the parent
Instead of display: block use float: left.
add the css properties float:left
jsFiddle
I am trying to format a quote so that it appears a certain way within a post.
Here is the CSS:
.inner_quote {
background:RGBA(255,250,205,.4);
margin-left:50px;
width:200px;
position:absolute;
}
The problem is that because I am doing position:absolute; there is no space allocated for the quote between the before text and the after text.
How can I get the quote to appear the way it currently does, but not have this layout problem?
You have two options here:
Remove position: absolute and change the <span> tag to a <div> tag
Remove the position: absolute and add the property display: block within the .inner_quote css tag
Enjoy.
set is as block element and position it relative.
.inner_quote {
background:RGBA(255,250,205,.4);
margin-left:50px;
width:200px;
position:relative;
display: block;
}
but you should also use <blockquote> to be semantic.
I was having trouble with two types of buttons.
It was a form button and a css button basically. And I was advised that the css button whould use display:inline-block;
This made the whole a href tag actually look like a button.
But this invisible margin seems to be screwing up something. I tried separating them into separate css classes, but oddly, applying a real margin to the css button gives an additional margin as well. What's causing this?
You can easily see it here (low graphics):
www.matkalenderen.no
Basically, code looks like this:
<input type="submit" value="Logg inn" class="button_blue" alt="ready to login">
<a class="button_css_red" href="access.php">Glemt passord</a>
CSS
.button_red, .button_blue, .button_css_red, .button_css_blue {
background-image:url("../img/sprite_buttons.png");
background-repeat:no-repeat;
border: none;
color:#FFFFFF;
display:inline-block;
display:inline-block;
font-size:12px;
height:27px;
width:98px;
}
.button_css_red, .button_css_blue {
margin-top:20px;
}
Just found the answer myself :)
Looks like I was able to fix it by applying a line-height of about 31 pixels.