SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Addict Feliciaf's Avatar
    Join Date
    Mar 2004
    Location
    New Zealand
    Posts
    385
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    text wrapping around image

    Hi

    I have been checking out some examples on the web to solve my prob but nothing seems to assist with how I have completed my CSS.
    I am wanting the text to wrap around an image when the image is in an absolute position. I have tried "float left" on the text but this placed the image on the other side of the text and I have tried "float right" but this places the text to the right of the width of the style (naturally.) I understand what's happening but I don't know the solution. Any help would be great. thanks.

    CSS here...

    html, body
    {
    height:90%;
    }
    /* end hack */

    body
    {
    padding:0;
    margin:0;
    background: #fff;
    color: #000000;
    font-family: verdana, Century Gothic, arial, sans-serif;
    }

    a:link, a:visited
    {
    color: #3D696A;
    text-decoration: underline;
    }

    a:hover
    {
    color: #9D0000;
    text-decoration: none;
    }

    #frame
    {
    position:relative;
    min-height:90%;
    width:750px;
    border:1px solid #5D0000;
    color: #000000;
    text-align:left;
    margin-left:auto;
    margin-right: auto;
    margin-bottom: -61px;
    }

    * html #outer{height:100%} /*for MOZ as IE treats height as min-height anyway*/

    #header{
    position:relative;
    width:750px;
    height:142px;
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
    background:#fff;
    color: #000000;
    background: url(../images/top-banner.jpg) #fff no-repeat left top;
    }

    div,p /*clear top margin for mozilla*/
    {
    margin-top:0;
    }

    #centrecontent
    {
    position:relative;
    z-index:1;
    margin-left: 127px;
    margin-top: 0;
    margin-bottom:12px;
    }

    #centrecontent table
    {
    width: 90%;
    margin-left: 0;
    margin-bottom: 10px;
    padding-left: 5px;
    border: solid 1px #9D0000;
    font-size: 70%;
    }

    #centrecontent table p
    {
    font-size: 100%;
    }

    #centrecontent table h2
    {
    font-size: 120%;
    }

    #centrecontent td
    {
    padding: 3px;
    }

    #centrecontent td li
    {
    margin-left: -25px;
    }


    #centrecontent p
    {
    font-size: 90%;
    line-height: 1.4em;
    font-family: arial, verdana, sans-serif;
    padding-right: 10px;
    }

    #centrecontent h1
    {
    font-family: verdana, arial, sans serif;
    font-size: 170%;
    color: #610000;
    margin-top: 0;
    }

    #centrecontent h2
    {
    font-family: verdana, arial, sans serif;
    font-size: 110%;
    color: #610000;
    margin-top: 0;
    }

    /**** styles for image left and right positions on products page ****/
    .products-left
    {
    float:left;
    width:400px;
    margin-left: 0;
    position:relative;
    }

    .products-left img
    {
    position: absolute;
    top: 0;
    }

    .products-left h3
    {
    font-family: verdana, arial, sans serif;
    font-size: 100%;
    color: #3D696A;
    margin-top: 0;
    margin-bottom: 10px;
    margin-left: 110px;
    border-bottom: solid 1px #9D0000;
    }

    .products-left .notes
    {
    font-family: arial, helvetica, sans serif;
    font-size: 70%;
    color: #000;
    margin-left: 110px;
    }

    .products-right
    {
    float:right;
    width:200px;
    margin-left: 0;
    position:relative;
    }

    /* main navigation */

    #left
    {
    position:relative;/*ie needs this to show float */
    width: 119px;
    height: 325px;
    float:left;
    padding-top: 0;
    background: url(../images/nav-bg.jpg) repeat-x center;
    font-family: verdana, arial, sans-serif;
    }

    * html #left
    {
    padding-top: 0;
    margin-right:-3px; /*fix gap in ie next to float and clear footer because we've moved float too far left*/
    }

    #left ul
    {
    list-style: none;
    margin: 0;
    padding: 0;
    border: none;
    }

    #left li
    {
    width: 119px;
    border-top: 1px solid #fff;
    margin: 0;
    padding: 0;
    font-size: 80%;
    }

    #left a:link, #left a:visited
    {
    display: block;
    padding: 5px;
    color: #fff;
    text-decoration: none;
    }

    #left a:hover
    {
    background-color: #ffe;
    color: #9D0000;
    font-weight: bold;
    }

    /* form style */

    #box
    {
    margin-top: auto;
    margin-bottom: 10px;
    margin-left: 5px;
    width: 300px;
    padding: 10px;
    }

    form
    {
    padding: 2px;
    }

    label
    {
    font-family: verdana, sans-serif;
    font-size: 10pt;
    font-weight: bold;
    cursor: pointer;
    cursor: hand;
    }

    input
    {
    background-color: #E7F7F7;
    color: #000;
    border: #9D0000 solid 1px;
    font-family: arial, sans-serif;
    font-size: 10pt;
    margin-bottom: 5px;
    }
    /**** this style does not work in IE ****/
    select

    {
    background-color: #fff;
    color: #000;
    border: #9D0000 solid 1px;
    font-family: arial, sans-serif;
    font-size: 12pt;
    }

    textarea
    {
    background-color: #E7F7F7;
    color: #000;
    border: #9D0000 solid 1px;
    font-family: arial, sans-serif;
    font-size: 10pt;
    }

    /***** this was made a class so it works in IE6 *****/
    .button
    {
    font-size: 10pt;
    font-weight: bold;
    background-color: #580406;
    border: #000 solid 1px;
    color: #fff;
    margin-top: 10px;
    width: 155px;
    }

    /********** this focus style does not work in IE6 *********/
    input:focus,
    select:focus,
    textarea:focus
    {
    background-color: #fff;
    border: solid 1px #000;
    color: #000;
    }

    /**** style for thanks page on completion of the form ****/
    #thanks
    {
    display: block;
    margin: auto 90px auto 10px;
    padding: 10px;
    color: #000;
    border: solid 1px #51B1B1;
    }

    /* footer style */

    #footer
    {
    position:relative;
    width:750px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    clear:both;
    height:50px;
    font-size: 0.7em;
    text-align:center;
    background: url(../images/footer-fade.gif) repeat-x center;
    z-index: 1;
    }

    #footer p
    {
    line-height: 0.8em;
    }

    #footer a:link, #footer a:visited
    {
    color: #000;
    text-decoration: underline;
    }

    #footer a:hover
    {
    color: #9D0000;
    text-decoration: none;
    }

    .website
    {
    font-size: 80%;
    }

    * html #footer {/*only ie gets this style*/
    \height:52px;/* for ie5 */
    he\ight:50px;/* for ie6 */
    }

    #clearfooter /*needed to make room for footer*/
    {
    clear:both;
    height:50px;
    }

    * > html #clearfooter /* ie mac styles */
    {
    float:left;
    width:100%;
    }

    html > body #minHeight /*safari wrapper thanks to Tim Connor*/
    {
    float:left;
    width:0px;
    height:90%;
    margin-bottom:-50px;
    }

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

    <html>
    <head>
    <title>Client Products | Architectural Promotions Limited</title>

    <link rel="stylesheet" href="css/pages.css" type="text/css" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="Content-Language" content="en-gb" />
    <meta name="rating" content="general" />
    <meta name="robots" content="noarchive,index" />
    <meta name="author" content="info@tagdesign.co.nz" />
    <meta name="MSSmartTagsPreventParsing" content="true" />
    <meta name="distribution" content="Global" />
    <meta name="description" content="APL representing construction companies, architects and engineers in marketing all building products." />
    <meta name="keywords" content="architects, designers, building industry specifiers, new zealand architecture products, building products, building engineers, christchurch, wellington, nz, commercial building products" />

    </head>

    <body>
    <div id="minHeight"></div><!-- for Safari browser -->
    <div id="frame">
    <div id="header"></div>
    <div id="left">
    <ul>
    <li><a href="/index.html" title="view the APL Welcome page.">home</a></li>
    <li><a href="/services.html" title="view the services page.">our services</a></li>
    <li><a href="/client-products.html" title="view the client products page.">client products</a></li>
    <li><a href="/clients-testimonials.html" title="view the client and testimonials page.">clients & testimonials</a></li>
    <li><a href="/useful-links.html" title="view the useful links page.">useful links</a></li>
    <li><a href="/contact.html" title="view the contact page.">contact info</a></li>
    </ul>
    </div>

    <div id="centrecontent">
    <!--centre content goes here -->
    <h1>Client Products</h1>
    <p>Architectural Promotions provides information to architects and engineers, covering a range of building products and services. Some of the current product categories are listed.
    </p>
    <div class="products-left">
    <h3>Flexibrace</h3>
    <img src="images/feat-image1sml.jpg" width="100" height="90">
    <span class="notes">The patented FLEXIBRACE wall bracing system is simple and saves time from design to the on-site application.
    FLEXIBRACE is an ideal option/span>

    </div>

    </div>
    <div id="clearfooter"></div> <!-- to clear footer -->
    </div><!-- end outer div -->

    <div id="footer"><a href="mailto:info@architecturalpromotions.co.nz?subject=email enquiry" title="email us.">Architectural Promotions Limited</a> Copyright 2005 | <a href="#" title="view our disclaimer.">Disclaimer</a><br /><br />
    <span class="website">website design and construction by <a href="#" target="_blank" title="visit this site.">Tag Design Limited</a></span>
    </div>

    </body>
    </html>

  2. #2
    SitePoint Evangelist
    Join Date
    Aug 2004
    Posts
    428
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    can you post a link to your problem

  3. #3
    SitePoint Evangelist figbeam's Avatar
    Join Date
    Jun 2004
    Location
    Sweden
    Posts
    508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    and highlight the place where the problem occurs (that was a lot of code...)

  4. #4
    SitePoint Addict Feliciaf's Avatar
    Join Date
    Mar 2004
    Location
    New Zealand
    Posts
    385
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi there
    sorry 'bout that. Here is the link to the page:
    http://www.architecturalpromotions.c...-products.html

    and here's as extract from the css that I'm having probs with trying to wrap the text around the image:

    /**** styles for image left and right positions on products page ****/
    .products-left
    {
    float:left;
    width:350px;
    margin-left: 0;
    position:relative;
    }

    .products-left img
    {
    position: absolute;
    top: 0;
    }

    .products-left h3
    {
    font-family: verdana, arial, sans serif;
    font-size: 100%;
    color: #3D696A;
    margin-top: 0;
    margin-bottom: 10px;
    margin-left: 110px;
    border-bottom: solid 1px #9D0000;
    }

    .products-left .notes
    {
    font-family: arial, helvetica, sans serif;
    font-size: 70%;
    color: #000;
    margin-left: 110px;
    }

    .products-right
    {
    float:right;
    width:200px;
    margin-left: 0;
    position:relative;
    }

    thanks heaps.

  5. #5
    SitePoint Evangelist figbeam's Avatar
    Join Date
    Jun 2004
    Location
    Sweden
    Posts
    508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's difficult to get text to float around a positioned block. For this you should use floats.

    I floated the image left. For this to work properly, the image has to be the first element in the .products-left div.

    Then everything else should float around it. But it doesn't, because h3 is a block element and pushes down below the float. To counter this I've made the h3 display: inline;. This also means the text will begin right after the h3, on the same line, so I also inserted a <br /> in the HTML.

    The CSS is:

    Code:
    /**** styles for image left and right positions on products page ****/
    .products-left
    {
        float:left;
        width:350px;
    }
    
    .products-left img {
        float: left;
        margin-right: 10px; /* margin to h3 and text */
              /* you might want a bottom margin also */
    }
    
    .products-left h3
    {
        display: inline; /* to not push down below floated img */
        font-family: verdana, arial, sans serif;
        font-size: 100%;
        color: #3D696A;
        margin-top: 0;
        margin-bottom: 10px;
        border-bottom: solid 1px #9D0000;
    }
    
    .products-left .notes
    {
        font-family: arial, helvetica, sans serif;
        font-size: 70%;
        color: #000;
    }
    and I modified the HTML as well:

    Code:
    <div class="products-left">
        <img src="client-products_files/feat-image1sml.jpg" height="90" width="100">
        <h3>Flexibrace</h3><br /> <!-- push down text from h3 line -->
        <span class="notes">The patented FLEXIBRACE wall bracing system is simple 
        and saves time from design to the on-site application. 
        FLEXIBRACE is an ideal option:</span>
    </div>
    If you add more text to the .notes span you'll see that it floats nicely around the picture.

    I've checked this in IE, FF, NN and Opera (only the latest models) and it seems to work just fine.

  6. #6
    SitePoint Addict Feliciaf's Avatar
    Join Date
    Mar 2004
    Location
    New Zealand
    Posts
    385
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks so much figbeam. I would not've been able to work that one out by myself. I appreciate your time with this. I also need to float an image on the right side of the page after the heading and notes of the first image - would the best way to display this in a div be to mirror the products-left div to a products-right div which I had already started to do in my CSS?

    oh - and by the way - your explanations are very very easy to regurgitate - cheers and thanks in advance

  7. #7
    SitePoint Evangelist figbeam's Avatar
    Join Date
    Jun 2004
    Location
    Sweden
    Posts
    508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To the right of the .products-left div or all the way to the right of the page?

    In the first case you just put it in the HTML right after the .products-left div. As an image is displayed inline by default it will snug nicely up to the top right corner of the .products-left div. You might want a bit of margin-left on that.

    You could also put it in a div of it's own, which then would have to be floated left as it is a block element.

    Code:
    <img src="image.jpg" height="90" width="100" style="margin-left: 20px;">
    
                                or
    
    <div style="float: left; margin-left: 20px;">
    	<img src="image.jpg" height="90" width="100">
    </div>
    In the second case you can put it in a div floated right or just float the image right. Here you might want a bit of margin-right.

    Code:
    <div style="float: right; margin-right: 20px;">
    	<img src="image.jpg" height="90" width="100">
    </div>
                                or
    
    <img src="image.jpg" height="90" width="100" style="float: right; margin-right: 20px;">
    You can of course define a class for either the img or div if you like.

    Beware that the combined width of the floats is less then the width of the containing div.

  8. #8
    SitePoint Addict Feliciaf's Avatar
    Join Date
    Mar 2004
    Location
    New Zealand
    Posts
    385
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh - OK. I see what you are saying. I will require a separate div because I will basically be mirroring the product-left div but instead of the image being on the left it will be on the right of the text, so all the content of both divs will be in the centre of each image - the left content will be to the right of the left image and the right content will be to the left of the right image - I hope that makes sense. So I guess I will make a separate div. however, what you have outlined above is great to know for another way of doing it. cheers for that.

  9. #9
    SitePoint Addict Feliciaf's Avatar
    Join Date
    Mar 2004
    Location
    New Zealand
    Posts
    385
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh no - help! please, the right product div has not worked at all and it's gone all funky... it is not as easy as I thought. I thought I could mirror what I had done for the left-product div so the text wraps around the image but this has not worked at all. Where am I going wrong here? The <hr> is floating in space in IE and the <ul> are not wrapping around the image in all browsers. And the <hr> in IE will not position under the <h3> at all. Can you please let me know what I have done wrong here?
    Here is the css div I need to correct:

    .products-right
    {
    width:90%;
    font-size: 80%;
    font-family: arial, verdana, sans-serif;
    }

    .products-right hr
    {
    width: 90%;
    border: 0;
    border-top: solid 1px #9D0000;
    height: 1px;
    }

    .products-right h3
    {
    float:right; /* to not push down below floated img */
    font-family: verdana, arial, sans-serif;
    font-size: 130%;
    color: #3D696A;
    margin-top:0;
    }

    .products-right p
    {
    float:right;
    color: #000;
    margin-top: 0;
    }

    .products-right ul
    {
    float:right;
    font-size: 90%;
    margin-top: -5px;
    }

    .products-right li
    {
    line-height: 1.2em;
    }

    and here is the page to view:
    http://www.architecturalpromotions.c...-products.html

    and here is the rest of the css to view should you require it:
    http://www.architecturalpromotions.c.../css/pages.css

  10. #10
    SitePoint Evangelist figbeam's Avatar
    Join Date
    Jun 2004
    Location
    Sweden
    Posts
    508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, here comes the lecture:

    You have apparently tried to apply some advanced layout without knowing really how to master it. I don't know how to make this work either. I do however know how to make this look good with a basic design, and throw in a few tips along the way.

    I removed all the design-specific code for whatever layout you are trying to copy and also all hacks.

    I'v seen that you have a lot of superfluos code which clutters the CSS. I've removed most of it. A lot has been font-family specs. Now, font-family is inherited, and I've specified it in the body section and after that only where it differs from default. I just removed a lot of them too, the sans-serif fonts you use are pretty much alike. (I also removed all CSS that didn't apply to this specific HTML)

    By the way, the name of the generic font is "sans-serif", not "sans serif". Without the hypen, it won't work.

    You float way too much. I think this may be a poor understanding of floats, or I just don't understand what you are trying to do. I've removed all but a few. I have replaced all percentages and such with a very basic design with a container div#frame which contains the header, menu, content and footer. The menu and content are floated left. Aside from the content images, thats all that floats.

    I added alt propertys to the images and ended all tags. Now the HTML validates. You sohuld always validate your code if you are experiencing difficulties, as fixing the errors might also fix the problem. Markup Validation Service and CSS Validation Service.

    When you are experiencing problems with layout it's usually helpful to give each div a different background color. In that way you can easily see where they are and most probably which div is faulty.

    In the footer, you don't have to use a span for the .website style. Just give this class to a paragraph. Then you won't have to use <br /> to get distance to the next line, the p margin will take care of that.

    Well, it's a lot of text here. I uploaded the site here so you can see the result. Css is here.

    On to the code. HTML:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    	<title>Client Products | Architectural Promotions Limited</title>
    	<link rel="stylesheet" href="pages.css" type="text/css" />
    	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    	<meta http-equiv="Content-Language" content="en-gb" />
    	<meta name="rating" content="general" />
    	<meta name="robots" content="noarchive,index" />
    	<meta name="author" content="info@tagdesign.co.nz" />
    	<meta name="MSSmartTagsPreventParsing" content="true" />
    	<meta name="distribution" content="Global" />
    	<meta name="description" content="APL representing construction companies, architects and engineers in marketing all building products." />
    	<meta name="keywords" content="architects, designers, building industry specifiers, new zealand architecture products, building products, building engineers, christchurch, wellington, nz, commercial building products" />
    </head>
    
    <body>
    <div id="frame"> 
    	<div id="header"></div>
    	<div id="left"> 
    		<ul>
    			<li><a href="http://www.architecturalpromotions.co.nz/index.html" title="view the APL Welcome page.">home</a></li>
    			<li><a href="http://www.architecturalpromotions.co.nz/services.html" title="view the services page.">our services</a></li>
    			<li><a href="http://www.architecturalpromotions.co.nz/client-products.html" title="view the client products page.">client products</a></li>
    			<li><a href="http://www.architecturalpromotions.co.nz/clients-testimonials.html" title="view the client and testimonials page.">clients &amp; testimonials</a></li>
    			<li><a href="http://www.architecturalpromotions.co.nz/useful-links.html" title="view the useful links page.">useful links</a></li>
    			<li><a href="http://www.architecturalpromotions.co.nz/contact.html" title="view the contact page.">contact info</a></li>
    		</ul>  
    	</div> <!-- End of div#left -->
    
    	<div id="centrecontent"> 
    	<!--centre content goes here -->
    		<h1>Client Products</h1>
    				
    		<p>Architectural Promotions provides information to architects and 
    		engineers, covering a range of building products and services. Some 
    		of the current product categories are listed. </p>
    				
    		<div class="products-left">
    			<img src="images/feat-image1sml.jpg" height="90" width="100" alt="Flexibrace" />
    			<h3>Flexibrace</h3> 
    			<hr />
    			<p>The patented FLEXIBRACE wall bracing system is simple 
    			and saves time from design to the on-site application. 
    			FLEXIBRACE is an ideal option: </p>
    			<br />
    			<ul>
    				<li>for achieving high bracing values in restricted spaces</li>
    				<li>as a retro-fit option when additional bracing is required</li>
    				<li>in garage designs where un-lined is the preferred option</li>
    			</ul>
    			<p>Features of the FLEXIBRACE system:</p>
    			<ul>
    				<li>selection tables provided</li>
    				<li>designed for both wind and earthquake according to NZS3604:1999 section 8</li>
    				<li>options cover wall panels 400-1200mm wide and 2100-3000mm stud heights</li>
    				<li>can be used stand-alone or in conjunction with standard wallboard materials depending on the Bracing Unit demand</li> 
    				<li>struts fit within the timber frame and quick and are easy to install utilising a single screw fixing either end</li>
    				<li>no need to rip down frames to accommodate sheets of plywood for bracing</li>
    				<li>no need to cut and fit additional blocking to accommodate traditional bracing sheets</li>
    			</ul>
    		</div> <!-- End of div#products-left -->
    				
    		<div class="products-right">
    			<img src="images/feat-image1sml.jpg" height="90" width="100" alt="Flexibrace" />
    			<h3>Flexibrace</h3> 
    			<hr />
    			<p>The patented FLEXIBRACE wall bracing system is simple 
    			and saves time from design to the on-site application. 
    			FLEXIBRACE is an ideal option: </p>
    			<br />
    			<ul>
    				<li>for achieving high bracing values in restricted spaces</li>
    				<li>as a retro-fit option when additional bracing is required</li>
    				<li>in garage designs where un-lined is the preferred option</li>
    			</ul>
    			<p>Features of the FLEXIBRACE system:</p>
    			<ul>
    				<li>selection tables provided</li>
    				<li>designed for both wind and earthquake according to NZS3604:1999 section 8</li>
    				<li>options cover wall panels 400-1200mm wide and 2100-3000mm stud heights</li>
    				<li>can be used stand-alone or in conjunction with standard wallboard materials depending on the Bracing Unit demand</li> 
    				<li>struts fit within the timber frame and quick and are easy to install utilising a single screw fixing either end</li>
    				<li>no need to rip down frames to accommodate sheets of plywood for bracing</li>
    				<li>no need to cut and fit additional blocking to accommodate traditional bracing sheets</li>
    			</ul>
    		</div> <!-- End of div#products-right -->
    
    	</div> <!-- End of centrecontent -->
    		<div id="footer">
    			<p><a href="mailto:info@architecturalpromotions.co.nz?subject=email%20enquiry" title="email us.">Architectural Promotions Limited</a> Copyright 2005 | <a href="#" title="view our disclaimer.">Disclaimer</a></p>
    			<p class="website">website design and construction by <a href="#" title="visit this site.">Tag Design Limited</a></p>
    		</div> <!-- End of div#footer -->
    </div><!-- end of frame div -->
    </body>
    </html>
    CSS:
    Code:
    * 
    {
    	margin: 0; /* this takes care of all margins and padding */
    	padding: 0; /* for all elements! */
    }
    
    body 
    {
    	background: white; /* You don't need to specify bg and colors in any descendants */
    	color: black;      /* unless it's to be something other than black and white */
    	font-family: verdana, arial, sans-serif;
    	/* And that goes for font aswell */
    	text-align: center; /* For centering in ie5.x */
    }
    
    p
    {
    margin-bottom: 10px; /* Give p some margin or they will stick together */
    }
    
    a:link, a:visited
    {
    	color: #3D696A;
    	text-decoration: underline;
    }
    
    a:hover
    {
    	color: #9D0000;
    	text-decoration: none;
    }
    
    #frame
    {
    	width:750px;
    	border:1px solid #5D0000;
    	text-align:left; /* To counter ie5.x centering hack */
    	margin-left:auto; /* Center in compliant browsers */
    	margin-right: auto; /* Center in compliant browsers */
    }
     
    #header{
    	height:142px;
    	background: url(images/top-banner.jpg) #fff no-repeat left top;
    }
    
    /* main navigation */
    #left 
    {
    	width: 119px;
    	height: 325px;
    	float:left;
    	background:  url(images/nav-bg.jpg) repeat-x center;
    	margin-right: 10px; /* To push the content a bit to the right */
    }
    
    #left ul
    {
    	list-style: none;
    }
    
    #left li
    {
    	width: 119px;
    	border-top: 1px solid #fff;
    	font-size: 80%;
    }
    
    #left a:link, #left a:visited
    {
    	display: block;
    	padding: 5px;
    	color: white;
    	text-decoration: none;
    }
    
    #left a:hover
    {
    	background-color: #ffe;
    	color: #9D0000;
    	font-weight: bold;
    }
    
    /* main content */
    #centrecontent 
    {
    	float: left;
    	width: 600px; /* Must fit in the remaining space of the containing div */
    }
    
    #centrecontent  h1
    {
    	font-size: 170%;
    	color: #610000;
    	margin-bottom: 20px; /* Or about 0.7em if you like */
    }
    
    #centrecontent  h2
    {
    	font-size: 110%;
    	color: #610000;
    	margin-bottom: 15px;
    }
    
    #centrecontent p
    {
    	font-family: arial, sans-serif;
    	font-size: 90%;
    	line-height: 1.4em;
    	margin-bottom: 15px;
    }
    
    /**** styles for image left and right positions on products page ****/
    .products-left
    {
        font-size: 80%;
    	overflow: hidden; /* To hide the part of <hr /> outside the div */
    	margin-bottom: 20px;
    }
    
     .products-left img 
     {
      	float: left; 
      	padding-right: 20px;
     }
      
    .products-left h3
    {
        font-size: 130%;
        color: #3D696A;
    }
    
    .products-left hr
    {
    	border: 0;
    	border-top: solid 1px #9D0000;
    	height: 1px;
    	margin: 10px 0 5px -20px;
    }
    
    .products-left ul
    {
        font-size: 90%;
    	margin: 0 0 10px 40px;
    } 
    
    .products-left li
    {
    	line-height: 1.2em;
    }
    
    .products-right
    {
        font-size: 80%;
    	overflow: hidden; /* To hide the part of <hr /> outside the div */
    	margin-bottom: 20px;
    }
    
     .products-right img 
     {
      	float: right; 
      	padding-left: 20px;
     }
     
    .products-right h3
    {
        text-align: right;
        font-size: 130%;
        color: #3D696A;
    }
     
    .products-right hr
    {
    	border: 0;
    	border-top: solid 1px #9D0000;
    	height: 1px;
    	margin: 10px -20px 5px 0;
    }
    
    .products-right ul
    {
        font-size: 90%;
    	margin: 0 0 10px 40px;
    } 
    
    .products-right li
    {
    	line-height: 1.2em;
    }
    
    /* footer style */
    #footer 
    {	
    	margin-top: 10px;
    	clear:both;
    	height:50px;
    	font-size: 0.7em;
    	text-align:center;
    	background:  url(images/footer-fade.gif) repeat-x center;
    }
    
    #footer p
    {
    	line-height: 0.8em;
    }
    
    #footer a:link, #footer a:visited
    {
    	color: #000;
    	text-decoration: underline;
    }
    
    #footer a:hover
    {
    	color: #9D0000;
    	text-decoration: none;
    }
    
    .website
    {
    	font-size: 80%;
    }
    As you can see, the CSS is much simpler now. Study it and see if you can understand what I've done. After you have gotten the basic layout etc. to function the way you want it's time to choose different fonts for everythin if you want to. At the beginning of the design, they just make the code hard to read.

    When you understand how this works you can go on. If you really need to have a footer at the bottom of the page when the page is less than 100% high, then you can study the art of advanced cross-browsing that's required. As for now, I think you'll be fine with this solution as long as you keep your content long enough.

    Take a look at the sticky threads at the top of the css forum, and also the layout examples that Paul O'B has.

  11. #11
    SitePoint Evangelist figbeam's Avatar
    Join Date
    Jun 2004
    Location
    Sweden
    Posts
    508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Forgot: I also removed all positioning as you don't need it in this simple design.

    Tested in IE, Opera, NN and FF. Works fine. Since I havent used anything really ugly, this should work fine in most browsers (I think...).
    Last edited by figbeam; Aug 14, 2005 at 08:42. Reason: Forgot again

  12. #12
    SitePoint Addict Feliciaf's Avatar
    Join Date
    Mar 2004
    Location
    New Zealand
    Posts
    385
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow - that would've taken me ages to edit all that. Yes, I was getting very lost there I must admit with the CSS. I get really confused with it at times - not always tho'. Some sites I do better than others depending on the layout, as you say, this one I was complicating it for myself. And you're right in saying that I haven't really grasped what some styles are used for and I also find it hard what style I can use together with another or as a child div etc. I haven't quite connected the dots so to speak, but I'm getting there.

    I do usually validate my code but got carried away this time. And the alt tags would've come once I had the style sorted out. However, thanks so much for doing that for me and thanks again for your help with this. I'll check out closely what you have done.
    cheers again.


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
  •