demon_athens Posted January 19, 2008 Share Posted January 19, 2008 Hi there, I am trying to build my template without any table. So I am having a problem here -> http://demo.lollypop.gr/paremvasi/ As you can see when my main block is having more text and a bigger height the left and right shadow fade is not relative to the main blocks height. This all layout is a simple 3 column table but I really can't think how to do it with css... Quote Link to comment Share on other sites More sharing options...
demon_athens Posted January 21, 2008 Author Share Posted January 21, 2008 never mind. I will do it with tables this time and when I find many free hours I'll give it a try with css Quote Link to comment Share on other sites More sharing options...
demon_athens Posted January 25, 2008 Author Share Posted January 25, 2008 I have tried again with no luck... Can anyone help? My webpage is <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Salsa Amigos</title> <style type="text/css"> <!-- body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: normal; color: #333333; background-color: #BF0808; margin: 0px; padding: 0px; } #centerbox{ margin-right: auto; margin-left: auto; width: 800px; } #container{ width: 797px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; height: auto; padding: 0px; } #leftshadow{ background-image: url(left_shadow_repeat.jpg); width: 13px; height: 100%; padding:0; margin: 0px; background-color: #BF0808; float: left; } #main{ height: auto; float: left; background-color: #FFFFFF; width: 770px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; clear: none; } #rightshadow{ background-image: url(right_shadow_repeat.jpg); width: 13px; height: 100%; margin: 0px; padding: 0px; float: left; background-color: #FFCC00; } #footer{ text-align: center; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; font-weight: bold; color: #FFFFFF; text-decoration: none; clear: both; } --> </style> </head> <body> <div id="centerbox"> <div id="container"> <div id="leftshadow"> </div> <div id="main"> <p>I just want the shadows to have the same height with this white box, regardless the content.</p> <p> </p> </div> <div id="rightshadow">< </div> </div> </div> <div id="footer"> Made by demon</div> </body> </html> A live example is here -> http://www.dnamag.gr/test/empty.html Seriously I can't understand what is wrong. Quote Link to comment Share on other sites More sharing options...
bronzemonkey Posted January 25, 2008 Share Posted January 25, 2008 What's wrong is that you are using the concepts of table layouts for css layouts. I'd recommend that you spend an afternoon looking through this site to help you understand how you can create layouts with css. This is how I would do you simple background image: A single image is used for the background, the padding on either side of #main is equal to the widths of the shadows of the background image, the image is then repeated along the y-axis. This is the image I created from your two images - http://i29.tinypic.com/11wdjmf.gif - and below is the code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Salsa Amigos</title> <style type="text/css"> <!-- /*this is a basic css reset to remove default browser styles*/ html, body, div, p {padding:0; border:0; margin:0;} body {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; font-weight:normal; color:#333; background-color:#BF0808; margin:0; padding:0;} #container {width:800px; margin:0 auto;} #main {width:774px; padding:0 13px; background:#fff url(shadow.gif) 0 0 repeat-y;} #footer {clear:both; text-align:center; font-size:9px; font-weight:bold; color:#fff;} --> </style> </head> <body> <div id="container"> <div id="main"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam in purus. Donec ipsum. Vivamus enim. Phasellus ornare tortor sed elit. Aliquam porttitor, libero non nonummy elementum, felis ante commodo nibh, gravida aliquam pede sem quis nibh. Duis ac sem. Pellentesque orci lacus, pellentesque nec, varius blandit, tincidunt quis, ipsum. Nullam augue. Nullam molestie ante dictum tellus. Quisque luctus. Sed et neque. Nullam tincidunt nisl hendrerit augue faucibus cursus. Praesent id tellus non lectus accumsan pulvinar.</p> <p>Maecenas gravida sollicitudin libero. Vivamus pulvinar leo at pede. Nam est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec dapibus laoreet sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam erat volutpat. Aliquam erat volutpat. Cras sem. Nulla congue posuere mi. Vestibulum varius nibh accumsan sem. Ut est urna, mattis eu, consectetuer id, iaculis eget, urna. Aliquam arcu. </p> </div> <div id="footer"> Made by demon</div> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
demon_athens Posted January 25, 2008 Author Share Posted January 25, 2008 Simple and effective although I have some thoughts on this one. 1) What if the #main has a picture with width bigger than #main width? It will overlap, so you must set maximum img width inside #main as well. 2) What if you want to have an elastic box? Those were the reasons that I bypassed a solution like yours. Ofcource I may wrong, I consider myself as "fish" to css world. Quote Link to comment Share on other sites More sharing options...
bronzemonkey Posted January 25, 2008 Share Posted January 25, 2008 1) What if the #main has a picture with width bigger than #main width? Yes it will overlap or break the layout in some other way depending on how well/badly you've coded. 2) What if you want to have an elastic box? Well that wasn't in the code you posted! Different solutions for different problems. You could just apply images to both the #main and #container if it was set up to be a liquid layout. But I don't like using naff border shadows anyway Quote Link to comment Share on other sites More sharing options...
demon_athens Posted January 25, 2008 Author Share Posted January 25, 2008 But I don't like using naff border shadows anyway You don't know what you're missing! Thanks again for your help bronze ( I guess you're the css guru here). take care folks. Quote Link to comment Share on other sites More sharing options...
bronzemonkey Posted January 25, 2008 Share Posted January 25, 2008 You're welcome. I guess you're the css guru here I've only been doing this stuff for about 9 months...by no stretch of the imagination am I a guru! Quote Link to comment Share on other sites More sharing options...
AV1611 Posted January 25, 2008 Share Posted January 25, 2008 I recently converted my layout style from table to div. I found learning it much easier by doing this: create empty div's and specifiy height and width with inline css, also setting a background-color for each. By using this, I was able to visualize the floats and blocks and so forth. Once I got the site the way I wanted, it's just as easy as replacing the css placeholders with real objects. It didn't solve everything, but it sure helped me get used to letting go of tables. Quote Link to comment Share on other sites More sharing options...
demon_athens Posted January 25, 2008 Author Share Posted January 25, 2008 Nice tip AV1611. I will definitely use it Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.