I have this idea in my head but I have no idea how to realize it.
Basically what I want is:
A div that floats to the left and sticks to the left side of the screen (does move along when scrolling). This div will be the navigation div.
And then a content div that is centered. Besides that there has to be a footer and a header (header is fixed size) and footer is sticky to the bottom.
Any idea how to do this? I really can't figure it out.
PS. Its ok if there is "space" between the two divs.
It was pretty simple - As far as I understand what you need ;)
Take a look on the fiddle
http://jsfiddle.net/tm8t9/
position:fixed;
Is what you need to have the things "sticky"
And for the future take a look on CSS even basic tutorials. Maybe try this
http://learnlayout.com/no-layout.html
Have nice day.
Related
I'm having trouble getting the footer on my site to work. The footer is broken down into two sections. First section is the mainFooter area and the second is kind of the like copyright area.
I have logos in the copyright area and a logo in the mainFooter. I need to have two of them be aligned at all times. It's really one logo but split into both footers because it's a stupid logo.
This is it:
Because of that line, we have to split the footer in two sections. But the text "Art now" can never be misaligned with the building.
So my solution to this was to using absolute positioning on both elements, set right:0 bottom:0 and adjust their position using margin-top/bottom.
Problem is, this only works when the logo is really far out and not truly aligned with the rest of the content on the page since everything else is mostly centered. That's what I mean:
Personally I don't care too much about the alignment of the logo on the far right, at that point you've reached the end of the page, it doesn't overlap with the content in the footer and still looks pretty nice, but our clients designer (not web) is a stickler for these things.
This is the dev site we're working on
Does anyone have any ideas on how we could handle this? Have the logos in the footer but make sure things are aligned properly and aren't overlapping with the content in the footer?
Put a container div around the footer content (and logo's) that has the following css:
.container{
width: 960px;
margin: auto;
position: relative;
}
Now your absolute positioned elements will be positioned relative towards this container div, and will not move too far to the right, but stay in the bounding box instead.
http://codepen.io/MarcMurray/pen/GBwEt
I'm curently laying out a page for an assignment, and am having bit of a brain fart in regard to positioning the content container beside the side bar and below the header.
I know it should be a simple fix, but when i change the margins it pushes the whole page down.
Can anyone see what I'm doing wrong?
Add float:left to .cardinfo CSS class
Im trying to make a layout that uses the whole screen so I have not set fixed widths on the layout. I'm using percentages.
im working on this http://www.abdhulzaman.co.uk/work/rima
as you can see at the top i have a logo and a header on the top left of the header and also a navigation thats position absolute to the right. now when i minimize the screen.. the nav and the logo header will overlap which is really annoying.
anything to do with position absolute/relative? This may seem very simple.. would appreciate then help! thnx :)
its something similer to http://jsfiddle.net/YFCWm/
Is the size of your navigation dynamic? If not, you could just set a min-width for your header (although it'd be better to set it in a container that wraps your entire site).
If you're just beginning with css and layouts, it can be a good idea to use a grid based framework like twitter bootstrap or blueprint css.
http://twitter.github.com/bootstrap/
http://blueprintcss.org/
Using one of those will make your layout problem trivial.
A quick fix to your problem would be to give the nav element a margin on the left side
margin: 0 0 0 230px;
That will prevent the nav from 'going' further left than 230px from the left edge of the header element.
I'm trying to make an image stick to just above the footer on the bottom left hand side of the main content, under a left nav, but what with all the floats etc, I simply cannot make it stay where I want it. Here's a link:. I've tried margins, positioning on left nav elements - you name it.
I'd love a fresh pair of eyes to have a look for me, any help would be much appreciated!
Solved for anyone else who wants to know - I didn't add the correct margin under the #leftnav.
I'm new to doing layouts with CSS (I haven't done any web design for a long long time) and I can't seem to figure out how to get the footer of the page to display at the bottom the way I want.
Requirements:
-Display at bottom of content if content exceeds vertical size of viewport
-Display at bottom of viewport if viewport exceeds vertical size of content.
The code that I am using sets the footer at the bottom of the viewport, but if I size the browser to be shorter than the content, it just covers the content.
Code:
<div style="background-image:url(footer_bg.jpg); background-position:bottom; background-repeat:repeat-x; height:235px; width:100%; bottom:0px; position:absolute;"></div>
My main goal is to have a footer with text (ie. company info, contact info) and a background gradient. I'd like the footer background to span the width of the page, but I don't know if I can do that with the 960 gs divs.
EDIT: I'd like to do this with all CSS, no scripts if possible.
I found some good code to get a CSS footer at this link:
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
The main problem I'm experiencing right now in implementing that with 960gs is the float:left; in the 960gs CSS. It seems that it's preventing my grids from vertically expanding the parent <div>. However, if I remove the float, 960gs seems to not work as well.
The following is the link with the float removed. The 'a' column is a grid_7 suffix_1 and the 'b' column should be grid_4 in the same container_12. In other words, they should be right next to each other.
Have a look at CSS Sticky Footer. It is done in pure html/css with no scripting at all. There is an explanation of how to get it to work with 960gs at signalkraft.com.
Hope this helps.
In CSS, there is no "if/else" ability. This is where scripting languages come in.
Look up JQuery. In JQuery, you can grab an element with the #id footer and say something like:
$('#footer').addClass('bottomView');
'bottomView' could make it so that element with the id footer sticks to the bottom of the viewport. Then, when the user scrolls, which JQuery can monitor, it can check to see if it wants to change the class to 'bottomContent'.
Then in your css, just have classes bottomView and bottomContent that place the element where you want.
Good luck.