1. This website uses cookies. By continuing to use this website you are giving consent to cookies being used.
    For information on cookies and how you can disable them visit our Cookie Usage page.
    Dismiss Notice

Web Design Editing one of your templates

Discussion in 'Web Design' started by Joffre Mota, Jul 26, 2011.

  1. Joffre Mota

    Joffre Mota New Member

    Hi everybody.

    I'm having trouble on editing this template: Free Website Templates

    I really liked it. It is simple and objective!

    What I want to do: remove this images from the center of the page and make my text (or my forms) fill the entire blank part. Is that possible?

    Hope you guys can help me.

    Thanks for the template.
     
  2. tomw

    tomw Member

  3. Joffre Mota

    Joffre Mota New Member

    Not really sir. On this case you are still using left and right columns. I want just one column or maybe merge this 2 columns.

    Thanks for your reply.
     
  4. tomw

    tomw Member

  5. Joffre Mota

    Joffre Mota New Member

    Perfect! That is exactly what I was looking for...! :)

    How can I get that with changes? (just the source code or you changed something on css?)
     
  6. tomw

    tomw Member

    This is all done in the style sheet. Here is the code:
    Code:
    * {margin:0px;padding:0px;top:0px;left:0px;}
    body{
        text-align: center;
        background-color: #666666;
    }
    #central{
        margin-right: auto;
        margin-left: auto;
        margin-top: 10px;
        position: relative;
        width: 777px;
        text-align: left;
        background-color: #FFFFFF;
    }
    #header{
        background-image: url(images/header.jpg);
        height: 226px;
        width: 777px;
        left: 0px;
        top: 0px;
    }
    #header a{
        font-size: 14px;
        font-style: normal;
        line-height: normal;
        font-weight: bolder;
        color: #FFFFFF;
        text-decoration: none;
        /*margin-left: 112px;*/
        /*font-family: "Courier New", Courier, mono;*/
        /*margin-top: 35px;*/
        font-family: Verdana;
        position: relative;
        left: 98px;
        top: 154px;
    }
    
    .sitename {
        text-align: center;
        width: 109px;
    }
    
    #navlist{
        margin-left: 0px;
        padding-left: 0px;
        white-space: nowrap;
        position: absolute;
        height: 26px;
        width: 777px;
        top: 225px;
        background: url(images/menubg.jpg) repeat-x top left;
        font-family: Arial;
        text-transform: uppercase;
        font-size: 12px;
        line-height: 20px;
    }
    
    #navlist li{
        display: inline;
        list-style-type: none;
    }
    
    #navlist li a {
        padding: 3px 10px;
        /*background-image: url(images/button.gif);*/
        height: 20px;
        width: 91px;
        display: inline;
        position: absolute;
        text-align: center;
        color: #fff;
        text-decoration: none;
        margin-top: 5px;
    }
    
    #navlist li a span{
        padding: 3px 10px;
        /*background-image: url(images/button.gif);*/
        height: 20px;
        width: 91px;
        display: inline;
        position: absolute;
        text-align: center;
        color: #fff;
        text-decoration: none;
        margin-top: -5px;
    }
    
    #navlist a:hover { background: #0687eb; height: 10px; cursor: pointer;}
    
    
    /*#navlist a:hover{background-image: url(images/buttonover.gif); height: 17px; width: 97px;}*/
    #n1{left: 0px;}
    #n2{left: 111px;}
    #n3{left: 222px;}
    #n4{left: 333px;}
    #n5{left: 444px;}
    #n6{left: 555px;}
    #n7{left: 666px;}
    
    #content{
        margin-top: 252px;
        position: absolute;
        width: 777px;
        background-color: #FFFFFF;
    }
    
    #footer{
        clear: both;
        background-color: #FFFFFF;
        position: relative;
        height: 122px;
        background-image: url(images/footer.jpg);
        background-repeat: no-repeat;
    }
    #main{
        float: right;
        background-color: #FFFFFF;
        margin-right: 15px;
        margin-top: 20px;
        overflow: hidden;
    }
    #main p{
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 12px;
        font-weight: normal;
        color: #666666;
        margin-left: 10px;
        margin-bottom: 20px;
    }
    #main h1{
        margin: 10px;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 14px;
        font-weight: bold;
        color: #033387;
    }
    #main span{
        margin-top: 10px;
        margin-bottom: 4px;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 12px;
        font-weight: bold;
        color: #649721;
    }
    #main a{color: #666666;}
    #footer p{
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        font-weight: bold;
        color: #666666;
        float: right;
        padding-top: 98px;
        margin-right: 10px;
    }
    #footer a{color: #666666;}
    #footer a:hover{color: #666666;}
    #imagepreloader{
        visibility: hidden;
        overflow: hidden;
        height: 0px;
        width: 0px;
    }
     
  7. Joffre Mota

    Joffre Mota New Member

    Thank you a lot for your help.
     
  8. tomw

    tomw Member

    Sorry, I overlooked the HTML. The content section need to be like this:
    Code:
    <div id="content">
       <div id="main">
          Main content goes here…
       </div>
       <div id="footer">
          Footer content goes here…
       </div>
    </div>
     
  9. Joffre Mota

    Joffre Mota New Member

    Thanks again tomw.
    I already solved this HTML problem before! ;D