asked on

What's Centering My Images ?

What's centering my images in the left sidebar div in this website?
http://wkdcouriers.com

I want them centered, but I can't work out how I did it.
When I started out they weren't centered in the div (which is normal) so I used the lazy extra horizontal space method.
Then after a while they were all magically centered.

I can't see anything in the css or html .... can you?
oneColElsCtrHdr.css
index.html

Gary

You have

p {
    font-family: Verdana,Geneva,sans-serif;
    font-size: 1em;
    text-align: center;
}

Open in new window

...which is pretty much centering everything in your website.

Eirman

ASKER

You're right Gary. That in a separate styles.css file.
I never edited the css files directly. I can't figure out I did it.
I thought it might have been in
Modify > Page Properties

Any idea how it might have arisen using the DW interface?

ASKER CERTIFIED SOLUTION

Gary

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Scott Fell

I noticed you are using the dreamweaver templates. Even though you may be using cs5 or 6, that template dates back to the macromedia days and is very old.

I spent 5 minutes and put your content in a modern framework called bootstrap. It will adjust for different browser widths. I know this is beyond what your question is, in the long run, this will make your life easier. Best of luck! http://jsbin.com/basak/1/

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div id="header" class="row">
  <div class="col-sm-4">
    <img src="http://wkdcouriers.com/images/WKD1.png" alt="Couriers For Louth, Meath and Dublin" width="260" height="120" hspace="15" />
  </div>
  <div id="headerTwo" class="col-sm-8">
    <h4 class="centered_Bold">WKD Couriers,
      Knockbridge,
      Dundalk,
      Co Louth</h4>
    <h4 class="centered_Bold">Telephone: 087-2542103&nbsp; or&nbsp; 086-2270723</h4>
  </div>

</div>
<div id="main" class="row">
  <div class="col-sm-4">
    <div id="sidebar">
        <p>&nbsp;</p>
        <p><img src="http://wkdcouriers.com/images/express.jpg" alt="Express Service" width="199" height="56" /></p>
        <p>&nbsp;</p>
        <p><img src="http://wkdcouriers.com/images/globe.png" alt="Warehousing &amp; Logistics" width="219" height="195" /></p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p><a href="http://wkdcouriers.com/logos.html" target="_blank"><img src="http://wkdcouriers.com/images/fragile.png" alt="Your Goods Are Handled With Care" width="121" height="105" /></a></p>
        <p class="MaroonColour">Careful Handling Of Your<br />
          Valuables Is Guaranteed</p>
        <p class="MaroonColour">&nbsp;</p>
        <p class="MaroonColour">&nbsp;</p>
        <p class="MaroonColour">&nbsp;</p>
        <p class="MaroonColour">&nbsp;</p>
        <p class="MaroonColour">&nbsp;</p>
        <p class="MaroonColour">&nbsp;</p>
        <p class="MaroonColour">&nbsp;</p>
<p class="MaroonColour">&nbsp;</p>
        <p class="MaroonColour">&nbsp;</p>
        <p class="MaroonColour">&nbsp;</p>
<p class="MaroonColour">&nbsp;</p>
        <p class="MaroonColour">&nbsp;</p>
        <p class="MaroonColour">&nbsp;</p>
<p class="MaroonColour">&nbsp;</p>
        <p class="MaroonColour">&nbsp;</p>
        <p class="MaroonColour">&nbsp;</p>
        <p class="MaroonColour">&nbsp;</p>
        <p class="MaroonColour">&nbsp;</p>
        <p class="MaroonColour">&nbsp;</p>
<p class="MaroonColour">&nbsp;</p>
<h6 class="MaroonColour">Design By <a href="http://www.eirnet.ie">Eirnet</a></h6>
      </div>

  </div><!-- end left -->
  <div class="col-sm-8">
    <div id="mainContent">
     <h1> <img src="http://wkdcouriers.com/images/ireland.png" alt="WKD Couriers Coverage Area" width="242" height="329" />&nbsp;  <img src="http://wkdcouriers.com/images/2vans.jpg" alt="WKD Premesis In Monaghan" width="423" height="269" /></h1>
     <p><span class="bolden">We cover the following counties:</span><br />
    Louth, Monaghan, East-Cavan, Meath, Dublin, Wicklow, and Kildare.</p>
    <p class="darkBlue">The above map should give you a good idea of our main coverage area.<br />
    We would be happy to quote you for other areas  on request.</p>
<p>&nbsp;</p>
<p>We provide a highly personalised service.</p>
<p>  No item is too big or too small.</p>
<p>Competitive Rates For Weekend Runs.</p>
<p>If you are not in a particular hurry to have an item Collected &amp; Delivered,<br />
  we can give you a very keen price, as we can combine your<br />
Collection &amp; Delivery
with others in your area.</p>
<p>Payment Methods: Cheque, Cash, Paypal or Bank Transfer.</p>
<p><strong>Email:</strong> &nbsp; wkdcouriers @ gmail.com</p>
<h6>NOTE: To avoid spam, the above email address is not clickable.<br />
  Just paste it into your email program and remove the two added spaces.</h6>
<p><img src="http://wkdcouriers.com/images/newvan.png" width="699" height="528" alt="Our New Van" /></p>
  </div>

  </div><!-- end main -->
</div>
<div id="footer" class="row">
  <p>©&nbsp;WKD Couriers 2001&nbsp;- 2014</p>

</div>    
</body>
</html>

Open in new window

#header{background-color:#ddd;}
#footer{background-color:#000;}
p { font-family: Verdana, Geneva, sans-serif; font-size: 1.0em; text-align: center; 
}
h1 {
	font-size: 2.2em;
}
h2 {
	font-size: 2em;
}
h3 {
	font-size: 1.8em;
}
h4 {
	font-size: 1.4em;
}
h5 {
	font-size: 1.2em;
	color: #006;
}
h6 { font-size: 0.8em; font-weight: normal; text-align: center; color: #006; 
}




.H2ontop {
	font-size: 1.1em;
	font-weight: bold;
	color: #036;
}
.yellowtext {
	color: #FF0;
	font-size: 0.7em;
}
.subtext {
	font-size: 0.7em;
	font-weight: bold;
}
.p1em {
	font-size: 1.0em;
	font-family: Verdana, Geneva, sans-serif;
}
.floatRight {
	float: right;
	margin-bottom: 8px;
	margin-left: 8px;
}
.subtext {
	font-family: "Courier New", Courier, monospace;
	font-size: 0.8em;
}
.aerialSmall {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.9em;
}

.bolden {
	font-weight: bold;
}
.MaroonColour { color: #900; text-align: center; 
}
.MaroonColourBIG {
	color: #900;
	font-size: 1.2em;
}
.darkBlue { color: #009; font-family: Arial, Helvetica, sans-serif; font-size: 1em; 
}

.whiteText {
	color: #FFF;
}
.greyText {
	color: #CCC;
}
.boxed_1 {
	color: #000;
	background-color: #CCC;
	margin: 5px;
	padding: 5px;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	font-weight: normal;
}
.centered_Bold { font-weight: bolder; text-align: center; color: #000; font-family: Verdana, Geneva, sans-serif; 
}
#sidebar { background: #FFC; }

Open in new window

http://getbootstrap.com/
http://foundation.zurb.com/

Eirman

ASKER

Thanks Gary

Great info on bootstrap Scott .... I appreciate the trouble you took.

Eirman

ASKER

I noticed you are using the dreamweaver templates.

I usually start with a blank page and insert my 4 layout divs and continue from there, but this was supposed to be a simple quickie for a friend.

I'm not looking a gift horse in the mouth Scott, but ....
That website http://jsbin.com/basak/1/ looks woeful on my 26" widescreen monitor!
I deliberately set my website it to 1000 pixels wide to cater for all monitors.
I know that you only gave it 5 minutes and that it could be easily adjusted.

Is bootstrap an independent system that one uses for the layout and then finishes the website off in dreamweaver?
Can bootstrap be used as an addon in Dreamweaver?

Gary

You can do a max-width with bootstrap to restrict it to 1000px

http://www.dmxzone.com/go/21757/discover-the-magic-of-twitter-bootstrap-in-dreamweaver/

Gary

I know Scott suggested transitioning to Bootstrap but I think it would be overkill for a single page website.

SOLUTION

Scott Fell

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Eirman

ASKER

Thanks Gary & Scott ....
The learning curve is no steeper but it just got wider!