1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Centering a image in a CSS div

Discussion in 'CSS' started by matthewbeckman, Feb 28, 2008.

0
  1. #1
    Hi there, I am new to digital point, and I feel some of you might be able to help me with my problem. I was recently put in charge for making my company a new website, and I am getting close to the end, but I am stuck on a simple little problem. In the header, I set up a 2 column layout. On the left there is just a simple red background, and on the left there is a class picture that fills the entire column. Now I want to be able to center the logo in it's column, but I have tried everything and can't get it to work... ok well not everything. Below is part of my .html and .css pages.

    index.html
    
<body id="index">
   <div id="site_center">
      <div id="main">
          <div id="header">
              <div class="hcols">
                   <div class="left">
                       <!--The image I am trying to center-->
                       <img alt="Ennis Steel Industries" src="images/header.gif" class="ht1" />
    Code (markup):
    style.css
    

/* ======== header ======= */

#header {color:#6f9099; line-height:1.18em;}
#header .left {width:340px; padding:31px 0 0 19px;}
#header .right {text-align:right; padding:30px 35px 0 0;}
.ht1 {margin:80px 0 21px 0;}
    Code (markup):
    More random code
    
* {
	margin:0; padding:0;
	font-size:100%;
}

body{
	background:#FFFFFF url(../images/top_tall.jpg) top left repeat-x;
}

img {vertical-align:top;}
a img { border:0;}

ul { list-style:none;}

.left { float:left;}
.right {float:right;}
.clear  { clear:both;}


html, input, textarea
	{
		font-family:Tahoma;
		font-size:0.688em;
		line-height:1.36em;
		color:#455667;
	}

input, select {vertical-align:middle; font-weight:normal;}

a {color:#0aa0d1; font-weight:bold; text-decoration:none;}
a:hover{text-decoration:underline;}
strong {color:#242e39;}
p {padding:15px 0 0 0;}
    Code (markup):
     
    matthewbeckman, Feb 28, 2008 IP
  2. nicangeli

    nicangeli Peon

    Messages:
    828
    Likes Received:
    23
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Wouldn't it just be,

    
.left img
{
display: block;
margin-left: auto;
margin-right: auto;
}
    Code (markup):
    I ommited the class="ht1" as it appears to be the only img inside the div.left

    If there are more img's in the div.left, add .ht1 after the img

    I hope that made sense and worked.
     
    nicangeli, Feb 28, 2008 IP
    Suzy likes this.
  3. matthewbeckman

    matthewbeckman Peon

    Messages:
    140
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    0
    #3
    You would think it would be, but I have the worst luck, and it didn't. I tried that and a few modifications to that code, but nothing really seemed to work. It is a template my boss bought off of templatemonster the other day, and he wants a bunch of edits done to it. Now while I am good at HTML and CSS, I hate going through someone elses work. I cleaned up the HTML so that is pretty neat now, but the CSS is something different, it is all over the place, or at least what I am used to.

    Remember I am trying to get the '.ht1' image div centered (when the template is sizing) inside of the 'left' div. I have included the code below, along with anything I feel my be to of use to anyone who thinks they may be able to help. Gosh this seems a lot more complicated than it needs to be. By the way I am editing through the 'code' tab in dreamweaver, and using firefox to test.

    The image size being centered is 356x118. According to Dreamweaver the '.ht1' class (aka the image class) has the following applied to it through the CSS inheritance.
    line-height: 1.18em
    margin: 80px 0 21px 0
    font-size: 100%
    padding: 0
    vertical-align: top

    Then the 'left' class has the following applied the same way.
    text-align: left
    line-height: 1.18em
    margin: 0
    font-size: 100%
    float: left
    width: 356px
    padding: 88px 0 0 19px



    index.html
    
<body id="index">
  <div id="site_center">
    <div id="main">
      <div id="header">
        <div class="hcols">
          <div class="left">
             <!-----THIS IS THE IMAGE THAT NEEDS CENTERING-------->
             <img alt="Ennis Steel Industries" src="images/header.gif" class="ht1" />
          </div>
          <div class="right">
             Telephone:&nbsp;&nbsp;&nbsp;+1 972 878 0400<br />
             Fax:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+1 972 878 9563<br />
             Email: &nbsp;&nbsp;info@ennissteel.com
          </div>
          <div class="clear">
          </div>
        </div>
        <div class="menu">
          <ul>
             <li class="active"><a href="#"><b>About Us</b></a></li>
             <li class="second"><a href="services/index.html"><b>Services &amp; Equipment</b></a></li>
             <li><a href="profile/index.html"><b>Company Profile</b></a></li>
             <li><a href="portfolio/index.html"><b>Our Portfolio</b></a></li>
             <li><a href="contact/index.html"><b>Contact Us</b></a></li>
          </ul>
          <div class="clear">
          </div>
        </div>
      </div>
      <div id="middle">
        <div class="indent">
          <div class="content1">
             <img alt="" src="images/about_welcome.gif" class="t1" /><br />
                Fusce euismod consequat ante. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque sed
                dolor. Aliquam congue fermentum nisl auris accumsan nulla vel diam. Sed in lacus ut enim adipiscing aliquet.
                Nulla venenatis. In pede mi, aliquet sit amet, euismod in, auctot, ligula. Aliquam dapibus tincidunt metus.
                Praesent justo dolor, lobortis quis, lobortis dignissim, Lorem ipsum dolorsit amet, consectetuer adipiscing elit.
                Praesent  part urient montes, nascetur ridiculus mus. Nulla dui. Fusce feugiat males uada odio. Morbi nnc
                odio, gravida at, cursus nec, ctus a, lorem. Maecnas tristique orci ac sem. Duis ultricies pharetra magna.
                Donec accumsan malesuada orcionec sit amet eros. Lorem ipsum dolor sit aet, consectet adipsci ng elit.
                Mauris fermentum dictum magna. Sed laoreet aliquam leo.
           </div>
           <div class="columnspad">
             <div class="columns">
               <div class="column1">
                 <img alt="Site Features" src="images/about_features.gif" class="t2" /><br />
                 <div class="date">
                 <img alt="New FTP" src="images/about_new.jpg" class="imgindent" />
                     <strong>New FTP Upload Service</strong><br />
                     <p>Use our new secure FTP upload service to upload plans and other documents right to our 
                     computers... <a href="ftp/">upload</a></p>
                     <br class="clear" />
                 </div>
                 <div class="date">
                    <img alt="New Login!" src="images/about_login.jpg" class="imgindent" />
                    <strong>All New Customer Dedicated Site</strong><br />
                    <p>Manage your latest projects with the all new, secure, Ennis Steel customer site management... </p>
                    <br class="clear" />
                 </div>
                 <div class="links">
	           <div class="left link1">
                      <a href="features/" class="more">learn more</a> 
                      &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                    </div>
                    <div class="left">
                      <a href="mailto:webmaster@ennissteel.com" class="more contact">contact us to sign up</a>
                    </div>
                    <br class="clear" />
                   </div>
                </div>
                <div class="column2">
                  <img alt="Learn About Us" src="images/about_learn.gif" class="t3" /><br />
                  <div class="box">
                    <div class="boxpad">
                      <img alt="Banner" src="images/about_banner.jpg" /><br />
                        <div class="pad"> Learn all about our companies history and see our latest projects!
                        </div>
                        <div class="taright">
                          <a href="profile/"><img alt="Profile" src="images/about_history.jpg" /></a>
                          <a href="contact/"><img alt="Contact" src="images/about_contact.jpg" /></a>
                          <a href="portfolio/"><img alt="Portfolio" src="images/about_portfolio.jpg" /></a><br />
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="clear">
                  </div>
                </div>
              </div>
           </div>
         </div>
         <div id="footer">
           <div class="indent">
              Ennis Steel Industries Inc, 1998-2008 | <a href="privacy/index.html">Privacy Policy</a>
           </div>
         </div>
      </div>
   </div>
</body>	
</html>
    Code (markup):
    style.css
    /* ========= ENNIS STEEL INDUSTRIES INC, 2008 ========== */
* {
	margin:0; padding:0;
	font-size:100%;
}

body{
	background:#FFFFFF url(../images/top_tall.jpg) top left repeat-x;
}

img {vertical-align:top;}
a img { border:0;}

ul { list-style:none;}

.left { float:left;}
.right {float:right;}
.clear  { clear:both;}


html, input, textarea
	{
		font-family:Tahoma;
		font-size:0.688em;
		line-height:1.36em;
		color:#455667;
	}

input, select { vertical-align:middle; font-weight:normal;}

a {color:#0aa0d1; font-weight:bold; text-decoration:none;}
a:hover{text-decoration:underline;}
strong {color:#242e39;}
p {padding:15px 0 0 0;}

/* ============================= main layout ====================== */

.more {background:url(../images/bg_check.gif) no-repeat 0 0; padding-left:21px; color:#000000; text-decoration:none;}
.view {background:url(../images/bg_view.gif) no-repeat 0 0; padding-left:21px; color:#000000; text-decoration:none;}
.more:hover {text-decoration:underline;}

.contact {background:url(../images/bg_contact.gif) no-repeat 0 0; padding:2px 0 3px 31px; display:block;}

h1 {background:url(../images/logo.gif) top left no-repeat; text-indent:-10000px; height:57px; line-height:1.25em; font-size:0.75em;}

li a {line-height:1.91em;}

.imgindent {margin:0 20px 0 0; float:left;}

/* ============================= header ====================== */

#header {color:#6f9099; line-height:1.18em;}
#header .left {width:356px; padding:88px 0 0 19px;}
#header .right {text-align:right; padding:30px 35px 0 0;}
.ht1 {margin:80px 0 21px 0;}

.menu {padding:74px 30px 0 31px; text-align:center;}
.menu ul {margin:0 auto; width:719px;}
.menu li {float:left; padding:0;}
.menu .second a b{padding:18px 28px 15px 32px;}
.menu li a:hover {background:#d4dee1 url(../images/li_tr.gif) top right no-repeat;}
.menu li a:hover b {color:#2e3c4a; background:url(../images/li_tl.gif) top left no-repeat; text-decoration:none;}
.menu li a {color:#d4dee1; font-weight:bold; display:block; line-height:1.5em;}
.menu .active {background:#d4dee1 url(../images/li_tr.gif) top right no-repeat;}
.menu .active b {color:#2e3c4a; background:url(../images/li_tl.gif) top left no-repeat;}
.menu li a b {display:block; padding:18px 28px 15px 26px;}

/* ============================= middle ====================== */

#middle { width:100%;}

.date {background:url(../images/hor_line.gif) bottom repeat-x;}
.box {background:url(../images/box1_bg.jpg) top left no-repeat;}
.taright {text-align:right;}
.blue {color:#0aa0d1;}

/* ============================= footer ====================== */

#footer {color:#d6e0e3;}
#footer a {color:#d6e0e3; text-decoration:none; font-weight:normal;}
#footer a:hover {text-decoration:underline;}
#footer .indent {padding:24px 0 0 31px;}

/* ============================= About Us ============================= */

#index #middle .indent { padding:32px 26px 35px 30px;}

#index .t1 {margin-bottom:21px;}
#index .t2 {margin-bottom:-4px;}
#index .t3 {margin-bottom:9px;}

#index .columnspad {padding:37px 0 0 0;}
#index .date {margin-right:32px; padding:23px 0 13px;}
#index .date .imgindent {margin:0 9px 0 0;}
#index .date p {padding-top:2px;}
#index .links {padding:22px 0 0 0;}
#index .link1 {padding:2px 0 0 0;}

#index .box {width:423px;}
#index .box .boxpad{padding:22px 0 0 16px;}
#index .box .pad {padding:10px 0 0 14px;}
#index .box .morepad {margin:-25px 0 0 -7px;}

/* ============================= index-1 =========================== */

#index_1 #middle .indent { padding:32px 26px 38px 30px;}

#index_1 .t1 {margin-bottom:16px;}
#index_1 .t2 {margin:37px 0 19px 0;}
#index_1 .t3 {margin-bottom:11px;}

#index_1 .column1 ul {padding:0 0 18px 1px;}
#index_1 .column1 .content {padding:0 30px 21px 1px;}

#index_1 .column2 .content {padding:0 20px 0 0;}
#index_1 .column2 .p {padding:10px 0 0 0;}
#index_1 .column2 .morepad {padding:6px 0 27px 9px;}
#index_1 .column2 .morepad2 {padding:14px 0 0 9px;}

/* ============================= index-2 =========================== */

#index_2 #middle .indent { padding:32px 26px 38px 30px;}

#index_2 .t1 {margin-bottom:-5px;}
#index_2 .t2 {margin-bottom:-4px;}
#index_2 .t3 {margin-bottom:9px;}

#index_2 .columnspad {padding:37px 0 0 0;}
#index_2 .date {margin-right:32px; padding:23px 10px 13px 0;}
#index_2 .date p {padding-top:2px;}
#index_2 .last {background:none;}
#index_2 .links {padding:22px 0 0 0;}
#index_2 .link1 {padding:2px 0 0 0;}


#index_2 .box {width:423px;}
#index_2 .boxpad {padding:22px 0 0 16px; background:url(../images/box2_bg.jpg) top left no-repeat;}
#index_2 .box .pad {padding:10px 0 0 14px;}
#index_2 .content {padding:3px 26px 0 10px;}
#index_2 .content .p {padding:22px 0 0 0;}


/* ============================= index-3 =========================== */

#index_3 #middle .indent { padding:32px 26px 41px 19px;}

#index_3 .t1 {margin-bottom:12px;}
#index_3 .t2 {margin:37px 0 20px 0;}
#index_3 .t3 {margin-bottom:6px;}

#index_3 .column1 .content {padding:0 42px 0 0;}
#index_3 .column1 .p {padding-top:9px;}
#index_3 .column1 .imgindent {margin:0 19px 0 0;}
#index_3 .column1 .morepad {padding:11px 0 0 11px;}
#index_3 .column1 .content2 {padding:0 54px 0 12px;}
#index_3 .column1 .morepad2 {padding:21px 0 0 0;}


#index_3 .column2 .content {padding:13px 0 0 0;}
#index_3 .column2 .content p {padding-top:16px;}
#index_3 .column2 .content .p {padding:22px 0 0 0;}


/* ============================= index-4 =========================== */

#index_4 #middle .indent { padding:32px 26px 37px 30px;}

#index_4 .t1 {margin-bottom:19px;}
#index_4 .t2 {margin-bottom:9px;}
#index_4 .t3 {margin:26px 0 20px 0;}

#index_4 .column1 .content {padding:0 42px 0 0;}
#index_4 .column1 .p {padding-top:9px;}
#index_4 .column1 .imgindent {margin:0 19px 0 0;}
#index_4 .column1 .morepad {padding:11px 0 0 11px;}
#index_4 .column1 .content2 {padding:0 54px 0 12px;}
#index_4 .column1 .morepad2 {padding:21px 0 0 0;}


#index_4 .column2 .content {padding:0 24px 0 10px;}
#index_4 .column2 p {padding-top:16px;}
#index_4 .column2 .p {padding:12px 0 0 0;}
#index_4 .column2 .imgindent {margin:0 19px 0 0;}


form .rowi {height:44px;}

.input {width:200px; height:20px; border:1px solid #d4dee1; background:#FFFFFF; padding:0 0 0 5px; font-size:1em;}
textarea {width:200px; height:210px; border:1px solid #d4dee1; background:#FFFFFF; padding:0 0 0 5px; overflow:auto; font-size:1em;}
form .div { padding:7px 3px 0 0;}

/* ============================= index-5 =========================== */

#index_5 #middle .indent { padding:32px 34px 43px 31px;}

#index_5 .t1 {margin-bottom:21px;}
    Code (markup):
    layout.css
    /* ========= ENNIS STEEL INDUSTRIES INC, 2008 ========== */

#site_center {text-align:center; background:url(../images/footer_tall.gif) bottom repeat-x;}
#main { width:/*1168px*/expression(((document.documentElement.clientWidth || document.body.clientWidth) < 1168)? "1168px" : "100%"); min-width:1168px; margin:0 auto; text-align:left;}

#header {height:430px; background:url(../images/header_bg.jpg) top right no-repeat;}

#footer { height:58px;}

.columns {width:100%;}
.column1, .column2, .column3, .indent_column, .col1, .col2, .col3, .ind_col {float:left;}

/* ===================== About Us =======================*/

#index .column1 {width:/*301px*/42%;}
#index .column2 {width:/*423px*/58%;}

/* ================ Services & Equipment ================*/

#index_1 .column1 {width:/*241px*/33%;}
#index_1 .column2 {width:/*483px*/67%;}

/* ================= Company Profile ====================*/

#index_2 .column1 {width:/*301px*/42%;}
#index_2 .column2 {width:/*423px*/58%;}

/* =================== Portfolio ========================*/

#index_3 .column1 {width:/*489px*/67%;}
#index_3 .column2 {width:/*246px*/33%;}

/* ==================== Contact =========================*/

#index_4 .column1 {width:241px; margin-right:-241px;}
#index_4 .column2 {width:/*483px*/100%;}
#index_4 .column2 .padding {padding-left:241px;}

/* ================== Privacy Policy ====================*/
    Code (markup):
     

    Attached Files:

    matthewbeckman, Feb 28, 2008 IP
  4. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #4
    What does this template in general look like? That code is still more bloated than a stuck pig, and there's no need for about half the code in there anyway.

    I know of a couple ways this could be cleaned up, though I'd like to know if this is going to be a fixed width or elastic layout first.
     
    Dan Schulz, Feb 28, 2008 IP
  5. matthewbeckman

    matthewbeckman Peon

    Messages:
    140
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    0
    #5
    I attached the image of the templates in the last post. And yes that code is extremely bloated, and that is with me cleaning a lot of it up... I really just would have liked to do it myself from scratch, but my boss is very persistent. It is supposed to be a fluid layout, but I sort of want to just change it to a fixed layout because some of the features i added (like the logo) breaks when made too small. Anything you can contribute would help.
     
    matthewbeckman, Feb 29, 2008 IP
  6. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Sorry, I meant the other template pages. I'm pretty sure the home page won't look the same as the others.
     
    Dan Schulz, Feb 29, 2008 IP
  7. matthewbeckman

    matthewbeckman Peon

    Messages:
    140
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Dan,

    I am not sure why it matters... if I can get it to center on the main page, it will work on the rest. But below I included the code from one of the pages, and a picture. They all have a little bit of a different layout for each page, but the header is all the same. Any ideas yet on how to get that image to center?

    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<title>Ennis Steel Industries - Our Services &amp; Equipment</title>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<meta name="robot" content="index, nofollow" />
	<meta name="Description" content="Ennis Steel Industries: Staying Up With Todays Times" />
	<meta name="copyright" content="1998-2008 Ennis Steel Industries Incorporated" />
	<meta name="Keywords" content="EnnisSteel Ennis Steel DeSoto Fortworth Dallas Texas Fabrication Fabricator 
	Construction Building Cranes Galvanize Metal Paint Equipment Services Plasma Cutting Sawing" />
	<link rel="stylesheet" href="../css/style.css"  type="text/css" />
	<link rel="stylesheet" href="../css/layout.css" type="text/css" />
	<link rel="shortcut icon" href="../images/favicon.ico" >
</head>

<body id="index_1">
	<div id="site_center">
		<div id="main">
			<div id="header">
				<div class="hcols">
					<div class="left">
						<img alt="Ennis Steel Industries" src="../images/header.gif" class="ht1" />
					</div>
					<div class="right">
						Telephone:&nbsp;&nbsp;&nbsp;+1 972 878 0400<br />
						Fax:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+1 972 878 9563<br />
						Email: &nbsp;&nbsp;info@ennissteel.com
					</div>
					<div class="clear">
					</div>
				</div>
				<div class="menu">
					<ul>
						<li><a href="../index.html"><b>About Us</b></a></li>
						<li class="second active"><a href="#"><b>Services &amp; Equipment</b></a></li>
						<li><a href="../profile/index.html"><b>Company Profile</b></a></li>
						<li><a href="../portfolio/index.html"><b>Our Portfolio</b></a></li>
						<li><a href="../contact/index.html"><b>Contact Us</b></a></li>
					</ul>
					<div class="clear">
					</div>
				</div>
			</div>
			<div id="middle">
				<div class="indent">
					<div class="columns">
						<div class="column1">
							<img alt="" src="../images/services_main.gif" class="t1" /><br />
							<ul>
								<li><a href="">Sawing</a></li>
								<li><a href="">Burning</a></li>
								<li><a href="">Coping</a></li>
								<li><a href="">Punching</a></li>
								<li><a href="">Drilling</a></li>
								<li><a href="">Welding</a></li>
								<li><a href="">Plasma Cutting</a></li>
                                <li><a href="">Plating</a></li>
								<li><a href="">Blasting</a></li>
								<li><a href="">Painting</a></li>
								<li><a href="">Galvanizing</a></li>
								<li><a href="">Fabrication</a></li>
						  </ul>
							<a href="#" class="more">learn more</a><br />
							<img alt="" src="../images/services_production.gif" class="t2" /><br />
							<div class="content">
								<strong>We can do it!</strong> We currently have 60 men working 55 hours a week on first shift, along with 48 men working 55 hours a week on second shift. Combined we have a total of 5940 production hours a week. At a average rate of 10 hours a ton, we are able to push out close to 600 tons a week.
							    <p>Along with our 100+ men in the steel shop, we have approximately 15 employees in the office there to serve you monday through friday, 8-5pm.</p>
							</div>
						
					  </div>
						<div class="column2">
							<img alt="" src="../images/services_ourservices.gif" class="t3" /><br />
							<div class="content">
								<img alt="" src="../images/2-p1.jpg" class="imgindent" />
								<p class="p"><strong>Aliquam dapibus tincidunt metus.</strong><br />
							  Praesent justo dolor, lobortis quis, lobortis dignissim, Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent  parturient montes, nascetur.</p>
								<p>Nulla dui. Fusce feugiat males uada odio. Morbi nnc odio, gravida at, cursus nec, ctus a, lorem. Maecnas tristique orci ac sem.</p><br class="clear" />
								<div class="morepad"><a href="#" class="more">read more</a></div>
								<img alt="" src="../images/2-p2.jpg" class="imgindent" />
								<p class="p"><strong>Duis ultricies pharetra magna. </strong><br />
							  Donec accumsan malesuada orcionec sit amet eros. Lorem ipsum dolor sit aet, consectet adipsci ng elit. Mauris fermentum dictum magna.</p>
								<p>Sed laoreet aliquam leo. Ut tellus dolor, dapibus eget, elementum pulvinar ac, lorem. Vestibulum sed ante. Donec sagittis euismod purus.</p><br class="clear" />
								<div class="morepad2"><a href="#" class="more">read more</a></div>
						  </div>
					  </div>
						<div class="clear"></div>
					</div>
				</div>
			</div>
			<!--footer -->
			<div id="footer">
				<div class="indent">
					Ennis Steel Industries Inc, 1998-2008 | <a href="../privacy/index.html">Privacy Policy</a>
				</div>
			</div>
			<!--footer end-->
		</div>
	</div>
</body>

</html>
    Code (markup):
     

    Attached Files:

    matthewbeckman, Feb 29, 2008 IP
  8. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #8
    I'm with Dan on the bloated, this thing is DIV and class happy for no good reason.

    For example if I was writing said page THIS:

    <body id="index_1">
  <div id="site_center">
    <div id="main">
      <div id="header">
        <div class="hcols">
          <div class="left">
             <!-----THIS IS THE IMAGE THAT NEEDS CENTERING-------->
             <img alt="Ennis Steel Industries" src="images/header.gif" class="ht1" />
          </div>
          <div class="right">
             Telephone:&nbsp;&nbsp;&nbsp;+1 972 878 0400<br />
             Fax:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+1 972 878 9563<br />
             Email: &nbsp;&nbsp;info@ennissteel.com
          </div>
          <div class="clear">
          </div>
        </div>
    Code (markup):
    Would probably be simplified down to this:
    <body>
	<div id="container">
		<h1>
			Ennis Steel Industries
			<span></span>
		</h1>
		<div id="contactInfo">
			Telephone:<span>+1 972 878 0400</span><br />
			Fax:<span>+1 972 878 9563</span><br />
			Email:<span>info@ennissteel.com</span>
		</div>
    Code (markup):
    You've treaded deep into 'chuck it and start over with clean minimalist semantic markup' territory.
     
    deathshadow, Feb 29, 2008 IP
  9. matthewbeckman

    matthewbeckman Peon

    Messages:
    140
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Yes I realize just as much as you two that this is extremely bloated and very unnecessary, but due to time constraints, I really do not have time to do this all by hand. I wasn't hired to do this, I just happen to mention that I have some experience in web design so they showed me this template and asked if I could modify it a bit and throw it up on the site, little did I know though, was that it would be full of this shitty and bloated code. It didn't even pass the W3 validation when I got it. I was hired to switch the company over from old outdated pc's to macs, but stupid stuff like this keeps getting in the way and is distracting me, so again, all I really want is to figure out how to center that image.
     
    matthewbeckman, Mar 2, 2008 IP
  10. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #10
    can't you post a url?
     
    wd_2k6, Mar 2, 2008 IP
  11. Suzy

    Suzy Peon

    Messages:
    27
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #11
    it's all here

    centering the image using display block; margin auto; is probably working, however it's centering it in the .left div which is floated left and only 356px wide per one of your earlier posts - the image is also 356px wide .. so it's not the images fault it simply doesn't have any room to move ;)

    for the quick fix ..make that left div wider then you should see the effects of the image centering tip posted earlier
     
    Suzy, Mar 3, 2008 IP