SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    Patience... bronze trophy solidcodes's Avatar
    Join Date
    Jul 2006
    Location
    Philippines
    Posts
    936
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    How to enclose a word inside a box?

    This is very basic.

    Let say I want to put "Apple" inside a box.
    How to do this the proper way in css?
    Quality codes are optimized and tested...
    Click here for inspiration..

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    The box itself is HTML: you will have to wrap an element of some kind around the word to be able to isolate it and style it. We need some more info about what you want to do.

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,802
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    that really depends on a LOT of things. So let's rephrase the question. How do I draw a box around an element.

    Now we have 3 ways:

    1) border: 1px solid #000; /** width style color ... order is irrelevant ... affects box model
    2) outline: 1px solid #000; /** width style color ... order is irrelevant ... does not affect box model
    3) box-shadow: 0 0 0 1px #000; /** 0 0 0 width color ... CSS3 ONLY, may need vendor prefix ... does not affect box model ;

    for the sake of this example, I am choosing method 2.

    .boxed { outline: 1px solid #000; }

    so now if you had the word in an lemenet ( say, a SPAN) you can apply that style to the element. <span class="boxed">Apple</span>

    hope that helps

  4. #4
    Patience... bronze trophy solidcodes's Avatar
    Join Date
    Jul 2006
    Location
    Philippines
    Posts
    936
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Actually I just want to make my pagination numbers ( |< previous 1 2 3 4 5 next >| ) inside a box.
    Just like the pagination here in sitepoint forum the number one is inside the box an so on...
    I know I did this before. But I forgot to do this.
    For my pagination I would like the last, previous, numbers, next, and last to be inside in each boxes.
    Quality codes are optimized and tested...
    Click here for inspiration..

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    In this forum, each number is wrapped in a san, and a class on a span is used to style it specially. Can you post here the HTML output of your pagination numbers?

  6. #6
    Patience... bronze trophy solidcodes's Avatar
    Join Date
    Jul 2006
    Location
    Philippines
    Posts
    936
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Here is what i"m trying to do.
    http://coder9.com/ciportfolio/

    By the way it is under bootstrap.

    Can you guys show me sample using css please.
    Quality codes are optimized and tested...
    Click here for inspiration..

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Looks like you'll need to go into the backend that is creating those pagination links and add some hooks, like a class on the current page item.

  8. #8
    Patience... bronze trophy solidcodes's Avatar
    Join Date
    Jul 2006
    Location
    Philippines
    Posts
    936
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Yeah the answer is just <span> I created that using CodeIgniter.
    I'll try to experiment.
    Quality codes are optimized and tested...
    Click here for inspiration..

  9. #9
    Patience... bronze trophy solidcodes's Avatar
    Join Date
    Jul 2006
    Location
    Philippines
    Posts
    936
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Cool I managed to put it inside the box. lol
    Quality codes are optimized and tested...
    Click here for inspiration..

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Cool. Be aware, though, that you should only use an ID once per page, so it would be better to turn that into a class. E.g.

    Code:
    <span class="paginate_numbers_tag"><b>1</b></span>
    Then you can target the <b> and <a>s and style them any way you like, by putting a box around them etc. as described above.

  11. #11
    Patience... bronze trophy solidcodes's Avatar
    Join Date
    Jul 2006
    Location
    Philippines
    Posts
    936
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    @ralph

    Thanks for the reminder.
    Quality codes are optimized and tested...
    Click here for inspiration..

  12. #12
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,802
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Can you guys show me sample using css please.
    .boxed { outline: 1px solid #000; } is CSS

    But I see what you wanted was a solid box, in which case:

    background: cyan;

    is the CSS property you'd be looking for.

    Anyway, I just thought would point out that you dont need the SPAN in this situation. you should be able to apply the style to each anchor tag.
    OR BETTER YET create a proper navigation list , apply the style via the UL


    HTML Code:
    .paginate_numbers_tag {
    padding:0;
    margin:0;
    list-style:none;
    font-family: sans-serif;
    
    }
    .paginate_numbers_tag li { 
    	display:inline-block;
    	
    	}
    .paginate_numbers_tag a, .paginate_numbers_tag li>span {background:  cyan; text-decoration: none; padding:.25em}
    .paginate_numbers_tag li>span { font-weight:  bold;}
     
    <ul class="paginate_numbers_tag">
    	<li><span>1</span></li>
    	<li><a href="#">2</a></li>
    	<li><a href="#">3</a></li>
    	<li><a href="#">4</a></li>
    	<li><a href="#">5</a></li>
    	<li><a href="#">></a></li>
    	<li><a href="#">Last</a></li>
    </ul>


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
  •