/    Sign up×
Community /Pin to ProfileBookmark

CSS menu problem

Copy linkTweet thisAlerts:
Nov 02.2005

Hi,

I am gettting myself in a pickle as I can’t seem to figure out how to change elements to my CSS menu…

The problem I have is that the borders have disappeared around the main menu, and when you mouseover the “services” link next to it moves over? And I can’t get the sub menu for “services” and “Approved centre” to align underneath the main links (serviecs and approved centre”

[url]http://www.synaxissolutions.co.uk/test/chaplane/index.htm[/url]

Can anyone help?

to post a comment
CSS

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@jwlnewsomeNov 02.2005 — check this out its a working model just modify its what i did

john


[CODE]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>


<script language="JavaScript">



function big(lyr) {

document.all[lyr].style.height='180px'; }

/* small() makes selected layer shorter (height property)*/

function small(lyr) {

document.all[lyr].style.height='32px';

}

/* start() makes all layers short to start with (height property)*/

function start() {

document.all.Layer1.style.height='32px';

document.all.Layer2.style.height='32px';

document.all.Layer3.style.height='32px'; }

//-- !>

</script>

</HEAD>


<BODY onLoad="start()">


<div id="Layer1" style="position:absolute; width:155px; height:180px; z-index:1; left: 74px; top: 38px; background-color: #FFFFCC; layer-background-color: #FFFFCC; border: 1px none #000000; overflow: hidden" onMouseOver="big('Layer1')"; onMouseOut="small('Layer1')">

<div align="center"><font face="Verdana, Arial, Helvetica, sans-serif">

<a href="menu1.html">Menu 1</a>

<br>

<br>

<a href="link1.html">Link 1</a><br>

<br>

<a href="link2.html">Link 2</a><br>

<br>

<a href="link3.html">Link 3</a><br>

<br>

<a href="link4.html">Link 4</a></font></div>

</div>

<div id="Layer2" style="position:absolute; width:155px; height:180px; z-index:1; left: 236px; top: 38px; background-color: #FFFFCC; layer-background-color: #FFFFCC; border: 1px none #000000; overflow: hidden" onMouseOver="big('Layer2')"; onMouseOut="small('Layer2')">

<div align="center"><font face="Verdana, Arial, Helvetica, sans-serif">

<a href="menu2.html">Menu 2</a>

<br>

<br>

<a href="link5.html">Link 5</a><br>

<br>

<a href="link6.html">Link 6</a><br>

<br>

<a href="link7.html">Link 7</a><br>

<br>

<a href="link8.html">Link 8</a></font></div>

</div>

<div id="Layer3" style="position:absolute; width:155px; height:180px; z-index:1; left: 398px; top: 38px; background-color: #FFFFCC; layer-background-color: #FFFFCC; border: 1px none #000000; overflow: hidden" onMouseOver="big('Layer3')"; onMouseOut="small('Layer3')">

<div align="center"><font face="Verdana, Arial, Helvetica, sans-serif">

<a href="menu3.html">Menu 3</a>

<br>

<br>

<a href="link9.html">Link 9</a><br>

<br>

<a href="link10.html">Link 10</a><br>

<br>

<a href="link11.html">Link 11</a><br>

<br>

<a href="link12.html">Link 12</a></font></div>

</div>

<p><center>

<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>

by <a href="http://javascriptsource.com">The JavaScript Source</a></font>

</center><p>

</body>
</html>[/CODE]

good luck

john

ps when things jump around like that its usually because you havent allowed enough space a few <br> here and there usually sort the problem
Copy linkTweet thisAlerts:
@wood1eauthorNov 02.2005 — Hi,

Many thanks for that, have upload and made some adjustments...?



DO I need to keep the javascriptsource.com link in there?
Copy linkTweet thisAlerts:
@LiLcRaZyFuZzYNov 02.2005 — might be working..

i didnt see your previous code, but as you say in your post, it sounded like it was a CSS drop down menu(which often includes a tiny bit of javascript to make it work in IE)

anyway as said on [url=http://www.alistapart.com/articles/dropdowns/]ALA[/url]


“DHTML” dropdown menus have notoriously involved nasty big chunks of JavaScript with numerous browser-specific hacks that render any otherwise neat, semantic HTML quite inaccessible. Oh, the dream of a lightweight, accessible, standards-compliant, cross-browser-compatible method! Enter Suckerfish Dropdowns.
[/quote]

--

i believe you can get rid of that javascriptsource.com link, or at least comment it out
Copy linkTweet thisAlerts:
@wood1eauthorNov 02.2005 — Heres what I was working on...and stuck on!!! Whihc is a shame...



And this is now what I am working on...
Copy linkTweet thisAlerts:
@wood1eauthorNov 02.2005 — PS what I don;t like about the new menu, is when you refresh the browser the first lines of the drop down part of the menu appears!!!!
Copy linkTweet thisAlerts:
@jogolNov 02.2005 — You might be interested in this code: [URL=http://www.aplus.co.yu/adxmenu/intro/]ADxMenu[/URL]

See some examples [URL=http://www.aplus.co.yu/adxmenu/examples/]here[/URL].

But always mind the [URL=http://www.aplus.co.yu/adxmenu/intro/#browsers]compatibility[/URL] ?
×

Success!

Help @wood1e spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.1,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...