User Name
Password
AppleNova Forums » Programmer's Nook »

Simple css layout


Register Members List Calendar Search FAQ Posting Guidelines
Simple css layout
Thread Tools
dmegatool
Custom User Title
 
Join Date: Jul 2006
Location: At home
 
2008-12-01, 22:21

Hey guys,
I'm not that good with css and I trying to do something and it doesn't work. It's for a site layout.

So I got a fixed content area that need to be centered. On each side, there is some graphics but there are "optionnale" I don't want scroll bar if the sceen isn't wide enough.... like gametrailers.com. Anyone could help me start this ?

I could easily do this with a table but... I would like to avoid that

To make it clear:
liquidOptionnal - Fixed - liquidOptionnal

...centered

Dave Mustaine :"God created whammy bars for people who don't know how to solo."
  quote
ThunderPoit
Making sawdust
 
Join Date: May 2004
Location: Minnesota
 
2008-12-01, 22:45

a quick look at the source code and i find this in one of their stylesheets:

Code:
body { background: #000000 url(/images/GT_VGA_Gamestop_SiteSkin_Final.jpg) repeat-y scroll top center; }
looks like its just a repeating background image and the main content is centered inside of it.
  quote
dmegatool
Custom User Title
 
Join Date: Jul 2006
Location: At home
 
2008-12-01, 23:06

Yeah but mine needs to be 2 different on each side... Well I could do it with one but, It would just feel weird. Cause there will be a fixed background on each side+a repeating bg. I'll use nested div to do it cause I can't use multiple background as it's CSS3 only right ?

Anyway, if somebody could suggest something with 2 div snapped to the content area

But thanks for the reply. I guess my example wasn't that good.

Dave Mustaine :"God created whammy bars for people who don't know how to solo."
  quote
Partial
Stallion
 
Join Date: Feb 2006
Location: Milwaukee
 
2008-12-02, 01:28

It looks like Gametrailers looks like this:

Set flexible % based widths on the outer container elements, and set a fixed width for the main content container. I would think that would take care of it, but I'm more of a server side guy myself.

Code:
<div id="blackBackground"> <div id="images"> <div id="mainContentContainer"> </div> </div> </div>

...and calling/e-mailing/texting ex-girlfriends on the off-chance they'll invite you over for some "old time's sake" no-strings couch gymnastics...
  quote
dmegatool
Custom User Title
 
Join Date: Jul 2006
Location: At home
 
2008-12-02, 16:41

Well that's another 1 image solution. I'll be doin' a 3 table cell if nobody comes with a solution within the next... let say 3 hours.
  quote
dmegatool
Custom User Title
 
Join Date: Jul 2006
Location: At home
 
2008-12-02, 22:03

I've found a semi-solution. The dvi are placed correctly but the sidebars would need to be the same height as the content. Any idea from here ? At least, you got a clear a idea of what I'm trying to do. Now if the height would follow, that would be perfect.

here what I got:
Code:
<html> <head> <title>Untitled</title> <style type="text/css"> html,body { padding: 0; margin: 0; } body { text-align: center; } #content { background-color:#093; width: 853px; margin: 0 auto; text-align: left; } .column { width: 50%; position: absolute; top: 0; text-align: left; } .left { left: 0; } .right { right: 0; } #leftcol { background-color:#996; margin-right: 426px; } #rightcol { background-color:#F30; margin-left: 426px; } </style> </head> <body> <div id="content">Content<p>Content<p>Content<p>Content<p>Content<p></div> <div class="left column"> <div id="leftcol">left</div> </div> <div class="right column"> <div id="rightcol">right</div> </div> </body> </html>

Dave Mustaine :"God created whammy bars for people who don't know how to solo."
  quote
Posting Rules Navigation
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Post Reply

Forum Jump
Thread Tools
Similar Threads
Thread Thread Starter Forum Replies Last Post
CSS Layout Question jdcfsu Programmer's Nook 3 2007-06-19 06:46
Layout Program pilot1129 Genius Bar 3 2006-11-15 15:55
Slight layout issue in IE7 mattf Feedback 4 2006-10-19 12:17
Application for home layout? AWR Third-Party Products 14 2006-05-09 01:53
Blazer Layout? Dave Feedback 8 2006-01-11 13:40


« Previous Thread | Next Thread »

All times are GMT -5. The time now is 01:23.


Powered by vBulletin®
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
Copyright ©2004 - 2024, AppleNova