[Solved] Help with text border positioning

[jillianadriana]

I’m wondering if anyone can help me with the positioning of the dotted top and bottom borders on my headings? The one for "Portfolio" is the way I want it to be, but the others are too far apart from the words. Does that make sense? Here is a screenshot of what I’ve got so far:

[img]http://img.photobucket.com/albums/v90/JillianVW/Screenshot2010-05-30at72104PM.jpg[/img]

Edit: I edited the code so it’s in normal CSS format.. discovered a few missing ; along the way too.

And here is my code:

Code:

/*——————————————————————–
[Master Stylesheet]
Project: PINK DESIGN
Version: 3.0
Author: SLICING PSD TO HTML (http://www.slicingpsdtohtml.com)
Powered By: SP2H (http://www.sp2h.com)
———————————————————————*/
/* @group Global Reset */
@import url(‘../fonts/fonts.css’);
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, font, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}

body {
font-size: 10px;
font-family: ‘ArcherProBook’;
}

#outer{
width:100%;
float:left;
}

#container{
width:960px;
margin:0 auto;
}

#header{
float:left;
width:100%;
}

#header #logo a{
float:left;
display:block;
background: url(../images/logo.png) left top;
width: 950px;
height:250px;
text-indent:-100000px;
margin-left:5px;
}

#main_top_content{
float:left;
width:820px;
background:url(../images/mlp_web_outlines_12.png) left bottom no-repeat;
padding-bottom:80px;
margin-left:60px;
}

#main_top_content #content{
width:750px;
margin:0 auto;
}

#main_top_content h1{
float:left;
width:100%;
text-transform:uppercase;
font-size:38.5px;
border-bottom:dotted 2px #918184;
border-top:dotted 2px #918184;
color:#808080;
padding-top:6px;
font-family: ‘GothamLight’;
letter-spacing:2px;
}

#main_top_content h1 span{
color:#808080;
float:left; background:url(../images/arrow.png) right 18px no-repeat;
padding-right:25px;
margin-right:10px;
padding-top: -11px;
margin-top:-4px;
margin-bottom: -11px;
font-size: 44px;
font-family: ‘GothamMedium’;
letter-spacing: 4px;
}

#main_top_content p{
float:left;
font-size:18px;
color:#808080;
margin-top:15px;
text-align:justify;
}

#main_top_content p span{
color:#F6B0BF;
font-family: ‘ArcherProSemibold’;
}

#main_top_content p semibold{
font-family: ‘ArcherProSemibold’;
}

#main_portfolio, #main_top_contact, #footer{
float:left;
}

#main_top_contact {
width:750px;
padding-left:100px;
background:url(../images/mlp_web_outlines_12.png) 58px bottom no-repeat;
padding-top: 15px;
padding-bottom:80px;
padding-right:25px;
}

#main_top_contact h1{
float:left; width:100%;
text-transform:uppercase;
font-size:35px;
border-bottom:dotted 2px #918184;
color:#808080;
border-top:dotted 2px #918184;
color:#808080;
padding-top: 8px;
font-family: ‘GothamLight’;
letter-spacing:2px;
}
#main_top_contact h1 span{
color:#808080;
float:left;
background:url(../images/arrow.png) right 18px no-repeat;
padding-right:28px;
margin-right:16px;
margin-top:-8px;
margin-bottom: -6px;
font-family: ‘GothamMedium’;
font-size:44px;
letter-spacing:4px;
}

#main_top_contact #main_top_contact_left{
float:left;
width:270px;
}

#main_top_contact #main_top_contact_left h1{
color:#F6B0BF;
border:none;
font-size:70px;
font-family: ‘ArcherProBook’;
margin-top: -5px;
margin-bottom: -10px;
}

#main_top_contact #main_top_contact_left h2{
width:222px;
float:left;
color:#808080;
font-size:49px;
text-transform:uppercase;
background:url(../images/form_arrow.png) right top no-repeat;
padding-right:41px;
line-height:42px;
font-family: ‘ArcherProBold’;
letter-spacing:1px;
}

#main_top_contact #main_top_contact_left h2 span{
font-size:40px;
}

#main_top_contact #main_top_contact_left h3{
float:left;
color:#808080;
font-size:36px;
width:100%;
text-transform:uppercase;
font-size:90px;
font-family: ‘GothamBold’;
}

#main_top_contact #main_top_contact_left h4{
float:left;
width:100%;
color:#808080;
font-size:26px;
text-transform:uppercase;
font-family: ‘ArcherProSemibold’;
}

#main_top_contact #main_top_contact_left a{
display:block;
float:left;
background:url(../images/mlp_web_outlines_08.png) left top;
width:252px;
height:94px;
text-indent:-100000px;
}

#main_top_contact #main_top_contact_right{
float:left;
width:470px;
padding-left:10px;
}

#main_top_contact #main_top_contact_right #contact_form_top{
background:#E6E6E5 url(../images/contact_form_top.png) top right no-repeat;
float:left;
width:470px;
height: 399px;
margin-top:20px;
}

#main_top_contact #main_top_contact_right #contact_form_top #conact_form{
background:url(../images/contact_form.png) left bottom no-repeat;
padding:25px 35px 25px 35px;
float:left;
width:400px;
}

#main_top_contact #main_top_contact_right #contact_form_top #conact_form input[type=”text”]{
width:99%;
border:none;
height:35px;
}

#main_top_contact #main_top_contact_right #contact_form_top #conact_form textarea{
width:99%;
border:none;
height:90px;
}

#main_top_contact #main_top_contact_right #contact_form_top #conact_form input[type=”image”]{
float:right;
margin-top:15px;
}

#main_top_contact #main_top_contact_right #contact_form_top #conact_form h3{
padding-bottom:15px;
padding-top: 3px;
font-size:12px;
color:#808080;
text-transform:uppercase;
font-family: ‘ArcherProMedium’;
letter-spacing:1px;
}

#main_portfolio{
float:left;
width:750px;
padding-left:100px;
background:url(../images/mlp_web_outlines_15.png) left bottom no-repeat;
padding-bottom:60px;
padding-top:20px;
padding-right:120px;
position:relative;
}

#main_portfolio h1{
float:left;
width:100%;
text-transform:uppercase;
font-size:30px;
border-bottom:dotted 2px #918184;
color:#808080;
border-top:dotted 2px #918184;
color:#808080;
padding-top:8px;
font-family: ‘GothamLight’;
letter-spacing:2px;
}

#main_portfolio h1 span{
color:#808080;
float:left;
background:url(../images/arrow.png) right 18px no-repeat;
padding-right:24px;
margin-right:9px;
margin-top:-11px;
margin-bottom: -7px;
font-size:44px;
font-family: ‘GothamMedium’;
letter-spacing:4px;
}

#catgoires_portfolio ul {
float:left;
margin-top:10px;
}

#main_portfolio ul li{
list-style-type:none;
float:left;
font-size:28px;
color:#808080;
text-transform:uppercase;
}

#main_portfolio ul li a{
color:#808080;
text-decoration:none;
}

#main_portfolio ul li.seperator{
padding-left:10px;
padding-right:10px;
}

#main_portfolio #portfolio_details{
border:solid 1px #C5C4C4;
width:100%;
height:300px;
float:left;
margin-top:10px;
}

#main_portfolio #thumbnail_portfolio{
float:left;
margin-top:10px;
}

#main_portfolio #thumbnail_portfolio #thumnail_prv, #main_portfolio #thumbnail_portfolio #thumnail_nxt{
float:left;
width:62px;
margin-top:18px;
}

#main_portfolio #thumbnail_portfolio #thumnail_list{
float:left;
width:625px;
overflow:hidden;
}

#main_portfolio #thumbnail_portfolio #thumnail_list ul li{
float:left;
display:block;
width:48px;
height:48px;
border:solid 1px #C5C4C4;
margin-right:5px;
}

#main_portfolio #thumbnail_portfolio #thumnail_prv a{
display:block;
float:left;
text-indent:-100000px;
background:url(../images/thumb_prv.png) no-repeat;
width:62px;
height:35px;
}

#main_portfolio #thumbnail_portfolio #thumnail_nxt a{
display:block;
float:left;
text-indent:-100000px;
background:url(../images/thumb_nxt.png) no-repeat;
width:62px;
height:35px;
}

#footer{
float:left;
width:750px;
margin-left:100px;
}

#footer h1{
color:#F6B0BF;
font-size:121px;
text-transform:uppercase;
font-family: ‘GothamBold’;
}

#footer h2{
color:#808080;
font-size:67px;
text-transform:uppercase;
border-bottom:dotted 2px #918184;
border-top:dotted 2px #918184;
margin-top: -20px;
font-family: ‘ArcherProSemibold’;
letter-spacing: 3px;
}

#footer h5{
text-align:center;
padding-top:10px;
color:#9A9999;
font-family:’ArcherProMedium’;
font-size:15px;
letter-spacing:1px;
}

/* Easy Slider */

#slider ul, #slider li,
#slider2 ul, #slider2 li{
margin:0;
padding:0;
list-style:none;
}

#slider2{
margin-top:1em;
}

#slider li, #slider2 li{
/*
define width and height of list item (slide)
entire slider area will adjust according to the parameters provided here
*/
width:750px;
height:365px;
overflow:hidden;
}

#prevBtn, #nextBtn,
#slider1next, #slider1prev{
display:block;
width:30px;
height:77px;
position:absolute;
left:-30px;
top:71px;
z-index:1000;
}

#nextBtn, #slider1next{
left:750px;
}

#prevBtn a, #nextBtn a,
#slider1next a, #slider1prev a{
display:block;
position:relative;
width:30px;
height:77px;
background:url(../images/btn_prev.gif) no-repeat 0 0;
}

#nextBtn a, #slider1next a{
background:url(../images/btn_next.gif) no-repeat 0 0;
}

/* numeric controls */

ol#controls{
margin:1em 0;
padding:0;
height:28px;
position:absolute;
left:700px;
top:430px;
}

ol#controls li{
margin:0 10px 0 0;
padding:0;
float:left;
list-style:none;
height:28px;
line-height:28px;
}

ol#controls li a{
float:left;
height:28px;
line-height:28px;
color:#808080;
text-decoration:none;
font-family: ‘ArcherBook’;
font-size:28px;
}

ol#controls li.current a{
color:#808080;
font-family:’ArcherBold’;
}

ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{
outline:none;
}

/* // Easy Slider */

[jillianadriana]

Thank-you so much!!

[Author]

Posts