?
Solved

can't get images properly spaced

Posted on 2011-05-03
5
Medium Priority
?
228 Views
Last Modified: 2012-05-11
Hi!

On this page: http://www.topsecurityinc.com/alarm-monitoring.asp
I have three images in the middle of the page.
I can't seem to figure out how to get all three images centered horizontally.
The last two images are too close together.
I calculated from the left border there should be 61 pixels margin then the first image, then 61 pixels then the second image then 61 pixels then the third image and then 61 pixels to the right border..
Any corrections to the divisions would be appreciated.
TIA
0
Comment
Question by:TrueBlue
  • 4
5 Comments
 
LVL 38

Expert Comment

by:Tom Beck
ID: 35517973
I don't think there is room for 61px all the way across, but how about this solution?
...

<div style="width: 100%;">

  <div style="float: left; margin-left: 48px;">

    <div class="BoxtopLeftCorner">

      <div class="BoxtopRightCorner">

          <div class="BoxbottomLeftCorner">

               <div class="BoxbottomRightCorner"> 

                    <div class="Boximage"><img height="131" width="196" alt="Florida Alarm Monitoring Center - Operator Stations" src="Web/images/Monitoring-Station-Operator-Stations.jpg"></div>

               </div>

          </div>

      </div>

    </div>

  </div>  

   

 <div style="float: left; margin-left: 50px;">

     <div class="BoxtopLeftCorner">

        <div class="BoxtopRightCorner">

            <div class="BoxbottomLeftCorner">

               <div class="BoxbottomRightCorner"> 

                    <div class="Boximage"><img height="131" width="196" alt="Florida Alarm Monitoring Center - Operator" src="Web/images/Monitoring-Station-Operator.jpg"></div>

               </div>

            </div>

        </div>

     </div>

 </div>

 

 <div style="float: right; margin-right: 50px;">

  <div class="BoxtopLeftCorner">

      <div class="BoxtopRightCorner">

          <div class="BoxbottomLeftCorner">

               <div class="BoxbottomRightCorner"> 

                    <div class="Boximage"><img height="131" width="196" alt="Florida Alarm Monitoring Center - Receivers" src="Web/images/Monitoring-Station-Receivers.jpg"></div>

               </div>

          </div>

      </div>

   </div>

  </div>

</div>

...

Open in new window

0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 35517989
This is little better. I just noticed why it did not work for you the first time. margin-left was spelled with two "t"s.
<div style="width: 100%;">

  <div style="float: left; margin-left: 47px;">

    <div class="BoxtopLeftCorner">

      <div class="BoxtopRightCorner">

          <div class="BoxbottomLeftCorner">

               <div class="BoxbottomRightCorner"> 

                    <div class="Boximage"><img height="131" width="196" alt="Florida Alarm Monitoring Center - Operator Stations" src="Web/images/Monitoring-Station-Operator-Stations.jpg"></div>

               </div>

          </div>

      </div>

    </div>

  </div>  

   

 <div style="float: left; margin-left: 50px;">

     <div class="BoxtopLeftCorner">

        <div class="BoxtopRightCorner">

            <div class="BoxbottomLeftCorner">

               <div class="BoxbottomRightCorner"> 

                    <div class="Boximage"><img height="131" width="196" alt="Florida Alarm Monitoring Center - Operator" src="Web/images/Monitoring-Station-Operator.jpg"></div>

               </div>

            </div>

        </div>

     </div>

 </div>

 

 <div style="float: left; margin-left: 50px;">

  <div class="BoxtopLeftCorner">

      <div class="BoxtopRightCorner">

          <div class="BoxbottomLeftCorner">

               <div class="BoxbottomRightCorner"> 

                    <div class="Boximage"><img height="131" width="196" alt="Florida Alarm Monitoring Center - Receivers" src="Web/images/Monitoring-Station-Receivers.jpg"></div>

               </div>

          </div>

      </div>

   </div>

  </div>

</div>

Open in new window

0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 35518005
Still does not work either way in IE compatibility mode though. Were you aware of this?
0
 

Author Comment

by:TrueBlue
ID: 35518092
tommyBoy,
Thanks for pointing the typo out. :)
Any idea why IE compatibility mode does not like the boxes?
0
 
LVL 38

Accepted Solution

by:
Tom Beck earned 2000 total points
ID: 35518103
Easy fix (I hope).

Change these two rules from float:right to float:left.


.BoxbottomRightCorner{background:url(../web/images/Box_Bottom_Right_Corner.gif) no-repeat right bottom;float:left;}
.BoxtopRightCorner{background:url(../web/images/Box_Top_Right_Corner.gif) no-repeat right top;float:left;}
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
This video shows how to quickly and easily deploy an email signature for all users in Office 365 and prevent it from being added to replies and forwards. (the resulting signature is applied on the server level in Exchange Online) The email signat…
Suggested Courses

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question