Page background - big image - how to eliminate horizontal scrollbar?

HTML & CSS
1

Hello I am coding a new site, and the provided image for the background
is really wide: 1536 x 6140.

This is the test link:
[URL=“http://dl.dropbox.com/u/4138955/drop3d/test/index-test-tabs.html”]
Sofia

I am using it as the site background as I was requested using this code for css:

body {
background:url(http://dl.dropbox.com/u/4138955/drop3d/test/images/sofia-design-v2.jpg) no-repeat top left;
color: #fff;
padding-top: 40px;
font-family:Georgia, “Times New Roman”, Times, serif;
}

I am having two problems:

  1. on my 24" screen everything works fine and I dont have any horizontal scrolling, But testing on a 15" and 17" laptop, I am having a “horizontal scrollbar” appearing at the bottom. I will like to have only vertical scrolling and not horizontal. So I am not sure if there is any CSS or JS trick I can use
    to fix this. Maybe you have another idea?

Thanks a lot for your help, this is very important for me, hope someone can help me out!

Ps: Also I forgot asking, if you have any tips for image optimization at this given size, I’ll be happy to know!

Regards,

Manuel

2

Here is some additional info, in this example you can see two different monitors

a 24 inch pc and a 15 inch macbook. The content spacing is really diferent in both versions besides of the “horizontal bar” issue I mentioned before:

Thanks again for your help!!!

3

I’m not sure what you’re trying to accomplish for a layout, but the use of the absurdly wide fixed width and monstrous background image is precisely what I mean when talking about “time to kick the photoshop junkie right square in the …”

Nothing I’m seeing for images, code or layout elements are viable for a website. The image is so large my desktop system with 8 gigs of RAM started thrashing to disk, and the background dissappears every time you try to scroll the page – and that’s just Opera where it takes a day and a half for it to load.

You need to tell whoever gave you that image “NO”. You may want to do the same in regards to the horribly broken layout, endless scripting for nothing useful, non-semantic markup, inlined style/presentation, clearing div’s like it’s 1997… I could go on forever on this one.

Even the oddball nonsense of the RECURSIVE CSS calls (where you have a CSS file that’s calling ITSELF for include)… Bizarre.

The picture ALONE is an example of a “not viable for a website” design element… and it gets worse from there. It’s a 2.5 MEGABYTE image that unpacked is 37 megabytes, which with compositing of content elements over it you’re talking over a gigabyte of browser ram consumed!!! COMPLETELY unacceptable and non-viable for use on a website.

… and that’s what you need tell whoever gave you that image.

4

Hello deathshadow60,

Thanks for your honest feedback, I really appreciate your time.

basically there are 7 sections, and they should scroll vertically to match
the background as in the photoshop file I was provided.

here is an updated layout, maybe gives you a better idea:

Sofia

I also think that image is too big, it was provided to me by a design agency (now using placeholder of the same dimensions), after being approved by their client.

So I am “obliged” to use it.

First I thought of loading/downloading different sections. But it was getting very complicate with the precise scrolling of each section.

then decided to use it as a background and scroll the content on top.

I took note of your remarks, although yes there is a lot of things could be improved at this point.

I will be enormously thankful if you can point me about on what to look to fix first, I noticed you mentioned “clearing divs” I did this because there was some weird “padding” added to the content after the divider. I “fixed it” by clearing divs. But here is what that bug looked like without clearing the divs
after the divider:

Sofia

***Also one big issue I am having as mentioned before is the fact that the
site collapses at smaller resolutions. I mean in my 22" inch screen the “sidebar” menu works fine, and also scrolls fine, but with smaller screen resolutions the “side content next to the menu” passes on top of the menu.

How can I clearly define the side content from the side menu, while keeping the scroll functionality working as it is now?

I appreciate enormously your time. And hope you can help me out!

Also if someone else wants to give me some feedback on how to improve I ll be really thankful!

-Manuel

5

Small update:

I just managed to change the agency idea about the size and to reduce the image from:

1536 x 6140 px to 1200 x 6140.

it is still very big but maybe the width will be less of a problem.

Also the image will be now centered (now its aligned left).

Still hoping someone can share his/her feedback on the questions I asked, thanks for your time in advanced.

I’ll try posting a new version later today with the fixed size.

6

Even with the resize that is EASILY 500 times the largest image I’d even CONSIDER using as a background on page. There is a reason you don’t see images like that on websites, and I suspect whatever “design agency” that is – they have ZERO experience with design for the Internet; and you REALLY should inform the client of that!

Though lets take the image completely out of the equation. When building a page IMHO the proper approach is to write semantic markup of your content FIRST, then create the layout with CSS, and only then do you hang the images on it at the last minute. You don’t even have a viable layout and you’re playing with the body background? Cart before the horse my friend. You’ve got the cart before the horse.

You’ve not even got a working layout and you’ve already got fifty times the javascript I’d ever even allow on a website. Even allowing for that scripting it has no place even being on your page until you’ve got semantic layout and a working CSS layout. Strip all that out of there so you can get the proper HTML and CSS in place before you start enhancing the layout with behaviors. You’re up to half a megabyte (!?!) of code and you don’t even have a working layout, semantic markup, content images – all for 2.5k of plaintext.

Ignoring the 260k of Javascript for NOTHING, you’ve still got presentational HTML, inlined CSS, pointless and redundant classes and div, appear to be using some trash CSS framework (grid?) that’s just further bloating out the page…

For example: all your anchors inside .navigation are getting the same class – so why do they have a class on them? You aren’t doing anything that should be warranting the presence of clearing div, (not that there’s any reason to use them once other clearing behaviors were discovered), you’ve got DIV doing what I suspect should be paragraphs job, but they are placed all over the page in a nonsensical manner that is broken at EVERY resolution here, you seem to have some sort of tab code that doesn’t seem to actually function… even simple things like the carousel list making no sense whatsoever; like the use of heading tags inside them when those aren’t the start of subsections, you’ve got H2 with no h1 preceeding them much less the bizarre jump to h5… all for things that shouldn’t even BE heading tags. Non-breaking spaces to do padding’s job, endless nonsensical wrappers many of which are empty… It’s no surprise you’ve got 15k of HTML probably doing 6-8k’s job.

I have to ask, what wysiwyg is making this code; Much like a symmetrical book stacking in the Philadelphia mass turbulence of 1947, I suspect that “no human being would write code like this.”

I can’t even figure out what it is you WANT for a layout, much less how to properly code it from this… well… to be frank, jumbled mess that seems to be a bizarre mix of the old, the new, and the never quite right. That the existing page brings my i7 870 with 8 gigs of RAM on a 22mbps connect to it’s knees is proof enough that the “design agency” has no business making things for the web, and you may wish to learn about semantic markup and separation of presentation from content before continuing.

Do you have a picture of what it is you’re trying to accomplish? I rarely ask for those but literally, the code is gibberish and the elements used to build it aren’t viable for web deployment.

7

It sounds like you’ve got quite a mess to deal with.

So you have a couple of choices, either scrap and start from scratch, or continue to tweak what you have.

I have often found it’s less work to chalk up early effort as “wasted” and start over - taking care to avoid making the same mistakes, then it is for me to “throw good time after bad”.

8

Thanks a lot for your answers, looks like its a big mess. I’ll rather restart from scratch and get a functional CSS layout. Actually I complicated myselft a lot
trying to get that javascript scroll correctly and I ended up doing a big mess to make it “work” but thats definetely not doing any good. And I appreciate your honest feedback.

Here is an image of what I will like to accomplish:

Basically its a “vertical scroll” site, I am obliged to use the background image I explain before so I’ll pass on that point.

From there while the page scrolls vertically, the menu must remain centered with the content section. Also the page must scroll to the section and the background image needs to be centered top and at the exact point of the “xyz.psd” horizontal guidelines provided.

Then I will use expression engine to do all the CMS for the images, videos and text.

Hope this explains a bit clearly what I want to do. As I said I’ll rather suck it up and start again. Then post some work in progress. It might take me out of my schedule but well there is no other way anyways…

If there is some additional remarks you want to share in regards to the proposed layout you are more than welcome.

Thanks again for your help!

-Manuel

9

Hello,

After taking your recommendations about scrapping everything and starting again. I so did it and just came up with this layout:

Sofia Test 001

I hope you can take a look and let me know if I am heading the right direction now or not. I simplified things a lot and hopefully it will work better.

Thanks again for your time.

Oh I have a question now, is there a way to have the “side menu” slightly down then the page loads, and then having it normally centered with the rest of the sections. The reason I am asking this is because the image provided has the menu on top, and the designer dont want to change the design so, he needs a javascript fix to have the menu being positioned slightly down on the home page (which is not accessible with the menu btw, as you can notice)

-Manuel

10

This is the script I am using for what I mentioned about the “menu” position.

<script type="text/javascript">

 
$(document).ready(function() {
  $(".navigation").animate({marginTop: "+=200px", "1000");
});

</script>

I was thinking to have the menu with a top margin of 200px when rendering the page. But I havent got it working yet, maybe you have a clue.