Generate Box – Stuck at the top

Community Forums Forums Design Tips and Tricks Generate Box – Stuck at the top

This topic is: not resolved

Tagged: 

This topic contains 5 replies, has 2 voices, and was last updated by  SoZo 1 year, 6 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #12481

    megwins
    Participant
    Post count: 2

    Hi, I’ve been staring at this problem for days, and I can not figure it out! Maybe I’m thinking about it wrong…?

    My site is: http://megwinget.com/ - You’ll see that I’ve changed the template quite a bit.

    Changed the background of #generate-box to tangerine with a 300px image in it.
    Changed the background of #generate-box.wrap to hot pink

    (so my understanding is that there are two boxes, the generate box itself, and the .wrap, which makes a box within a box)

    I want to make the hot pink box be small and at the bottom of the tangerine box. I can make it small (50px high), but at the top of the tangerine box; or I can make the words / form be at the bottom of the tangerine box, but the pink box itself takes up the entire space.

    Why / how is the hot pink box tied to the top of the generate-box, and how do I make it stop? I’m pasting the CSS for the generate box here, although it seems like I’ve tried changing the values on every relevant piece – and nothing can make the pink box be where I want it to be. :(

    /* Generate Box
    ———————————————————— */

    /*this is the background – behind the generate box*/
    #generate-box {
    background: #ed1c24 url(images/test-generatebox-bg.png) no-repeat center top;
    padding: 0 0 10px;
    height: 350px;
    }

    /*this contains all the content within the box – the words, the form, the background color – this is the background within the pink box*/

    /*#ed1c24 = tangerine, #ed138c = hot pink*/

    #generate-box .wrap {
    /*-moz-box-shadow: 0 0 2px #999;*/
    /*-webkit-box-shadow: 0 0 2px #999;*/
    background: #ed138c; /*I could put the picture in here*/
    border: 1px solid #ffcc99;
    /*box-shadow: 0 0 2px #999;*/
    clear: both;
    color: #666666;
    /*min-height: 50px; /* make 75 if problematic */
    margin: 20px auto 0;
    /*margin: 20px auto 0;*/
    padding: 10px;
    /*text-shadow: -1px -1px #000;*/
    width: 940px;
    }

    /*the widget is just the email form*/

    #generate-box .widget {
    position: relative;
    }

    /*this defines the paragraph text*/
    #generate-box p {
    color: #333333;
    font-family: ‘Josefin Sans’, sans-serif;
    font-size: 22px;
    /*’Helvetica Neue’, Arial, Tahoma, sans-serif;*/
    /*text-shadow: -1px -1px #000;*/
    /*margin-top: 220px; this got the text and the form fields to move to the bottom of the pink box but then the pink box took up the entire vertical space within the tangerine outer box */
    }

    #generate-box form {
    /*background: url(images/arrow.png) no-repeat 25px;*/
    display: block;
    /*margin-top: 235px;*/ /*this will move the form down to the bottom*/
    padding: 10px 0 0 525px; /* changing the first number is padding between form and p */
    }

    #generate-box a:hover {
    color: #fff;
    }

    /*#generate-box img.alignright {
    position: absolute;
    right: -30px;
    top: 200;
    }*/

    /*#generate-box img.alignleft {
    position: absolute;
    left: 0;
    top: 0;
    }*/

    /* YO I changed this to move the inputs over to the right margin. Originally margin-top:10px; padding: 5px 0 0 150px; */
    #generate-box #mce-EMAIL,
    #generate-box input[type="text"] {
    -moz-border-radius: 5px;
    -moz-box-shadow: inset 0 1px 2px 1px #eee;
    -webkit-border-radius: 5px;
    -webkit-box-shadow: inset 0 1px 2px 1px #eee;
    background-color: #fff;
    border: 2px solid #999999;
    border-radius: 5px;
    box-shadow: inset 0 1px 1px 1px #eee;
    color: #777;
    font-size: 14px;
    padding: 5px 5px/*12px 15px*/;
    width: 200px;
    }

    #generate-box input[type="submit"] {
    font-size: 14px;
    padding: 5px 15px; /* originally 11 15 */
    }

    #generate-box .aweber .email,
    #generate-box .aweber .name {
    display: inline;
    margin: 0 2px;
    width: 150px;
    }

    #generate-box .aweber .name {
    width: 90px
    }

    #generate-box .aweber #subbox {
    background: none repeat scroll 0 0 transparent;
    border: 0 none;
    box-shadow: none;
    float: left;
    margin: 0;
    padding: 10;
    width: 300px;
    }

    #generate-box .aweber #subbutton {
    margin: 2px 0;
    }

    Any help would be appreciated!

    –Meg

    #12673

    SoZo
    Moderator
    Post count: 1573

    Add more of a top margin to #generate-box .wrap or top padding to #generate-box


    John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

    #12675

    megwins
    Participant
    Post count: 2

    Thanks SoZo, but I’ve already tried that. It’s not a margin or padding issue. It’s a positioning issue. I’m in the process of hiring someone to fix this problem, I’ll post a fix as soon as it’s worked out.

    #12676

    SoZo
    Moderator
    Post count: 1573

    Padding and margin both worked for me


    John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

    #12680

    megwins
    Participant
    Post count: 2

    Cool! Maybe you could send me the actual code, because I’ve been changing the padding and margins for 3 days, with no luck. Maybe I’m putting them in the wrong space…

     

    –M

    #12682

    SoZo
    Moderator
    Post count: 1573

    Something like

    #generate-box {
    background: #ed1c24 url(images/test-generatebox-bg.png) no-repeat center top;
    padding: 100px 0 10px 0;
    height: 250px;
    }


    John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

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

You must be logged in to reply to this topic.