Results 1 to 4 of 4

Thread: better alternative css

  1. #1
    Join Date
    Aug 2009
    Location
    London
    Posts
    93
    Thanks
    26
    Thanked 0 Times in 0 Posts

    Default better alternative css

    Hi, Here is a screen grab of some html/css I have created. I kinda think there is a better alternative that doesn't use a background image for the horizontal keyline - I just can't work it out myself.

    Does anyone have any suggestions please?

    Click image for larger version. 

Name:	Screen shot 2014-06-30 at 11.05.35.jpg 
Views:	222 
Size:	14.2 KB 
ID:	5494
    HTML Code:
    <div class="heading-box">
    <h1> Contact us</h1>
    </div>
    Code:
    .heading-box { background-color: #fefff1; height: 32px; background-image: url(images/heading-bg-1.png); background-repeat: repeat-x; }
    
    .heading-box h1 { font-size: 26px; background-color: #594a43; width:282px; color: #fff; height: 30px; margin: 0px auto; letter-spacing: 4px; padding-bottom: 4px; }

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    You could use a pseudo element (IE8+);
    Code:
    .heading-box { background:#fefff1; height:32px }
    .heading-box:before { content:""; position:absolute; display:block; height:1px; margin-top:16px; background:#594a43; width:100% } 
    .heading-box h1 { position:relative; z-index:1; font-size:26px; text-align:center; background:#594a43; width:282px; color:#fff; height:30px; margin:0 auto; letter-spacing:4px; padding-bottom:4px }
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  3. #3
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    Or you could put a top border on the .heading-box div and then use half-height margins (one positive, one negative) to offset it;
    Code:
    .heading-box { background:#fefff1; height:32px; margin-top:16px; border-top:1px solid #594a43; }
    .heading-box h1 { font-size:26px; text-align:center; background:#594a43; width:282px; color:#fff; height:30px; margin:0 auto; margin-top:-16px; letter-spacing:4px; padding-bottom:4px }
    This might be "better" because it doesn't use a pseudo element and supports IE7 (depends on the background colour of the .heading-box div though)
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  4. The Following User Says Thank You to Beverleyh For This Useful Post:

    jhatter (07-01-2014)

  5. #4
    Join Date
    Aug 2009
    Location
    London
    Posts
    93
    Thanks
    26
    Thanked 0 Times in 0 Posts

    Default

    Many thanks, your second suggestion worked best for me

Similar Threads

  1. Resolved Looking for an alternative to the + symbol
    By james438 in forum Other
    Replies: 7
    Last Post: 01-21-2013, 07:00 PM
  2. Alternative CSS
    By jhatter in forum CSS
    Replies: 3
    Last Post: 04-29-2010, 09:14 AM
  3. itunes alternative?
    By traq in forum Computer hardware and software
    Replies: 4
    Last Post: 01-15-2010, 12:23 AM
  4. Alternative to AJAX
    By molendijk in forum Coding tips & tutorials threads
    Replies: 0
    Last Post: 05-21-2009, 09:28 PM
  5. Alternative Text
    By laura_skelton in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 01-03-2008, 03:23 PM

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
  •