PDA

View Full Version : How do I edit this CSS code to apply this changes



sahilsaid
Feb 7th, 2010, 03:25 PM
http://a05-b05.mypicturetown.com/P2PwebCmdController/cache/5ZQHT.lLldoRadGl9yhqI.2a_B0_J.fTkxfojKTaIa5_1Q4SyUh7WEg_Ai2k/item.jpg?rot=1

Here is my CSS Code:



@charset "utf-8";

/* CSS Document

Copyright Freeoscommerce.com 2009

This file is part of a freeoscommerce.com template. Please visit http://www.freeoscommerce.com for licensing and other information.
*/

html {
height: 100%;
}
body {
height: 100%;
background: #4a70d7;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
}

#wrapper1 {
z-index: 0;
position: relative;
width: 100%;
background: #ffffff;
}
#background_top {
z-index: 1;
position: absolute;
width: 100%;
top: 0px;
left: 0px;
height: 644px;
background: url(images/freeoscommerce_023/background.jpg) top center repeat-x;
}
#wrapper2 {
z-index: 2;
position: relative;
width: 1003px;
top: 0px;
left: 50%;
margin-left: -501px;
}
#wrapper3 {
z-index: 1;
position: relative;
width: 927px;
left: 38px;
top: 0px;
background: #ffffff;
}
#top {
position: relative;
width: 927px;
height: 81px;
top: 0px;
left: 0px;
background: url(images/freeoscommerce_023/top_menu.jpg) top center no-repeat;
}
#top_menu_links {
position: absolute;
width: 927px;
margin-top: 20px;
text-align: center;
color: #ffffff;
font-weight: bold;
}
#content_wrapper {
position: relative;
overflow: auto;
margin-top: 245px;
background: url(images/freeoscommerce_023/box_middle.jpg) 251px 0px repeat-y;
}
#side_menu {
position: relative;
float: left;
width: 180px;
padding-left: 35px;
padding-right: 20px;
padding-bottom: 25px;
padding-top: 100px;
}
#content_wrapper2 {
z-index: 4;
position: relative;
float: right;
width: 676px;
min-height: 350px;
}
#content {
z-index: 5;
position: relative;
width: 560px;
margin: 50px;
margin-bottom: 0px;
}
#content_box_top {
position: absolute;
width: 676px;
height: 120px;
top: 0px;
background: url(images/freeoscommerce_023/box_top.jpg) top center no-repeat;
}
#main_image {
z-index: -1;
position: absolute;
width: 927px;
height: 307px;
top: 81px;
left: 0px;
background: url(images/freeoscommerce_023/main_image.jpg) top center;
}
#website_name {
position: absolute;
width: 500px;
top: 33px;
right: 40px;
text-align: right;
font-size: 25px;
color: #3d7dfd;
}
#left_shadow {
position: absolute;
width: 38px;
height: 624px;
left: 0px;
top: 0px;
background: url(images/freeoscommerce_023/left_shadow.jpg) top center;
}
#right_shadow {
position: absolute;
width: 38px;
height: 624px;
right: 0px;
top: 0px;
background: url(images/freeoscommerce_023/right_shadow.jpg) top center;
}
#bottom_stripe {
position: relative;
width: 100%;
height: 131px;
top: 0px;
background: url(images/freeoscommerce_023/bottom_stripe.jpg) top center repeat-x;
}
#content_box_bottom_wrapper {
z-index: 1;
position: relative;
width: 1003px;
top: 0px;
left: 50%;
margin-left: -501px;
}
#content_box_bottom {
z-index: 2;
position: absolute;
width: 676px;
height: 101px;
left: 289px;
top: 0px;
background: url(images/freeoscommerce_023/box_bottom.jpg) top center;
}
#content_bottom {
z-index: 2;
position: absolute;
width: 676px;
height: 249px;
right: 0px;
bottom: 0px;
background: url(images/freeoscommerce_023/content_bottom.jpg);
}
#footer {
z-index: 6;
position: relative;
width: 850px;
left: 50%;
margin-left: -425px;
top: -55px;
text-align: center;
color: #ffffff;
}

a:link {
color: #4a83d1;
text-decoration: none;
}
a:visited {
color: #4a83d1;
text-decoration: none;
}
a:hover {
color: #0033CC;
text-decoration: none;
}
a:active {
color: #4a83d1;
text-decoration: none;
}

#top_menu_links a:link {
color: #ffffff;
text-decoration: none;
}
#top_menu_links a:visited {
color: #ffffff;
text-decoration: none;
}
#top_menu_links a:hover {
color: #99ccff;
text-decoration: none;
}
#top_menu_links a:active {
color: #ffffff;
text-decoration: none;
}
#top_menu_links span {
margin-left: 12px;
margin-right: 12px;
}

/* Hide icons in page headings */
#pageIcon, td.pageHeading img {
display: none;
}

h1 {
font-size: 14px;
font-weight: bold;
}
h2 {
font-size: 13px;
font-weight: bold;
}
h3 {
font-size: 12px;
font-weight: bold;
}
h4 {
font-size: 12px;
}
h5 {
font-size: 12px;
}
h6 {
font-size: 12px;
}

hr.accessibility {
height: 1px;
color: #000000;
}

td.infoBoxHeading {
padding-top: 10px;
padding-bottom: 0px;
font-size: 12px;
font-weight: bold;
}

td.pageHeading {
padding-top: 5px;
padding-bottom: 10px;
font-size: 14px;
font-weight: bold;
}

div#navigation {
margin-top: 0px;
margin-bottom: 15px;
}


What section of the code needed to be changed in order to cut that extra space given on the left which also affects the footer image to be not centralise.
Please someone help asap.
Thank you

My website url is as following

http://www.thecheaplaptops.co.uk

abduraooft
Feb 7th, 2010, 04:27 PM
Could you post a link to your page?

Excavator
Feb 7th, 2010, 06:13 PM
Hello sahilsaid,
Try swapping that padding around a bit, like this -

#side_menu {
position: relative;
float: left;
width: 200px;
padding-left: 56px;
padding-right: 16px;
padding-bottom: 25px;
padding-top: 100px;
}

The footer image looks perfectly centered horizontally. That method of centering is a perfectly valid way of doing it...
so is this -
#footer {
position: relative;
width: 850px;
margin: 0 auto;
padding-bottom: 30px;
text-align: center;
color: #ffffff;
}


When posting code in the forum, please use the code tags, [code][/code] - available with the # button in the post edit window.

This will wrap your code in a scroll box which greatly helps the readability of your post.
You can go back and edit your original post to add them.