What happened to the Messenger Plus! forums on msghelp.net?
Shoutbox » MsgHelp Archive » Skype & Technology » Tech Talk » CSS web design

CSS web design
Author: Message:
stoshrocket
Senior Member
****

Avatar
formerly methos

Posts: 748
Reputation: 31
34 / Male / Flag
Joined: Aug 2005
O.P. CSS web design
Recently i have took to redesigning my website and decided to finally sit down and learn CSS. So, i took out my notpad and pen and wrote down loads of notes on it from www.w3schools.net (or w/e). But, i come to do my website and this hasnt worked properly... its the link on my signature, i have siplified the website to very easy colours to work with to see if it was just not working with a more complex build... but... here is the problem... i am used to using tables in HTML, so i use them, insert a background image and write the text in that. Tis time i have tried to write on just a peice of white (a jpg of pure white) and the jpg is not showing. ie, i dont think it is reading it as a table, but simply ignoring it. I have also added a simpler border than i wanted through CSS in the head, but it still doesnt show without the CSS in the head... strange, can anyone help me out please? (a fiver says hmaster replies... lol)
formerly methos
09-09-2005 08:19 PM
Profile PM Web Find Quote Report
RaceProUK
Elite Member
*****

Avatar

Posts: 6073
Reputation: 57
39 / Male / Flag
Joined: Oct 2003
RE: CSS web design
code:
<html>
<head>
  <title>MEthos2::MEthos2 has Awoken</title>
   <style ="text/css">
   body
   {background-color: RGB(240,240,240)}
   p
   {font: RGB(176,176,176)}
   td
   {border:5px dotted white;}

   </style>
</head>
<body>
  <br><br><p style="font: bold 15px Arial;color: RGB(176,176,176);" align="center">MEthos2 Home::
  <br>MEthos has awoken<br></p>

   <td background="images/base/base.jpg" width="400px" height="400px">
   <p style="font: 12px Arial;" align="center">Hi guys, this is my new design for the site. This page is going
   to be the homepage and any updates or changes to the website will be posted here as soon as the
   update is made. Any announcements will also be posted here. Different posts will be separated by
   'horizontal rule' of some kind. This is my second real HTML site that i have finished (or 'going
   to finish') and my first wasn't really HTML, i used a hoster's quick uploads. I have done one
   other design in HTML but didnt like that so it changed to this cool, calm design. Here, i will
   also post the webpages that work done on/webpages that i have finishe working on, these will be
   listed to the right eventually, navigation the the left. Have a browse and tell me what you
   think of it. ::MEthos::
Anyone else spot the complete lack of closing tags at the end? You need to close tags properly, so it all works properly.

http://validator.w3.org/check?uri=http%3A%2F%2Fmethos2.skarz.co.uk%2F
The W3C Validator is great at spotting even the smallest of errors.
[Image: spartaafk.png]
09-09-2005 09:16 PM
Profile PM Web Find Quote Report
brian
Senior Member
****

Avatar

Posts: 819
Reputation: 43
– / Male / –
Joined: Sep 2004
RE: CSS web design
Tables? ew.

Learn to use div's, they are the "RIGHT" way how to design.
09-09-2005 09:19 PM
Profile PM Find Quote Report
hmaster
Senior Member
****

Avatar

Posts: 716
Reputation: 24
33 / Male / Flag
Joined: Nov 2004
RE: CSS web design
quote:
Originally posted by Methos2
(a fiver says hmaster replies... lol)
:lol:
quote:
Originally posted by brian
Tables? ew.

Learn to use div's, they are the "RIGHT" way how to design.
true, tables are good for data though *-)

anyways:

code:
<html>
<head>
  <title>MEthos2::MEthos2 has Awoken</title>
   <style ="text/css">
   body
   {background-color:rgb(240,240,240);}
   p
   {font: 12px Arial; text-align:center;}
   p.header
   {bold 15px Arial; color:rgb(176,176,176);}
   td
   {background:url(images/base/base.jpg); border:5px dotted white;}

   </style>
</head>
<body>
  <br><br><p class="header">MEthos2 Home::
  <br>MEthos has awoken<br></p>

  <table width="100%">
<tr> 
  <td width="400px" height="400px">
   <p>Hi guys, this is my new design for the site. This page is going
   to be the homepage and any updates or changes to the website will be posted here as soon as the
   update is made. Any announcements will also be posted here. Different posts will be separated by
   'horizontal rule' of some kind. This is my second real HTML site that i have finished (or 'going
   to finish') and my first wasn't really HTML, i used a hoster's quick uploads. I have done one
   other design in HTML but didnt like that so it changed to this cool, calm design. Here, i will
   also post the webpages that work done on/webpages that i have finishe working on, these will be
   listed to the right eventually, navigation the the left. Have a browse and tell me what you
   think of it. ::MEthos:: </p>
   </td>
</tr>
  </table>
 
</body>
</html>

That i suppose should work. rgb(240,240,240) is so close to white it wont really show up as a background color. In css to declare the font colour you use "color:colour;" not in the font:; property. I recommend using hex colours or names. There is no"background" property in td!
good luck :D


This post was edited on 09-10-2005 at 11:02 AM by hmaster.
[Image: sig.png]
09-09-2005 09:35 PM
Profile PM Web Find Quote Report
stoshrocket
Senior Member
****

Avatar
formerly methos

Posts: 748
Reputation: 31
34 / Male / Flag
Joined: Aug 2005
O.P. RE: CSS web design
quote:
Originally posted by brian
Tables? ew.

Learn to use div's, they are the "RIGHT" way how to design.

I would but im not too sue how to use divs atm, i learnt to base HTML using tables, ill look into it thru the weekend

quote:
Originally posted by raceprouk
Anyone else spot the complete lack of closing tags at the end? You need to close tags properly, so it all works properly.

Yeah.... only it doesnt work with closing tags, when i tried it first of all it had all of the closing tags and correct tags, but that only contained to scentance 'CONTENT FILLER' so changed to make sure you guys fixed somthing that might be what i want on the page... lol

Anyway, ill try these suggestions, and post another reply to tell ya what happens
ok, ive had a look but cant find a decent website that explains divs properly, i know that they are the tags to difine a section of a page and split it up but i dont know how i can add all the extra stuff like backgroud pics and the width/height, would i use the same stuff inside td, ie can i go::

...<more HTML above this line>...

div{background:url(images/base/base.jpg); border:5px dotted white;}
   </style>
</head>

<body>
  <br><br><p class="header">MEthos2 Home::
  <br>MEthos has awoken<br></p>

  <div width="400px" height="400px">
   <p>Hi guys, this is my new design for the site.</p>
  </div>
</body>
</html>

This post was edited on 09-10-2005 at 10:39 AM by Chrono.
formerly methos
09-10-2005 10:20 AM
Profile PM Web Find Quote Report
hmaster
Senior Member
****

Avatar

Posts: 716
Reputation: 24
33 / Male / Flag
Joined: Nov 2004
RE: CSS web design
div is just the word to declare a div
there are two types id and class
id is meant to be used for only one object on the page while classes are for multiple.

so if you wanted to have a div, it would be

div#mydiv or more commonly (and easier) used #mydiv
notes: use #divIDname for ID's and
.divCLASSname for CLASSes
you can use width and height tags in css too!

---- example
code:
#mydiv {background:url(images/base/base.jpg); border:5px dotted white; width:400px; height:400px;}
</style>
</head>

<body>
  <br><br><p class="header">MEthos2 Home::
  <br>MEthos has awoken<br></p>

  <div id="mydiv">
   <p>Hi guys, this is my new design for the site.</p>
  </div>
</body>
</html>

This post was edited on 09-10-2005 at 11:03 AM by hmaster.
[Image: sig.png]
09-10-2005 10:59 AM
Profile PM Web Find Quote Report
RaceProUK
Elite Member
*****

Avatar

Posts: 6073
Reputation: 57
39 / Male / Flag
Joined: Oct 2003
RE: CSS web design
quote:
Originally posted by brian
Tables? ew.

Learn to use div's, they are the "RIGHT" way how to design.
Depends on the desired application. If you want overlaid elements, use <DIV>s. If you want a more tabular structure, use <TABLE>.

People have got to get rid of the notion that HTML describes the data. It doesn't - it describes the structre.
HTML/XHTML is used for structure.
CSS is used for look and feel.
The meaning of the data should be obvious int he data itself.
[Image: spartaafk.png]
09-10-2005 09:12 PM
Profile PM Web Find Quote Report
« Next Oldest Return to Top Next Newest »


Threaded Mode | Linear Mode
View a Printable Version
Send this Thread to a Friend
Subscribe | Add to Favorites
Rate This Thread:

Forum Jump:

Forum Rules:
You cannot post new threads
You cannot post replies
You cannot post attachments
You can edit your posts
HTML is Off
myCode is On
Smilies are On
[img] Code is On