CSS Help

J

JOKER_JOKER

Limp Gawd
Joined
Nov 2, 2005
Messages
471
I was just paroosing the interwebs and I found this site that has the kind of format that I want. Here's a link: Link. What would I do to make it so that there is a page with a fixed pixel size, like this one, and a background that repeats to fill up the leftover space on your monitor? And while I'm at it, what would be good pixel sizes for a page like this?
 
JOKER_JOKER said:
I was just paroosing the interwebs and I found this site that has the kind of format that I want. Here's a link: Link. What would I do to make it so that there is a page with a fixed pixel size, like this one, and a background that repeats to fill up the leftover space on your monitor? And while I'm at it, what would be good pixel sizes for a page like this?
Click to expand...

I'm not sure I understood what you want, because that page has nothing special in it. The background image is repeated by the browser itself, No trick there. You just set it as the background and the browser will load that image and repeat it to fill the entire window and that's it.
Now if you want to fix a background image, meaning that even if there is a scroll, the image won't scroll, you need to do this:


Code: 
<body background="image.jpg" bgproperties="fixed">

About fixed page size, you mean the actual content of it (in the middle) ? That's also nothing special. My guess is it's a simple table aligned to the center, with fixed width.
To do that, you just need this


Code: 
<table align=center width=X>

I hope I understood what you meant, because that page really doesn't offer anything special or at least I'm not seeing it. If this is not what you wanted, please clarify it.
 
Or for a much nicer CSS solution:

Code: 
body {
	background: url('background.png');
	text-align: center;
	}

div#container {
	width: 760px;
	margin: 0 auto;
	text-align: left;
	}

Then put everything after your <body> tag inside <div id="container"></div>

760px is an OK choice for something like this.
 
well from a purely technical perspective, that page uses absolutely no CSS whatsoever. in fact the code is hopelessly bloated, woefully outdated and probably a nightmare to maintain.

in terms of what you would like to do, it's very simple. you make a small image consisting of "0110" in green on a black background. Make that image your background and the browser will automatically repeat it. for a consistent font size, it's far easier to do with CSS. put this inside the <head> tags
<style type="text/css">
body
{
background: url(/path/to/images/bgimage.jpg);
font-size: 12px;
}
</style>

however, fixed font sizes are a big no-no on today's web, you want most fonts to be scalable to accommodate different types of browsers and user preferences. also, an externally linked stylesheet makes site-wide changes a breeze.
 
I understand how to get the background image there, but how would I go about centering the <div> container on the page? I can't use a float, so what would I use? Or would I just use align="center" in the html file?
 
this depends on how you want to do go.. do you want to use CSS? or just plain old HTML?
Code: 
<head>
<style type="text/css">
.
.

#container
{
  width: 760px;
  margin: 20px auto; /*center the div with a margin of 20px at the top and bottom */
  border: 3px #0f0 solid; /*green border 3px thick
}
<style>
<head>
<body>
<div id="container">
<p>stuff</p>
</div>
</body>
 
IE requires text-align: center; in the body declaration in your CSS to center the container div.
Code: 
body {
	background: url('background.png');
	text-align: center;
	}
 
actually logik, you don't.

body (
margin: 0 auto 0 auto;
width: 700px;
)

that will give you a centered body of 700 pixels wide.
 
Fark_Maniac said:
actually logik, you don't.

body (
margin: 0 auto 0 auto;
width: 700px;
)

that will give you a centered body of 700 pixels wide.
Click to expand...

logik is right. IE6 and below doesn't understand auto.
 


Code: 
#wrapper
{	position:relative; 
	margin-left:auto; 
	margin-right:auto; 
	margin-bottom:0px; 
	width:700px; 
	height:700px; 
	background-color: #660000;
}
 
Thanks guys. But, what does putting "position: relative" and "margin: auto" do? Is "auto" the same thing as center?
 
This is what I use and it centers in IE6.
#wrapper {
position: relative;
margin-left: auto;
margin-right: auto;
width: 800px;
background-image: url(images/main_background.gif);
}

The margin auto is what centers it. Position: relative means that it positions the div relative to the other divs.
 
Fark_Maniac said:
Code: 
#wrapper
{	position:relative; 
	margin-left:auto; 
	margin-right:auto; 
	margin-bottom:0px; 
	width:700px; 
	height:700px; 
	background-color: #660000;
}
Click to expand...

it was probably fixed in a patch then, or you're not using a strict doctype. the IE problem with div centering was/is a very well known bug.
 
You must log in or register to reply here.
Back
Top