Simple CSS?

Xodiaq · Feb 10, 2007

Just trying something out today with CSS

style.css

Code:

/**********/

CSS Style Sheet
Name:	1-point-0
by:	Chael McLean

/**********/


body {
	background-color: rgb(22,22,22);
	font-family: 'Trebuchet MS', Arial, Tahoma, sans-serif;
	font-size: 62.5%;
	color: rgb(90,90,90);
}


/*----------------------*/
/*	Sections	*/
/*----------------------*/ 


#header {
	background: url('http://site/header.jpg');
	background-color: rgb(22,22,22);
	width: 470px;
	height: 140px;
	padding-left: 75px;
	padding-right: 75px;
}

#page {
	width: 600px;
	background-color: rgb(22,22,22);
	margin: 0px 15% 15% 15%;
	overflow: hidden;
}

index.html

Code:

<html>
<head>
	<link rel="stylesheet" type="text/css" href="http://site.net/style.css" />
	<link rel="shortcut icon" href="http://site.net/icon.jpg" type="image/x-icon">
	<link rel="icon" href="http://site.net/icon.jpg" type="image/x-icon">
</head>

<body>
<div id="page">
	<div id="header">
	</div>
</div>
test

</body>
<html>

no luck, I get the 'test' message displaying with no padding, white backgrounds, and no header. whats the deal?

Rudy · Feb 10, 2007

For one thing, the test message wouldn't display with padding anyway because you left it outside of the div.

For colors, I'd suggest try using hex code (i.e. color=#111111).

Also, for calling file locations, I would just call the file from the local directory, and not give the whole url.. (i.e. if the image is located in the same directory as everything else, just call the image, and not everything else like the http://blah/blah)

No sure if any of this will help ...

Dan · Feb 10, 2007

Rudy said:
For one thing, the test message wouldn't display with padding anyway because you left it outside of the div.

Also, you can't leave DIV's blank (like <div></div>)). You need to put anything inside of it for it to work, like which is a space.

Matthew. · Feb 10, 2007

Dan said:
Also, you can't leave DIV's blank (like <div></div>)). You need to put anything inside of it for it to work, like which is a space.

Actually it will work as he has specified both a height and width.

For colors, I'd suggest try using hex code (i.e. color=#111111).

So would I, however CSS2 is going to recommend using RGB for all co lours and it can't hurt to start early

Xodiaq · Feb 10, 2007

well, ok, I releaze the text wouldnt be padded now, but what about the other things, I have scores of other Style sheets all using rgb, so that cant be it... as Matthew said, I specified height and width so it wont be blank.

Any other Ideas?

texasgamer · Feb 10, 2007

Maybe your text is there - but you just cant see it because it looks like both your background color and your text color are both shades of gray/black...?

try changing this as a test (will change the text color to white):
color: rgb(255,255,255);

Dan · Feb 10, 2007

Code:

<html>
<head>
	<link rel="stylesheet" type="text/css" href="http://site.net/style.css" />
	<link rel="shortcut icon" href="http://site.net/icon.jpg" type="image/x-icon">
	<link rel="icon" href="http://site.net/icon.jpg" type="image/x-icon">

<style type="text/css">
/**********/

CSS Style Sheet
Name:	1-point-0
by:	Chael McLean

/**********/


body {
	background-color: rgb(22,22,22);
	font-family: 'Trebuchet MS', Arial, Tahoma, sans-serif;
	font-size: 62.5%;
	color: rgb(90,90,90);
}


/*----------------------*/
/*	Sections	*/
/*----------------------*/ 


#header {
	background: url('http://site/header.jpg');
	background-color: rgb(22,22,22);
	width: 470px;
	height: 140px;
	padding-left: 75px;
	padding-right: 75px;
}

#page {
	width: 600px;
	background-color: rgb(22,22,22);
	margin: 0px 15% 15% 15%;
	overflow: hidden;
}
</style>

</head>

<body>
<div id="page">
	<div id="header">
	</div>
	test
</div>

</body>
<html>

(I think that's what you want.)

That works fine for me but the background and text colors are both very dark shades of gray. If you look really hard you can see the text in the div.

Xodiaq · Feb 10, 2007

Thanks for the help guys, I am starting to round the edges and get it into shape now. Just a quick question, what is the best what to position an element so that it is in the same place regardless of screen res or browser?

Simple CSS?

Established Member

Established Member

Buy my domains.VIP Member

VIP Member

Established Member

VIP Member

Buy my domains.VIP Member

Established Member

Similar threads

We're social

nftmintedfilm.com

WebbsPlumbing.com

WholesaleVapers.com

MyCamaro.Com

Benchtop.co

ExtremeWorx.com

Versi.net

eele.org

jnuw.com

AiPyx.com

Pinned

Appreciation

Agreement

Answers

Relevance

Reaction

Status

Feeling