Learning to design by hand!

April 6, 201115 yr

Hi, My names Rob and I recently decided I wanted to give another go at HTML and CSS this time I hope to stick to it and finally finish a site.

In college I have been using Dreamweaver, I personally hate it, causes trouble with spacing and tables leaving giant gaps between lines. I have also been told to avoid Dreamweaver by a friend who designs all his code by hand.

I couldn't find the way to write this table on my own so I caved and made the quick cell merges and sizes in Dreamweaver and grabbed the code made it look a little more bearable as Dreamweaver makes horrible code.

Does this look okay for a standard table with internal CSS? The one thing that is confusing me is the what are these for? Dreamweaver generates them but W3Schools never mentions them in the tables section.

Thanks for any feedback and advice,

RobW

<html>
<head>
<title>Hogo's Project</title>
<style type="text/css">
body {color:white;}
body {background-color:black;}

table, td, th
{
border-style:solid;
border-width:1px;
}

</style>
</head>
<body>

<table width="1024" border="1" align="center">
<tr>
<td height="200" colspan="2"> </td>
<td width="200"> </td>
</tr>
<tr>
<td width="200" rowspan="2"> </td>
<td width="436" rowspan="2"> </td>
<td width="200" height="350"> </td>
</tr>
<tr>
<td width="200" height="333"> </td>
</tr>
</table>

</body>
</html>

April 7, 201115 yr

Hey Rob,

This code looks fine to me, though i'd encourage you to learn to layout with div tags rather than tables. It's a little bit trickier , so if you want to learn the basics with tables, that's fine. But non tabulated layout is much better in my opinion.

The is a non breaking space. They are inserted in the table cells because some browsers may collapse the table cell if there is nothing in them.

April 7, 201115 yr

I don't see anything wrong with the code if you are validating as HTML4. Any other doctype and you'd need to add some stuff to make it valid.

If you plan to take web design past the hobbyist phase you absolutely need to code your layouts with XHTML/CSS and only use tables for tabular data. A myriad of problems arise with table-based layout.

April 7, 201115 yr

Author

Hey Rob,

This code looks fine to me, though i'd encourage you to learn to layout with div tags rather than tables. It's a little bit trickier , so if you want to learn the basics with tables, that's fine. But non tabulated layout is much better in my opinion.

The is a non breaking space. They are inserted in the table cells because some browsers may collapse the table cell if there is nothing in them.

Thanks for clearing that up, I have never used Div tags I just read a quick bit about them and they pretty much let you put what you would normally put in a table anywhere on the page?

I didn't really understand them but I want to use them if they are going to be better than Tables.

Thanks

I don't see anything wrong with the code if you are validating as HTML4. Any other doctype and you'd need to add some stuff to make it valid.

If you plan to take web design past the hobbyist phase you absolutely need to code your layouts with XHTML/CSS and only use tables for tabular data. A myriad of problems arise with table-based layout.

I think I will try and go for the XHTML/CSS then as its better to do it that way and learn it rather than have to learn to code it without, I read about XHTML last night closing of tags and such which I have always tried to do, Also to never use capitals for tags like BODY

Thanks

April 7, 201115 yr

what are these for?

thats code for a space

April 7, 201115 yr

Thanks for clearing that up, I have never used Div tags I just read a quick bit about them and they pretty much let you put what you would normally put in a table anywhere on the page?

I didn't really understand them but I want to use them if they are going to be better than Tables.

I think I will try and go for the XHTML/CSS then as its better to do it that way and learn it rather than have to learn to code it without, I read about XHTML last night closing of tags and such which I have always tried to do, Also to never use capitals for tags like BODY

Thanks

A div is pretty much the basic building block of a site. You can think of them like individual table cells when used for layout. With CSS you can make say:

One div for a header

One div for a content area

One div for a sidebar

One div for a footer

Then you use other semantically appropriate XHTML tags for the rest of your markup. It's a bit hard to describe, you really should do some reading about basic XHTML/CSS layout.

In XHTML all tags should be lowercase and closed. Then, keep in mind that for anything that affects the visual design of the site, you need to use CSS. XHTML is only for structure.

Again, do some reading to get the hang of it conceptually then dive right into coding. You may have to code four or five times to get it down, but it's worth learning now before you start developing bad habits with those nasty tables.

April 7, 201115 yr

Author

Hey all,

I have been looking at DIV tags and they are so very confusing, Probably because I'm trying to learn CSS at the same time but still.

I made this design using tables in Dreamweaver and I want to make it using div tags, is this going to be something that requires a lot of code?

I need to find out how to make the banner, the right hand square and the two sidebars but I'm so confused.

Thanks for any advice

Rob

April 7, 201115 yr

Not as much as you think. When coding layout in HTML CSS you want as little code as possible but for it still to do the job. For the layout you sugested why not try this code.

HTML

<html>
...

<body>

<div id="wrapper">
  <div id="header">
       This is header
  </div>
  <div id="content">
     <div id="left_sidebar">
         This is left bar
     </div>
     <div id="main_content">
          Main content goes here
     </div>
     <div id="right_sidebar">
          right bar
     </div>
  </div
  <div id="footer">
     This is your footer
  </div>
</div>

...
</html>

CSS

body {

}

#wrapper {
  width:960px;
  margin: 0 auto;
}

#header{
  width:960px;
}

#content{
  width:960px;
}

#left... {
  float:left;
  width: 200px;
}

#main_content {
  float:left;
}
#right_bar {
  float:right;
  width: 200px;
}

#footer {
  clear: both;
  width:960px;
}

THis is a basic interpretation and doesnt include the header square, not doing it for you lol , but it should get you going if you need any help let us know

Thanks

Joe

Edited April 7, 201115 yr by joe2011uk

April 7, 201115 yr

Author

Greatly appreciated, I took a look and tried to add the header square this is what I did

HTML

<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>

<div id="wrapper">
  <div id="header">
       This is header
  </div>
  <div id="headersquare">
	This is header square
</div>	
  <div id="content">
     <div id="left_sidebar">
         This is left bar
     </div>
     <div id="main_content">
          Main content goes here
     </div>
     <div id="right_sidebar">
          right bar
     </div>
  </div
  <div id="footer">
     This is your footer
  </div>
</div>

</body>

...
</html>

CSS

body {

}

#wrapper {
  width:960px;
  margin: 0 auto;
}

#header{
  width:960px;
}

#headersquare{
width:200px;	
}

#content{
  width:960px;
}

#left... {
  float:left;
  width: 200px;
}

#main_content {
  float:left;
}
#right_bar {
  float:right;
  width: 200px;
}

#footer {
  clear: both;
  width:960px;
}

This is what I got, is this correct or is it supposed to move the specific sections into a specific place?

Thanks I know I'm a pain I just really want to understand this

Rob

Edited April 7, 201115 yr by RobWatling

April 7, 201115 yr

Hey nearly right,

nearly right but the best way to do this is to make a container div for the header float your left div and right div like below:

HTML

<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>

<div id="wrapper">
  <div id="header_container"> <!--Containing div-->
  <div id="header"><!--left div-->
       This is header
  </div>
  <div id="headersquare"><!--square div-->
	This is header square
</div>	
  </div><!--close Containing div-->
  <div id="content">
     <div id="left_sidebar">
         This is left bar
     </div>
     <div id="main_content">
          Main content goes here
     </div>
     <div id="right_sidebar">
          right bar
     </div>
  </div
  <div id="footer">
     This is your footer
  </div>
</div>

</body>

...
</html>

CSS

body {

}

#wrapper {
  width:960px;
  margin: 0 auto;
}
#header_container{
width: 960px;
}
#header{
  width:760px;
  float:left;
}

#headersquare{
  float:right;
width:200px;	
}

#content{
  width:960px;
}

#left... {
  float:left;
  width: 200px;
}

#main_content {
  float:left;
}
#right_bar {
  float:right;
  width: 200px;
}

#footer {
  clear: both;
  width:960px;
}

The 760px for the left header div might need changing to get it to fit but should be fine

Joe

April 7, 201115 yr

Author

Your sneaky, Just before I checked here again I realised what you had done, at first I was confused by the ... and such but now I worked it out xD also the spaces betweem width: 200px

Thanks enjoyed that was a good lesson hehe

April 7, 201115 yr

Your sneaky, Just before I checked here again I realised what you had done, at first I was confused by the ... and such but now I worked it out xD also the spaces betweem width: 200px

Thanks enjoyed that was a good lesson hehe

no worries glad i could help if you need anything else pm me

tinmade
1

April 7, 201115 yr

Author

Okay so I got it slightly closer to the final goal.

This is header square

Right Sidebar

They now display like this in the right hand side of the page

This is header

This is left sidebar

Now the sidebar sits right, but the header should be in the centre but instead Main content goes here & This is your footer overlap there

First off, how can I move footer to the bottom? I tried float:bottom but then I checked and float only uses left and right I think. no matter what width: I set footer at it stays in the same place.

This is not going well xD

HTML

<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>

<div id="wrapper">
  <div id="header_container"> <!--Containing div-->
  <div id="header"><!--left div-->
       This is header
  </div>
  <div id="headersquare"><!--square div-->
               This is header square
       </div>  
  </div><!--close Containing div-->
  <div id="content">
     <div id="left_sidebar">
         This is left bar
     </div>
     <div id="main_content">
          Main content goes here
     </div>
     <div id="right_sidebar">
          right bar
     </div>
  </div
  <div id="footer">
     This is your footer
  </div>
</div>

</body>

</html>

CSS

body {

}

#wrapper {
  width:960px;
  margin: 0 auto;
}
#header_container{
  width:960px;
}
#header{
  width:760px;
  float:left;
}

#headersquare{
  float:right;
  width:200px;    
}

#content{
  width:960px;
}

#left_sidebar {
  float:left;
  width:200px;
}

#main_content {
  float:right;
}
#right_sidebar {
  float:right;
  width:200px;
}

#footer {
  clear:both;
  width:960px;
}

Edited April 7, 201115 yr by RobWatling

April 8, 201115 yr

Hi Rob,

This can sometimes happen and its easily fixed, In CSS there is a property called the Overflow property. This basically tells the browser what to do if the content inside over laps the box. It can have One of five values, visible, hidden, scroll auto and inherit.

This is what you need.If you have problems deciding where to put it in the code get back to me but you should be able to work it out.

overflow: hidden;

remember if you need any more help give me a message

Joe

April 8, 201115 yr

Author

Apparently I can't PM you yet :S strange anyhow

Thanks a lot for all the help so far its been greatly appreciated, a quick question.

First off, The Wrapper on the CSS what is its purpose?

Second the Overflow property do I apply that to each individual entry like left_sidebar and such?

Thanks

April 9, 201115 yr

Hi

The wrapper is the container to keep all your floats in place. The overflow property is for one that is causing the problem, it wont do any harm adding it to all but it looks messy.

Thanks

Joe

April 9, 201115 yr

Author

Ah okay Thanks I will try adding it to the wrapper and individuals see what I get when I'm home

thanks again Joe

EDIT: I'm doing something wrong because I add the overflow and I can't get anything to move =/ I tried widths also but can't get anything into an actual position.

Just can't see why thing's wont move when I place tags :S

body {

}

#wrapper {
  width:960px;
  margin: 0 auto;
}
#header_container{
  width:960px;   
  overflow:hidden;
}
#header{
  width:760px;
  float:left;
  border:2px solid red;   
}

#headersquare{
  float:right;
  width:200px;    
  border:2px solid red;
}

#content{
  width:960px;
  border:2px solid red;
}

#left_sidebar {
  float:left;
  width:200px;
  border:2px solid red;  
}

#main_content {
  float:right;
  border:2px solid red;   
}
#right_sidebar {
  float:right;
  width:200px;
  border:2px solid red;
}

#footer {
  clear:both;
  width:960px;
  border:2px solid red;  
}

Edited April 9, 201115 yr by RobWatling

April 10, 201115 yr

Hi Rob,

Try adding the overflow to #main_content and remove it from the header, if this does not solve it can you send me a link and I'll have a look, i might not be able to get back to u till monday as not going to be at my design machine till monday as working nightshift. if you do that change that should sort it. If not just give me a link and ill do my best

Joe

April 10, 201115 yr

Author

Hi Rob,

Try adding the overflow to #main_content and remove it from the header, if this does not solve it can you send me a link and I'll have a look, i might not be able to get back to u till monday as not going to be at my design machine till monday as working nightshift. if you do that change that should sort it. If not just give me a link and ill do my best

Joe

I got closer but I still can't seem to get footer to move at all, just sits there =/

nothing I apply will change the footer but this is where I am at.

Thanks I know im a pain ;p

CSS

body {

}

#wrapper {
  width:960px;
  margin: 0 auto;
}
#header_container{
  width:960px;
}
#header{
  width:760px;
  float:left;
}

#headersquare{
  float:right;
  width:200px;    
}

#content{
  width:960px;
}

#left_sidebar {
  float:left;
  width:200px;
}

#main_content {
  overflow:visible;
  position:absolute;
  left:800px;
  top:150px;
}
#right_sidebar {
  float:right;
  width:200px;
}

#footer {
  overflow:visible;
  position:absolute;
  left:100px;
  top:250px;
}

April 10, 201115 yr

Hello! If I've understood what you want to do right, this would seem to work:

#wrapper {
  width: 960px;
  margin: 0 auto;
}
#header_container{
  width: 960px;
}

#header{
  width: 760px;
  float: left;
}

#headersquare{
  float: right;
  width: 200px;    
}

#content {
  width: 960px;
  margin: 0 auto;
}

#left_sidebar {
  float: left;
  width: 200px;
}

#main_content {
margin: auto;
float: left;
}

#right_sidebar {
  float: right;
  width: 200px;
}

#footer {
width: 960px;
margin: auto;
clear: both;
}

Good luck!

April 10, 201115 yr

Author

That's it I just want to move the footer down to the very bottom center, that should be pretty easy now

Thanks a lot

Using that CSS It's almost perfect but the Footer doesn't appear where your's did it joins with main content, I tried using overflow, Could this be because of a resolution difference between me and you? I have 1920 x 1080.

Thanks

Rob

Edited April 10, 201115 yr by RobWatling

April 10, 201115 yr

Hmmm, odd, that! That should work regardless of resolution (everything is relatively positioned anyway). Does your HTML look like this:

<html>
<head>
<title></title>
<style>
#wrapper {
  width: 960px;
  margin: 0 auto;
}
#header_container{
  width: 960px;
}

#header{
  width: 760px;
  float: left;
}

#headersquare{
  float: right;
  width: 200px;    
}

#content {
  width: 960px;
  margin: 0 auto;
}

#left_sidebar {
  float: left;
  width: 200px;
}

#main_content {
margin: auto;
float: left;
}

#right_sidebar {
  float: right;
  width: 200px;
}

#footer {
width: 960px;
margin: auto;
clear: both;
}
</style>
</head>

<body>

<div id="wrapper">
  <div id="header">
       This is header
  </div>
  <div id="headersquare">
               This is header square
       </div>  
  <div id="content">
     <div id="left_sidebar">
         This is left bar
     </div>
     <div id="main_content">
          Main content goes here
     </div>
     <div id="right_sidebar">
          right bar
     </div>
  </div>
  <div id="footer">
     This is your footer
  </div>
</div>


</body>

</html>

...? I noticed that in the original code posted, one of the div tags wasn't closed properly (missing a >) - that could cause some issues?

April 10, 201115 yr

Author

WAHOOOO! Correct, the missing tag was causing the trouble, Thanks for the help

This is the finished layout xD.

Now I am going to try and figure out how to get the temporary art work in there and see how that fits in I am tempted to do a design in Photoshop, if so is there a certain method I should use to make it easier when saving the images?

Thanks again

Rob

EDIT: Here she is looks like crap ATM as temporary art as I don't like the current.

Edited April 11, 201115 yr by RobWatling

Learning to design by hand!

Featured Replies

Recently Browsing 0

Member Statistics

Forum Statistics

Join WDF

Account

Navigation

Search

Configure browser push notifications

Chrome (Android)

Chrome (Desktop)

Safari (iOS 16.4+)

Safari (macOS)

Edge (Android)

Edge (Desktop)

Firefox (Android)

Firefox (Desktop)