Hello, I am working on a site for a client, basically a simple shopping cart using pay pal that can be seen here: bridalmode.com/index2.html. The design was done exactly the way she drew out on paper and faxed to me. However, she loved the set up style, she just felt it was to small going left to right. So then I created bridalmode.com/index3.html. I gave this table width 100% and now it stretches with the size of the browser. However, I can foresee potential issues with doing it this way when I start inputting more of the products. One of the key design components she asked for was that the picture be large like it is, and the table underneath overlapping underneath it the way it is. However, I notice where that line is placed actually adjusts with the browser size, so that will confuse me as to how many products I can fit on each row etc. So can anyone offer me some input, ideas, maybe a new direction I should be trying to deal with this solution? Thanks in advance!
Eh, I know nothing of tables-- I don't think they'd be the easier choice in this one. Mainly cause I think what you might want is to have the left side the set width you have, and where the products are, I looked in 600x800 and everything just fits. So, you know that you can fit 2 products side-by-side in that low resolution. Possibly only one product at 640x480... If this were my project, I'd have either no-set-width or flex-width container, the left side set width as it is now (but maybe I'd make it no so wide... in my old FireFox 1.5 it seems there's a lot of space to the left of the menu...), and have the products be floated divs. This would allow them to span across on a large screen like mine (1400px wide), while simply making the page longer when the browser width is smaller. The smaller container will simply force the floats to drop down. This would give you the flexibility... I dunno that you can do with with a table (I'm not saying you can't, I just dunno how you'd do it). Design-wise, I'd also give a decent side margin to the whole main container/table/thingie. So the sides don't go AAALLL the way to the sides but leaves some room. You could do a flex-width design. Again, I have no clue how you'd do this in tables, but you could set a min-width of something like 760 px (for 800x600 resolution) and a max of something around 1024 or maybe the next popular size up. Anything larger just gets larger sides (you could put something in that white body background, a little gradient or something), and anything smaller than 800px makes a horixontal scrollbar. All browsers understand the CSS for min-width and max-width except IE6, which needs a javascript expression in the CSS itself. I've linked to this before, but here's the most content-less version I have of a flex-width page I've built: http://stommepoes.nl/Scooterverzekeren/scooterafsluiten3nee.html and look in all resolutions. Though I wouldn't set your site to the left as I did-- I think it should be centered and have a little breathing room on each side. You could also think of having a min-height setup if you think there'll be pages where the content is short-- otherwise the design looks very long from side to side when the bottom's too short.
Nested tables for no reason, and I'd suggest floating the individual products so they 'stack' automagically instead of being a 'crappy little stripe' down one side of the screen. In any case, there is NO reason for there to be more than one table in this layout using tables, and frankly no reason to use a table in the first place either given the simplicity of the design. 4k of markup for 331 bytes of content? Uhm, no... should be about HALF that. This is rough, just the HTML, but should be about all the markup that would be needed for that page. <!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" xml: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> Design Visage's Bridal Mode Wedding Accessories </title> </head><body> <!-- empty spans below are image replacements, do not remove --> <div id="containerWrapper"><div id="container"> <h1> <em>Design Visage's</em> <strong>Bridal Mode</strong> <b>Hair Accessories</b> <span></span> </h1> <ul id="breadCrumbs"> <li><a href="/">home</a></li> <li><a href="hair-pins.htm">hair pins</a></li> </ul> <div id="overlayImage"></div> <div id="sideBar"> <ul id="mainMenu"> <li><a href="/">home</a></li> <li><a href="hair-pins.htm">hair pins</a></li> <li><a href="hair-combs.htm">hair combs</a></li> <li><a href="tiaras.htm">tiara's & headbands</a></li> <li><a href="jewelry.htm">jewelry</a></li> <li><a href="bridal-clothing.htm">bridal clothing</a></li> <li><a href="extras.htm">exceptional extras</a></li> <li><a href="musthave.htm">make-up must have's</a></li> <li><a href="sking-care.htm">sensational skin care</a></li> <li><a href="hair-makeup.htm">bridal hair & make-up</a></li> <li><a href="policy.htm">policy</a></li> <li><a href="shipping.htm">shipping information</a></li> <li><a href="contact.htm">contact us</a></li> <!-- #mainMenu --></ul> <!-- #sideBar --></div> <div id="content"> <div class="product"> <img src="products/0003.jpg" alt="DV 1-10P" /> <div class="productCode">DV 1-10P</div> <div class="price">$38.00</div> </div> <div class="product"> <img src="products/002m.jpg" alt="DV 2-01P" /> <div class="productCode">DV 1-10P</div> <div class="price">$18.00</div> </div> <!-- #content --></div> <!-- #container, #containerWrapper --></div></div> </body></html> Code (markup): Plus or minus 200 bytes of extra styling div's, there's not a whole lot of point to having more than that. Everything else should be in the CSS. Either way if you set the width of .product to slightly wider than the images, set them to float:left they'll stack. If you want them flush right, put an extra container around them, float that right, and the float lefts inside it will all drive over to the other side.
Ok, i'm looking at both suggestions, which I thank you both for, and seeing which is easier for me to implement given my limited css knowledge. Deathshadow: What css file are you actually referencing with the container ID's and such?
Well, I didn't write the CSS for you - but I'm 99.999% certain that there should be little or no changes needed to that HTML to make that layout when one does write CSS. It was intended as an example of how much should be ripped out of the HTML wholesale. If I have time later I'll toss together a full on example with working CSS - though be warned I may have to remaster some of the images... -- edit -- Starting now - 3:05AM - let's see how long it takes.
Hey Deathshadow, I appreciate your help, but I got to have this done tomorrow morning, an it's a little past midnight here. I don't want you to waste your time after I've already done it. I should be able to piece this together, this lady just threw me for a loop with the whole browser resizing thing, and rather then simple table html dreamweaver stuff, I knew I was going to have to jump into some css stuff that I haven't had the time to learn yet =) I guess tonight's my night!!! lol I'll upload and post my progress for you to see though, let you critique it. Thanks again!
Ok, here's what I came up with: http://battletech.hopto.org/for_others/fisher318/template.html the directory is unlocked as always: http://battletech.hopto.org/for_others/fisher318 I ended up putting one of the tables back in.... and added some more dummy 'products' to see how they spaced out. I have to say - that inset image is a royal pain in the backside and in general, a REALLY bad idea from a product layout point of view. I'd seriously discuss axing or repositioning that element with the client... either that or I'd get rid of the box for the product area and just wrap the products around that picture.
Thanks, yours looks great. Here is how far I came up with: http://www.bridalmode.com/test/ I also resized that image, making it smaller, so it looks better with the rest of the layout. Also, the products you set up look and seem to work great. Thanks! I'll try tweaking and perfecting this with what else has to go into it.
^^ That does not work in Opera nor does it validate xHTML Transitional. I'd use Deathshadows - it is better, cleaner code and validates xHTML strict.
Hey Blue, thanks for the tip. I'm going to work off his template, yeah, I just still have to add finishing touches and tweaks to it. Thanks again, both of you!
Hey, also, I have been wondering alot lately, why two font sizes? I see it every where and have yet to understand it: font:normal 85%/140%
Hmmm... I would have still forced a scrollbar at the size which has one or two products next to the tonguewoman images, instead of letting them drop down under her and stay half-cut-off at cell-phone-type sizes. I know everyone hates horizontal scrollbars but they do keep stuff from disappearing off the side. Also, on my crappy ol' FF 1.5 and old Opera9-whatever on this Linux box, the tonguewoman is slightly covering the menu-- so I'm guessing that's a font thing, as I lack many fonts. Everything just fits on the Blows machine at work. But just, and you'd rather have a bit more space between the longest menu choice and tonguewoman. For tonguewoman, you could have a div of a set width with the woman as a background image positioned right and center, while the menu floats off to the left. If worst came to worst, the menu could spill over on top of her. To prevent difficulty reading, you could also make her half-opaque or set a very contrasty colour for the menu text. With your current site as it is now, Fisher, if I enlarge the text a bit, the menu spills out behind the woman, which you'd rather it didn't do-- better to set a width for that menu and have the text wrap, or make it spill over her. Sure, that's not as pretty design-wise but readability comes out above that : ) IE6 would stretch the container when the longest word gets long enough, but everyone else would obey. Also, the site can be up and running, and you can still tweak stuff-- that's how a lot of people get around deadlines. They get the working model online on time, and continue to fix the little things later. This isn't preferred but it's just what happens. *Edit, that's not two FONT sizes-- first one is font, and the other is line-height. With the shorthand "font" CSS property, you can set line-height and font at the same time, which is damn handy : )
Don't use an absolute value. Use something like this for cat1 pic: STYLE="left: -10em; position: relative" Wider is better: http://www.bestwebimage.com/?p=54