mliilm
Members
-
Joined
-
Last visited
-
Hello everyone, I haven't posted in a while, but I am in need of help yet again. I am making some changes to my website, however aligning the Divs is proving to be quite the hassle. I have attached a few screens to illustrate the problems: 1) the video is way to high and when I add a margin-top property it does lower the video, however it also lowers the whole div (that cloudy grey grungy texture) 2) the footer has been giving me the most trouble, the body div (the green area) is supposed to go all the way through to the bottom of the page, however it just cuts off. my attempts to change this has gotten worse. 3) is there a way to match divs to the viewers screen resolution? Please inform if you need other screenshots or scripts to help solve this issue. Thank you for your time. below is the HTML: <body> <div id="wrapper"> <div id="header"> <a href="index.html"><img id="logo" src="logo2013.png" width="259" height="67"></a> <ul id="Social"> <li><a href=""><img src="LinkedIn.png" width="30" height="30"></a></li> <li><a href=""><img src="YouTube.png" width="30" height="30"></a></li> <li><a href=""><img src="Google +.png" width="30" height="30"></a></li> <li><a href=""><img src="Facebook.png" width="30" height="30"></a></li> </ul> <ul id="MenuBar"> <li><a href="index.html">home</a></li> <li> <a href="#"/>projects</a> <ul> <li><a href="nocturne.html">Nocturne Alley</a></li> <li><a href="sci_hall.html">Sci-fi Hallway</a></li> <li><a href="indy.html">Industrial Site</a></li> <li><a href="treasure.html">Treasure Chest</a></li> </ul> </li> <li><a href="resume.html">resume</a></li> <li><a href="contact.html">contact</a></li> </ul> </div> <div id="demo"> <iframe class="video" width="560" height="315" src="http://www.youtube.com/embed/UGl4X0BnWu8" frameborder="0" allowfullscreen></iframe> <h2>VFS reel - 2014</h2> </div> <div id="content"> <h1>ENVIRONMENTS</h1> <div id="subject"> <h3>Nocturne Alley</h3> <a href="nocturne.html"><img class="topics" src="thumb-noc.gif" width="268" height="173"></a> <a class="sub_link" href="nocturne.html">See breakdowns</a> </div> <div id="subject"> <h3>Sci-fi Hallway</h3> <a href="sci_hall.html"><img class="topics" src="thumb-sci.gif" width="268" height="173"></a> <a class="sub_link" href="sci_hall.html">See breakdowns</a> </div> <div id="subject"> <h3>Industrial Site</h3> <a href="indy.html"><img class="topics" src="thumb-indy.gif" width="268" height="173"></a> <a class="sub_link" href="indy.html">See breakdowns</a> </div> <div id="breakline"> <img src="body_divider.png" width="950" height="3"> </div> <h1>3D ASSETS</h1> <div id="subject"> <h3>Treasure Chest (animated)</h3> <a href="treasure.html"><img class="topics" src="thumb-chest.gif" width="268" height="173"></a> <a class="sub_link" href="treasure.html">See breakdowns</a> </div> <div id="breakline"> <img src="body_divider.png" width="950" height="3"> </div> <div id="footer"> - www.mikelimodels.com - <br> 2014 - All visuals and content designed by Michael Li unless detailed otherwise.<br> <br> Powered by Justhost.com </div> </div> </body> and the css: body, html { width:100%; height:100%; background-image: url(../bg2014.jpg) ; background-repeat: no-repeat; background-attachment: fixed; background-position: center top; font-family: Tahoma, Geneva, sans-serif; font-size: 14px; font-weight: bold; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } #wrapper { width:998px; background-image:url(../repeat_y.jpg); background-repeat:repeat-y; min-height: 100%; height: 100%; margin: -150px auto -99px; display:block; } #header { width:990px; height:117px; z-index:1000; background-image: url(../menu_bg.png); background-repeat: no-repeat; margin-left: auto; margin-right: auto; top:0; position:absolute; } #content { position: relative; display: block; text-align: center; margin-top: 25px; margin-right: auto; margin-bottom: -99px; margin-left: auto; background-color: #021c1a; padding: 5px; border-top-left-radius: 16px; border-top-right-radius: 16px; box-shadow: 0px 0px 25px #000; min-height: 100%; background-image: url(../body_bg.png); background-repeat: no-repeat; border-top-width: 1px; border-right-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-left-style: solid; border-top-color: #065e5d; border-right-color: #065e5d; border-left-color: #065e5d; height: 100%; overflow:inherit; } #footer { width:100%; background-color: #040504; color: #CCC; font-family: Tahoma, Geneva, sans-serif; font-size: 12px; text-align: center; padding-top: 20px; padding-bottom: 20px; position:absolute; z-index: 500; }
-
Hi, I uploaded the new design for my site. However, it behaves differently with other browsers. In opera and firefox it works fine. In chrome the main menu starts 1/4 down the page but if you refresh the page it aligns at the top like it's supposed to. In IE the rollover effects for 'sci-fi' and 'old industrial' don't work. My main concern is chrome though. Here is the code: ======= CSS ======= @charset "utf-8"; /* CSS Document */ body, html { height:100%; background-color: #0e0e0e; background-image: url(../bg2013.jpg); background-repeat: no-repeat; background-attachment: fixed; background-position: center top; margin: 0; } a, img { border:none; } p { font-family: Tahoma, Geneva, sans-serif; font-size: 14px; color: #e4e4e4; } h1 { color: #fff; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 16px; text-shadow: 2px 3px 0px #000; display: block; background-color: #5b6363; width: 190px; border-radius: 8px; text-align: center; letter-spacing: 1px; box-shadow: 1px 1px 16px #000; margin-left: 2%; height: auto; padding-right: 12px; padding-bottom: 10px; padding-left: 12px; padding-top: 8px; font-weight: bold; margin-top: 10px; } h2 { font-size: 1.1em; color: #FFF; font-family: Calibri, "Segoe UI", Tahoma; text-shadow: 2px 2px 2px #000; margin-top: 3px; } h3 { font-family: Calibri, "Segoe UI", Tahoma; font-size: 18px; color: #FFF; font-weight: bold; width: 268px; margin-top: 8px; text-align: left; margin-left: 16px; top: 20px; } h4 { font-family: Calibri, "Segoe UI", Tahoma; font-size: 24px; color: #FFF; font-weight: bold; text-shadow: 2px 2px 2px #000; } h5 { font-family: Calibri, "Segoe UI", Tahoma; font-size: 1.3em; font-weight: bold; color: #FFF; text-align: justify; width: inherit; padding-left: 20px; margin-top: 5px; } .sub_link { font-family: Tahoma, Geneva, sans-serif; font-size: 12px; color: #CCC; text-decoration: none; float: right; margin-top: 3px; margin-right: 30px; } .sub_link:hover { color: #FC6; } .video { height: 315px; width: 560px; border: 1px solid #666; box-shadow: 1px 1px 30px 5px #000; margin: 0 auto; margin-top: 35px; position: relative; z-index: 0; } .topics { border: 1px solid #666; opacity: 0.7; -moz-box-shadow: inset 0px 0px 0px 10px #000000; -webkit-box-shadow: inset 0px 0px 0px 10px #000000; box-shadow: inset 0px 0px 0px 10px #000000; -webkit-transition: opacity; -webkit-transition-timing-function: ease-out; -webkit-transition-duration: 500ms; -moz-transition: opacity; -moz-transition-timing-function: ease-out; -moz-transition-duration: 500ms; -ie-transition: opacity; -ie-transition-timing-function: ease-out; -ie-transition-duration: 500ms; -o-transition: opacity; -o-transition-timing-function: ease-out; -o-transition-duration: 500ms; background-color: rgb(68,68,68); margin-top: -8px; z-index: 250; margin-right: 20px; } .topics:hover { opacity: 1.0; -webkit-transition: opacity; -webkit-transition-timing-function: ease-out; -webkit-transition-duration: 500ms; -moz-transition: opacity; -moz-transition-timing-function: ease-out; -moz-transition-duration: 500ms; -ie-transition: opacity; -ie-transition-timing-function: ease-out; -ie-transition-duration: 500ms; -o-transition: opacity; -o-transition-timing-function: ease-out; -o-transition-duration: 500ms; } .bio_text { font-family: Tahoma, Geneva, sans-serif; font-size: 0.85em; color: #FFF; line-height: 1.2em; text-shadow: 1px 1px 1px #000; vertical-align: text-top; margin-top: -15px; } .preview { border: thin solid #666; box-shadow: 1px 1px 25px #000; margin: 10px; } #wrapper { width: 994px; min-height: 100%; height: 100%; margin: 0 auto -99px; /* the bottom margin is the negative value of the footer's height */ } #header { top:0px; width:990px; height:117px; z-index:1; background-image: url(../menu_bg.png); background-repeat: no-repeat; margin-top: 0; margin-right: auto; margin-bottom: 10px; margin-left: auto; } #logo { width:256px; height:82px; z-index:250; margin-top: 18px; margin-left: 40px; } #demo{ width:990px; height: 410px; z-index:1; background-attachment: inherit; background-image: url(../demo_bg.png); background-repeat: no-repeat; text-align: center; background-position: center; margin: 0 auto; position: relative; } #content { position: relative; display: block; text-align: center; margin-top: 0; margin-right: auto; margin-bottom: -99px; margin-left: auto; } #subject { width:306px; height:261px; z-index:1; background-image: url(../thumb_bg.png); background-repeat: no-repeat; float: left; margin-top: 8px; padding: 10px; } #MenuBar { float: right; display: inline; width: 340px; height: 20px; position: relative; right: 20px; margin-top: 80px; margin-right: auto; margin-bottom: 0; margin-left: auto; } #MenuBar li { display: inline; border-left-width: thin; border-left-color: #CCC; border-left-style: solid; padding-left: 12px; padding-right: 12px; color: #FFF; } #MenuBar li:first-child { border-left:none; } #MenuBar a{ font-family: Tahoma, Geneva, sans-serif; color: #999; text-decoration: none; font-weight: bold; font-size: 14px; display: inline; } #MenuBar a:hover { color: #FFF; } #footer { width:990px; height:99px; background-image: url(../footer_bg.png); background-repeat: no-repeat; color: #CCC; font-family: Tahoma, Geneva, sans-serif; font-size: 12px; text-align: center; background-position: center; margin-top: 20px; margin-right: auto; margin-bottom: 0; margin-left: auto; padding-top: 8px; clear: both; vertical-align: middle; } #push { clear: both; height: 1px; } ======== HTML ======== <body> <div id="wrapper"> <div id="header"> <img id="logo" src="logo2013.png" width="256" height="82"> <ul id="MenuBar"> <li><a href="index.html">portfolio</a></li> <li><a href="updates.html">updates</a></li> <li><a href="about.html">about</a></li> <li><a href="contact.html">contact</a></li> </ul> </div> <div id="demo"> <iframe class="video" width="560" height="315" src="http://www.youtube.com/embed/hlijAYwM2mM?rel=0" frameborder="0" allowfullscreen></iframe> <h2>Demo reel - 2013</h2> </div>
-
-
I have a question about contact forms: I've written these lines of code into my page, yet I am unsure if it will work correctly. As I understand it, in this the contact.php page, if the $mail_to property is filled with the recipients email (my email in this case) and when the visitor clicks on the 'Send' button, the message is converted into an email and sent to the recipient (mli.myart@gmail.com). Is this correct? ======= PHP code ======= <?php $field_name = $_POST['cf_name']; $field_email = $_POST['cf_email']; $field_message = $_POST['cf_message']; $mail_to = 'mli.myart@gmail.com'; $subject = 'Message from a site visitor '.$field_name; $body_message = 'From: '.$field_name."\n"; $body_message .= 'E-mail: '.$field_email."\n"; $body_message .= 'Message: '.$field_message; $headers = "From: $cf_email\r\n"; $headers .= "Reply-To: $cf_email\r\n"; $mail_status = mail($mail_to, $subject, $body_message, $headers); if ($mail_status) { ?> <script language="javascript" type="text/javascript"> alert('Thank you for the message. We will contact you shortly.'); window.location = 'contact.html'; </script> <?php } else { ?> <script language="javascript" type="text/javascript"> alert('Message failed. Please, send an email to mli.myart@gmail.com'); window.location = 'contact.html'; </script> <?php } ?> ======== HTML code ======== <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>.: ML - 3D Environment Artist :.</title> <link href="_css/new_style.css" rel="stylesheet" type="text/css"> <link rel="shortcut icon" href="favicon.ICO"> <style> #contact_msg { width: 55%; margin-top: 10px; margin-right: auto; margin-bottom: 0; margin-left: auto; float: left; padding: 10px; color: #FFF; } .con_text { font-family: Tahoma, Geneva, sans-serif; font-size: 14px; color: #FFF; padding-left: 10px; line-height: 20px; margin-top: -10px; } .field_title { font-weight: bold; font-size: 12px; font-family: Tahoma, Geneva, sans-serif; padding-bottom: 20px; color: #FFF; } #field_id { font-family: Tahoma, Geneva, sans-serif; color: #CCC; background-color: #000; border: thin solid #999; padding: 8px; width: 250px; font-size: 14px; height: 20px; } #text_area { width: 500px; height: 200px; background-color: #000; border: thin solid #999; font-family: Tahoma, Geneva, sans-serif; font-size: 14px; color: #CCC; float: left; padding: 8px; } #form_area { margin-top: 15px; list-style-type: none; color: #FFF; font-family: Tahoma, Geneva, sans-serif; font-size: 14px; line-height: 35px; } #contact_details { float: left; } #details { font-family: Verdana, Geneva, sans-serif; color: #FFF; list-style-type: none; font-size: 0.9em; line-height: 25px; margin-left: 50px; margin-top: -5px; text-shadow: 2px 3px 0px #000; display: block; background-color: #5b6363; border-radius: 8px; box-shadow: 1px 1px 16px #000; height: auto; padding-right: 20px; padding-bottom: 15px; padding-left: 20px; padding-top: 15px; font-weight: normal; } </style> </head> <body> <div id="wrapper"> <div id="header"> <img id="logo" src="logo2013.png" width="256" height="82"> <ul id="MenuBar"> <li><a href="index.html">portfolio</a></li> <li><a href="updates.html">updates</a></li> <li><a href="about.html">about</a></li> <li><a href="contact.html">contact</a></li> </ul> </div> <h1>CONTACT</h1> <div id="contact_msg"> <p class=con_text> If you would like to ask about my qualifications, or discuss about other business related matters, please send me a message via the form below and I will get back to you asap. <br> <br> Please keep the emails clean. Thank you.</p> <form action="contact.php" method="post"> <ul id="form_area"> <li>Name: (yours or company)</li> <li><input type="text" name="cf_name" id="field_id"></li> <li>E-mail:</li> <li><input type="text" name="cf_email" id="field_id"></li> <li>Message:</li> <li><textarea name="cf_message" id="text_area"></textarea></li> <li><input type="submit" value="Send"></li> </ul> </form> </div> <div id="contact_details"> <ul id="details"> <li><b>Other details:</b></li> <li><strong>Email:</strong> mli.myart[at]gmail.com</li> <li><strong>Phone:</strong> on request</li> <li><strong>Skype:</strong> on request</li> </ul> </div> </div> <div id="push"></div> <div id="footer"> - www.michael-li.ca - <br> All content and web design created by Michael unless detailed otherwise. <br> <br> Powered by Justhost.com </div> </body> </html>
-
I have a question about contact forms: I've written these lines of code into my page, yet I am unsure if it will work correctly. As I understand it, in this the contact.php page, if the $mail_to property is filled with the recipients email (my email in this case) and when the visitor clicks on the 'Send' button, the message is converted into an email and sent to the recipient (mli.myart@gmail.com). Is this correct? <?php $field_name = $_POST['cf_name']; $field_email = $_POST['cf_email']; $field_message = $_POST['cf_message']; $mail_to = 'mli.myart@gmail.com'; $subject = 'Message from a site visitor '.$field_name; $body_message = 'From: '.$field_name."\n"; $body_message .= 'E-mail: '.$field_email."\n"; $body_message .= 'Message: '.$field_message; $headers = "From: $cf_email\r\n"; $headers .= "Reply-To: $cf_email\r\n"; $mail_status = mail($mail_to, $subject, $body_message, $headers); if ($mail_status) { ?> <script language="javascript" type="text/javascript"> alert('Thank you for the message. We will contact you shortly.'); window.location = 'contact.html'; </script> <?php } else { ?> <script language="javascript" type="text/javascript"> alert('Message failed. Please, send an email to mli.myart@gmail.com'); window.location = 'contact.html'; </script> <?php } ?>
-
-
-
-
Hi, I spent some time looking over the links posted in this thread, as well as the advice all of you have given me. After analyzing the code, i'm happy to say that i'm finally reaching the results that i was looking for. Thank you all for your suggestions, they really helped. Here are the results so far, some feedback is always welcome too (changes, etc). I'm still learning and i'm always anxious to learn new ways of doing things or improving my own work. I still have a few more pages to look over, but i have more questions on how to include a contact form page for my site. Thanks again.
-
Hi, Sorry about the partial code. This time i'll paste the full html and css code i used for one of the pages. I thought about what you said about 'floating columns' though. i didn't write a #container div exactly, instead i replaced 'container' with 'content', although i am unsure if this will affect the source code any. Also (i think this affects it) what i did for certain pages was write in another floating container div, in this case called #pg_update with its own dimensions and within this div is all the content for this page. Also, to make sure that all content centred itself within the browser, i attached 2 CSS pages with these dimensions. Could either of these be affecting the footer Additional CSS: =============== @charset "utf-8"; body { text-align: center; position: relative; min-height: 100%; } #wrapper { text-align: left; width: 994px; margin-right: auto; margin-left: auto; position: relative; top: 0px; min-height: 100%; } ================ Source code HTML: ============== <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>.: ML - 3D Environment Artist :.</title> <link href="_css/new_style.css" rel="stylesheet" type="text/css"> <link href="centred_in_browser.css" rel="stylesheet" type="text/css"> <link href="wrapper_centred.css" rel="stylesheet" type="text/css"> </style> <style> #pg_update { top: 140px; position: absolute; min-height: 100%; width: 960px; text-align: center; } table { border: none; width: 900px; box-shadow: 1px 1px 30px #000; top: 85px; position: absolute; left: 5%; } th { background-color: white; color: white; width: 25%; text-align: right; vertical-align: text-top; padding-right: 10px; padding-bottom: 50px; padding-top: 10px; font-family: Calibri, "Segoe UI", Tahoma; font-size: 18px; font-weight: bold; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-top-color: #478985; border-right-color: #478985; border-bottom-color: #000; } td { color: #CCC; width: 75%; vertical-align: text-top; text-align: left; font-size: 0.8em; font-family: Tahoma, Geneva, sans-serif; line-height: 1.6em; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px; border-top-width: 1px; border-bottom-width: 1px; border-top-style: solid; border-bottom-style: solid; border-top-color: #478985; border-bottom-color: #000; } .section1 { background-color:rgba(0, 0, 0, 0.6); } .section2 { background-color:rgba(0, 0, 0, 0.9); } </style> </head> <body> <div id="wrapper"> <div id="header"> <ul id="MenuBar" class="MenuBarHorizontal"> <li><a href="index.html">portfolio</a></li> <li><a href="updates.html">updates</a></li> <li><a href="about.html">about</a></li> <li><a href="contact.html">contact</a></li> </ul> </div> <div id="logo"> <img src="logo2013.png" width="256" height="82"> </div> <div id="pg_update"> <h1>UPDATES</h1> <table cellpadding="0" cellspacing="0"> <tr> <th class="section1"> WIP - Dragon's Pagoda <br> <p>June 6, 2013</p> </th> <td class="section1"> <p>Another scene i'm currently working on. This scene was inspired by the movie Kung Fu Panda 2. I want to try to create a scene with a lot of contrast and playing around with hot and cool colors. </p> <p>!INSERT WIP SCREENSHOT HERE!</p></td> </tr> <tr> <th class="section2"> WIP - Jungle Scene <br> <p>June 3, 2013</p> </th> <td class="section2"> <p>This will be my first attempt at making an organic scene, complete with trees, vines, grass and wild flora. </p> <p>I'll also be attempting to include some weather dynamics, such as rain, moving clouds, flashes of thunder and flowing water.</p> <p>Here are some screens so far... </p> <p>!INSERT WIP SCREENSHOT HERE!</p></td> </tr> <tr> <th class="section1">New website design<br> <p>June 1, 2013</p> </th> <td class="section1"><p>My website underwent a complete overhaul. This time, I spent some more time comprehending how to properly use CSS to my advantage. </p> <p>I also practiced a lot of CSS coding via the W3schools.com website. I strongly recommend anyone who wants to pursue web design to go there and try customizing your own CSS templates through demo tryouts. </p></td> </tr> </table> </div> <div id="footer"> <p>- www.michael-li.ca - <br> All content and web design created by Michael unless detailed otherwise.</p> <p>Powered by Justhost.com</p> </div> </div> </body> </html> ================ CSS: ================ @charset "utf-8"; /* CSS Document */ body, html { margin:0; padding:0; height:100%; width: 100%; } body { background-color: #0e0e0e; background-image: url(../bg2013.jpg); background-repeat: no-repeat; background-attachment: fixed; background-position: center top; height:100%; } a, img { border:none; } p { font-family: Tahoma, Geneva, sans-serif; font-size: 12px; color: #CCC; line-height: 1.8em; } h1 { color: #fff; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 16px; text-shadow: 2px 3px 0px #000; display: block; background-color: #5b6363; width: 190px; border-radius: 8px; text-align: center; letter-spacing: 1px; box-shadow: 1px 1px 16px #000; margin-left: 4%; height: auto; padding-right: 12px; padding-bottom: 8px; padding-left: 12px; padding-top: 8px; font-weight: bold; } h2 { font-size: 1.1em; color: #FFF; margin-top: 6px; font-family: Calibri, "Segoe UI", Tahoma; text-shadow: 2px 2px 2px #000; } h3 { font-family: Calibri, "Segoe UI", Tahoma; font-size: 18px; color: #FFF; font-weight: bold; width: 268px; margin-top: 12px; text-align: left; margin-left: 25px; padding-bottom: -5px; } h4 { font-family: Calibri, "Segoe UI", Tahoma; font-size: 24px; color: #FFF; font-weight: bold; text-shadow: 2px 2px 2px #000; } h5 { font-family: Calibri, "Segoe UI", Tahoma; font-size: 1.3em; font-weight: bold; color: #FFF; text-align: justify; width: inherit; padding-right: 10px; padding-bottom: 10px; padding-left: 30px; } .sub_link { font-family: Tahoma, Geneva, sans-serif; font-size: 12px; color: #CCC; text-decoration: none; float: right; margin-top: 5px; margin-right: 30px; } .sub_link:hover { font-family: Tahoma, Geneva, sans-serif; font-size: 12px; color: #FC6; text-decoration: none; float: right; margin-top: 5px; margin-right: 30px; } .video { height: 315px; width: 560px; margin-top: 4%; margin-left: 21%; border: 1px solid #666; box-shadow: 1px 1px 30px 5px #000; margin-right: 21%; } .topics { border: 1px solid #666; height: 173px; width: 268px; margin-left: 0.5%; opacity: 0.7; -moz-box-shadow: inset 0px 0px 0px 10px #000000; -webkit-box-shadow: inset 0px 0px 0px 10px #000000; box-shadow: inset 0px 0px 0px 10px #000000; -webkit-transition: opacity; -webkit-transition-timing-function: ease-out; -webkit-transition-duration: 500ms; -moz-transition: opacity; -moz-transition-timing-function: ease-out; -moz-transition-duration: 500ms; -ie-transition: opacity; -ie-transition-timing-function: ease-out; -ie-transition-duration: 500ms; -o-transition: opacity; -o-transition-timing-function: ease-out; -o-transition-duration: 500ms; background-color: rgb(68,68,68); /* Needed for IEs */ vertical-align: top; } .topics:hover { opacity: 1.0; -webkit-transition: opacity; -webkit-transition-timing-function: ease-out; -webkit-transition-duration: 500ms; -moz-transition: opacity; -moz-transition-timing-function: ease-out; -moz-transition-duration: 500ms; -ie-transition: opacity; -ie-transition-timing-function: ease-out; -ie-transition-duration: 500ms; -o-transition: opacity; -o-transition-timing-function: ease-out; -o-transition-duration: 500ms; } .preview { border: thin solid #666; box-shadow: 1px 1px 25px #000; margin: 20px; } #header { position:absolute; top:-16px; width:994px; height:117px; z-index:1; background-image: url(../menu_bg.png); background-repeat: no-repeat; left: 0; } #logo { position:absolute; left:45px; top:8px; width:256px; height:82px; z-index:250; } #demo{ position:absolute; left:0px; top:110px; width:994px; height: 410px; z-index:1; background-attachment: inherit; background-image: url(../demo_bg.png); background-repeat: no-repeat; text-align: center; background-position: center; } #content { left: 0px; top: 415px; width: 994px; height: auto; z-index: 1; min-height:100%; position:absolute; text-align: center; padding-bottom: 75px; } #gallery { height: inherit; width: 100%; margin-top: 1%; } #subject1 { position:absolute; left:20px; top: 75px; width:306px; height:261px; z-index:1; background-image: url(../thumb_bg.png); background-attachment: inherit; background-repeat: no-repeat; } #subject2 { position:absolute; left:350px; top:75px; width:306px; height:261px; z-index:1; background-image: url(../thumb_bg.png); background-repeat: no-repeat; } #MenuBar { float: right; display: inline; width: 375px; height: 20px; margin-top: 80px; } #MenuBar li { display: inline; border-left-width: thin; border-left-color: #CCC; border-left-style: solid; padding-left: 12px; padding-right: 12px; color: #FFF; } #MenuBar a{ font-family: Tahoma, Geneva, sans-serif; color: #999; text-decoration: none; font-weight: bold; font-size: 14px; display: inline; } #MenuBar a:hover { color: #FFF; } #footer { width:100%; height:99px; z-index:1; background-image: url(../footer_bg.png); background-attachment: inherit; background-repeat: no-repeat; color: #FFF; font-family: Tahoma, Geneva, sans-serif; font-size: 12px; text-align: center; background-position: center; left: 0px; position: absolute; bottom: 0px; } Thank you for your help.
-
Hi, Here's the HTML code for the footer section: <div id="footer"> <p>- www.michael-li.ca - <br> All content and web design created by Michael unless detailed otherwise.</p> <p>Powered by Justhost.com</p> </div> and here is the CSS code: body, html { margin:0; padding:0; height:100%; width: 100%; } body { background-color: #0e0e0e; background-image: url(../bg2013.jpg); background-repeat: no-repeat; background-attachment: fixed; background-position: center top; height:100%; } #footer { width:100%; height:99px; z-index:1; background-image: url(../footer_bg.png); background-attachment: inherit; background-repeat: no-repeat; color: #FFF; font-family: Tahoma, Geneva, sans-serif; font-size: 12px; text-align: center; background-position: center; left: 0px; position: absolute; bottom: 0px; }
-
-
Hi, I currently have a problem with my design. I'm trying to align my footer to the bottom of my pages. On the index page it works well, however on all other pages the footer aligns to about 3/4 down of the page and overlaps with the other content. Does anyone have any suggestions on how to fix this problem? I've also attached a screen shot. Thanks.
-
Now the site is just loading slowly again. It's back to square one.
-
I replaced the embed videos with the iframe code. it does load up a bit faster, but the thumbnails are still causing an issue. What i did for the thumbnails is this: <a href="/images/props/box1.jpg" rel="lightbox"><img class="thumb" src="/images/thumbs/thumb_box1.gif" width="75" height="75" alt="" /></a> I'm wondering if the 'img class' is causing the problem
-
Allright, i'll certainly give that a try. Thank you for the advice, i'll let you know if it changes anything.
