CSS/HTML : Little Help Please

pede · 10-20-2008, 05:30 PM

Hi Guys..

I am just now starting to study CSS. But I need to know how to do something if you would not mind, please.

I need to be able to have a header area like this: New Page 1

But I want it to go edge to edge like CSS. Even making a table at 100%, as you can see, it does not go edge to edge.

I want to have the header at the top, edge to edge and put an iframe at about 75% page width right under it.

Any suggestions would very much be appreciated.

Thank you,
John

Devan Koshal · 10-20-2008, 05:42 PM

right, thats not the right way to do it.

Word of advice (6 years web design experience here lol) - never use tables to structure a website.

Right for your website use this code

HTML Code:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>

<style>
body
{
background-image:url(images/header-background.jpg);
background-repeat: repeat-x;
background-position:top;
margin: 0 0 0 0;
}
</style>

</head>

<body>

WHAT EVER CONTENT HERE


</body>

</html>

ChristianM · 10-20-2008, 05:48 PM

What Devan says will work fine. But, I don't think a blanket statement like "never use tables to structure a website." is right - it is a perfectly adequate way to get a website up quickly so for people who only want a temporary site then I see no problem with it.

But, if you are learning to design websites then yes, don't use tables.

Devan Koshal · 10-20-2008, 05:50 PM

Quote:

Originally Posted by ChristianM

What Devan says will work fine. But, I don't think a blanket statement like "never use tables to structure a website." is right - it is a perfectly adequate way to get a website up quickly so for people who only want a temporary site then I see no problem with it.

But, if you are learning to design websites then yes, don't use tables.

Yeah if its just something quick tables are fine -

also ideally i would move that css code into a stylesheet.css file

pede · 10-20-2008, 05:55 PM

Great... could you please give me the html code to call the css file?

Thanks,
John

Devan Koshal · 10-20-2008, 05:57 PM

pede · 10-20-2008, 06:09 PM

Well... I put the code right above in an html file like this:

<link href="style.css" rel="stylesheet" type="text/css">

I put the css file in the same directory as the test4.html file,
named it style.css

When page loads, it is blank.

If I could just get this right the first time, I could take it from there.

Thanks for all your help,
John

Devan Koshal · 10-20-2008, 06:10 PM

It should be put in between the <head></head> tags.

Devan Koshal · 10-20-2008, 06:13 PM

Just had a look at your site page use just copy and paste this code.

Main Html Page

HTML Code:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<link href="style.css" rel="stylesheet" type="text/css"> 
</head>

<body>

WHAT EVER CONTENT HERE


</body>

</html>

style.css page

HTML Code:

body
{
background-image:url(images/header-background.jpg);
background-repeat: repeat-x;
background-position:top;
margin: 0 0 0 0;
}

pede · 10-20-2008, 06:22 PM

Something simple I am not doing right, must be.

Here is file that calls the css file:
http://bookmark50.com/test4.htm

Here is the code in the css file:
<style>
body
{
background-image:url(images/header-background.jpg);
background-repeat: repeat-y;
background-position:top;
margin: 0 0 0 0;
}
</style>

pede · 10-20-2008, 06:24 PM

Something simple I am not doing right, must be.

Here is file that calls the css file:
http://bookmark50.com/test4.htm

Here is the code in the css file:
<style>
body
{
background-image:url(images/header-background.jpg);
background-repeat: repeat-y;
background-position:top;
margin: 0 0 0 0;
}
</style>

pede · 10-20-2008, 06:25 PM

ok... let me do that

J

Devan Koshal · 10-20-2008, 06:25 PM

Quote:

Originally Posted by pede

Something simple I am not doing right, must be.

Here is file that calls the css file:
http://bookmark50.com/test4.htm

Here is the code in the css file:
<style>
body
{
background-image:url(images/header-background.jpg);
background-repeat: repeat-y;
background-position:top;
margin: 0 0 0 0;
}
</style>

remove the <style></style>

just have

body
{
background-image:url(images/header-background.jpg);
background-repeat: repeat-y;
background-position:top;
margin: 0 0 0 0;
}

in there

pede · 10-20-2008, 06:28 PM

Devan...

Have a look please....

New Page 1

Devan Koshal · 10-20-2008, 06:33 PM

Yeah that's right.

now for the content you will need a separate div id call it container, and ad a margin to that div to move it down so the text isnt over lapping the background.

pede · 10-20-2008, 06:39 PM

Your awesome....

Sent you a PM....

J

10-20-2008, 07:45 PM

Devan,
Hope you dont mind but that charset should be UTF-8

Code:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

James

10-20-2008, 05:30 PM	#1
pede Ancient Warrior War Room Member Join Date: Oct 2002 Location: Daytona Beach, Florida Posts: 433 Thanks: 18 Thanked 0 Times in 0 Posts Contact Info	CSS/HTML : Little Help Please Hi Guys.. I am just now starting to study CSS. But I need to know how to do something if you would not mind, please. I need to be able to have a header area like this: New Page 1 But I want it to go edge to edge like CSS. Even making a table at 100%, as you can see, it does not go edge to edge. I want to have the header at the top, edge to edge and put an iframe at about 75% page width right under it. Any suggestions would very much be appreciated. Thank you, John
	Classy Pewter

10-20-2008, 05:42 PM	#2
Devan Koshal Designer/Developer War Room Member Join Date: Sep 2008 Posts: 374 Thanks: 29 Thanked 12 Times in 10 Posts	Re: CSS/HTML : Little Help Please right, thats not the right way to do it. Word of advice (6 years web design experience here lol) - never use tables to structure a website. Right for your website use this code HTML Code: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>New Page 1</title> <style> body { background-image:url(images/header-background.jpg); background-repeat: repeat-x; background-position:top; margin: 0 0 0 0; } </style> </head> <body> WHAT EVER CONTENT HERE </body> </html>

10-20-2008, 05:48 PM	#3
ChristianM HyperActive Warrior Join Date: Oct 2007 Posts: 246 Thanks: 13 Thanked 4 Times in 4 Posts Social Networking	Re: CSS/HTML : Little Help Please What Devan says will work fine. But, I don't think a blanket statement like "never use tables to structure a website." is right - it is a perfectly adequate way to get a website up quickly so for people who only want a temporary site then I see no problem with it. But, if you are learning to design websites then yes, don't use tables.

10-20-2008, 05:55 PM	#5
pede Ancient Warrior War Room Member Join Date: Oct 2002 Location: Daytona Beach, Florida Posts: 433 Thanks: 18 Thanked 0 Times in 0 Posts Contact Info	Re: CSS/HTML : Little Help Please Great... could you please give me the html code to call the css file? Thanks, John
	Classy Pewter

10-20-2008, 05:57 PM	#6
Devan Koshal Designer/Developer War Room Member Join Date: Sep 2008 Posts: 374 Thanks: 29 Thanked 12 Times in 10 Posts	Re: CSS/HTML : Little Help Please <link href="LOCATION OF STYLESHEET" rel="stylesheet" type="text/css">

10-20-2008, 06:09 PM	#7
pede Ancient Warrior War Room Member Join Date: Oct 2002 Location: Daytona Beach, Florida Posts: 433 Thanks: 18 Thanked 0 Times in 0 Posts Contact Info	Re: CSS/HTML : Little Help Please Well... I put the code right above in an html file like this: <link href="style.css" rel="stylesheet" type="text/css"> I put the css file in the same directory as the test4.html file, named it style.css When page loads, it is blank. If I could just get this right the first time, I could take it from there. Thanks for all your help, John
	Classy Pewter

10-20-2008, 06:10 PM	#8
Devan Koshal Designer/Developer War Room Member Join Date: Sep 2008 Posts: 374 Thanks: 29 Thanked 12 Times in 10 Posts	Re: CSS/HTML : Little Help Please It should be put in between the <head></head> tags.

10-20-2008, 06:13 PM	#9
Devan Koshal Designer/Developer War Room Member Join Date: Sep 2008 Posts: 374 Thanks: 29 Thanked 12 Times in 10 Posts	Re: CSS/HTML : Little Help Please Just had a look at your site page use just copy and paste this code. Main Html Page HTML Code: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>New Page 1</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> WHAT EVER CONTENT HERE </body> </html> style.css page HTML Code: body { background-image:url(images/header-background.jpg); background-repeat: repeat-x; background-position:top; margin: 0 0 0 0; }

10-20-2008, 06:22 PM	#10
pede Ancient Warrior War Room Member Join Date: Oct 2002 Location: Daytona Beach, Florida Posts: 433 Thanks: 18 Thanked 0 Times in 0 Posts Contact Info	Re: CSS/HTML : Little Help Please Something simple I am not doing right, must be. Here is file that calls the css file: http://bookmark50.com/test4.htm Here is the code in the css file: <style> body { background-image:url(images/header-background.jpg); background-repeat: repeat-y; background-position:top; margin: 0 0 0 0; } </style>
	Classy Pewter

10-20-2008, 06:24 PM	#11
pede Ancient Warrior War Room Member Join Date: Oct 2002 Location: Daytona Beach, Florida Posts: 433 Thanks: 18 Thanked 0 Times in 0 Posts Contact Info	Re: CSS/HTML : Little Help Please Something simple I am not doing right, must be. Here is file that calls the css file: http://bookmark50.com/test4.htm Here is the code in the css file: <style> body { background-image:url(images/header-background.jpg); background-repeat: repeat-y; background-position:top; margin: 0 0 0 0; } </style>
	Classy Pewter

10-20-2008, 06:25 PM	#12
pede Ancient Warrior War Room Member Join Date: Oct 2002 Location: Daytona Beach, Florida Posts: 433 Thanks: 18 Thanked 0 Times in 0 Posts Contact Info	Re: CSS/HTML : Little Help Please ok... let me do that J
	Classy Pewter

10-20-2008, 06:28 PM	#14
pede Ancient Warrior War Room Member Join Date: Oct 2002 Location: Daytona Beach, Florida Posts: 433 Thanks: 18 Thanked 0 Times in 0 Posts Contact Info	Re: CSS/HTML : Little Help Please Devan... Have a look please.... New Page 1
	Classy Pewter

10-20-2008, 06:33 PM	#15
Devan Koshal Designer/Developer War Room Member Join Date: Sep 2008 Posts: 374 Thanks: 29 Thanked 12 Times in 10 Posts	Re: CSS/HTML : Little Help Please Yeah that's right. now for the content you will need a separate div id call it container, and ad a margin to that div to move it down so the text isnt over lapping the background.

10-20-2008, 06:39 PM	#16
pede Ancient Warrior War Room Member Join Date: Oct 2002 Location: Daytona Beach, Florida Posts: 433 Thanks: 18 Thanked 0 Times in 0 Posts Contact Info	Re: CSS/HTML : Little Help Please Your awesome.... Sent you a PM.... J
	Classy Pewter

10-20-2008, 07:45 PM	#17
TheRichJerksNet Guest Posts: n/a	Re: CSS/HTML : Little Help Please Devan, Hope you dont mind but that charset should be UTF-8 Code: <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> James
TheRichJerksNet Guest Posts: n/a