Creating site design using Divs - help needed

[Shockbox]

Hi there,

I'm new to the forum so hey everyone. Make sure to read my thread in the introduce yourself section.

I've got coursework to do which involves designing a fully functioning website.
A problem I have always had when designing a website is the layout.

The first website I designed, I used AP Divs and it looked great. However, it was positioned differently depending on the size of the screen it was viewed on. I'd very much like to avoid this problem for this coursework so I've been using the standard DIV.

I want my site to be centered and I've got my banner and navigation in place using the DIV wrapper but I'm having problem with the rest.

I have uploaded the webpage here:
http://coursework2.webs.com/


And here is the design for the layout:
http://img697.imageshack.us/img697/7...pagesketch.jpg

I'd really appreciate some help so I can learn how to do this.

[Wickham]

You could do something like this:-
http://www.wickham43.com/forumposts/...ebs091114.html
CSS http://www.wickham43.com/forumposts/mystyle.css

I didn't change your Spry menu file and didn't test the menu.

Your Spry menu is width: 63em; which I found is 1008px wide using a default 16px font-size (63*16= 1008). If you use a smaller font size, the width will be less.

As your logo image is 1000px wide and had 3px margins making 1006px, I changed the borders to 4px to tie up with the menu, then the wrapper and all other divs have to add up to 1008px. This is a bit too wide really, as a 1024*768 screen resolution may have a vertical scrollbar of 18px which leaves only 1006px, so you will see a small horizontal scrollbar in some browsers.

It doesn't really matter as long as everything ties up, but mixing ems with px can be difficult so I would resize the menu in px and make the total width 1000px including borders although this will cut off a little bit of the logo.

Your font-families Maiandra GD and amienne probably aren't available on most browsers so you should specify browser-safe fonts as an alternative like I have.

I have used several container divs just to be safe, because I don't know how much content you will have or whether you are going to put some large images in the divs. It may be possible to remove one or two containers.

[hiddenbrooknb]

What would be the best way to position divs? Relative?

[Corrosive]

Depends what you need them for. Each has a job to do. For your page structure as a whole though it is best to use relative and then float your divs into position.

[Shockbox]

I now have another problem.

I have my navigation bar and I have now included a flash slideshow. However, my nav bar had drop down buttons but they go behind the flash slideshow instead of on top of it. How do I fix that?

[Wickham]

I can't test because I don't have your flash file, but this might work:-
In the SpryAssets/SpryMenuBarHorizontal.css

ul.MenuBarHorizontal
{                     position: relative; z-index: 5;
	margin: auto;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	cursor: default;
	width: 63em;
}

and in mystyle.css

#leftcolumn {                       position: relative; z-index: -1;                     
	width: 400px;        background-color: #B4CDCD;
	text-align:left;
	/*margin-left: 130px;*/float: left;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	}
#lefttop, #leftmiddle, #leftbottom  { width: 390px; height: 250px; 
margin-top: 10px; padding: 5px; background: none; }

Note that the background-color has to be deleted in #lefttop (though you could have it in the lower divs).

In the body markup for the flash I used my own flash file but I added
<param name="wmode" value="transparent"/>
into the object tag and
wmode="transparent"
into the embed tag

and the menu drop down items appeared over the flash.

[Shockbox]

A new question.

On the website I have a gap between the top logo and the spry menu bar. I don't want there to be a gap. How would I do this?

[Wickham]

It appears to be caused by the default margins for the p tag above holding the SiteLogo.png so add this to the mystyle.css:-

p { margin: 0; }

That will affect all p tags so if you only want it to apply to the logo p tag, give it an id like

<p id="logo"><img class="sitelogo" src="images/SiteLogo.png" alt="Scottish 
Tourist Attractions" width="1000" height="300" /></p>

and edit the style to #logo p { margin: 0; }

[Shockbox]

The problem I'm having now is with entering the text.

In the boxes to the left, it now has a small coloured bar along the top where I want the header to go.

And after that the text. However, there are huge gaps between the lines and also when I enter the text, it doesn't stick to the div I'm typing it in but instead goes across the page.