Thread: CSS and border

    #1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2003
    Location
    East Hartford, CT
    Posts
    70
    Rep Power
    12

    CSS and border


    Hi,

    I am trying to box around a text, but what happen is that when I setting up borders for it, it shows the box expand longer than the text. Is there a way to have the box just as big as the text (Well, slightly bigger, but just enough for the text)? I thought border-collapse:collapse would do it, but apperantly not.

    This is the CSS code I am using:

    PHP Code:
    div.submenu1 {
      
    positionrelative
      
    left22px
      
    padding4px
      
    border-stylesolid;
      
    border-width0px 1px 1px 1px
      
    border-color#0000FF;
      
    border-collapsecollapse
      
    background-color#3399FF

    And on the html it's:

    PHP Code:
    <div class='submenu1'>
    <
    a href='somelink' class='submenu1'>somelink</a>
    </
    div
    Scatt-Neko
  2. #2
  3. ASP.Net MVP
    Devshed Specialist (4000 - 4499 posts)

    Join Date
    Aug 2003
    Location
    WI
    Posts
    4,378
    Rep Power
    1510
    Try adding a span and putting the border on that.
    Primary Forum: .Net Development
    Holy cow, I'm now an ASP.Net MVP!

    [Moving to ASP.Net] | [.Net Dos and Don't for VB6 Programmers]

    http://twitter.com/jcoehoorn
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2002
    Location
    Canberra, Australia
    Posts
    348
    Rep Power
    13
    What is happening here is there is no width applied to the div, therefore it is stretching out the width of the screen.

    The way around this is:

    Create an ID that surrounds your navigation options. Set the position, width, border and thing else CSS you like.

    then write the new ID with a pseudo class a:link

    which says "any links within the navigation div display them like this"

    Code:
    /*CSS */
    
    #navigation {
      position: relative;
      display: block; 
      left: 22px; 
      width: 150px;
      padding: 4px; 
      border-style: solid;
      border-width: 0px 1px 1px 1px; 
      border-color: #0000FF;
      background-color: #3399FF
    }
    
    #navigation a:link {
    	color: #ffffff;
    	text-decoration: none;
    }
    
    #navigation a:visited {
    	color: #ffffff;
    }
    
    #navigation a:hover {
    	display: block;
    	color: #3399FF;
    	background-color: #FFFFFF
    }
    
    #navigation a:active {
    	color: #ffffff;
    }
    
    /* HTML */
    <div id="navigation">
    <a href='somelink'>somelink</a>
    </div>
    hope it helps ya....
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2003
    Location
    East Hartford, CT
    Posts
    70
    Rep Power
    12
    If I put multiple lines in the span (with different length), then the border will be mess up because they only try to border up each line of text. I wonder if I have missed something...

    Edit: Hm.. just saw the 2nd post about width after I post this... I will try it now!
    Scatt-Neko
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2003
    Location
    East Hartford, CT
    Posts
    70
    Rep Power
    12
    Nice, adding width helps a lot! Thanks! But I suppose I can't have it auto-set to the longest line in the <div>, can I?

    I know I am asking too much from CSS, but it's such a great tools
    Scatt-Neko
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2002
    Location
    Canberra, Australia
    Posts
    348
    Rep Power
    13
    Check out this page there should be some good examples in there,

    http://www.w3schools.com/css/default.asp
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2003
    Location
    East Hartford, CT
    Posts
    70
    Rep Power
    12
    I actually have been looking at that site quite a lot for references. How I missed "width" element in that page, I have no clue, must be thinking too hard...

    Anyway, thanks a lot for the help! really appreciate it!
    Scatt-Neko

IMN logo majestic logo threadwatch logo seochat tools logo