Centering this page is maddening.... [Archive]

pennyjack

07-26-2006, 08:39 PM

I have a friend who asked me to fix an issue on his site. I have maybe an ounce more experience than he does. My site is working fine, but after some tinkering he's messed his up a bit. There is a blue line around the image and he'd like the whole thing centered without resizing the image. The css is built into the index.html and I can't for the life of me figure out how to get the whole thing centered. Could one of you kind gurus please take a look and see if you can remedy this? The code is from the salted template and the site is www.cmosabuse.com. The code is listed below. Thanks in advance:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title><SITE_TITLE></title>
<link rel="alternate" type="application/rss+XML" title="RSS 2.0" href="index.php?x=rss" />

<style type="text/css">
body {
background:#191919;
margin:10px;
padding:0px;
text-align:center;
font-size:10px;
font-family:Verdana, Helvetica, sans-serif;
color:#CCCCCC;
}
#wrapper {
margin:0px auto;
padding-top:0px;
padding-left:0px;
padding-right:0px;
padding-bottom:0px;
width:center;
text-align:left;
}
#image {
padding:5px;
background:#111
border:1px solid #333;
}
#image_info {
width:590px;
padding:10px;
display:block;
font-size:9px;
color:#999;
border:0px;
}
#image_info a {
text-decoration:underline;
color:#999;
}
#image_info a:hover {
text-decoration:underline;
color:#CC6633;
}
#image_info li {
margin: 0px 0px 10px -15px;
list-style-type: square;
}
#header {
position:absolute;
top:0px;
right:0px;
float:left;
margin:0px;
padding:10px;
display:block;
border-top:0px;
border-right:0px;
border-left:0px;
border-bottom:0px dotted #111;
}
#header a {
text-decoration:none;
color:#CCC;
}
#comments{
padding:5px;
background:#111;
border:1px solid #333;
}
.logo{
font-size:18px;
font-weight: bold;
font-family: Geneva, Arial, Helvetica, sans-serif;
color: #CCCCCC;
letter-spacing: 0.01px;
}
.td_calendar_days_vz {
padding:1px;
text-align:center;
border-top:0px solid #999;
border-bottom:1px solid #999;
border-right:0px;
border-left:0px;
background:#191919;
color:#999;
}
.td_calendar_days_vz:hover {
background:#444;
}
.td_calendar_days {
padding:1px;
text-align:center;
border-top:1px solid #999;
border-bottom:1px solid #999;
border-right:0px;
border-left:0px;
background:#191919;
color:#999;
}
.td_calendar_days:hover {
background:#444;
}
.td_calendar_navi_vz {
border-top:0px;
border-bottom:1px solid #999;
border-right:0px;
border-left:0px;
text-align:center;
letter-spacing:1px;
word-spacing:5px;
}
.td_calendar_navi_vz a {
text-decoration:none;
color:#444;
}
.td_calendar_navi {
border-top:0px;
border-bottom:1px solid #999;
border-right:0px;
border-left:0px;
text-align:right;
letter-spacing:1px;
word-spacing:5px;
}
.td_calendar_navi a {
text-decoration:none;
color:#999;
}
.td_calendar_days_imagefound {
padding:1px;
text-align:center;
border-top:1px solid #999;
border-bottom:1px solid #999;
border-left:1px solid #999;
border-right:1px solid #999;
background:#333;
}
.td_calendar_days_imagefound:hover {
border-top:1px solid #999;
border-bottom:1px solid #999;
border-left:1px solid #999;
border-right:1px solid #999;
background:#666;
}
.td_calendar_days_imagefound a {
text-decoration:none;
color:#999;
}
.td_calendar_days_imagefound a:hover {
text-decoration:none;
color:#fff;
}
.table_calendar {
font-family:Helvetica, verdana, sans-serif;
font-size:10px;
padding:0px;
margin:0px;
width:600px;
border-top:0px;
border-bottom:0px;
border-right:0px;
border-left:0px;
}
.table_calendar_vz {
font-family:Helvetica, verdana, sans-serif;
font-size:10px;
padding:0px;
margin:0px;
width:200px;
border-top:0px;
border-bottom:0px;
border-right:0px;
border-left:0px;
}
.exif-data{
font-size:10px;
}
.photo {
padding: 0;
float:center;
margin: 0px 0 0 10px !important; margin: 0px 0 0 5px;
}
.photo img {
display: inline;
position: relative;
border:0px;
margin: -6px 6px 6px -6px;
padding: 4px;
}
#footer {
display: block;
font-size: 9px;
font-style: italic;
}
#footer a{
color:#CCCCCC;
}
input, textarea {
font-family : Verdana,Arial,Geneva,Helvetica,sans-serif;
font-size : 1em;
border: 1px solid #ccc;
}

input[type], textarea[name] {
background : #eee;
}

input[type=submit], input[type=reset] {
background : #272727;
color : #fff;
}

input[type=submit]:hover {
background : #414141;
color : #fff;
}

h1 {
font-size: 2px;
}
</style>
<script language='javascript' type='text/javascript'>

</script>
</head>
<body>
<div id="header"><span class="logo">
<SITE_TITLE></span> // <SITE_PHOTONUMBER> pictures
posted // <STATS_VISITORS_TODAY> visitors today // <a href="index.php?x=about">about + links</a> // <a href="index.php?x=browse">archives</a> // <a href="index.php?x=rss">RSS</a>
</div>
<p />                  <br />
<div id="wrapper"><br>
<div id="calendar">
<SITE_CALENDAR>
</div>
<div id="image_info">
<a href="index.php?showimage=<IMAGE_PREVIOUS_ID>"><< previous</a> | <a href="index.php">Current</a> | <a href="index.php?showimage=<IMAGE_NEXT_ID>">next >></a>
</div>
<a href="index.php?showimage=<IMAGE_PREVIOUS_ID>"><img id="image" src="images/<IMAGE_NAME>" alt="<IMAGE_TITLE>" title="go to: <IMAGE_PREVIOUS_TITLE>" /></a>
<div id="image_info">
<b><IMAGE_TITLE></b> » <i><IMAGE_NOTES><br />
</i>
</div>
<div id="image_info">

<p>Date: <EXIF_CAPTURE_DATE></p>
<p>Camera: <EXIF_CAMERA_MODEL></p>
<p>Focal length: <EXIF_FOCAL_LENGTH></p>
<p>Flash: <EXIF_FLASH></p>
<p>Exposure: <EXIF_EXPOSURE_TIME></p>
<p>Aperture: <EXIF_APERTURE></p>
<p>ISO: <EXIF_ISO></p>

<b>Comments:</b> (<IMAGE_COMMENTS_NUMBER>)<br>
<br>
<div id="comments"><IMAGE_COMMENTS></div><br><br>
<a href='#' onclick="flip('add_comment'); return false;"><b>Add a comment</b></a>
</div><br>
<div id="add_comment">
<script language='javascript' type='text/javascript'>flip('add_comment');</script>
<div id="comments"><form method='post' action='index.php?x=save_comment' name='commentform' >
 Message:<br />
 <textarea name='message' rows='5' cols='80'></textarea>
<p />          

 Name:<br />
 <input type='text' name='name' class='input' value='<VINFO_NAME>' /><p />          

 URL:<br />
 <input type='text' name='url' class='input' value='<VINFO_URL>' /><p />           
<input type='checkbox' value='set' name='vcookie' />
Remember me
<p />           
<input type='submit' value='Submit' />
<input type='hidden' name='parent_id' value='<IMAGE_ID>' />
</form>
</div>
</div>
<div id="image_info"><b>Previous images:</b></div>
<div class="photo"><IMAGE_THUMBNAIL_ROW></div>
<br><br><br><br><br><br><br>
</div>

</body>
</html>

kidleethal

07-27-2006, 02:24 AM

Hi,

I think your HTML could be compacted down a little. All those line breaks and 'nbsp' can be removed, and the effect reproduced in CSS, with less code.

First to center your image, you need to put it inside it's own div. Currently, it's just sitting inside the #wrapper div. The #wrapper div should be pretty plain with not much to it. I would suggest removing the 'width:center' property from it.

So put your image link inside it's own div (which sits inside #wrapper), and give it the property 'margin: 0 auto;'. This aligns divs in the center of the page.

I don't see any blue line around the image. I am using Safari. However, I suspect it probably appears in IE, as this is some weird default of IE to put ugly blue borders around link images. To turn it off, add this to your CSS:

#wrapper a:link img, a:visited img {
border-color: #000000
}

Hope that helps.

pennyjack

07-27-2006, 12:20 PM

Thanks for the help :D