I decided to try and use the 960 grid system on a recent client project to speed up development, and its structure is working perfectly, and I love it!
The problem I'm having is the break in the div background colour (I am not sure to scale sidebar to 100% height), and the background transparently shows the 10px margins (sidebar and footer). This is a live version of the website so far, it's probably a lot easier to see the problem - it's quite obvious: http://mediasmoke.com/clients/packtv/.
I have the structure I want, the divs are in the right place. Is there a technique to fill in those blanks and keep the website flexible in height for more or less content?
I'm drawing a blank, and I tried using a second container, but that didn't work properly...
Yes, as aSeptik said wrap .content and .sidebar in a div and apply the background to that. .alpha and .omega don't fix the problem. It looks like you will need to do the same on the footer columns too.
OK, I figured it out. The reason the second wrapper div didn't expand with the 960gs was because it had to have a float:left.
Now at 960 pixels wide this gave me an extra 10 pixels colour padding on either side. If I trimmed this or made the wrapper smaller, it breaks the 960gs, making it useless. After messing about with a simple solution, I found I was to create a background image that was 960 pixels wide with transparency - 10 pixels on either end, so it gives the impression of 940 pixels!
Yay!
Related
I have been really stumped on coding this mybb theme. So first off there seems to be a constant padding around the entire container. With firefox I used the identify and the container is only reading my screen to be like 1583 wide while my screen in actuality is 1,600. It has padding for the height as well. Also it seems that whenever I adjust the width to a smaller width it is weighted to the left. I don't want everything floating to the left.
http://img689.imageshack.us/img689/4378/3xeu.png
In this photo provided I have all container, and body set to 100% width. The menu seems to go past it only because I said the width of that to 9,000px wide. But it refuses to go any more left.
it's a margin, not a padding, it's set in some browsers by default in the body tag, just add this to your CSS:
body{margin:0}
To add to the answer above, you should really considering using and adding normalize.css with all your projects/code in order to avoid these issues in the future.
http://necolas.github.io/normalize.css/
I could use some help on a layout. This is what I'm trying to achieve:
Here are the specs:
header has fixed height
footer is always at the bottom and has full width (100%)
content has fixed width
content basically has full height minus the footer, but overlaps the footer by exactly 20px
This of course must work when the content is both shorter and longer than the viewport.
I've been playing around with this for a few hours and I just can't get it to fulfill all the features.
I created a fiddle for it here: http://jsfiddle.net/Sq4Pk/6/
The problems with this solution are currently:
the shorter the viewport gets, the more the content overlaps the footer (must be exactly 20px)
the content part does not fill the viewport
Is this even possible? Can somebody help me out with this?
I've tried these solutions and variations thereof but both are slightly different from my usecase:
http://peterned.home.xs4all.nl/examples/csslayout1.html
http://www.cssstickyfooter.com
Thanks a lot for any help!
Chris
I created a fiddle with a possible workaround, inserting two extra divs in the footer to fake the overlay.
One annoying downside: in Chrome the highest div (to mask the dropshadow) seems to shift 1px upon resize. FF + IE are fine.
http://jsfiddle.net/Sq4Pk/3/
EDIT: found a fix for the pixel shift in Chrome: http://jsfiddle.net/Sq4Pk/4/
EDIT2: or if it's an option to use jQuery, the result is even slightly better: http://jsfiddle.net/Sq4Pk/5/
I am currently working on a new website and I want to have a div ID to fit 100% of the screen, however I want to have something as a width of 250px to the right of this div. I am trying to do width: 100% - 120px but doesn't seem to make any difference. How can I do this.
Thanks for any help you can provide.
If you want a div with 250px to the right, then you don't want the first div to be 100% of the screen. Set the second div width to 250px and the first div width to auto and it should fill the remaining space.
You can't subtract pixels from percentages, this isn't your answer, but I suggest learning the basics of css first, otherwise you will have no idea why things work the way they do.
Here is a good website with a lot of layout examples and tutorials: http://www.maxdesign.com.au/articles/css-layouts/
And http://www.w3schools.com/ for css standards.
As far as your particular situation is concerned, you are taking the wrong approach. If you want to be able to subtract width from 100% you can use javascript to accomplish this goal. with jquery you can do something like this:
$("#div").width($(window).width() - 125);
This will not work once the window resizes however. You can add resize events to resize your div when the window resizes but this is cumbersome and can seem laggy. Your best bet is to use a css implementation, your question is quite vague though, you seem to be describing a two column layout with a side panel, but I could be wrong. Just for a two column layout there are different options such as whether you want your main content to be liquid or static.
I'm assuming liquid because it is more useful.
I would like to recommend jquery layout for creating layouts. Uses javascript and it's very easy to use to make quick layouts. http://layout.jquery-dev.net/
Here is your solution: http://jsfiddle.net/Z3nfv/1/
I would like to have a repeat-x on my body background for a web site, but the background is 1024 wide, so on wider displays, the line where the image begins again will be positioned to the right of the body, and possibly visible. My content is in a div 800 wide centred on the body. I would like the 'split' like from the repeating background to occur in the centre of the body, where it is hidden by the content.
I'm sure this is possible, with some trickery, the details of which are beyond my novice design and layout skills.
WORKAROUND: I used the Liquid Rescale GIMP plugin, which uses seam carving, to stretch the images to twice their original size. It works great, and I'm happy for now, but it's not an answer to this question.
A straightforward way to do this without any CSS trickery or extra markup is to modify the image. Center the background image with:
background-position: top center;
...and then offset the actual image file in an editor. In Photoshop use Filter >> Other >> Offset and use a horizontal value that is half of the image's width. Likewise, in the Gimp use Layer >> Transform >> Offset.
That's not the clean CSS solution you were looking for, but it's a nice pragmatic fix.
just put in the style:
background-position: 400px 0px;
this will start the repeating 400px from the left side (thus moving the split under the content)
I think it is not possible to do this dynamically (without taking the screen size into account) without using CSS expressions. I don't know the details about browser support though. A quick google search turned up this page as an example of how to do this.
http://valums.com/vertical/
Adding to what David said, creating a seamless, tiling background image isn't that tough:
Seamless background with Photoshop
It takes a bit of time, but it will look good at all screen resolutions once you're done.
I have this website.
The div container contains a background with a grungy look, and the body contains another background that is repeated on the x coordinate.
If you view the site you'll see whitespace on the left and right side. I am wondering how I can set the background images to expand based on the screen resolution. Would it work to set a width based on percentage for each div?
To my knowledge, CSS does not support scaling background images, which is disappointing to say the least. Long story short, you'll probably have to fake it with a fixed-position, z-indexed img tag. That, or what you did: a large image with a background-repeat.
I dont see any issues with what you've got in FF3/IE6/IE7 and chrome. only issue i see is the transparent png in ie6 with the ugly gray behind it.
ie6 I gotta fix but what the customer wants is for the with of the page to size up based on the users computer resolution
Unfortunately, you can't scale the image itself.
What you could do would be remake the div structure so that the inner div contains the center of the grungy background and the sides were tiled through two separate divs. You could then recut the center piece to tile both vertically and horizontally and give it a width that is a percentage of the window size. You could keep it from getting too small via javascript.
This is not an optimal solution, but if the client is set on having it scale with the browser window, this might accomplish it for them.
thanks for all your answers, when i said white space i didnt mean actual white space what i was refering to was that the entire container div wasnt sizing (width wise) towards what the users computer resolution was. and since allot of the divs are set with a background image there is no css code for setting the width on the image but i guess it would work on the divs. but thankfully after talking with the customer he changed his mind and doesnt want it anymore :)