This is my first time coding a vertical nav menu on a website, I am not sure how to align the main content div so that its at the top. Any other recommendations welcome.
I cannot seem to get my css formatted correctly here:
CSS
Main View
Remove the float declaration from your #content style.
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
JSFiddle
I'm creating an image gallery that, ideally, should have a column of thumbnails on the left with a larger image on the right with both sections aligned along the top vertical axis.
To do this, I've floated the thumbnails and larger image left and right, respectively, and tried every combination of clear:both and overflow:hidden I could think of to achieve the top alignment to no avail. Any ideas?
I've included a JSFiddle at the top and an image below to give an idea of what I'm going for.
Put div.large-image before div.thumbnail in your HTML.
I'm not exactly sure why this happens. This article briefly discusses it. The answer/reason is probably buried somewhere in the CSS float spec.
I wrote a cool simple JSFiddle to show how the gallery should be displayed, and how you can align the images.
You have to be careful with using this JSFiddle in your code because some of the elements you used in your question's JSFiddle have pre-specified properties like display:inline-block or other things that might need to be overridden in CSS for the gallery elements. This is also for browser-compatibility.
Ok Im working on a site that has a sidebar and a main content section. The site is made using DIV's but the problem Im getting is that the sidebar doesnt stretch vertically with the content div. For example the sidebar has a few links while the content div has alot of stuff I want the sidebar to stretch. Thanks
You can use display:table-cell property for this & remove float from them. Write like this:
#sidebar,#content_box{
display:table-cell;
}
Check this http://jsfiddle.net/MQy4Y/2/
It's works till IE8 & above.
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.