Hi,
I have 2 problems :
1) How to align the "Map" to stick to right without overlapping others when browser is small ?
2) How the footer stick to the bottom and center of the page ? Something like this http://www.cssstickyfooter.com/ . But I don't know how to apply on it.
Hi:
You wil need to change the footer css to the following:
div#footer {bottom:0; color:#ffffff; float:none; fonat-family:Arial; font-size:17px; position:absolute; text-align:center; text-decoration:none; text-shadow:5px 3px 6px #000000; width:100%; z-index:1;}
This will force the footer to the bottom all the time.
If I may suggest, you should propbably look at all your CSS, because the fix above will only make hte footer stick to the bottom of the view port. This is because the previous CSS is forcing your site to be fixed px sizes. You should use % sizes to fix your whole site. to act properly when rezised.
Best Regards,
dennishall
Hi,
Thanks for your suggestion, but i still have problem for the Map.
Yes, I did forget the map. Also, I took the opportunity, to redo your HTML and CSS. Your HTML had no closing tag to your wrapper DIV, nor was this DIV required.
You also had no closing tag for your first TD in your TABLE.
I've placed all the scrtipt in one file, however, you can seperate the CSS out again.
I also modified the image URL's to point to your server, so, you will want to remove all the http://yourserver stuff from the code below.
I'll leave it to you to lock down the display properties of the form size and logo size, but with this scripting, you should be well on your way.
Here is your finished produc. Until you publish it to your host, you can run it from your desktop because of the non relative URLs:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Alpha Alps</title>
<script type="text/javascript" src="http://alphaalps.com/js/prototype.js"></script>
<script type="text/javascript" src="http://alphaalps.com/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="http://alphaalps.com/js/lightbox.js"></script>
<style>
body {font-size:12px; margin:auto 0px;}
img.bg {width:100%; height:100%; position:fixed; top:0; left:0;}
#logo {position:absolute; left:8%; top:10%; float:left; width:100%;}
.h1 {font-size:18px;}
a img {border:none; border-bottom:none;}
a:link {color:#fff;}
a:visited {color:#fff;}
a:hover {color:#cccc00;}
label {float:right;}
legend {margin-left:210px;}
div#map_wrapper { position:absolute; right:0px; top:-13px; width:45%;}
div#googlemap {margin-left:300px; margin-top:-100px;}
div#enquiry-form {position:absolute; font-family:Kalinga; font-size:18px; color:#FFF; top:45%; float:left; left:1%;} /*top:380px;*/
div#footer {text-decoration:none; width:100%; font-size:17px; color:#fff; text-align:center; font-family:Arial; position:absolute; z-index:1; margin:0 auto; text-shadow:5px 3px 6px #000; bottom:0px;}
div#footer a {text-decoration:none; color:#fff; clear:both;}
div#footer a:hover{color:#cccc00;}
</style>
</head>
<body>
<img src="http://alphaalps.com/images/contact.jpg" class="bg">
<div id="logo">
<img src="http://alphaalps.com/images/logo_contact.png">
</div>
<div id="enquiry-form">
<form id="enquiry" method="post" action="send_form_email.php">
<legend>Enquiry Form:</legend>
<table width="432">
<td width="202">
</tr>
<tr>
<td valign="top">
<label for=name>Contact Person</label>
</td>
<td width="181" valign="top">
<input id=name name=name type=text placeholder="First and last name" autofocus maxlength="50" size="30" required>
</td>
</tr>
<tr>
<td valign="top">
<label for=email>Email Address</label>
</td>
<td valign="top">
<input id=email name=email type=email placeholder="example@domain.com" maxlength="50" size="30" required>
</td>
</tr>
<tr>
<td valign="top">
<label for=phone>Telephone Number</label>
</td>
<td valign="top">
<input id=phone name=telephone type=tel placeholder="Eg. +447500000000 " maxlength="50" size="30" required>
</td>
</tr>
<tr>
<td valign="top">
<label for=Enquiry>Enquiry</label>
</td>
<td valign="top">
<textarea id=Enquiry name=enquiry rows=10 maxlength="1000" cols="24" required></textarea>
</td>
</tr>
<tr>
<td colspan="2" style="text-align:right">
<input type="reset" value="Reset" />
<input type="submit" src="http://alphaalps.com/submit.png" border="0" value="Submit" />
</td>
</tr>
</td>
</table>
</form>
</div>
</div>
<div id="map_wrapper">
<div id="map" name="Map">
<img src="http://alphaalps.com/images/map.png" width="100%" border="0" name="map" usemap="#Map" />
<map name="Map" id="Map">
<area shape="poly" coords="196,697,632,538,621,-1,473,0,5,167" href="http://alphaalps.com/images/enlarge_map.jpg" rel="lightbox]" onmouseover='document.map.src="http://alphaalps.com/images/map_over.png" 'onmouseout='document.map.src="http://alphaalps.com/images/map.png" '/>
</map>
</div>
</div>
<div id="googlemap">
<a href="http://maps.google.com/maps?f=q&source=s_q&hl=en&q=Jalan+SL+11/7,+Bandar+Sungai+Long,+43000+Kajang,+Selangor,+Malaysia&aq=&sll=4.210484,101.975766&sspn=17.960741,28.54248&g=malaysia&ie=UTF8&geocode=FXWZLgAdYm4RBg&split=0&hq=&hnear=Jalan+SL+11/7,+Bandar+Sungai+Long,+43000+Kajang,+Selangor,+Malaysia&ll=3.051329,101.802213&spn=0.008432,0.013937&z=17" target="_blank" onmouseover='document.googlemap.src="http://alphaalps.com/images/googlemap_over.png" ' onmouseout='document.googlemap.src="http://alphaalps.com/images/googlemap.png" '>
<img src="http://alphaalps.com/images/googlemap.png" name="googlemap" width="209" height="91" />
</a>
</div>
<div id="footer">
<p>
</p>
<p>
<a href="http://alphaalps.com/">Home</a>
|
<a href="http://alphaalps.com/company.html">theCompany</a>
|
<a href="http://alphaalps.com/gallery.html">Gallery</a>
|
<a href="http://alphaalps.com/workshop/" target="_blank">theWorkshop</a>
|
<a href="http://alphaalps.com/contact.html">ContactUs</a>
</p>
<font color="#ccc399" size="2">Copyrights © 2011 Alpha Alps (M) Sdn. Bhd. | All Rights Reserved</font>
</body>
</html>I hope this helps you to understand how to lock down website scaling in HTML.
Best Regards,
dennishall
If this solves, your problem, please mark as solved.
Thanks dennishall! appreciated of ur help!
But there is some problem.
The map didn't stick on the right, there is scroll bar below, it has a small gap on the right.
And when you view in smaller screen resolution, the footer is overlapping the content.
I was thinking to separate each div which is the enquiry form float to left, and map float to right. Then the footer would be stick on the bottom, when smaller screen resolution, the scroll bar will appear. So it won't overlapping the content.
Something like this http://ryanfait.com/sticky-footer . When smaller screen resolution, there is a scroll bar for it.
One of the main issues I have found when designing with CSS is a problem with margins in Internet Explorer 6. I found that when using a float on a div tag that also had a margin set, the margin would actually double and then knock the whole pages layout out. After numerous late nights and an insane amount of coffee I finally found a solution to this double margin bug. By inserting a simple line of code the double margin no longer double ! That solution is as follows, by adding this line of code to your CSS div tag 'display: inline'.
I also create same problem, in my website http://ukwebsitedesigncompany.co.uk many css errors so please suggest me how to improve our website css, according to css validation and google friendly.
I am web designer cum SEO but not found how to improve my website.
Hi,
I have 2 problems :
1) How to align the "Map" to stick to right without overlapping others when browser is small ?
2) How the footer stick to the bottom and center of the page ? Something like this http://www.cssstickyfooter.com/ . But I don't know how to apply on it.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.