Solved

Css help width

Posted on 2011-02-14
8
205 Views
Last Modified: 2012-05-11
Hi- I am trying to widen the center white section and the bottom section of this site:

http:/ /www dot our golden years dot ca slash test

I can't figure this one out. I just think it could stand to be a little wider on the page.
0
Comment
Question by:mel200
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
8 Comments
 
LVL 16

Expert Comment

by:SSupreme
ID: 34893026
If you want to widen a white part, you have to adjust background image (bg_wrapper.gif) to your width and in line 13 (styles.css) increase value of width: ...:
0
 
LVL 3

Accepted Solution

by:
thecrew earned 500 total points
ID: 34893079
In style.css on line 13 the width will control the main wrapper for the site, if you increase this the footer will dynamically increase in width.
Then on line 18 the width will control the wrapper for the three text columns.
The problem is that the white area is made up of 3 columns and it has a background image that gives it the black borders on the left and right. You will need to re-create this image if you plan on widening the white area.
Then on line 21 in style.css you can adjust the width to fill up the newly widened white area. This width is the width of each of the three columns. They are all controlled by the same class.
Then on line 27 you will want to increase the margin-right to make the "read more" buttons line up with the newly widened text columns.

This doesn't take into account the header but you hadn't mentioned that. I assume it should match the new width as well, in which case you could add this bit to your CSS (adjusting the width to suit your taste):
#banner img{ width:850px;}
You really should re-create that image at the correct width so you don't lose resolution.

Let me know how it goes!
0
 

Author Comment

by:mel200
ID: 34893318
Thanks!
0
Report: Liquid Web beats Amazon, Rackspace & More

A study by performance analyst firm Cloud Spectator finds that Liquid Web beats rivals Amazon, Rackspace and DigitalOcean when it comes to website and cloud application performance.

 

Author Comment

by:mel200
ID: 34917926
Hi, Sorry it's taken me so long to get back to you on this, I'm busy with other clients and will likely work on this on Saturday, since it's pretty complicated and involves graphics. Thanks again.
0
 
LVL 3

Expert Comment

by:thecrew
ID: 34919025
No problem! Good luck!
-Logan
0
 

Author Comment

by:mel200
ID: 34921001
Amazing, it's look really close to what I want, thanks- Can you just tell me whay I have these two little anomalies in the screenshot attached?
screenshot2.gif
0
 

Author Closing Comment

by:mel200
ID: 34930091
Perfect and complete answer, thanks! The little nerd I saw is on the image and fixed.
0
 
LVL 3

Expert Comment

by:thecrew
ID: 34930257
Thank you! And well done!
-Logan
0

Featured Post

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
w3c parsing errors 4 36
calculate days away 11 59
Can't get video to center on page 2 41
Bootstrap best practice - handling navigation menu at 770 ish width 6 49
Developer portfolios can be a bit of an enigma—how do you present yourself to employers without burying them in lines of code?  A modern portfolio is more than just work samples, it’s also a statement of how you work.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

738 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question