I have div inside a div (.konteineris2 and .feedback). When I use left:-200px in .feedback class, fixed div suddenly appears in the very left side of screen, outside .konteineris2. All I wanted it to move for 200px to the left outside .konteineris2, but not appear to the left screen border and then move 200px from that point.
HTML:
<div class="konteineris2">
<div class="feedback">
</div>
</div>
CSS:
.feedback{
position:fixed;
top:220px;
width:100px;
height:200px;
background:white;
}
.konteineris2{
width: 960px;
height:700px;
position:absolute;
top:460px;
padding-top:30px;
pointer-events:none;
overflow:hidden;
}
Any ideas how to manage it?
change position:absolute; to position:relative; in .konteineris2
Add margin-left: -200px; in .feedback
Check it on CodePen . I think you're looking for the same thing.
Without seeing more of the context in which this occurs I'd guess the following might achieve your goal: Try adding margin-left:-200px instead.
Related
This might be really simple but I just cant wrap my head around it.
CSS
#nav_bar{
max-width:1000px;
height:41px;
margin: 0 auto;
background-color:yellow;
}
#left{
float:left;
min-width:200px;
height:41px;
background-color:red;
}
#right{
float:right;
min-width:500px;
height:41px;
background-color:black;
}
HTML
<div id="nav_bar">
<div id="left">
</div>
<div id="right">
</div>
</div>
I'll explain this in colors. Basically I want the red box to float left and the right box to float right inside the yellow box. HOWEVER when I make the browser window smaller everything collapses and the black box goes UNDER the red (outside the yellow). I know this sounds very basic but I don't want it too collapse, I would be happy if it could just stay intact without moving at all and the browser just scrolls horizontally like it normally would if the window becomes too small for the content.
Thanks :)
You need to give #nav_bar a minimum width large enough to accomodate the two child elements:
#nav_bar{
...
min-width: 700px;
}
DEMO
Just add width:1000px or how much you need it to be, on the container. In this case "nav_bar".
Link to JSFiddle
#nav_bar{
max-width:1000px;
width:1000px;
height:41px;
margin: 0 auto;
background-color:yellow;
}
First time asking a question :)
My header DIV has a background that is curved like a wave. I have a sidebar floated to the right located in a DIV underneath the header DIV. The background image for header curves up right where sidebar is which leaves a gap where sidebar hits the bottom of the header div (because obviously divs aren't curved). I need the background of sidebar to extend underneath header so there is no gap. What should I do?
HTML:
<div id="header"></div>
<div id="body>
<div id="main-content"></div>
<div id="side-bar></div>
</div>
CSS:
#header{
width:100%;
height:272px;
margin:0 auto;
background-image:url('../img/header.png');
background-repeat:no-repeat;
text-align:center;
}
#body{
width:960px;
height:auto;
margin:0 auto;
padding-bottom:159px;
}
#main-content{
width:60%;
height:auto;
margin:0 auto;
float:left;
padding:15px;
background-color:#fbf8ee;
}
#side-bar{
width:30%;
height:auto;
margin:0 auto;
float:right;
padding:10px;
background-color:#961912;
border-right:thick #558c21 solid;
border-left:thick #558c21 solid;
}
![Here is a screenshot of what it looks like currently. The sidebar has no content so it is narrow but I want it to extend up behind the header image so there is no gap.1
Not 100% sure on what you're wanting to achieve, but if you're wanting the sidebar to show behind the header and extend upwards, try adding to the sidebar style:
margin-top: -100px; /* Higher or lower number depending on how far up you want it to go */
position: relative;
z-index: -1;
Not really sure if I understand you correctly but try to add:
position: relative;
top: -10px;
to #side-bar as you can see here http://jsfiddle.net/NpZJV/
If I may advice, don't use % for width/height and positions use px instead.
You could use CSS3 to make a background size, check it out to see if it solves your problem.
http://www.w3schools.com/cssref/css3_pr_background-size.asp
Try using
background-size: 600px 2921px;
You might be able to get it to fit
I have a problem with a box-shadow, being obscured by another div.
Here is my code:
HTML-
<div id="wrap">
<div id="header">
<div id="nav"></div>
</div>
<div id="main_content"></div>
<div id="footer"></div>
</div>
CSS-
body{
margin:0;
}
#wrap{
margin:0 auto;
width:84%;
}
#header{
background-image:url(img/header_pattern.png);
background-repeat:repeat;
margin:0 auto;
width:100%;
height:170px;
box-shadow:5px 5px 5px black;
z-index:1;
}
#main_content{
background-image:url(img/main_pattern.png);
background-repeat:repeat;
width:100%;
min-height:700px;
height:100%;
z-index:2;
}
Screenshot-
http://i.stack.imgur.com/TfDyi.png
How can I make it so that the shadow is not "stacked under" (on the z-axis), and hence obscured by, the #main_content div, but still inside my #wrap?
Thanks.
No, I don't just wan't to push the #main_content down.
Just add:
position: relative;
To #header{
Example:
http://jsfiddle.net/kJajC/
You need to "position" an element, if you want to "stack" it differently on the z-axis using z-index.
Note that if you don't actually want to change its position on the x/y plane, then just specify that it is position:relative; without any of the top, bottom, left or right x/y offsets and it'll be positioned on the x/y plane where it would've been laid down statically anyway.
From MDN on adding a z-index:
Warning! z-index only has an effect if an element is positioned.
I found their series of articles Understanding CSS z-index really helpful with this stuff.
Is there a better way to align something in the bottom right of a cell?
I have a div which only contains a background image, 10px by 10px. I am using the following styles to put it in the bottom right corner. (The cell I have it in is 40px high.)
Doing it this way causes me to lose the 30px above the div. (I'm also using it as something to click, so I can click anywhere on the right instead of only the bottom corner of the cell.)
.time_note { float:right; width:20%; min-height:40px; display:block;
margin-right:-5px; }
.time_note { background:url('/images/sheet/note_marker.png') no-repeat;
background-position:bottom; }
If this could also be done NOT using margins, that would be great.
Example Image:
You should make your wrapping class position:relative; and then whatever you have inside you can position absolutely position:absolute; bottom:0; right:0;
For example
HTML:
<div class="wrapper">
<div class="arrow"></div>
</div>
CSS:
.wrapper
{
width:100px;
height:100px;
position:relative;
}
.arrow
{
width:10px;
height:10px;
position:absolute;
right:0px;
bottom:0px;
}
You could position: absolute, and bottom: 0; right:0; to place it on the bottom right of the parent element (which needs position: relative;). Of course, this has the danger of overlapping some other info in that element.
try:
background-position:bottom right;
I believe what you are looking for is this, you just need to modify it to be on the right
Sticky footer
I have the following code and would like the inner div with the class: escaping-container to be displayed in front of the outer div with the class container.
The inner div has bigger height setting than the outer div. So a part of it is cut off.
Also the part that is being cut of by outer div must be displayed.
<style type="text/css">
div.container{
width: 100px;
height:100px;
overflow-x:scroll;
overflow-y:hidden;
position:relative;
z-index:1;
}
div.escaping-container{
width:50px;
height:150px;
position:relative;
z-index:10;
background-color:red;
}
</style>
<div class ="container">
<div class="escaping-container"></div>
</div>
I tried to get this done by setting the z-index, but it doesn't work. Any help will be appreciated.
Im afraid your question is a contradiction. If you want the inner div to be visible, you must remove the overflow-x and overflow-y css statements.
if the overflow settings are necessary
try this http://jsfiddle.net/sandeep/59nGZ/
css:
div.container{
width: 100px;
height:100px;
overflow-x:scroll;
overflow-y:hidden;
border:1px solid red;
}
div.escaping-container{
width:50px;
height:150px;
position:absolute;
background-color:red;
}
You won't be able to position the inner <div> outside the parent with overflow set to scroll, hidden or auto. To be able to do so you either need to change your markup, or remove the overflow-properties from your CSS.