Hi guys,
i'm pleased to be here and i hope that somebody of you could solve this issue:
I'm developing a portal for students for a university assignment.
I've got an interactive navigation menu (JavaScript) and i've added a border behind it where i'd like to display a text which recalls the name of the page it is about.
The only problem is that the text gets displayed behind the border and i can't figure it out how to show it above.
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Compy/Universities</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <link rel="stylesheet" href="css/universities.css" type="text/css" charset="utf-8"/> </head> <style> body{ margin:0px; padding:0px; background-color:#f0f0f0; font-family:Arial; } .back{ display:block; background:transparent url(back.png) no-repeat top left; width:281px; height:143px; } a.dry{ position:absolute; bottom:10px; right:10px; color:#000; font-weight:bold; font-size:16px; } </style> <body> <div id="prova"> <p>Universities</p> </div> <div class="navigation"> <ul class="menu" id="menu"> <li><span class="lock"></span><a href="login.html" class="first">Login</a></li> <li><span class="uni"></span><a href="universities.html">Universities</a></li> <li><span class="ruler"></span><a href="highschool.html">HighSchool</a></li> <li><span class="cap"></span><a href="stages.html">Stages</a></li> <li><span class="checkbox"></span><a href="thesis.html">Thesis</a></li> <li><span class="house"></span><a href="rents.html">Rents</a></li> <li><span class="diagram"></span><a href="booksandmag.html">Books&Mag</a></li> <li><span class="hands"></span><a href="forum.html" class="last">Forum</a></li> </ul> </div> <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript"> $(function() { var d=1000; $('#menu span').each(function(){ $(this).stop().animate({ 'top':'-17px' },d+=250); }); $('#menu > li').hover( function () { var $this = $(this); $('a',$this).addClass('hover'); $('span',$this).stop().animate({'top':'40px'},300).css({'zIndex':'10'}); }, function () { var $this = $(this); $('a',$this).removeClass('hover'); $('span',$this).stop().animate({'top':'-17px'},800).css({'zIndex':'-1'}); } ); }); </script> </body> </html>
CSS
#prova { background-color: #87B0B0; position: absolute; padding-left: 100%; color: black; text-align: left; line-height: 15px; } .navigation{ position:relative; margin:0 auto; width:1100px; } ul.menu{ list-style:none; font-family:"Verdana",sans-serif; border-top:1px solid #bebebe; margin:0px; padding:0px; float:left; } ul.menu li{ float:left; } ul.menu li a{ text-decoration:none; background:#7E7E7E url(../images/bgMenu.png) repeat-x top left; padding:15px 0px; width:128px; color:#333333; float:left; text-shadow: 0 1px 1px #fff; text-align:center; border-right:1px solid #a1a1a1; border-left:1px solid #e8e8e8; font-weight:bold; font-size:13px; -moz-box-shadow: 0 1px 3px #555; -webkit-box-shadow: 0 1px 3px #555; } ul.menu li a.hover{ background-image:none; color:#fff; text-shadow: 0 -1px 1px #000; } ul.menu li a.first{ -moz-border-radius:0px 0px 0px 10px; -webkit-border-bottom-left-radius: 10px; border-left:none; } ul.menu li a.last{ -moz-border-radius:0px 0px 10px 0px; -webkit-border-bottom-right-radius: 10px; } ul.menu li span{ width:64px; height:64px; background-repeat:no-repeat; background-color:transparent; position:absolute; z-index:-1; top:80px; cursor:pointer; } ul.menu li span.lock{ background-image:url(../images/login.png); left:33px; /*128/2 - 32(half of icon) +1 of border*/ } ul.menu li span.uni{ background-image:url(../images/university.png); left:163px; /* plus 128 + 2px of border*/ } ul.menu li span.ruler{ background-image:url(../images/school.png); left:293px; } ul.menu li span.cap{ background-image:url(../images/stages.png); left:423px; } ul.menu li span.checkbox{ background-image:url(../images/thesis.png); left:553px; } ul.menu li span.house{ background-image:url(../images/rents.png); left:683px; } ul.menu li span.diagram{ background-image:url(../images/books.png); left:813px; } ul.menu li span.hands{ background-image:url(../images/forum.png); left:943px; } .cs-text { font-size: 50px; text-transform: uppercase; margin: 80px auto 0 auto; width: 580px; height: 100px; padding-left: 700px; padding-top: 200px; font-family: 'McLaren', Arial; font-weight: 400; position: absolute; }
The problems then concerns the "prova" field.
Hope to hear from you soon.
Thanks
Hi gabrieleguidoni, I think
Hi gabrieleguidoni,
I think the problem is that #prover is positioned absolute which takes it out of the document flow. Other elements ignore it.
Try Position:relative.
I'd like it to be that easy
I'd like it to be that easy but unfortunately changing it to relative just makes the border become thinner and slides the navigation menu below instead of overlapping it. And moreover the text does not show at all...
Can you provide an image of
Can you provide an image of what you want it to look like, and how it looks before adding the position relative?
I can't visualise what you want.
This is what happen when I
This is what happen when I set it: relative
This is what happen when I set it: absolute
This is what i'd like it to be (similar font but the idea is pretty much this):
You are trying todo things
You are trying todo things the hard way
Replace the body with:
<div id="prova"> <p>Universities</p> <div class="navigation"> <ul class="menu" id="menu"> <li><span class="lock"></span><a href="login.html" class="first">Login</a></li> <li><span class="uni"></span><a href="universities.html">Universities</a></li> <li><span class="ruler"></span><a href="highschool.html">HighSchool</a></li> <li><span class="cap"></span><a href="stages.html">Stages</a></li> <li><span class="checkbox"></span><a href="thesis.html">Thesis</a></li> <li><span class="house"></span><a href="rents.html">Rents</a></li> <li><span class="diagram"></span><a href="booksandmag.html">Books&Mag</a></li> <li><span class="hands"></span><a href="forum.html" class="last">Forum</a></li> </ul> </div> </div>
Then the menu is starting nearly where you want it.
I simplified your styles a little:
#prova { background-color: #87B0B0; position: relative; color: black; text-align: left; line-height: 15px; overflow:hidden; } #prova p{ float:left; } .navigation{ margin-left:1em; float:left; } ul.menu{ list-style:none; font-family:"Verdana",sans-serif; border-top:1px solid #bebebe; margin:0px; padding:0px; float:left; } ul.menu li{ float:left; } ul.menu li a{ text-decoration:none; background:#7E7E7E url(../images/bgMenu.png) repeat-x top left; padding:15px 0px; width:128px; color:#333333; float:left; text-shadow: 0 1px 1px #fff; text-align:center; border-right:1px solid #a1a1a1; border-left:1px solid #e8e8e8; font-weight:bold; font-size:13px; -moz-box-shadow: 0 1px 3px #555; -webkit-box-shadow: 0 1px 3px #555; } ul.menu li a.hover{ background-image:none; color:#fff; text-shadow: 0 -1px 1px #000; } ul.menu li a.first{ -moz-border-radius:0px 0px 0px 10px; -webkit-border-bottom-left-radius: 10px; border-left:none; } ul.menu li a.last{ -moz-border-radius:0px 0px 10px 0px; -webkit-border-bottom-right-radius: 10px; } ul.menu li span{ width:64px; height:64px; background-repeat:no-repeat; background-color:transparent; top:80px; cursor:pointer; } ul.menu li span.lock{ background-image:url(../images/login.png); } ul.menu li span.uni{ background-image:url(../images/university.png); } ul.menu li span.ruler{ background-image:url(../images/school.png); } ul.menu li span.cap{ background-image:url(../images/stages.png); } ul.menu li span.checkbox{ background-image:url(../images/thesis.png); } ul.menu li span.house{ background-image:url(../images/rents.png); } ul.menu li span.diagram{ background-image:url(../images/books.png); } ul.menu li span.hands{ background-image:url(../images/forum.png); } .cs-text { font-size: 50px; text-transform: uppercase; margin: 80px auto 0 auto; width: 580px; height: 100px; padding-left: 700px; padding-top: 200px; font-family: 'McLaren', Arial; font-weight: 400; position: absolute; }
There's more to do but that should get you mst of the way.
Thanks for your help but
Thanks for your help but although now it seems positioned better (even if the navigation menu should be in the centre while now it's on the left) the dynamic flow of icons does not work anymore. I don't know why but this is more tricky than expected.
Up!
Up!
Display a text within a border
Thanks !!!