CSS Site

Husky · Post by **Husky** » Sun Mar 22, 2009 9:10 pm

I just made a site out of scratch using GIMP and a txt document.

The txt document has the CSS code in it then I saved it as a html file.

After everything was the way I wanted it I tried pasting the CSS code in the CSS to site or whatever it's called on webs.com.

It didn't work, here's the CSS I made:

<pre>[font class="small">code:[/font]<hr> <html>

<head>

<title>Huskys Carmageddon</title>

<style type="text/css">

body

{

background-image: url('BackGround.png');

background-repeat: no-repeat

}

</style>

</head>

<body>

<div

style=position:absolute;left:0px>

<img src=PageTop.png/>

<div

style=position:absolute;top:137px>

<img src=CMainBar.png/>

<div

style=position:absolute;left:132px;top:4px>

<a href=http://huskyscarmageddon.webs.com/cars.htm><img src=CarsBar.png/></a>

<div

style=position:absolute;left:106px;top:0px>

<a href=http://huskyscarmageddon.webs.com/tracks.htm><img src=TracksBar.png/></a>

<div

style=position:absolute;left:106px;top:0px>

<a href=http://huskyscarmageddon.webs.com/pics.htm><img src=PicsBar.png/></a>

<div

style=position:absolute;left:106px;top:0px>

<a href=http://huskyscarmageddon.webs.com/links.htm><img src=LinksBar.png/></a>

<div

style=position:absolute;left:-425px;top:75px>

<b>Thanks for coming to my site, you can get or look at stuff I've made for Carmageddon by useing the bars above!</b>

<hr width=600px color=black>

<b>By clicking the cars tab you can find:

>

OzzyBuggy V.1

>

OzzyBuggy V.2

>

BoxMobile

>

RaceBox

>

RallyCar 1

>

RallyCar 2

<hr width=600px color=black>

By clicking the tracks tab you can find:

>

Beaver Town

>

Dakar PT.1

>

Brampton Raceway

>

Arlington Raceway

<hr width=600px color=black>

By clicking the Pics or Links tab you can find Pic or Links, duh!</b>

</body>

</html> </pre><hr>

Please help me, I worked hard on this!

Toshiba-3 · Post by **Toshiba-3** » Mon Mar 23, 2009 4:57 am

coffeycup · Post by **coffeycup** » Mon Mar 23, 2009 7:41 am

Umm, yeah. You're not really using CSS as intended. There isn't a single style declaration for the any of the fonts.

Aren't there literally millions of CSS tutorials out there on the web? Look at some examples and then explore external CSS once you understand what's going on.

Husky · Post by **Husky** » Mon Mar 23, 2009 12:02 pm

So your saying all visual stuff is CSS and links/page functions are html?

Also, I don't know where you added the ;

But I was using a few tutorials, one was a 36 minute long video that was really helpful, the other was the site http://www.w3schools.com/css/default.asp (Going to get the link I realized they had this, http://www.w3schools.com/html/default.asp )

I'm going to look in that last link for a while...

coffeycup · Post by **coffeycup** » Mon Mar 23, 2009 12:18 pm

Yeah, those links look good. Learn basic HTML first.

You'll notice that the CSS stuff is under 'advanced' category.

Husky · Post by **Husky** » Mon Mar 23, 2009 12:29 pm

So far I've read to formatting, it explains <sub>subscript</sub> and <sup>superscript.</sup>

(I don't think it'll work on a posting board)

I should probably read all of the stuff over again once I'm done reading it all.

juozas · Post by **juozas** » Mon Mar 23, 2009 1:38 pm

the general (most) thing in HTML is that some parameters must be enclosed into quotes, especially for those who has spaces or anything other. CSS code means code without any html tags and saved as [filename].css

read html and css tutorials to know more and know what the page you using needs. check http://www.w3schools.com/ for some useful tutorials and more.

coffeycup · Post by **coffeycup** » Mon Mar 23, 2009 6:16 pm

Well, I don't know how often you'll use a <sup> tag on your own stuff. But most of this stuff won't work on a posting board like this.

Anyway, for most people all you need to know a handful of tags to get by.

IMG - for images

A HREF - links

TABLE - for positioning

or

DIV - for positioning

Then use markup tags like on your text:

<H1> - large header

<H2> - Med header

<H3> -Smaller

<P> - body text

Then when you get around to doing your CSS you'll be able to control the look. H1 could be red, H2 a blue, etc.

<pre>[font class="small">code:[/font]<hr>

<html>

<head>

<title>HUSKY</title>

<style>

H1 {font:bold 24px arial;color:#FF0000;}

H2 {font:bold 18px arial;color:#0000FF;}

H3 {font:bold 16px arial;color:#009900;}

P {font:normal 12px arial;color:#000000;}

</style>

</head>

<body>

<H1>Header One</H1>

<P>First section here. First section here.>First section here.</P>

<H2>Header Two</H2>

<P>Second section here. Second section here.>Second section here. </P>

<H3>Header Three</H3>

<P>Third section here. Third section here.>Third section here.</P>

</body>

</html>

</pre><hr>

Razor · Post by **Razor** » Tue Mar 24, 2009 1:33 am

I can't stand using AP Div's because they have to be positioned absolutley on the page and when you're trying to cater for all screen resolutions, this is a bit of a kick in the nuts.

coffeycup · Post by **coffeycup** » Tue Mar 24, 2009 7:43 am

DIVS are the preferred way. They do not need to be absolutely positioned.

<pre>[font class="small">code:[/font]<hr> <html>

<head>

<title>Untitled</title>

<style>

body{background-color:#333333;font:12px arial;}

#wrapper {position:absolute;width:100%;height:100%;background-color:#666666;padding:4px;text-align:center}

#one {position:relative;width:98%;height:50%;background-color:#FFFF00;padding:6px;}

#two {position:relative;width:49%;height:50%;background-color:#FF0000;padding:6px;margin:2px;display:inline;}

#three {position:relative;width:49%;height:50%;background-color:#00FFFF;padding:6px;margin:2px;display:inline;}

</style>

</head>

<body>

<div id="wrapper">

<div id="one">DIV ONE</div>

<div id="two">DIV TWO</div>

<div id="three">DIV THREE</div>

</div>

</body>

</html>

</pre><hr>

The CWA Board

CSS Site

CSS Site

Post deleted by coffeycup

Re: CSS Site

Re: CSS Site

Re: CSS Site

Re: CSS Site

Re: CSS Site

Re: CSS Site

Re: CSS Site

Re: CSS Site

Check who’s online