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 7 of 7
  1. #1
    New Coder
    Join Date
    Feb 2009
    Posts
    78
    Thanks
    19
    Thanked 1 Time in 1 Post

    Thumbs up Small css help please

    hi i want to add text on the header i added the screen shot of the image. And i also tried with out any success . please some one help me fix this please. Any help will be highly appreciated.

    regards
    zoe

    This is the one am trying to add the text on my header image.


    This is the Live demo
    Click Here For Live Demo

    This is the xhtml

    <div id="banner">
    <div class="texthold">
    <div class="lq"></div><br />
    <div class="tholdtext">Lorem Ipsum Doler Sit amet, Consecuter adipicising elit m said diam
    nonummy nibh wuismod tincidunt ut. Lorem Ipsum doler sit </div>
    <div class="rq"></div>
    </div>
    </div>
    This is the css
    #banner{
    background: url(../images/banner.png) no-repeat;
    height: 210px;
    width: 1006px;
    }
    .texthold{
    float: right;
    height: 174px;
    width: 336px;
    margin-top: 15px;
    margin-left: 10px;
    position: relative;
    right: 16px;
    padding: 5px;
    }
    .rq{
    background: url(../images/rq.png) no-repeat;
    float: right;
    width: 32px;
    position: relative;
    top: 35px;
    }
    .tholdtext{
    font: bold 18px "Adobe Caslon Pro";
    color: #FFFFFF;
    text-decoration: none;
    position: relative;
    margin-right: auto;
    margin-left: auto;
    padding: 5px;
    }
    .lq{
    background: url(../images/lq.png) no-repeat;
    float: left;
    width: 32px;
    }
    This is the left quote png image


    This is the right quote png image

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Text looks OK to me...

    ...or is it the absence of the quotes (in FF) that's the problem? If so, try adding height:21px to your css for .lq and .rq.

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

    Thumbs up

    Quote Originally Posted by SB65 View Post
    Text looks OK to me...

    ...or is it the absence of the quotes (in FF) that's the problem? If so, try adding height:21px to your css for .lq and .rq.
    ok i added the heights to both . please see still having trouble

    regards

    Click Here

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello zoe20,
    That's a lot of divs there. See divitis.
    Maybe you could try a new approach, something like this:

    CSS I changed
    Code:
    @charset "utf-8";
    /* CSS Document */
    * {
    margin: 0;
    padding: 0;
    }
    html,body{
    	background: #F8F8F8 0px 0px;
    	margin: 0px;
    	padding: 0px;
    }
    .../  snip /...
    #banner{
    	background: url(http://hook4adesign.com/zz/images/banner.png) no-repeat;
    	height: 210px;
    	width: 1006px;
    }
    .texthold{
    	float: right;
    	height: 174px;
    	width: 336px;
    	margin-top: 15px;
    	margin-left: 10px;
    	position: relative;
    	right: 16px;
    	padding: 5px;
    }
    h1{
    	font: bold 18px "Adobe Caslon Pro";
    	color: #FFFFFF;
    	text-decoration: none;
    	position: relative;
    	margin-right: auto;
    	margin-left: auto;
    	padding: 5px 5px 0;
    }
    .lq {
    margin: 5px 0 0 0;
    }
    .rq {
    float: right;
    margin: 0 10px 0 0;
    }#main{
    	background: Transparent url(../images/main_bg.png) repeat-y;
    	height: 400px;
    	width: 1006px;
    }
    #footer{
    And the markup to go with that -
    Code:
    <div id="wrapper">
    <div id="topheader">
      <div class="logo"><a href="index.htm"><img src="images/logo.png" border="0"></a></div>
       </div>
    <div id="nvbar"></div>
    <div id="banner">
    
      <div class="texthold">
    
    <img src="http://hook4adesign.com/zz/images/lq.png" alt="quote" width="32" height="21" class="lq">
        <h1>
    Lorem Ipsum Doler Sit amet, Consecuter adipicising elit m said diam
          nonummy nibh wuismod tincidunt ut. Lorem Ipsum doler sit   
    </h1> 
    <img src="http://hook4adesign.com/zz/images/rq.png" alt="quote" width="32" height="21" class="rq">
    
         </div>
    
      </div>
    <div id="main"></div>
    <div id="footer"></div>
    
    
    
    </div>
    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

  • #5
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    ok i added the heights to both . please see still having trouble
    Are you sure? I can see the quotes in FF now.

  • #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
    Hello zoe20,
    That's a lot of divs there. See divitis.
    Maybe you could try a new approach, something like this:

    CSS I changed
    Code:
    @charset "utf-8";
    /* CSS Document */
    * {
    margin: 0;
    padding: 0;
    }
    html,body{
    	background: #F8F8F8 0px 0px;
    	margin: 0px;
    	padding: 0px;
    }
    .../  snip /...
    #banner{
    	background: url(http://hook4adesign.com/zz/images/banner.png) no-repeat;
    	height: 210px;
    	width: 1006px;
    }
    .texthold{
    	float: right;
    	height: 174px;
    	width: 336px;
    	margin-top: 15px;
    	margin-left: 10px;
    	position: relative;
    	right: 16px;
    	padding: 5px;
    }
    h1{
    	font: bold 18px "Adobe Caslon Pro";
    	color: #FFFFFF;
    	text-decoration: none;
    	position: relative;
    	margin-right: auto;
    	margin-left: auto;
    	padding: 5px 5px 0;
    }
    .lq {
    margin: 5px 0 0 0;
    }
    .rq {
    float: right;
    margin: 0 10px 0 0;
    }#main{
    	background: Transparent url(../images/main_bg.png) repeat-y;
    	height: 400px;
    	width: 1006px;
    }
    #footer{
    And the markup to go with that -
    Code:
    <div id="wrapper">
    <div id="topheader">
      <div class="logo"><a href="index.htm"><img src="images/logo.png" border="0"></a></div>
       </div>
    <div id="nvbar"></div>
    <div id="banner">
    
      <div class="texthold">
    
    <img src="http://hook4adesign.com/zz/images/lq.png" alt="quote" width="32" height="21" class="lq">
        <h1>
    Lorem Ipsum Doler Sit amet, Consecuter adipicising elit m said diam
          nonummy nibh wuismod tincidunt ut. Lorem Ipsum doler sit   
    </h1> 
    <img src="http://hook4adesign.com/zz/images/rq.png" alt="quote" width="32" height="21" class="rq">
    
         </div>
    
      </div>
    <div id="main"></div>
    <div id="footer"></div>
    
    
    
    </div>
    Thanks a lot and i edited it and still the right quote image is not positioned properly. Any thing wrong? Plz see the demo

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    You didn't add the reset -
    Code:
    @charset "utf-8";
    /* CSS Document */
    * {
    margin: 0;
    padding: 0;
    }
    html,body{
    	background: #F8F8F8 0px 0px;
    	margin: 0px;
    	padding: 0px;
    }
    Have a look at an explanation of that reset here - http://perishablepress.com/press/200...-reset-styles/
    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
    •