layout problem

moshe · #1 Feb 10th, 2007, 12:41

Can anyone see why the layout is not working properly please.
This site is hand coded and I have messed up the divs (I think) somewhere.

http://www.theglenkens.info/

Mike

Antwan · #2 Feb 11th, 2007, 12:30

It's a width problem somewhere, try setting the width of that middle div to a smaller size, or try floating them all to the left so they'll stack up. I'll have a proper look later I really only skimmed through!

moshe · #3 Feb 11th, 2007, 13:19

Quote:

Originally Posted by Antwan

It's a width problem somewhere, try setting the width of that middle div to a smaller size, or try floating them all to the left so they'll stack up. I'll have a proper look later I really only skimmed through!

Thanks for the reply
I have tried all that you suggest to no avail.
I have added dotted lines to the css round all the elements to make it easier to see.

Mike
Admin: maybe this should be moved the css forum?

Ryan Fait · #4 Feb 11th, 2007, 13:32

Yikes. Why in god's name are there conditional tables there? While you're in this stage, I recommend you get rid of those tables and shift your content around to this order:

Code: Select all

h1 page title
    h2 content heading
        main content
    h2 more info
        side content
    h2 navigation
        unordered list

moshe · #5 Feb 11th, 2007, 13:59

Quote:

Originally Posted by Ryan Fait

Yikes. Why in god's name are there conditional tables there? While you're in this stage, I recommend you get rid of those tables and shift your content around to this order:

Code: Select all

h1 page title
    h2 content heading
        main content
    h2 more info
        side content
    h2 navigation
        unordered list

Thanks Ryan

What tables?, this is all pure css - no? or am I missing something?

This site is just an experiment only I changed too many things and got lost, it did work properly to start with.

Now the middle and right columns are ok but the left column and menu are out.

http://www.theglenkens.info/

Mike

Ryan Fait · #6 Feb 11th, 2007, 14:04

You're using tables for the dropdown menu.

And in Safari, the left and right side appear to be in place, but the top of the main content is even with the bottom of the side bars.

moshe · #7 Feb 11th, 2007, 14:11

Quote:

Originally Posted by Ryan Fait

You're using tables for the dropdown menu.

And in Safari, the left and right side appear to be in place, but the top of the main content is even with the bottom of the side bars.

This is how it was, I moved everything as you suggested.
I thought safari worked the same as ff, not as ie. should I remove this code?

Quote:

Mike

moshe · #8 Feb 11th, 2007, 18:00

Hi all again

OK, I have removed all reference to tables and ie.
I have also removed the middle column and both left and right columns are now in the correct positions.
Could you please check the code for me in case I have missed something.

Mike

Ryan Fait · #9 Feb 11th, 2007, 19:34

Remove the conditional comments and the tables. There are plenty of other drop down menu codes out there that don't use tables. There is an example in the CSS forum stick, and you'll find more using Google.

Site looks fine now, but there's no content...

Safari and Firefox are very similar, although there are a few minor differences. I personally believe Safari is way better than Firefox for several reasons. Accordingly, it's absolutely nothing like IE

moshe · #10 Feb 11th, 2007, 23:11

Ok, assume I am thick, please explain to me which are the tables. here is the code. (I am not trying to be rude, just to understand)

Quote:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>

<meta http-equiv="content-type" content="text/html charset=utf-8" />

<title>dropdown menu</title>
<link rel="stylesheet" type="text/css" href="css/dropdownonly.css" media="screen" title="dropdownonly (screen)"/>
</head>

<body><div id="wrap">

<div id="header">
<h1>The Glenkens </h1>
<p><strong>"I can see you fly. You are an angel with wings, high above the ground!"</strong><br/>(traditional haiku poem)</p>
</div>

<img src="images/hills3.jpg" alt="photo of the galloway hills " width="761" height="117"/>

<div class="breadcrumbs">
You are here: <strong>Welcome!</strong>
</div>

<div id="content" class="center">
<h1>The Glenkens</h1>
<h3>Southwest Scotland's Highlands!</h3>
</div>

<div id="extras">
<h3>More info:</h3>
<p>This column will eventually be for menus on environmental matters in the Glenkens.</p>
<p>This is the third version of this site since 1998. If you find any information irrelevant or incorrect please let me know!</p>
<h3>Links:</h3>
<p>- <a href="#">1st4web</a><br />
<a href="#">Glenkens Business Association</a><br />
<a href="#">????</a><br />
<a href="#">????</a></p>
<p class="small">Version: 3.0<br />(January 2007)</p>
</div>

<div class="menu">
<ul>
<li><a class="hide" href="index.html">HOME</a>

<ul>
<li><a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK ></a>

<ul>
<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
<li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
<li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li>
</ul>

</li>
<li><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li>
<li><a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></li>
<li><a href="../menu/bodies.html" title="fun with background images">fun backgrounds</a></li>
<li><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li>
<li><a href="../menu/em_images.html" title="em size images compared">em sized images</a></li>
</ul>

</li>

<li><a class="hide" href="index.html">THE VILLAGES</a>

<ul>
<li><a href="content/villages/balmaclellan.html" title="Balmaclellan">Balmaclellan</a></li>
<li><a href="content/villages/carsphairn.html" title="Carsphairn">Carsphairn</a></li>
<li><a href="content/villages/corsock.html" title="Corsock">Corsock</a></li>
<li><a href="content/villages/dalry.html" title="Dalry">Dalry</a></li>
<li><a href="content/villages/dundeugh.html" title="Dundeugh">Dundeugh</a></li>
<li><a href="content/villages/dendoon.html" title="Kendoon">Kendoon</a></li>
<li><a href="content/villages/laurieston.html" title="Laurieston">Laurieston</a></li>
<li><a href="content/villages/mossdale.html" title="Mossdale">Mossdale</a></li>
<li><a href="content/villages/ng.html" title="New Galloway">New Galloway</a></li>
<li><a href="content/villages/parton.html" title="Parton">Parton</a></li>
</ul>

</li>
<li><a class="hide" href="../layouts/index.html">LAYOUTS</a>
</li>
</ul>
</div>

<div id="footer">
Copyright © 2007 (1st4web).   The Glenkens   Design by <a href="mailto:mike@1st4web.co.uk"> 1st4web</a>.
</div>
</div>

</body>
</html>

Mike

Dapandyman · #11 Feb 12th, 2007, 00:04

me confuzzled as well...

Ryan Fait · #12 Feb 12th, 2007, 01:50

I was just reiterating my previous post. You had already removed them, sorry for the confusion

moshe · #13 Feb 12th, 2007, 07:05

My problem is that as soon as I put any content in, column 1 with the menu goes bonkers.

http://www.theglenkens.info/

What have I done wrong?

BTW. both the layout and the menu where found using links on webforumz.

Mike

Lchad · #14 Feb 12th, 2007, 11:06

Mike, I was looking at your code. Is your menu in a separate <div>?
I was trying to figure it out but was struggling. I have been using a <div id="side"> and then putting the <div class="menu"> inside of that. Then you can control where it aligns. Such as top.

moshe · #15 Feb 12th, 2007, 11:39

Hi Linda, I have been struggling with this since last Thursday.
here is the css for the menu (part of the css file)

Quote:

/* menu */
.menu {font-family: arial, sans-serif; width:106px; height:135px; position:relative; margin:0; font-size:11px; margin:5px 0;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000; width:104px; height:20px; text-align:center; border:1px solid #fff; border-width:1px 1px 0 0; background:#c9c9a7; line-height:19px; font-size:11px;}
.menu ul {padding:0; margin:0;list-style-type: none; }
.menu ul li {float:left; margin-right:1px; position:relative;}
.menu ul li ul {display: none;}

/* IE browsers menu */
.menu ul li:hover a {color:#fff; background:#b3ab79;}
.menu ul li:hover ul {display:block; position:absolute; top:0; left:105px; width:105px;}
.menu ul li:hover ul li a.hide {background:#dfc184; color:#000;}
.menu ul li:hover ul li:hover a.hide {width:150px;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:#b3ab79; color:#000; width:150px;}
.menu ul li:hover ul li a:hover {background:#dfc184; color:#000;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:151px; top:0; color:#000;}
.menu ul li:hover ul li:hover ul li a {display:block; width:200px; background:#dfc184; color:#000;}
.menu ul li:hover ul li:hover ul li a:hover {background:#bd8d5e; color:#fff;}

and the bit under the menu

Quote:

.announce {
margin: 0 auto;
margin: 0px 0 10px 0;
padding: 10px;
width: 86px;
color: #505050;
background-color: #c9c9a7;
line-height: 1.3em;
border: 1px dashed red; /* For illustration purposes only */
}

All the html code is higher up

Mike

Lchad · #16 Feb 12th, 2007, 12:21

Hi Mike,
I think you need a third column. Insert it after the center column in the html
<div id="side"> insert menu here</div>

Then your css can be something like this

#side {
width: 140px;
float:left;
background-color: #fffffff;
margin-left: 10px;
}

Obviously change the dimensions to what you need.

Give that a try and if you continue to struggle, let me know...

moshe · #17 Feb 12th, 2007, 15:00

Hi agin
There are 3 columns
http://www.theglenkens.info/
The order so far is:
Middle column =Main body content
Right column = extras
Left column = menu +
announce

It doesn't really matter, this was just an experiment that went wrong, I can start over it again.
Although I would like to understand what went wrong so as tp be able to correct it if it happens on any of my other sites.

Mike

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
layout problem