I have a div within a div. I want one to extend out of the shell div so it resembles a tab. I thought just using absolute positioning with a negative value would push it out of the parent div. That doesn't seem to work. Is there a CSS work-around?
Example
http://jsfiddle.net/W3CyT/
http://jsfiddle.net/iambriansreed/W3CyT/4/
CSS
#sideWall {
height:100px;
width:100px;
position:absolute;
top: 10;
left: 10;
background: black;
margin-top: 60px; /* give room for tab */
}
.showSideWall {
height: 60px;
width: 30px;
position: absolute;
top: -60px; /* move tab above container */
right: 0;
background: red;
}
You're doing it correctly, however, you need to rethink your values for bottom and right.
If you're looking to have the red box protrude from the black box on its right side, consider removing right:0 and applying left:100% instead. This approach guarantees that no matter how wide the black box and red box are, the red box will always be on the outside to the right; they are width-size agnostic. This can be ideal because you may want to change the size of either box dynamically or in the future (it doesn't lock you in to hard set values).
Here's a fiddle of what I'm talking about.
You could use a Z-Index and position one on top of another. There is a better way to do it with Twitter bootstrap code.
http://twitter.github.com/bootstrap/
they give you templates for all kinds of cool features
Related
I have followed the instructions at floating-div-over-an-image, and while things are working ok, I am trying to better control the behavior of the search box and the button. You can see the page I am working on here
There is a search box on the header image towards the upper right. The CSS for the search box div as follows
.search-box{
z-index: 500;
width: 50%;
border: 0px none;
top: 0px;
float: right;
left: 40%;
position: absolute !important;
}
You'll see that there is a search button to the right of the search box. When the browser window is made narrower, that search button jumps below, even when there is space to the right. I am trying to force that button to stay to the right.
Any tips on how you would achieve the behavior I described? I have tried variations of the float property in the CSS above, but that is not getting me what I need. Maybe I am not applying the correct CSS selector?
Regards
Just change your .search-box css for property width:100%
It is WORKING
.search-box {
width:100%;
}
let me know if it is helpful
In class (.search-box) the width was 40% so it was not getting enough room for the search box and button to display in line.
You Just need to replace the below css and it will work in all resolution.
.search-box{
border: 0 none;
position: absolute !important;
text-align: right;
width: 100%;
z-index: 500;
}
The #k2ModuleBox125 div has a 40% width which is causing the search button to wrap to the next line when the search bar increases in size.
You can easily fix this by looking into the style rules of the #k2ModuleBox125 div.
this is happening because .search-box has its width in % give it minimal width, and position it to the right instead of left, and you should be just fine.
.search-box {
min-width:XXpx;
right: 0;
left: auto;
}
I would like to align div inside parent div to center horizontally for div with unknown width and dynamic content (will wary from use case to use case.
I have read that margin: auto; usually is usually solution here, but it requires set of width which is unknown for me compile-time. text-align: center does't work for div inside parent div.
Fiddle example
Here is a Fiddle example.
My two questions
I would like the three circles to be aligned to the middle. Number of circles can vary from zero to many.
Another related questions is how I can make the progress bar have a minimum width (for instance when having only one, two or three steps) and strech to right and left when adding more steps? Here is (very bad) illustration in Paint.
As a note I would like this to work for IE 8 as well.
Do you want something like this? DEMO
.progressbar{
top: 0;
position: fixed;
background-color: #00bbee;
width: 100%;
height: 45px;
left: 0;
text-align:center // added this line for centering the content
}
.steps {
display: inline-block; // and this line for auto-aligning center your child elements
}
Your first question can be solved by applying
text-align: center to the top wrapper and changing the display of the steps wrapper to inline-block
Regarding the second question, I'm not sure that this is exactly what you meant - but it can be solved by moving the line out of the steps wrapper and positioning it at the vertical center of the whole bar using
position: absolute;
height: 2px;
margin-top: -1px;
top: 50%;
left: 0:
width: 100%;
background-color: black;
Example in this fiddle
note that I also changed your html because there was some unnecessary tags there
For IE8 support check out this question (the only problematic issue here is the use of inline-block
I cannot get the orange background behind DONATE at the bottom of my page right to stay put in larger browser windows. I have tried every css trick I can find. Please help!
Thanks,
Janet
http://dev30.ncld.org/
You missed this trick then:
#footer .footer-col-orange {
margin-left: 790px; // adjust accordingly
left: initial;
}
This will keep your donate box relative to the footer element, and not to the left page border and will work on all displays.
The other option is to set the position of #footer .padding element to relative.
There you go :
#footer .padding {
/* padding: 15px 20px 0px 100px; */
width: 1010px;
/* position: absolute; */
margin-left: auto;
margin-right: auto;
background-color: #0A6DA1;
padding-top: 15px;
position: relative; /* First part */
}
#footer .footer-col-orange {
position: absolute;
/* background-position: right; */
right: -2em; /* second part, feel free to put what you want */
}
When you set a position: absolute; to an element, it will pull it out of the HTML flow, and you can give it coordinates (top, left, right; bottom). This coordinates are relative to the first parent with a relative position. As you didn't set any parent element to be the relative, you positioned your element relative to the document.
Your orange box is current positioned absolutely, as you know. This means that is is relative to the browser window. The left edge of that window, because you have `left:900px'. What we want is for it to be relative to the footer, which is centered.
To do this, we need to set the parent container of the orange box to position:relative. This will cause the orange box's position to depend on it's parent instead of the window.
#footer .padding {
position:relative;
}
Then, it's just a matter of setting the yellow box to the right position. Given that it's on the right side, I'd delete the left value entirely and set right:-45px instead.
#footer .footer-col-orange {
left:auto;
right:-45px
}
With these, it'll line up perfectly with the edge of the white box above:
You are going to run into an issue with inline styling. You not only have your styles applied by CSS, they are duplicated inline. You're going to either need to set !important in the new CSS that I've provided (not best practice), or better, remove the inline styling. If you provide some more information about how your side is built (WordPress, HTML template, etc) I can help with removing the inline styling.
This bit of css will center a 1 pixel tall bar in its container. I change its width to indicate progress of something loading.
#centered_bar {
display: block;
margin-left: auto;
margin-right: auto;
top: 100px;
height: 1px;
position: relative;
background-color: #FFFFFF;
}
How would I make the left and right edge of this element 'fade' (so, when zoomed in, the edge would look like the bottom line-end in this picture)?
This would be something similar to a gradient fill and would be subject to some browser compatibility issues so your best best is using a JavaScript library like CSS3Pie, and animate the appropriate property with jQuery or something similar.
I would start here: http://css3pie.com/documentation/supported-css3-features/#gradients
Good luck!
Please see this UI sketch image, I have this div in sidebar (black box) on a certain site and as I scroll down or scroll up, I don't want it to hide...I want it to move itself down as I scroll down and move itself up as I scroll back up so that it never hides out. Can you recommend me some jQuery that can get this done? or something else. Please help, thanks.
Don't use jQuery for this please; it's pure CSS.
#MyDiv
{
position: fixed;
top: 10px;
left: 10px;
}
Adjust the exact position to your liking by adjusting top and left. Maybe you want it centered vertically like in the image (if the sketch is accurate in that aspect), in which case you have to deal with all the fun tricks necessary for vertical centering; hopefully in your case something like this would work:
#MyDiv
{
position: fixed;
top: 50%; /* This places the _top_ of the div in the middle of the page. */
left: 10px;
height: 500px;
margin-top: -250px; /* This moves the div upward by half of its height,
thus aligning the middle of the div with the middle
of the page. */
}