I use <span> tags in my module titles,
e.g.
<span>Categories</span>.
I specify the span's background color/image, width and height in css.
But the span's width depends on its content/text.
So, if I do <span></span>, with just a background image/color in css, nothing appears.
Of course, I want something to appear.
How can I resolve this?
spans default to inline style, which you can't specify the width of.
display: inline-block;
would be a good way, except IE doesn't support it
you can, however, hack a multiple browser solution
You could explicitly set the display property to "block" so it behaves like a block level element, but in that case you should probably just use a div instead.
<span style="display:block; background-color:red; width:100px;"></span>
You can't specify the width of an element with display inline. You could put something in it like a non-breaking space ( ) and then set the padding to give it some more width but you can't control it directly.
You could use display inline-block but that isn't widely supported.
A real hack would be to put an image inside and then set the width of that. Something like a transparent 1 pixel GIF. Not the recommended approach however.
Like in other answers, start your span attributes with this:
display:inline-block;
Now you can use padding more than width:
padding-left:6%;
padding-right:6%;
When you use padding, your color expands to both side (right and left), not just right (like in widht).
You could try width: fit-content
source: https://developer.mozilla.org/en-US/docs/Web/CSS/fit-content
I would use the padding attribute. This will allow you add a set number of pixels to either side of the element without the element loosing its span qualities:
It won't become a block
It will float as you expect
This method will only add to the padding however, so if you change the length of the content (from Categories to Tags, for example) the size of the content will change and the overall size of the element will change as well. But if you really want to set a rigid size, you should do as mentioned above and use a div.
See the box model for more details about the box model, content, padding, margin, etc.
Use the attribute 'display' as in the example:
<span style="background: gray; width: 100px; display:block;">hello</span>
<span style="background: gray; width: 200px; display:block;">world</span>
Having fixed the height and width you sholud tell the how to bahave if the text inside it overflows its area. So add in the css
overflow: auto;
Related
I want to use this css for tooltip: enter link description here but i want that the hint have a max width of 400px. if i set max-width:400px and remove white-space:nowrap then the width will be always very short (their is a line break on every word). how to specify that the hint can expend horizontally still 400px and then only add line break ?
There are two possible solutions for this. The first is to add the following to ".hint:after, [data-hint]:after"
width: 100%;
max-width: 400px;
As you already surmised, you must remove the "whitespace: nowrap" as well
If for some reason you can't do that, you can also set the "display" property to "table".
The problem I'm having is I have two divs at the top of my page, one contains a repeating blue background, the other contains a background image.
I have to set the height of both divs in order for them to expand vertically, the don't expand with the content. I have that form on the right hand side set to overflow. Which I believe is what's causing the problem.
I have tried not having the height css in the code, but it still won't expand vertically.
In order to get the backgrounds to even show up I have to manually set the height.
This is the page: http://www.repipespecialists.com/landing/google/repiping.html
This is the CSS code:
#top_container {
width:100%;
height:1040px;
background-image:url(../images/top_bg_repeat.jpg);
background-repeat:repeat-x;
background-color:#83b4e9;
}
#top_header {
width:1200px;
height:1040px;
background-image:url(../images/header_bg.jpg);
background-repeat:no-repeat;
background-color:#83b4e9;
margin: 0 auto;
}
I agree with WDan in that the issue you are having is due to your use of float: left and float: right on the left_content and right_content div elements.
When you use float on an element, you are basically removing it from the normal flow of the document. By default, elements will appear on the page in whatever order you specify in the markup. Using float (or things like position: absolute) will remove the element from this "order", or "document flow", such that the floated element will be ignored when placing other elements in their default position on the page.
Since the space used by these floated elements are ignored, the top_header div does not take the floated element's size into account when determining its own size. This is why your div is not automatically expanding.
Another alternative to float is to use display: inline-block. Here are some links you can read to learn more about the differences:
http://www.ternstyle.us/blog/float-vs-inline-block
http://www.onderhond.com/blog/work/inline-block-vs-float/
http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/
http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/
I think the problem is you use float in 'left_content' and 'right_content'
Use “overflow: hidden” in the wrapper div.
Or i have been building web pages for too long without a break or something really weird happened.
<div style="background-color:#0F0; margin:5px; height:5px;"></div>
Will result in a long bar of 5 height across the width of the parent div. This should normally not be visible since i gave the div no width.
I tried everything, messed up my whole CSS layout and nothing seemed to get rid of it. I even check some divs of me in that same project that still work like this.
So i opened a new project and just filled in that line above to make sure there wasn't some style setting messing things up. But still there is a green bar showing.
I just want my div to be the size of the text in it.
Again, i could be seeing things but this happened all of a sudden and i'm really clueless...
use display:inline because a div element automatic get the display:block
Your div must have display:block either in your code or inherited from your browser.
change it to display:inline for your desired outcome.
Example here.
http://jsfiddle.net/Hn2xP/1
Break the document flow
By default, div element has it's style display property set to block, what makes it's width to fill the dimensions of parent.
You have two options to make it clip to text, position: absolute or float: left (right works also, depends), as in:
<div style="background-color:#0F0; margin:5px; height:5px; position: absolute;"></div>
or:
<div style="background-color:#0F0; margin:5px; height:5px; float: left;"></div>
For more information, see CSS Floats and/or CSS Positions.
P.S. Bear in mind, that absolute position and/or floated element will remove it from document flow.
span instead of div (display: inline)
If you want to keep the document flow, use span instead of div - it's display property is inline by default, as Blowsie suggested.
<span style="background-color:#0F0; margin:5px; height:5px;"></span>
display: inline-block
There is also an option with display property set to inline-block, but it's compatibility is limited. See CSS Display property information for more details.
<div style="background-color:#0F0; margin:5px; height:5px; display: inline-block;"></div>
Usually a padding issue. Difficult to diagnose without seeing code or example of site error.
try:
div {padding: 0px;}
in your css
By default, the width of a div is auto, meaning that it will fill the entire available content. To have "no width" as you seem to want, set the width to zero explicitly. Or, use one of the other answers...
I have a 125x250 image and I need to just display a 125x125 region of it.
Can I do this via CSS? How?
Thank you
There is the CSS clip property but it's a bit clunky to set up and, as #edd points out in his answer, works for absolutely and fixedly positioned images only.
I personally would create a 125x125 div and, depending on the situation, either
Have the image be the div's background-image (you can even position it using background-position
Put the image in it, and give the div overflow: hidden (advantage: It will still be an image element with an ALT text)
If you need the whole thing to behave like an image in the document flow, you can give the div the display: inline-block property (Not supported by older IEs).
This technique is also called "sprites". An ALA article from 2004 demonstrated the basics, another good and short introduction can be found at w3schools (www.w3schools.com/css/css_image_sprites.asp).
So it is basically a parent element being positioned relative. A child element has a defined size and a background like background:url("sprite.png") 0 0;. To use another portion of the sprite e.g. at another child element, you can define background:url("sprite.png") -125 0;.
You can use the CSS Clip property but it's a bit fiddly to set up because the image and parent need to be either absolute of fixed positioned. But it does work quite well once setup.
example:
img
{
position:absolute;
clip:rect(0px,125px,125px,0px);
}
Put your image inside div
<div style="width: 125px; height: 125px; overflow: hidden;">
<img src="..." />
</div>
Trying to style a CSS popup. I know there's libraries, I'm doing it by hand anyway.
<div class="labelDiv">
<span class="label helpText">Description</span>
<div id="activeHelpTip" class="helpTip messageBox">
Help text not defined for this field.
</div>
</div>
.labelDiv { float: left; position: relative; }
.helpTip
{
display: block;
position: absolute;
padding:2px;
max-width:350px;
z-index:1;
left: 5px;
top:22px;
}
.labelDiv is position rel so the absolute .helpTip is absolute relative to its owning labelDiv. AFAICT .helpTip must be absolute so it is ignored in normal page flow.
How do I get my tooltip to float over the input box to the right? I want it to float over everything except the edge of the browser.
http://img213.imageshack.us/img213/278/popupcss.png
First of all you'll need to give .labelDiv an overflow:visible. Can you give a more detailed HTML example or a link to this page?
-edit-
also the tooltip will need a width or at least min-width to make sure it doesn't adjust to the size of the containing div
Shouldn't you just adjust the top and left properties accordingly? What happens if you do?
EDIT
If your labels are set with, say 100px for simplicities sake, then adjusting the left to 100px will make the tooltip float over your input field. In this case there are two things to consider - you need to make sure your label div has overflow:visible and that it has a higher z-index than your input field.
If your label div is NOT set width you can adjust the right bound eg. right:0px which will put it on the right edge of the label. You can use negative numbers as well to make it break out of the label div in which case you will have to take the above two points into consideration as well.
We do need a little more info but try adding a z-index to the ".labelDiv" that is greater than the z-index of the input box. You may need to add a positioning to theinput box to make it accept z-index. I if it's a floated element I usually add "position:relative;float:left" to the element that I need lower but don't need to position it.
So my answer is z-index.
It should work.
EDIT
As faux paus as it might be. Would a negative right margin do the trick?
Couple of things, you should probably be using the <label> tag to declare the label for the input field. Using the title attribute on the input with the text of your tooltip will create the hover text you want over the input field and the browser will do all the work for you.
You guys were right, more HTML context was necessary. I ended up promoting the tooltip div all the way up to the body element, then manually positioning it relative to the appropriate label. I couldn't get the browser to do it for me without similar minor issues.