SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Thread: CSS Questions

  1. #1
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Questions

    Ok ... I'm not sure what I've done wrong here.

    http://ericanque.co.uk/home.php

    If you look towards the left you'll see several gradients and a table containing text. I've tried to do the same with the out-of-place gradients that lie scattered on the page only place them on the right.

    What should I do to place them on the same line as the classes on the right only to place them on the left?

    The classes are named .category .subcategory .nav1 and .lowcategory.


    Code:
    <!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>The Betrothal of Ericanque</title>
    <meta http-equiv="Content-Type" content="text/html;
    charset=iso-8859-1" />
    <meta http-equiv="Content-Language" content="en-us" />
    <link href="/.css" rel="stylesheet" type="text/css" />
    </head>
    
    
    <style type="text/css">
    
    BODY { font-family: Verdana, Tahoma, Arial, sans-serif; font-size: 10px; *color: #262223; *margin:0px 10px 0px 10px;background-color:#000000 *}
    BODY {background-image:url(/); background-attachment: fixed;}
    A:link {font-family:Verdana,Arial,sans-serif; font-size:11px/18px; font-weight:bold; color: #262223;}
    A:visited {font-family:Verdana,Arial,sans-serif; font-size:11px/18px; font-weight:bold; color: #262223;}
    A:active {font-family:Verdana,Arial,sans-serif; font-size:11px/18px; font-weight:bold; color: #262223;}
    A:hover {font-family:Verdana,Arial,sans-serif; font-size:11px/18px; font-weight:bold; color: #262223;}
    
    <!--
    A{text-decoration:none}
    -->
    
    .logo { float: center; width:80%; padding: 5px; padding-left: 70px; background-color: #000000; }
    
    .base { float: center; width:80%; height:28px; background-repeat: no-repeat; background-image: url(http://ericanque.co.uk/uploads/images/v1/base.jpg); background-color: #E1E7F5; }
    
    .base2 { float: center; width:80%; height:28px; background-repeat: no-repeat; background-image: url(http://ericanque.co.uk/uploads/images/v1/base2.jpg); background-color: #E1E7F5; }
    
    .warning { float: center; width:60%; padding: 5px; padding-left: 70px; text-align: left; background-repeat: no-repeat; background-image: url(/uploads/images/v1/warning.jpg); background-position: left; background-color: #EDF1AB; border-top: 1px solid #A7AB65; border-bottom: 1px solid #A7AB65; border-right: 1px solid #A7AB65; border-left: 1px solid #A7AB65;
    }
    
    .middle { float: center; height: 100%; width:80%; padding: 0px; background-color: #E1E7F5; text-align: center }
    
    .table1 { float: left; width:60%; padding:3px 0px 3px 0px; text-align: left; background-repeat: no-repeat; background-image: url(/); background-position: right; background-color: #EBECFE; border-top: 0px solid #D7DBFF; border-bottom: 1px solid #D7DBFF; border-right: 1px solid #D7DBFF; border-left: 1px solid #D7DBFF }
    
    .category { float: left; width:60%; height: 20px; text-align:center; vertical-align:middle; font-weight: bold; color:#FFFFFF; clear: none; padding:0px 0px 1px 0px; background-image: url(http://ericanque.co.uk/uploads/images/v1/category.jpg); border-top: 4px solid #000000; border-bottom: 1px solid #000000; border-right: 1px solid #000000; border-left: 1px solid #000000 }
    
    .subcategory { float: left; width:60%; height: 16px; text-align:right; vertical-align:middle; font-weight: bold; color:#262223; clear: none; padding:1px 0px 0px 0px; background-image: url(http://ericanque.co.uk/uploads/images/v1/subcategory.jpg); border-top: 0px solid #D7DBFF; border-bottom: 0px solid #D7DBFF; border-right: 1px solid #D7DBFF; border-left: 1px solid #D7DBFF }
    
    .lowcategory { float: left; width:60%; padding: 5px; height: 17px; text-align:left; vertical-align:middle; font-weight: bold; color:#262223; clear: none; padding:0px 0px 0px 0px; background-image: url(http://ericanque.co.uk/uploads/images/v1/lowcategory.jpg); border-top: 0px solid #D7DBFF; border-bottom: 1px solid #D7DBFF; border-right: 1px solid #D7DBFF; border-left: 1px solid #D7DBFF }
    
    .lowlinksimg { float: center; height 17px; width:90%; padding: 0px 0px 17px 10px; text-align: center; background-image: url(http://ericanque.co.uk/uploads/images/v1/lowcategory.jpg); background-color: #EBEDFF; background-position: center; border-top: 0px solid #BBC1FF; border-bottom: 1px solid #BBC1FF; border-right: 1px solid #BBC1FF; border-left: 1px solid #BBC1FF }
    
    .lowlinks { float: center; width:90%; padding: 5px; text-align: center; background-color: #EBEDFF; background-position: center; border-top: 1px solid #BBC1FF; border-bottom: 1px solid #BBC1FF; border-right: 1px solid #BBC1FF; border-left: 1px solid #BBC1FF }
    
    .category1 { float: right; width:30%; text-align:center; vertical-align:middle; font-weight: bold; color:#FFFFFF; padding:4px 0px 6px; background-image: url(http://ericanque.co.uk/uploads/images/v1/category.jpg); border-top: 4px solid #000000; border-bottom: 0px solid #000000; border-right: 1px solid #000000; border-left: 1px solid #000000 }
    
    .subcategory1 { float: right; width:30%; height: 16px; text-align:right; vertical-align:middle; font-weight: bold; color:#262223; clear: none; padding:1px 0px 0px 0px; background-image: url(http://ericanque.co.uk/uploads/images/v1/subcategory.jpg); border-top: 0px solid #D7DBFF; border-bottom: 0px solid #D7DBFF; border-right: 1px solid #D7DBFF; border-left: 1px solid #D7DBFF }
    
    .lowcategory1 { float: right; width:30%; padding: 5px; height: 17px; text-align:left; vertical-align:middle; font-weight: bold; color:#262223; clear: none; padding:0px 0px 0px 0px; background-image: url(http://ericanque.co.uk/uploads/images/v1/lowcategory.jpg); border-top: 0px solid #D7DBFF; border-bottom: 1px solid #D7DBFF; border-right: 1px solid #D7DBFF; border-left: 1px solid #D7DBFF }
    
    .nav1 { float: right; width:30%; padding:3px 0px 3px 0px; text-align: left; background-repeat: no-repeat; background-image: url(/); background-position: right; background-color: #EBECFE; border-top: 0px solid #D7DBFF; border-bottom: 1px solid #D7DBFF; border-right: 1px solid #D7DBFF; border-left: 1px solid #D7DBFF }
    
    </style>
    
    <div align="center">
    <div class="logo"><div align="left">
    <a href="http://ericanque.co.uk/home.php"><img src="http://ericanque.co.uk/uploads/images/v1/home.jpg"></a><img src="http://ericanque.co.uk/uploads/images/v1/line.jpg"><a href="http://ericanque.co.uk/policies/terms.php"><img src="http://ericanque.co.uk/uploads/images/v1/terms.jpg"></a><img src="http://ericanque.co.uk/uploads/images/v1/line.jpg"><a href="http://ericanque.co.uk/policies/privacy.php"><img src="http://ericanque.co.uk/uploads/images/v1/privacy.jpg"></a><img src="http://ericanque.co.uk/uploads/images/v1/line.jpg"><a href="http://ericanque.co.uk/policies/etiquette.php"><img src="http://ericanque.co.uk/uploads/images/v1/etiquette.jpg"></a><img src="http://ericanque.co.uk/uploads/images/v1/line.jpg"><a href="http://ericanque.co.uk/contact.php"><img src="http://ericanque.co.uk/uploads/images/v1/contact.jpg"></a><div align="right"><a href="http://ericanque.co.uk/home.php"><img src="http://ericanque.co.uk/uploads/images/v1/logo.jpg"></a></div></div>
    
    <div align="center">
    <img src="http://ericanque.co.uk/uploads/images/v1/leftlogo.jpg"><img src="http://ericanque.co.uk/uploads/images/v1/rightlogo.jpg">
    </div>
    <br />
    <script type="text/javascript"><!--
    google_ad_client = "pub-9575253358525712";
    google_ad_width = 728;
    google_ad_height = 90;
    google_ad_format = "728x90_as";
    google_ad_type = "text_image";
    google_ad_channel ="";
    google_color_border = "000000";
    google_color_bg = "000000";
    google_color_link = "FFFFFF";
    google_color_text = "DFDFDF";
    google_color_url = "FFFFFF";
    //--></script>
    <script type="text/javascript"
     *src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
    </script>
    <br /><br />
    <div class="middle">
    
    <br /><br /><br /><br />
    <br /><br /><br />
    
    <div class="category1">
    <div style="float:left"><img src="http://ericanque.co.uk/uploads/images/v1/leftcategory.jpg"/></div>Welcome!<div style="float:right"><img src="http://ericanque.co.uk/uploads/images/v1/rightcategory.jpg"/></div>
    </div>
    <div class="subcategory1">
    </div>
    <div class="nav1">
    
    </div>
    <div class="lowcategory1"></div>
    <br /><br /><br /><br /><br /><br />
    <div class="category">
    <div style="float:left"><img src="http://ericanque.co.uk/uploads/images/v1/leftcategory.jpg"/></div>Welcome!<div style="float:right"><img src="http://ericanque.co.uk/uploads/images/v1/rightcategory.jpg"/></div>
    </div>
    <div class="subcategory">
    Posted by Ben | 02 July 2006
    </div>
    <div class="table1">
    The opinions expressed on these pages are those of their respective authors, not necessarily of The Betrothal of Ericanque. I would like to remind you that the Zoo Keeper has peripherally requested that you <i>do not</i> feed the staff. After a series of complaints from the members it has been decided that the staff members are at risk and therefore must be preserved and protected. What a crazy world we live in don't you think! Oh and please remember to avoid Audentia; he's been known to bite. Vicious creature, he should be put down right? Great!
    </div>
    <div class="lowcategory"></div>
    
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    
    This website has been visited 271 times!
    <br /><br />
    
    Lo Pan and Superman recomend you download <a href="http://opera.com" target="main_frame">Opera</a>!<br />
    Hosted by <a href="http://varhosting.net" target="main_frame">VARhosting</a> | Powered by Nickelodeon&trade; and Pixie Dust&trade;<br /><br />
    <div align="center">
    <div class="lowlinks">
    <a href="/home.php" target="main_frame">Home</a> | <a href="http://forums.ericanque.co.uk/index.php" target="main_frame">Forums</a> | <a href="/terms.php" target="main_frame">Terms of Service</a> | <a href="/privacy.php" target="main_frame">Privacy Policy</a> | <a href="/etiquette.php" target="main_frame">Etiquette Policy</a> | <a href="/advertise.php" target="main_frame">Advertise</a> | <a href="/credits.php" target="main_frame">Credits</a> | <a href="/contact.php" target="main_frame">Contact</a>
    </div>
    <div class="lowlinksimg">
    </div></div>
    <br />
    Copyright &copy; 2006 <b><a href="http://ericanque.co.uk/agents/ben.php" target="main_frame">Ben Lambe</a></b>. All Rights Reserved.
    <br /><br />
    
    </body>
    </html>

  2. #2
    doing my best to help c2uk's Avatar
    Join Date
    May 2005
    Location
    Cardiff
    Posts
    1,832
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Welcome to Sitepoint.

    You should validate both your css and html code first, e.g. your styles should go into the head and you seem to not have any opening body tag, and float: center doesn't exist either:

    XHTML validation: http://validator.w3.org/check?verbos....uk%2Fhome.php
    CSS validation: http://jigsaw.w3.org/css-validator/v....uk%2Fhome.php (works only if your XHTML code is valid, but you can also provide the CSS separately).
    Dan G
    Marketing Strategist & Consultant


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
  •