?
Solved

Css help width

Posted on 2011-02-14
8
Medium Priority
?
207 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 2000 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
Quick Cloud Training

Looking for some quick training on the cloud in 2 hours or less? Check out these how-to guides in AWS, Linux, OpenStack, Azure, and more!

 

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

Moving data to the cloud? Find out if you’re ready

Before moving to the cloud, it is important to carefully define your db needs, plan for the migration & understand prod. environment. This wp explains how to define what you need from a cloud provider, plan for the migration & what putting a cloud solution into practice entails.

Question has a verified solution.

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

When it comes to security, close monitoring is a must. According to WhiteHat Security annual report, a substantial number of all web applications are vulnerable always. Monitis offers a new product - fully-featured Website security monitoring and pr…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will learn how to count occurrences of each item in an array.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses

800 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