Kind of a confusing request to phrase. But basically I'd like to have a border around content that has some text centered on the top middle of the border, without having the border strike through the text. Please see the attached image. Also, I will edit to provide my code if you deem it necessary.
Thanks!
Here you go:
https://jsfiddle.net/4nhk3ooy/1/
You put your header inside the box and then put it position:absolute with correct offset. Then you set the background of header to correct color. Also put some padding to it, so there is some space between border and text. Then you just have to correctly count the offset. Also take in mind, that for some responsive features, you might want to write some JS algorithm to count everything depending on size of screen (because you will have to handle text size, after that alter header width, after that alter header padding and after that take all this and calculate correct offset)
And also take note, that the bordered box has to be also positioned, relative, absolute or fixed, or your absolutely positioned header will not be positioned against the div, but against the screen.
Related
I have to add a small banner at the top of a page and am having trouble with pushing the existing content down 40px so I can fit in the banner above.
The current layout has a lot of strangley positioned elements and they all keep moving out of place if I wrap the whole body area in a relative block div with a top margin.
Is there a technique that should work for this other than wrapping in a div like this?
If you do this, then you have to be careful that your CSS positioning on the divs that you want to move is not absolute. Because if it is, then they will just stay where they are. It should however, work if you add a div that encompasses everything and put a few pixels of padding on the top with CSS.
Why not just put a at the top of the page and set that div to clear:both afterwards. This should shift the rest of the page down 40px, or whatever you set the height of that div to. Of course, I'm just guessing here without looking at code and/or a sample site. Since I assume by strangely positioned you mean weird usage of position:absolute, this should allow your current setup to remain consistent.
I have some text, a slideshow and some tabs. I would like my text to wrap around the slideshow on the right, but right now the text is behind the slideshow and I really don't know why.
Could anyone take a look and point me in the right direction?
http://www.emb-ideas.com/index.php/component/smart/?id=155&view=product
Thanks.
You have a two column layout and should treat it as such. Both columns should be floated left. You can either put an element with clear:both under it or add overflow:hidden to the parent to avoid it collapsing.
Positioning things like this will only lead to problems.
If you don't want to do this you'll have to set a container width as suggested above. if the parent size changes when logging in then set the width as a percentage.
So, I have a layout where I have a repeating transparent shadow element set to the background of my parent container element. Set atop this, and supposedly hovering over the topmost edge of this background, is supposed to be an image with a frame and drop shadow.
However, because the image frame continues the parent element, the background image also continues upward. This is visible as the vertical lines above the top edge of the frame's drop shadow. See screenshot below:
This happens regardless if I use a transparent image or CSS3's box-shadow property. Setting negative margins doesn't work to bring it out of the parent element, nor does setting positioning as relative or absolute.
Normally I'd try to "fake" the transparency effect by setting a solid image at the top edge of the image frame, but there's a repeating stucco pattern set as the body background, which means there'd be a visible, unnatural-looking edge. (Insert cursing re: repeating patterns here.)
Any suggestions how I could prevent a parent element's background from showing through a child element, or offsetting the image frame somehow?
Many thanks!
I figured it out.
I was modifying the WordPress TwentyEleven theme, which has #primary and #secondary divs as floats atop the main content div. In order to make the background extend all the way to the bottom of the content div (I.e., past the two floats), I had overflow: set to auto.
Since I don't need to float anything (It's one column with no sidebar now), I removed both floats and removed the overflow declaration I had. Tah-dah, totally works now.
If someone else finds him/herself in this issue, have a look at my jsFiddle, which I used to figure it out. Thanks to Paker for the suggestion.
To get an idea of what the hell I'm on about, please go Here and Here
As you will see there is a side bar and a content area, sidebar is floating left, content floating right, and footer clears both.
Height on the sidebar and content are not set so the divs grow!
However, you can see that if one floating div is bigger than the other, the the background image appears.
I need to know how to make the background colour of both divs always be the same, and grow together in peace and harmony
Thanks
display: table-cell on both divs (and removing the floats) can work easily here, though lower IEs won't like it.
Or, you could always use the infamous Faux Columns
What you are asking is for the two divs to be the same height even though their content height is different. This cannot be done without relying on tables or javascript.
What you can do to achieve the same effect, is have a container div (I can see you already have it) and give this a vertically repeating background image of the sidebar and content color. This is known as Faux Columns.
Make sure to clear within the container (move <div class="clear"></div> up one level) so the container gets the height of whichever div is bigger.
Take a look at http://www.barelyfitz.com/screencast/html-training/css/positioning/ item 6. It says:
It is not a viable solution for most designs, because we usually do not know how much text will be in the elements, or the exact font sizes that will be used.
What workaround do I need to use in order to insert dynamic text into a div with absolute position?
Any approach is welcome
regards,
If your primary goal is to keep the div in it's place, without changing it's height or width based on the amount of text, I'd go with:
div {
overflow: scroll;
}
The other option is to have the text size shrink to fit into the div, but that involves a certain amount of fuzzy math and you run the risk of the text being so tiny it's pointless.
If you want the div to change it's height based on the text, this also involves some fuzzy math, but basically, you would get the length of the text with:
var sometext = "Hey, I'm some text!";
var textlength = sometext.length();
And make the height change in relation to that length. You'd want to play with the numbers, but it would look something like:
var div_height = 10 * textlength;
$("div").css("height,"+ div_height +"em");
See Visual Effect section from W3C site here
Maybe using "overflow: auto" for the dynamic-text-container div.So the height isn't a problem.
The problem isn't putting the dynamic text in the absolutely positioned div - the div will expand to fit whatever text is in there. There are no heights defined on the red and green divs in your example.
Absolutely positioned divs are taken out of the flow of the document so anything that appears after them in the html will act like they aren't even there.
Designs that use absolutely positioned divs need to have a height defined on the containing div so the absolutely positioned divs don't overlap other content. In your example <div id="div-1"> has a height of 250px defined. Change that to 100px and you will see <div id="div-after"> move under the red and green divs.
So if you have a absolutely positioned div in a sidebar with nothing after it you can add all the dynamic text you want. If you have one in your header, it is going to make your design very complicated to implement.