PDA

View Full Version : More on positioning with CSS



effpeetee
May 3rd, 2007, 12:47 PM
Having successfully overcome my previous problem, thanks to the help from the good folks of this forum: I would like to continue with the positioning of my main image using CSS. This is at present randomly selected using a Javascript routine which is positioned externally using HTML.

I am trying to bring my website up to date, although it works fine as it is.

Any help gratefully received.

effpeetee

www.exitfegs.co.uk

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

VIPStephan
May 3rd, 2007, 01:54 PM
OK, the title of your post shows that you see it a little too superficially yet. Positioning with CSS is more than just positioning with CSS. The real advantage/beauty of CSS come into its own in conjunction with semantic HTML (http://brainstormsandraves.com/articles/semantics/structure/) code (I should write an auto responder for that, haha) - I canít repeat this often enough.

While Iím glad to see no tables in your code itís lacking a clean structure yet. You can start by using only lowercase characters for your HTML and not mix upper and lower case in your elements. This will be a step towards clean and future proof code (should you decide to convert to XHTML at some point). Then divide your document into logical sections, using the division element. There are different approaches. The way Iím going is to divide the page into three general sections: header, content, footer, and putting those into a container element:



<div id="container">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>


Iím putting the title of the page and usually the main navigation in the header, even if Iím going to have a vertical navigation on the side. With CSS all this can be achieved later on without changing the HTML.

In your case with all the family links to the left you can actually put this in the content section, and after the main content for structural reasons (search engines will pick up the main content first, potential visitors without stylesheet support will see/hear the main content at first).
In fact, this list with the family links should actually be a list (<ul>), but I guess you know already after having read the article I linked above (you have, havenít you? You should have! :) ).

After, and only after youíve sorted out the HTML you can start styling this content with CSS. Look at the CSS Zen Garden (http://csszengarden.com) to see how the pros are going at it and look into Bon Rougeís great website (http://bonrouge.com), and especially the CSS layouts (http://bonrouge.com/2c-hf-fluid.php).

Good luck. :)

P.S.: With semantic code not only the beauty of CSS comes into its own but also the advantage of JavaScript in form of unobstrusive JavaScript (http://onlinetools.org/articles/unobtrusivejavascript/index.html) - scripts that wonít decrease usability if one has JS disabled but degrade nicely.

effpeetee
May 3rd, 2007, 02:42 PM
Thank you. I did not mean to be flippant. I do realise that using CSS is more than just an alternative to tables. I do read all the links that are given to me and I thank you for them. They are valuable.

I have my time tested techniques for learning. I learn fastest when I can see an example of working practice first. I then like to play about with it, learning as much from my mistakes as my successes.

I usually dive in at the deep end first and then learn to swim. Silly maybe; but it works for me. Reading is a problem as my eyes insist on behaving as their true age, so I do most of my learning at the keyboard.

What I was wondering specifically was:- Does the <Div id=""> already include the call to Indmain.js which selects the picture. Or will I need another id.

Forgive my ignorance.

effpeetee

PS
The two CSS books that I own are:

Professional CSS by Christopher Schmitt and co authors, and

Sams "Teach yourself CSS in 24 Hours.

(He must be joking!)

by Kynn Bartlett

VIPStephan
May 3rd, 2007, 07:25 PM
Hey, you donít have to excuse yourself for not knowing some things. Weíre all learning for our enitre life (I guess you can tellÖ ;)). I donít know many things either (which some guys might tell when they see my JavaScript example below :o ) and Iím learning new things every day. Youíre showing a deep interest in things and seem to be patient so no question is basic enough to not be answered.

I know that reading a lot of stuff can be quite boring and Iíve read that many people donít like to read off a screen.
Iíve never owned a book about CSS and have learned most things by studying sites (http://csszengarden.com and related) and by trying and making errors - and by seeing other people make errors here. :D So donít worry, if you continue to be interested youíll become really good in no time (with enough experience and routine).

CSS based layout techniques and styling is a very comlex topic and canít be learned in a day. You might be able to learn how to format text but real semantic layouts with CSS are damn hard to learn/create (especially complex cross-browser conforming layouts), even for the pros.

Iíve put up a very basic example (http://www.primacom.net/~k6531190/test) of what I meant with semantic HTML and unobstrusive JavaScript. Those borders you see there are just to outline the different sections and how floats and clearing floats are/is affecting those sections.

Youíll notice that the image script isnít where it used to be. This shows that you donít need to put empty meaningless elements (like the ones youíre using for the timers) in your source code because with the document object model (DOM) you can put new elements in your HTML and influence existing ones through JavaScript. Also empty elements are the complete contrary to semantic code because they donít have a meaning (What is an empty division dividing?).
There are cases where itís unavoidable to put additional elements for stylistic purposes but I wonít get into that here.

Hereís the important part of the script. Iíve trimmed the array stuff down here to make it shorter. Iím sure there are better ways to achieve the desired effect but my knowledge of JS is yet growing. You can obtain the full script at the above location (link).



if(document.getElementById && document.createTextNode) {
var r_text = new Array ();
r_text[0] = " 1 - Steven relaxing on the Watercress Line.";
r_text[1] = " 2 - The Museum of the Tolpuddle Martyrs, Dorchester, Dorset.";
Ö
r_text[105] = "106 - George Street Hove - April 2007";
r_text[106] = "107 - The Magic Cafe - Oxford.";

var r_hyperlink = new Array();
r_hyperlink[0] = "1.html";
r_hyperlink[1] = "2.html";
Ö
r_hyperlink[105] = "107.html";
r_hyperlink[106] = "108.html";

function showimage() {
var i = Math.round(r_text.length*Math.random());
var img_rnd = new Array ("http://www.exitfegs.co.uk/Steve6.jpg", "http://www.exitfegs.co.uk/1.jpg", "http://www.exitfegs.co.uk/2.jpg", "http://www.exitfegs.co.uk/3.jpg", Ö "http://www.exitfegs.co.uk/Hove2007.jpg", "http://www.exitfegs.co.uk/108.jpg");

var p = document.getElementById('imgcaption');
var br = document.createElement('br');
var new_img = document.createElement('img');
var new_link = document.createElement('a');

// this adds the anchor
var imagelink = p.appendChild(new_link);
p.firstChild.nodeValue = r_text[i];
p.insertBefore(br,p.childNodes[1]); // adding a line break before the anchor so the image will be underneath the text
imagelink.setAttribute('href', r_hyperlink[i]);
imagelink.setAttribute('class','previewlink');

// this adds the image within the anchor
var img = imagelink.appendChild(new_img);
img.setAttribute('src', img_rnd[i]);
img.setAttribute('class','previewimage');
}
window.onload = function() {
showimage();
}
}


The first thing Iíve changed was this:


var i = Math.round(r_text.length*Math.random());

so you donít have to put the number in manually but it looks how long the array is (how many items itís got).

You see that Iíve created a new function after all the array variables. his is where the script is adding an anchor and the image. All this is added in the paragraph with the ID ďimgcaptionĒ where by default is a JavaScript warning (for now). Iíd recommend you to put a link to an image gallery that doesnít require JavaScript for those that donít have JS enabled. This is the prupose of unobstrusive JavaScript: you have a basic HTML version and add JavaScript functionality to enhance the user experience. If the user doesnít have JavaScript he/she should still be able to use the site and get the message.

The same applies to CSS, by the way. You have your basic HTML page and you add the styles through an external stylesheet so that users that canít see styles (i.e. blind people) will still get the message thanks to semantic code (view my example in Firefox and disable styles: View > Website Style > No style). Study the stylesheet to see how I apply styles to elements. You donít necessarily need an ID or class for every element to which you wanna add a style. For example Iíve set the default text color to white by applying the style to the body. Then Iím reverting the style for every element that is supposed to get a different color.

OK, enough writing. I guess youíll get back if youíve got more questions.

For some strange reason which Iím not able to figure out IE 6 isnít applying the width to the JS generated image. Also the meta refresh should be avoided. The refreshing can be achieved with JavaScript as well but thatís where my knowledge is yet ending.

Good luck. :)

effpeetee
May 3rd, 2007, 09:51 PM
Well, you have been busy for me. Many thanks.
I have downloaded the new index page and style sheet to my computer folder.

Although I had a random image using your link, I did not get the image on my PC. The rest seems to work OK, so I must have fouled up somewhere along the way. Possibly I have been too simplistic. Can you suggest where I have gone wrong. Also, there are no clocks.

I am beginning to see the CSS methods and they look much tidier than the bread and butter coding that I have been doing. Again thanks for your guiding hand.

effpeetee

VIPStephan
May 3rd, 2007, 11:35 PM
Oh yeah, I changed the image paths in the JavaScript to absolute paths pointing to your server so I could test the functionality without having to specify images manually. You shouldnít have any problems, thoughÖ
Is it in my file where you have no random image? I see a screwed up value in the meta tag for the refresh on your current page:


<meta http-equiv="refresh" content="45&quot;">

Is it that whatís wrong?

You shouldnít copy the script I posted here as the arrays arenít complete. Look at the full javascript file (http://www.primacom.net/~k6531190/test/imageswap.js), that is working (and should work on your computer too).

And as I said my example is a very basic one. I didnít take care of the clocks because the other script took some time already and I thought you might take this one as inspiration to work on the clocks yourself. Iím not here to do all the work. ;)

effpeetee
May 4th, 2007, 08:06 AM
I wasn't quite sure what you wanted me to do.
So far I have been trying to alter the presentation of "Picture Gallery" on the listing (Index page). On my PC I can hardly see it.
Where do I go to alter this? It is set up for <h2> but nothing that I do seems to be successful.

<h2><a href="Picchoose.html">Picture Gallery.</a></h2>

www.exitfegs.co.uk

effpeetee

VIPStephan
May 4th, 2007, 02:16 PM
Thatís the thing with links. It doesnít suffice to set the style for say a paragraph or a headline and have links within those behave the same (i.e. setting text color does affect the headline but not the links inside). You have to assign a style specifically for links in the h2:


h2 a {color: #0FF;}

effpeetee
May 4th, 2007, 05:21 PM
I still cannot get the clocks to work. Also if you check the site, you will see that I have managed to use the index page that you supplied, but with a lot of bodging, both on the html and the style sheet.

One of my problems is that I cannot decide whether I need to alter the style sheet or the html code.

I have removed the visible borders on a "suck it and see" basis.
Brute force and ignorance. I'll stick with it until I have the clocks working and then a long period with the CSS book.

Many thanks for all your help. I am going off now to study Sam's book of CSS.

Watch this site. It will at the least give you a laugh or two.

Dedicated coders may need a good supply of Aspirin.

www.exitfegs.co.uk

effpeetee.

PS The reason for all the garbage on my original code was that I had downloaded it from my website. The download corroded it.
I have just tried it again and it removed all line feeds and added a load of tags at the end.

VIPStephan
May 4th, 2007, 06:17 PM
Hm, just saving a page from the browser shouldnít add lines or any new code. You can just press ďCtrl + SĒ (or choose File > Save As) to save the file and it should save it as is. Or alternatively you can view the source code and copy/paste it into a new file. However, Iíve experienced that IE doesnít display the source code properly (probably due to Mac/Unix line breaks - donít know and wonít get into detail). You can view it properly with Firefox or related browsers and copy from there.

Also Iím sorry for the confusion but I used XHTML and you might be better off with classic HTML yet. So change your document type declaration (the doctype at the very top of your document) to this:


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

and remove the trailing slashes from elements like <meta Ö />, <img Ö /> or <br /> (if applicable). You will run into less problems when validating (http://validator.w3.org/) your HTML.

To remove the borders I applied you can just delete the properties like border: 1px dashed magenta;. You donít need to specify border: none;, just remove these ocurrences.

effpeetee
May 5th, 2007, 08:11 AM
When I put my working index page into CSE HTML Validator v7.0.
The process of satisfying the validator, causes the page to malfunction.

Very puzzling. Any ideas?

effpeetee

www.exitfegs.co.uk

koyama
May 6th, 2007, 06:14 AM
Any ideas?
It is telling you that you have a nesting error:


<body>
<div id="wrap">
[...]
</body>
</div>

should instead be like this


<body>
<div id="wrap">
[...]
</div>
</body>

effpeetee
May 6th, 2007, 09:47 AM
Thank you. I had not noticed this.

Now corrected.

effpeetee

www.exitfegs.co.uk

effpeetee
May 7th, 2007, 10:21 AM
Hello VIPSTEPHAN

I am still having problems with the coding that you sent.
Just minor ones.

Firstly, I would like to use XHTML.


I still have not managed to include the javascript for the two top clocks.

Have you any pointers for me. I have plenty of time on my hands. But I just do not know which road to follow.

Best wishes.

effpeetee

www.exitfegs.co.uk

VIPStephan
May 9th, 2007, 01:19 AM
I think the problem with the clocks lies in the fact that there are two window.onload events and the latter one is overwriting the former one. You need to put both function calls into one onload event. Iíve modified my files accordingly and attached them for you to study (you just have to position the clocks to your liking).
I didnít feel like tweaking the clock code as I donít have as much time as you. It certainly needs to be improved, though.

As to the XHTML thing: You should know what you are doing when you wanna use XHTML as there are some slight differences to classic HTML. The most basic ones are:


All code must be written in lower case (e.g. <p></p> rather than <P></P> or <P></p>)
All elements need to be properly nested (e.g. <div><p></p></div> rather than <div><p></div></p>)
All elements need to be closed (e.g. <p></p>) and ďnon-closingĒ elements in HTML (like <img>) must be closed as well (i.e. <img />)
All attribute values must be enclosed by quotes (e.g. <div id="name"> rather than <div id=name>)


I know itís hard but youíve got some reading to do: http://www.google.com/search?q=xhtml+html+difference

Good luck.

effpeetee
May 9th, 2007, 10:59 AM
Many thanks.

It's a very useful link.

effpeetee