using div tags to replace tables

[showman13]

Hello All,

I am actually moving these questions over from a thread in PHP because the original questions I had evolved into learning this aspect of coding that I've never addressed previously.

I am trying to get pictures displayed in a rotating fashion as part of a page header. Initially I used tables for the formatting, but ran into an issue with how it was displayed, so started investigating the use of Div tags, and am running into some similar display issues, but would really like to develop an understanding of their use.

What I was getting was a large white space above and to the left of the picture, and it was pushed out of the space (table cell) that was supposed to contain it when it was displayed.
http://aim2survive.com/test_rotate.php

So, I did a little research and studying on using div tags to replace the use of tables for layout, and while I haven't gotten that perfected just yet, I still have the exact same issue with the display of the pictures.

http://aim2survive.com/test_rotate2.php

any ideas on how to fix it so that doesn't appear like that?

Then also, in the div tag usage... I'm continuing to study and play with that, but if you have any suggestions on getting the overall container (960 wide) centered in the middle of the monitor, that would certainly help a lot.

It seems that the size of the whitespace around the pics in the rotator is overrunning the limitations of the div that it is to be contained in...

I know this is a couple of different issues, but they appear to be related in the sense that I need to resolve both of them to get this page completed.

thanks in advance.

And Happy Mother's Day to all the Mothers in here and those related to others that hang out in here.

Douglas

[JorgeM]

Lets tackle the easier part of your question... How to center a div element.

A div element, being a block level element is very easy to center horizontally. You only need to assign it a width and left and right margins set to auto. For example...

 #div1 { width: 960px; margin: 0 auto; }

I am not able to check your source code for the other issues at the moment from my mobile device.

[|-|x]

Try setting padding: 0 on your UL element.

It's common practice to use a "reset" css (either one downloaded from the net or a custom one) to set some global initialisation values such as zero padding margin and border for all elements. This may be something you could look into as it overrides the default values that some elements carry which I think is the source of your issue.

[TonyG_cyprus]

Agree with Hearth, it's a padding issue, eric myers' reset is the best I've used, freely downloadable. Put it in your css dir, and make sure to link to it first in your head section, before linking to your normal css.

[showman13]

That was probably the easiest fix for the whitespace issue on the picture rotation that I could have asked for.

I copied and pasted that reset CSS into the beginning of my CSS file and uploaded it, and poof... the issue disappeared.

Thank you all for your feedback on that.

As for the centering issue, I think that I already have the container defined as suggested...
Here is a copy of that portion of my CSS file.

I added the padding: 0; to each of the elements as a test to see if it had any effect, but it didn't, so they are probably not necessary.

if you look at this page http://aim2survive.com/test_rotate2.php
You will see that everything is off to the left side except for the header graphic, which I centered using a paragraph tag and centering it.

and the secondary div (right side column - #3) is actually under the edge of the content div.

html {height:100%;}
body {height:100%; margin:0; padding:0;
background-image: url('../images/hcwit_bg.jpg');
background-repeat: no repeat fixed;
background-attachment:fixed;
background-size:100% 100%;
}
<!--[if IE 6]-->
/* some css fixes for IE browsers */
html {overflow-y:hidden;}
body {overflow-y:auto;}
#bg {position:absolute; z-index:-1;}
#content {position:static;}
<![endif]-->


#container {
    width: 960px;
    margin: 0 auto;
    padding: 0;
}

#primary {
    float: left;
    width: 240px;
    padding: 0;
}

#content {
    float: left;
    width: 400px;
    padding: 0;
}

#secondary {
    float: left;
    width: 240px;
    padding: 0;
}

#footer {
    clear: both;
}

And here is the PHP script to display that page.

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

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

<head>
  <title>Slider Test with div</title>

<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="/js/jquery.bxslider.min.js"></script>
<script src="/js/plugins/fitvids.js"></script>
<link href="/js/jquery.bxslider.css" rel="stylesheet" />

<script type="text/javascript">
$(document).ready(function(){
  $('.bxslider').bxSlider({
    controls: 'false',
    autoHover: 'true',
    mode: 'fade',
    controls: false,
    auto: true,
    pause: '3000'
  });
});
</script>
    <link rel="stylesheet" type="text/css" href="all_inc/gen_css.css" />

</head>

<body>
<div id="container">
        <div id="header">
        <p align="center"><img src="graphic_designs/logo_test_2.png" width="820" height="170" align="middle" border="0" alt="HEALTHCRAFT Walk In Tubs" /></p>
    </div>

    <div id="primary">
      <p><b>Include<br /><br />Common<br /><br />Vertical<br />Menu</b></p>
          <pre>#primary {
        float:left;
        width:280px;
        }
      </pre>
    </div>

    <div id="content">
      <ul class="bxslider">
        <li><img src="images/header_001.jpg" width="400" height="400" border="0" /></li>
        <li><img src="images/header_002.jpg" width="400" height="400" border="0" /></li>
        <li><img src="images/header_003.jpg" width="400" height="400" border="0" /></li>
        <li><img src="images/header_004.jpg" width="400" height="400" border="0" /></li>
        <li><img src="images/header_005.jpg" width="400" height="400" border="0" /></li>
        <li><img src="images/header_006.jpg" width="400" height="400" border="0" /></li>
        <li><img src="images/header_007.jpg" width="400" height="400" border="0" /></li>
        <li><img src="images/header_008.jpg" width="400" height="400" border="0" /></li>
        <li><img src="images/water_blank.jpg" width="400" height="400" border="0" /></li>
        <li><img src="images/water_logo.jpg" width="400" height="400" border="0" /></li>
      </ul>
          <pre>
        #content {
        float:left;
        width:400px;
        }
        </pre>
    </div>

    <div id="secondary">
      <p><b>Include<br /><br />Free<br /><br />Estimate<br /><br />Form</b></p>
          <pre>
        #secondary {
        float:left;
        width:280px;
        }
      </pre>
      </div>

    <div id="footer">
        <p>Footer #footer {clear:both;}</p>
    </div>
</div>


</body>

</html>

Hopefully someone will be able to determine what it is that I'm doing incorrectly.

Thanks again in advance for any feedback you may have.

Douglas

[TonyG_cyprus]

You need to set margins for your 'content' div.

    margin:0px auto; /*0px top and bottom, auto right and left */

should do it, you may need to adjust the other divs too.

or you can go:

   margin:0px 10px 5px 20px; /* top, right, bottom, left in that order. */

[showman13]

the Content div is only there in case it is an IE browser, and adding a margin to it has no effect on the outcome from what I can see.

But I did add it to make sure, with no change in the display

[|-|x]

It's appearing left aligned because tou have float:left on the divs primary, content and secondary. If you wrap these 3 divs in another div with margin:0 auto as TonyG said, it should center the lot.
Edit You also need to specify a width on that wrapper div or it will default to 100% and the centering effect will be moot.

[showman13]

Isn't that what the #container is??

This is what is in CSS

#container {
    width: 960px;
    margin: 0 auto;
    padding: 0;
}

and it is wrapped around all the content on the page

<body>
<div id="container">
        <div id="header">
        <p align="center"><img src="graphic_designs/logo_test_2.png" width="820" height="170" align="middle" border="0" alt="HEALTHCRAFT Walk In Tubs" /></p>
    </div>

    <div id="primary">
      <p><b>Include<br /><br />Common<br /><br />Vertical<br />Menu</b></p>
          <pre>#primary {
        float:left;
        width:280px;
        }
      </pre>
    </div>

    <div id="content">
      <ul class="bxslider">
        <li><img src="images/header_001.jpg" width="400" height="400" border="0" /></li>
        <li><img src="images/header_002.jpg" width="400" height="400" border="0" /></li>
        <li><img src="images/header_003.jpg" width="400" height="400" border="0" /></li>
        <li><img src="images/header_004.jpg" width="400" height="400" border="0" /></li>
        <li><img src="images/header_005.jpg" width="400" height="400" border="0" /></li>
        <li><img src="images/header_006.jpg" width="400" height="400" border="0" /></li>
        <li><img src="images/header_007.jpg" width="400" height="400" border="0" /></li>
        <li><img src="images/header_008.jpg" width="400" height="400" border="0" /></li>
        <li><img src="images/water_blank.jpg" width="400" height="400" border="0" /></li>
        <li><img src="images/water_logo.jpg" width="400" height="400" border="0" /></li>
      </ul>
          <pre>
        #content {
        float:left;
        width:400px;
        }
        </pre>
    </div>

    <div id="secondary">
      <p><b>Include<br /><br />Free<br /><br />Estimate<br /><br />Form</b></p>
          <pre>
        #secondary {
        float:left;
        width:280px;
        }
      </pre>
      </div>

    <div id="footer">
        <p>Footer #footer {clear:both;}</p>
    </div>
</div>


</body>

Or am I missing something or misunderstanding what you are saying??

[TonyG_cyprus]

#container {
    width: 960px;
    margin: 0 auto;
    padding: 0;
}
#primary {
    float: left;
    width: 240px;
    padding: 0;
}
#content {
    float: left;
    width: 400px;
    padding: 0;
}
#secondary {
    float: left;
    width: 240px;
    padding: 0;
}

Your primary, secondary and content divs add up to 880px, your container is 960px, you have no padding and no margin or borders, so 80px left over, as everthing is float:left the 80px will end up on the right side.
EDIT: There's something off here, because I just looked using Chrome developer tools, and your #container has no defined width, so on my monitor, its width is 1280px or 100%. Also, treble check the css for the bxslider, sometimes jquery plug-in css can conflict with your own, maybe thats causing the overlap.

[|-|x]

I fixed it manually by inserting a div at the point I mentioned before. But effecting the appropriate styling to container div should also do it.

Update - Confirmed, container doesn't seem to be loading the styles (firefox & chrome checked). Maybe change the name to see if it's a conflict with jQuery as TonyG suggests, would appear to be the case at this point.

[showman13]

Thanks for your response... I had realized that the primary and secondary were set to 240 and corrected that already, but it had no effect on the outcome of the page display.

I started doing a little more testing by taking pieces out of my CSS file one chunk at a time and found what was causing the issue with the centering of the #container.

The part that was intended to deal with the shortcomings of IE was the culpret...

Although, this didn't resolve the overlap of the content and the secondary columns, I am one step closer.

Maybe you could tell me what it is in this code that would have caused the issue:

<!--[if IE 6]-->
/* some css fixes for IE browsers */
html {overflow-y:hidden;}
body {overflow-y:auto;}
#bg {position:absolute; z-index:-1;}
#content {
  position:static;
  margin:0px auto;
}
<![endif]-->

After making this discovery, I tried to resolve the overlap issue by reducing the width of the primary and secondary to 270 and adding padding: 5; to each, (5 on each side of a div should be 10 total I think), but that also had no bearing on the display.

I guess I'll keep playing with it until I find something that will make a difference.

This may be a long drawn out process.

Thanks again,
Douglas

[TonyG_cyprus]

Padding is inside a div, margin is outside
and check out This for IE styling,
in particular the

Universal IE 6 CSS

[showman13]

I finally realize that I didn't really need to struggle with that overlap of columns.

While it isn't the best solution, the fact that I am centering the content of the secondary div, which will move it away from the content in the center column, resolves that issue
But I still need to figure out the correct solution for future projects.

http://aim2survive.com/test_rotate2.php

Now I just need to get the left menu and the right side form in place and the header will be completed so I can move ahead with the rest of the project. It is amazing to me the amount of time invested in just getting that presented correctly.

Thank you for all your feedback

Douglas

[TonyG_cyprus]

Well it's looking good now. Please mark it solved if you're happy.

[showman13]

Yep, I agree, it is beginning to come together, thanks to the help of the daniweb posters.

I thought I would see if I ran into any other snags while working on this today, before marking it solved, but I guess I'll mark it solved and if need be, I can always open a new one.

thanks again for your help
Douglas

[|-|x]

Just to follow up on something, and correct me if I'm wrong, but doesn't the IF block only work in the actual HTML page code and not in a CSS file?

I recall usually seeing it to optionally include a separate stylesheet like so

<!--[if IE 6]-->
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->

If I am correct, then depending on how the browser handles the <!----> tags it will either break the style sheet at that point, or just ignore the condition and apply the styles inside regardless.

TonyG, can you confirm? (just for interest).

cheers

[TonyG_cyprus]

Yes, as far as I am aware, and how I always use the if block should be the first item in the <head> section of html if for a css link but can be in the body for other html.

[showman13]

Conditional comments only work in IE, and are thus excellently suited to give special instructions meant only for IE. They are supported from IE 5 onwards.

Conditional comments work as follows:

<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->

Their basic structure is the same as an HTML comment (<!-- -->). 
Therefore all other browsers will see them as normal comments and will ignore them entirely.
IE, though, has been programmed to recognize the special <!--[if IE]> syntax, resolves the if and parses the content of the conditional comment as if it were normal page content.

It didn't seem to make any difference though, whether using IE, Chrome, FF, so I took it out of the page.