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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Creating A Color Bar on Html (Example Img Link) Help!

    Hello,

    I am trying to create a color bar on html?

    See below images for details.

    Text is between two bars as heading on the page.



    Text on the colored bar as a heading on the page.



    Please help,
    Thanks!

  • #2
    New Coder
    Join Date
    May 2010
    Location
    Mexico
    Posts
    62
    Thanks
    1
    Thanked 0 Times in 0 Posts
    for the first:

    Code:
    h1{
    margin: 0pt; 
    background-image: yourimage; 
    background-repeat: repeat-x; 
    background-position: center center; 
    width: 300px;
    }
    p {
    display: block; 
    height: 50px; 
    background-color: white; 
    width: 150px;
    position: relative; 
    left: 25px;
    }
    and your html:

    Code:
    <h1><p>TEXT HERE</p></h1>


    for the second:

    Code:
    h1{background-color:#f8f8f8; width:300px; height:50px;color:#ffffff;}
    for your html

    Code:
    <h1>TEXT HERE</h1>
    just play with the styles untill you get what you want
    Lo bueno del cine es que durante dos horas los problemas son de otros.

  • #3
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    You cannot have a paragraph inside a heading in HTML. This is wrong. Use a span instead.

  • #4
    New Coder
    Join Date
    May 2010
    Location
    Mexico
    Posts
    62
    Thanks
    1
    Thanked 0 Times in 0 Posts
    you are so right!
    thanks =) and as is told in my country "cada dia se aprende algo nuevo"
    Lo bueno del cine es que durante dos horas los problemas son de otros.

  • #5
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you so much rakasv and Apostropartheid.
    Can you give me the complete code with the span tags.

    Thanks again!

  • #6
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Quote Originally Posted by rakasv View Post
    you are so right!
    thanks =) and as is told in my country "cada dia se aprende algo nuevo"
    Yes. Yes we do. well I don't speak Spanish but it's similar enough for me to understand.

    Switch the h1 tag to a span and set it to display: block.


  •  

    Posting Permissions

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