Hi,
This is my first post--I'm really a graphic designer, but have been asked to do some web design. I'm amateur at best, and at worst, don't know the crap I'm doing.
I'm having problems getting my site to display correctly across multiple browsers and resolutions. Though it displays correctly on my monitor, I can see the problems when I try to minimize the site. I'm guessing this has something to do with my using absolute positioning on two of my elements; however, I'm unsure how to keep these elements (the circles and form) to hug the left and top edge of the site, respectively.
I've attached a screenshot of how it shoulddisplay.
Any help or suggestions on how to make this browser and minimize friendly?
I've pasted the html and CSS below--sorry, there's a lot of junk in there since this is the third iteration of the design. Thanks for any help!!:)
Here's the url: http://www.vehicleprojects.com/landing-page3/translation-services.html
Here's my html:
<body>
<div id="wrapper">
<div id="main_block">
<div id="innerblock">
<!--Top Panel starts here -->
<div id="top_panel">
<span class="tp_bg1">
<a href="index.html"><img src="images/logo_inverse.jpg" width="307" height="45" alt="" style="float:left; margin:10px 0 0px 0px;"/></a>
</span>
</div>
<!--Top Panel ends here -->
<!--Left Panel starts here -->
<div class="leftpanel">
<h1>
We speak your language.
</h1>
<span class="svc_txt">
Localization, transcreation, internationalization, globalization. However you describe it, it boils down to excellent project management, combined with translation and media expertise. Our industry loves to make the business of translation sound perplexing. Let us make it easy for you.
</span>
</div>
<!--Left Panel ends here -->
<!--Right Panel starts here -->
<div id="container">
<div id="hang_tab">
<img src="images/circles.png" /> </div>
</div>
<div id="rightpanel">
<div id="form_bkg">
<img src="images/form_bkg_gr.jpg" />
</div>
<div class="image">
<h2>
Have us call you
</h2>
<form action="ls11_send.php" method="post" onSubmit="return validate_form(this);" name="thisform" class="form">
<br /><br />
<label>Name:</label>
<input type="text" name="name" class="input-text" />
<label>Email:</label>
<input type="text" name="email" class="input-text" />
<label>Phone:</label>
<input type="text" name="phone" class="input-text" />
<label>Subject:</label>
<select name="type" class="input-select">
<option value="Phone_Call">I just want to talk</option>
<option value="Quote">I have a project and need a quote</option>
<option value="Fact_Sheet">Mail me a fact sheet</option>
</select>
<label>Message:</label>
<input type="text" name="message" class="input-text2" />
<br>
<input type="submit" class="button" value="Send message" />
<span class="rp_smltxt"><p>You hate spam. We do, too. <br />
We promise to protect your information.</p><br><br>
</span>
</form>
<span class="rp_nav">
<a href="http://www.wordbank.com/get-a-quote/">CONTACT US</a>
</span>
</div>
</div>
<!--Right Panel ends here -->
<!--content Panel ends here -->
</div>
<!--innerblock ends here -->
</div>
<!--mainblock ends here -->
<div id="l_box">
<h3>TRANSLATION SERVICES</h3>
<h4><span style="color:#1e3065">Superior service.
</span>
<span style="color:#1f7900"> High quality.
</span>
<br />
<span style="color: #0c91ba">On-time & On-budget.
</span>
</h4>
<div class="svc_box">
<div class="mask1">
<div id="box1">
<span><img src="img1d.jpg" alt="Testimonials" /></span>
<span><img src="client1c.jpg" alt="Our Clients" /></span>
<span><img src="img2d.jpg" alt="Testimonials" /></span>
<span><img src="client2c.jpg" alt="Our Clients" /></span>
<span><img src="img3d.jpg" alt="Photo" /></span>
<span><img src="client3c.jpg" alt="Our Clients" /></span>
<span><img src="img4d.jpg" alt="Photo" /></span>
</div>
</div>
</div>
</div>
<!--footer panel starts here -->
<div id="footer">
<div id="ftr_nav">
<div id="ftr_inner">
<h5>
MEMBER<br />
OF
</h5>
</div>
<h5> CONNECT</h5>
<br /><br />
<a href="http://www.linkedin.com/company/217948"><img src="images/linkedin.png" width="38" height="37" alt="Connect on LinkedIn" style="margin-top: 8px;" /></a>
<a href="http://twitter.com/WordbankLLC"><img src="images/twitter.png" width="38" height="37" alt="Follow @WordbankLLC on Twitter" style="margin: 8px 0 0 8px;" /></a>
</div>
</div>
<!--footer panel ends here -->
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=YOUR-ACCOUNT-ID"></script>
</div>
</body>Here's my CSS:
body {
padding: 0;
margin: 0;
background: #ffffff;
height: 100%;
}
#wrapper {
background: url(../images/hdr_lg.jpg) repeat-x;
width: 100%;
display: table;
}
#page {
width: 100%;
display: table;
}
p{margin:0px;
padding:0px;
}
img{border:0px;}
a:hover{text-decoration:none;}
h1 {
font: 62px Futura, Myriad Web, Verdana, Arial, Helvetica, sans-serif;
width: 500px;
letter-spacing: 0px;
color:#333333;
margin: 55px 0 25px 0;
}
h3 {
position: relative;
font: 30px Futura Bk, Verdana, Arial, Helvetica, sans-serif;
width: 500px;
letter-spacing: 0px;
color:#333333;
margin: 40px 0 0 315px;
z-index: 3;
}
h4 {
position: relative;
font: 18px Arial, Tahoma, Verdana, Helvetica, sans-serif;
width: 300px;
letter-spacing: 0px;
margin: 5px 0 0 315px;
z-index: 3;
}
h5 {
font: 24px Futura Bk, Verdana, Arial, Helvetica, sans-serif;
display:inline;
width: 200px;
letter-spacing: 0px;
color:#333333;
margin: 0px 0 0 0px;
}
.link
{
font:11 px Tahoma, Verdana, Arial, Helvetica, sans-serif;
color:#2D8DC6;;
text-decoration:none;
}
.link:hover
{
cursor:hand;
text-decoration:underline;
}
.img {
margin: 7px 0 0 0;
}
#main_block{
margin:auto;
width:1020px;
}
#innerblock{
float:left;
width:1020px;
background:none;
}
/* TOP PANEL STARTS HERE */
#top_panel{
float:left;
display:inline;
width:1020px;
}
#header{
float: left;
display:inline;
background: url(../images/header.jpg)
width: 1020px;
height:147px;
}
.tp_bg1{
float:left;
background:none;
width:1020px;
height:75px;
display:inline;
margin: 0 0 0 0px;
}
.tp_nav{
float:right;
width:580px;
height:15px;
display:inline;
margin: -55px 0px 0 0px;
}
.menu{
float:left;
width:800px;
margin:0px 0 0 0px;
display:inline;
}
.menu a {
float:left;
text-align:center;
padding:0px 0 0 12px;
font: 14px Myriad Web, Arial, Helvetica, sans-serif, Tahoma;
color:#283D7C;
letter-spacing: 1px;
text-decoration:none;
margin:0 0 0 10px;
}
.menu a:hover {
float:left;
text-align:center;
padding:0px 0 0 12px;
font: 14px Myriad Web, Arial, Helvetica, sans-serif, Tahoma;
color:#666666;
letter-spacing: 1px;
text-decoration:none;
}
/* TOP PANEL ENDS HERE */
/* LEFT PANEL STARTS HERE */
.leftpanel{
float:left;
width:700px;
background: url(../images/callout4.jpg) no-repeat;
height:650px;
display:inline;
margin: 25px 0 0 0px;
padding: 0 0 0 0px;
}
.lp_bkg{
position: relative;
float:left;
height: 150px;
background:url(../images/quote_bkg.jpg) no-repeat;
margin:10px 0 0 -37px;
z-index: 8;
}
.lp_txt{
position: relative;
float:left;
font: 20px/24px Futura, Arial, Tahoma, Verdana, Arial, Helvetica, sans-serif;
width: 319px;
text-align:left;
color:#333333;
margin:10px 0 0 37px;
z-index: 8;
}
.lp_smltxt{
position: relative;
float:left;
font: 14px Futura, Arial, Tahoma, Verdana, Arial, Helvetica, sans-serif;
width: 319px;
text-align:right;
color:#333333;
margin:15px 0 0 0px;
z-index: 8;
}
.svc{
position:relative;
width:330px;
height:220px;
overflow:hidden;
}
.svc_box{
display: inline;
float: left;
padding:0px 0px 0 0;
margin:-85px 0 0px 675px;
}
.svc_txt{
float: left;
display: inline;
font: 16px/22px Arial, Tahoma, Verdana, Arial, Helvetica, sans-serif;
width: 325px;
color: #000;
text-align: left;
z-index: 8;
}
/* LEFT PANEL ENDS HERE */
/* RIGHT PANEL STARTS HERE */
#container{
width:210px;
}
#hang_tab{
position: absolute;
top: 35px;
left: 0px;
width: 208px;
height: 198px;
z-index: 10;
}
#rightpanel{
position: relative;
float:left;
width:300px;
height: 800px;
display:inline;
margin:0px 0 0 0px;
z-index: 10;
}
#form_bkg {
position: absolute;
width: 300px;
height: 800px;
z-index: 10;
margin: -100px 0 0 10px;
}
.rp_nav{
float:left;
display: inline;
width: 300px;
margin:0px 0 0 0px;
}
.rp_nav a {
float:left;
width: 315px;
height: 40px;
font: 16px Futura Bk, Futura, Myriad Web, Arial, Helvetica, sans-serif;
color:#000;
text-decoration:none;
margin:0 0 0 0px;
padding:10px 0 0 20px;
}
.rp_nav a:hover {
float:left;
background:#333333;
width: 315px;
height: 40px;
font: 16px Futura Bk, Futura, Myriad Web, Arial, Helvetica, sans-serif;
color:#fff;
text-decoration:none;
margin: 0 0 0 -10px;
padding: 10px 0 0 10px;
}
.rp_hdr{
float:left;
font:18px Myriad Web, Arial, Helvetica, sans-serif, Tahoma;
width: 200px;
text-align:left;
color:#666666;
margin:20px 0 15px 20px;
}
.rp_smltxt{
float:left;
font:11px/14px Tahoma, Verdana, Arial, Helvetica, sans-serif;
text-align:left;
color:#333333;
width:200px;
margin:15px 0px 0 20px;
}
.image
{
position: relative;
width: 100%; /* for IE 6 */
margin: 0 0 0 0;
padding: 0 0 0 20px;
z-index: 11;
}
h2 {
position: relative;
font: 30px Myriad Web, Futura, Arial, Helvetica, sans-serif;
color: #ffffff;
margin: 0 0 0 20px; }
/* RIGHT PANEL ENDS HERE */
#form-request {overflow: hidden;
padding: 10px;
margin: 20px;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
-webkit-box-shadow: 0 0 8px #efefef;
-moz-box-shadow: 0 0 8px #efefef;
box-shadow: 0 0 8px #efefef;}
.requestback{
margin: 0px 0 0 0;
}
.form .input-text {width: 220px;padding: 4px 5px;}
.form .input-text2 {width: 220px; height: 150px; padding: 4px 5px; margin: 0 0 0 22px;}
.form .input-select {width: 222px;padding: 3px 5px;}
.form .right {float: left;margin-left:2px;width: 230px;}
.form .privacy {font-size: 10px;line-height: 11px;background: url("../images/icon_lock.html") 0 0 no-repeat;text-indent: 20px;padding-top: 10px;margin: 0 5px 0 20px;}
#TB_window .form {padding: 0px;}
.topleft {float:left;margin-left:40px;width:610px;padding-right:40px; }
.top_thanks {float:left;margin-left:0px;width:610px;padding-right:10px; }
.input-text {background: #fff;
border: 1px solid #666;
margin: 0 0 11px 22px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;}
.input-select {background: #fff;border: 1px solid #000;
margin: 0 0 11px 22px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;}
label {color: #fff;
font: 12px Tahoma, Verdana, Arial Narrow, Arial, Helvetica, sans-serif;
display: block;
margin: 0px 0 3px 22px;}
.submit {background: url("../images/getquote.jpg") 0 0 no-repeat;width: 181px;height: 38px;float:left;border: 0;text-indent: -9999em;overflow: hidden;}
.button {background: url("../images/button.jpg") 0 0 no-repeat;
width: 149px;height: 45px;
font: 16px Future Bk, Futura, Myriad Web, Arial, Helvetica, sans-serif;
float:right;border: 0;
display: inline;
overflow: hidden;
padding: 0 0 5px 0;
margin: 12px 40px 0 0px;}
.button:hover {background: url("../images/button_dn.jpg") 0 0 no-repeat;
width: 149px;height: 45px;
color:#FFFFFF;
float:right;border: 0;
overflow: hidden;
margin: 12px 40px 0 0px;}
#l_box {
position: relative;
float:left;
font: 22px Futura, Arial, Tahoma, Verdana, Arial, Helvetica, sans-serif;
text-align:left;
background: url(../images/ftr_bkg2.jpg) repeat-x bottom;
height: 280px;
width:100%;
display:table;
margin:-320px 0 0 0px;
z-index: 1;
}
.lbox_title {
text-align:left;
display: block;
font: 22px Futura, Arial, Tahoma, Verdana, Arial, Helvetica, sans-serif;
width: 200px;
margin: 0 0 0 200px;
}
/* Slider*/
#box1{
position:absolute;
}
#box1 span{
display:block;
float:left;
}
.mask1{
position:relative;
width:330px;
height:220px;
overflow:hidden;
}
.sample{
display: inline;
float: left;
padding:0px 0px 0 0;
margin:-5px 20px 0px 0px;
}
/* FOOTER STARTS HERE */
#footer{
margin: 0 auto;
width:100%;
display: table;
background:none;
}
#ftr_nav{
margin:auto;
width:1020px;
}
#ftr_inner{
float:left;
width:350px;
}
.ftr_lnks{
float: left;
display:inline;
margin:12px 0 10px 30px;
font:12px/15px Tahoma, Arial, Helvetica, sans-serif;
color:#666666;
}
.fp_txt{
float:left; margin:0px 0 0 0px;
font:12px/15px Tahoma, Arial, Helvetica, sans-serif;
color:#ffffff;
text-decoration:none; display:inline;
}
.fp_txt:hover{
float:left;
font:12px/15px Tahoma, Arial, Helvetica, sans-serif;
color:#FFFFFF;
text-decoration:underline;
}
.fp_divi{
float:left; margin:0px 16px 0 16px;
font:11px/15px Arial; color:#CCCCCC;
display:inline;
}
.ft_cpy{
clear:left;
float:right;
text-align:right;
font: 11px Tahoma, Arial Narrow, Arial, Helvetica, sans-serif;
color:#ffffff;
margin:0px 10px 0px 0px;
text-decoration:none;
}
#ftrborderBlue {
float: left;
display:inline;
background:#213570;
width:1020px;
height: 15px;
}
