22 replies [Last post]
cssnewbie2010
cssnewbie2010's picture
Offline
newbie
Last seen: 9 years 12 weeks ago
Timezone: GMT+1
Joined: 2010-07-27
Posts: 3
Points: 4

Hi all,

I'm very new to CSS and am having real difficulty with positioning a menu and background image, as I want them.

What I have currently is a logo on the top left of my page with a DHTML horizontal menu directly below it in a table row. Currently centred on the page, but I will ideally be looking to extend the menu across the whole width of the page horizontal to divide the page header and body.

What I would like to do, is have a page background image which is only displayed below the menu. Above the menu, I want a simple white colour background.

I'm sure this must be fairly straight forward to achieve as it seems to feature on many websites, but I'm either looking in the wrong places or searching for the wrong thing as I just can't seem to find the solution anywhere.

I'd be extremely appreciative if someone could please give me some guidance around how to start the page background below the menu and not above it.

Many thanks

N

lukewakeford
lukewakeford's picture
Offline
Enthusiast
UK, West Sussex, Dorset
Last seen: 5 years 49 weeks ago
UK, West Sussex, Dorset
Joined: 2010-07-24
Posts: 71
Points: 84

Can you please post the HTML

Can you please post the HTML and CSS that you have written so far?

Try and move away from using tables if you can Smile

cssnewbie2010
cssnewbie2010's picture
Offline
newbie
Last seen: 9 years 12 weeks ago
Timezone: GMT+1
Joined: 2010-07-27
Posts: 3
Points: 4

Hi Luke, Thanks for your

Hi Luke,

Thanks for your comment.

Please find my code below:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Layout Test</title>
 
<style type="text/css">
<!--
body,td,th {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #6699FC;
	font-size: 9px;
}
body {
	background-image: url(clouds.jpg);
	background-repeat: no-repeat;
	background-position: 50% 46%;
	/*margin-left: 100px;
	margin-right: 100px;*/
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
 
-->
 
h2 {
	font-size:2.2em;
}
 
 
</style>
 
<link rel="stylesheet" type="text/css" href="pro_dropdown_2/pro_dropdown_2.css" />
 
<script src="pro_dropdown_2/stuHover.js" type="text/javascript"></script>
 
</head>
 
<body>
 
<center>
 
<table width="800" border="0" cellspacing="0" cellpadding="0">
<tr>
    <td align="left"><img src="logo.gif" width="220" height="87" align="left"></td>
</tr>
 
<tr>
	<td align="left">
 
	<ul id="nav">
		<li class="top"><a href="test1.shtml" class="top_link"><span>Test 1</span></a></li>
		<li class="top"><a href="test2.shtml" id="test2" class="top_link"><span>Test 2</span></a></li>
		<li class="top"><a href="test3.shtml" id="test3" class="top_link"><span>Test 3</span></a></li>
		<li class="top"><a href="test4.shtml" id="test4" class="top_link"><span>Test 4</span></a></li>
		<li class="top"><a href="test5.shtml" id="√5" class="top_link"><span>Test 5</span></a></li>
	</ul>
 
 
	</div>
    </td>
 </tr>
 
 
 
 
 
 
 
 
</body>
</html>

lukewakeford
lukewakeford's picture
Offline
Enthusiast
UK, West Sussex, Dorset
Last seen: 5 years 49 weeks ago
UK, West Sussex, Dorset
Joined: 2010-07-24
Posts: 71
Points: 84

Get Started

Okay,

So what you have so far is essentially 1 table with a few cells and a nice list of menu items Smile, the way people tend to build up CSS driven sites now is by defining a number of divs which are like the cells of the table except you can do much more with them.

What you want to do is build up a new HTML page linked to a external CSS using this bit of code > <link rel="stylesheet" href="style.css" type="text/css" />.

HTML (index.html)

<html>
 
<head>
<title>Hello World</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
 
<body>
 
<div class="canvas">
 
<div class="header">
 
<div class="logo"></div>
<div class="menu"></div>
 
</div>
 
<div class="content">
Hello World
</div>
 
<div class="footer"></div>
 
</div>
 
</body>
 
</html>

CSS (style.css)

body
{
background-color: #000000;
}
 
.canvas
{
width: 800px;
margin: 0 auto;
}
 
.header
{
width: 800px;
height: 200px;
background-color: #ffffff;
color: #000000
font-size: 15px;
}

I hope that gives you a bit of an idea of where to start, I would fill it out more but I should probably go to bed, I am surprised there are not any good tutorials on how to build simple css layouts.

Luke

Vade
Vade's picture
Offline
Enthusiast
Ireland
Last seen: 8 years 50 weeks ago
Ireland
Joined: 2007-08-13
Posts: 315
Points: 276

Luke it's great your trying

Luke it's great your trying to help the OP out but telling him to lay out everything in divs is almost as bad as using a table layout. The div should be used to separate the clear divisions of a page such as the header, columns or footers etc, putting every element in a div is needless.

What you need to do is write up your HTML and then style the tags you've used, if you've a navigation made from a ul then style the ul rather then placing it in a pointless div and so on and so forth

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 49 weeks 6 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

As Vade says use appropriate

As Vade says use appropriate html elements that reflect the underlying meaning of the content. If it's a paragraph use P, if you want to emphasise some text use EM, if it's a list use one of the list elements, and so on. Only use a DIV when you have to set some group of elements as a logical division of the page.

Menus are lists, so for a menu you mark it up with a list tag, generally UL.

Putting wrapping DIVS around some element is bad practice, a waste of bandwidth that will slow your site down, if only ever so slightly. Use CSS to address the meaningful elements directly.

This is known as "semantic" html and once learned is dead easy and will save you endless hours of frustration.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

lukewakeford
lukewakeford's picture
Offline
Enthusiast
UK, West Sussex, Dorset
Last seen: 5 years 49 weeks ago
UK, West Sussex, Dorset
Joined: 2010-07-24
Posts: 71
Points: 84

Didn't think that 6 divs for

Didn't think that 6 divs for one simple layout was to many but there you go.

Sorry.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 12 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

It's not that you're using

It's not that you're using too many elements, you're just not using the right ones. Search for DIVITIS and you'll find what we mean.

You also missed off the Doctype - I can't stress how important that is!

Verschwindende wrote:
  • CSS doesn't make pies

Vade
Vade's picture
Offline
Enthusiast
Ireland
Last seen: 8 years 50 weeks ago
Ireland
Joined: 2007-08-13
Posts: 315
Points: 276

Yes you can, stress

Yes you can, stress it..stress it!!!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 12 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

But I like my Firefox avatar,

But I like my Firefox avatar, I don't want to put my old one back up just yet Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

lukewakeford
lukewakeford's picture
Offline
Enthusiast
UK, West Sussex, Dorset
Last seen: 5 years 49 weeks ago
UK, West Sussex, Dorset
Joined: 2010-07-24
Posts: 71
Points: 84

I know, BUT if you are just

I know, BUT if you are just trying to get the basics down I would say don't bother until you are trying to validate it and put it online!

give people a chance to learn the easy stuff first.

Vade
Vade's picture
Offline
Enthusiast
Ireland
Last seen: 8 years 50 weeks ago
Ireland
Joined: 2007-08-13
Posts: 315
Points: 276

It won't even behave

It won't even behave correctly at a local level without a valid doctype, the doctype should be the first thing you enter, simple as.

lukewakeford
lukewakeford's picture
Offline
Enthusiast
UK, West Sussex, Dorset
Last seen: 5 years 49 weeks ago
UK, West Sussex, Dorset
Joined: 2010-07-24
Posts: 71
Points: 84

Vade wrote: It won't even

Vade wrote:

It won't even behave correctly at a local level without a valid doctype, the doctype should be the first thing you enter, simple as.

Fair enough, I guess I don't have experience of this! My site that I just had reviewed here in this forum did not have a doc type at all yet when I added one it didn't behave any differently apart from removing a few errors in validation.

Peace.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 49 weeks 6 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

lukewakeford wrote: Fair

lukewakeford wrote:

Fair enough, I guess I don't have experience of this! My site that I just had reviewed here in this forum did not have a doc type at all yet when I added one it didn't behave any differently apart from removing a few errors in validation.

Yeah? Have you looked at it in IE6 yet? Still a lot of people using that browser and you will be using quirks mode, which IE6 didn't do too terribly well.

We have posts in the "How to" forum here explaining why not using a doctype is a terribly bad idea, so maybe you will read them before making up your mind.

It's no skin of my neck if you don't, but it will waste you many hours of pointless frustration. Your pain, not ours.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

lukewakeford
lukewakeford's picture
Offline
Enthusiast
UK, West Sussex, Dorset
Last seen: 5 years 49 weeks ago
UK, West Sussex, Dorset
Joined: 2010-07-24
Posts: 71
Points: 84

Ed Seedhouse

Ed Seedhouse wrote:

Yeah? Have you looked at it in IE6 yet? Still a lot of people using that browser and you will be using quirks mode, which IE6 didn't do too terribly well.

We have posts in the "How to" forum here explaining why not using a doctype is a terribly bad idea, so maybe you will read them before making up your mind.

It's no skin of my neck if you don't, but it will waste you many hours of pointless frustration. Your pain, not ours.

Thanks Ed, Valid entry.

Wasn't expecting uproar, was just trying to help someone gather some basic CSS knowledge.

You can't honestly tell my that doctype was they very first thing you learnt when you started out with HTML and CSS.

Luke.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 49 weeks 6 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

lukewakeford][quote=Ed

lukewakeford][quote=Ed Seedhouse wrote:

You can't honestly tell my that doctype was they very first thing you learnt when you started out with HTML and CSS.

No it wasn't, to my cost. I'd like to save you some of that pain, you know? I didn't find this web site when I started with web pages, but you, luckily, have.

We insist on a proper doctype because that is really really important and not using one will hold you back and cause all sorts of trouble. You don't have to follow that advice, but not doing it will give you all sorts of trouble.

One of the skills that good learners have is taking advice when it is offered by skilled practicioners of the art they wish to learn. You came here, presumably, to get help and one of the kinds of help we've extended to you is to let you know that doctypes are extremely important. It's fair to question any advice, but just to reject it out of hand is not a skillful thing to do.

We've explained why to many many people over the years and we've left posts in prominent places that tell you why.

Save yourself trouble and learn to use standards triggering strict doctypes and to validate your html against that standard using the freely available html validators on the web. These are necessary because you are trying to use a standard, and the CSS standard only works properly for code that has a doctype and is validated to that doctype.

What you are trying to do is the equivalent of building a house without a foundation. You can do that, but you shouldn't be surprised then if the first big wind blows it away. It is that important.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 12 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

lukewakeford wrote: Wasn't

lukewakeford wrote:

Wasn't expecting uproar

Too late Laughing out loud Maybe I SHOULD bring back my old avatar ... although I seem to remember it causing a few problems ... Maybe it's time for a new one? A flashing USE A DOCTYPE PLS KTHXBYE gif?

Verschwindende wrote:
  • CSS doesn't make pies

lukewakeford
lukewakeford's picture
Offline
Enthusiast
UK, West Sussex, Dorset
Last seen: 5 years 49 weeks ago
UK, West Sussex, Dorset
Joined: 2010-07-24
Posts: 71
Points: 84

Ed Seedhouse wrote: What you

Ed Seedhouse wrote:

What you are trying to do is the equivalent of building a house without a foundation. You can do that, but you shouldn't be surprised then if the first big wind blows it away. It is that important.

Ed, I have taken your advice because I added a doctype to my website after it was reviewed on this website a few days ago!

What I am trying to explain to you the 'skilled practicioner of the art' is that you can't drop people in the deep end when learning HTML and CSS.. start with the basics and then introduce the Varification and doctype later.

thepineapplehead wrote:

Too late Laughing out loud Maybe I SHOULD bring back my old avatar ... although I seem to remember it causing a few problems ... Maybe it's time for a new one? A flashing USE A DOCTYPE PLS KTHXBYE gif?

If it will shut Ed up Tongue

Vade
Vade's picture
Offline
Enthusiast
Ireland
Last seen: 8 years 50 weeks ago
Ireland
Joined: 2007-08-13
Posts: 315
Points: 276

lukewakeford wrote: What I am

lukewakeford wrote:

What I am trying to explain to you the 'skilled practicioner of the art' is that you can't drop people in the deep end when learning HTML and CSS.. start with the basics and then introduce the Varification and doctype later.

Ed's point is that doctype is one of the basic things to know, no one expects you to be able to break down the DTD and know each of it components but you need to understand that without it your building on a foundation of glass.

Taking Ed's house analogy if you were teaching someone to build would you tell them put up all the walls, roof and windows first then go dig in a foundation and whatever breaks can be patched up?

Something like this will cause uproar every time it appears and it's in no way directed personally at you Luke but if you look through the history of this site you'll see oh so many issues cause by people not putting in a valid doctype. I know the first thing I do when I see anyone posting an issue is to check their DTD and validate the code.

On a side note I remember when this thread was about a background image Tongue

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 49 weeks 6 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

lukewakeford wrote: What I am

lukewakeford wrote:

What I am trying to explain to you the 'skilled practicioner of the art' is that you can't drop people in the deep end when learning HTML and CSS.. start with the basics and then introduce the Varification and doctype later.

Sorry, but a proper document type declaration and validating ARE the basics. That's what you are not getting. It should be learned first and understood BEFORE you attempt to code html. One of the main reasons beginners get into trouble is that they are not told this right away.

That of course, is mainly a failure on the part of the teachers for not sufficiently emphasising it right from the start.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 12 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

cssnewbie2010, are you still

cssnewbie2010, are you still here?

Verschwindende wrote:
  • CSS doesn't make pies

cssnewbie2010
cssnewbie2010's picture
Offline
newbie
Last seen: 9 years 12 weeks ago
Timezone: GMT+1
Joined: 2010-07-27
Posts: 3
Points: 4

I'm here

Hello all,

I hope you are well.

Please accept my apologies for the lack of response/involvement in this thread since my initial post. I have been away this last few weeks with no access to a PC.

Thank you to everyone for there replies. Quite clearly I have some work to do with regards to getting up to speed with CSS and how it should/shouldn't be used. I also hadn't realised the doc type was quite so important either, so thank you for making me aware of this.

So as a good route forward, where is the best place for me to go to learn the CSC basics as this would probably be the best thing for me?

Also, I have had a look here http://www.w3.org/QA/Tips/Doctype to leanr a bit more about the doctype, but I'm confused as to when I should use which doctype?

Thanks to you all for your patience, and I look forward to your response

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 49 weeks 6 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

ALWAYS use a doctype

ALWAYS use a doctype declaration, period. Put it on the VERY FIRST LINE of each html page.

Use a STRICT doctype allways for new pages. Prefer html 4.01 strict over xhtml 1.0 strict.

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

Is all you need, really.

VALIDATE to that doctype frequently, at least every few lines. If you don't have valid html then you may as well not use a doctype declaration at all.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.