• Welcome to The Cave of Dragonflies forums, where the smallest bugs live alongside the strongest dragons.

    Guests are not able to post messages or even read certain areas of the forums. Now, that's boring, don't you think? Registration, on the other hand, is simple, completely free of charge, and does not require you to give out any personal information at all. As soon as you register, you can take part in some of the happy fun things at the forums such as posting messages, voting in polls, sending private messages to people and being told that this is where we drink tea and eat cod.

    Of course I'm not forcing you to do anything if you don't want to, but seriously, what have you got to lose? Five seconds of your life?

Menu gets messed up

JolteonShock

JolteonShock

A very inactive person
Hi,
Right now I'm working on an HTML website, but I've been having problems. At first the menu displays fine, but when you click on one of the links, a part of the header pops up there and the right menu is moved to that side, in a very messed up way. I'm using Butterfree's Simple Div Layout. I am also using HTML includes to include my menus. Right now, I can't post a link because I am working on the files in my computor and haven't acquired hosting yet.
Things I have tried:
  • removed the stylesheet link from the menu file
  • added divs of the conatiner and content to the menu file
  • placed the menu file include in different places of the HTML document

Here's the code for the HTML:
<!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=UTF-8">
<title>News||Project PokeFan</title>
<link rel="stylesheet" type="text/css" href="style1.css">
</head>
<body>
<div id="header">
<img src="http://www.iaza.com/work/100320C/Header5027428352-iaza.gif" alt=".:Project PokeFan:.">
</div>

<div id="container">
<div id="content">
<h1>News</h1>
<p>Just getting the site ready for publishing. Going well so far, in my opinion! ^^</p>
</div>

<div id="leftmenu">
<iframe src="leftmenu.html"
width="100"
height="270"
frameborder="0"
scrolling="no">
</iframe>
</div>

<div id="rightmenu">
<iframe src="rightmenu.html"
width="150"
height="270"
frameborder="0"
scrolling="no">
</iframe>
</div>
</div>
<div id="footer">
<p>Pokemon © Nintendo 2010</p>
<p>I do not claim ownership of the Pokemon names, logos or any other content belonging to Nintendo found on my site.</p>
</div>

</body>
</html>
Here's the code for the menu:
<!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>menu</title>
<link rel="stylesheet" type="text/css" href="style1.css">
</head>
<body>
<div id="leftmenu">
<ul>

<li>Site
<ul>
<li><a href="C:\Users\Lifebook\Documents\Suz's Stuff\HTML\Project PokeFan\Home.html">Home</a></li>
<li><a href="C:\Users\Lifebook\Documents\Suz's Stuff\HTML\Project PokeFan\News.html">News</a></li>
<li><a href="C:\Users\Lifebook\Documents\Suz's Stuff\HTML\Project PokeFan\Mascots.html">Mascots</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</li>

<li>Category
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</li>

<li>Category
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</li>

</ul>
</div>
</div>

</body>
</html>
Header/Menu HTML
#header {
text-align:center;
height:200px;
background:url (http://ausmall.com.au/freegraf/archive1/ac253.jpg);
}

#header img {
margin:auto;
}
#leftmenu {
position:absolute;
left:0;
top:0;
width:130px;
padding:5px;
text-align:left;
}


#rightmenu {
position:absolute;
right:0;
top:5px;
width:130px;
padding:5px;
text-align:right;
background:none;
}

#leftmenu ul, #rightmenu ul {
list-style-type:none;
margin:0;
padding:0 5px;
}


If anyone can help, I'd really appreciate it! I REALLY want to solve this problem, because once you navigate to a page, the navigation menu disappears.
I've also included screenshots of what happens to the menu.
I hope I'm not a total noob.
 

Attachments

  • Problem Screen 1.png
    Problem Screen 1.png
    17.6 KB · Views: 49
  • Problem Screen 2.png
    Problem Screen 2.png
    15 KB · Views: 49
Last edited:
Right now I'm using local links because I haven't got my site up for hosting.
And I'm a noob, so maybe I can use real links and I just don't know it?

I'll post the menu and header CSS in the main thread.
 
You are including an entirely new HTML document. Every bit of your CSS is being included again. All you need in the file where the menu is kept, I think you named it left/rightmenu.html, is the actual list of links.

This is what your codes should look like:

Here's the code for the HTML:
<!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=UTF-8">
<title>News||Project PokeFan</title>
<link rel="stylesheet" type="text/css" href="style1.css">
</head>
<body>
<div id="header">
<img src="http://www.iaza.com/work/100320C/Header5027428352-iaza.gif" alt=".:Project PokeFan:.">
</div>

<div id="container">
<div id="content">
<h1>News</h1>
<p>Just getting the site ready for publishing. Going well so far, in my opinion! ^^</p>
</div>

<div id="leftmenu">
<iframe src="leftmenu.html"
width="100"
height="270"
frameborder="0"
scrolling="no">
</iframe>
</div>

<div id="rightmenu">
<iframe src="rightmenu.html"
width="150"
height="270"
frameborder="0"
scrolling="no">
</iframe>
</div>
</div>
<div id="footer">
<p>Pokemon © Nintendo 2010</p>
<p>I do not claim ownership of the Pokemon names, logos or any other content belonging to Nintendo found on my site.</p>
</div>

</body>
</html>

The stuff above here is totally fine. But for the menus, all you need is the following:
<ul>

<li>Site
<ul>
<li><a href="C:\Users\Lifebook\Documents\Suz's Stuff\HTML\Project PokeFan\Home.html">Home</a></li>
<li><a href="C:\Users\Lifebook\Documents\Suz's Stuff\HTML\Project PokeFan\News.html">News</a></li>
<li><a href="C:\Users\Lifebook\Documents\Suz's Stuff\HTML\Project PokeFan\Mascots.html">Mascots</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</li>

<li>Category
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</li>

<li>Category
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</li>

</ul>

Also, the left and right menus should be different text files
Header/Menu HTML
#header {
text-align:center;
height:200px;
background:url (http://ausmall.com.au/freegraf/archive1/ac253.jpg);
}

#header img {
margin:auto;
}
#leftmenu {
position:absolute;
left:0;
top:0;
width:130px;
The Left menu went from a width of 100 in the page, to 140 in your CSS (count the paddings on both sides)
padding:5px;
text-align:left;
}


#rightmenu {
position:absolute;
right:0;
top:5px;
width:130px;
The same thing happened here
padding:5px;
text-align:right;
background:none;
}

#leftmenu ul, #rightmenu ul {
list-style-type:none;
margin:0;
padding:0 5px;
Even more padding
}
Click to expand...
 
Why in God's name are you trying to use frames for this? I mean, you theoretically can, but then you'll want to remove the actual menu divs from the frame files and more or less completely remake the stylesheet files and add targets to all the links and there will be very little reason left for you to be using my free layout at all. Just use SSI.

The actual reason for what's happening is that the way frames work is that when you click a link inside one, it will try to open the link inside that frame.
 
Butterfree said:
Why in God's name are you trying to use frames for this? I mean, you theoretically can, but then you'll want to remove the actual menu divs from the frame files and more or less completely remake the stylesheet files and add targets to all the links and there will be very little reason left for you to be using my free layout at all. Just use SSI.

The actual reason for what's happening is that the way frames work is that when you click a link inside one, it will try to open the link inside that frame.
Click to expand...

Their host may not support SSI. PE2k for instance, can't use it because of their host.

Anyways, what you can do is make your content an iframe named content. Then make all your navigation links in this format.

<a href="link.htm" target="content">Link</a>.
 
They've already said they don't have a host, so when they do get one, they can get one that supports it. :/ Frames are annoying as hell and nobody likes them.
 
You must log in or register to reply here.
Back
Top Bottom