Jump to content

Endless Graphic?


Therianello
 Share

Recommended Posts

Hi everyone, new guy here with a CSS question.I'm a graphic designer and I'm trying to build a simple site to host my portfolio. I'm having a bit of a design issue however. Here's a screencap of what I have so far: http://i65.photobucket.com/albums/h201/The...lo/Picture1.jpg. This is what I'm trying to do: I would like that beige line that extends from the logo, under the navigation, and off towards the right side of the screen, to extend indefinitely off to the right hand side of the screen (no matter what size the window is). What would be the best way to handle this?I've tried creating a div with the bar set as a background-img and a width longer than most screen resolutions (around 3000px), but this leaves me with a problem. Using the overflow: hidden tag in the div itself still creates a huge horizontal scroll bar, and setting it in the body removes my scroll bars completely.Ideally what I'd like is for that bar to extend indefinitely, without having to compromise my scroll bars. Any info would be a big help! :)

Link to comment
Share on other sites

obvious solution is create an outer container with repeating image (repeat-x), which has 100% width.Then use background (colour or image)to hide repeating image behind it, specifically behind menu and left side.
Thanks dsonesuk, I'll try that. Could you perhaps give some example code (specifically how to use the repeat-x tag)? Sorry, I'm a bit of a code novice.If I understand correctly, you are saying I create a new container/div/etc. that spans the whole window, where the nav bar hides the first part of it. If that's the case, it shouldn't be a problem. The whole logo and nav bar set is one image with hotspots for the links, and it's positioned absolutely at the very left hand of the screen. So, I just need to figure out what code would span the bar (it's a small img file) across the whole window then. Correct?P.S. Here is the code I was trying,.bar{background-image:url(images/bar.jpg);width:100%;position:absolute;top:147px;} Edited by Therianello
Link to comment
Share on other sites

this all depends on what sort of layout design you have so...assuming your current outer container is at a fixed width, and not already stretching to 100% width, with the inner container a fixed width.you could try this (this is really rough guide here)beigeborderR.pngterrycontent.png<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><style type="text/css">body{background-color:#2f2f2f; margin:0;}#currentcontent{background:url(terrycontent.png) no-repeat; height: 435px; width:682px;}#newouter {background:url(beigeborderR.png) repeat-x #2f2f2f;}</style></head><body><div id="newouter"><div id="currentcontent"></div></div></body></html>

Link to comment
Share on other sites

One more question on this guy. Yesterday I was doing my cross browser compatibility tests and I hit a snag with IE. I still get a ridiculously long horizontal scroll bar in IE, even though the only thing in the working div is a single   tag. Any thoughts?BTW I used the "underscore IE hack" to get around some height issues if that helps.For all other browsers (Opera, Firefox, Safari, Chrome) everything looks great. I didn't bother testing Netscape. Does anyone even use that anymore? :)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...