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?
Related
I'm using third party libraries like Kendo which output various types of HTML elements when they render.
So you might end up with a scenario such as this:
<ul>
<li>
<label>label text</label>
<div>muli select widget</div>
<span>date selector</span>
</li>
</ul>
NB! Assume I don't have control over the HTML rendered from these widgets/third party tools.
The problem is vertical alignment for the scenario above. I've created a JSFiddle which shows how the label doesn't vertically align properly. See here:
http://jsfiddle.net/tMJFF/
How would I get all three these elements to vertically align perfectly?
Use inline-block property on all elements
label,
.div-input,
.span-input{
display: inline-block;
vertical-align: middle;
}
http://jsfiddle.net/6vQ4Q/
You mentioned Kendo, so I'd recommend using whatever selectors they have decorating the ul and do something like :
ul.kendo-selector-class-of-choice li * {
vertical-align: middle;
display : inline; /* for lte IE7 only */
}
Since you aren't in control of the elements being created, this could change with different implementations/version updates of the decorating client side library (in this case Kendo). The * covers that and although arguably a hungry selector its scope is limited by the .kendo-selector-class
The below works in Chrome and IE10, but jsfiddle a bit tricky to browser test for IE8 since it doesn't render properly itself... but if you do test further you'd find you'll have to use something like display:inline if you're going down to the lovely land of IE7-.
http://jsfiddle.net/tMJFF/11/
Simply add vertical-align:middle;
Here is referenced Fiddle
label {
vertical-align:middle;
line-height:20px;
border:1px solid blue;
}
.div-input {
vertical-align:middle;
border:1px solid black;
margin-right:20px;
display:inline-block;
height:20px;
width:100px;
box-model:collapse-box
}
.span-input {
vertical-align:middle;
border:1px solid black;
display:inline-block;
height:20px;
width:100px;
}
label {
line-height:20px;
border:1px solid blue;
vertical-align:top;
}
vertical align all elements in li to middle.
ul li *{
vertical-align:middle;
}
vertical-align css property aligning your tags vertically so simply use :
label,div,span{
vertical-align :middle
}
DEMO
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 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.
i'm trying to achieve the following (for building a form):
Name: [ ] *
my markup is:
<label>Name:</label>
<input type=text name=name>
<span class=validate></span>
my css is:
label
{
display:block;
width:50px;
float:left;
}
input
{
float:left;
}
span.validate
{
display:block;
background-image:url(img/required.png);
width:16px;
height:16px;
}
the problem: the validate-span is positioned to the very left border instead of right to the textbox. what is wrong?
thanks
You are using display: block on your span, so it will automatically go to a new line. You can change it to inline-block or float it as well.
You need to also add float: left to your span.validate.
See: http://jsfiddle.net/8jDjq/
But, that won't look right if you add another set of the elements underneath: http://jsfiddle.net/8jDjq/2/
To fix that, you need to add clear: both to label: http://jsfiddle.net/8jDjq/3/
You need to float:left the validate span (or reconsider those display:blocks, but I guess they're there for a good reason).
Give the span a float:left too.
span.validate
{
display:block;
background-image:url(img/required.png);
width:16px;
height:16px;
float:left;
}
U need float:left; for your span