Jump to content

Create webpage layout with css..Need Help


shamsuljewel

Recommended Posts

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]
Link to comment
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
Link to comment
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.



Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

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.