...

View Full Version : Background help



Vapor
08-30-2005, 04:09 PM
I am desiging a site and I discovered that I like the background to this site (http://www.phantasia4.com). My question is, How can I get a background similar to this? Is it a simple html code, or is it a graphic linked to the site?

If it is a code, could I get a little help from anyone on the code?

Thanks,
Vapor

mikebaldam
08-30-2005, 04:15 PM
Your link may need to be looked at again...

the site linked just has a plain background...? please explain in more detail.

I guess its one page in particular off the link rarther than the home page..?

Cheers

Mike :confused:

Vapor
08-30-2005, 04:22 PM
No,

The homepage does not have a plain background.
It has a gray colored background with a box that has black strips and a darker gray on top.

How do you create that?

Spudhead
08-30-2005, 04:38 PM
Right-click -> View Source

It's a 3-column table, with CSS classes applied to each cell. So: not images. HTML.

Try this if you're still confused. It's ugly code but it works. Well, in IE.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>

<style type="text/css">
body{
margin:0;
padding:0;
}
.sidecolumn{
background-color:#990000;
}
.middlecolumn{
background-color:#000099;
}
</style>

</head>

<body>

<table cellpadding="0" cellspacing="0" border="0" width="100%" height="100%">
<tr>
<td class="sidecolumn" width="10%">&nbsp;</td>
<td class="middlecolumn" width="80%" align="center" valign="middle">Content blah blah</td>
<td class="sidecolumn" width="10%">&nbsp;</td>
</tr>
</table>

</body>
</html>

NancyJ
08-30-2005, 04:47 PM
The site uses tables but its just as easy in CSS.

give your background a mid grey background

then make a second container approx 95% in width with a black background and a 1px pale grey border

Then inside there make a 60% wide box thats darker than your main page grey and lighter than black and thats where your content goes.



<html>
<head>
<style>
body{
background-color:#666;
}

#container{
border:1px solid #CCC;
width:95%;
background-color:#000;
margin:auto;
}

#main{
background-color:#333;
width:60%;
padding:5px;
margin:auto;

}
</style>
</head>
<body>
<div id = "container"><div id = "main">&nbsp;</div></div>
</body>


btw, I made the colours up

Vapor
08-30-2005, 04:49 PM
Thank you very much! That is all that I wanted! I will tweek the code around a bit to fit my needs.

Thanks again!

Vapor
08-30-2005, 10:47 PM
NancyJ,

I have a question.

In the last code that you posted, how can I pull that colored bar down and place text on top of it like the example site I posted.

I can't seem to figure it out.

THanks

flann
08-30-2005, 11:02 PM
try z-index:0; for the bottom part, and z-index:1; for the top portion. I think this is what you are asking about.

Vapor
08-30-2005, 11:12 PM
? I don't understand

Vapor
08-30-2005, 11:14 PM
I figured out how to resize the color portion of the box but I can not for the life of me figure out how to place text on TOP of the colored portions. It either puts my text above or below.

Any help?

NancyJ
08-30-2005, 11:17 PM
NancyJ,

I have a question.

In the last code that you posted, how can I pull that colored bar down and place text on top of it like the example site I posted.

I can't seem to figure it out.

THanks
not sure I understand what you're asking?
To type on top of the middle bar, just type in the #main div and set the color: to something readable

Vapor
08-30-2005, 11:22 PM
Sorry about that, my description skill lack desire somethings. What I was asking was how to resize that bar. I did figure that out, but what I can not figure out is how to place text on top of the background. It either places the text above or below the background that has been created. The background does me no good if it is not behind the text.

Here is the code:


<html>
<head>

<style>
body{
background-color:#666;
}

#side1{
border:1px solid #CCC;
height: 90px;
background-color:#000;
margin:auto;
}

#main{
background-color:#333;
width: 88px;
height: 1000%;
padding:5px;
margin:auto;
}

</style>
</head>
<body>
<font color="red">
<div id = "side1"><div id = "main">&nbsp;</div></div>
</font>
</body>
</html>

Now where do I insert the text to be on top?

_Aerospace_Eng_
08-30-2005, 11:28 PM
Replace &nbsp; with your text.

Vapor
08-30-2005, 11:32 PM
I did that but then when I do it starts resizing my colored background to conform to my text. I want the background to stay locked in place but it wont do that.

I know there has to be a way.

...but how?

_Aerospace_Eng_
08-30-2005, 11:36 PM
It doesn't resize.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<style>
body{
background-color:#666;
}

#side1{
border:1px solid #CCC;
height: 90px;
background-color:#000;
margin:auto;
color:#FF0000;
}

#main{
background-color:#333;
width: 88px;
padding:5px;
margin:auto;
}

</style>
</head>
<body>
<div id="side1"><div id="main">This is text</div></div>
</body>
</html>
If you put in more text than its width then yeah it might resize in height.

NancyJ
08-30-2005, 11:39 PM
can you show us a link of what is happening? and if you can, amaybe a little diagram of what you want it to look like

Vapor
08-31-2005, 12:05 AM
Good Idea NancyJ.

Ok, this is what I really want the out come of everything to be

I want my site background to look like this (http://www.phantasia4.com) Only the background though.

THEN

I want this banner ON TOP of the background


<html>
<head>
<style type="text/css">
@import url(company.css);
h1 { background color: #330000; color: orange; font-family: impact }
p { font-family: papyrus, sans-serif }

a { text-decoration: none }
b { font-size: 15pt; line-height: 20pt }
p.1 { font-size: 30pt; color: green }
p.2 {
margin-top: -52px;
margin-left: 0px;
color: green;
font-size: 28pt;
font-weight: bold;
}
#test { background-color: #330000; height: 90px }
</style>

<body>
<div id="test">
<p class="1">Members</p>
<p class="2">Login</p>
</div>
</body>
</head>
</html>

THEN I want to be able to place my own text BETWEEN the two dark side bars and not have the color within the table resize around my text.

Could someone test this and see if it is possible? I sure as heck have spent hours trying to figure it out.

Please help.

Vapor
08-31-2005, 01:18 AM
Ha! You know what! I fixed it myself everyone! Thank you for your help!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum