PDA

View Full Version : add space for two sections below main image


boomshot
09-19-2009, 02:17 AM
I am trying to get the bottom two items to appear side by side directly under the image. They both have their own div. (as that right?)
what am I doing wrong that they don't line up side by side?

I want the contact form on the right.
http://quinnmedia.net/testeva/lastseen/

thx

@charset "UTF-8";
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #000000;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
}

/* Tips for Elastic layouts
1. Since the elastic layouts overall sizing is based on the user's default fonts size, they are more unpredictable. Used correctly, they are also more accessible for those that need larger fonts size since the line length remains proportionate.
2. Sizing of divs in this layout are based on the 100% font size in the body element. If you decrease the text size overall by using a font-size: 80% on the body element or the #container, remember that the entire layout will downsize proportionately. You may want to increase the widths of the various divs to compensate for this.
3. If font sizing is changed in differing amounts on each div instead of on the overall design (ie: #sidebar1 is given a 70% font size and #mainContent is given an 85% font size), this will proportionately change each of the divs overall size. You may want to adjust based on your final font sizing.
*/
.oneColElsCtrHdr #container {
width: 773px; /* this width will create a container that will fit in an 800px browser window if text is left at browser default font sizes */
background: #000000;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 1px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
}
.oneColElsCtrHdr #header {
background: #000000;
/* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
}
.oneColElsCtrHdr #header h1 {
margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 5px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}
.oneColElsCtrHdr #mainContent {
padding: 0 0px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
background: #000000;
text-align: center;
padding-left: 0px;
}
.oneColElsCtrHdr #footer {
padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
background:#000000;
}
.oneColElsCtrHdr #footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}#footer {
color: #CCC;
}
#form {
text-align: justify;
padding-left: 600px;
}
.oneColElsCtrHdr #container #footer p #footer {
font-size: xx-small;
}
#contact {
text-align: left;
position: relative;
}
a {
font-family: Verdana, Geneva, sans-serif;
color: #CCC;
}

coloeagle
09-19-2009, 05:52 AM
Not seeing the #contact in your style sheet. Not seeing the #form anywhere in the html.

boomshot
09-19-2009, 06:41 AM
thx, please take a look now, althought the image map for the contact div is not on there. I just want to have that on the right (or vica versa) of the form, I just cant figure out how to put it where I want. I want it to line up with the top of the form, but also lining up with the right side of the main image.

coloeagle
09-19-2009, 06:52 AM
Try floating the div holding the form or the form itself right.
#form {float:right;width:???px}
Remember anytime you float you need to specify a width.

boomshot
09-19-2009, 07:02 AM
still not happening, what could be going on here?

coloeagle
09-19-2009, 07:10 AM
Just tested this on your site.
I added a style to #contact div image and closed it after the image

<div id="contact" style="float:right; width:265px;">
<img src="images/contact.gif" alt="contact" height="115" width="263">
</div>

boomshot
09-19-2009, 07:13 AM
that just puts it all the way to the righthttp://quinnmedia.net/testeva/lastseen/lastseencss.jpg

coloeagle
09-19-2009, 07:14 AM
I used the image but you could move the form the same way.

coloeagle
09-19-2009, 07:16 AM
You need to close the contact div. replace the <br> with </div>

boomshot
09-19-2009, 07:18 AM
so now they are both on the far ends of the page, although they are lined up to the bottom of the main image. how can I get them to align just below the main image and not hug the outside of the page?

boomshot
09-19-2009, 07:21 AM
her is the current html:
<div id="contact" style="float:right; width:265px;">
<img src="images/contact.gif" alt="contact" height="115" width="263">
</div>
<div id="form">
<form method="post" action="http://oi.vresp.com?fid=e32126ee87" target="vr_optin_popup" onsubmit="window.open( 'http://www.verticalresponse.com', 'vr_optin_popup', 'scrollbars=yes,width=600,height=450' ); return true;" >
<div style="font-family: verdana; font-size: 11px; width: 160px; padding: 10px; border: 1px solid #000000; background: #000000;">
<strong><span style="color: #fff;">Sign Up Today!</span></strong>
<p style="text-align: right; margin-top: 10px; margin-bottom: 10px;"><span style="color: #f00;">* </span><span style="color: #fff">required</span></p>
<label style="color: #fff;">Email Address:</label> <span style="color: #f00">* </span>
<br/>
<input name="email_address" size="15" style="margin-top: 5px; margin-bottom: 5px; border: 1px solid #999; padding: 3px;"/>
<br/>
<label style="color: #333333;">First Name:</label>
<br/>
<input name="first_name" size="15" style="margin-top: 5px; margin-bottom: 5px; border: 1px solid #999; padding: 3px;"/>
<label style="color: #333333;">Last Name:</label>
<br/>
<input name="last_name" size="15" style="margin-top: 5px; margin-bottom: 5px; border: 1px solid #999; padding: 3px;"/>
<br/>
<input type="submit" value="Join Now" style="margin-top: 5px; border: 1px solid #999; padding: 3px;"/>
<br/>
<br/><span style="color: #fff"><a href="http://www.verticalresponse.com" title="Email Marketing by VerticalResponse">Email Marketing</a> by VerticalResponse</span>
</div>
</form>


here is the current CSS:
}
#contact {
float: right;
}

}
#form {
float:left;width:200px
}

coloeagle
09-19-2009, 07:23 AM
Add a left or right margin to the divs
Add a width to the #contact
Move the closing div tag after the closing form tag

boomshot
09-19-2009, 07:29 AM
ok that certainly helped, I am almost there - now I need to add a share this icon and straighten up the form (not sure how it got misaligned)
thank you so much, if you have any suggestions on these I would greatly appreciate

coloeagle
09-19-2009, 07:36 AM
Form looks ok to me unless you are talking about the required being to the right.

boomshot
09-19-2009, 07:42 AM
It was just the Last Name text, I corrected it easy enough. So, if I want to add a share this image (javascript) below the contact image, how would you suggest that? again thanks, I am still obviously trying to figure out CSS

coloeagle
09-19-2009, 07:47 AM
Depending on the size, you could just add it below the image inside the #contact div
You may or may not need to place it inside a p tag

Your welcome

coloeagle
09-19-2009, 07:55 AM
It was just the Last Name text,

Might want to change the text color of these. I couldn't even see them in my browser.

(going on 1 am here, 5 is going to come real quick so I'm off to get a few zzzzzzzzz)

boomshot
09-19-2009, 07:58 AM
thanks, I have changed them to white. I appreciate your help!