SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2003
    Location
    pa
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need some positioning help

    Hi,
    I have been struggling for this for several hours and am getting very frustrated. I cannot get the 3 images and their headers to center.
    You can view what I am working on here...http:www.lazerpro.com/projects/theprinters.com/
    and what it is supposed to look like here...
    http://www.lazerpro.com/projects/the...om/index2.html

    As for the images, I am using Javascript, I am just tired of it actually seems like less code there than making it in css.

    Here is the pertinent code
    CSS
    .threeBoxHeader
    { font-size: 16px;
    color: #6F6F6F;
    display:inline;
    width: 149px;
    font-family:arial, helvetica, sans-serif;
    border-top: solid 1px #6F6F6F6;
    border-right: solid 1px #6F6F6F6;
    border-left: solid 1px #6F6F6F6;
    border-bottom: solid 1px #6F6F6F6;
    background-color:#DADADA;
    float:left;
    margin-left:auto;
    margin-right:auto;
    padding: 0;
    text-align:center;
    }

    .box
    {
    float:left;
    padding:0;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
    }

    HTML Code
    <div id="left" align="center">
    <h1 class="header1">Your Integrated Business Communication Resource</h1>
    <div class="box">

    <div class="threeBoxHeader">GRAPHIC DESIGN</div>
    <div class="threeBoxHeader">PRINTING</div>
    <div class="threeBoxHeader">MAILING</div>
    </div>

    <br class="clearer">
    <div class="box">
    <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','images/design_over.jpg',1)"><img src="images/design.jpg" alt="Graphic Design" name="Image1" width="149" height="96" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','images/print_over.jpg',1)"><img src="images/print.jpg" alt="Digital and Offset Printing Services" name="Image2" width="149" height="96" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','images/mail_over.jpg',1)"><img src="images/mail.jpg" alt="Direct Mailing Services" name="Image3" width="149" height="96" border="0"></a></div>


    </div>

    Plus the borders on the grey boxes are not showing up in Firefox, I am assuming that is a width problem.

    Thanks for any help
    summer

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You didn't say what was to be centred where so this may not be what you want.

    You can centre the thtree boxes under the h1 header by wrapping them in a div that has a set width and then using margin:auto to centre them.

    The border isn't displaying in mozilla because the border code is wrong you have 7 digits for your hex code when there should only be six.

    Code:
    .threeBoxHeader
    { font-size: 16px;
     color: #6F6F6F;
     display:inline;
     width: 147px;
     font-family:arial, helvetica, sans-serif;
     border-top:1px solid  #6F6F6F;
     border-right:1px solid  #6F6F6F;
     border-left:1px solid  #6F6F6F;
     border-bottom:1px solid  #6F6F6F;
    	background-color:#DADADA;
     float:left;
     margin-left:auto;
     margin-right:auto;
     padding: 0;
     text-align:center;
    }
    *html .threeboxheader {width:149px}/*box model hack for quirks mode*/
    
    .boxwrapper{
     width:450px;
     margin-left:auto;
     margin-right:auto;
    } 


    Code:
      <div id="left" align="center"> 
    	<h1 class="header1">Your Integrated Business Communication Resource</h1>
        <div class="boxwrapper"> 
    	  <div class="box"> 
    		<div class="threeBoxHeader">GRAPHIC DESIGN</div>
    		<div class="threeBoxHeader">PRINTING</div>
    		<div class="threeBoxHeader">MAILING</div>
    	  </div>
    	  <br class="clearer">
    	  <div class="box"> <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','images/design_over.jpg',1)"><img src="http://www.lazerpro.com/projects/images/design.jpg" alt="Graphic Design" name="Image1" width="149" height="96" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','images/print_over.jpg',1)"><img src="http://www.lazerpro.com/projects/images/print.jpg" alt="Digital and Offset Printing Services" name="Image2" width="149" height="96" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','images/mail_over.jpg',1)"><img src="http://www.lazerpro.com/projects/images/mail.jpg" alt="Direct Mailing Services" name="Image3" width="149" height="96" border="0"></a></div>
    	</div>
      </div>
    Hope that helps.

    Paul


  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2003
    Location
    pa
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul that did work for IE on PC and fireox on PC and Mac, but of course I design on Mac and test IE 5.2 on Mac. And I did try the commented backslash hac for Mac but it doesn't seem to work. Am I using it incorrectly?

    .threeBoxHeader
    {
    color: #6F6F6F;
    display:inline;
    width: 147px;
    font-family:arial, helvetica, sans-serif;
    border-top:1px solid #6F6F6F;
    border-right:1px solid #6F6F6F;
    border-left:1px solid #6F6F6F;
    border-bottom:1px solid #6F6F6F;
    background-color:#DADADA;
    float:left;
    margin:0;
    padding: 0;
    text-align:center;
    }
    * html .threeboxheader
    {width:149px;}/*box model hack for quirks mode*/

    /* commented backslash mac hiding hack \*/
    * html .threeboxheader
    {width:149px;}
    /* end hack */

    .boxwrapper{
    width:453px;
    margin-left:auto;
    margin-right:auto;
    }

    * html .boxwrapper{
    width:451px;
    }

    /* commented backslash mac hiding hack \*/
    * html .boxwrapper{
    width:451px;
    }
    /* end hack */

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Mac is case sensitve on styles so it should be threeBoxHeader (which is why i never use mixed case lol).

    Your mac hiding hack looks ok but try this instead:
    Code:
    .threeBoxHeader
    { 
     color: #6F6F6F;
    display:inline; 
    width: 147px;
     font-family:arial, helvetica, sans-serif;
     border-top:1px solid  #6F6F6F;
     border-right:1px solid  #6F6F6F;
     border-left:1px solid  #6F6F6F;
     border-bottom:1px solid  #6F6F6F;
     background-color:#DADADA;
     float:left;
     margin:0;
     padding: 0;
     text-align:center;
    }
    * html .threeBoxHeader
    {width:149px;}/*box model hack for quirks mode*/
    .boxwrapper{
     width:447px;
     margin-left:auto;
     margin-right:auto;
    } 
    * html .boxwrapper{
     width:447px;
    }
    If it doesn't look the same in mac then offer iemac the different size with * html and then give ie the original size with the backslash hack and the * html etc.

    It seems to look ok in my ie mac but as my machines not connected I tried it without images which might cause some difference.

    Paul

  5. #5
    SitePoint Enthusiast
    Join Date
    Sep 2003
    Location
    pa
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That worked. Thank you!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •