CSS web design - Printable Version
-Shoutbox (https://shoutbox.menthix.net)
+-- Forum: MsgHelp Archive (/forumdisplay.php?fid=58)
+--- Forum: Skype & Technology (/forumdisplay.php?fid=9)
+---- Forum: Tech Talk (/forumdisplay.php?fid=17)
+----- Thread: CSS web design (/showthread.php?tid=50287)
CSS web design by stoshrocket on 09-09-2005 at 08:19 PM
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)
RE: CSS web design by RaceProUK on 09-09-2005 at 09:16 PM
code:Anyone else spot the complete lack of closing tags at the end? You need to close tags properly, so it all works properly.
<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::
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.
RE: CSS web design by brian on 09-09-2005 at 09:19 PM
Tables? ew.
Learn to use div's, they are the "RIGHT" way how to design.
RE: CSS web design by hmaster on 09-09-2005 at 09:35 PM
quote:
Originally posted by Methos2
(a fiver says hmaster replies... lol)
quote:true, tables are good for data though
Originally posted by brian
Tables? ew.
Learn to use div's, they are the "RIGHT" way how to design.
anyways:
code: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!
<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>
good luck
RE: CSS web design by stoshrocket on 09-10-2005 at 10:20 AM
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>
RE: CSS web design by hmaster on 09-10-2005 at 10:59 AM
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>
RE: CSS web design by RaceProUK on 09-10-2005 at 09:12 PM
quote:Depends on the desired application. If you want overlaid elements, use <DIV>s. If you want a more tabular structure, use <TABLE>.
Originally posted by brian
Tables? ew.
Learn to use div's, they are the "RIGHT" way how to design.
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.