1 Reply Latest reply on Jul 25, 2008 4:29 PM by Newsgroup_User

    css question

    Hydrowizard Level 1
      Hello please can I get some advice on this, I'm still quite a newbie on this css stuff.
      1)The div id="cont" drops down
      2)The whole div id="central" (which contains the cont div) is not closeup ie there is a gap between it and the topnavigation
      3)I using a div as clearboth I don't know if that is a correct way of doing it This is the short code that needs no images and can be seen but cutting and pasting if needs be.

      It is validated strict xhtml-I don't have any non-domained hosting that I can show you the site live on. Thank you for any advice
        • 1. Re: css question
          Level 7
          Here's a quick and dirty CSS Right Column, Fixed Width Template.
          http://alt-web.com/right-column-fixed-width-template.html

          View Page Source to see the underlying CSS and Html code. You can copy &
          paste it into a test page to work with.

          You really only need one float for the right side column. Just let your
          content naturally flow around it and it will take care of itself.


          Best of luck with your project,
          --Nancy O.
          Alt-Web Design & Publishing
          www.alt-web.com



          "Hydrowizard" <webforumsuser@macromedia.com> wrote in message
          news:g6cdl8$2e6$1@forums.macromedia.com...
          > Hello please can I get some advice on this, I'm still quite a newbie on
          this
          > css stuff.
          > 1)The div id="cont" drops down
          > 2)The whole div id="central" (which contains the cont div) is not closeup
          ie
          > there is a gap between it and the topnavigation
          > 3)I using a div as clearboth I don't know if that is a correct way of
          doing it
          > This is the short code that needs no images and can be seen but cutting
          and
          > pasting if needs be.
          >
          > It is validated strict xhtml-I don't have any non-domained hosting that I
          can
          > show you the site live on. Thank you for any advice
          >
          > <!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" xml:lang="en" lang="en" >
          >
          > <head><meta http-equiv="content-type" content="text/html;charset=utf-8"
          > /><title>site.org.uk</title>
          > <style type="text/css">
          > /* universal */
          > html, body { background-color : #fff; color : #000; margin : 0; padding :
          > 0;}body {font : 100% tahoma, arial, sans-serif; color : #4d4d4d;}
          > .clearboth { clear: both }
          > a {text-decoration: none;}
          >
          > /*layout*/
          > #sitecontainer { float: left; width: 775px; margin-left: 10px;}
          >
          > /* topnav and header */
          > #header { clear: right; background: #ffffff; float: left; padding-bottom:
          > 13px; color: #026d9f; padding-top: 15px}
          > #sitelogo { padding-left: 20px; padding-right: 19px;}.logo {
          > border-top-width:0px; border-left-width: 0px; border-bottom-width: 0px;
          > border-right-width: 0px;}
          > #topnav { padding-right : 0; border-top : 4px solid #2B67EF; margin : 0;
          width
          > : auto; clear : both; min-height : 1.0em; height: 1.0em; border-bottom:
          3px
          > solid #ffffff;}
          > #topnav li { display : inline; background : #9D0A6B no-repeat left top;
          float
          > : left;width : 16.705%; height : auto;}
          > #topnav a { border-right : 1px solid #2B67EF; display : block; font : 90%
          > tahoma, arial, sans-serif; color : #fff; text-align : center;}
          > #topnav a:hover {background: #fcda2e no-repeat left top; text-decoration:
          none}
          >
          > /*center content*/
          > #central { float: left; width: 100%; padding-top: 0px;}
          > #contenthome { float: left; width: 544px; }
          >
          > /* right content */
          > #cont { float: right; margin-left: 2px; width: 228px; border-top : 0px
          solid
          > #2B67EF;}
          > .dividerstrip {border-right: #4680C3 1px solid; border-top: #4fa5ca 0px
          solid;
          > font-size: 3pt; background: #017db2; border-left: #2791be 1px solid;
          > border-bottom: #005b82 1px solid}
          > .conth {padding: 10px; font: 80% tahoma, arial, sans-serif;
          padding-bottom:
          > 5px; color: #ffffff; padding-top: 5px; background-color: #2586b3;}
          > .smallintro {padding: 8px; float: right; width: 218px; font: 90% tahoma,
          > arial, sans-serif;}
          > .smallintro img {padding: 8px; float: left;}
          >
          > /* footer css */
          > #footer { clear :both; text-align : center; padding: 10px 0; width :
          100%;
          > }#footer p {font-size : 75%; line-height: 2; margin-top : 0; margin-bottom
          :
          > 0;}</style></head>
          >
          > <body><div id="sitecontainer">
          > <div id="header">
          > <div id="sitelogo"><a href="indexone.html"><img class="logo" alt=""
          > src="site/sitelogo.gif" height="91" width="300"/></a></div></div>
          >
          > <div><ul id="topnav"> <li><div class="topmenuitem"><a href="">Home</a>
          > </div></li> <li><div class="topmenuitem"><a href="">About site</a>
          </div></li>
          > <li><div class="topmenuitem"><a href="">site volunteers</a> </div></li>
          > <li><div class="topmenuitem"><a href="">site solutions</a> </div></li>
          <li><div
          > class="topmenuitem"><a href="">site Forum</a> </div></li> <li><div
          > class="topmenuitem"><a href="">Support Us</a> </div></li></ul></div>
          >
          > <div id="central">
          > <div id="contenthome"><div id="clearboth"><img height="148"
          alt="Homepage"
          > src="site/Homepage-1.jpg" width="544" />
          >
          > <div class="contentone">contentone</div><div
          > class="contenttwo">contenttwo</div></div></div>
          >
          > <!-- right navigation -->
          > <div id="cont"><div class="dividerstrip"> </div>
          > <div class="conth">Events</div>
          > <div class="smallintro"><p><img src="site/charity.jpg" alt="" width="65"
          /><a
          > href="">site, site, site</a><br />site, site, site, site, site, site,
          site,
          > site, site, site, site, site, site, site, site, site, site, site, site,
          site,
          > site, site, site, site, site, site, site.</p></div>
          > <div class="smallintro"><p><img src="site/charity.jpg" alt=""
          width="65"/><a
          > href="">site, site, site</a><br />site, site, site, site, site, site,
          site,
          > site, site, site, site, site, site, site, site, site, site, site, site,
          site,
          > site, site, site, site, site, site, site.</p></div><div
          > class="clearboth"><br/></div>
          >
          > <div class="dividerstrip"> </div>
          > <div class="conth">News and Features</div><div class="smallintro"><p><img
          > src="site/charity.jpg" alt="" width="65" /><a href="">site, site,
          site</a><br
          > />site, site, site, site, site, site, site, site, site, site, site, site,
          site,
          > site, site, site, site, site, site, site, site, site, site, site, site,
          site,
          > site.</p></div>
          >
          > <div class="smallintro"> <p><img src="site/charity.jpg" alt="" width="65"
          /><a
          > href="">site, site, site</a><br />site, site, site, site, site, site,
          site,
          > site, site, site, site, site, site, site, site, site, site, site, site,
          site,
          > site, site, site, site, site, site, site.</p></div>
          >
          > <div class="clearboth"></div></div></div>
          >
          > <div id="footer">
          > <div id="footertext"><p>copyright etc.
          > icons</p></div></div></div></body></html>
          >