Jump to content

Archived

This topic is now archived and is closed to further replies.

shamsuljewel

Create webpage layout with css..Need Help

Recommended Posts

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...

Share this post


Link to post
Share on other sites
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]

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
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.



Share this post


Link to post
Share on other sites

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.