Grow your CSS skills. Land your dream job.

[Solved] Background Image and Margin Problem

  • # September 1, 2009 at 11:39 pm

    Please help! I am a newbie and I am betting that this question will be easily answered, but after three nights of frustration, I just can’t take it anymore.

    I am working on a simple one page site that I would like to have a form on. But when I apply a margin to my div that contains the form, it also seems to be applying it to the parent div. I am not sure why? And I can’t figure it out.

    What makes it more complicating is that when I look at the design view is dreamweaver, i don’t see the error. It just when I go to look at it in any web browser.

    Please help, the screen shot is attached and here is my css.

    Code:
    @charset “utf-8″;
    /* CSS Document */

    * {
    color: white;
    margin-top: 0px;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
    }

    body {
    font-family: Arial, Helvetica, sans-serif;
    background: url(images/header-bg.png) repeat-x #000;
    margin: 0 auto;
    background-color:#c2c2c2;
    }

    #header {
    height: 111px; width: 960px;
    margin: 0 auto;
    background: url(images/headerlogo-bg.png) no-repeat;
    }

    #main {
    height: 808px; width: 960px;
    margin: 0 auto;
    background: url(images/main-bg.png)
    }

    #footer {
    color:white;
    font-size:0.75em;
    }

    #p {
    left: 10px;
    position: absolute;
    top: 25px;
    }

    .container {
    height: 164px;
    background: url(images/footer-bg.png) repeat-x #434343;
    margin: 0 auto;
    width:960px;
    }

    /* ———– My Form ———– */
    .myform{
    width:450px;
    padding:8px;
    margin: 250px 0 0 385px;
    }

    /* ———– basic ———– */
    #basic{
    ;

    }
    #basic h1 {
    font-size:14px;
    font-weight:bold;
    margin-bottom:8px;
    border-bottom:solid 1px #dedede;
    padding-bottom:10px;
    }
    #basic p{
    font-size:11px;
    color:#666666;
    margin-bottom:20px;
    border-bottom:solid 1px #dedede;
    padding-bottom:10px;
    }
    #basic label{
    display:block;
    font-weight:bold;
    text-align:right;
    width:140px;
    float:left;
    }
    #basic .small{
    color:#666666;
    display:block;
    font-size:11px;
    font-weight:normal;
    text-align:right;
    width:140px;
    }
    #basic input{
    float:left;
    width:200px;
    margin:2px 0 15px 5px;
    }
    #basic button{
    clear:both;
    margin-left:150px;
    background:#888888;
    color:#FFFFFF;
    border:solid 1px #666666;
    font-size:11px;
    font-weight:bold;
    padding:4px 6px;
    }

    # September 2, 2009 at 5:34 am

    If you could post the HTML, or just upload it somewhere so we can look that would help. I did notice in your reset you don’t have padding, so your global reset should look like this.

    Code:
    * {
    padding: 0;
    margin: 0;
    }
    # September 2, 2009 at 5:45 am

    here is the html – thanks for the help

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
    <html xmlns="http://www.w3.org/1999/xhtml"&gt;
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>BtoB Bloggers</title>
    <link href="style.css" rel="stylesheet" type="text/css" media="screen" />
    </head>

    <body>
    <div id="header"></div>

    <div id="main">
    <!—form—>
    <div id="basic" class="myform">
    <form id="form1" name="form1" method="post" action="">
    <h1>Enter your email and we’ll let you know as soon as it’s ready.</h1>
    <label>Name

    </label>
    <input type="text" name="textfield" id="textfield" />

    <label>Email

    </label>
    <input type="text" name="textfield" id="textfield" />

    <label>Blog Name
    <span class="small">Optional</span>
    </label>
    <input type="text" name="textfield" id="textfield" />
    <label>Blog URL
    <span class="small">Optional</span>
    </label>
    <input type="text" name="textfield" id="textfield" />
    <button type="submit">Sign-up</button>
    <div class="spacer"></div>
    </form>
    </div><!—end form—>

    </div><!–end main—>
    <div id="footer">

    <div class="container">

    <p>Copyright &copy 2009 Make Good Media. <br /> All Rights Reserved.</p>

    </div> <!—end container—>

    # September 3, 2009 at 11:11 pm

    I solved this..thanks

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".