The only way I know to get a layer on top is to use position: absolute.
(top good, bottom bad)
Once you do that you pretty much lose the option to scale dynamically with the rest of the page.
Sure you can do some width: calc(62% - 60px); hacking and get it almost there, or you can write a script that calculates the size etc..
But is there really no way to have a layer on top and still have it scaling with the page?
Its possible with position:relative; Relatively positioned elements takes the width of parent & can be bring on top by using z-index. z-index is applicable only on positioned elements.
Sample Code:
.menuParent{
height:34px;border:1px solid black;
}
.menu{
width:100%;position:relative;border:1px solid red;top:34px;z-index:1;background: white;
}
<div style="width:120px;" class="menuParent">
<div class="menu">
<div>AirBnb</div>
<div>Booking.com</div>
<div>Expedia
<div>Agents</div>
</div>ThaiHome</div>
</div>
<div> Other div below the menu list</div><br/><br/><br/><br/><br/>
<div style="width:240px;"class="menuParent">
<div class="menu">
<div>AirBnb</div>
<div>Booking.com</div>
<div>Expedia
<div>Agents</div>
</div>ThaiHome</div>
</div>
<div> Other div below the menu list width bigger width</div>
parent{
position: relative;
}
child {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
Related
So,
i'm guessing this has been asked before but im realy missing something here which i've been starring myself dead at for the last hour.
I've got a container with two divs, position relative and absolute since i want them to stack. The stacking part works. However, this container, the #mockupcontainer, needs to be inside the #what-container-inner which i cant seem to get to work. At the moment it just stops the #what-container-inner and placed the #mockupcontainer after it. My jsfiddle illustrates perfect whats going wrong. I hope someone can help me on this one.
https://jsfiddle.net/rvq41vaf/
CSS:
#what-container-outer {
background-color: #ececec;
margin-left: auto;
margin-right: auto;
}
#what-container-inner {
background-color: #ececec;
width: 75%;
margin-left: auto;
margin-right: auto;
position: relative;
}
.mockupcontainer{
position: relative;
}
#pin-mockup{
position: absolute;
z-index: 10;
}
#pin-mockup-site1{
position: absolute;
z-index:11;
}
HTML Code:
<div id="what-container-outer">
<div id="what-container-inner">
sdfsdfsdfsdfsdfsdfsdfsdf<br>sdfsdfsdfsdfsdf
<div id="trigger-mockup"></div>
<div class="mockupcontainer">
<div id="pin-mockup">
<img src="image2" class="img-responsive" alt="Realiseren">
</div>
<div id="pin-mockup-site1">
<img src="image1" class="img-responsive" alt="Realiseren">
</div>
</div>
</div>
</div>
Kind Regards,
Donny.
Since you have your two image-containing divs (pin-mockup and pin-mockup-site1) positioned absolutely, they are pulled out of the flow and the enclosing divs no longer leave room for them. The solution is to set the larger one to position: relative so that the enclosing div does make room for it. Setting top:0 on the second (absolutely positioned) div brings it to the top of the enclosing div.
Here's the fiddle.
See also the MDN docs on the position property.
I'm attempting to stack divs (styled to look like sticky-notes) so that part of the divs on the bottom hang out. I initially considered okay, I'll just style the top-most div as normally, and then only style the parts that you can see with the bottom divs (as opposed to making all divs the same width+height and stacking them). The issue is that I also want to style the border-radius of all divs the same, and if I do it the non-stacking way, then border-radius applied to the top div doesn't yield the same design as any border-radius applied to the bottom divs (because the width+height is different for the top div, I'm guessing).
<div class="stickynote1"> content <div>
<div class="stickynote2"> content <div>
<div class="stickynote3"> content <div>
Is there a way to fix the border-radius issue without resizing the divs to all be the same width+height?
If I were to resize the divs to all be the same width+height, how can I stack them? It seems that position:relative and z-index combination on the divs won't work because position:relative created a new container block, thus somehow making the z-index not work with the other divs' new container blocks.
If I were you, I'd:
add another class called stickynote and find all the common style (in this case border-radius) and apply the class to all of them
I'm not sure what you mean by stacking them -- when I read your initial paragraph, I thought you meant stack them vertically on the y axis, but seemingly, you're struggling with z-axis, so it seems like you want to stack them on the z axis. In which case, I'd put all three of them in a container, position that container relative, and position the three stickynote absolute, with different z-index, but identical x/y position.
Please do the following for better scalability:
Use a common class.
Close the </div> correctly.
Check the snippet.
Snippet
.stickynote {
position: absolute;
background: #0f0;
border: 1px solid #f90;
border-radius: 5px;
padding: 10px;
width: 75px;
top: 10px;
left: 10px;
}
.stickynote + .stickynote {
top: 20px;
left: 20px;
}
.stickynote + .stickynote + .stickynote {
top: 30px;
left: 30px;
}
<div class="stickynote"> content </div>
<div class="stickynote"> content </div>
<div class="stickynote"> content </div>
I'm designing a pretty simply website for a friend. In the design, he wants a ribbon to stretch out horizontally in the middle of the page.
Like so:
https://i.imgur.com/Hz4SH4Hh.png
My attempt at doing this was to crop the 'ribbon' parts of the right and left and display those images while floating them to the right and left. Then creating a content div, centering it to fill in the middle of the ribbon. This solution is super sloppy and doesn't work well at all. Here's a picture of it
https://i.imgur.com/66C2kj5h.png
The resolution is kinda off, but you can see that the border of the middle div are off, and when stretching or shrinking the page, the percent width of the middle div messes the whole thing up.
Heres my HTML/CSS
<div class='ribbon-container'>
<div id='ribbon-left'>
</div>
<div id='ribbon-right'>
</div>
<div class='clear'></div>
<div id='ribbon-middle'>
</br>
<center>
<span class='ribbon_header'>Food Around Your School</span>
</center>
</div>
</div>
.ribbon-container { width:100%; height:118px; position:relative;}
#ribbon-left { background-image:url('images/ribbon_left.png'); width:117px; height:119px; position:absolute; bottom:0; left:0;}
#ribbon-right { background-image:url('images/ribbon_right.png'); width:117px; height:119px; position:absolute; bottom:0; right:0;}
#ribbon-middle { width:85%; height:81px; background-color:#b5b5b5; border:7px; border-top-style:solid; border-bottom-style:solid; border-color:#61615f;top:0; margin:0 auto;}
You're just gonna have to size everything in the same units. I'd suggest just using pixels unless you're going with a responsive design, and if you're going with a responsive design, I'd suggest using something like foundation.js.
Edit: and +1 to Michael Peterson's SVG idea. That's a good one too.
Perhaps try setting
.ribbon-middle{
width: auto;
padding: 0 120px;
}
where ribbon's padding is the width of the left/right images. then you will have the text always visible.
Since the height of the banner is not changing, you can accomplish this using by using a horizontally-repeating image as the background for the banner and then using absolute positioning for the left and right portions of the banner.
The html becomes:
<div class='ribbon-container'>
<div id='ribbon-left'></div>
<div id='ribbon-right'></div>
</div>
And the css becomes:
.ribbon-container {
width: 100%;
height: 120px;
position: relative;
background: url('http://i.imgur.com/LVXiQ37.jpg') top left repeat-x;
}
#ribbon-left {
position: absolute;
top: 0;
left: 0;
width: 112px;
height: 120px;
background: url('http://i.imgur.com/2MOcrO9.jpg') top left no-repeat;
}
#ribbon-right {
position: absolute;
top: 0;
right: 0;
width: 97px;
height: 120px;
background: url('http://i.imgur.com/Q6NmXR6.jpg') top left no-repeat;
}
I've done a really crude mock-up using the initial image you posted. The problem is that the image itself is not perfectly horizontal, so it looks like the right side does not line up in my fiddle, but if you are more careful in creating the initial image, this will work. And I haven't added text, but this can be done using absolute positioning as well, or another method I'm sure.
You can see the example at: http://jsfiddle.net/M3GmY/
I have been trying to get this right for days but I just can't.
My scenario is this: I need three columns of equal height. There needs to be borders between them. The left column will have a bit more content than the other two and the other two need to have buttons at the bottom (that are positioned so that their bottom edge is where the left column's content ends).
Here is an image that shows what I mean: http://img217.imageshack.us/img217/6400/49593032.png
I have tried the huge-padding-bottom-and-equally-huge-but-negative-margin-bottom-hack which works great until I try to move the buttons down. At first I tried to use absolute positioning on the button and position:relative on the container but since the container needs overflow: hidden to work the button will be hidden and placed at the bottom of the container (which is about 32767 pixels down due to the huge padding).
I also tried using the above hack while adding a second row which I put the buttons in. Besides the fact that the semantics of that don't make much sense, this method made it so that the content of the left column doesn't go all the way down. Since the hack required overflow: hidden attempts to use negative margins to push the second row up didn't work out either.
So I'm stuck here. Faux columns wouldn't help me and javascript is not an option. What would you do?
Use A List Apart's Holy Grail and position the buttons absolutely.
Don't really like it in this case, but at least one solution would be to use a table. The text height in the first column would force the height for the other cells, and you could use relative positioning inside the cells (with a div) to have the buttons at the bottom.
[removed code --- not 100% sure about your exact requirements]
You can use absolute positioning for your divs and then absolute position the buttons in them. Try this code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body { height: 100%; margin: 0; }
.col {
width: 33%;
position: absolute;
top: 0;
bottom: 0;
border: 1px solid #000;
background: blue;
position: absolute;
}
.left { left: 0; }
.mid { left: 33.33%; }
.right { left: 66.66%; }
.button { position: absolute; bottom: 0; right: 0; }
</style>
</head>
<body>
<div class="col left">
sdgfiods ajgodsai jngfio nmsadogf nikod sangf sfdsg fdsg
</div>
<div class="col mid">
sdgfiods ajgodsai jngfio nmsadogf nikod sangf sfdsg fdsg
<button class="button">click me</button>
</div>
<div class="col right">
sdgfiods ajgodsai jngfio nmsadogf nikod sangf sfdsg fdsg
<button class="button">click me</button>
</div>
</body>
</html>
I need to create a <div> of height 200px that has some text at the very top and the very bottom. This needs to work in all major browsers. I've tried various combinations of alignment/vertical-alignment with no luck.
Use two spans (or whatever) inside the div:
<div>
<span id="top">Text at top</span>
<span id="bottom">Text at bottom</span>
</div>
Then give the div position: relative; and position the spans absolutely:
div {
position: relative;
height: 200px;
}
span {
position: absolute;
}
span#top {
top: 0;
}
span#bottom {
bottom: 0;
}
Live example:
http://jsbin.com/ucowi3
You can't do this with one single block of text, as you're talking about two separate bits of styling (ie one bit to the top and one bit to the bottom), so you'll need to put the two bits of text into their own separate elements within the main <div>. eg
<div class='maindiv'>
<div class='topofmaindiv'>This goes at the top</div>
<div class='bottomofmaindiv'>This goes at the bottom</div>
</div>
Then you can style them using CSS to position the two inner divs at the top and bottom of the main div:
.maindiv {
height:200px;
}
.topofmaindiv {
position: relative;
top:0px;
}
.bottomofmaindiv {
position: relative;
bottom:0px;
}
Obviously you will probably need to add other styles to that to suit your layout, but that should get you started.