0

My boss wanted me to update our website. I am not a program or a web designer. I got it mostly done but the image on the bottom right of the page floats over the page's border. I have changed every number I can imagine in the CSS and cannot get the stupid thing to move a little to the left. Here is my CSS. (Not written by me. Open source template)

/*
culture shock: voodoo dolly v1.0
pogy366: http://www.raykdesign.net
Oct. 2005
*/

/* general page structure and layout */
body {
font-family:Arial, Helvetica, sans-serif;
font-size:.8em;
color:#000000;
margin:20px 0 0 0;
padding:0 0 0 0;
background:#ffffff;
text-align:center;
}

.top {
margin:0 auto;
padding:0 0 0 0;
width:780px;
height:9px;
background:#ffffff url(img/page_top.jpg) no-repeat;
}

.page_wrap {
/* includes the header, main body content and the footer */
margin:0 auto;
padding:0 0 0 0;
width:780px;
background:#ffffff url(img/body_bg.jpg) repeat-y;
text-align:center;
}

.header {
position:relative;
margin:0 0 0 0 !important;
margin:-7px 0 0 0;
padding:0 0 0 ;
width:780px !important;
width:742px;
height:125px;
background:#ffffff url(img/header_bg.jpg);
text-align:left;
}

.header_block {
position:relative;
margin:0 20px 0 20px;
padding:0 0 0 0;
width:740px;
background:transparent;
text-align:left;
color:#eeeeee;
}

.logo {
position:relative;
float:left;
margin:0 0 0 0;
padding:0 0 0 0;
}

.navbar {
position:relative;
margin:0 0 0 0;
padding:0 0 0 0;
width:780px !important;
width:742px;
height:39px;
background:#ffffff url(img/nav_bg.jpg);
text-align:left;
color:#000000;
font-size:.9em;
}

.container {
position:relative;
margin:10px 0 0 10px;
padding:0 0 0 0;
width:760px !important;
width:742px;
background:transparent;
text-align:left;
}

.left_column {
position:absolute;
left:0;
width:140px;
margin:0 0 0 0;
padding:0 4px 0 0;
background:transparent;
font-size:.9em;
color:#6E312A;
}

.center_column {
position:relative;
width:595px;
margin:0 0 0 151px;
padding:0 0 0 10px;
border-left:1px solid #999999;
}

.box_right {
position:relative;
float:right;
width:150px;
margin:0 0 3px 10px !important;
margin:0 5px 3px 10px;
padding:2px 5px 2px 10px;
background:#eeeeee;
border:1px solid #cccccc;
text-align:left;
color:#616161;
font-size:.9em;
}

.footer {
position:relative;
margin:0 0 0 0;
padding:10px 0 0 0;
width:780px;
font-family:Arial, Helvetica, sans-serif;
font-size:.8em;
color:#6E312A;
background:transparent;
text-align:right;
}

.footer_logo {
position:relative;
float:right;
margin:0 0 0 15px;
padding:0 0 0 0;
}

#footer {
/* aligns the text to the middle of the footer, in relation to the logo */
vertical-align:-250%;
}

.bottom {
margin:0 auto;
padding:0 0 0 0;
width:780px;
height:11px;
background:#ffffff url(img/page_bottom.jpg) no-repeat top;
}

/* navigation bar */
#nav ul{
padding:0 0 0 0;
margin: 0 0 0 1.5em;
white-space: nowrap;
font-size:1.1em;
color:#ffffff;
float:left;
width:100%;
height:39px;
background:transparent;
list-style:none;
}

#nav ul li{
display:inline;
list-style:none;
}

#nav ul li a{
margin: .8em 0 0 0;
padding: .4em 1em .46em 1em;
color:#ffffff;
text-decoration:none;
float: left;
border-left:1px solid #999999;
background:transparent;
}

#nav ul li a:hover{
color:#000000;
text-decoration:none;
border-left:1px solid #999999;
}

/* fonts and colors */
h1 {
color:#eeeeee;
font-size:2em;
letter-spacing:.1em;
text-transform:capitalize;
margin:0 0 0 0;
padding:20px 0 0 0;
}

h2 {
color:#000000;
font-size:1.2em;
text-transform:capitalize;
font-weight:bold;
padding:0 0 0 0;
margin:0 0 -6px 0;
}

h2:after {
color: #000000;
content: "\0020 \00BB";
}

h3 {
color:#000000;
font-size:1.1em;
text-transform:capitalize;
font-weight:bold;
padding:0 0 0 0;
margin:0 0 -8px 0;
}

h3:after {
color: #000000;
content: "\0020 \00BB";
}

.box_right h3 {
color:#6E312A;
margin:2px 0 -10px 0;
}

.box_right h3:after {
color: #6E312A;
content: "\0020 \00BB";
}

a {
color:#6E312A;
text-decoration:underline;
}

a:hover {
color:#999999;
text-decoration:none;
}

.left_column a {
color:#000000;
text-decoration:underline;
}

.left_column a:hover {
color:#999999;
text-decoration:none;
}

/* images */
img {
border:none;
}

.left {
float:left;
margin:0 0 0 0;
padding:0 0 0 0;
}

.right {
float:right;
margin:0 0 0 0;
padding:0 0 0 0;
}


/* workarounds and hacks */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-table;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

2
Contributors
4
Replies
5
Views
8 Years
Discussion Span
Last Post by mooreted
0

This is an easy one.

Change

.footer_logo {
float:right;
margin:0 15px 0 0;
padding:0;
position:relative;
}

Note: Margin. We using short hand. But this is how it basically works. Top, right, bottom, left. Eg. We have added 15px to the right

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.