|
HTML - Dhtml Rollover Menu Positioning Problems
I have this menu to rollover... and I cant seem to get the positioning correct. All I want to do is shift it to the right about 100px so that it doesnt cover up the rest of the menu items.
I will paste the CSS, javascript, and html code here... I have tried positioning it via CSS and thats not working :/ Is there a way to do it in the java code? Or if you want you can say how you would do it in CSS... maybe I just was doing it wrong. CSS Code: #dropmenudiv{
position:absolute;
border:1px solid black;
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
}
#dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 1px 0;
text-decoration: none;
font-weight: bold;
}
#dropmenudiv a:hover{
color:#000000;
background-color: #cc0000;
}
JAVA Code: <script type="text/javascript">
var menu1=new Array()
menu1[0]='<a href="group.html">About (group)</a>'
menu1[1]='<a href="officers.html">Current Officers</a>'
menu1[2]='<a href="officerjoin.html">Become an Officer</a>'
var menu2=new Array()
menu2[0]='<a href="meetings.html">Meetings</a>'
menu2[1]='<a href="alumniday.html">Alumni Day</a>'
menu2[2]='<a href="industryday.html">Industry Day</a>'
var menuwidth='165px'
var menubgcolor='lightyellow'
var disappeardelay=50
var hidemenu_onclick="yes"
var ie4=document.all
var ns6=document.getElementById&&!document.all
if (ie4||ns6)
document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')
function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}
function showhide(obj, e, visible, hidden, menuwidth){
if (ie4||ns6)
dropmenuobj.style.left=dropmenuobj.style.top="-500px"
if (menuwidth!=""){
dropmenuobj.widthobj=dropmenuobj.style
dropmenuobj.widthobj.width=menuwidth
}
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
obj.visibility=visible
else if (e.type=="click")
obj.visibility=hidden
}
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function clearbrowseredge(obj, whichedge){
var edgeoffset=0
if (whichedge=="rightedge"){
var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth
}
else{
var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset
var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up?
edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?
edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge
}
}
return edgeoffset
}
function populatemenu(what){
if (ie4||ns6)
dropmenuobj.innerHTML=what.join("")
}
function dropdownmenu(obj, e, menucontents, menuwidth){
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
clearhidemenu()
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
populatemenu(menucontents)
if (ie4||ns6){
showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)
dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
}
return clickreturnvalue()
}
function clickreturnvalue(){
if (ie4||ns6) return false
else return true
}
function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}
function dynamichide(e){
if (ie4&&!dropmenuobj.contains(e.toElement))
delayhidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhidemenu()
}
function hidemenu(e){
if (typeof dropmenuobj!="undefined"){
if (ie4||ns6)
dropmenuobj.style.visibility="hidden"
}
}
function delayhidemenu(){
if (ie4||ns6)
delayhide=setTimeout("hidemenu()",disappeardelay)
}
function clearhidemenu(){
if (typeof delayhide!="undefined")
clearTimeout(delayhide)
}
if (hidemenu_onclick=="yes")
document.onclick=hidemenu
</script>
HTML Code: <li><a href="events.html" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu2, '150px')" onMouseout="delayhidemenu()">Events</a> </li> Any help would be appreciated! Thanks! Similar TutorialsHello, I'm looking for a DHTML script that will combine a floating menu with a slide in menu. Here's an example of a floating menu: http://www.dynamicdrive.com/dynamici...staticmenu.htm Here's an example of a slide in menu: http://www.dynamicdrive.com/dynamici...lideinmenu.htm Does anybody know where I can get a menu that combines these features? Hey guys I am build ing a site and wanted to no the best solution for a drop down menu system. I read somewhere that 10% of people of javascript disabled so they would not be able to use the javascript dropdown. Is the best option to use dhtml for this so it will work in all browsers old and new. Matt HELLO ALL! I'm new here. Thank you in advanced. I have a dthml menu on my main page. I would like to apply this same menu to all my other web pages with making one update. Currently I have the same code pasted and and script on all my product pages. If I have any changes to make to the menu I have to go and update all 20+ pages with the changes of the drop down menu. on each of my product pages is there any way to reference this one dthml menu to use...I'm hoping this is making sense? I'm using dreamweaver CS3 and I used Sothink's DHTML MENU creator. I'd like it that when I make a change to the dhtml menu it would apply to all my product pages. Thank you Chris I've been helping a friend of mine build a website for a local group of guys that do stunt shows on motorcycles. We've got the page done for the most part, just need some tweeking here and there on most of the pages. I have a question though about the front page we've got set up. Here's a LINK. The four GIF rollover images are really turning into a problem. The only way I could figure out how to place them and have them overlapping each other was by using a Position Absolute tag. That however is causing problems depending on the end user's screen resolution, or if they've got a favorites bar or whatever docked on the browser screen. Would be HIGHLY greatful if someone could point me in the right direction of what I can do to get these images placed inside of the table, while being able to overlap them, and NOT having to deal with absolute positioning. Thanks VERY much in advance for any help! I'm hoping for some help with the code to solve my problem. My site has a page devoted to a series of products. I have the names of the products running down a set of cells on the left side of a table. The product names will be linked to html pages dedicated to each of those products. I've got that under control, no problem. I'm trying to add the extra spiff of a common image area in a large merged cell just the to the right of the navigation cells and I'd like for an image of the specific product to come up in the image area when a user mouses-over the navigation cell. For example, the first nav cell is for "Lathes," so when a user mouses over the word Lathes I want a picture of a lathe to appear in the image area. When they mouse over the nav for bandsaws, I want an image of a bandsaw to come up in the same image area, etc. Is anyone willing to suggest some code to accomplish this little trick? It would be a great help. Thanks. How to make a image rollover based menu that changes image on mouse rollover and on mouse click so when I click the image it stays changed until I click on another image in the menu. I've run into a few problems that don't appear in firefox but do in Internet explorer..The first problem I have is that in IE the content box on the right is bumped down, it looks exactly the way I want in FF, but not in internet explorer. The next problem I'm having is the banner in IE..It seems as if theres a pixel or two underneath of the banner I can't get rid of... Also, any ideas on how I can center the navbar? I can't seem to get it to go in any browsers... page: http://www.ssvfd.com/newsite/history.html css file: http://www.ssvfd.com/newsite/style.css Hi guys. Sorry if I'm inconveniencing you, but I have a really big problem that I can't work out. http://automata.firephoenixnet.com/design/ Could you take a look at that in Firefox and then in IE? Did I miss a margin or something? And, is there a way I can get my footer div always at the bottom of the page without setting a margin-bottom for the sidebar div? Many thanks guys. Hi all, First post here hope someone can help. I'm creating a portfolio web page for my 3D work and using this to learn a bit of web design. My current problem comes from using absolute positioning to get text to float over a background image in a precise location. I have this as I want it in Fiirefox 2.0.0.6 but the text all appears a fair bit higher in IE (I have looked using IE 6 on its own and by changing the render mode to IE in Firefox). I realise I need to do a fair bit of validation and refinement to the site but at the moment I want to get this alignment issue sorted so the site is at least visible while I work on other elements. Page url: www.iamjames.co.uk The text in question is on the used on all pages! Thanks in advance James Usually I wouldn't be so, well...rude, but this is very urgent, I need to finish this website by college tomorrow because if I don't hand in my work, I fail the course. This is in no way illegal, I'm an art student, so I'm being marked solely on the layout and such, not on the coding! As such, any comments or critiques would be greatly appreciated also. Here are some pictures demonstrating my problems: http://img504.imageshack.us/img504/1956/70406583qo6.jpg http://img481.imageshack.us/img481/576/74706440aq5.jpg What's wrong is the positioning of the navigation and main content... the titles should be at their respective black bars right near the top, just below the banner image. I've gotten so rusty, I don't even remember how to do something so simple. Also, for some reason the header titles don't want to be white instead of black. What am I doing wrong? Here is the CSS: Code: body
{
margin: 0;
padding: 0;
background-color: #dcd8e5;
}
body, p, td
{
font-family: trebuchet ms, sans-serif;
font-size: 12px;
color: #000000;
cursor: default;
}
a
{
font-family: trebuchet ms, sans-serif;
font-size: 12px;
color: #000000;
text-decoration: none;
}
a:hover
{
font-family: trebuchet ms, sans-serif;
font-size: 12px;
color: #afa7c1;
font-style: italic;
cursor: help;
}
#wrap
{
margin: 0 auto;
width: 906px;
background-image: url(container.jpg);
}
#topbanner
{
width: 906px;
}
.header
{
padding: 0px;
font-size: 14px;
text-align: center;
text-transform: uppercase;
margin: 2px;
font-color: #ffffff;
font-weight: bold;
}
#nav
{
float: left;
width: 260px;
padding: 20px;
}
#main
{
float: right;
width: 606px;
padding: 20px;
text-align: justify;
top: 300px;
}
#footer
{
clear: both;
text-align: center;
}
And here is the HTML: HTML Code: </head> <body> <div id="wrap"> <div id="topbanner"> <img src="topbanner.jpg" alt=""/> </div> <div id="nav"> <p class="header">Navigate</p> <p> <a href="#">Home</a> <br /> <a href="#">Gallery</a> <br /> <a href="#">Prints</a> <br /> <a href="#">Affiliates</a> <br /> <a href="#">About</a> </p> </div> <div id="main"> <p class="header">Welcome</p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel magna. Mauris risus nunc, tristique varius, gravida in, lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue adipiscing mauris, a nonummy diam ligula ut risus. Praesent varius. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p><p> Nulla a lacus. Nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce pulvinar lobortis purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec semper ipsum et urna. Ut consequat neque vitae felis. Suspendisse dapibus, magna quis pulvinar laoreet, dolor neque lacinia arcu, et luctus mi erat vestibulum sem. Mauris faucibus iaculis lacus. Aliquam nec ante in quam sollicitudin congue. Quisque congue egestas elit. Quisque viverra. Donec feugiat elementum est. Etiam vel lorem. </p><p> Aenean tempor. Mauris tortor quam, elementum eu, convallis a, semper quis, purus. Cras at tortor in purus tincidunt tristique. In hac habitasse platea dictumst. Ut eu lectus eu metus molestie iaculis. In ornare. Donec at enim vel erat tempor congue. Nullam varius. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla feugiat hendrerit risus. Integer enim velit, gravida id, sollicitudin at, consequat sit amet, leo. Fusce imperdiet condimentum velit. Phasellus nonummy interdum est. Pellentesque quam. </p> </div> <div id="footer"> Site & Content © Nicole Turner, 2007, all rights reserved <img src="container.jpg" alt=""> </div> </div> </html> Any help, particularly of the super-speedy variety, is greatly appreciated! Hey guys I'm having a terrible time getting some graphic logos to layout. I know the coloring right now is not looking up to par either so don't judge me too bad I have a header div with a nav div inside and then a content div below this with a swf slide show inside. Basically inside the header div I have 5 graphics and then a nav div nested inside below that. My problem is that I want 2 of the logos aligned to the left and close to centered up/down inside the header div, then I want the main masthead logo centered in the middle of the header div up/down and left/right, and finally I want the other 2 logos floated right and centered up/down. I'm trying various methods and the best I have so far shows the middle masthead logo not correctly centered, and the 2 left logos floating left, but the far 2 right logos do not show up at all. The page is located at http://www.atlanta-web.com and I'll past all of my code below. index.html snippet Code:
<body bgcolor="#FFFFFF" text="#000000" link="#0000FF" vlink="#000080" alink="#800000" leftmargin="0" topmargin="5" marginleft="0" margintop="5">
<script type="text/javascript" src="fsmenu_commented.js"></script>
<script type="text/javascript" src="menuset.js"></script>
<link rel="stylesheet" type="text/css" href="listmenu_h.css" />
<link rel="stylesheet" type="text/css" href="listmenu_h_settings.css" />
<style type="text/css">
#navitoolbarcontainer a {
line-height: 16px;
}
</style>
<div id="header">
<img class="award1" src="nahb.gif" /><img class="award2" src="gahomebuilders.gif" />
<center><img src="Jhomes.jpg" /></center>
<img class="award3" src="southernlivingmember_sm.gif" /><img class="award4" src="lobb.gif" />
<!-- START TOP TOOLBAR -->
<!--<div id="heightcontainer"></div>-->
<div style="width: 100%;" id="navitoolbarcontainer">
<div style="margin: 0px; padding: 0px; width: 100%;">
<div id="navitile" style="width: 100%;">
<ul class="menulist" id="listMenuRoot" style="height:22px;">
<li style="margin-top:0px;">
<a class="gt" href="index.html" style="font-size: 10px; font-family: arial,verdana,helvetica; text-decoration:none;"> <b>Jeffery Homes Inc.</b> </a>
<ul id="listMenu-id-1">
.
.
.
NAV Bar HTML Cut for space sake
.
.
.
<div style="margin-top: 0px;" id="lightgrey">
</div>
</div>
</div>
</div>
</div>
<div id="content" style="width: 100%; background-color: #6B6637">
<div id="slideshow">
<object width="600" height="350">
<param name="movie" value="slideshow1.swf" wmode="transparent">
<embed src="slideshow1.swf" width="600" height="350" wmode="transparent">
</embed>
</object>
<br />
<br />
</div>
</div>
<!-- END TOP TOOLBAR -->
css file1 Code: @charset "UTF-8";
a.gt{ text-decoration:none}
a.gt:hover{text-decoration:none}
a.gt:visited{text-decoration:none}
a.gt:link{text-decoration:none}
a.gt:active{text-decoration:none}
#header { margin: 0px; padding: 0px; width:100%; min-width:830px; width:100%; background-color: #AFAB73; position: absolute; left: 0px; top:0px; font-family: arial, verdana, helvetica; font-size: 8px; white-space: nowrap; z-index: 0}
.award1 { float:left }
.award2 { float:left }
.award3 { float: right }
.award4 { float: right }
#navitile{width:820px; margin-left:0px; height:22px; background-repeat:repeat-x; position:absolute; color: #F2FFE4; left:0px; top: 0px; font-family:arial,verdana,helvetica; font-size:8px; white-space:nowrap; }
#navtile a{ color: #F2FFE4 }
#navitoolbarcontainer{width:100%; min-width:830px; width:100%; height:22px; position:absolute; top: 100px; left:0px; font-family:arial,verdana,helvetica; font-size:8px; background-image:url('background_end_fixed.png'); background-repeat:repeat-x; white-space:nowrap; margin:0px; padding:0px; z-index:1000}
#navitoolbarcontainer a{color: #F2FFE4}
#content {margin: 0px; padding: 0px; width:100%; min-width:830px; width:expression('100%'); position: absolute; left: 0px; top: 122px; font-family: arial, verdana, helvetica; font-size: 8px; white-space: nowrap; z-index: 1}
#slideshow {
margin: 0 auto;
position: relative;
top: 30px;
height: 480px;
width: 600px;
}
#heightcontainer{position:relative; height:17px; width:99%; background:transparent;}
#globalform{padding:0px; margin:0px}
#lightgrey{text-align:left; color: #F2FFE4; text-indent:5px; background-image:url('background_end_fixed.png')}
#lightgrey .inputglobal{font-size:9px; font-size:expression('8px'); text-align:left; margin-top:0px; margin-left:2px; background-repeat:no-repeat}
#lightgrey .inputglobal:hover{font-size:9px; text-align:left; margin-top:0px; background-color:#ccc}
#lightgrey a{font-family:sans-serif; text-decoration:none; color: #F2FFE4; text-decoration:none; FONT-SIZE:10px; padding:0px; top:1px; top:expression('-2px'); position:relative}
#lightgrey a:link{text-decoration:none; color: #F2FFE4; text-decoration:none; FONT-SIZE:10px}
#lightgrey a:visited{display:inline; text-decoration:none; color: #F2FFE4; text-decoration:none; FONT-SIZE:10px; padding:0px; margin:0px}
#lightgrey a:active{display:inline; text-decoration:none; color: #F2FFE4; text-decoration:none; FONT-SIZE:10px; padding:0px; margin:0px}
#lightgrey a:hover{display:inline; text-decoration:none; color:#fcf2ca; text-decoration:none; FONT-SIZE:10px; padding:0px; margin:0px}
A lot of this css is for the menus that i found on a site and have highly modifed, but I've used class/id's for most of everything so it should be easy to see what is what. Thanks for any help that you all can provide. This site has been a godsend for getting help. So I just decided to redesign my website, and I learned the wonders of "position: absolute" and the left, right, top, and bottom CSS tags. But of course, with that comes some issues (and other things, like me having to think about people with different browsers/resolution settings than me). Some of my problems are as follows (captions of the problem are under the images) When the text overflows here, it just leaves the <div> tag... well... multiple <div> tags. This one takes the body <div> with it.. but doesn't let the bottom page image extend down. Top filler image doesn't extend all the way, body <div> doesn't connect properly to fade images. So as you can see, my big problem is the overflow, which really needs to be fixed. Don't know what the problem is with Opera there, but it's something else that should be checked out. So anyway, here's my code for the website. If you have any ideas for how to improve it/make it work better, then I'm happy with that. Don't worry about validation right now, though. I'm saving that for later. HTML Code: <html>
<head>
<title>Home - Alex Crooks Webdesign</title>
<style type="text/css">
body
{
margin: 0px;
background-color: #035b07;
font-size: 10pt;
color: white;
font-family: verdana, arial, sans-serif;
}
a
{
text-decoration: none;
color: white;
}
a:hover
{
text-decoration: underline;
color: white;
}
img
{
border: 0px;
}
.navlink
{
font-size: 16pt;
font-variant: small-caps;
font-weight: bold;
}
#navlinks
{
text-align: right;
vertical-align: middle;
padding: 5px 10px 0px 10px;
}
#topleft
{
position: absolute;
top: 0px;
left: 0px;
float: left;
width: 141px;
height: 228px;
background-image: url(topleft.gif);
z-index: -11;
}
#topfiller
{
position: absolute;
top: 0px;
width: 100%;
height: 155px;
background-image: url(topfiller.gif);
z-index: -12;
}
#left
{
float: left;
position: absolute;
left: 0px;
width: 65px;
height: 100%;
background-image: url(leftfiller.gif);
z-index: -13;
}
#bottomleft
{
position: absolute;
bottom: 0px;
left: 0px;
float: left;
width: 137px;
height: 134px;
background-image: url(bottomleft.gif);
z-index: -11;
}
#bottomfiller
{
position: absolute;
bottom: 0px;
width: 100%;
height: 67px;
background-image: url(bottomfiller.gif);
z-index: -12;
}
#nav
{
margin: 100px 0px 0px 65px;
margin-top: 100px;
height: 40px;
width: auto;
background-image: url(navbg.gif);
color: white;
}
.sep
{
vertical-align: middle;
width: 2px;
height: 25px;
padding: 0px 5px 0px 5px;
}
#bodyright
{
position: absolute;
top: 273px;
right: 200px;
bottom: 104px;
height: auto;
width: 22px;
background-image: url(bodyright.gif);
z-index: -7;
}
#body
{
padding: 5px 5px 5px 5px;
position: absolute;
top: 273px;
right: 221px;
bottom: 104px;
left: 200px;
width: auto;
height: auto;
background-color: white;
color: black;
z-index: 0;
}
#bodybottom
{
float: left;
position: absolute;
left: 246px;
right: 221px;
bottom: 87px;
left: 200px;
width: auto;
height: 17px;
background-image: url(bodybottom.gif);
z-index: -7;
}
#bodycornerleft
{
position: absolute;
bottom: 87px;
left: 200px;
width: 46px;
height: 18px;
background-image: url(bodycorner1.gif);
z-index: -6;
}
#bodycornerright
{
position: absolute;
right: 205px;
bottom: 87px;
width: 17px;
height: 17px;
background-image: url(bodycorner2.gif);
z-index: -7;
}
</style>
</head>
<body>
<div id="left"></div>
<div id="top">
<a href="index2.html"><img style="padding: 5px 0px 0px 5px;" src="crookslogo.png" /></a>
<div id="topleft"></div>
<div id="topfiller"></div>
</div>
<div id="nav">
<div id="navlinks">
<a class="navlink" href="">Home</a> <img class="sep" src="navseparate.gif" />
<a class="navlink" href="">Features</a> <img class="sep" src="navseparate.gif" />
<a class="navlink" href="">Blog</a> <img class="sep" src="navseparate.gif" />
<a class="navlink" href="">Clients</a> <img class="sep" src="navseparate.gif" />
<a class="navlink" href="">Products</a>
</div>
</div>
<div id="content">
<div id="body">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac enim sapien, vel tristique sapien. Vivamus erat purus, feugiat non porttitor id, cursus at sapien. Curabitur eleifend, leo facilisis consequat faucibus, ante eros bibendum tellus, et dictum nibh mi laoreet turpis. Proin pellentesque, nulla et ornare pretium, ipsum lectus faucibus mi, sed dictum purus ipsum a ante. Aenean nibh odio, porttitor a volutpat ut, euismod vitae nisi. Integer urna turpis, ultrices ullamcorper porttitor in, placerat ut metus. Sed venenatis nisl in elit faucibus non consectetur quam commodo. Pellentesque ut augue massa, ac iaculis elit. Integer eu quam nisi, non faucibus neque. Donec sit amet magna at nulla commodo cursus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec tellus mauris, congue ut lobortis nec, adipiscing eu arcu. Suspendisse congue consectetur ante at porttitor. Maecenas sapien nibh, porttitor non pellentesque sed, sodales eu dui.
</p>
<p>
Nullam sodales malesuada lorem, et cursus velit malesuada nec. Phasellus vestibulum elit quis nunc semper vel accumsan dui lobortis. Nunc viverra tortor tincidunt dolor congue quis porta tortor auctor. Sed porta neque ac libero tristique varius. Nam id nisi lectus. Integer consectetur magna id erat volutpat adipiscing. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer risus sem, interdum sed eleifend at, tincidunt in odio. Vestibulum euismod mauris eget magna semper sit amet feugiat risus varius. Mauris non neque et arcu ultricies venenatis a non mauris. Nulla facilisi. Donec sem turpis, porttitor et posuere id, posuere eget diam. Vestibulum et aliquam nibh. Phasellus quis ligula mauris, non porttitor sapien. Duis eu est id elit blandit vestibulum quis non urna. Maecenas enim augue, cursus faucibus tincidunt eget, cursus sed sem. Curabitur dictum dolor id massa bibendum vel tincidunt nunc volutpat. Nunc lobortis augue vitae ante porta eget mattis nisl faucibus. Ut sodales lorem vel dolor malesuada bibendum. Maecenas eget neque in elit semper rhoncus.
</p>
<p>
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec aliquet semper volutpat. Suspendisse vitae sapien pulvinar mi egestas ornare quis nec sapien. Pellentesque nec ipsum ligula, sed ultricies lectus. Duis eu ipsum et dui vehicula luctus. Sed mollis rutrum dui elementum consectetur. Nunc viverra tortor quis tellus semper a imperdiet nisl suscipit. Nullam et dolor at purus dignissim faucibus eu vitae quam. Proin lacus ante, tempus ut ullamcorper id, mattis vitae eros. Vivamus mauris lorem, interdum at ultrices in, ultrices non metus. Phasellus convallis lobortis sem, sit amet convallis ante dignissim in. Nullam id mollis nibh. Pellentesque lobortis convallis erat, suscipit lobortis velit euismod ultricies.
</p>
<p>
Cras mollis imperdiet dignissim. Nulla sit amet elementum dolor. Curabitur luctus vestibulum sodales. Quisque eu odio velit, et pretium diam. Maecenas porttitor metus et mauris mattis sit amet facilisis odio sagittis. Aenean at turpis ac sapien ultrices pellentesque vel id erat. In ultrices pharetra erat, pulvinar molestie nisi hendrerit id. Mauris nunc eros, consequat in ultrices sed, malesuada non magna. Etiam dictum ultricies blandit. Vestibulum augue ipsum, malesuada a ullamcorper vel, porta accumsan nunc. Quisque dapibus posuere neque, sit amet lacinia justo tempus nec. Curabitur sit amet tortor nulla. Sed enim quam, facilisis eu dapibus quis, vestibulum at erat. Cras placerat sagittis eros, ac faucibus tellus ultricies vitae.
</p>
<p>
Aenean commodo enim facilisis tellus lacinia sit amet vulputate est condimentum. Vivamus viverra vehicula felis sed rhoncus. Donec sed imperdiet est. Proin molestie velit nec urna lacinia vel fermentum sem tincidunt. Maecenas rutrum sollicitudin varius. Donec et ligula semper eros euismod interdum. Aenean ultricies magna sed nisl consectetur venenatis. Nullam quis orci sapien. Curabitur pellentesque lacinia ante, id pharetra risus sagittis id. Etiam metus turpis, rutrum vel faucibus nec, feugiat rutrum nibh. Donec fringilla sagittis ligula, nec varius felis dapibus eu. Curabitur felis quam, fermentum non eleifend ac, faucibus vel libero. In nec leo ut nulla sagittis scelerisque nec in orci.
</p>
</div>
<div id="bodyright"></div>
<div id="bodycornerleft"></div>
<div id="bodybottom"></div>
<div id="bodycornerright"></div>
</div>
<div id="bottom">
<div id="bottomleft"></div>
<div id="bottomfiller"></div>
</div>
</body>
</html>
Hi, Ive spent hours upon hours painfully sculpting this website and i can't for the love of gaaawd get the positioning of my element standard throughout the website. The home page and the watercolour-classes page have the bottom graphics bar in the same position But different from all the other pages. All i want it to do is be the same throughout and its only out by about 10px. why oh why Ive been struggling for days and weeks with this problem and cant work it out. Im sure its something simple but as a self taught web designer i dont know it all.... far from it. Any ideas or suggestions Please. The website is http://www.miriartist.co.uk Any help or light on the matter would be great THANKS Cheeeers Ben Please can someone help me? The little arrows at the top of the drop down menu's are covering the last few letters of the menu names - see http://www.marcoolasurfclub.com.au/M...ide/index.html Can anyone help me bring this down a bit so that you can still easily read the menu items? I've tried all sorts of things with no luck and I need to make these pages live urgently. Thanks! I'm trying to make an image appear/change in response to a rollover, but the image is not in the same table as the rollover. I'm trying to redesign the header of my website, and have come up with this draft: bottleweb.org/test I want an image to appear in between the "BOTTLEWEB.ORG" text and the buttons. If for example I move my mouse over the 'forum' button, I want an image corresponding to 'forum' to appear in between the buttons and the "BOTTLEWEB.ORG" test. Is this possible? Hi all, [LINK REMOVED] Just in the process of changing this website from a black layout with a background to an all white layout... I'm wishing I had started from scratch now but I stupidly tried to work with the existing site. So anyyways you can ignore the crappy looking bits because my question is just about the menu bar at the top... It's made from an inline list. Is there any way that I could spread it out across the screen, so that the menu item on the right is hard up against the right? The other thing is that the site will be in 3 or 4 languages so the menu items will have more characters in Spanish (for example). It needs to be able to adapt, or I need to implement a different solution for each language. The html looks like this: Code: <!-- main navigation --> <ul id="nav"> <li class="home"> <a href="index.htm"><span>Home</span></a> </li> <li> <div> <ul> <li><a href="message-from-director.htm">Message From Director</a></li> <li><a href="what-is-15-15.htm">What is 15/15?</a></li> <li><a href="festival-history.htm">Festival History</a></li> <li><a href="judges-special-guests.htm">Judges & Special Guests</a></li> </ul> </div><a href="#"><span>About 15/15</span></a> </li> <li> <div> <ul> <li><a href="register-now.php">Register Now</a></li> <li><a href="get-ready.htm">Get Ready</a></li> <li><a href="conditions-of-entry.htm">Conditions of Entry</a></li> <li><a href="faq.htm">FAQ</a></li> </ul> </div><a href="#"><span>How To Enter</span></a> </li> <li> <div> <ul> <li><a href="screening-information.htm">Screening Information</a></li> <li><a href="nominations.htm">2009 Nominations</a></li> </ul> </div><a href="#"><span>Programme</span></a> </li> <li> <div> <ul> <li><a href="films.htm">Films</a></li> <li><a href="festival-trailers.htm">Festival Trailers</a></li> </ul> </div><a href="#"><span>Archives</span></a> </li> <li> <div> <ul> <li><a href="festival-sponsors.htm">2009 Festival Sponsors</a></li> </ul> </div><a href="#"><span>Sponsors</span></a> </li> <li> <div> <ul> <li><a href="press-releases.htm">Press Releases</a></li> <li><a href="images.htm">Images</a></li> </ul> </div><a href="#"><span>Newsroom</span></a> </li> <li class="contact"> <div> <ul> <li><a href="contact-us.php">Contact Us</a></li> <li><a href="15-15-committee.htm">15/15 Committee</a></li> </ul> </div><a href="#"><span>Contact</span></a> </li> </ul> ...and the CSS looks like this: Code: #nav {
font-size: 15px;
line-height: 20px;
list-style: none;
padding: 0;
position: absolute;
top: 250px;
left:-5px;
width: 750px;
}
#nav li {
display: inline;
float: left;
margin: 0 0 0 0px;
position: relative;
}
#nav a {
color: #000;
float: left;
text-decoration: none;
}
#nav a span {
cursor: pointer;
float: left;
display: inline;
font-weight: bold;
line-height: 30px;
padding: 0 5px;
}
#nav li.hover a,
#nav li:hover a {
background: url(../img/active-l.gif) no-repeat 0 0;
}
#nav li.hover a span,
#nav li:hover a span {
background: url(../img/active-r.gif) no-repeat 100% 0;
}
#nav .contact div {
background: #D3D2D2 url(../img/bg-bg-t2.gif) no-repeat 0 -1px;
left: auto;
right: 0;
}
* html #nav .contact div {
right: -1px;
}
#nav div {
background: #D3D2D2 url(../img/bg-bg-t.gif) no-repeat 0 -1px;
display: none;
left: 0;
padding: 5px 0 0;
position: absolute;
top: 30px;
width: 168px;
z-index: 100;
}
#nav li.hover div,
#nav li:hover div {
display: block;
}
#nav div ul {
background: url(../img/bg-b.gif) no-repeat 0 100%;
list-style: none;
margin: 0;
overflow: hidden;
padding: 0 0 5px;
text-transform: none;
width: 168px;
}
#nav div ul li {
margin: 0;
padding: 0;
width: 168px;
}
#nav li.hover div ul li a,
#nav li:hover div ul li a {
background: none;
color: #000;
display: block;
line-height: 30px;
padding: 0 0 0 9px;
width: 159px;
}
#nav li.hover div ul li a:hover,
#nav li:hover div ul li a:hover {
background: #D9581F;
}
Any ideas? Thanks so much in advance... Neil I am having problems with my drop down menu in both IE6 and IE7 it is not showing the borders on the list items menu markup Code: <ul id="topMenu" class="topMenuHoriz">
<li><a href="index.php">Home</a></li>
<li><a href="portfolio.php">Our Work</a></li>
<li><a href="services.php" onmouseover="setMenu('topMenuSub')" onmouseout="clearMenu('topMenuSub')">Services</a></li>
<li><a href="contact.php">Get in Touch</a></li>
</ul>
<ul id="topMenuSub" class="topMenuVert" onmouseover="setMenu('topMenuSub')" onmouseout="clearMenu('topMenuSub')">
<li><a href="basicPackage.php">Basic Package</a></li>
<li><a href="starterPackage.php">Starter Package</a></li>
<li><a href="smallBusinessPackage.php">Small Business Package</a></li>
<li><a href="blogsPackage.php">Blogs</a></li>
<li><a href="cmsPackage.php">Content Management Systems</a></li>
<li><a href="logoDesign.php">Logo Design</a></li>
</ul>
Menu CSS Code: ul#topMenu {
float: right;
width: 600px;
height: 38px;
padding-top: 10px;
}
ul#topMenu li {
float: left;
width: auto;
margin-left: 20px;
}
ul#topMenu a {
display: block;
color: #FFF;
font-size: 1.4em;
text-align: center;
padding: 10px;
}
ul.topMenuVert {
position: absolute;
top:58px;
left: 570px;
visibility: hidden;
width: 180px;
height: auto;
}
ul.topMenuVert li a{
color:#FFF;
font-size: 1.2em;
text-decoration: none;
display: block;
padding: 5px 0px 5px 0px;
}
ul.topMenuVert li {
width: 180px;
height: 15px;
background-color: #2871aa;
border-bottom: #236293 1px solid;
border-top: #3d87c1 1px solid;
line-height: 5px;
padding: 5px;
}
ul.topMenuVert li:hover {
background-color: #206295;
}
See image ie and ie7 menu problem.jpg Hi guys, my name is Paolo and I'm newbie I don't speak English very well because my native language is Italian (I live in Switzerland, so..). This is my Menu HTML code: PHP Code: <div id="telefilm-menu"> <ul> <li class="first"></a> <li><a href="http://www.telefilmnetwork.com/greek/" class="right current">Sommario</a></li> <li><a href="http://www.telefilmnetwork.com/greek/news/" class="right">News</a></li> <li><span class="right">Episodi</span></li> <li><span class="right">Cast</span></li> <li><span class="right">Immagini</span></li> <li><span class="right">Video</span></li> <li><span class="right">Musica</span></li> <li><span class="right">DVD</span></li> <li><span class="right">Extra</span></li> <li><span>Forum</span></li> <li class="last"></a> </ul> </div> The CSS style: PHP Code: #telefilm-menu { margin: 124px 0 0 10px; font-weight: bold; } #telefilm-menu li.first { width: 10px; height: 36px; background: url("telefilmenu-sx.gif") no-repeat top left; padding: 0; } #telefilm-menu li.last { width: 10px; height: 36px; background: url("telefilmenu-rx.gif") no-repeat top left; padding: 0; } #telefilm-menu ul{ margin:0; padding:0; list-style-type:none; width:auto; float:left; height: 36px; } #telefilm-menu ul li{ display:block; float:left; margin:0; background: url("telefilmenu.gif") repeat-x top left; color:#cccccc; text-decoration:none; line-height: 36px; vertical-align: middle; padding: 0 5px 0; } #telefilm-menu ul li span.right{ background: url("telefilmenu-border.gif") no-repeat bottom right; display:block; line-height: 36px; padding-right: 10px; } #telefilm-menu ul li a{ display:block; float:left; color:#000000; text-decoration:none; line-height: 36px; vertical-align: middle; padding: 0 8px 0 8px; } #telefilm-menu ul li a.right{ background: url("telefilmenu-border.gif") no-repeat bottom right; display:block; line-height: 36px; padding-right: 10px; padding-left: 10px; } #telefilm-menu ul li a.current{ display:block; float:left; color:#ffffff; text-decoration:none; line-height: 36px; vertical-align: middle; background: #006f9f; } #telefilm-menu ul li a.current:hover{ color:#ffffff; text-decoration:none; } #telefilm-menu ul li a:hover{ color: #000000; text-decoration: underline; That's what appear: The problem is that when there is the blue background (as color, not image), the "bar" on the right doesn't appear because is also as background.. I would like to get this: I don't really know how to do that...Can anybody help me please? Thanks in advance, Paolo. PS: sorry for the time, but where I live it 's midday Hello everyone I have done a site in ASP. The ASP code fills a List/Menu from a database using a loop. The problem I am having is how do get the items inside the List/Menu to act as link to re-load the page. Here is the code for the list. It is a standard form/list menu affair for an HTML form. I have tried everything I know...Ireally dont want to use Javascript, is that the only option? <select name="select" class="style1_1" style="width:150px;" > <% Do While Not rsEaseData.EOF %> <option> <%=rsEaseData.Fields("Serial No").Value%> </option> <% rsEaseData.MoveNext Loop %> </select> Please Help |
|||||||