Just started learning css last week, and I hate what my site looks like in 1024x768 resolution. I want it to look very similar to 1280x1024 if at all possible. what could I implement to make the site to widen up instead of making the paragraphs look horrible with the adsense code? I need suggestions. Its real bad on top paid surveys and monthly earnings. I just don't want it to be that hard for people to read the paragraphs. Any helps is much appreciated. ======================================= Also I was wondering what else I could put in the design to make it more richer and interesting looking, but not give it the christmas tree apperence. I want it to look professional. the site is surveygeyser (just add the com to the end) sorry I can't put links in yet because I just registered. Chad
Really you should be coding to make your site look good in 800x600, then it will look good in all resolutions above. 800x600 is the standard you should code for. The majority of people still use 800x600 or 1024x768 screens (even if they use a bigger screen, what if someone doesn't want to view your site in full screen?). Your using a % of the page to determine the width of your content. I'd use a fixed width.
Bah, desiging for any single width in my book is a total /FAIL/. In this case, you want the page to look better, add some more content... that's the best solution. Though if you aren't willing to go that far instead use min-width/max-width (and the IE calculated equivalents). I'd probably set a min-width of 768, a max-width of 1100 or so. That would stop ultra-wide screens from making the content too wide to follow. You could probably even up that further to 1200px or so as max-width by bumping the font-size and switching to a sans-serif font. Oh, and you may want to try using proper indenting of your code, using a valid doctype so you don't have to hack around IE being in quirks mode, using header tags in a logical order (first one on the page being a H4 is a BAD thing), NOT putting content after you close </html>, not open HTML twice, include :focus and :active states so keyboard and alternative navigation methods aren't left out, using lists for your lists, using paragaphs as blocks instead of breaks, not putting header content on the page until AFTER you open HEAD, finish all your css properties so that the entire class declaration doesn't end up tossed... We really need to teach people more on how this stuff works... Seriously this: <p><h2><font color= teal> Uhg. I could go on for quite a while about this one.
Wow, you gave a lot of great advice deathshadow...seriously go on about my bad use of the color code...the harsher the better. I'll try my best to implement some of your suggestions tomarrow.
Try this on for size: <!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" lang="en"><head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Survey Geyser - Online Paid Survey Reviews, Including Get Paid To Sites and other Online Revenue Opportunities</title> <meta name="author" content="Chad Halterman" /> <meta name="revised" content="Chad Halterman,8/10/2007" /> <meta name="generator" content="Notepad ++" /> <meta name="description" content="Free Guide to the Best Paying Online Surveys, Get paid for your opinion! Get Paid To sites and other means of online revenue" /> <meta name="keywords" content="Online Surveys, Paid Surveys,Get Paid To,Online Revenue,Top Paying Surveys," /> <meta name="resource-type" content="document" /> <meta name="distribution" content="one of several" /> <style type="text/css"><!-- * { margin:0; padding:0; } #container { min-width:710px; max-width:900px; margin:0 auto; padding:0 16px; font:normal 100%/140% "times new roman",times,serif; } /* the following gives us min/max width in lte IE6 */ * html body #container {width:expression( (document.documentElement.offsetWidth) >930 * (parseInt(document.body.currentStyle.fontSize) / parseInt(document.body.currentStyle.fontSize)) ? "900px" : ((document.documentElement.offsetWidth) < 740 ? "710px" : "95%")); } h1 { width:292px; height:159px; padding-top:20px; position:relative; font:bold 56px/60px tahoma,helvetica,sans-serif; text-align:center; } h1 span { width:292px; height:179px; position:absolute; top:0; left:0; background:url(http://www.surveygeyser.com/GEYSERLOGO1.jpg) 0 0 no-repeat; } p { padding-bottom:1em; } #navigation { width:152px; float:left; list-style:none; margin-top:2em; padding-top:2em; font:bold 16px/24px "times new roman",times,serif; } #navigation ul { font:bold 13px/20px arial,helvetica,sans-serif; margin:1.5em 0; } #navigation li { display:inline; } #navigation a { display:block; color:#000; background:#EEE; border-bottom:1px solid #9CF; text-decoration:none; padding:0 4px; } #navigation a:active, #navigation a:focus, #navigation a:hover { color:#FFF; background:#399; } #content { margin-left:168px; margin-top:2em; padding-top:2em; padding-left:16px; border-left:1px solid #CCC; } #content h2 { color:#088; padding-bottom:1em; } #content .googlead { float:right; margin:0 0 1em 1em; } #footer { clear:both; padding:0.5em; color:#FFF; background-color:#088; } --></style> </head><body> <div id="container"> <h1>Survey Geyser<span></span></h1> <ul id="navigation"> <li> Directory <ul> <li> <a href="http://www.surveygeyser.com">Home</a> </li><li> <a href="http://www.surveygeyser.com/topsites.html">Top Paid Surveys</a> </li><li> <a href="http://www.surveygeyser.com/earnings.html">Monthly Earnings</a> </li> </ul> </li><li> Other Resources <ul> <li> <a href="http://www.treasuretrooper.com/222215">Treasure Trooper</a> </li><li> <a href="http://www.get-paid-hwy.com/">GPT Forums</a> </li><li> <a href="http://www.surveypolice.com">Survey Police</a> </li><li> <a href="http://www.yellowsurveys.com">Yellow Surveys</a> </li> </ul> </li> </ul> <div id="content"> <h2>Your Free Guide to Online Surveys</h2> <p> It's 2007 and I'm sure most of you have already recieved word about online surveys at one point or another. Whether they came from a late night search on Google, an email, or perhaps a buddy brought it up over lunch. </p> <div class="googlead"> <script type="text/javascript"><!-- google_ad_client = "pub-6235123796313501"; google_ad_width = 336; google_ad_height = 280; google_ad_format = "336x280_as"; google_ad_type = "text"; //2007-08-11: MainLgRect google_ad_channel = "4989881443"; google_color_border = "FFFFFF"; google_color_bg = "FFFFFF"; google_color_link = "0000FF"; google_color_text = "000000"; google_color_url = "008000"; --></script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </div> <p> Truely, the information is out there if your willing to spend the time an search for it; but honestly it can take hours, days or even months, and before you know it you've driven yourself into a downward spiral of confusion. </p><p> With Survey Geyser, I hope to put an end to all the madness and present to you my findings. In doing so we'll skip through all the short lived promises and scams you'd probably come across had you taken the journey yourself. Survey Geyser concentrates solely on the sites that actually pay you for your time spent not the other bogus ones out there. </p><p> Survey Geyser's goal is not only to reward you with the most enjoyable online survey taking experience possible, but save you money, time, and most importantly, your sanity. </p> </div> <div id="footer">Designed by Chad Halterman - Aug 2007.</div> </div> <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"> </script> <script type="text/javascript"> _uacct = "UA-1186754-4"; urchinTracker(); </script> </body></html> Code (markup): That's probably how I'd approach it without adding more content - had to delete a lot of HTML, though it gained a bit of weight in the CSS thanks to the scripting to make lte IE6 do min-width and max-width.
Web design, about a decade... programming computers - about three decades. Coding websites this clean with proper separation of content from presentation - about two years now... though even when I was still doing stuff non-css 'the hard way' my code was usually this well formatted. All goes back to my taking a Modula programming class in the late 70s' at a catholic school (note, I'm not even christian)... Be typing along... **** THWAP WITH WOODEN RULER **** INDENT!!! type some more **** THWAP WITH WOODEN RULER **** INDENT!!! finish off that block **** THWAP WITH WOODEN RULER **** DE-INDENT!!! Funny thing is, I think more coders need to be exposed to that teaching method.
Be careful what you ask for. You just might get it. (This comment is from one of his peers - and one of the few people he knows PERIOD who's as good as he is when it comes to HTML/CSS markup.)
You guys have really inspired me to continue to keep all my HTML/CSS this clean from now on. I'm going to use the source code you revised for me, deathshadow, but do you yourself or Dan know of any good "tidy" html tutorials out there? Not sites that teach HTML but rather staple methods for keeping source code reader friendly?
Easy. Header <div id="header"> <img src="#" width="200" height="80" alt="Web Site Title" title=""> </div> Code (markup): Menu <ul id="menu"> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> </ul> Code (markup): Content <div id="content"> <div class="section"> <h1>Page Title</h1> <p>Some content</p> <p>Some content</p> <p>Some content</p> </div> <div class="section"> <h2>Section Heading</h2> <p>Some Content</p> <p>Some Content</p> <p>Some Content</p> <p>Some Content</p> </div> <div class="section"> <h2>Section Heading</h2> <p>Some Content</p> <p>Some Content</p> <p>Some Content</p> <p>Some Content</p> </div> </div> Code (markup): Sidebar(s) <div id="sidebar"> whatever your sidebar content is </div> <div id="ads"> ads can go here </div> Code (markup): Footer <div id="footer"> Copyright © 2007 The Monster Under the Bed. All Rights to Scare Unsuspecting Children Reserved. </div> Code (markup): The rest is just styling with CSS to get the look you want.