Hey all, I'm back... not that I've posted much on here but I've been given some advice and I'm doing well making my first table-less website. I'm having problems in firefox though, it's pretty obvious what the problem is. I have 2 divs in a container. one div is the main content that is floating left and the other is the small contact box that is floting right. The box on the right seems to be breaking out of my container div. that's my CSS and here is my page I'm also trying to figure out why it's coming with 7 errors when I validate it
you right panel is floated right inside a panel that's not floated, thus float contentbak left and the background should fix itself ps: to center use auto margins.. margin:0 auto;
thanks for all your help! http://bluepixelonline.com/new/template.php it's still kind of messed up. if you can help more I can use it but i understand if you don't want to hold my hand on this.
I've got old FF... I don't see anything too weird looking. What do you want it to look like? Seems the same in my fake IE6 for Linux? Also, you can really compress your CSS by combining properties with shortcuts. Instead of margin-top: 0; margin-right: 0; etc, you can simply do margin: 0; and that's everything... margin: 10px auto; sets 10px for top and bottom, and auto (or whatever number you want) for the sides... or if they're all different: margin: 10px, 2px, 40px, 5px; The numbers always follow the order Top Right Bottom Left. You can do this with borders, backgrounds, fonts, an many others. Also, sometimes you're declaring something, and it's already default (like background-attatchment: scoll). Let the defaults do the work for you. Scroll is default so you don't have to mention it.. "fixed" is the attatchment some people change (doesn't scroll with the rest of the page). Watch out, IE pukes before IE7. Font-varient and weight are usually normal as defualt too, except with H#. You can do this: background: #405d6b url(../images/Content_BAK_TOP.jpg) left top repeat-x; font: normal 14px/16px "Trebuchet MS" Verdana sans-serif; (always set a few fallback fonts after the one you want, and finally serif, sans-serif or monospace at the end for people with like no fonts (like me). border: 1px solid #f00; or border-top: 1px solid #f00; border-bottom: 1px solid #f00; or border-width: 1px 0; (top and bottom are one pixel... sides are none). There's a great book with an appendix C in the back that I always use as a reference... tells you when you can use shortcuts, what goes with what properties etc. HTML Utopia: Designing Without Tables Using HTML and CSS by Rachel Andrew and Dan Shafer. And welcome back, pixel. I ended up setting your old thread as a bookmark. : )
http://www.bluepixelonline.com/new/ this is what it sould look like... (that is a version with tables)
Well let's see... axe the multiple H1's (if you have multiples, they should PROBABLY be H2's), axe the STUPID MALFING mm_onload image precache rubbish (shouldn't even be using .js for that anyways - that's what CSS is FOR), get rid of the line breaks that's what margins and padding are for, and I'd be worrying about fixing the page template before fixing the content... and I know it's in php, that's still no excuse not to format it properly to ease maintennance headaches - as evident by the code failing validation. If I have time later I'll see what I come up with. For now, this is probably ALL the HTML that you should need for that layout: <!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" /> <link type="text/css" rel="stylesheet" href="screen.css" media="screen,projection" /> <title>Template</title> </head><body> <div id="container"> <h1>Blue<b>Pixel</b><span></span></h1> <ul id="mainMenu"> <li><a href="#">About BluePixel<span></span></a></li> <li><a href="#">Design Services<span></span></a></li> <li><a href="#">Marketing Services<span></span></a></li> <li><a href="#">Portfolio<span></span></a></li> </ul> <div id="content"> <h2>What is <b>Blue<span>Pixel</span></b>?</h2> <p> BLUEPIXEL is a design firm based out of Chicago that specializes in Multi-Media, Web and Graphic design. Our team is comprised of award winning graphic designers, animators and web programmers. Together, we have worked and consulted for the top design / development firms in Chicago, and have provided experiences that surpass all of our competitors. We make available to you award winning designs and applications that leave an everlasting impression on anyone who looks, learns and interacts with them. </p> <h2>WHAT DO I DO?</h2> <p> BLUEPIXEL specializes in creativity. If you want to stand out amongst the sea of competition, the best way to do it is with stunning presentations that leave a lasting impression while allowing the user to have fun and interact with you. Anyone can make a website, but if you have a website that looks like it was homemade, users will skip right passed your site and move on. You deserve the best and that's all you can expect from us, THE BEST. </p> <h2>WHY CHOOSE ME?</h2> <p> We will provide you with the quality work that you would expect from a top design firm without having to deal with pushy salesmen, lazy designers and unmet deadlines. We offer dedicated service and a pleasant experience. Our creative minds come together to assist you in a way that no other company can. We provide the HIGHEST QUALITY designs and the MOST ADVANCED functionality you can get from one company. You are the art director. You decide what is good and what isn't. If you are not experienced in art direction, we can be the art director for you! Nothing is done until YOU say it is! <p> <!-- #content --></div> <div id="sideBar"> <div class="boxTop"><div></div></div> <div class="boxContent quickLinks"> <h2>Quick Links<span></span></h2> <ul> <li><a href="#">Request a Quote</a></li> <li><a href="#">Pricing and Specials</a></li> <li><a href="#">Send a Message</a></li> <li><a href="#">SEO Consulting</a></li> <li><a href="#">The <b>BLUE<span>PIXEL</span></b></a></li> <li><a href="#">My Print Portfolio</a></li> </ul> </div> <div class="boxContent latestProject"> <h2>Latest Project<span></span></h2> <p>Coming Soon</p> </div> <div class="boxBottom"><div></div></div> <!-- #sideBar --></div> <!-- #container --></div> <div id="footer">Test footer</div> </body></html> Code (markup): MAYBE an extra span or DIV in there somewhere, but for the most part that should be ALL you need... in other words less than HALF what you are using now.
and here it is: http://battletech.hopto.org/for_others/pixelcommander/bluepixel/template.html as always, the directory: http://battletech.hopto.org/for_others/pixelcommander/bluepixel is unlocked so you can grab the nasty bits - I remastered and recombined the images so the total is now 45k in 8 files intead of 64k in 18 files, meaning about 3-4 seconds load time saved for broadband users, and anywhere from 8-20 seconds chopped off dialup users download times. Validates XHTML 1.0 Strict, CSS would validate if not for the two FIREFOX hacks (which compensates for Firefux being a bit #DDD when it comes to the stupid background jog), it even passes WAI (except for the lack of metadata) and 508. I actually used a few less tags than the above html - I decided not to make #sideBar fluid width.
niiice thanks again I'm going to compare it to mine and study on why the changes were made. I think it will be easier for me, in my situation, to learn what I need to do different rather then learning CSS from front to back. I can pick up the slack when problems arise, I just need to get the basics down.
http://battletech.hopto.org/for_others/pixelcommander/bluepixel/ goes to the right one. You may have trouble grasping the CSS that was used, as its probably much more complex then what you are used to dealing with it. BP
the only thing with the 1px images is that I have some noise in there so it needs to be about 20 wide, at least, but i can fix that
That noise was below the luminance threshold, which is why I got rid of it. Wasted bandwidth that nobody can actually see... (honestly though, I thought it was .jpg artifacting - which is why I avoid .jpg for non-photo graphics like the plague) unless they are on a shit LCD that can only display 18 bit color - like say those mislabelled Macbook pro's Apple ripped off buyers on. and sorry about the confusion - I briefly accidentally uploaded the wrong html/css over the correct one... It was only wrong for about 30 seconds, must have been the 30 seconds you first accessed it by.