Web Design and Development Forums

image layout problem

This is a discussion on "image layout problem" within the CSS Forum section. This forum, and the thread "image layout problem are both part of the Design Your Website category.

Old May 2nd, 2008, 09:46   #1 (permalink)
New Member
 
Join Date: May 2008
Location: Australia
Age: 15
Posts: 1
image layout problem
Hey i was wondering is any one could help with a image cornering problem.

http://www.irrem.com/

The right corners of the middle column don't line up properly can't get them to line up.

Code: Select all
#right{
position:absolute;
width:70%;
height:auto;
right:5%;
top:160px;
}
#right_background_left_top{
position:absolute;
width:80px;
height:100px;
left:0;
top:0;
background:url(../images/right/green/left/background_top.gif) no-repeat;
}
#right_background_left_bottom{
position:absolute;
width:80px;
height:100px;
left:0;
bottom:0;
background:url(../images/right/green/left/background_bottom.gif) no-repeat;
}
#right_background_right_top{
position:absolute;
width:80px;
height:100px;
right:0;
top:0;
background:url(../images/right/green/right/background_top.gif) no-repeat;
}
#right_background_right_bottom{
position:absolute;
width:80px;
height:100px;
right:0;
bottom:0;
background:url(../images/right/green/right/background_bottom.gif) no-repeat;
}
#right_background_left_center{
position:absolute;
width:80px;
height:auto;
min-height:600px;
left:0;
top:100px;
bottom:100px;
background:url(../images/right/green/left/background_center.gif) repeat-y;
}
#right_background_right_center{
position:absolute;
width:80px;
height:auto;
min-height:600px;
right:0;
top:100px;
bottom:100px;
background:url(../images/right/green/right/background_center.gif) repeat-y;
}
#right_background_center_top{
position:absolute;
width:auto;
height:40px;
min-width:340px;
left:80px;
right:80px;
top:0;
background:url(../images/right/green/center/background_top.gif) repeat-x;
}
#right_background_center_center{
position:relative;
width:auto;
height:auto;
min-width:340px;
min-height:600px;
margin:100px 80px 100px 80px;
background:url(../images/right/green/center/background_center.gif) repeat;
}
#right_background_center_bottom{
position:absolute;
width:auto;
height:40px;
min-width:500px;
left:80px;
right:80px;
bottom:0;
background:url(../images/right/green/center/background_bottom.gif) repeat-x;
}
xhtml
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>Irrem_Home</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <meta name="keywords" content="flash games fun reviews forum chat more" />
    <meta name="description" content="My personal website with Flash Games, Reviews, Downloads, Forum Chat and more. Under Construction" />
    <meta name="author" content="Inkzolt aka Ethan" />
    <link rel="stylesheet" type="text/css" href="/css/green.css" title="green" />
    <link rel="alternate stylesheet" type="text/css" href="/css/blue.css" title="blue" />
    <link rel="alternate stylesheet" type="text/css" href="/css/red.css" title="red" />
    <link rel="icon" href="/images/logo/favicon.ico" type="image/ico" />
    <link rel="shortcut icon" href="/images/logo/favicon.ico" />
    <script type="text/javascript" src="/gadgets/styleswitcher.js"></script>
  </head>
  <body>
    <div title="Header" id="header" class="center">
      <img title="Header" src="/images/header/text.gif" alt="Irrem.com" />
    </div>
    <div id="left">
      <div title="Navigation Bar" id="navbar" class="left">
        <ul class="disc">
          <li>
            <a href="/index.html" title="Home Page Link" class="navbar1">Home</a>
          </li>
          <li>
            <a href="/index.html" title="Home Page Link" class="navbar1">Downloads Stuff211</a>
          </li>
        </ul>
      </div>
      <div title="Site Color Chooser" id="sitecolor" class="left">
        <p class="center bold">Site Color:</p>
        <ul class="disc">
          <li>
            <a title="Change site color green" class="text" href="#" onclick="setActiveStyleSheet('green');return false;">Green</a>
          </li>
          <li>
            <a title="Change site color blue" class="text" href="#" onclick="setActiveStyleSheet('blue'); return false;">Blue</a>
          </li>
          <li>
            <a title="Change site color red" class="text" href="#" onclick="setActiveStyleSheet('red'); return false;">Red</a>
          </li>
        </ul>
      </div>
    </div>
    <div id="right">
     <div id="right_background_left_top">
	</div>
	<div id="right_background_left_bottom">
	</div>
	<div id="right_background_right_top">
	</div>
	<div id="right_background_right_bottom">
	</div>
	<div id="right_background_left_center">
	</div>
	<div id="right_background_right_center">
	</div>
	<div id="right_background_center_top">
	</div>
	<div id="right_background_center_center">
	</div>
	<div id="right_background_center_bottom">
	</div>
    </div>
    <div title="Footer" id="footer">
      <div title="Footer" id="footer_background_left"></div>
      <div title="Footer" id="footer_background_center" class="center">
        <a title="Bottem Home Page Link" class="bottom" href="/index.html">Home</a>
      </div>
      <div title="Footer" id="footer_background_right"></div>
    </div>
    <div title="Copyright" id="copyright">
      <div title="Copyright" id="copyright_background_left"></div>
      <div title="Copyright" id="copyright_background_center">
        <div id="copyright_center">
          <p class="center">Copyright &copy; 2008 IRREM.COM All Rights Reserved</p>
        </div>
      </div>
      <div title="Copyright" id="copyright_background_right"></div>
    </div>
    <div id="valid" class="center">
      <a title="Validate Irrem.com xhtml 1.0" href="http://validator.w3.org/check?uri=referer"><img src="/images/valid/xhtml1.png" alt="Valid XHTML 1.0" height="31" width="88" /></a>
	 <a title="Validate Irrem.com css" href="http://jigsaw.w3.org/css-validator/check/referer"><img src="/images/valid/css.png" alt="Valid CSS" height="31" width="88" /></a>
    </div>
  </body>
</html>
full css
Code: Select all
html,body{
margin:0;
padding:0;
background:#A0FFA0 url(../images/logo/green.gif) repeat fixed;
font:14px/16px Georgia, Verdana, serif;
color:#002800;
}
#header{
position:relative;
width:500px;
height:100px;
margin:10px auto;
padding:10px 0 0;
background:url(../images/header/green_background.gif) no-repeat;
}
#left{
position:absolute;
width:18%;
height:400px;
min-width:140px;
left:5%;
top:160px;
}
#navbar{
position:absolute;
width:140px;
height:400px;
padding:10px 0 0;
left:0;
top:0;
background:url(../images/left/green/navbar_background.gif) no-repeat;
}
#sitecolor{
position:absolute;
width:140px;
height:140px;
padding:10px 4px;
left:0;
top:420px;
background:url(../images/left/green/sitecolor_background.gif) no-repeat;
}
#right{
position:absolute;
width:70%;
height:auto;
right:5%;
top:160px;
}
#right_background_left_top{
position:absolute;
width:80px;
height:100px;
left:0;
top:0;
background:url(../images/right/green/left/background_top.gif) no-repeat;
}
#right_background_left_bottom{
position:absolute;
width:80px;
height:100px;
left:0;
bottom:0;
background:url(../images/right/green/left/background_bottom.gif) no-repeat;
}
#right_background_right_top{
position:absolute;
width:80px;
height:100px;
right:0;
top:0;
background:url(../images/right/green/right/background_top.gif) no-repeat;
}
#right_background_right_bottom{
position:absolute;
width:80px;
height:100px;
right:0;
bottom:0;
background:url(../images/right/green/right/background_bottom.gif) no-repeat;
}
#right_background_left_center{
position:absolute;
width:80px;
height:auto;
min-height:600px;
left:0;
top:100px;
bottom:100px;
background:url(../images/right/green/left/background_center.gif) repeat-y;
}
#right_background_right_center{
position:absolute;
width:80px;
height:auto;
min-height:600px;
right:0;
top:100px;
bottom:100px;
background:url(../images/right/green/right/background_center.gif) repeat-y;
}
#right_background_center_top{
position:absolute;
width:auto;
height:40px;
min-width:340px;
left:80px;
right:80px;
top:0;
background:url(../images/right/green/center/background_top.gif) repeat-x;
}
#right_background_center_center{
position:relative;
width:auto;
height:auto;
min-width:340px;
min-height:600px;
margin:100px 80px 100px 80px;
background:url(../images/right/green/center/background_center.gif) repeat;
}
#right_background_center_bottom{
position:absolute;
width:auto;
height:40px;
min-width:500px;
left:80px;
right:80px;
bottom:0;
background:url(../images/right/green/center/background_bottom.gif) repeat-x;
}
#footer{
position:absolute;
width:70%;
height:40px;
top:1400px;
right:5%;
}
#footer_background_left{
position:absolute;
width:40px;
height:40px;
left:0;
top:0;
background:url(../images/footer/green/background_left.gif) no-repeat;
}
#footer_background_center{
position:relative;
width:auto;
height:38px;
margin:0 40px;
padding:12px 0 2px;
background:url(../images/footer/green/background_center.gif) repeat-x;
}
#footer_background_right{
position:absolute;
width:40px;
height:40px;
right:0;
top:0;
background:url(../images/footer/green/background_right.gif) no-repeat;
}
#copyright{
position:absolute;
width:70%;
height:40px;
top:1480px;
right:5%;
}
#copyright_center{
position:relative;
margin:0 auto;
}
#copyright_background_left{
position:absolute;
width:40px;
height:40px;
left:0;
top:0;
background:url(../images/copyright/green/background_left.gif) no-repeat;
}
#copyright_background_center{
position:relative;
width:auto;
height:40px;
margin:0 40px;
padding:5px;
background:url(../images/copyright/green/background_center.gif) repeat-x;
}
#copyright_background_right{
position:absolute;
width:40px;
height:40px;
right:0;
top:0;
background:url(../images/copyright/green/background_right.gif) no-repeat;
}
#valid{
position:absolute;
width:70%;
height:40px;
top:1540px;
right:5%;
}
p{
font:14px/16px Georgia, Verdana, serif;
color:#002800;
}
h1, h2, h3, h4, h5, h6{
font-family:Times New Roman, Times, serif;
font-weight:700;
color:#000;
}
h1{
font-size:26px;
line-height:28px;
}
h2{
font-size:24px;
line-height:26px;
}
h3{
font-size:22px;
line-height:24px;
}
h4{
font-size:20px;
line-height:22px;
}
h5{
font-size:18px;
line-height:20px;
}
h6{
font-size:16px;
line-height:18px;
}
a{
font-family:Times New Roman, Times, serif;
font-weight:700;
}
a.bottom:link{
font-size:16px;
line-height:18px;
text-decoration:none;
color:#286428;
}
a.bottom:visited{
font-size:16px;
line-height:18px;
text-decoration:none;
color:#286428;
}
a.bottom:active{
font-size:16px;
line-height:18px;
text-decoration:none;
color:#286428;
}
a.bottom:hover{
font-size:16px;
line-height:18px;
text-decoration:underline;
color:#327832;
}
a.text:link{
font-size:14px;
line-height:16px;
text-decoration:none;
color:#286428;
}
a.text:visited{
font-size:14px;
line-height:16px;
text-decoration:none;
color:#286428;
}
a.text:active{
font-size:14px;
line-height:16px;
text-decoration:none;
color:#286428;
}
a.text:hover{
font-size:14px;
line-height:16px;
text-decoration:underline;
color:#327832;
}
a.header:link{
font-size:18px;
line-height:20px;
text-decoration:none;
color:#286428;
}
a.header:visited{
font-size:18px;
line-height:20px;
text-decoration:none;
color:#286428;
}
a.header:active{
font-size:18px;
line-height:20px;
text-decoration:none;
color:#286428;
}
a.header:hover{
font-size:18px;
line-height:20px;
text-decoration:underline;
color:#327832;
}
a.navbar1:link{
font-size:18px;
line-height:22px;
text-decoration:none;
color:#286428;
}
a.navbar1:visited{
font-size:18px;
line-height:22px;
text-decoration:none;
color:#286428;
}
a.navbar1:active{
font-size:18px;
line-height:22px;
text-decoration:none;
color:#286428;
}
a.navbar1:hover{
font-size:18px;
line-height:22px;
text-decoration:underline;
color:#327832;
}
.center{
text-align:center;
}
.left{
text-align:left;
}
.right{
text-align:left;
}
.bold{
font-weight:700;
}
.italic{
font-style:italic;
}
.underline{
text-decoration:underline;
}
.overline{
text-decoration:overline;
}
.line-through{
text-decoration:line-through;
}
hr{
width:100%;
height:1px;
border:0;
color:#002800;
background-color:#002800;
}
.float_left{
float:left;
}
.float_right{
float:right;
}
table{
border:1px solid #002800;
border-spacing:4px;
}
tr{
border:1px solid #002800;
}
td{
border:1px solid #002800;
}
ul.disc{
list-style-type:disc;
}
ul.circle{
list-style-type:circle;
}
ul.square{
list-style-type:square;
}
ul.none{
list-style-type:none;
}
ol.decimal{
list-style-type:decimal;
}
ol.lroman{
list-style-type:lower-roman;
}
ol.uroman{
list-style-type:upper-roman;
}
ol.lalpha{
list-style-type:lower-alpha;
}
ol.ualpha{
list-style-type:upper-alpha;
}
http://www.irrem.com/css/blue.css

html,body{
margin: 0 0;
padding: 0 0;
/* Background */
background-color: #A0A0FF;
background-image: url(/images/logo/irrem_logo_blue.png);
background-repeat: repeat;
background-attachment: fixed;
/* Font */
font-size: 16px;
font-family: Georgia, Verdana, serif;
line-height: 18px;
color: #000028;
}
#header{
width: 500px;
height: 100px;
margin: 10px auto;
/* Background */
background-image: url(/images/header/header_blue.png);
background-repeat: no-repeat;
}
#left{
position: absolute;
width: 18%;
height: 400px;
min-width: 140px;
left: 5%;
top: 140px;
}
/* Start Left Subs */
#left_navbar{
position: absolute;
width: 140px;
height: 400px;
padding: 20px;
padding-left: 38px;
left: 0;
top: 0;
/* Background */
background-image: url(/images/left/left_navbar_background_blue.png);
background-repeat: no-repeat;
}
#left_sitecolor{
position: absolute;
width: 140px;
height: 140px;
padding: 10px;
padding-left: 4px;
padding-right: 4px;
left: 0;
top: 420px;
text-align: left;
/* Background */
background-image: url(/images/left/left_sitecolor_background_blue.png);
background-repeat: no-repeat;
}
/* End Left Subs */
/* Start Navbar  */
#navbar{
margin: 0px;
padding: 0px;
height: 24px;
list-style: none;
}
#navbar li{
float: left;
}
#navbar a{
display: block;
height: 24px;
text-indent: -5000px;
/* Style */
text-decoration: none;
}
/* End Navbar */
/* Start Navbar Buttons */
#navbar #home{
width: 100px;
background: url(/images/left/left_navbar_buttons_blue.png) no-repeat 0px 0px;
}
#navbar #home:hover{
background-position: 0 -24px;
}
/* End Navbar Buttons */
#right{
position: absolute;
width: 70%;
height: 1200px;
right: 5%;
top: 140px;
}
/* Start Right Background */
#right_background_left{
position: absolute;
width: 80px;
height: 1200px;
left: 0;
top: 0;
/* Background */
background-image: url(/images/right/right_background_blue_left.png);
background-repeat: no-repeat;
}
#right_background_center{
position: relative;
width: auto;
height: 1120px;
margin-left: 80px;
margin-right: 63px;
padding-top: 40px;
padding-bottom: 40px;
/* Background */
background-image: url(/images/right/right_background_blue_center.png);
background-repeat: repeat-x;
}
#right_background_right{
position: absolute;
width: 63px;
height: 1200px;
right: 0;
top: 0;
/* Background */
background-image: url(/images/right/right_background_blue_right.png);
background-repeat: no-repeat;
}
/* End Right Background */
#footer{
position: absolute;
width: 70%;
height: 40px;
top: 1400px;
right: 5%;
}
/* Start Footer Background */
#footer_background_left{
position: absolute;
width: 40px;
height: 40px;
left: 0;
top: 0;
/* Background */
background-image: url(/images/footer/footer_background_blue_left.png);
background-repeat: no-repeat;
}
#footer_background_center{
position: relative;
width: auto;
height: 38px;
margin-left: 40px;
margin-right: 40px;
padding-top: 12px;
padding-bottom: 2px;
text-align: center;
/* Background */
background-image: url(/images/footer/footer_background_blue_center.png);
background-repeat: repeat-x;
}
#footer_background_right{
position: absolute;
width: 40px;
height: 40px;
right: 0;
top: 0;
/* Background */
background-image: url(/images/footer/footer_background_blue_right.png);
background-repeat: no-repeat;
}
/* End Footer Background */
#copyright{
position: absolute;
width: 70%;
height: 40px;
top: 1480px;
right: 5%;
}
#copyright_center{
position: relative;
width: 322px;
height: 20px;
margin: 8px auto;
}
/* Start Copyright Background */
#copyright_background_left{
position: absolute;
width: 40px;
height: 40px;
left: 0;
top: 0;
/* Background */
background-image: url(/images/copyright/copyright_background_blue_left.png);
background-repeat: no-repeat;
}
#copyright_background_center{
position: relative;
width: auto;
height: 40px;
margin-left: 40px;
margin-right: 40px;
padding: 5px;
/* Background, style */
background-image: url(/images/copyright/copyright_background_blue_center.png);
background-repeat: repeat-x;
}
#copyright_background_right{
position: absolute;
width: 40px;
height: 40px;
right: 0;
top: 0;
/* Background */
background-image: url(/images/copyright/copyright_background_blue_right.png);
background-repeat: no-repeat;
}
/* End Copyright Background */
#valid{
position: absolute;
width: 70%;
height: 40px;
top: 1540px;
right: 5%;
text-align: center;
}
p{
font-size: 16px;
font-family: Georgia, Verdana, serif;
line-height: 18px;
color: #000028;
}
/* Start Headers */
h1, h2, h3, h4, h5, h6{
font-family: Times New Roman, Times, serif;
font-weight: bold;
color: #000000;
}
h1{
font-size: 30px;
line-height: 32px;
}
h2{
font-size: 28px;
line-height: 30px;
}
h3{
font-size: 26px;
line-height: 28px;
}
h4{
font-size: 24px;
line-height: 26px;
}
h5{
font-size: 22px;
line-height: 24px;
}
h6{
font-size: 20px;
line-height: 22px;
}
/* End Headers */
/* Start Links */
a.bottom:link{
font-size: 18px;
line-height: 20px;
font-family: Times New Roman, Times, serif;
font-weight: bold;
text-decoration: none;
color: #282864;
}
a.bottom:visited{
font-size: 18px;
line-height: 20px;
font-family: Times New Roman, Times, serif;
font-weight: bold;
text-decoration: none;
color: #282864;
}
a.bottom:active{
font-size: 18px;
line-height: 20px;
font-family: Times New Roman, Times, serif;
font-weight: bold;
text-decoration: none;
color: #282864;
}
a.bottom:hover{
font-size: 18px;
line-height: 20px;
font-family: Times New Roman, Times, serif;
font-weight: bold;
text-decoration: underline;
color: #323278;
}
a.text:link{
font-size: 16px;
line-height: 18px;
font-family: Times New Roman, Times, serif;
font-weight: bold;
text-decoration: none;
font-style: italic;
color: #282864;
}
a.text:visited{
font-size: 16px;
line-height: 18px;
font-family: Times New Roman, Times, serif;
font-weight: bold;
font-style: italic;
text-decoration: none;
color: #282864;
}
a.text:active{
font-size: 16px;
line-height: 18px;
font-family: Times New Roman, Times, serif;
font-weight: bold;
text-decoration: none;
font-style: italic;
color: #286428;
}
a.text:hover{
font-size: 16px;
line-height: 18px;
font-family: Times New Roman, Times, serif;
font-weight: bold;
text-decoration: underline;
font-style: italic;
color: #323278;
}
a.header:link{
font-size: 20px;
line-height: 22px;
font-family: Times New Roman, Times, serif;
font-weight: bold;
text-decoration: none;
font-style: italic;
color: #282864;
}
a.header:visited{
font-size: 20px;
line-height: 22px;
font-family: Times New Roman, Times, serif;
font-weight: bold;
font-style: italic;
text-decoration: none;
color: #282864;
}
a.header:active{
font-size: 20px;
line-height: 22px;
font-family: Times New Roman, Times, serif;
font-weight: bold;
text-decoration: none;
font-style: italic;
color: #282864;
}
a.header:hover{
font-size: 20px;
line-height: 22px;
font-family: Times New Roman, Times, serif;
font-weight: bold;
text-decoration: underline;
font-style: italic;
color: #323278;
}
/* End Links */
/* Start Text Colors */
.green{
color: #009600;
}
.blue{
color: #000096;
}
.red{
color: #960000;
}
/* End Text Colors */
/*  Start Text Align */
.center{
text-align: center;
}
.left{
text-align: left;
}
.right{
text-align: left;
}
/*  End Text Align */
/*  Start Text Other */
.bold{
font-weight: bold;
}
.italic{
font-style: italic;
}
.underline{
text-decoration: underline;
}
.overline{
text-decoration: overline;
}
.line-through{
text-decoration: line-through;
}
.blink{
text-decoration: blink;
}
/*  End Text Other */
hr{
width: 100%;
height: 1px;
border: 0;
color: #000028;
background-color: #000028;
}
/* Start Floats */
.float_left{
float: left;
}
.float_right{
float: right;
}
/* End Floats */
/* Start Table Tr Td */
table{
border: 1px solid #000028;
}
tr{
border: 1px solid #000028;
}
td{
border: 1px solid #000028;
}
/* End Table Tr Td */
http://www.irrem.com/css/red.css

html,body{
margin: 0 0;
padding: 0 0;
/* Background */
background-color: #FFA0A0;
background-image: url(/images/logo/irrem_logo_red.png);
background-repeat: repeat;
background-attachment: fixed;
/* Font */
font-size: 16px;
font-family: Georgia, Verdana, serif;
line-height: 18px;
color: #280000;
}
#header{
width: 500px;
height: 100px;
margin: 10px auto;
/* Background */
background-image: url(/images/header/header_red.png);
background-repeat: no-repeat;
}
#left{
position: absolute;
width: 18%;
height: 400px;
min-width: 140px;
left: 5%;
top: 140px;
}
/* Start Left Subs */
#left_navbar{
position: absolute;
width: 140px;
height: 400px;
padding: 20px;
padding-left: 38px;
left: 0;
top: 0;
/* Background */
background-image: url(/images/left/left_navbar_background_red.png);
background-repeat: no-repeat;
}
#left_sitecolor{
position: absolute;
width: 140px;
height: 140px;
padding: 10px;
padding-left: 4px;
padding-right: 4px;
left: 0;
top: 420px;
text-align: left;
/* Background */
background-image: url(/images/left/left_sitecolor_background_red.png);
background-repeat: no-repeat;
}
/* End Left Subs */
/* Start Navbar  */
#navbar{
margin: 0px;
padding: 0px;
height: 24px;
list-style: none;
}
#navbar li{
float: left;
}
#navbar a{
display: block;
height: 24px;
text-indent: -5000px;
/* Style */
text-decoration: none;
}
/* End Navbar */
/* Start Navbar Buttons */
#navbar #home{
width: 100px;
background: url(/images/left/left_navbar_buttons_red.png) no-repeat 0px 0px;
}
#navbar #home:hover{
background-position: 0 -24px;
}
/* End Navbar Buttons */
#right{
position: absolute;
width: 70%;
height: 1200px;
right: 5%;
top: 140px;
}
/* Start Right Background */
#right_background_left{
position: absolute;
width: 80px;
height: 1200px;
left: 0;
top: 0;
/* Background */
background-image: url(/images/right/right_background_red_left.png);
background-repeat: no-repeat;
}
#right_background_center{
position: relative;
width: auto;
height: 1120px;
margin-left: 80px;
margin-right: 63px;
padding-top: 40px;
padding-bottom: 40px;
/* Background */
background-image: url(/images/right/right_background_red_center.png);
background-repeat: repeat-x;
}
#right_background_right{
position: absolute;
width: 63px;
height: 1200px;
right: 0;
top: 0;
/* Background */
background-image: url(/images/right/right_background_red_right.png);
background-repeat: no-repeat;
}
/* End Right Background */
#footer{
position: absolute;
width: 70%;
height: 40px;
top: 1400px;
right: 5%;
}
/* Start Footer Background */
#footer_background_left{
position: absolute;
width: 40px;
height: 40px;
left: 0;
top: 0;
/* Background */
background-image: url(/images/footer/footer_background_red_left.png);
background-repeat: no-repeat;
}
#footer_background_center{
position: relative;
width: auto;
height: 38px;
margin-left: 40px;
margin-right: 40px;
padding-top: 12px;
padding-bottom: 2px;
text-align: center;
/* Background */
background-image: url(/images/footer/footer_background_red_center.png);
background-repeat: repeat-x;
}
#footer_background_right{
position: absolute;
width: 40px;
height: 40px;
right: 0;
top: 0;
/* Background */
background-image: url(/images/footer/footer_background_red_right.png);
background-repeat: no-repeat;
}
/* End Footer Background */
#copyright{
position: absolute;
width: 70%;
height: 40px;
top: 1480px;
right: 5%;
}
#copyright_center{
position: relative;
width: 322px;
height: 20px;
margin: 8px auto;
}
/* Start Copyright Background */
#copyright_background_left{
position: absolute;
width: 40px;
height: 40px;
left: 0;
top: 0;
/* Background */
background-image: url(/images/copyright/copyright_background_red_left.png);
background-repeat: no-repeat;
}
#copyright_background_center{
position: relative;
width: auto;
height: 40px;
margin-left: 40px;
margin-right: 40px;
padding: 5px;
/* Background, style */
background-image: url(/images/copyright/copyright_background_red_center.png);
background-repeat: repeat-x;
}
#copyright_background_right{
position: absolute;
width: 40px;
height: 40px;
right: 0;
top: 0;
/* Background */
background-image: url(/images/copyright/copyright_background_red_right.png);
background-repeat: no-repeat;
}
/* End Copyright Background */
#valid{
position: absolute;
width: 70%;
height: 40px;
top: 1540px;
right: 5%;
text-align: center;
}
p{
font-size: 16px;
font-family: Georgia, Verdana, serif;
line-height: 18px;
color: #280000;
}
/* Start Headers */
h1, h2, h3, h4, h5, h6{
font-family: Times New Roman, Times, serif;
font-weight: bold;
color: #000000;
}
h1{
font-size: 30px;
line-height: 32px;
}
h2{
font-size: 28px;
line-height: 30px;
}
h3{
font-size: 26px;
line-height: 28px;
}
h4{
font-size: 24px;
line-height: 26px;
}
h5{
font-size: 22px;
line-height: 24px;
}
h6{
font-size: 20px;
line-height: 22px;
}
/* End Headers */
/* Start Links */
a.bottom:link{
font-size: 18px;
line-height: 20px;
font-family: Times New Roman, Times, serif;
font-weight: bold;
text-decoration: none;
color: #642828;
}
a.bottom:visited{
font-size: 18px;
line-height: 20px;
font-family: Times New Roman, Times, serif;
font-weight: bold;
text-decoration: none;
color: #642828;
}
a.bottom:active{
font-size: 18px;
line-height: 20px;
font-family: Times New Roman, Times, serif;
font-weight: bold;
text-decoration: none;
color: #642828;
}
a.bottom:hover{
font-size: 18px;
line-height: 20px;
font-family: Times New Roman, Times, serif;
font-weight: bold;
text-decoration: underline;
color: #783232;
}
a.text:link{
font-size: 16px;
line-height: 18px;
font-family: Times New Roman, Times, serif;
font-weight: bold;
text-decoration: none;
font-style: italic;
color: #642828;
}
a.text:visited{
font-size: 16px;
line-height: 18px;
font-family: Times New Roman, Times, serif;
font-weight: bold;
font-style: italic;
text-decoration: none;
color: #642828;
}
a.text:active{
font-size: 16px;
line-height: 18px;
font-family: Times New Roman, Times, serif;
font-weight: bold;
text-decoration: none;
font-style: italic;
color: #642828;
}
a.text:hover{
font-size: 16px;
line-height: 18px;
font-family: Times New Roman, Times, serif;
font-weight: bold;
text-decoration: underline;
font-style: italic;
color: #783232;
}
a.header:link{
font-size: 20px;
line-height: 22px;
font-family: Times New Roman, Times, serif;
font-weight: bold;
text-decoration: none;
font-style: italic;
color: #642828;
}
a.header:visited{
font-size: 20px;
line-height: 22px;
font-family: Times New Roman, Times, serif;
font-weight: bold;
font-style: italic;
text-decoration: none;
color: #642828;
}
a.header:active{
font-size: 20px;
line-height: 22px;
font-family: Times New Roman, Times, serif;
font-weight: bold;
text-decoration: none;
font-style: italic;
color: #642828;
}
a.header:hover{
font-size: 20px;
line-height: 22px;
font-family: Times New Roman, Times, serif;
font-weight: bold;
text-decoration: underline;
font-style: italic;
color: #783232;
}
/* End Links */
/* Start Text Colors */
.green{
color: #009600;
}
.blue{
color: #000096;
}
.red{
color: #960000;
}
/* End Text Colors */
/*  Start Text Align */
.center{
text-align: center;
}
.left{
text-align: left;
}
.right{
text-align: left;
}
/*  End Text Align */
/*  Start Text Other */
.bold{
font-weight: bold;
}
.italic{
font-style: italic;
}
.underline{
text-decoration: underline;
}
.overline{
text-decoration: overline;
}
.line-through{
text-decoration: line-through;
}
.blink{
text-decoration: blink;
}
/*  End Text Other */
hr{
width: 100%;
height: 1px;
border: 0;
color: #280000;
background-color: #280000;
}
/* Start Floats */
.float_left{
float: left;
}
.float_right{
float: right;
}
/* End Floats */
/* Start Table Tr Td */
table{
border: 1px solid #280000;
}
tr{
border: 1px solid #280000;
}
td{
border: 1px solid #280000;
}
/* End Table Tr Td */
Inkzolt is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
Old May 3rd, 2008, 18:14   #2 (permalink)
Lead Administrator
 
saltedm8's Avatar
 
Join Date: Nov 2005
Location: Always About
Age: 27
Posts: 1,062
Blog Entries: 1
Send a message via MSN to saltedm8
Re: image layout problem
position it with

margin top
margin bottom
margin right

in your css sheet
__________________
recipebite.co.uk - its a working progress...
Last edited by saltedm8; May 3rd, 2008 at 18:39.
saltedm8 is online now  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
Reply

« auto-stretch the text body height?? | ie 6 background-repeat does not work »
Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Similar Threads
Thread Thread Starter Forum Replies Last Post
CSS layout problem in FF benracer CSS Forum 4 Mar 28th, 2008 16:30
Beginner needs help on image & caption layout badger CSS Forum 3 Jun 21st, 2007 11:32
layout problem bean_2k1 CSS Forum 3 Sep 13th, 2006 02:53
problem with layout wood1e HTML Forum 1 Aug 18th, 2006 21:29
new to css- how to strech the whole layout when a very wide image is loaded. sanchopansa CSS Forum 8 Jul 22nd, 2006 09:11



Latest Updates

All Points SEO Security Advisory - CHECK YOUR SITE NOW!

Creative Coding :: February 2008
Webforumz is sponsored by: WESH UK Web Hosting
All times are GMT. The time now is 18:29.

Sleep Study Scoring :: Free Bet :: Website Templates :: Online Betting :: Bookmakers :: Funny Quotes :: Internet Recruitment Software :: Microsoft CRM Experts :: Online Casino :: Decorated Christmas Trees :: Midwife Forums :: Football Betting :: Ecommerce Software :: Web Hosting :: Football Stats :: Dry Cleaning Collection :: xtreme wales - extreme clothing :: Apuestas :: Sharepoint Consultants :: Website Optimisation :: Office Clearance London :: Sharepoint Experts :: Sports Betting :: Casino :: Website Templates :: Web Design Development India :: Online Gambling

Powered by: vBulletin Version 3.7, Copyright ©2000 - 2008, Jelsoft Enterprises Limited.
© 2003-2008 Webforumz.com : All Rights Reserved
Search Engine Friendly URLs by vBSEO 3.2.0 RC6


1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59