Rebuild Maljonic's Website

[Maljonic]

I've just been wondering about tables again, got this mad idea I might redo Maljonic's Dreams without using tables apart from where data is displayed. The only thing is I wonder what you think about navigation being in tables? Is it easy/possible to create the same navigation as on here: http://www.maljonicsdreams.com without putting the buttons in a table. I could just do a whole new things but I want to keep it looking the same, so as far as anyone visiting the site is concerned I've hardly changed a thing.

 

[Maljonic]

Just realised, I can probably use a list, I did something just like this a few weeks ago with the suckerfish meny, silly me.

 

[Shovel]

Correcto. Unordered lists (<ul> ) are the staple of navigation. For that one you just need to slap an id on the list (such as <ul id="navigation">) and add fixed width and a position with CSS. Then, use the "ul#navigation li" selector to add the background image to all the list items. Later, this can be made a little more complex and allow for proper text scaling, but start simple

Don't be tempted to give it an id of #sidebar or #sidenav though. One of the neat parts of CSS is that you can, with the flick of a few lines of code, change it from a sidebar to a horizontal nav at the top of the page. Try to pick ID and class names which will make sense regardless of how you present it. Not always possible (sometimes it's clearer just to describe some secondary content area as the #sidebar than to make up some greyer, 'correct' name for it).

 

[Maljonic]

I just had a quick go at it: http://www.maljonicsdreams.com/tester.htm it's not quite right, have to go to bed now though.

P.S. just pretend the font tags aren't there.

 

[Shovel]

That's the idea. You need to remove margin and padding from the UL to fix that extra spacing you've got.

Also, you don't need the wrapper DIV around the UL, you can just apply the positioning to the UL. They're all just boxes, and you there's no restriction on how you can position different elements. If you do need the wrapper-DIV for some reason then you only need to put an #id on the DIV - it's supurfluous on the UL. You can built a longer selector based off the outer-most #id to add the backgrounds to LI elements (e.g. 'div#navigation ul li', if you keep the wrapper DIV).
The way you've got it though, I'd just apply the positioning to the UL element and remove the nested DIV altogether.

Also, you don't need to absolutely position the header. Probably better just to leave that in the flow. More complex CSS positioning is only really needed when elements need to be arranged horizontally (such as columns). Where you've got the header like that, with other elements below it, you should find it's easier just to let the natural one-above-the-other behaviour of block elements do their work.

 

[Maljonic]

I got rid of the superfluous DIV. I'm not sure what you mean about not using the absolute position. I can't get the list to be in the right place without it, though if you look at it now it's all squashed up but in the right place. Obviously I need to add something but I don't know what at the moment?

 

[Shovel]

You seem to have grown a font tag in your UL, that is screwing with your font size. The positioning is messed up because you've somehow merged positioning styles that need to be applied to the UL, with other styles that need to be applied to the LI children. You should find that by separating them out it'll sort itself out.

The navigation can be absolutely posited, that's fine. The header doesn't need to be, though.

Try this:

#header
{
	width: 80%;
        margin: 0 10%;
	height: 80px;
	background-image: url(../pictures/woody.jpg);
    padding:10px 0px 0px 0px;
}

 

[TdC]

Ben == webdev god

 

[Maljonic]

I think I fixed it now, seems to work how I want it. Have to figure out the rest of the page now.

P.S. I just downloaded a trial of Dreamweaver 8, so I'm kind of fiddling with that at the same time. I'll buy it when the trial runs out, should have the money by then.

 

[Maljonic]

I'm still having trouble getting my head around achieving the same layout just using divs, I'm probably just thinking about it all the wrong way around. For instance I'm finding it difficult to think of a way to add the footer like on here: http://www.maljonicsdreams.com/latestdreampage.htm so there a white space at the bottom of the page that goes right across and gets pushed further down depending on the amount of content on the page. Is there a way to link divs together, or do I put everything inside a bigger div with the footer at the bottom?

 

[Shovel]

Footers can be a pain sometimes, but you're right when you say it's just a slightly different way of thinking.

Since your side bar is so small, you can rely on the main body content to push the footer down though. So you have something like this:

<body>
  <div id="header"> ... </div> (centred using the margins like I showed above)
  <div id="content"> ... </div> (Uses the same margins as #header to align in the center, but add padding-left of 120px (the width of the sidebar)
  <ul id="navigation"> ... </ul> (position:absolute as above, this will sit over the top of the padding you've put on the #content div)
  <div id="footer"> ... </div> (again with the header/content margins, it will just be placed as a block underneath the content)
</body>

To make sure the footer is always underneath the sidebar, add the following rules (based on the id names I used above). Lets pretend the sidebar is 300px high.

#content { min-height: 300px; }
* html #content { height: 300px; }

That should push the footer down even when there's no content to display. The "* html" rule will only be applied to Internet Explorer 6 and below, which doesn't support 'min-height', but also implements 'height' wrong.

 

[Maljonic]

Ah wait, perhaps if I use the margin-bottom ?

Or perhaps not, cross-posted.

 

[Shovel]

Mr SheepCow sir, could we please split this 'Rebuild Maljonic's Website' discussion out into a separate thread?

 

[SheepCow]

Indeed

Another trick to keep footers at the bottom is it have them with "clear: both". That probably only works when your navigation / content is floated

 

[Shovel]

"clear: both". That probably only works when your navigation / content is floated

That's correct. "clear" is a partner property of "float". It doesn't have any effect on absolute or fixed position elements since those positioning types take the elements out of the page flow, and once out of the flow they cease to have any effect on (and cease to be effected by) any other element in the document (except for their own children).

Mal, for starting out you're best sticking to absolute positioning as it's simpler to grasp and makes more literal sense. That said, there're a good number of 2/3/4 column layout techniques which make creative use of floats.

 

[Padwah]

I don't know whether this will help or hinder your transition in to CSS and XHTML or not but this is the, very, basic code that I use for most of my website layouts.

This is the XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>Mals website</title>
</head>

<body>
	
	<div id="container">
		
		<div id="header">&nbsp;</div>
		
		<div id="main">&nbsp;</div>
		
		<div id="sub">&nbsp;</div>
		
		<div id="footer">&nbsp;</div>
		
	</div>
	
</body>
</html>

This is the CSS

#container
{
	width: 700px;
	margin: 10px auto;
	
	/* This comntains all of your layout and sets the over all width of the content. the auto margin centers it in the window */
}

#header
{
	height: 100px;
	background-color: #660000;
	
	/* This is the header for your page, set the background properties in here. If you want a clickable link add it to the #header section of the XHTML */
}

#main
{
	width: 70%;
	background-color: #006699;
	float: left;
	
	*/ This is your main content window, I've set it to a percentage value but you can set this to a fixed pixel value if you wish. Just make suer that the width of this plus the sub is less than the width of the container */
}

#sub
{
	width: 30%;
	background-color: #009900;
	float: right;
	
	/* This is your sub menu. see above for a description of the sizing */
}

#footer
{
	background-color: #FF9900;
	clear: both;
	
	/* Your footer. By adding clear both it ensures that it is always below your content */
}

 

[Padwah]

All of that should give you this: http://www.hostforest.co.uk/maljonic.html

 

[pingu]

Padwah,

That is an very interesting read, it brings my understanding of CSS to a better standard. However would it work with 3 tier? Such as left, middle and right?

 

[Shovel]

Pingu: there are a number of techniques for achieving 3 column (and even 4 column) layouts.

Glish is a well regarded resource for example column layouts, as are Ben Meadowcroft's efforts.

Padwah: Thank you for posting that, it's very useful indeed. A couple of things to be aware of: Firstly you should probably stick an XHTML 1.0 Strict (or HTML 4 Strict) DOCTYPE on there - using the transitional types doesn't enable any part of the spec that you're likely to need, but does allow some fuzzy errors to slip through.
Also be aware that when using dual floats (#main and #sub) like that for column layout, you need to avoid adding margins to them, since Internet Explorer 6 and below will double it, making your boxes too wide which in turn pushes the second of those two boxes all the way down the page.

 

[Padwah]

PIngu: That technique will work with pretty much any number of columns just stack them up in order, floating them in the same direction.

Shovel: You're right about the doctype, I really should make the shift over to strict fully rather than messing about with transitional. With regards to the margins though I can't really see why you'd need any in a two column layout as the elements are floated in different directions. Rather than setting a margin to either elements you just limit their width to leave space between the two elements.

That does all change though when you increase the number of 'columns' as two or more columns will have to butt up *s******* against each other which can be a right pain when creating flexible layouts.

 

[Maljonic]

This is all great stuff, thanks everyone. I just started reading a thick book on CSS again because there's some patchy areas in my understanding. I started reading it a while back but it got put to one side when I started a Flash course, I may as well get back into it now as there's only one more Flash lesson left anyway.

 

[Shovel]

Which book are you reading Mal?

 

[Maljonic]

'Cascading Style Sheets (CSS) By Example' by Steve Callihan.

 

[Maljonic]

Aside from a bit of CSS text formatting, I'm nearly there: http://www.maljonicsdreams.com/tester.htm only the menu wont go flush with the left in IE like it does in Netscape, probably because I've got something extra (or missing) in the style sheet - but I can't see what because I've been fiddling around with the page for hours.

 

[Maljonic]

Did it, missed out a margin-left

 

[Maljonic]

Does anyone know how I can work around the 2 form validation errors for xhtml strict on here: http://www.maljonicsdreams.com/Dream_Health/tibetan_health.htm

there is no attribute "name".

and

there is no attribute "onSubmit".

so that it still works with the script that's also on the same page?

 

[JingleBells]

In the javascript, change:

if(eval("document.quiz.Q"+i+"["+j+"].checked")){

to:

if(eval("document.getElementById(\"quizForm\").Q"+i+"["+j+"].checked")){

and in the form bit, change:

<form style="background-color:#CC6600" name="quiz" action="" method="get" onSubmit="return getResults(this)">

to:

<form style="background-color:#CC6600"  id="quizForm" action="" method="get" onsubmit="return getResults(this)">

To fix the name bit i've turned it into a unique ID (in this case quizForm) and altered the JS so that it works with the new ID. The 'onSubmit' bit was due to case, in XHTML all attribute names and elements are in lower case, so it needed to be 'onsubmit'

 

[Maljonic]

Thanks that's great. You were the one who gave me that little quiz script in the first place ages ago, so thanks again.

 

[Maljonic]

Can someone tell me about this: <?xml version="1.0" encoding="iso-8859-1"?> I mean I know what it is, but I have to take this line off to get php pages to work, which is fine only it messes the layout up slightly in Internet Explorer when it's not there.

Like on this page: http://www.maljonicsdreams.com/love_dating/ it stretches the layout right across the screen in IE when you take out the <?xml version="1.0" encoding="iso-8859-1"?>

Is there a way to get around this with php pages?

 

[SheepCow]

Yes, put the tag in, it is required.

echo '<?xml version="1.0" encoding="iso-8859-1"?>';