Display a text within a border

8 replies [Last post]

Wed, 2013-11-06 12:25

gabrieleguidoni

Offline

newbie

Turin/Milan/Verona, Italy

Last seen: 8 years 45 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

Tags:

Thu, 2013-11-07 05:14

Tony

Offline

Moderator

Brisbane

Last seen: 5 days 10 hours ago

Brisbane

Timezone: GMT+10

Joined: 2003-03-12

Posts: 5344

Points: 2965

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.

Thu, 2013-11-07 13:36

gabrieleguidoni

Offline

newbie

Turin/Milan/Verona, Italy

Last seen: 8 years 45 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...

Thu, 2013-11-07 23:12

Tony

Offline

Moderator

Brisbane

Last seen: 5 days 10 hours ago

Brisbane

Timezone: GMT+10

Joined: 2003-03-12

Posts: 5344

Points: 2965

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.

Fri, 2013-11-08 00:45

gabrieleguidoni

Offline

newbie

Turin/Milan/Verona, Italy

Last seen: 8 years 45 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):

Fri, 2013-11-08 01:28

Tony

Offline

Moderator

Brisbane

Last seen: 5 days 10 hours ago

Brisbane

Timezone: GMT+10

Joined: 2003-03-12

Posts: 5344

Points: 2965

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.

Tue, 2013-11-12 01:10

gabrieleguidoni

Offline

newbie

Turin/Milan/Verona, Italy

Last seen: 8 years 45 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.

Sun, 2013-11-17 15:08

gabrieleguidoni

Offline

newbie

Turin/Milan/Verona, Italy

Last seen: 8 years 45 weeks ago

Turin/Milan/Verona, Italy

Timezone: GMT+1

Joined: 2013-11-06

Posts: 5

Points: 6

Up!

Tue, 2013-11-19 03:53

thientuoanh

Offline

newbie

Last seen: 8 years 45 weeks ago

Timezone: GMT+7

Joined: 2013-11-19

Posts: 1

Points: 1