Apokalupsis

Try this variation of the code above: http://jsfiddle.net/Apokalupsis/PRwhk/ (I left "div {border: 1px solid black;};" in the css just so you could see how the divs/boxes are being positioned. Obviously, remove that top line of code to get rid of the div borders.

Man, I always forget to do that. I really need to brush up on floats. Anyway, I also forgot to include the jsfiddle link (and I can no longer edit my first post). Here it is for convenience: http://jsfiddle.net/Apokalupsis/YJURX/5/ As to thw "wrapper issue".... 1) I think it's fine to use the html5 elements as long as it is understood that not all browsers still support it. So you have to ask who will be using this site? And when you do use html5 elements that are not widely supported cross-browser, then using the -moz- or -webkit- prefix where applicable is important IMO. That, or maybe using something like modernize. 2) I don't use the "body" tag as a wrapper, I like to keep it separate from containers or wrappers, using naming it something more applicable. I suppose this is an issue of preference (as well as habit maybe?)...but I'm just more comfortable that way, allows for a bit more freedom perhaps.

I tried you way there 4li4s...but for some reason it didn't work. I only tried it in jsfiddle so maybe there was an issue w/ that site and the code...don't know. Anyway, here's what I worked out in jsfiddle...seems to work: <div id="header"> <div class="left"> <a href="#"><img src="http://webitect.net/wp-content/uploads/2010/08/breathtaking_graphic_design_examples.jpg"></a> </div> <div class="right"> <ul> <li><a href="#">Home</a> </li> <li><a href="#">Blog</a> </li> <li><a href="#">Articles</a> </li> </ul> </div> </div> </div>and:#header { height: 200px; width: 600px; border: 2px solid #40312E; } .left { height: 200px; width: 200px; float: left; } .right { height: 200px; width: 395px; /* change to 450px when remove borders */ float: right; } .right ul { float: right; padding: 65px 30px; } .right li { display: inline; list-style-type: none; margin-top: 0; } .right a { display: inline; text-decoration: none; margin-right: 25px; color: #F2F2F2; background-color: #61788C; padding: 5px 10px 5px 10px; border:1px solid; border-radius:25px; font-size: 1.5em; } .right a:hover { display: inline; text-decoration: none; margin-right: 25px; color: #D9B29C; background-color: #40312E; padding: 5px 10px 5px 10px; border:1px solid; border-radius:25px; } Obviously, you don't need all that extra styling, I was just doing a little experimenting. But the positioning should work. At least, it works in Chrome (didn't test in all browsers admittedly).

@Robert, Well, I wish I could take all the credit, but I can't. I found a lot of graphics either in public domain (or stock) and just edited it to suit my needs. Why reinvent the wheel? Many of the graphics in the gallery are pieced together using a more generic logo creator app, others were created in PS (the banner for DoubleTree Hotels and a project I did for a university PS course - the Earth Day image, which was done following a tutorial from nut-plus irc, and other junk not posted on the site yet). I am by no means an expert. I still consider myself a nub, and have much to learn. I just find ways of getting things done and piecing them together when need be.

Cool, thanks Nillervision. Question though...isn't using iframes today outdated? I always thought it was not a "best practice." Is it commonly used today?

WEB design? On and off for a few years. I've been doing graphic design for longer. I'm tired of it though and so I wanted to make the change to web design. I'm still learning. I consider myself beginner-intermediate, but that is largely subjective as I compare myself to most of the blogs/sites I read. I don't know much JQuery or JS actually, I'm currently taking a couple courses on them. I try to be like a sponge, just absorbing everything I can. =) My site is: www.harmonywebworks.com (it is still a work in progress). You?

Maybe this will help: http://www.codecademy.com/tracks/jquery

The problem isn't in the index.html file, it is in the style.css file. http://www.englishclick.net/style.css Then "find" (ctrl-F on windows) ".art-article th, .art-article td" You need to remove that "border" attribute that is defined in that class.

This code.... .art-article th, .art-article td {padding: 2px;border: solid 1px #787878;vertical-align: top;text-align: left;} should be: .art-article th, .art-article td {padding: 2px;vertical-align: top;text-align: left;}

Cool. When you get it worked out, link it. I'd like to see it in action.

I'm not a Jquery expert...but I would imagine that is what you are looking for. Check this Top 10 list out: http://jquerybyexample.blogspot.com/2013/01/jquery-popup-window-tutorial-plugins.html Particularly #6....I think that may be closest to what you are describing...but there are some great options and customization abilities in all of them.

I think it's a Safari issue. I tested it out in Spoon (www.spoon.net)...seemed to work fine in other browsers...but for some reason, Safari didn't like your navigation. I'm not a Safari person, and looking at the source page...I couldn't easily identify the problem.

Cool, I'd like to know how you did it.

I can't send private messages yet as I don't have 25 posts. WF...I like the graphic wireframe images you provided. What program did you use to do that?

You should learn a little about using "divs" IMO. They are going to allow you to style and format your page the way you want. Trying to do everything in the "body" isn't going to work out well. There's plenty of info on using divs and all their attributes on the net. An obvious source would be: http://www.w3schools.com/tags/tag_div.asp Also look up "class" and "id". Lastly, if you are going to use 1 page and have your style be in your html page, then it should be in your header, not body. You can also link your .css in your html. This is stuff you'd find on the w3schools site. As far as adding "funky" text, the text needs to be "web safe." http://www.w3schools.com/cssref/css_websafe_fonts.asp. You can of course, use a custom font (@font-face) and host it on your server so that others will see it, or use Google fonts, but that's another issue IMO). There's a lot covered in this thread already. Take a look at this as a quick example: http://jsfiddle.net/Apokalupsis/LejnB/ (includes code + what it looks like in browser). Another good source for this type of stuff is www.udemy.com (my go to place for "how to's"). There are some freebies, but a lot are university level course type classes offered by actual trainers and professors. I'm sure you can find the same stuff online for free, but I prefer having it all in one place, plus I know several of the instructors, so I'm a little biased. =P

I did what Lyndsey did (to solve it).but w/o the clear. However, a nifty little trick to see what is going on, is just to apply borders to the div's themselves. Sometimes it reveals the behavior, giving a clue as to how to resolve it. Your code with borders: http://jsfiddle.net/Apokalupsis/JdRE5/ Removed the "float:left" with borders: http://jsfiddle.net/Apokalupsis/JdRE5/1/

I tested what you have there at Fiddle: http://jsfiddle.net/Apokalupsis/Rh5DK/ It's not overlapping for me. Probably need to see the web page itself, or maybe a screenshot to see what's happening.

It's a little tricky, at least, trickier than one may think (ok...at least trickier than I thought at first). You have to: 1) reset margins/padding for all elements 2) set body/html to "height 100%" and give it "overflow: hidden" 3) Then, as long as any sub divs (or divs contained in another div) always add up to 100%, you'll be fine. Nothing overly difficult IMO, just have to use a few tricks or a bit of extra code to get the right result. Check out my solution here: http://jsfiddle.net/Apokalupsis/k8nUB/1/ There are probably other ways to do it (there usually are, and there's always someone else out there who is more clever ). Also, I made it so it is semi-responsive (this is a quick wire-frame after all)and with a background image (since this was for someone else as well).

I appreciate your response. I think I got it fixed w/ just a basic "empty field" validation (via php). That's good enough for now until I brush up on more advanced security validation practices.

I'm wondering if I fixed it (the right way). It appears that I was not requiring the fields to be required via html or php, and instead, was using JS to verify if there was actual input in the fields. Obviously, if JS is turned off, there'd be issues. Testing it with JS off, I could submit the form w/o any text input...and I received the "blank field" email. So my fix: Use the "require" attribute in the html. required="required" That seems to have been a solution, but I'm not sure if it is the best one. Thoughts? *edit* Apparently, the "required' attribute isn't understood in IE (but is in FF and Chrome), so this doesn't appear to be the best fix.

Just an odd thing here. I don't know if my contact page form is having an issue or not. When I test it (in all major browsers), it woks fine. When I comb over the code, it looks fine. Yet, I sometes get emailed from this form, where the text fields are blank. This is a problem of course, because I don't know if it is a legitimate client (or prospective client) trying to reach me...or if it is a weird server issue or maybe even bad code somewhere. I thought it may be spambots, but if that were the case, then I should at least get some text in the email responses. I've been trying to figure this out for hours (spanning several days). Sometimes it's best to have fresh eyes. I'm tempted to just use a brand new script (sometimes that is best), but I'd prefer to find out what I did wrong here (if anything) and how to fix it so it doesn't happen again.. Here's my contact page: www.harmonywebworks.com/contact.html I'm not sure what the "best practice" is here for submitting code to be reviewed so please let me know if I need to do something more, or if I did something wrong. Below is the html, php, and 2 links to the relevant style sheets. Here's the html: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Harmony Webworks - Contact Us</title> <link rel="shortcut icon" type="image/x-icon" href="images/color/blue/favicon.ico" /> <!-- Stylesheets --> <link href="css/colors/blue.css" rel="stylesheet" type="text/css" /> <link href="style.css" rel="stylesheet" type="text/css" /> <link href="css/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css" /> <link href="css/slider1.css" rel="stylesheet" type="text/css" /> <link href="css/nivo-slider.css" rel="stylesheet" type="text/css" /> <link href="css/tipsy.css" rel="stylesheet" type="text/css" media="screen" /> <link href="http://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" type="text/css" /> <link href="http://fonts.googleapis.com/css?family=Droid+Sans" rel="stylesheet" type="text/css" /> <!--[if IE]> <link href="css/ie.css" rel="stylesheet" type="text/css" /> <![endif]--> <!-- JQuery --> <script type="text/javascript" src="js/jquery-1.4.4.js"></script> <script type="text/javascript" src="js/jquery.fancybox-1.3.4.js"></script> <script type="text/javascript" src="http://twitterjs.googlecode.com/files/twitter-1.13.1.min.js" ></script> <script type="text/javascript" src="js/jmenu.js"></script> <script type="text/javascript" src="js/jquery.validate.js"></script> </head> <body> <div id="parent"> <div id="top"> <div class="inner"> <div id="logo"> <a href="index.html"><img src="images/logo.png" alt="Harmony Webworks" /></a> </div> <div id="menu"> <ul> <li> <a href="index.html">Home</a> </li> <li><a href="gallery.html">Gallery</a></li> <li class="current_page_item"><a href="contact.html">Contact</a></li> </ul> </div> </div><!-- End "top-inner" --> </div><!-- End "top" --> <div id="header"> <div class="inner"> <h1 class="page-title">Contact Page</h1> <h3 class="page-sub">Grab Our Attention</h3> </div><!-- End "header-inner" --> </div><!-- End "header" --> <div id="content"> <div class="inner"> <div id="main-col"> <h3>Contact Form</h3> <p>Use the form below for questions or project ordering (interactive order form coming soon).</p> <!--||||||| BEGIN CONTACT FORM |||||||--> <form id="contact-form" method="post" action="contact.php"> <div class="textbox-block"> <div> <label class="name">Full Name <span>*</span></label> <input type="text" name="Name" class="Name required" /> </div> <div> <label class="email">Email Address <span>*</span></label> <input type="text" name="Email" class="Email required" /> </div> <div class="last"> <label class="subject">Subject Matter</label> <input type="text" name="Subject" class="Subject" /> </div> </div> <div class="textarea-block"> <label class="message">Message <span>*</span></label> <textarea name="Message" class="Message required" cols="45" rows="15"></textarea> </div> <p><span class="red">*</span> Indicates required field</p> <p><button type="submit" class="button small color submit"><span>Send Message</span></button></p> </form> <!--||||||| END CONTACT FORM |||||||--> </div> <div id="sidebar"> <div class="widget widget-map"> <h3 class="widget-title">Current Promotions</h3> <p><strong>66% discount on all websites!</strong></p> <p>Contact me for details!</p> <!-- <a href="#"><img src="images/promo.gif" alt="Promotion" /></a> --> </div> <div class="widget widget-text"> <h3 class="widget-title">To order a project . . .</h3> <p>For all inquiries and orders for websites, logos, or printwork, please use this contact form and I will respond within 12-24 hours.</p> <p>Please leave a phone number if you would like me to call instead of contacting you by email.</p> </div> </div> </div><!-- End "inner" --> </div><!-- End "content" --> </div><!-- End "parent" --> <div id="footer"> <div id="footer-wrap"> <div class="inner"> <div id="footer-widgets"> <div class="widget"> <h3>About Harmony Webworks</h3> <p>Harmony Webworks is owned and operated by designer Jeremy Lewis who has over 11 years experience in graphic design and web development. Harmony Webworks, while a newer company, has traditional values of dedicated service, quality work, and true customer satisfaction.</p> <!-- <a href="#">Read More →</a> --> </div> <div class="widget"> <h3>Latest Tweets</h3> <div id="twitter"> <div id="myTweets" class="twitters"></div> </div><!-- End "twitter" --> </div> <div class="widget"> <h3>From The Blog</h3> <div class="recent-post"> <h4><a href="#">Coming Soon!</a></h4> <div class="meta-data"> </div> <p> </p> </div> </div> <div class="widget"> <div class="flickr-widget"> <h3>Flickr Photostream</h3> <script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=8&display=latest&size=s&layout=x&source=user&user=59018165@N07"></script> <div class="recent-post"> <h4><a href="#">Coming Soon!</a></h4> </div> <p>A cool new feature that will showcase client projects in real time!</p> </div> </div> </div><!-- End "footer-widgets" --> </div> <div id="copyright"> <div class="inner"> <div class="left"><p>© All Rights Reserved. Site developed by <a href="http://harmonywebworks.com">Harmony Webworks</a></p></div> <div class="right"><p>Find us on <a href="http://twitter.com/#!/HarmonyWebworks">Twitter</a>, <a href="http://dribbble.com/#">Dribbble</a> & <a href="http://www.facebook.com/pages/#">Facebook</a></p></div> </div> </div><!-- End "copyright" --> </div><!-- End "footer-wrap" --> </div><!-- End "footer" --> <script type="text/javascript"> $(window).load(function() { $("#contact-form").validate(); }); </script> <script type="text/javascript" src="js/video-fancybox.js"></script> <script type="text/javascript" src="js/custom.js"></script> </body> </html> Here's the php: <?php $EmailTo = "sales@harmonywebworks.com"; $Subject = "HW Contact Page"; $EmailFrom = Trim(stripslashes($_POST['Name'])); //boxes $Name = Trim(stripslashes($_POST['Name'])); $Email = Trim(stripslashes($_POST['Email'])); $Subject = Trim(stripslashes($_POST['Subject'])); $Message = Trim(stripslashes($_POST['Message'])); // validation $validationOK=true; if (!$validationOK) { print "<meta http-equiv=\"refresh\" content=\"0;URL=error.htm\">"; exit; } // prepare email body text $Body = ""; $Body .= "Name: "; $Body .= $Name; $Body .= "\n"; $Body .= "Email: "; $Body .= $Email; $Body .= "\n"; $Body .= "Subject: "; $Body .= $Subject; $Body .= "\n"; $Body .= "Message: "; $Body .= $Message; $Body .= "\n"; // send email $success = mail($EmailTo, $Subject, $Body, "From: $EmailFrom"); // redirect to success page if ($success){ print "<meta http-equiv=\"refresh\" content=\"0;URL=thanks.html\">"; } else{ print "<meta http-equiv=\"refresh\" content=\"0;URL=error.htm\">"; } ?> Stylesheets: http://www.harmonywebworks.com/style.css http://www.harmonywebworks.com/css/colors/blue.css I appreciate any help you can offer.