I want to to get the following result:
________________Title of page
So let's say the html markup is <h1>Title of page</h1> and h1 is set to width:100%and text-align:right, I want it only be underlined on the left side of the title.
Any clue how to accomplish that? I have tried to wrap the title in a <div>, give that a background of white and shift it a bit down, so it overlaps the bottom of the h1-box, however, I'm not sue whether this works 100% cross-browser.
alternative solution:
<div style="width:100%;float:left;border-bottom:1px solid">
<h1 style="float:right;background-color:white;padding:1px;position:relative;top:1px">Hola</h1>
</div>
http://jsfiddle.net/VMCax/1/
You can try this as long as the line is not crucial to display content as it has support on IE8+.
h1:before{content:"________________"}
jsfiddle here
Looks like what you are trying to do would be better achieved with a wrapper container and a float inside. Make the inner div (or floated h1) have a white background. Make the outer div have a repeated (repeat-y) background that is the same spacing as the line-height of the text div.
Make sure the wrapper div respects the floated div (either overflow:hidden or with a clear div at the end of the float.
This will give you the effect you are looking for and should work with multi-line titles as well.
I'd go with CSS generated content, with non-breaking spaces and underline : http://jsfiddle.net/JMVUa/1/
h1:before{
content:"\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0";
text-decoration: underline;
}
Related
I have this page: http://www.problemio.com/community/public_member_profile.php?member_id=1
It is supposed to have the gray background extend all the way below the footer. If you look at it in firebug, it shows that the layout div contains a number of other divs.
So I don't understand why the gray background doesn't extend all the way down. Any ideas?
Thanks!
Add <div style="clear:both;"></div> at the end (before the close tag) of div#layout.
clear:both has to be added because of the floating inner DIVs. See also: MDN: clear.
I believe with divs, the stack on top of each other. So your background div may have a grey color, when you open the next div it sits on top of it so to speak, which puts it in front of the colored div. Have you tried to apply the bg color class to another div inside the layout div to see if that is it?
You could add overflow:hidden to the container to clear it (if u have float children)
#layout{
overflow:hidden;
}
Edit: or put a clear:both element as last child as a clear fix.
Add overflow:hidden; to the containing div. This will ensure that the container will wrap around all of it's content.
A useful tip when debugging is to put a bright border border:solid 1px lime; around the containing element to see how it is wrapping around it's child content.
I have a div that is float: right and it is inside a parent div. There are p elements inside that same parent div also, and the text wraps around the float: right div properly.
However, if I set the p elements to have a border, or do a <hr />, the border does not stop where the text stops, but extends behind the float: right div.
Here is a beautiful mspaint depiction of the situation:
Note that the green part of the black horizontal line is behind the floating div.
How do I get the border or <hr /> or whatever to be only as wide as the text, and not go behind the div?
I know this problem was posted some time ago, but I had the same problem today and found another solution:
http://jsfiddle.net/MvX62/
I use border-bottom instead of the <hr /> tag and had to add an overflow: hidden;. Look at the fiddle, i think this is more useful then the accepted solution, because you can also add a margin to the horizontal line and there is the same gap, as the text has.
Also you don't need to define z values and don't need any hacks or workarounds.
I've had this problem before, and I wasn't sure if it was solvable.
In your case, however, you could wrap the green box with another element and swap margin with padding and set its background to #fff to cover the offending line.
Check out the fiddle...
http://jsfiddle.net/UnsungHero97/8BwGB/3/
What I did here was give the floated element a z-index CSS property, which will put it "above" the non floated element (which has a smaller valued z-index) and the <hr /> will not go above the floated element.
In regards to getting it as wide as the text, in my example it is as wide as the text, but I'm not sure if that holds across browsers (I'm on Chrome). Let me know if it doesn't.
I hope this helps.
Hristo
p.s. excellent mspaint skillz :)
You would have to set the width of the paragraphs to the width of the container minus the width of the floating element, or you could give them a margin on the same side of the float equal to the float's width.
Div cannot wrap around another div. Wrapping is text-only property. You can simulate wrapping by setting the margin-right for the master div to the width of the div you want it to wrap, but text wil not flow under the inset div.
Some values of the overflow property can cause this behavior. Specifically, overflow: visible which is often set by popular CSS resets/normalization.
If you look at my Jsfiddle Example, the float seems to disregard the title text that is to the left of the floated element. My goal is to make the floated element not overlap the title text and to stop once it reaches the end of the div which is the title text
My questions, is this possible?
I just do not want it to overlap the element which is to the left of the floated element.
Thanks in advance for the advice, suggestions, etc.
Jsfiddle.net
Remove Position: Relative from your #advertisement_1 div, and in the HTML put it above the title div.
Below is an updated JSFiddle with it working, you may need to adjust the "top" value in your CSS for the advert box if it needs to be different to what is in the fiddle.
http://jsfiddle.net/f5j2z/
<div style="background-color:red">
<div style="display:inline-block;background-color:green;height:20px;width:20px;"></div>
</div>
<div style="background-color:yellow">
<div style="display:inline-block;background-color:green;height:20px;width:20px;">hi</div>
</div>
When rendered in FF or Chrome the height of the red div is 26px, whereas the height of the yellow div is 20px. How can I make the red div render the same as the yellow div, but without it containing any text?
just a thought:
as long as there's no text in the div, it's treated like a inline-image (or something else), and so it's vertical-align is set to 'baseline'(or text-bottom or whatever) instead of 'bottom'.
the solution:
to correct that, set vertical-align: bottom; on your inner divs. there's absolutely no need to put a space or invisible element into it, like others mentioned (but that would be an (ugly) solution, too)
How about putting a zero-width space () in the "empty" node?
If you want to have a specific height, use
min-height: 1em;
Using a space of some sort is a different height in some circumstances.
It's lame, but you could add a to the empty div.
inline-block is a funny display type and without content because other properties like font-size and line-height can actually growing the element taller than 20px.
I need a css gunu out there to help me with this one.
Right I have an a tag which is a block element fixed width and height. Within it is a background image and the images title.
I'm trying to align the text to the bottom and I'm getting no where.
I've tried doing
display:table-cell;
vertical-align:bottom;
and all manner of different ways.
Bu getting nowhere. I know that I could do line-height but that has that weird dotted line around the element.
Just tried having a span with the text in that within the a tag and vertical align that but no joy although the underline has moved to the bottom. Which is odd!
Any help much appreciated.
Richard
The parent element needs display:table and then the element you want on the bottom has display:table-cell; align:bottom;
What browsers are you targetting? This works fine for me in IE8.0.6 and FireFox 3.5.8:
<a style="display:block;height:200px;width:200px;background:blue;display:table-cell;vertical-align:bottom;">This is a test</a>
Note I've used both display:table-cell; and vertical-align:bottom;. You need 'em both; wasn't sure if you'd tried that.
If that's giving you trouble (are you targeting IE6?) you're going to have to place your <a> element in a block level element and then position it.
<div style="position:relative;top:0px;left:0px;height:200px;width:200px;background:yellow;">
<a style="position:absolute;bottom:0px;">Your text</a>
</div>