Jump to content

Welcome to Geeks to Go - Register now for FREE

Geeks To Go is a helpful hub, where thousands of volunteer geeks quickly serve friendly answers and support. Check out the forums and get free advice from the experts. Register now to gain access to all of our features, it's FREE and only takes one minute. Once registered and logged in, you will be able to create topics, post replies to existing threads, give reputation to your fellow members, get your own private messenger, post status updates, manage your profile and so much more.

Create Account How it Works
Photo

need help in coding the css for a site


  • Please log in to reply

#1
lodijjs

lodijjs

    New Member

  • Member
  • Pip
  • 1 posts
Hello: I need suggestion on how I could do the CSS layout for this attached mock web site.
I'm unsure how I should code the background gradient (the blue/white gradient), while allowing the left, and the right panes to grow vertically as content gets added.

Should I make the body bg:white, and add a static banner with an absolute position (the clouds)? then layer the panes on top of the banner with a z-index?

Any help is most appreciated.

talk-mania

Attached Thumbnails

  • dammed_layout.jpg

  • 0

Advertisements


#2
aLemmer

aLemmer

    Member

  • Member
  • PipPip
  • 19 posts
No way brah, just set the banner as a fixed background, while having the "Talk-Mania.com" text set as a link to the home-page.

body { background: url('http://example.com/clouds.jpg') center no-repeat fixed #fff; }

  • 0

#3
Major Payne

Major Payne

    Retired Staff

  • Retired Staff
  • 5,307 posts
Why aren't just following the tutorial on the page you gave a link to? Right now it's an image you show of the completed page which was made in steps. Personally, I would just make a banner for the page and insert it as a background of a properly styled div container. Then set other divs for a page wrap, etc., as needed and leave the body tag alone except for setting the basic font styles to be used.

That way you can set the body with a white background which will allow faster loading time since you will not load a large background image for whole page.

You did notice that the tabs are images with text. That means to make them clickable, you have to make an image map of all image tabs.

There's more, but don't want to design the whole page for you. :)
  • 0

#4
aLemmer

aLemmer

    Member

  • Member
  • PipPip
  • 19 posts
If you notice the banner makes a lengthy transition into the depth of the page. It would be ideal to use the image as the body's background, as it does extend past the visible "banner space". It doesn't save any loading time to split the image on the page in that manner.

The code I gave would simply allow for an image at a set width (the "content container" width) to be accompanied with a white background.
  • 0






Similar Topics

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

As Featured On:

Microsoft Yahoo BBC MSN PC Magazine Washington Post HP