Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Dec 2012
    Posts
    12
    Thanks
    3
    Thanked 0 Times in 0 Posts

    HElp add dotted boder like in picture

    Hello guys please help add dotted border like in picture. Thanks.

    My code. Thanks for help.
    PHP Code:
    #wrapper {
        
    width:1000px;
        
    margin:0 auto 0 auto;
    }

    #header {
        
    text-align:center;
        
    margin-bottom:30px;
    }

    .
    box {
        
    display:inline;
    }

    .
    box img {
        
    width:235px;
        
    height:250px;

    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <
    html xmlns="http://www.w3.org/1999/xhtml">
    <
    head>
    <
    meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <
    link rel="stylesheet" type="text/css" href="style.css" />
    <
    title>Themespit.com</title>
    </
    head>
    <
    body>
    <
    div id='wrapper'>
    <
    div id='header'><h1>Header</h1></div>
    <
    div class='box'>
    <
    img src='http://www.animeminusfam.lt/anime_pictures/dbz.jpg'></img>
    </
    div>
    <
    div class='box'>
    <
    img src='http://www.animeminusfam.lt/anime_pictures/dbz.jpg'></img>
    </
    div><div class='box'>
    <
    img src='http://www.animeminusfam.lt/anime_pictures/dbz.jpg'></img>
    </
    div><div class='box'>
    <
    img src='http://www.animeminusfam.lt/anime_pictures/dbz.jpg'></img>
    </
    div><div class='box'>
    <
    img src='http://www.animeminusfam.lt/anime_pictures/dbz.jpg'></img>
    </
    div><div class='box'>
    <
    img src='http://www.animeminusfam.lt/anime_pictures/dbz.jpg'></img>
    </
    div><div class='box'>
    <
    img src='http://www.animeminusfam.lt/anime_pictures/dbz.jpg'></img>
    </
    div><div class='box'>
    <
    img src='http://www.animeminusfam.lt/anime_pictures/dbz.jpg'></img>
    </
    div>
    </
    div>
    </
    body>
    </
    html

  • #2
    New Coder
    Join Date
    Dec 2012
    Location
    USA
    Posts
    82
    Thanks
    3
    Thanked 17 Times in 17 Posts
    You can use the following in any variation you need to accomplish what you want:

    Code:
    border:1px dotted #000;
    Apply this style to your .box style, with the respective border-top, border-left, border-right, and/or border-bottom
    Last edited by TFlan; 01-09-2013 at 04:14 AM. Reason: spelling

  • #3
    New Coder
    Join Date
    Dec 2012
    Posts
    12
    Thanks
    3
    Thanked 0 Times in 0 Posts
    but if i will do border-left last box will have border but in picture there is no border.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello aiva286,
    You just need to pay extra care to what element you are applying your dotted border to. Like TFlan said, any variation you need to accomplish what you want.

    Look at this example -
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Themespit.com</title>
    <style type="text/css">
    #wrapper {
    	width: 1108px;
    	margin: 0 auto;
    }
    #header {
    	text-align: center;
    	margin-bottom: 30px;
    }
    .row {
    	overflow: auto;
    	background: #ccc;
    	border-top: 1px dotted #000;
    }
    .one {border-bottom: 1px dotted #000;}
    .box {
    	padding: 20px;
    	float: left;
    	border-top-style: none;
    	border-right: 1px dotted #000;
    	border-bottom-style: none;
    	border-left: 1px dotted #000;
    }
    .box img {
    	height: 250px;
    	width: 235px;
    }
    </style>
    </head>
    <body>
        <div id='wrapper'> 
            <div id='header'><h1>Header</h1></div> 
            	<div class="row">
                    <div class='box'><img src='http://www.animeminusfam.lt/anime_pictures/dbz.jpg' alt="description" /></div> 
                    <div class='box'><img src='http://www.animeminusfam.lt/anime_pictures/dbz.jpg' alt="description" /></div>
                    <div class='box'><img src='http://www.animeminusfam.lt/anime_pictures/dbz.jpg' alt="description" /></div>
                    <div class='box'><img src='http://www.animeminusfam.lt/anime_pictures/dbz.jpg' alt="description" /></div>
                <!--end .row--></div>
            	<div class="row one">
                    <div class='box'><img src='http://www.animeminusfam.lt/anime_pictures/dbz.jpg' alt="description" /></div>
                    <div class='box'><img src='http://www.animeminusfam.lt/anime_pictures/dbz.jpg' alt="description" /></div> 
                    <div class='box'><img src='http://www.animeminusfam.lt/anime_pictures/dbz.jpg' alt="description" /></div>
                    <div class='box'><img src='http://www.animeminusfam.lt/anime_pictures/dbz.jpg' alt="description" /></div> 
                <!--end .row--></div>
        <!--end wrapper--></div> 
    </body> 
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •