Needing advice on a website

HTML & CSS
1

Hello,

I used to be goodish at html, but I gave up for a year or two, but recently me and some friends decided to start a server on a game we like, and we would need a website for it. So far my friend made a good mock up on photo shop of the front page, as he is more creative than me ( http://i.imgur.com/pZ6JRdm.gif ) and I came up with this so far: http://prntscr.com/45jef9

I kind of got a bit stuck at this stage, as I only have a basic knowledge of html and css. If anyone could maybe help me with the positioning of the next steps that would be great!

For instance I need to figure out how to use margins instead of sizing the background, but when I did:

p {    margin-left:  1000px;  margin-right:1000px; }

It wouldn’t work, and I experimented putting it inside the body tag ect?

Thanks in advance

2

Are you trying to position the body picture to the center of the page? Do you have a live website where we can look at this? If you are trying to center an image to the center of the page, I would not use the <body> element, however create a <div> just inside the <body> element which encompasses the whole page, give that a width, such as 70% or something, and give it auto left and right margins, which will center at any screen resolution. You can place the background picture on that and you should’t have to mess with background positioning due to the fact the element is already centered.

3

Sorry I don’t have a live website :frowning: I know I should be using divs, but I don’t know how to code them or use them

4

Can you give us the full markup you are using at least? And full CSS. So we can recreate it :). We should be able to see what you’re trying to accomplish if we get the full code and look at it.

5

Okay, so the css code is:


body {
    background-image: url("background2.png"), url("background.jpg");
    background-repeat: repeat-y;
    background-size: 650px, 820px;
    background-position: center;
}
6

I have a recreated copy on my computer right now…I see what you have in your screenshot, and what your friend drew up. Seems to be on track right now, and you just need the content in place?

Your image has a ton of white space in it. I would crop the picture down to the bare minimal, aka the gray part. Just the image part you need. Then do something like this.

Also, I would recommend doing the image like x amount of pixels wide, and then 1px tall, and then repeat-y it. No need to have such a huge image file to load when CSS can just repeat the image.

Crop down the image to the gray part, do something like this, and since the image is placed on a center div, you shouldn’t have to mess with margins to center content.

<!DOCTYPE html><html>
<head>
<style type="text/css">
div#container
{
	background-image: url("asdf.png");
	backgroun-repeat: repeat-y;
	min-width: 500px; /*let's say the image is this wide*/
	width: 70%;
	margin:0 auto;
	height:400px; /* only here to help show the image*/
}
</style>
</head>
<body>
	<div id="container">
		<p>Text asdf asdf</p>
	</div>
</div>
</body>
</html>
7

Thanks!

This code looks much better than my old one. Just one question, how do I make the light grey background not as wide as the brick now?

8

I’m confused by your question, the entire light gray section and the bricks are part of an image. You’d have to change the image accordingly. Unless I misunderstood?

I’m still looking at your first post image of what you have created, where that entire thing is an image. Do you have an updated picture for me?

Edit-I’m sorry, I mislooked at your code. What are both images on the background? To be honest, you could just put the bricks on each side of the div (lets say the image for the bricks is 70px), give left/right padding of 70px to match the image and give the content room.

Then you can simply just put a gray background color on the div. Something like-

[COLOR=#333333]div#container[/COLOR]{
    background: #666666 url("bricks.png") repeat-y;
    min-width: 500px; /*let's say the image is this wide*/
    width: 70%;
    margin:0 auto;
padding: 0 70px;
    height:400px; /* only here to help show the image*/
}

You’d have to position the bricks on each side. I didn’t mess with that.

9

On the first picture, the entire thing is two images put together, the grey bricks and the grey background

10

I edited my above post, please read it :). Sorry.

11

No, that code doesn’t work. I am sorry but when you say some of these things I have no idea what you are saying? Can you please explain the padding property

12

Here you go. Do something like this

<!DOCTYPE html><html>
<head>
<style type="text/css">
div#container{
background: url("bricks.png"), url("bricks.png");
background-position: top left, top right;
background-repeat: repeat-y, repeat-y;
background-color: #999999;
min-width:500px;
width:70%;
margin:0 auto;
padding: 0 85px;
    height:400px; /* only here to help show the image*/
}
</style>
</head>
<body>
<div id="container">
<p>text</p>
</div>
</body>
</html>

Attached is the image for the bricks. Please wait for a moderator to approve the attachment.

13

Imagine a box in your head. A big square. Inside of that box, put text all around the box.

Padding is the area between the edge of the box, and the text. Which is where the bricks will go. That way text will not be affected or anything else. I’ve attached it in the previous post for you to tinker with. You can see in my example how the padding makes the text not overlap the bricks. You can mess with the padding values (go lower for the text to overlap the b ricks, higher for even more space from the bricks).

14

Hi,

If the gray is just a coloured background then don;t bother with an image (I couldn’t tell with the screenshot). Just create a brick effect on the body background and let the page container have the background colour. Just stretch it to full height.

Here’s a rough example:


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html, body {
	margin:0;
	padding:0;
	height:100%;
}
body {
	background:url(images/brick.jpg) repeat 0 0;
}
.outer {
	width:80%;
	margin:auto;
	min-height:100%;
	background:#d8d8d8;
	box-shadow:0 0 14px 8px rgba(0,0,0,0.3)
}
</style>
</head>

<body>
<div class="outer"></div>
</body>
</html>
15

Okay I got it all to work, but now the margins won’t work, the problem I had in the first place :frowning: whatever I put for the margins the background won’t register it.

16

What code are you using now? Pauls?

17

Yes, I couldn’t get yours to work :frowning: Here is a screenshot of it: http://prntscr.com/45l00v

CSS Code:


html, body {
	margin:0;
	padding:0;
	height:100%;
}
body {
	background:url(background.jpg);
}

.outer {
	width:80%;
        margin:auto;
	min-height:100%;
	background:#d8d8d8;
	box-shadow:0 0 14px 8px rgba(0,0,0,0.3)
}

HTML Code:


<!DOCTYPE html>
<html>

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

<body>
	<div class="outer">
		<p>Text asdf asdf</p>
	</div>
</body>

</html>
18

That looks perfect, what are you trying to use with margins? My demo on my setup works exactly as your image does. The only thing missing from your end would be my bricks.png I sliced up. No clue how it isn’t working on your setup.

The left and right auto margins are centering the gray box in hte middle of the screen. Vertical auto margins do not work in the same way. If you would set pixel values, then you would see it start to work.

19

I am trying to get the background centered in the page, but only taking up 60% of the screen

20

I think we may be talking at cross purposes here.:slight_smile:

If you set outer to 60% and use margin:auto it will center itself automatically just like my example.

If you look at my live example it s centered and has an 80% width. What else is it that you need different? I think this is the issue both Ryan and I are not understanding :slight_smile: