Grow your CSS skills. Land your dream job.

[Solved] Help with text border positioning

  • # May 30, 2010 at 7:28 pm

    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 */

    # May 30, 2010 at 8:18 pm

    Adjust the line-height to bring the border closer.

    # May 30, 2010 at 8:25 pm

    Thank-you so much!!

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".