Jump to content


Photo

Create webpage layout with css..Need Help


  • Please log in to reply
5 replies to this topic

#1 shamsuljewel

shamsuljewel
  • Members
  • PipPipPip
  • Advanced Member
  • 95 posts

Posted 27 October 2006 - 02:22 PM

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

#2 redbullmarky

redbullmarky
  • Staff Alumni
  • Advanced Member
  • 2,863 posts
  • LocationBedfordshire, England

Posted 27 October 2006 - 03:54 PM

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:

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

"you have to keep pissing in the wind to learn how to keep your shoes dry..."

I say old chap, that is rather amusing!

#3 cmgmyr

cmgmyr
  • Members
  • PipPipPip
  • Advanced Member
  • 1,278 posts
  • LocationUSA

Posted 27 October 2006 - 04:01 PM

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.neuroticw...ayout/index.php

...once you get into CSS it is SOOO much better and easier to deal with!

-Chris

#4 dbrimlow

dbrimlow
  • Members
  • PipPipPip
  • Advanced Member
  • 712 posts

Posted 27 October 2006 - 04:58 PM

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: http://www.ex-designz.net/template/ 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:
http://www.alistapart.com/ and
http://www.positioniseverything.net/

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.




Dave

I am always amazed by no matter how much I know, I know I don't know as much as I thought I knew.  - D. Brimlow.

#5 shamsuljewel

shamsuljewel
  • Members
  • PipPipPip
  • Advanced Member
  • 95 posts

Posted 27 October 2006 - 07:33 PM

Thanks guys..your suggestion and related links help me a lot to understand the layout.


#6 cmgmyr

cmgmyr
  • Members
  • PipPipPip
  • Advanced Member
  • 1,278 posts
  • LocationUSA

Posted 28 October 2006 - 04:11 PM

no problem, glad we could help!




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users