8 replies [Last post]
gabrieleguidoni
gabrieleguidoni's picture
Offline
newbie
Turin/Milan/Verona, Italy
Last seen: 7 years 29 weeks ago
Turin/Milan/Verona, Italy
Timezone: GMT+1
Joined: 2013-11-06
Posts: 5
Points: 6

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

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 5 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

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.

gabrieleguidoni
gabrieleguidoni's picture
Offline
newbie
Turin/Milan/Verona, Italy
Last seen: 7 years 29 weeks ago
Turin/Milan/Verona, Italy
Timezone: GMT+1
Joined: 2013-11-06
Posts: 5
Points: 6

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...

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 5 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

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.

gabrieleguidoni
gabrieleguidoni's picture
Offline
newbie
Turin/Milan/Verona, Italy
Last seen: 7 years 29 weeks ago
Turin/Milan/Verona, Italy
Timezone: GMT+1
Joined: 2013-11-06
Posts: 5
Points: 6

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):

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 5 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

You are trying todo things

You are trying todo things the hard way Smile

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.

gabrieleguidoni
gabrieleguidoni's picture
Offline
newbie
Turin/Milan/Verona, Italy
Last seen: 7 years 29 weeks ago
Turin/Milan/Verona, Italy
Timezone: GMT+1
Joined: 2013-11-06
Posts: 5
Points: 6

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.

gabrieleguidoni
gabrieleguidoni's picture
Offline
newbie
Turin/Milan/Verona, Italy
Last seen: 7 years 29 weeks ago
Turin/Milan/Verona, Italy
Timezone: GMT+1
Joined: 2013-11-06
Posts: 5
Points: 6

Up!

Up! Smile

thientuoanh
thientuoanh's picture
Offline
newbie
Last seen: 7 years 29 weeks ago
Timezone: GMT+7
Joined: 2013-11-19
Posts: 1
Points: 1

Display a text within a border

Thanks !!! Smile