Really hoping someone can help a z-index novice.
I'm trying to position a div on top of everything else on my page:
http://www.designbyantony.com/bipf/index.html
The div (you can probably see the problem) is the roun blue circle with 'March 6-8 2015'.
I'd like it to sit on top of everything else properly - ie: run over the nav bar a bit and chip over the area which has the repeating 'arch' design.
I've tried using z-index but I'm obviously going wrong somewhere.
CSS is at
http://www.designbyantony.com/bipf/styles.css
Can anyone help me?
Change into your CSS like that.Remove the both position:relative from CSS
#page_content {
width: 970px;
margin: auto;
height: auto;
padding-top: 15px;
padding-left: 5px;
padding-right: 5px;
/* position: relative; */
background-color: #FFFFFF;
overflow: hidden;
/* position: relative; */
z-index: 2;
}
and again change your CSS of #dates.remove left position left:1046;top: 171px; and put there right:0
#dates {
position: absolute;
left: 1046px;
top: 171px;
z-index: 10000;
height: 140px;
width: 140px;
display: block;
background-color: none;
}
Remove overflow: hidden in the #page_content in styles.css at Line 245:
#page_content {overflow: visible;}
Or if you would like to have clearing after the #page_content, you can use something like this:
#page_content:after {display: block; clear: both; content: " ";}
Reason: The parent of #dates is been cropped by #page_content, which has overflow: hidden, that doesn't allow contents to be hanging.
it's not a z-index problem. your div id="dates" actually cropped by your div id=page_content
Change overflow from hidden to visible for #page_content in styles.css
Z-index works, it's overflow:hidden in combination with position:relative for #page_content that causes clipping. The easiest way to fix this, IMO, is to add another div wrapper inside #page_content and to move overflow:hidden to this inner div. Without position:relative, overflow:hidden will not clip absolutely positioned descendants of this div, and the page will look as planned.
Related
Basically I've got a wrapper to which I've added the (relevant) css properties:
height: 100%; float: left; margin: 10px 10px; position: relative;
with a nested div styled as
display: none;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
with display: block; taking effect on hover of the parent, targeting the nested div.
The issue is that when it's hovered, the nested div overlaps the parent by about 4-5px. I can completely eliminate this issue by stating a set height on the parent element, but I would rather keep the height at 100% if possible!
JSFiddle:
http://jsfiddle.net/Trblestrife/Y9ztq/1/
EDIT If you know what's wrong but can't be bothered answering give me a hint and I'll do more research. I'm asking here because I've run out of ideas as to where to look
Thanks very much
The issue is probably that images, because they are inline elements, can add trailing whitespace at the bottom. Generally a fix is to give their parent element a line-height of nothing:
.featured-projectwrap{
line-height:0;
}
But this would mean any text nested would not be visible, so compensate by re-promoting the line-height at the caption level:
.caption{
line-height:1;
}
Here's your fiddle with the changes...
My header holds a logo image as well as my nav element. I would like my nav to sit at the bottom of the header, but without using absolute positioning or specific top/left pixels because I would like this to be responsive.
Here is my code so far
http://jsfiddle.net/Aiedail/86ZGd/
I had tried adding like a
nav{margin-top: 50%;}
but that used the full page height rather than the containing div height.
Any suggestions or help would be appreciated.
I do think the best way for you to solve this, is to set your parent container to
position: relative;
and in your nav, use
position: absolute;
bottom: 0;
right: 0;
this way, your nav is always in the rightbottom corner of your header, but your header is still relative, so you don't lose the responsiveness.
JSFiddle Here
Basically, I took your logo and the nav and made them both display: inline-block; Removed the float styles.
Then you can use the vertical-align: bottom; for the nav element.
I forked your jsfiddle here http://jsfiddle.net/tQg8d/1/
img{
#extend .layout;
padding: 10px;
width: 30%;
height: auto;
max-width: 300px;
display: inline-block;
}
nav{
position: relative;
margin: 0;
padding: 0;
width: 69%;
height: auto;
border: 5px solid $red;
bottom: 0px;
display: inline-block;
vertical-align: bottom;
I also had to make the width of the nav a little smaller so changed it to 69% so that it shows up to the right of the logo. Might be because of the border.
Hope this is will help, if like to increase header height and and nav width may fine for you
nav { width :100% }
and
header { max-height : 200px; }
I would honestly suggest you follow the position:absolute model that Jamie detailed, but if you want a different way, you can use some negative margins.
For this, though, you need to be able to specify the height of the nav element (use ems, as they work better with responsive designs).
So you would just clear the float after the image--then you can set the top margin to -xxx (whatever the height of the element is).
Here is an example:
http://cdpn.io/bfoyj
Not as pretty as using the absolute positioning, but also works.
If I have two divs, and in the first div there is some image tag with a width of 100% so it fits the screen like
<div id="first"><img src="" width="100%"></div>
<div id="second">Some Text</div>
How do I make it so #second is positioned under #first? It should work by default, but because the height of #first is not set, #second is being positioned at the same place #first is positioned.
It indeed should work by default.
You either
Made your divs inline-blocks
Set their position to absolute
floating them to the left
Most likely it's the second scenario. Set their position to static.
Floating and/or giving the first an automatic height might do the trick:
#first {
float: left;
overflow: hidden; /* or height: auto perhaps*/
}
#second {
float: left;
}
Edit: too late, problem solved while I typed :)
We really need to see your CSS, but compare your values to these; if they're set to anything else, that may be the problem.
#first {
display: block;
float: none;
position: relative; /* or possibly position: static; */
}
#second {
display: block;
float: none;
position: relative; /* or possibly position: static; */
}
What about the image? Any CSS rules assigned to that? Is there a div around these two divs with a max-height?
I'm currently changing a PSD design to a HTML site. I've come into an issue however. I am unable to center a certain element. I've tried all the usual tricks.
http://lowhop.net/
See here the main blue header is out of line (not centered). I tried
#slider{
position:absolute;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
Before, however it didn't work reliably. (Appeared only to work on my screen resolution/browser).
Thanks
You need to explicitly define a width on the element when using margin: 0 auto to center.
Block elements take up the full available viewport width unless you explicitly give them a width.
Since you explicitly set the width of the slider DIV, you can use another trick to center it:
#slider
{
z-index: 2;
background-image: url(../img/sliderbg_09_09.png);
position: absolute;
display: block;
width: 982px;
height: 251px;
left: 50%;
margin-left: -491px; /** half DIV width */
}
I'd probably steer away from having this as a position absolute DIV, doesn't look like it needs it but that's a quick and dirty centering :)
Hope that helps
If you must use absolute positioning, you can use something like my answer here.
Basically, you declare an explicit width for your element, then give it
left: 50%;
margin-left: -[your width/2];
like user showdev mentioned :
Does it need to be positioned absolutely? Does it even need to be centered? It looks like you've positioned div#navBar simply by adding margin-left: 85px. It seems that you could use that same method for div#slider.
you have
#navBar {
background-image: url("../img/navbg_07.png");
display: block;
height: 38px;
margin-left: 85px; /* attention on this */
margin-top: 31px;
position: relative;
width: 879px;
z-index: 1;
}
and this
#slider {
background-image: url("../img/sliderbg_09_09.png");
display: block;
height: 251px;
position: absolute;
width: 982px;
z-index: 2;
}
so, try 'margin-left: 85px;' your #slider.
So I'm using a responsive framework called skeleton which works great, however, with a section such as the header and footer, I want the background to span 100% width of the page which is now a popular design choice.
Does anyone have a workaround for this just to make a div pop outside of the container?
Assuming the container has the default position property (static), you could give the header a position:absolute. Then set top:0, left:0 and right:0.
Make sure to set the top margin or padding of the container to the same height defined for the header.
This will not work if the container has been given a position value of relative, absolute, or fixed.
skeleton.css line 301:
.container:after {
clear: both;
content: " ";
display: block;
height: 0;
visibility: hidden;
}
This declaration will make sure that any content displayed after the container is not visible, therefore not disrupting the grid in any way on the page.
The container is also set to 960px wide and position:relative (skeleton.css line 24)which means that you can't create anything inside the container div that can be set to page width without using javascript ( + jquery for simplicity ). On such a key design feature on most sites it wouldnt be such a great idea to rely on this.
I would try removing the :after declaration on .container and then add a new <div> underneath with width:100%; height:128px; and see how it affects your grid as a starting point.
Try this:
body {
font-family: 'Open Sans',sans-serif;
font-size: 0.875em;
overflow-x: hidden;
}
.header-container {
background-color: #CCCCCC;
float: left;
height: 100px;
margin-left: -400px;
overflow: hidden;
padding-right: 800px;
width: 100%;
}
#header {
margin-left: 409px;
margin-top: 10px;
text-align: center;
}