FRIHOST FORUMS SEARCH FAQ TOS BLOGS COMPETITIONS
You are invited to Log in or Register a free Frihost Account!


HELP me please.. Table less designing





paskifire
I'm currently stuck at designing a web page by using tables for controlling the images, text, etc.. I want to learn table less layout can anyone give some advice on how to do it as a beginner? I'm using Adobe PS and AI for designing the page and DW for html editing. Please give me some advice as a beginner or send me a link for a step by step process. Thanks in advance frihost rocks Very Happy
brokenadvice
If you don't want to use tables, then you should use CSS. There are many CSS tutorials online, but I suppose I could give you a quick overview.


First we need something to hold your stuff, Most people use <span> and <div> which are mostly the same (you can learn all about inline and block elements on your own later), but almost any element can be styled. Let's stick with <div> for simplicity. Here is an example page (leaving out many things for simplicity):

Code:

<html>
    <head>
    </head>
    <body>
        <div id="header">Hello to my <em>Website</em>!</div>
        <div class="content"> Hello!</div><div class="content">This is my webpage! I hope you like it!</div>
        <div class="navigation">Links!</div>
    </body>
</html>


If you notice each div tag has either an id or a class. This will later allow the browser to match up the CSS to the different elements. An id can only address one element whereas a class can be reused.

CSS for a single page should be embedded in the head section in its own style tag like so:

Code:

<html>
<head>
<style type="text/css">

#header{
    background: #7fffd4;
    border: 2px solid #333333;
}

.content{
    background: #ffccff;
}
</style>
</head>


id's get a pound sign in front of the name, classes get a single period. The stuff in the curly brackets are called CSS properties. You can search Google to learn a bunch more.

We can use the Float and with properties to make this a little more pretty like so:

Code:


<style type="text/css">

#header{
    background: #7fffd4;
    border: 2px solid #333333;
    height: 400px;
    text-align:center;
}

.content{
    background: #ffccff;
    width:40%;
    float:left;
}
.navigation{
    background: #ffccff;
    width:20%;
    float:left;
}
</style>



So yeah, that is the bare minimum you need to know.
paskifire
Oh thanks! It's pretty useful. I'll start with this. Thank you
Related topics
help! please
I need help, please
Admins help please, My domain wont work! (its my domain.)
my site?
mysql/php help please
Major Problem with COmputer. Help Please
I am having alot of trouble with forms! Urgent help please!
I need some help please!
Html Forms help please?
PLEASE HELP!!.......PLEASE
Table less webpage
help please
Help please! I can't login to my blog admin panel
Hmmmm, Favicon not working, check it out and help please
Reply to topic    Frihost Forum Index -> Webmaster and Internet -> Design Tips

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2011 Frihost, forums powered by phpBB.