I'm working on a page for a class, just to display things (you can see them sorted by chapter in the body) but I originally had a list on the left that I used initially that just listed them all, and I wanted to keep it.
Problem is, once I started adding more CSS - I don't know where exactly - the area on the left just became completely unclickable. You can't highlight the text, you can't click any of it - nothing. I have absolutely no idea whatsoever what is causing this.
link to the site here
here is a pastebin link showing everything I have.
thank you, i really appreciate any help.
The .content div overlaps entire body area, because of "position: absolute;"
Add z-index: 9999; to #menu in your CSS and it should be clickable.
Other way is to use "position: relative; float: left;" to both .content and #menu, but you have to be carefull with their widths. Their sum of widths (including padding and margin and border) should be less or equal to the container width. In your case it should be body tag (actually a don't see body tag in your html).
That's because your .content div is using position: absolute; so it's taken out of the page flow and overlapping your sidebar because it has no width set (block elements span the full width of your viewport unless you give it a fixed width) ... just add a negative z-index value to your .content div and it should work fine.
More on z-index
Related
I'm asking this for learning purposes; there aren't any negative aspects on this behaviour, but I just wonder if this could have any negative consequences in the future.
So I have a container div: content_wrap, which has two other div's: side_bar and main_content. The container div is 980px width, and is used to center its contents using margin-left and margin-right.
It's doing this correctly, however, when I was debugging the page (in Firefox), I noticed that the browser renders the div as being 0x0px and renders the parent div off-screen. However, it does position the child divs correctly. See this JSFiddle for an example: http://jsfiddle.net/7fsXp/7/
I Googled this and most of the answers have something to do with floats and are solved by using clear:both, but I don't use any floats. I did notice that if I change the main_content div from position:absolute; to position:relative;, the content_wrap is displayed correctly. Or I can fix it by setting a height for content_wrap.
I don't actually need to be able to see the content_wrap, so there isn't really a problem, as it is doing its job in means of centering the child divs. I just wondered if it would be a bad practice to leave it like this? Is it a bad thing, or does it matter?
Try adding other elements to this HTML and enjoy the horror :D
There are actually many things in your code, that I wouldn't do. First of all, when an element is with position: absolute or position: fixed its layout is "ignored" by other elements or in other words cannot "push" any element and that is why your container is having 0 height. It's like they are ethereal (best explanation ever, I know).
You should check this article on positioning -- http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
The fact that they are in the place you expect them to be is that there are actually no other elements in the HTML and the absolute element is positioned relatively to the body and so is the fixed one (but that's what elements with position: fixed always do). Looks what happens when I add some other content to the parent div -- http://jsfiddle.net/7fsXp/13/
So long story short - you shouldn't form your layout with absolute or fixed elements if you can do it without them.
position: fixed and position: absolute take the elements out of the flow, so using either of these positions on all child divs will collapse the parent div entirely.
If you have content below a collapsed div, it will flow up and over/under that content like this.
You don't need to position the main_content div absolutely, but you'll need to change a few things to top align the sidebar and main_content.
DEMO
Since sidebar is fixed, it's using the document, not the container div as a reference for top, while main_content would use the body (unless you add position: relative to the container). Getting rid of the body's default padding/margin will fix the small alignment difference.
body {
padding: 0;
margin: 0;
}
#main_content {
//remove position: absolute;
margin-top:70px; //top: 70px won't work unless you specify position
}
It depends on what you are willing to do, but because the default position for div is position: static; changing the position: relative; will avoid the collapse of parent div.
I created a DIV which on the right top corner must have two links (Menu and Options):
<div class="Clear">
<ul class="Clear">
<li><a>Menu</a></li>
<li><a>Options</a></li>
</ul>
<h2>Header</h2>
<p>Text</p>
</div>
To align the ul on the right I used "float: right".
The online example is in: http://jsfiddle.net/y2hhm/8/
Each link text will be replace by an icon image using background-image.
It looks fine on the first DIV. But on the second the table is pushed down.
I also tried "position:absolute" but it makes hard to align it on the right.
Does anyone knows how to make the Menu/Options list look the same in both?
EDIT:
Tables have default styles applied to them by the browser. To solve this specific problem on your second fiddle (yellow-orange one), you need to set the table's border-spacing: 0;.
Perhaps you can turn to CSS resets if these pre-set properties annoy you.
-----------------------------
I think you might have overlooked the fact that ul's and ol's have a default styling applied to them, which differs from browser to browser. Some might set padding, others margin (I haven't tested it myself).
All you need to do is add this to your CSS: (tested and working in your fiddle)
ul {
padding: 0;
margin: 0;
}
Your h2 element and table element respond differently to the float of the ul. If you set your h2 CSS to clear:both the margin from the ul will also impact it. The table element for some reason considers the margin of your floated element (I can't explain why).
NB: // are not valid CSS comments. Use /* */.
If you absolutely want the menu to be removed from the flow, set the parent div to position: relative; and the ul to position: absolute; margin-left: 80%; margin-top: 0%;.
The disadvantage of this method is that you have to approximately estimate the menu's length. (in this case I took 80% margin, so estimated at 20%) . Given that your divs have dynamic widths, it will also cause the menu to float outside of the table when the viewport is too small. You can prevent this by setting the div to overflow: hidden;, but overall...
If this were a problem I had to solve, I would simply stick with the float: right; and leave some whitespace between the menu and the next elements...
Ok, if you go here: http://opportunityfinance.net/Test/2013conf/index.html
You will notice 2 layout issues
This image of the 3 logos needs to be below the "Gold" <h4> tag. But for some reason it won't do it. I have assigned the <div> tag a position of relative since there are other divs within it that need to align the images to the bottom, and this does it correctly, however, it now won't go below the <h4>Gold</h4> HTML.
Next Layout issue:
I have been trying like hell to get a footer on the bottom of the page. Sounds simple right? WRONG! But now that I got the div to be at the bottom, it seems to be cutting off the top area divs above it. So, not all of the content is showing. Instead it is being pushed underneath of the footer. How can I fix this? Tried to put a padding on it, but now sure where and/or how? margin-top on the footer doesn't seem to do anything either.
Any help on this is greatly appreciated. I have been struggling like hell to get this simple layout in order. It should be a fluid layout, as I'm resizing text down as the page resizes also, which seems to be perfectly fine, except for these 2 problems :(
EDIT
Here is a pic of what it looks like when applying the container div a 100 pixel height value:
It is giving it too much space between the <h4>Gold</h4> and the 3 images. Atleast this is the case in Opera. Any possible work-arounds for this?
here's a fix for one
.body {
background-color: #FFFFFF;
padding: 2em 2em 52px 0;
}
you have 3 logo's in one div, on that div add a height, for example
element.style {
height: 100px;
position: relative;
width: 100%;
}
Pretty basic stuff really, you should look into clearfix's here http://css-tricks.com/snippets/css/clear-fix/
When you add a float or position:absolute; to a div, in a way it gives up its reserved space so that causes the parent div to think that there isnt anything inside and therefor has no height, clearfix will fix these problems for you, reason i say is becuase the 3 logo's are all either floated or absolute;
this is the result i get
I have been working at this for the past day and a half. So any help will be greatly appreciated.
The general layout has a top bar and a side bar which are position fixed. I want the content container to fill the rest of the page without a scroll bar unless it is necessary due to content. I am not sure if it is possible to do purely in CSS or if I will need to modify my html structure as well. I have posted a fiddle below to show the most simple example possible.
http://jsfiddle.net/wU2Hd/
Again, any help or pushes in the right direction will be greatly appreciated, this has been throwing me for a loop.
It's not impossible. Check out this JSFiddle I forked from yours.
I did not need to change the HTML structure, but there were some important changes made to the CSS.
First I removed the height: 100%; from html, body. This was forcing the scroll bar to appear.
Then I removed the height and width declarations from .content, and gave #shell-content absolute positioning:
#shell-content {
background: #FFFFFF;
position:absolute;
left: 100px;
top: 86px;
bottom: 0px;
right: 0px;
overflow-y: auto;
}
The left and top are values based on the explicit height you gave to your header and the explicit width you gave to your menu. The overflow-y: auto tells it to only show the scroll bar if the content out-grows its available space, but not otherwise.
The JSFiddle has some crazy-long lorem ipsum text to show the effect. If you change it to less text, the scrollbar will disappear entirely.
The problem is that you are setting
#shell-content{
height:100%
}
body{
height:100%
}
Which means the body fills to fit the window, and then the shell-content expands to fill that space (the EXACT size of its direct parent), but is displaced by shell-top-wrapper, so it overflows. You should either decide on a relative height for the shell top wrapper, or change the height of the shell-content dynamically (using javascript).
Here is a take off of your fiddle: http://jsfiddle.net/eeMz4/. You'll see that with the large image in the content area, it scrolls. If you take the image OUT and replace it with text or something smaller than the available space, the scrollbar goes away.
The trick was adding overflow:auto to #shell-content.
Cheers!
Cynthia
I made a few small changes: http://jsfiddle.net/wU2Hd/5/
- remove the height from content
- remove the height from content-shell
- set the body background to white
- set the sidebar background to grey
This will not actually stretch up the content, but it will appear like it does. Scrollbar will appear automaticly when the content becomes bigger then the viewport.
I have a site with absolute positioned elements on it, for example the top Navigation of the site:
#topNav
{
position: absolute;
top: 100px;
left: 50%;
height: 40px;
width: 1000px;
margin-left: -500px;
}
Now I created a sticky footer like on the following site:
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
Now, the problem is that the footer will "overlap" the topNav,
because the topNav is positioned absolute, which means it's "outside of the normal float of elements". The relative position will not "notice" that there is the topNav before.
Before I start creating additional "pusher divs" for each absolute positioned element I would better ask if there are better practices than "pusher divs" or should I even not use position absolute on my elements?
EDIT:
JsFiddle here: http://jsfiddle.net/dkxUX/15/
When you scale down your browserwindow you'll find #footer overlapping all elements before it.
You could just apply a 140px top margin/padding to the body or other container element which would make the topNav's height and offset accounted for.
Better yet, don't set position to absolute in this case - it appears to me that all you're doing is horizontally centering a 1000px wide div.
/*top-margin of 100px + center the element*/
#topNav {width:1000px; height:40px; margin:100px auto 0;}
Update: I see your jsfiddle now. You could account for all absolutely positioned elements when setting the margin/padding as suggested in the first paragraph You are using absolutely positioned elements when normal document flow could be relied on.
a little bit too late to give an answer but it may help someone in the future, I came up with that problem not too long ago so here was my shot at it, using jquery since I couldn't came up with a CSS solution that wasn't removing the DOCTYPE tag (which isn't something you should do, anyways).
So here it is.
$("#CONTAINERDIV").prepend("<div id='relativefix' style='position:relative;margin-top:"+($("#YOUR_ABSOLUTE_DIV").offset().top+$("#YOUR_ABSOLUTE_DIV").outerHeight()+30)+"px'></div>");
$(window).resize(function(){
$("#relativefix").css("margin-top",($("#YOUR_ABSOLUTE_DIV").offset().top+$("#YOUR_ABSOLUTE_DIV").outerHeight()+30)+"px");
});
So yeah, that's all there is to it, you just dynamically add another div at the start of the container hard-placed under the absolute div, that will force all subsequent relative divs to me placed after it, it is like a clear fix for someone who ran out of ideas.