How do I make the tables and images in HTML/CSS get true 100% width? I would like them to be like on this website: http://www.mediafire.com/ Do you notice how the left and right side of the tables and images get to the end of the screen, with no white spaces left (the blue logo and gradients)? The problem is that when I make a new table, set it to 100% width and then place a background image there, the image is at 100% of the screen but there are still 5 pixels of white space in the left and right part of the screen. Here is one of my websites: www.sirarticle.com. < Do you notice how there are white spaces in the left and right margin? I checked the border, cell space and padding, and they are all at 0. So I'm missing some CSS value? Thanks!
Never mind, I found the fix. It wasn't a HTML or CSS table issue. I actually edited the page properties in Dreamweaver, and set the left and right page margin to 0px, and now it's better.
I may be missing on something here. I make the structure of a new website by making rows and columns of HTML tables, and then add images made with photoshop layers to these tables. Normally I make the rules of the tables and their backgrounds in CSS, so they stay integrated. Is there a better way than doing this? Without tables?
Absolutely, it's called tableless design. If you google it you'll find hundreds of references, reasons why i's (a lot better) and tutorials. A short introduction is here: http://en.wikipedia.org/wiki/Tableless_web_design
Hey man, Im gonna lay out for you what you need to do. lets say for example your code (HTML) looks like this <html> <head> <title>Example from kushhy</title> <link href="example.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> <div id="top"></div> <div id="header"></div> <div id="navi"></div> <div id="content"></div> <div id="footer"></div> </div> </body> </html> Code (markup): Here is the css for the above HTML @charset "utf-8"; /* CSS Document */ body { background-color:#CCC; } #wrapper { width:960px; margin:0 auto; } #top { width:960px; height:80px; background-color:#009; clear:both; } #header { width:960px; height:200px; background-color:#060; clear:both; } #navi { float:left; width:300px; height:800px; background-color:#00C; } #content { float:left; width:660px; height:800px; background-color:#C93; clear:right; } #footer { width:960px; height:150px; background-color:#F00; float:left; } Code (markup): As you can see if you save those 2 files in the same directory and then open the html file you will see a basic left side bar layout. Tableless design is the RIGHT way to design. Use the <div> tag to designate sections of your layout, then use css (via stylesheet) to give that div certain properties. You can also apply properties to tags such as <p> <span><h2> ect basicall all html tags. Here is a nice resource to use when learning css. http://www.lesliefranke.com/files/reference/csscheatsheet.html I also recommend reading some books on css. it wil help you get a better understanding. I hope this helps. let me know.