...

View Full Version : How many divs for this page. - We're getting there.



effpeetee
09-13-2007, 09:44 AM
Good morning!

www.exitfegs.co.uk

Looking at this site. How many div's should I use for this page. I am re-writing the page from scratch without reference to the original, but I am having a problem at this basic level. I am trying real hard to understand CSS at site design level.
Any help would be appreciated.

This is how I have started off.

#body
#wrapper{}
#main{}
#clock1{}
#clock2{}
#greet{}
#img{}
#footer{}
#list{}

Frank

ahallicks
09-13-2007, 10:07 AM
I'm not sure why you have a div called #body? It's not a great idea to call a div the same name as an element that already exists. If you want to reference the body tag you don't need the # as it's not an id of anything.

As for the others, looks like you have about as many as you need. A wrapper, a header?, a navigation section (which I presume is #list?), a 'content' section, and a footer. Then you may need some for the parts in the middle.

effpeetee
09-13-2007, 10:57 AM
HI THERE.

I must admit I thought of that but I had seen a div called this and since the last post I find that it is in my original page. Don't know how it got there.

I'll remove it. I decided not to start with a supplied model page as I have found that I don't learn well that way. I am taking your earlier advice and starting with a blank page. The only problem that I foresee is the Greeting and the two clocks. They come from the Javascript as does the random image.
Should be fun though.

In at the deep end.

Frank

felgall
09-13-2007, 11:01 AM
Write the content using semantic HTML without divs first. Style the page as much as you can by adding ids and classes to the existing semantic tags. Ad only those divs that actually represent proper divisions within the page (their semantic use) plus as few as possible to allow you to apply the rest of the needed styles.

Many people who have recovered from table-itis catch div-itis straight afterwards. Using divs where they are not needed is just as bad as using tables where they are not needed.

effpeetee
09-13-2007, 12:16 PM
#body
{ margin: 0px; padding: 0px;
display: inline-block;
background-color: #bbb;
color:white; }

ahallicks. If I remove this from my original index page
www.exitfegs.co.uk
The result is not acceptable. Where should these attributes go. There is also another css entry body. Quite confusing.

Stephen. and ahallicks.
I am finding all very confusing at the moment. Going to my original page (which was re-written for me) and modifying the settings does not seem to have any relation to what I think they should do. I think I will have to settle for something simpler at present, until I get a feel for it. Your help is most appreciated. It is more difficult than I first thought.

Frank

ahallicks
09-13-2007, 12:47 PM
According to my browser #body does not appear anywhere on your index page? I've used EditCSS to remove it and nothing changes? Are you sure you're working on the correct page/have the most up-to-date one uploaded?

You seem to have a lot of redundant styles in your stylesheet that don't appear to be used anywhere. As well as that you have a few validation errors (including the vlink, alink etc on the body tag?) that need fixing and you need to find a basic layout for your page that you like and can start with. At the moment it really does look (and is probably the case) as though you have just stuck bits in and positioned them until they work. I'm not having a go at all because I know that you are new to this and it takes time. Here is what I suggest:

Get a blank canvas. Add in the doctype and all of the elements that make up a basic (X)HTML page so that you have a nice template to start from. Add some content to the page in the structure you want. For example, your site has a header and navigation and content and footer, so stick some content in for each of these sections. Now, divide the page as you weant it. A head in a div, the navigation in a div etc. And wrap the whole thing in another containing div. As an example I have a VERY simple page here that you can copy and paste to preview:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Simple Div Layout</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}

html {
color: #FFFFFF;
background: #CCCCCC;
font: 11px Tahoma, Verdana, Arial, "times New Roman", sans-serif;
}

#wrapper {
width: 766px;
height: auto;
margin: 10px auto;
overflow: hidden;
}

#header {
width: 766px;
height: 100px;
background: #990000;
margin-bottom: 10px;
}

#leftnav {
width: 250px;
height: 500px;
background: #990000;
float: left;
margin-right: 10px;
}

#content {
width: 506px;
height: 500px;
background: #990000;
float: left;
}

#footer {
width: 766px;
height: 80px;
float: left;
background: #990000;
margin-top: 10px;
}

</style>

</head>

<body>

<div id="wrapper">

<div id="header">
A Header
</div>

<div id="leftnav">
Navigation
</div>

<div id="content">
Content
</div>

<div id="footer">
Footer
</div>

</div>
</body>
</html>


I have no design skills whatsoever, but the ability to do this in CSS is something that is invaluable to know. Look at it and play with it and see what happens. I'm sure I've said this before but I'm going to reiterate the point because it really is one of the best ways to go.

After you can create a nice little layout like this you can then build on it adding paragraphs, images, lists and all the other content and style elements that make your page look and read really good.

effpeetee
09-13-2007, 01:51 PM
http://www.exitfegs.co.uk/testindex.html

This is where I have put the file.
I have altered the size. I have also called up the javascript include.js, but I do not know what to do to call it up. Can you help. Not necessilarily in detail, but I have no idea at this stage.

Frank

last part of js code;


window.onload = function() {
showimage();
GetClock();
}
}

function greet() {
var todaydate = new Date();
var timeis = todaydate.getTime();
todaydate.setTime(timeis);
var houris = todaydate.getHours();
if (houris >17) display = "Evening";
else if (houris >11) display = "Afternoon";
else display = "Morning";
var title = document.title;
var welcome = document.createTextNode("Good " + display + ". Welcome to the Taylor Website");
document.getElementById('greet').appendChild(welcome);
}

ahallicks
09-13-2007, 02:59 PM
You'll need:

<script type="text/javascript" src="include.js"></script> in your header to start with

effpeetee
09-13-2007, 03:52 PM
You'll need:

<script type="text/javascript" src="include.js"></script> in your header to start with
Hello again.

I've done that and tried to alter the colour and position of the greeting. Nothing that I do seems to work.
I feel like an experienced driver who has got into a car where nothing does what I expect it to do. Can you just help me with the header/greeting for the moment. It should be centred and h1 red.

Frank

http://www.exitfegs.co.uk/testindex.html

ahallicks
09-13-2007, 03:59 PM
Okay, first change:



#header {
width: 1000px;
height: 50px;
background: #990000;
margin-bottom: 10px;
}

#header h1
{ color:#ffffff;
text-align: center;}


to



h1#header {
width: 1000px;
height: 50px;
text-align: center;
backgound-color: #990000;
}


And then your HTML should be something like:



<h1 id="header">
<script type="text/javascript">
greet();
</script>
</h1>


Try that and see what happens

effpeetee
09-13-2007, 04:19 PM
The header has disappeared altogether.

Frank

http://www.exitfegs.co.uk/testindex.html

ahallicks
09-13-2007, 04:57 PM
The top of your page should look like:



<body>

<div id="wrapper">

<div id="header">
<h1 id="mainheader">
<script type="text/javascript">
greet();
</script>
</h1>
</div>


Don't worry about the clockboxes for now. With this, use the following CSS (it was a typo, so my mistake :rolleyes: )



#header {
width: 1000px;
height: 50px;
background: #990000;
}

#header h1 {
text-align: center;
color: #FFFFFF;
}


Okay, I'll just post the whole code as I have it. I don't have the greet js so can't test that though, sorry!


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>The Frank and Steve Taylor Family website.</title>
<script type="text/javascript" src="include.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">
* {
padding: 0;
margin: 0;
}

html {
color: #FFFFFF;
background: #CCCCCC;
font: 11px Tahoma, Verdana, Arial, "times New Roman", sans-serif;
}

#wrapper {
width: 1000px;
height: auto;
margin: 10px auto;
overflow: hidden;
}

#header {
width: 1000px;
height: 50px;
background-color: #990000;
margin-bottom: 10px;
}

h1#greet {
color:#ffffff;
padding-top: 10px;
text-align: center;
}

#leftnav {
width: 250px;
height: 500px;
background: #dddddd;
float: left;
margin-right: 10px;
}

#content {
width: 740px;
height: 500px;
background: #990000;
float: left;
}

#footer {
width: 1000px;
height: 80px;
float: left;
background: #990000;
margin-top: 10px;
}

#imgcaption {
text-align: center;
color: #0FF;
font-size:1.0em;
}

#links {
clear: left;
color: white;
font: 12px Georgia, "Times New Roman", Times, serif;
}

#links ul {
color: #000;
list-style: none;
}

#links ul a {
color: #000;
font-size:1.2em;
font-weight: normal;
text-decoration: none;
}

#links ul a:hover {
text-decoration: underline;
}

</style>

</head>

<body>

<div id="wrapper">

<div id="header">
<h1 id="greet">
<script type="text/javascript">
greet();
</script>
</h1>
</div>

<div id="leftnav">
<div id="links">
<ul>
<li><a href="two.html">Betty and Frank.</a></li>

<li><a href="three.html">Little Ted and Dmitri.</a></li>
<li><a href="four.html">Lovely Betty and Pussycat.</a></li>
<li><a href="five.html">Betty and the Bears.</a></li>
<li><a href="seven.html">Steven and Joyce and Mark.</a></li>
<li><a href="twelve.html">Ritcroft family group.</a></li>
<li><a href="Eddie.html">Eddie, relaxing at home.</a></li>

<li><a href="Bluebell1.html">Steven at ease.</a></li>
<li><a href="Steveintrain.html">Steve on the Bluebell Line.</a></li>
<li><a href="steveviewing.html">Steve at the box.</a></li>
<li><a href="dadatpub.html">'Smile please' (your actual effpeetee)</a></li>
<li><a href="Barker.html">Claire, Yvonne and Susan.</a></li>
<li><a href="xmas2006.html">Christmas 2006 at Yvonne's.</a></li>

<li><a href="nine.html">Family photos.</a></li>
<li><a href="hol1.html">Holiday snaps.</a></li>
<li><a href="LittleBoyBlue.html">Little Boy Blue</a></li>
<li><a href="Tarantella.html">Do you remember an inn.</a></li>
<li>(One of Betty's favourite poems.)</li>
</ul><br />

<ul>
<li><a href="Picchoose.html">Picture menu - complete.</a></li>
<li><a href="Picchoosea.html">Picture menu part 1.</a></li>
<li><a href="Picchooseb.html">Picture menu part 2.</a></li>
<li><a href="Picchoosec.html">Picture menu part 3.</a></li>
<li><a href="steve.html">Steven.</a></li>
<li><a href="aaind.html">Random pictures - full screen. Use F11.</a></li>
</ul>
</div>
</div>

<div id="footer">
I am not quite sure what I'll put
</div>

</div>

</body>
</html>


2: Okay, maybe I downloaded your javascript and tested it with that too ;) The above should be what you are looking fro Frank. Hope it works, unlike my brain today!

effpeetee
09-13-2007, 05:37 PM
That's a lot better.

I aim to tighten the page up so that it does not need to scroll.
I am willing to forego the clocks although I would rather keep them if the design seems right. As the random picture can be held and enlarged by the user; it would be OK to make the original image a bit smaller.

I am really trying to feel easy with CSS. It's hard going for an 82 year old.
Never say die!

Frank (Tomorrow is my birthday)

http://www.exitfegs.co.uk/testindex.html

effpeetee
09-14-2007, 11:23 AM
Found it!

#links ul
{ margin: 0;
padding-left:20px;
color: white;
list-style: none; }

I had put - padding:0,0,0,20px; which didn't work

==============================================
I have largely succeeded with reorganising my index page. But I do have a problem with the blue rounded box. I need to centre the text. Padding does not seem to work. I'm probably going at it wrong.



Frank
www.exitfegs.co.uk

ahallicks
09-14-2007, 12:19 PM
That page is a little messed up in my firefox... the blue navigation section is below the content on the right? As for the UL, I take it you don't want the actual text centered, you just one everything shifted in to the center? If this is the case, then padding is probably the best way to go about this.

Add this to the CSS:



#links ul li {
padding-left: 20px;
}


Oh, and the reason padding:0,0,0,20px; didn't work is because you don't separate with commas, it should look like padding: 0 0 0 20px; ;)

HAPPY BIRTHDAY FRANK!

effpeetee
09-14-2007, 12:23 PM
The original page displayed correctly with IE7 , not with Firefox. NOW RESOLVED.
Goto this page to continue the story.

Frank

Have done that now.
I forgot to try it with Firefox. But it still doesn't look good.

Frank

Thanks for the good wishes.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum