background issue & div space issue

If I have interepreted your intentions correctly you want the pale yellow background to go down the page? If so put the bakcground property [ background: transparent url(images/bodybg2.gif) repeat-y scroll; ] in the body rather than the #wrapper div.

I think you may be overusing position:absolute where you don't really have to for your design. It is really better to have your page boxes "in the flow" (or keep them in and learn from experience :roll: ). Getting the macro structure of the page right often takes care of a lot of later positioning issues.

DE

DE - Thanks for your response -

The reason why I did not put the background in the body tag is because I do not want the background column effect to continue after my content has ended - i.e. if I have a short page that only has 600px of vertical content and the user expands the browser window to maximum, he will see the column going down the screen. I only want to column to continue and extend through the content - i.e. the way it is done at simplebits.com

As far as absolute positioning goes - I could not think of a way to set the content normally in the flow and still have a centered css layout without first defining a relatively positioned wrapper and then using absolute divs to definitely position the logo & title text in the banner area.

I opted to use absolutely positioned divs to make two columns rather than use the float property. I don't know if this is the best way to achieve my layout.

This url at simplebits illustrates the effect I am looking to reproduce.

http://www.simplebits.com/contact/

Notice that when you maximize the page (at a high res like 1280 x 1024) the column effect ends after the footer. This is because the background is assigned to the content wrapper not to the body tag. For some reason, I can't get it to work on my test page 9see my post above!)

BTW - this is my 100th post. Yeah me :roll:

OK - you don't need position:absolute on #content or #nav - they need to be "in the flow" for the background on #wrapper to push down:

#content {  
  position: relative;
  width: 623px;
  margin-left: 150px;
  padding: 0pt 0pt 30px 5px;  
  border:1px solid #000;/*border just for visualization*/
}
#nav1 { 
  position:relative;
  float:left;  
  width: 130px; 
}

Note: I have included no hacks. The #nav is floated left and sits in the margin of #content. The background on #wrapper goes down as far as #content. If content is shorter then you've got a problem that can be handled with a clearing break at the end of your content like this:

<!-- Content -->
<div id="content">
  <p>This is the Content area</p>

</div><br style="clear:both;" /><!-- End Content -->

I think you will find that works much better. Then we can deal with the breadcrumb thingy . . .

DE

Hi DCElliott,
Welcome to the 100 post club. =D>
Thanks for all the help you have given.

Sorry it's not as exciting or physically rewarding as the mile high club.

Keep up the good work

DE -Thanks for your response again!

I will try the fix you suggested.

I will post with results.

I appreicate your help

Hi DE, all,

I have tried the fix you suggested.

Here is the new URL: http://www.citytech.cuny.edu/proj/test2.html
The only issue is that I cannot get the content in the float left nav1 div to align vertically with the content div. I have placed borders around the divs to illustrate, but it's pretty clear that the text can't align.

Also, I have removed "position: relative" declarations from the following divs: #main, #content, #nav1 - it didn't seem to make a difference whether I declared them relative or not.

DE -In your example you use "clear:both" since you only float the #nav1 div, did you mean "clear:left" or perhaps you meant to include a"float: right" in the #content div? Either way, I tried it and the content of the Divs aren't aligning. :?

Once again I appreciate your help.

Also, I have changed the sidebar color to red to better illustrate the small amount of space apparent directly above the #breacrumb div - when viewed in IE6.

I have no idea what accounts fo this space being there

Headsmack time. Switch the order of your nav and content sections. The float has to come first.

BTW - let me compliment you on how you have documented your code - it makes it very easy to see the structure and grab the bits to edit.

DE

Hi DE,

Once again thanks for your response.
I've learned the hard way to comment my code --or else!

I have swapped the #content and #nav1 divs.

Same URL: http://www.citytech.cuny.edu/proj/test2.html

The result is still misaligned. :oops: Now, the text contained in #nav1 is higher than the text contained in #content (this is the reverse of what it was before).

BTW - I initially had the content div above the nav div because I read on cederhom's website
http://www.simplebits.com - that it is better to put the content div first so that text-reader browsers will be fed the content, not the nav initially.

Have you looked at it in Firefox - it looks just fine. I think we have an ugly IE issue here. I'd start by making #content width:auto; because the right side is constrained by #main anyhow. That hopefully will take care of the float wrapping issue I believe is occuring. BTW - I do see the space above the breadcrumbs line in IE. More on that later after I get out the screen calipers.

DE

DE

Hi,
You're right - in Firefox, Netscape 7, Opera 7 - it worked.
I changed the #content div to width: auto & it works!
Thank you, DE!
Odd though, I've seen the width specified with other float examples on other websites and it doesn't have a problem in IE... I wonder what the real issue is...

If you ahve any ideas on the mysterious breadcrumb div space let me know...
thanks for your help with the float issue!

OK - here is my final shot: (Admin - sorry for dropping in so much code but it is an interesting example)

<!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>Untitled Document</title>
  <meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
  <style type="text/css">
  /*<![CDATA[*/
  <!--
  body, html {height:100%;}
  body {
    background-color: #fff;
    margin: 0;
    padding: 0;
    border:0;
    text-align: center;
    }
  img {
   margin:0;
   padding:0;
   border: 0;
    }
  #wrapper {
    position:relative; /*sets up the containing block position */
    width: 800px;
    padding: 0 11px;/*leave space for background borders*/
    margin:0 auto;/*make it center*/
    text-align:left;
    background: url(http://www.citytech.cuny.edu/proj/images/bodybg4.gif) repeat-y center;
    voice-family: "\"}\""; /* IE5x hack */
    voice-family: inherit;
    width: 778px;
    }
  #banner {
    width: 778px;
    height: 181px;
    background:#585757 url(http://www.citytech.cuny.edu/proj/images/bannerbg.gif) repeat-x;
    overflow:hidden;
    voice-family: "\"}\""; /* IE5x hack */
    voice-family: inherit;
    height: 176px;
    }
  #shield {
    width: 139px;
    height:176px;
    left:0;
    top:0;
    margin:0;padding:0;
    }
  #title {display:block;
    position: absolute;
    left:153px;
    margin:0;
    height:2em;
    top:40px;
    margin-top:-1em;
    }
  #subtitle {
    position: absolute;
    left:210px;
    top: 110px;
    width:570px;
    margin:0;
    margin-top:-1em;
    }
  #fontsize {
    position: absolute;
    height: 40px;
    left:168px;
    top:165px;
		margin-top:-1em;
    border-right: 1px solid #000;
    padding-right:5px;
		overflow:hidden;
   }
  #main {
    display:block;
    position:relative;
    width: 778px;
    border-top:5px solid #ddd;
		z-index:1;
     }
  #breadcrumb {
    display:block;
    position:relative;
    margin:0;
    padding:3px;
    background-color: #fff;
    width: auto;
    }
  #breadcrumb li {
    display:inline;
    }
  #breadcrumb li:after {
    content:" :: ";
    }
  #nav1 {
    float:left;
    width: 130px;
    padding-left:5px;
    border: 1px solid #000;
    }
  #content {
    width: auto;
    padding: 0 0 30px 0;
    margin-left: 155px;
    border: 1px solid #00f;
    }
  #footer {
    padding: 10px;
    position: relative;
    background-color: #666;
    }
  br.clear {clear:both;}
	
	p {margin:0 0 .5em 0;}/*Needed to make browsers give equivalent margins*/
	
  /* fonts */
  body {
    font:90%/1.2 Arial, Helvetica, sans-serif;
    }
  #title {
    font-size: 2em;
    color: #666;
    }
  #subtitle {
    font-size: 1.1em;
    color: #666;
    font-weight:bold;
    font-style: italic;
    }
  #fontsize {
    color: #fff;
    font-size: 1em;
    }
  #breadcrumb {
    font-size: .9em;
    }
  -->
  /*]]>*/
  </style>
</head>

<body>
  <!-- Wrapper -->
  <div id="wrapper">
 
    <!-- Banner -->
    <div id="banner">
      <!-- Shield -->
        <img id="shield" src="http://www.citytech.cuny.edu/proj/images/shield.gif" alt="Shield" /><!-- End Shield -->
      <!-- title -->
      <h1 id="title">NEW YORK CITY
      <br />
      COLLEGE OF TECHNOLOGY</h1><!-- End Title -->
      <!-- subtitle -->
      <h2 id="subtitle">The senior-level college of technology of The City
      University of New York</h2><!-- End subtitle -->
      <!-- Font Size -->
      <div id="fontsize">
        <p>Font Size: A A A A</p>
      </div><!-- End Font Size -->
    </div><!-- End Banner -->
			
    <!-- Main -->
    <div id="main">
      <!-- Breadcrumb - extra space at top of div??? -->
      <ul id="breadcrumb">
        <li>
          You are Here
        </li>
        <li>
          <a href="#">Home</a>
        </li>
      </ul><!-- End Breadcrumb -->

      <!-- Nav1 -->
      <div id="nav1">
        <p>Navigation Area</p>
      </div><!-- End Nav1 -->
      <!-- Content -->

      <div id="content">
        <p>This is the Content area This is the Content area This is the
        Content area This is the Content area This is the Content area This is
        the Content area This is the Content area This is the Content area This
        is the Content area This is the Content area This is the Content area
        This is the Content area</p>
       </div><!-- End Content -->
      </div>
    <br class="clear" />
    <!-- End Main -->

    <!-- Footer -->
    <div id="footer">
      <p>Footer</p>
    </div><!-- End Footer -->
    </div><!-- End Wrapper -->
  </body>
</html>

You will note that I have dropped a couple of divs and applied the ids to what previously were the objects inside the divs: the shield image and the breadcrumbs have been turned into an inline list with generated content and links (as you would have with real breadcrumbs). (Note:I have replaced the image paths with their absolute counterparts)

You should also try cycling through font size changes (fonts are now em-based - just need to tweak the proportions - remember only IE fixes font-sizes in px or pt - the art is in allowing fontsize changes to grow gracefully). The titles now grow around their vertical centers. I also changed the titles from divs to headings which makes them more semantically correct and aids in indexing by search engines. I haven't tried Opera or IE 6 but it looks and functions OK in IE5.5 and Firefox. It also looks perfect if you turn the styles off completely.

Thanks - its been fun!

DE

Code section edited to correct cross-browser problem(

DE -What can I say? Thanks for going to this trouble. I am going to digest the code you put up and see where it leads. Thank you for all your help.

I need to find a typography tutorial. I don't quite understand the em & em values you specified in the CSS.

BTw -why did you comment the code with CData?

Thanks again for all your help on this, I really appreciate it!

np, but next time you get on the bike we are gonna take off the training wheels. :twisted:

As for the CDATA bit: I ran the code through HTMLTidy with the request to turn out XHTML (See the DOCTYPE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> ) This requires additional wrapping of character data objects for proper parsing. The code gets uglier but is "future proofed".

As for the pts vs ems debate - designers have been bandying about this one for years. Webmaster world - one of the most respected forums - has this thread: http://www.webmasterworld.com/forum83/28.htm. If you want to see what font sizes look like in different browsers - check out this page: http://www.thenoodleincident.com/tutorials/box_lesson/font/. My method, adapted after much heartbreak :roll: is to specify my base font as a body property using a %age like so:
body {
font:90%/1.2 Arial, Helvetica, sans-serif;
}
all subsequent fonts are em-based measurements. Font sizing in not cummunative -- you can't specify ems in the body and percents elswhere and necessarily get the same thing doing it vice versa.

If you want to have nice fluid design with user control and accessability - stay away from fixed font sizes.

DE

DE -Thanks for the links. I will definitely check them out.

I thought a good solution to the font problem would be to specify fonts in pixels and then provide a style switcher option to swith to an alternate style sheet with larger fonts..