Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Feb 2009
    Posts
    78
    Thanks
    19
    Thanked 1 Time in 1 Post

    Thumbs up Please see my css and help me fix bugs

    hi this is my latest css and please see the css and tell me if any modifications required please. Thanks in advance.

    This is the Live Demo of My design:

    Live Demo


    This is My CSS:

    Code:
    @charset "utf-8";
    /* CSS Document */
    html,body{
    	margin: 0px;
    	padding: 0px;
    	background: #FFFFFF 0px 0px;
    }
    #wrapper{
    	width: 1006px;
    	background: transparent url(../images/main_back.png) repeat-y;
    	margin-right: auto;
    	margin-left: auto;
    }
    #header{
    	background: transparent url(../images/header.png) no-repeat;
    	height: 146px;
    	width: 1006px;
    }
    .logo{
    	background: transparent url(../images/logo.png) no-repeat;
    	float: left;
    	height: 105px;
    	width: 479px;
    	position: relative;
    	top: 30px;
    	left: 20px;
    }
    .address{
    	float: right;
    	height: 100px;
    	width: 170px;
    	position: relative;
    	right: 15px;
    	top: 25px;
    	font-weight: bold;
    	padding: 5px;
    	margin: 0px;
    	text-align: left;
    }
    .addresstext{
    	font: bold 12px Verdana, Arial, Helvetica, sans-serif;
    	color: #0E3A5D;
    	padding-top: 5px;
    }
    .addressphonetext{
    	font: bold 12px Verdana, Arial, Helvetica, sans-serif;
    	color: #E85512;
    }
    
    #navbar{
    	background: url(../images/navbar.png) repeat;
    	height: 40px;
    	width: 970px;
    	margin-right: auto;
    	margin-left: auto;
    	clear: left;
    }
    
    #navbar ul{
    	margin: 0;
    	font-family: "Trebuchet MS";
    	color: #FFFFFF;
    	padding-top: 8px;
    }
    #navbar ul li{
    	list-style-type: none;
    	padding: 0;
    	font-family: "Trebuchet MS";
    	color: #FFFFFF;
    	margin-right: 50px;
    	float: left;
    	margin-left: 50px;
    }
    #navbar ul li a{
    	text-decoration: none;
    	color: #FFFFFF;
    	font: bold 16px "Trebuchet MS";
    }
    #navbar ul li a:hover{
    	color: #000000;
    	text-decoration: none;
    }
    
    #banner{
    	background: url(../images/banner.png) no-repeat;
    	height: 200px;
    	width: 970px;
    	margin-right: auto;
    	margin-left: auto;
    	margin-top: 8px;
    }
    .readmore{
    	background: Transparent url(images/read_btn.png) no-repeat;
    	height: 25px;
    	width: 100px;
    	position: relative;
    	top: 135px;
    	left: 780px;
    }
    img { border: none;
     }
    #topone{
    	background: transparent url(../images/top_one.png) no-repeat;
    	height: 18px;
    	width: 972px;
    	margin-right: auto;
    	margin-left: auto;
    }
    #mainone{
    	background: transparent url(../images/middle_one.png) repeat-y;
    	width: 972px;
    	margin-right: auto;
    	margin-left: auto;
    	height: 835px;
    }
    #btmone{
    	background: transparent url(../images/btm_one.png) no-repeat;
    	height: 10px;
    	width: 972px;
    	margin-right: auto;
    	margin-left: auto;
    	margin-bottom: 15px;
    } 
    .h1{
    	font: bold 28px Verdana, Arial, Helvetica, sans-serif;
    	color: #FF9900;
    	text-decoration: underline;
    	position: relative;
    	left: 15px;
    	top: 10px;
    	width: 600px;
    	margin: 0px 0px 15px;
    }
    .img1{
    	background: transparent url(images/img_1.jpg) no-repeat;
    	float: left;
    	height: 147px;
    	width: 220px;
    	margin: 10px 5px 5px 15px;
    	
    }
    .maintext{
    	font: 12px "Arial MT";
    	color: #666666;
    	margin-right: 15px;
    	height: 147px;
    	text-align: justify;
    	margin-top: 10px;
    }
    .maintext a{
    	font: bold 12px "Arial MT";
    	color: #0000FF;
    	float: right;
    	text-decoration: none;
    }
    .maintext a:hover{
    	color: #0000FF;
    	text-decoration: underline;
    }
    .lft_bio{
    	float: left;
    	width: 437px;
    	position: relative;
    	left: 15px;
    	margin-top: 35px;
    	margin-bottom: 35px;
    }
    .bioheader{
    	background: transparent url(../images/bio_top.png) no-repeat;
    	height: 40px;
    	width: 435px;
    	font: bold 18px/35px Verdana, Arial, Helvetica, sans-serif;
    	color: #FFFFFF;
    	text-indent: 10px;
    }
    .biomain{
    	background:transparent url(../images/bio_main.png) repeat-y;
    	width: 435px;
    	height: 200px;
    }
    .biofooter{
    	background:transparent url(../images/bio_footer.png) no-repeat;
    	height: 5px;
    	width: 437px;
    }
    .rht_bio{
    	float: right;
    	width: 437px;
    	position: relative;
    	right: 15px;
    	margin-top: 35px;
    	margin-bottom: 35px;
    }
    .products{
    	width: 940px;
    	margin-right: auto;
    	margin-left: auto;
    	clear: right;
    	margin-bottom: 15px;
    }
    .productshead{
    	background:transparent url(../images/product_header.png) no-repeat;
    	height: 43px;
    	width: 940px;
    	margin-right: auto;
    	margin-left: auto;
    	clear: right;
    	font: bold 18px/35px Verdana, Arial, Helvetica, sans-serif;
    	color: #FFFFFF;
    	text-indent: 10px;
    }
    .productsmain{
    	background:transparent url(../images/product_body.png) repeat-y;
    	width: 940px;
    	margin-right: auto;
    	margin-left: auto;
    	height: 200px;
    	padding-top: 25px;
    }
    .productsfooter{
    	background:transparent url(../images/product_footer.png) no-repeat;
    	height: 5px;
    	width: 940px;
    	margin-right: auto;
    	margin-left: auto;
    }
    .adtext{
    	font: bold 14px Verdana, Arial, Helvetica, sans-serif;
    	color: #E85512;
    	text-align: center;
    }
    #footer{
    	background: transparent url(../images/footer.png) no-repeat;
    	height: 58px;
    	width: 972px;
    	margin-right: auto;
    	margin-left: auto;
    	text-align: center;
    }
    .footertext{
    	font: bold 12px/55px Verdana, Arial, Helvetica, sans-serif;
    	color: #FFFFFF;
    	text-decoration: none;
    }
    .footertext a{
    	font: bold 12px Verdana, Arial, Helvetica, sans-serif;
    	color: #FFFFFF;
    	text-decoration: none;
    	padding-top: 45px;
    }
    .footertext a:hover{
    	font: bold 12px Verdana, Arial, Helvetica, sans-serif;
    	color: #FFFF00;
    	text-decoration: underline;
    	padding-top: 45px;
    }	
    .biography{
    	font: bold 18px "Century Gothic";
    	color: #09375B;
    	text-indent: 5px;
    	margin-left: 5px;
    	margin-bottom: 5px;
    	padding-top: 5px;
    	margin-top: 3px;
    }
    .biomaintext{
    	font: 12px "Arial MT";
    	color: #000000;
    	margin: 20px 10px 10px;
    	text-align: justify;
    	padding: 0px;
    }
    .phtext{
    	font: bold 18px Arial, Helvetica, sans-serif;
    	color: #E85512;
    	text-align: center;
    }
    This is Mark Up

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Testing- One1</title>
    <link href="css/css.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    <div id="wrapper">
    <div id="header">
      <div class="logo"></div>
      <span class="address">Northen Stempp<br />
      Karolbagharea<br />
      Northern area # 312<br />
      Kareeb Deosial - 134522<br />
      <font color="#FF6600">00987345678</font><br />
      </span></div>
    <div id="navbar">
        <ul>
                 <li><a href="" title="Some Text">Button-1</a></li>
                 <li><a href="" title="Some Text">Button-2</a></li>
                 <li><a href="" title="Some Text">Button-3</a></li>
                 <li><a href="" title="Some Text">Button-4</a></li>
                 <li><a href="" title="Some Text">Button-5</a></li>
        </ul>
                                                                                   </div>
    <div id="banner">
        <a href="" class="readmore" title="Read More!!"><img src="images/readmore.png"  height="25" width="100" /></a>
                                                                                   </div>
     <div id="topone"></div>
     <div id="mainone"> 
       <div class="h1">Welcome to our Site</div>
        <div class="img1"><img src="images/img_1.jpg" /></div>
       <div class="maintext">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem.Lorem ipsum dolor sit amet, consectetuer <br />
           <br />
          <br />
        <a href="#" title="Click Here to see more Information">more info..</a></div> 
           <br />
        <div class="lft_bio">
            <div class="bioheader">Lorem Ipsum</div>
            <div class="biomain">
            <div class="biography">Lorem Ipsum</div>
              <div class="biomaintext">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus.
            </div><br />
            <div class="phtext">Click Here for more Info</div>
            </div>
          <div class="biofooter"></div>
        </div>
        <div class="rht_bio">
            <div class="bioheader">Lorem Ipsum</div>
            <div class="biomain">
                  <div class="biography">Lorem Ipsum</div>
                  <div class="biomaintext">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus.
            </div><br />
            <div class="phtext">Click Here or more Ino</div>
          </div>
            <div class="biofooter"></div>
        </div>
     <div class="products">
           <div class="productshead">Lorem Ipsum</div>
           <div class="productsmain">
            <table width="100%" border="0" cellspacing="5" cellpadding="5">
      <tr>
        <td><div align="center"><img src="images/pro_1.jpg" width="129" height="130" /></div></td>
        <td><div align="center"><img src="images/pro_1.jpg" width="129" height="130" /></div></td>
        <td><div align="center"><a href="#" title="Add some text"><img src="images/pro_1.jpg" width="129" height="130" /></a></div></td>
        <td><div align="center"><a href="#" title="Add some text"><img src="images/pro_2.jpg" width="129" height="130" /></a></div></td>
        <td><div align="center"><a href="#" title="Add some text"><img src="images/pro_1.jpg" width="129" height="130" /></a></div></td>
        <td><div align="center"><a href="#" title="Add some text"><img src="images/pro_2.jpg" width="129" height="130" /></a></div></td>
      </tr>
      <tr>
        <td class="adtext">Lorem Ipsum</td>
        <td class="adtext">Lorem Ipsum</td>
        <td class="adtext">Lorem Ipsum</td>
        <td class="adtext">Lorem Ipsum</td>
        <td class="adtext">Lorem Ipsum</td>
        <td class="adtext">Lorem Ipsum</td>
      </tr>
    </table>
          </div>
           <div class="productsfooter"></div>
        </div>
    </div>
    
    <div id="btmone"></div>                     
     <Div id="footer">
       <div class="footertext"><a href="index.htm">Button-1</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="about.htm">Button-2</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="products.htm">Button-3</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="man.htm">Button-4</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="feedback.htm">Button-5</a></div>
     </Div>
     
    </div>
     </div>
    </body>
    </html>
    Last edited by zoe20; 11-29-2009 at 12:20 PM.

  • #2
    Regular Coder
    Join Date
    Nov 2009
    Location
    Scotland / Glasgow
    Posts
    184
    Thanks
    1
    Thanked 19 Times in 19 Posts
    and the problem is what?

  • #3
    New Coder
    Join Date
    Feb 2009
    Posts
    78
    Thanks
    19
    Thanked 1 Time in 1 Post
    Need some sugestions to reduce so many dives in there . And i just validated my css in Here no errors found but got 12 warnings.
    Code:
    62  	 	Same colors for color and background-color in two contexts body and #navbar ul
    62 		Same colors for color and background-color in two contexts html and #navbar ul
    69 		Same colors for color and background-color in two contexts html and #navbar ul li
    69 		Same colors for color and background-color in two contexts body and #navbar ul li
    71 	#navbar ul li 	In (x)HTML+CSS, floated elements need to have a width declared. Only elements with an intrinsic width (html, img, input, textarea, select, or object) are not affected
    76 		Same colors for color and background-color in two contexts html and #navbar ul li a
    76 		Same colors for color and background-color in two contexts body and #navbar ul li a
    153 	.maintext a 	In (x)HTML+CSS, floated elements need to have a width declared. Only elements with an intrinsic width (html, img, input, textarea, select, or object) are not affected
    242 		Same colors for color and background-color in two contexts html and .footertext
    242 		Same colors for color and background-color in two contexts body and .footertext
    247 		Same colors for color and background-color in two contexts body and .footertext a
    247 		Same colors for color and background-color in two contexts html and .footertext a
    Last edited by zoe20; 11-29-2009 at 12:18 PM.

  • #4
    New Coder
    Join Date
    Feb 2009
    Posts
    78
    Thanks
    19
    Thanked 1 Time in 1 Post
    sorry for the bump. Any help please??

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,746
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Goodmorning zoe20,
    The validator is just telling you that your text color is the same as your background color in a lot of places, it's hard to see white text on a white background. If you meant those colors to be that way, that's fine ... it's just a warning and you can ignore it.

    The other items, about the floats.
    You need 3 things to float an element:
    1. a Doctype
    2. an element with a width
    3. float:left/right; on that element
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    zoe20 (11-29-2009)

  • #6
    New Coder
    Join Date
    Feb 2009
    Posts
    78
    Thanks
    19
    Thanked 1 Time in 1 Post

    Thumbs up

    Quote Originally Posted by Excavator View Post
    Goodmorning zoe20,
    The validator is just telling you that your text color is the same as your background color in a lot of places, it's hard to see white text on a white background. If you meant those colors to be that way, that's fine ... it's just a warning and you can ignore it.

    The other items, about the floats.
    You need 3 things to float an element:
    1. a Doctype
    2. an element with a width
    3. float:left/right; on that element
    Again thanks for the prompt reply and can you please tell me where i went wrong please? i think am having a bad habit of using more divs rather than simplify the things. Any suggestions please?

    And i also found a fault in there please see the attched image i screen shot it. Where the image adn text is not aligned properly. How to fix it please??

    Last edited by zoe20; 11-29-2009 at 06:46 PM.

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,746
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Instead of putting your heading in a div called .h1, use the h1 tag. No div needed for that.

    Using your code, add some background colors so you can see where things are going. Like this -
    Code:
    .h1{
    	font: bold 28px Verdana, Arial, Helvetica, sans-serif;
    	color: #FF9900;
    	text-decoration: underline;
    	position: relative;
    	left: 15px;
    	top: 10px;
    	width: 600px;
    	margin: 0px 0px 15px; /*increase this bottom margin if needed*/
    background: #00f;
    }
    .img1{
    	background: transparent url(images/img_1.jpg) no-repeat;
    	float: left;
    	height: 147px;
    	width: 220px;
    	/*margin: 10px 5px 5px 15px;*/
    margin: 0  5px 5px 15px;
    	
    }
    .maintext{
    	font: 12px "Arial MT";
    	color: #666666;
    	margin-right: 15px;
    	height: 147px;
    	text-align: justify;
    	margin-top: 10px;
    background: #f00;
    }
    That <div class="h1"> should really be <h1> though, it's a built in header tag. See W3's page on header tags.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    zoe20 (11-30-2009)

  • #8
    New Coder
    Join Date
    Feb 2009
    Posts
    78
    Thanks
    19
    Thanked 1 Time in 1 Post
    tks and i have another issue in the previous example i used fixed height and now i want the div to be stretched along with the content so i removed the height on the #mainone div When i removed the height i see a small gap at the bottom . please see the screen shot of it please. How to ix it?



    #topone{
    background: transparent url(../images/top_one.png) no-repeat;
    height: 18px;
    width: 972px;
    margin-right: auto;
    margin-left: auto;
    }
    #mainone{
    background: transparent url(../images/middle_one.png) repeat-y;
    width: 972px;
    margin-right: auto;
    margin-left: auto;
    / " height: 835px; * \
    }
    #btmone{
    background: transparent url(../images/btm_one.png) no-repeat;
    height: 10px;
    width: 972px;
    margin-right: auto;
    margin-left: auto;
    padding-bottom: 15px;
    }

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,746
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    I don't think the floats need clearing but overflow:auto; seems to do the trick anyway. Could be some form of collapsing margin maybe? Not sure.
    Anyway, try this:
    Code:
    #mainone{
    	background: transparent url(http://hook4adesign.com/11/images/middle_one.png) repeat-y;
    	width: 972px;
    	margin-right: auto;
    	margin-left: auto;
    overflow: auto;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •