Basic html/css - help with document size please.

RandomTom · 29 Apr 2006 at 13:25

Hello there, I've just been following a tutorial on html dog today and would just like a bit of help with the following:

The webpage I need a bit of help with

As you can see it's very basic but can you tell me what code is needed to set the width of the page to 800pixels, and how an auto-margin can be used so that it doesn't look too huge on 1024 or 800, thanks. Yeh at the moment it's all a bit over the place and i know that the submit would need php or a proper upload but that's just there because it is. Can anyone help? It's probably dead simple.

css file here!

Any help, comments and improvements appreciated.

Mr_L · 29 Apr 2006 at 13:43

There are two ways you could do this. The easiest one for now would be to change the margin attribute in the body selector to 0 auto and add in width: 800px;.

Or you could use the content div you have started for better control later on when you make changes. Like the following; -

CSS

Code:

#content {	
width:800px;	
text-align:left;
margin: [color=Yellow][b]0 auto[/b][/color];	
border-style: solid;	
border-width: 3px;	
border-left-width: 3px;	
border-right-width: 3px;	
border-color: white;
}

In the CSS I have moved all the attributes from the body selector , starting from after background, into the content selector. I have also changed the margin values. You might also want to add in padding: 0; here as well.

HTML

Code:

<html>
<head>
<title>Title.design</title>
<link rel="stylesheet" type="text/css" href="web.css" />
</head>
<body>
[b][color=Yellow] <div id="content">[/color][/b]

<!-- The rest of your content -->

[color=Yellow][b] </div>[/b][/color]
</body>
</html>

In the HTML code I have added in the <div id="content"> tag and also the closeing tag. I've highlighted all the changes I have made.

RandomTom · 29 Apr 2006 at 13:52

Thanks, you're a star!

My friend was trying to tell me how to use the div properly over msn but it just came out as a big mess, so thanks a lot for that

edit: link, thanks.

Sherbs · 29 Apr 2006 at 15:26

Awesome, glad your learning CSS

RandomTom · 30 Apr 2006 at 15:53

Hi, This is how my page is looking at the moment, I should try reduce the file and size of the banner just a bit but anyways, here we are:

My First CSS Page

Comments, critisism, help on anything all appreciated.

Sherbs · 30 Apr 2006 at 16:14

Awesome man, Its looking good

The CSS Seems perfect. Although you shouldn't really use the <h1></h1> like that.

RandomTom · 30 Apr 2006 at 16:19

I know I shouldn't but I can't figure out how else to do it without my header going screwed or just disappeared. I'm not sure what the exclamation mark means in the url but it's probably not good, I don't know why that is though, still a noob.

HTML - tentatively validates lol.

Sherbs · 30 Apr 2006 at 16:22

This thing

?

Have you not tried using an image tag then?

RandomTom · 30 Apr 2006 at 16:29

How do you mean, where abouts would I place those? in the div?

Sherbs · 30 Apr 2006 at 17:37

Try:

Code:

Replace:

<h1></h1>

with:

<img src="logo.png" alt="Welcome" />

robmiller · 30 Apr 2006 at 18:33

Try using:

Code:

<h1>The Name of the Site</h1>

Code:

h1 {
    width:720px;
    height:250px;
    text-indent:-5000px;
    overflow:hidden;
    background:transparent url(logo.png) no-repeat top left;
}

Google/screen-readers see the text, graphical browsers see the image, neither sees the other, thus the world is happy.

Sherbs · 30 Apr 2006 at 18:35

Surely the alt tag displays in screen readers?

robmiller · 30 Apr 2006 at 18:38

An h1 tag is weighted better than an image's alt text by search engines and is more semantically valid (it's a header after all), though.