Really need help... [Archive]

Robi

11-07-2012, 02:09 PM

This has been bugging me for a while..

Im making my own website and have a design in mind but every time I attempt it, I get really frustrated and end up giving up.

The basic design I want to endure is basically a background image with the content placed overtop with a white block through the center..

Something like this...

http://s11.postimage.org/p5uc1xf9b/hellppp.jpg (http://postimage.org/image/p5uc1xf9b/)

Can someone tell me what I need to make this (whether its css/html) and i even have dreamweaver but that piece of software annoys me...

any help will be appreciated!

Kieran

11-07-2012, 02:11 PM

CSS and HTML will cover this.

In your CSS you need the following:

Put a link to your image between the "".

body{background:url("../images/background.png") repeat;}
#wrapper{width:900px;height:100%;margin:0 auto 0 auto;background:#FFF;}

Then in your HTML you need to add this:

<body>
<div id="wrapper">
Your content here
</div>
</body>

Robi

11-07-2012, 02:28 PM

CSS and HTML will cover this.

In your CSS you need the following:

Put a link to your image between the "".

body{background:url("../images/background.png") repeat;}
#wrapper{width:900px;height:100%;margin:0 auto 0 auto;background:#FFF;}

Then in your HTML you need to add this:

<body>
<div id="wrapper">
Your content here
</div>
</body>

Hey, thanks for the reply.

I've never really got to grips with CSS before, how would I embed the CSS code into my HTML? I've tried to work around with it but nothing seems to be working as far.

Thanks

Kieran

11-07-2012, 02:34 PM

Well there are two methods, what I consider to be the clean and dirty method.

If its just a small amount of CSS you can do it this way and embed it all in to the HTML page.

<html>
<head>
<style>
body{background:url("../images/background.png") repeat;}
#wrapper{width:900px;height:100%;margin:0 auto 0 auto;background:#FFF;}
</style>
</head>

<body>
<div id="wrapper">
Your content here
</div>
</body>

</html>

However, I find this a bit messy so what I tend to do is keep all CSS to a file called build.css and then add this to the top of every HTML page:

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

<body>
<div id="wrapper">
Your content here
</div>
</body>

</html>

They both effectively do the same thing just one looks a lot neater than the other when viewing the source code :)

Robi

11-07-2012, 02:47 PM

I understand everything, I have tried to put both types of your CSS code into mine and nothing.. and I even copied your first example and then put the image in and still nothing... I have looked at everything, for some reason the background cant be found..

This is my code

<html>
<head>
<style>
body{background:url("Documents/MyWebsites/Website/images/background.png") repeat;}
#wrapper{width:900px;height:100%;margin:0 auto 0 auto;background:#FFF;}
</style>
</head>

<body>
<div id="wrapper">
Your content here
</div>
</body>

</html>

Any ideas? Feels like something so simple is always made complicated by myself.. sigh.

Kieran

11-07-2012, 02:53 PM

You don't need the whole Documents/MyWebsites bit. That's where your issue is.

It'll be

body{background:url("../images/background.png") repeat;}

Make sure you put the ../ in otherwise it won't reference the correct folder.

Robi

11-07-2012, 03:06 PM

:(

<html><head>
<style>
body{background:url("../images/background.png") repeat;}
#wrapper{width:900px;height:100%;margin:0 auto 0 auto;background:#FFF;}
</style>
</head>

<body>
<div id="wrapper">
Your content here
</div>
</body>

</html>

The background image is inside an images folder, inside "my website" folder which holds all of the code.

The image is called "background.png" and yet it still doesn't want to work...

Any ideas? :(

Kieran

11-07-2012, 03:07 PM

Give me a minute to write it up for you. Then you can reference it for what is different.

Robi

11-07-2012, 03:09 PM

Ok, thanks for your help.. even though it hasn't worked.. you are a star!

Kieran

11-07-2012, 03:13 PM

Here you go:

http://evaske.com/Habbox/Test%20Site.rar

Zuth

11-07-2012, 03:56 PM

May I suggest something, if you wona learn how to code, then watch this guys tutorials, this is where I learnt, he's a good teacher!

http://www.youtube.com/user/thenewboston?feature=results_main

http://thenewboston.org/

Robi

11-07-2012, 04:17 PM

Thank you so much! Turns up, it was a bloody image I was using all along.. it just wouldnt have it. I created a new background and it worked on my old code. Thank you so much for your help, I may come to Gatwick airport and kiss you.

Thanks Zuth, I will be sure to look at his XHTML videos :)

+rep

Kieran

11-07-2012, 04:41 PM

Haha. I do keep meaning to make some video tutorials for people on the basics. What sort of things would you like to see in tutorials?

Zuth

11-07-2012, 04:48 PM

Haha. I do keep meaning to make some video tutorials for people on the basics. What sort of things would you like to see in tutorials?

Well the only thing I struggle with is PHP as its hard to understand it! (I'm not too sure if you know too much PHP though?) Although some basic tutorials would be nice for beginners :)

Kieran

11-07-2012, 04:52 PM

Well the only thing I struggle with is PHP as its hard to understand it! (I'm not too sure if you know too much PHP though?) Although some basic tutorials would be nice for beginners :)

I know the basics. Enough to make a basic usersystem etc.

Robi

11-07-2012, 05:16 PM

You are a very good teacher to be fair, you explained it quite easy on the first post.. it's just my damn image was corrupt. I think just easy step by step instructions, some people who make tuts sometimes try to blast through the boring stuff (like file structure) .. I think by explaining what you did also can help a learner understand why you are doing such (for example the ../ thing you taught me)

:)

Zuth

11-07-2012, 05:17 PM

I know the basics. Enough to make a basic usersystem etc.

Well I wouldn't mind knowing how to make a basic usersystem :P

Kieran

11-07-2012, 05:28 PM

You are a very good teacher to be fair, you explained it quite easy on the first post.. it's just my damn image was corrupt. I think just easy step by step instructions, some people who make tuts sometimes try to blast through the boring stuff (like file structure) .. I think by explaining what you did also can help a learner understand why you are doing such (for example the ../ thing you taught me)

:)

Well I remember what it was like when I was learning. Having to look at hundreds of tutorials just to get things the way you want them because people only half explained certain points.