I have something pretty simple I want to do. I'm still working through all the gotchas of CSS, so bear with me. I want to essentially take a div, put it position: absolute; left: 10px; right: 10px; bottom: 10px, then take its children and center them horizontally within the browser. This is my attempt at doing so:
HTML:
<div class="notificashun-holder">
<div class="alert-message info notificashun">
<p>Hello, World!</p>
</div>
</div>
CSS:
.notificashun-holder {
display: block;
bottom: 10px;
left: 10px;
right: 10px;
position: absolute;
}
.notificashun {
display: inline-block;
margin: 0 auto;
}
The thing is, I'm using Bootstrap and the alert-message class makes items display: block, so I need to "shrink" them down to normal size (to fit only the size of their contents).
Can anyone help me do this? I simply need to make notificashun-holder be ten pixels from the left, right, and bottom of the browser, and notificashun be only as big as it needs to be and be centered within notificashun-holder.
Since you're using an inline-block element for the .notificashun, it can be affected by the text-align property, so to make it centered, just apply the text-align: center; property to your .notificashun-holder:
.notificashun-holder {
display: block;
bottom: 10px;
left: 10px;
right: 10px;
position: absolute;
/*New property:*/
text-align: center;
}
Related
For a new Wordpress template, I designed (in Photoshop) a round-ish header that overlaps the image beneath.
The Design:
My try:
Code:
Right now, I'm using a border radius, since I want to do it in CSS rather than cutting out an image (also for responsive reasons).
border-radius: 100% / 100%;
No matter how I change the values, the border won't become nicely rounded.
The website so far: http://voorbeeld.website/19/
Maybe I was a little too creative in Photoshop, but nothing is impossible! Right?
Use a pseudo element, in this case I used the :before
Make sure the .wrapper's elements also have a position, relative or absolute, or you need to set z-index: -1 to the :before
.wrapper {
position: relative;
height: 200px;
overflow: hidden;
}
.wrapper:before {
content: '';
position: absolute;
top: -200px;
left: -10%;
width: 120%;
height: 400px;
background: lightgray;
border-radius: 50%;
}
.content {
position: relative;
padding: 20px;
text-align: center;
}
<div class="wrapper">
<div class="content">
Put your content here
</div>
</div>
I'm trying to achieve a sliding-door effect on a span contained within an h2 element. The h2 element has position set to relative in order to enable z-index, so far so good.
The span is floated to the right within this h2 element and has a z-index set to lower than the h2's in order to slide under it when the view contracts, but keep sticking out under as if only the 'float' matters here.
But here's what I get instead, followed by what I wish to get:
Current result of z-indexed span within z-indexed h2:
Desired result
CSS for containing H2 element:
width: 400px;
height: 24px;
font-size: 13px;
vertical-align: bottom;
position: relative;
z-index: 5;
padding: 2px;
color: white;
text-align: left;
background: url('left-door.gif') top left no-repeat;
CSS for nested span element:
width: 200px;
height: 100%;
float: right;
z-index: 0;
text-align: center;
background: url('right-door.gif') top right no-repeat;
Anyone knows why the span refuses to sit level with the h2 even though the h2's fixed height ought to cap it within (setting clear: both on the h2 did nothing), and to be obscured by it when the view shrinks? It is because it's nested?
(Also, 'vertical-align' has no effect, the text doesn't settle on text-bottom but sits in vertical middle. Btw, just got started with this tinkering, but happen to be in a hurry. thanks.)
Edit: After BHouwens answer, i tried by reducing the text content of the H2 (real code has text), and the span aligns level, only problem is the z-index doesn't seem to work, but from what I remember from a previous question, z-index doesn't work on nested elements, as in they can't be stacked above or below their parent. Thanks for helping to troubleshoot! This has helped me focus better, and now think I'll just add two spans within the h2!
May be, below code will work for you!
h2 {
width: 400px;
height: 24px;
font-size: 13px;
vertical-align: bottom;
position: relative;
display: table-cell;
z-index: 5;
padding: 2px;
color: white;
background: #ff0;
}
span {
width: 200px;
height: 100%;
right: 0px;
top: 0px;
z-index: 0;
text-align: center;
background: #f00;
position: absolute;
}
span .wrap {
display: table-cell;
height: 24px;
width: inherit;
vertical-align: bottom;
text-align: center;
}
<h2>
H2
<span>
<div class="wrap">Span</div>
</span>
</h2>
Made a fiddle with your code only, which achieves your desired result: https://jsfiddle.net/dzpfkoLy/
My guess is you've got some other CSS acting on these elements (you can inspect with dev tools in Chrome or Firefox to see what this could be). Otherwise, if you want to ensure the result you need, you can set your span to
span {
// other span styling
position: absolute;
right: 0;
top: 0;
}
Which will shunt it to the top right of the h2. You can then play with z-index to get whatever kind of ordering you're after.
I am fairly new to CSS and although I have found examples for centring a IMG within a DIV, because I have a float: right; on an outer DIV it doesn't work as I want. This basically makes the DIVs appear in the correct place, but the IMGs are not central.
Here is a CSSDesk link for an example of my scenario: http://www.cssdesk.com/2pgBf
I'm trying to get the green share icon to appear centered both vertically and horizontally within the outer red boxes (DIVs).
I'm sure there are lots of enhancements that can be made to my CSS, but please only answer with solutions to my problem (though feel free to comment on this post with tips for CSS).
Hope that makes sense....
You can do position: relative; on the parent and then:
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
On the child, this will center it.
DEMO HERE
This will work just as well and no positioning needed.
JSFiddle Demo
.social-media-icon {
background: Red;
margin: 2px;
float: right;
display: inline;
position: relative;
}
.social-media-icon a {
display: block;
}
.social-media-icon a img {
width: 16px;
height: 16px;
display: block;
margin:5px;
}
When i need to do that kind of code i set the parent tag, in this case the DIV to position: relative and the image to position: absolute, top:50%, left: 50% and margin: half the dimension just do this in your code:
.social-media-icon{
position:relative;
}
.social-media-icon a img{
position:absolute;
top:50%;
left:50%;
margin: -8px 0 0 -8px;
}
I have to display two divs (in and out) so that they are positioned one on the left, the other on the right.
Using this css code they fit perfectly great on full screen, but I would like to be able to put them into a parent div, that will be the container
#in{
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 50%;
overflow: auto;
font-size: 12px;
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
#out{
position: fixed;
top: 0;
right: 0;
left: 50%;
bottom: 0;
overflow: auto;
padding: 10px;
padding-left: 20px;
color: #444;
font-family:Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif;
font-size: 16px;
line-height: 1.5em
}
Can anyone help me modify this code for that matter ?
Thank you
When using position: fixed; it fixes the element to the screen. You cannot position it relative to a element with CSS, in fact if you think about what position: fixed does you would never want to position it relative to a element and thought of it sounds impossible to me. A fixed positioned element is is taken out of the flow so that it is relative to the viewport you cannot just put it back in the flow somewhere.
I'm not sure if this is exactly what you're looking for, but essentially kmmathis is right. http://jsfiddle.net/R8bUQ/
The markup:
<div>
<div>
</div>
</div>
and the CSS:
div {
height: 800px;
width: 300px;
background: #f0f;
margin-top: 80px;
margin-left: 180px;
position: relative;
}
div div {
height: 20px;
width: 100%;
background: #0f0;
position: absolute;
margin: 0;
top: 0;
left: 0;
}
and the JS:
$parent = $('div').eq(0);
$elem = $parent.find('div');
$(window).scroll(function(){
$elem.css('top', $(window).scrollTop());
}).trigger('scroll');
Basically, you set the child to be positioned relative to its parent, and as you scroll, the amount that the window has scrolled sets the top of the element. It's fixed positioning, but is positioned relative to its parent. It's not 100%, but it might give you a basic idea of how to accomplish what you want.
When using position:fixed; you are positioning the elements relative to the browser window.
To use your own parent container, you'll need to set #in and #out to use position:absolute; and then wrap them in a container, let's say #wrap, that has position:relative; set on it.
Edit: here's a fiddle: http://jsfiddle.net/ktAAa/
I have 3 divs. First div is at the top with position relative, and the second div is at the bottom and its position is absolute. There is also a third div which i want it to be on the middle. I want the third div to be in the middle so that no matter i change the height of my browser, i want it to be alligned with 20px padding, depending on the first and second.
middle-box{
padding: 20px;
}
.top-box{
width: 265px;
position: relative;
margin: 0px auto;
}
.bottom-box{
width: 25%;
padding: 12px 0 12px;
position: absolute;
bottom: 0px;
min-width: 300px;
}
Variations on this same question have been asked dozens of times on SO. The fact that you want 20px margin is irrelevant. It's the overall structure that can be tricky.
I think this meets your requirements. The one compromise you may have to make is setting fixed heights on your header and footer.
http://jsfiddle.net/Fd6f9/1
.top-box {
height: 60px;
position: relative;
}
.middle-box {
position: absolute;
top: 70px;
bottom: 80px;
left: 20px;
right: 20px;
margin: 20px 0;
}
.bottom-box {
height: 56px;
padding: 12px 0 12px;
position: absolute;
bottom: 0px;
}
If you choose to have your bottom-box "stuck" to the bottom of the browser window, you'll have a variable space between your middle-box and the bottom-box, depending on how much content is in the middle-box and the size your viewer's browser window. If you want consistent spacing between the divs, you need to remove the absolute positioning.
Also, I'd strongly recommend changing your css from classes to ids (. to #). You forgot the class/id marker on middle-box, so that might also be causing a problem.
Keep in mind that padding will affect the inside of your div, while margin will affect the outside.
Does this code give you what you're looking for? (I added background-colors just for a visual so I could see what was happening to the divs.)
<style type="text/css">
#top-box {
width: 265px;
position: relative;
margin: 0px auto;
background-color: #DDD;
}
#middle-box{
margin: 20px 0;
padding: 20px;
background-color: #AAA;
}
#bottom-box{
width: 25%;
padding: 12px 0 12px;
bottom: 0px;
min-width: 300px;
background-color: #888;
}
</style>
</head>
<body>
<div id="top-box">something in the top goes here</div>
<div id="middle-box">something in the middle here.</div>
<div id="bottom-box">something at the bottom.</div>
</body>
It's hard to know what else to tell you without knowing what you're planning on doing with these divs. Hope this helps!