shamsuljewel Posted October 27, 2006 Share Posted October 27, 2006 I know little about CSS and I am learning it. I have understand a lot of CSS syntax such as font, color, ect..But I can't understand the layout design with css...I know here many guru people are always post and help new commers...so please help me to understand it and may give some example... Quote Link to comment Share on other sites More sharing options...
redbullmarky Posted October 27, 2006 Share Posted October 27, 2006 your best bet is to pop 'css layout' into google - there are plenty of tutorials that will take you through the basics. most of the learning, to be honest, is how to write valid code and how to transfer from tables to CSS based layouts.your first key thing is going to be the <div> tag. the div tag effectively draws an invisible box/container for you to put other HTML elements within. the div tag can be styled just like any other element, allowing you to have full control over position, colour, font, style, spacing, borders, etc. basic example:[code]<html><head><style type="text/css">#mydiv{ border:1px solid #FF0000; width:500px; margin:20px; padding:20px;}#mydiv2{ border:1px solid #00FF00; position:absolute; width:200px; height:200px; left:350px; top:400px; font-size:15px;}</style></head><body> <div id="mydiv"> <h1>hello world!</h1> <p>i am div 1</p> </div> <div id="mydiv2"> <h2>wahey!</h2> <p>I am an absolutely positioned div. i have a bit more freedom to roam, as i'm not affected by my neighbouring divs</p> </div></body></html>[/code] Quote Link to comment Share on other sites More sharing options...
cmgmyr Posted October 27, 2006 Share Posted October 27, 2006 Also take a look at this and other stuff that they have. This might get you going in a few other directions too.http://www.neuroticweb.com/recursos/3-columns-layout/index.php...once you get into CSS it is SOOO much better and easier to deal with!-Chris Quote Link to comment Share on other sites More sharing options...
dbrimlow Posted October 27, 2006 Share Posted October 27, 2006 I found that the easiest way for me to learn css was to "reverse engineer" an existing css based page to see how any changes I make impact the design.Of course, the absolute hardest thing about css layout is cross-browser rendering.All modern browsers Firefox, Mozilla, Safari, Opera, Netscape, for the most part display properly coded css layouts correctly.While, all versions of IE will display the same page differently (included IE 7). Most css designers try to start getting the designs to work from IE 5.x for Mac and PC, IE 5.5 PC and IE 6.0.But many have decided to just ignore the IE 5s because they have so many problems with css display.What I recommend is trying a few free "templates" for XHTML-css at: [url=http://www.ex-designz.net/template/]http://www.ex-designz.net/template/[/url] see how they work, change the graphics and colors to your own, etc.To truely learn how to do it right from the start, try both:[url=http://www.alistapart.com/]http://www.alistapart.com/[/url] and[url=http://www.positioniseverything.net/]http://www.positioniseverything.net/[/url]Position is everything is the best place to learn all of the IE bugs and hacks to get it to behave.The most crucial part is to use firefox to check your styles in first, than check it in whatever IE you use.Good luck. Quote Link to comment Share on other sites More sharing options...
shamsuljewel Posted October 27, 2006 Author Share Posted October 27, 2006 Thanks guys..your suggestion and related links help me a lot to understand the layout. Quote Link to comment Share on other sites More sharing options...
cmgmyr Posted October 28, 2006 Share Posted October 28, 2006 no problem, glad we could help! 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.