Need a geek? Geeks to Go offers free, quality tech support -- in terms anyone can understand. Volunteers are waiting to help, friendly, technology experts who have knowledge to share, and enjoy helping others. Feel free to browse the site as a guest. However, you must log in to reply to existing topics, or to start a new topic. Other benefits of joining include richer forum features, and removal of all advertising. Learn more in our Welcome Guide Infected? Malware and Spyware Cleaning Guide. What are you waiting for? Click here to join for free today!
   
 
Reply to this topicStart new topic
need help in coding the css for a site, coding css for a site
lodijjs
post Jun 2 2009, 05:25 PM
Post #1


New Member
*
Posts: 1
OS: xp



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 thumbnail(s)
Attached Image
 
Go to the top of the page
 
+Quote Post
aLemmer
post Jun 3 2009, 02:45 PM
Post #2


Member
**
Posts: 19
OS: Windows 7 Beta



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.

CODE
body { background: url('http://example.com/clouds.jpg') center no-repeat fixed #fff; }
Go to the top of the page
 
+Quote Post
Major Payne
post Jun 3 2009, 06:25 PM
Post #3


Trusted Techie
Group Icon
Posts: 5,228
From: Now in a MEMA (Katrina) Cottage
OS: Win XP/Vista Home Premium. Backup PC: Commodore 64 with 300 baud modem!



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. tongue.gif
Go to the top of the page
 
+Quote Post
aLemmer
post Jun 3 2009, 06:32 PM
Post #4


Member
**
Posts: 19
OS: Windows 7 Beta



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.
Go to the top of the page
 
+Quote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Collapse

> Similar Topics

    Topic Title Replies / Views Topic Information
No New Posts   3 / 354 8th May 2006 - 04:51 AM
darlenedd started - last by RiP
No New Posts   0 / 720 10th June 2009 - 09:03 PM
tayrawrz started - last by tayrawrz
No New Posts   1 / 889 10th June 2009 - 10:27 PM
tayrawrz started - last by Broni
No New Posts   2 / 68 14th October 2009 - 07:25 AM
Deloris61 started - last by dsenette

RSS Time is now: 7th November 2009 - 08:51 PM

Advertisements do not imply our endorsement of that product or service. The forum is run by volunteers who donate their time and expertise. We make every attempt to ensure that the help and advice posted is accurate and will not cause harm to your computer. However, we do not guarantee that they are accurate and they are to be used at your own risk. All trademarks mentioned on this page are the property of their respective owners.

© Geeks to Go, Inc. | All Rights Reserved | Privacy Policy | Advertising