dcsimg
www.webdeveloper.com
Results 1 to 4 of 4

Thread: How do I create a dashed box for my opt in form?

  1. #1
    Join Date
    Mar 2006
    Location
    Australia, Newcastle
    Posts
    34

    How do I create a dashed box for my opt in form?

    I want to create a plain dashed box for the opt in form on this site howto-buildmuscles.com/ to replace the gradient box, just like in the picture I have attached, how do I do this?

    Here is my current CSS code:

    Code:
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed,
    figure, figcaption, footer, header, hgroup,
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	font-size: 100%;
    	font: inherit;
    	vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure,
    footer, header, hgroup, menu, nav, section {
    	display: block;
    }
    body {
    	line-height: 1;
    }
    ol, ul {
    	list-style: none;
    }
    blockquote, q {
    	quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    	content: '';
    	content: none;
    }
    table {
    	border-collapse: collapse;
    	border-spacing: 0;
    }
    /* COMMON TAGS */
    strong{
    	font-weight:bold;
    }
    a{
    	text-decoration:none; 
    	color:#000;
    }
    a:hover{
    	color:#ff0000;
    }
    input:focus, textarea:focus, select:focus{
    	outline:none;
    }
    .clear{
    	clear:both; 
    	line-height:1px; 
    	height:1px;
    }
    .left{
    	float:left;
    }
    .right{
    	float:right;
    }
    h1, h2, h3, h4, h5, h6{
    	font-weight:bold;
    }
    em{
    	font-style:italic;
    }
    .block{
    	display:block;
    }
    .l-spacing{
    	letter-spacing:-1px;
    }
    
    /* LAYOUT TAGS *//* LAYOUT TAGS */
    body{
    	background:#fff;
    	font-size:13px;
    	color:#000;
    	font-family:Tahoma, Arial, sans-serif;
    }
    .box{
    	width:715px;
    	margin:0 auto;
    }
    
    /* header */
    #header{
    	width:100%;
    	padding:20px 0 0 0;
    	text-align:center;
    }
    #header h2{
    	font-size:41px;
    	color:#ff0000;
    }
    #header h2 span{
    	display:block;
    	font-size:26px;
    	line-height:30px;
    }
    #header h3{
    	font-size:16px;
    	padding:15px 0 5px 0;
    }
    
    /* container */
    #container{
    	width:100%;
    	padding:15px 0 0 0;
    }
    #leftcol{
    	width:390px;
    }
    .common{
    	width:307px;
    	position:relative;
    }
    .common.gap{
    	margin:0 0 0 17px;
    }
    .common-top{
    	width:100%;
    	background:url(../images/bg_common_top.gif) no-repeat center top;
    }
    .common-mid{
    	width:100%;
    	background:url(../images/bg_common_mid.gif) repeat-y center top;
    }
    .common-bottom{
    	width:295px;
    	padding:0 6px 11px 6px;
    	background:url(../images/bg_common_bottom.gif) no-repeat center bottom;
    }
    .common-in{
    	width:100%;
    	background:url(../images/bg_common_in.gif) repeat-x center top #e8e8e5;
    }
    .caption{
    	width:336px;
    	height:64px;
    	background:url(../images/bg_caption.png) no-repeat;
    	padding:15px 0 0 45px;
    	position:absolute;
    	left:-17px;
    	bottom:-49px;
    	font-size:21px;
    	color:#fff;
    	font-weight:bold;
    	line-height:50px;
    }
    .list{
    	width:100%;
    	padding:70px 0 0 0;
    }
    .list li{
    	background:url(../images/bullet_list.png) no-repeat left center;
    	padding:8px 0 8px 45px;
    	margin:0 0 15px 0;
    	line-height:15px;
    	font-weight:bold;
    }
    .list li.last{
    	padding-top:0;
    }
    #rightcol{
    	width:308px;
    	padding:0 0 0 17px;
    }
    .form-block h2{
    	font-size:21px;
    	text-align:center;
    	font-weight:normal;
    	padding:7px 0;
    }
    .form-block h2 a{
    	text-decoration:underline;
    }
    .form-block h2 a:hover{
    	text-decoration:none;
    }
    .yellow-block{
    	width:275px;
    	padding:15px 10px;
    	background:#fffd12;
    	line-height:16px;
    }
    .yellow-block h3{
    	font-size:14px;
    	text-align:center;
    }
    .yellow-block ul{
    	padding:15px 0 0 0;
    }
    .yellow-block li{
    	font-weight:bold;
    	list-style:disc inside;
    }
    .red-arrow{
    	width:252px;
    	height:76px;
    	margin:0 auto -5px auto;
    }
    .form-block form{
    	padding:0 0 20px 15px;
    }
    .form-block label{
    	display:block;
    	padding:0 0 5px 0;
    }
    .form-block .input{
    	width:245px;
    	height:31px;
    	background:url(../images/bg_input.gif) no-repeat;
    	margin:0 0 7px 0;
    	padding:0 10px;
    	border:none;
    }
    .circle{
    	width:287px;
    	height:73px;
    	background:url(../images/bg_blue_circle.png) no-repeat;
    	position:absolute;
    	left:0;
    	bottom:-42px;
    	padding:5px 0 0 18px;
    }
    .form-block .button{
    	width:275px;
    	height:72px;
    	background:url(../images/bg_button.png) no-repeat center top;
    	font-family:Tahoma, Arial, sans-serif;
    	border:none;
    	cursor:pointer;
    	font-size:28px;
    	font-weight:bold;
    	font-style:italic;
    }
    .form-block .button:hover{
    	background-position:center bottom;
    }
    .disclaimer{
    	width:247px;
    	padding:0 30px;
    	position:absolute;
    	left:0;
    	bottom:-115px;
    	text-align:center;
    	font-size:10px;
    	color:#929292;
    }
    .disclaimer h4{
    	font-size:12px;
    }
    .tagline{
    	text-align:center;
    	font-size:16px;
    	padding:20px 0 0 0;
    }
    
    /* footer */
    #footer{
    	width:100%;
    	padding:35px 0;
    	text-align:center;
    	font-size:11px;
    	line-height:14px;
    }
    Thanks Anyone!
    Attached Images Attached Images
    Last edited by sean83; 03-03-2012 at 12:15 AM.

  2. #2
    Join Date
    Jan 2003
    Location
    Egypt
    Posts
    185
    In your css search for .common, and in any following selector has common remove any background:url(...)

    Finally in .common add the following style:
    border: 8px #0000ff dashed;

  3. #3
    Join Date
    Mar 2006
    Location
    Australia, Newcastle
    Posts
    34
    Works perfectly, thank you very much!

  4. #4
    Join Date
    Jan 2003
    Location
    Egypt
    Posts
    185
    Quote Originally Posted by sean83 View Post
    Works perfectly, thank you very much!
    Never mind, you are welcome

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles