SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Jun 2011
    Location
    Newfoundland, Canada
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    H1 horizontal spacing issue

    Hey guys

    I'm trying to put a border around my <h1> text but the native spacing for the element extends it to the far right of the page. I'm hoping I can remove that spacing to make the border tight to the text.

    I've attached screenshots, but I've been told before you can't see them.. Sorry.

    Screen Shot 2012-03-11 at 2.10.46 PM.png

    Another thing I'm trying to do is add borders around the text in my navigation list, but I want the spacing right side of each border to be even. I could use keyboard spaces to do this, but that would be a bad practice I think. Can someone offer a better suggestion?

    Screen Shot 2012-03-11 at 2.10.57 PM.png

    Thanks in advance!

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Well you could wrap a <span> inside of the <h1> text and that will auto fit only the text, and then place the border on there .

    I can't visualize the 2nd request, so I'll wait for the screenshots to be approved (then we can see them and see what you're talking about )
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,838
    Mentioned
    73 Post(s)
    Tagged
    6 Thread(s)
    Try this:

    HTML Code:
    <h1 style='background-color:#cfc; border:dotted 5px #f00'>
    	My default
    </h1>
    <br />
    
    <h1 style='background-color:#cfc; display:inline; text-align:center; border:dotted 5px #f00'>
    	style over-rides default settings
    </h1>
    <br />
    
    <h1 style='background-color:#cfc; display:inline-block; width:22em; text-align:center; border:dotted 5px #f00'>
    	style over-rides default settings
    </h1>
    Learn how to be ready for The New Move to Discourse

    How to make Make Money Now with a *NEW* look

    Be sure to congratulate Patche on earning Member of the Month for July 2014

  4. #4
    SitePoint Member
    Join Date
    Jun 2011
    Location
    Newfoundland, Canada
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Perfect. I'm amazed at how much I forget about using <span>s

    Thanks!

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You're welcome murl3y . Glad i could help.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  6. #6
    SitePoint Member
    Join Date
    Jun 2011
    Location
    Newfoundland, Canada
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I took your <span> idea and ran with it... made it easier to line everything else up (when my screenshots get approved)Screen Shot 2012-03-11 at 4.29.52 PM.jpg
    Last edited by Force Flow; Mar 11, 2012 at 14:26. Reason: Language in screenshot


Tags for this Thread

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
  •