CSS web design

login | register | shoutbox

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

formerly methos

Posts: 748
Reputation: 31
34 / Male

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

RaceProUK
Elite Member

Posts: 6073
Reputation: 57
39 / Male

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.

09-09-2005 09:16 PM

brian
Senior Member

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.

affordable web hosting

09-09-2005 09:19 PM

hmaster
Senior Member

Posts: 716
Reputation: 24
33 / Male

Joined: Nov 2004

RE: CSS web design

quote:
Originally posted by Methos2
(a fiver says hmaster replies... 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

This post was edited on 09-10-2005 at 11:02 AM by hmaster.

09-09-2005 09:35 PM

stoshrocket
Senior Member

formerly methos

Posts: 748
Reputation: 31
34 / Male

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

hmaster
Senior Member

Posts: 716
Reputation: 24
33 / Male

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.

09-10-2005 10:59 AM

RaceProUK
Elite Member

Posts: 6073
Reputation: 57
39 / Male

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.

09-10-2005 09:12 PM

« 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

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