SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2010
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question CSS Border problem

    Hi - I am trying to learn CSS among other things. I am trying to convert the white border in image below to match the background or another color.

    img 1.png

    The mark up is as follows :

    HTML Code:
    HTML Code:
    <div class="bottom">
    <ul>
    <li id="js_block_bottom_1" class="first"><a href="http://xyz.com/Pete/friend/" id="js_block_bottom_link_1">View All</a></li>
    </ul>
    </div>
    But when I try a combination of following styles:

    Code:

    Code:
    .bottom ul
    {
    border-style:solid;
    border-width:15px;
    border-color:red;
    }
    
    .bottom
    {
    border-style:solid;
    border-width:15px;
    border-color:red;
    }
    
    .bottom ul li
    {
    border-style:solid;
    border-width:15px;
    border-color:red;
    }
    I get borders generated inside or outside edges of the white border, but not able to target the white border itself as shown below:

    img 2.png

    I need some help please, would be very grateful if someone could assist me.

  2. #2
    SitePoint Addict AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    286
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have changed your CSS a little in the following page to help you understand what is happening. The background colour, grey, allows you to see each of the borders. The <div> (class bottom) is cyan, the <ul> tag has a red border and the <li> tag has a yellow border.

    I have made the list style "none" to remove the circle before the "View .." and have added padding within the <li> tag to separate the "View.." from its surrounding borders. I have also reduced the top and bottom margins of the <ul> tag so that it rests against the outer <div> border.

    Try changing the margin size to push it further away from the <div>.

    You will notice that I have also changed the CSS format of the border definitions, I am using the short form which allows you to specify the style, width and colour together. These attributes can be in any order.

    If you play around with the styles for each of the tags you will be able to achieve what you are looking for.



    <html>

    <head>

    <title>Border Styles</title>
    <style type="text/css">
    <!--
    body { background-color:#999; }
    div.bottom { border: solid 2px cyan; }
    ul { border: solid 2px red; margin-top:0px; margin-bottom:0px; }
    li { border: solid 2px yellow; list-style-type:none; padding:5px; }

    -->
    </style>
    </head>

    <body>

    <div class="bottom">
    <ul>
    <li id="js_block_bottom_1" class="first">
    <a href="http://xyz.com/Pete/friend/" id="js_block_bottom_link_1">View All</a></li>
    </ul>
    </div>

    </body>

    </html>

  3. #3
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    I get borders generated inside or outside edges of the white border, but not able to target the white border itself as shown below:
    Hi mnaseersj, Welcome to SitePoint

    When setting up an unordered list (UL) it is always recommended to zero out the margins and paddings or define them maually since browsers apply their own defaults differently.

    Another thing to mention is that it is not necessary to use a UL for just one link, if you have more links to come then you will want to use a UL. If it is just one link it can simply be an anchor nested and styled in a p-tag.

    A UL is a container in and of itself so it is not always necessary to nest it in a div since you can style the UL. You can also simulate borders by using paddings with background colors and then apply a border as well.

    Working from what I gathered you were trying to accomplish with the second image I came up with this:

    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Test Page</title>
     
    <style type="text/css">
    .botmlinks {
        width:300px;
        margin:0;
        padding:0;
        list-style:none;
        background:red;
        overflow:hidden;/*uncollapse child margins*/
    }
    .botmlinks li {
        margin:15px;
        padding:15px;
        background:red;
        border:5px solid #FFF;
    }
    .botmlinks li a {
        display:block;
        background:#CCC;
        text-align:right;
        text-decoration:none;
    }
    </style>
     
    </head>
    <body>
     
    <ul class="botmlinks">
        <li><a href="#">View All</a></li>
        <li><a href="#">View All</a></li>
        <li><a href="#">View All</a></li>
    </ul>
     
    </body>
    </html>

  4. #4
    SitePoint Enthusiast
    Join Date
    Jun 2010
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi AllanP & Rayzur,

    thank you both for replying. I was originally trying to modify behavior of an existing code in the way of a social media site which allows you to upload CSS in order to style the look and feel of the UI.

    I was able to solve the problem by applying a more specific style which was as follows :

    Code:
    div#sidebar div.block div.bottom {
    background: url(http://img.skitch.com/20100928-d49g7yunbk9pdu43675rjn3jmr.png) repeat;
    }
    But I am pleased that you have replied as I am able to understand what is really happening behind the scene with greater clarity now - many thanks.


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
  •