Grow your CSS skills. Land your dream job.

margins appear suddenly when i turn my design to wordpress theme

  • # January 16, 2012 at 1:30 pm

    hi ..

    i am working on a wordpress theme , I’ve programmed the bulk, but several errors appeared to me suddenly, I do not why ,, my code appear correctly when i test it as css/html static page , but after i convert it errors appear and there are :
    – some margins appear at the top .
    – a horizontal scrollbar appear .

    i make a css reset to the values but nothing happened errors still there .

    look at this image :THE IMAGE

    also this is my css file and :



    /* css reset */
    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, input {
    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;
    }

    /* this section for ARABIC , added by mine */
    h1, h2, h3, h4, h5, h6, p, blockquote, pre, input, ul, li, {
    direction : rtl;
    }
    /* END ARABIC section */
    /* END css reset */

    /*main css*/



    body {
    font-family: Tahoma, Georgia, Arial, sans-serif;
    font-size: 14 px ;
    background : #e3eaf0 url(images/bodybg.png) repeat-x ;
    }

    #wrap {
    width : 960px;
    margin : auto;
    }

    #header {
    background : #e3eaf0 url(images/bodybg.png) repeat-x ;
    width : 960px;
    height : 170px;
    position : relative;
    }

    #headerbar {
    background : #98aebe;
    }

    #searchbar {
    position : relative ;
    right : 700px;
    }

    #searchbar #searchbox {
    width : 140px ;
    margin-top : 2px 0px;
    }



    #searchbar input {

    background : #e3eaf0;
    color : #285677;
    font-size : 12px;
    font-family : Tahoma, Georgia, Arial, sans-serif;
    margin: 2px 0px 3px 0px;
    padding : 2px 5px 2px 5px;
    border : 1px solid #f2f2f2;
    -webkit-border-radius : 4px ;
    -moz-border-radius : 4px ;
    border-radius : 4px ;
    text-shadow : 0 1px 1px #ffffff;
    }


    #searchicon {
    background : url(images/Search.png) no-repeat ;
    position: absolute;
    left: 87px;
    top: 5px;
    cursor: pointer;
    }


    #mainheader {
    hieght : 50px ;

    overflow: hidden ;
    margin-top: 10px;
    }

    #logo {
    position : relative;
    right : 10px;
    float : right;

    }
    #advheader {
    position : relative;
    left : 10px;
    float : left;
    }

    .menu-headermenu-container {
    background : #f5f5f5; /* alternative color #e3e9ee */
    margin : 10px 90px;
    height : 28px;
    width : auto;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    border-radius: 12px; /* future proofing */
    border : 2px solid #f1f1f1;
    /*another border */
    box-shadow: 0 0 0 1px hsl(0, 0%, 90%); /* ++++++++++++++++dont forget to put the syntax for all browsers++++++++++++++++++*/
    width : 760px;

    }

    .menu {
    text-align: center;
    padding-top: 5px;
    }


    .menu li{
    display: inline;
    padding: 8px 10px 7px 10px;

    }

    .menu a {
    color : #5a6e7c; /* #658092 alternative color*/
    text-decoration : none;
    font-family : Arial, sans-serif;
    font-size: 14pt;
    padding : 2px ;
    font-weight : bold;
    }

    .menu a:hover {
    color : #fdfdfd;
    background : #99aebe;
    border-bottom : none ;
    text-decoration : none;
    -webkit-border-radius : 3px;
    -moz-border-radius : 3px;
    border-radius : 3px;
    border : 1px solid #b8c9d6;
    margin-left : -2px;
    text-shadow : 0 1px 0 #627684;
    font-weight : bold;
    -webkit-transition : background 0.5s;
    -moz-transition : background 0.5s;
    -o-transition : background 0.5s; /* opera*/
    transition : background 0.5s;
    }

    /* END header */

    -o-transition : background 0.5s; /* opera*/
    transition : background 0.5s;
    padding : 0px 5px;
    margin-left : -2px;
    }

    .spanlogin{
    color : #fafafa;
    padding-right: 10px;
    }


    #copyrights {
    float : left;
    display: inline;
    padding-left : 5px;
    }

    #copyrights a {


    }

    and this is my html :


    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">












    < ?php wp_get_archives('type=monthly&format=link&limit=12'); ?>





    also , when you look at the image above , i used FIREBUG to detect the errors , it seems due to the tag at this line :

    # January 16, 2012 at 1:39 pm

    You’ve done several things wrong.

    1) Get wp_get_archives out of your < head> element – it doesn’t belong there.

    2) wp_head(); should be placed INSIDE your < head> element. This is also what is adding the top margin – it’s for the admin bar. Add wp_footer(); just above your closing < /body> tag and you’ll see it appear.

    3) You’ve used an HTML5 reset in your CSS file but you aren’t using the HTML5 docytpe.

    # January 16, 2012 at 2:06 pm

    firstly i am not finish it up until now , ill trying to modify a lot of things ..
    but thank you for your advices .

    also i have some questions :
    – what about the navigation menu , is it in the header or index …? i think it is in header …
    – about your 3rd point , what is a HTML5 doctype ..?
    – i need to make a option panel for my css file , to modify the link color and hover and the font and etc … how coan i pass the css parameter to style.css file ..?

    # January 16, 2012 at 2:17 pm

    it is working good after apply your advices ..
    but also there is a mess in the code ..
    when i register a navigation menu , a footer bar move to near the first post title , I DONT WHY …

    look at the images :
    1- the problem
    2- the actual position for the footer bar

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

You must be logged in to reply to this topic.

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