Community Forums › Forums › Archived Forums › Design Tips and Tricks › Generate Box – Stuck at the top
Tagged: generate box
- This topic has 5 replies, 2 voices, and was last updated 12 years, 1 month ago by
SoZo.
-
AuthorPosts
-
January 16, 2013 at 6:16 pm #12481
megwins
MemberHi, 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
January 17, 2013 at 12:40 pm #12673SoZo
MemberAdd 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
January 17, 2013 at 12:43 pm #12675megwins
MemberThanks 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.
January 17, 2013 at 12:44 pm #12676SoZo
MemberPadding and margin both worked for me
John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography
January 17, 2013 at 12:54 pm #12680megwins
MemberCool! 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
January 17, 2013 at 12:56 pm #12682SoZo
MemberSomething 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
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.