[RESOLVED] [css] POSITIONING.

**rj_yan31** · Sep 1st, 2011, 03:09 AM

Experts, please help me how to use positioning, i tried to use relative and absolute, its working in my banners and images but not in my drop down menu..

the drop down menus(group links) is at the back of the picture...

i attached the files im working on..

help please

thanks..

**noahssite** · Sep 4th, 2011, 07:20 PM

You will get more answers if you use the forum CODE tags to display your code rather than attach it in an attachment.

**rj_yan31** · Sep 4th, 2011, 07:51 PM

Originally Posted by noahssite

You will get more answers if you use the forum CODE tags to display your code rather than attach it in an attachment.

but they can't determine what is wrong if i will not attach the files. ok let me try..

here's the css file:

Code:

/*
#container3{
	width:890px;
    height:500px;
	margin-left:184px;
	top:40px;
}*/
#container2
{
	position:relative;
	top:30px;
	width:950px;
    height:300px;
	margin-left:184px;
 }
 
#toper 
{
    position:relative;
    width:73%;             
    height:164px;  
	margin-left:180px;
 }
 


/*
div.header
{
padding:0.1em;
color:white;
background-color:rgb(25,77,219);
clear:left;
}
*/
div.footer
{
padding:0.5em;
color:white;
background-color:rgb(25,77,219);
/*background-color:rgb(102,139,195);*/
clear:left;
height:30px;
text-align: center;
}

#banner
{
width:190px;
height:30px;
}

div.left
{
float:left;
width:185px;
left:0px;
padding:1em;
/*background-image:url(../images/bgleft.jpg);
background-repeat:repeat;*/
/*background-color:rgb(102,139,195);*/
background-color:rgb(25,77,219);
height:680px;
line-height:120%;
}


#toolImg{
height:50px;
width:120px;
}

p.para1
{
text-indent:5px;
margin-left:12px;
margin-right:10px;
text-align:justify;
font-size:11px;
line-height:30%;
font-family:Georgia,Garamond,Serif;
/*font-weight:bold;*/
color:black;
}
p.para2
{
padding:0;
font-size:11px;
margin-left:10px;
margin-right:10px;
line-height:130%;
text-indent:50px;
text-align:justify;
color:black;
font-family:Georgia,Garamond,Serif;
}
ul
{
color:green;
line-height:130%;
}
h1
{
color:black;
font-family:Algerian,Garamond,Serif;
line-height:50%;
}
h1.dept
{
text-indent:120px;
}
h2{
color:blue;
line-height:30%;
}
h3{
line-height:50%;
color:blue;
text-indent:5px;
}
h5
 {
	position:absolute;
	color:white;
    top:153px;
    left:400px;
}
/*
ul.head
{
position:absolute;
top:148px;
left:410px;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
ul.head1
{
position:absolute;
}-->
a.heads
{
font-size:12px;
width:900px;
text-decoration:none;
color:white;
padding:0em 2em 0em 2em;
border-right:1px solid white;
}
p.addbuttons
{
font-size:12px;
text-decoration:none;
color:white;
padding:0em 3em 0em 2em;
border:1px solid white;
background-color:green;
width:9.5em;
}
a:hover 
{
background-color:background-color:rgb(25,77,219);;
font-size:15px;
background-position:0%;
}
li
 {
 display:inline;
 }*/
 
img.projects
 {	
	height:20;
	width:176px;
 }

div.scrollimg
{
top:4px;
left:178px;
width:178px;
position:absolute;
}
#tools ul{
margin-left:100px;
}
#tools li{
margin-left:30px;
line-height:50%;
}
#tools a{
line-height:50%;
text-decoration:none;
}

#button a:hover{
background-image:url(../images/hprojects.jpg);
}



#nav, #nav ul{
margin:0;
padding:0;
list-style-type:none;
list-style-position:outside;
position:absolute;
line-height:1.3em; 
top:148px;
left:435px;
}

#nav a{
display:block;
border:1px solid #333;
color:#fff;
text-decoration:none;
padding:0em 1.5em 0em 1.95em;
}

#nav a:hover{
color:blue;
}

#nav li{
float:left;
display:inline;
}

#nav ul {
position:absolute;
display:none;
width:10em;
top:1.34em;
}

#nav li ul a{
width:7em;
height:auto;
float:left;
font-size:11px;
margin-left:5.3em;
padding:0em 2em 0em 3em;
position:relative;
background-color:#333;
border:1px solid white;
}

#nav ul ul{
top:auto;
}	

#nav li ul ul {
left:7.7em;
margin:0px 1em 0 10px;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
display:none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
display:block;
}

here's the other one

Code:


body {
    background-color:white;
    background-image:url(../images/bg2.jpg);
    background-repeat:repeat;
 }
 
 /*
#contain 
{
	
    position:relative;
    width:150px;
    height:200px;
    border-width:10px;
    border-style:solid;
    background-color:rgb(25,77,219);
    margin-left:100px;
    background-color:#fffh;
 }*/

#top
{
	background-color:rgb(25,77,219);
    position:absolute;
    width:213px;                 /* this value should match the images width */
    height:218px;                /* this value should match the images height */
	margin-left:-17px;
	z-index:1
 }
 
#bot {
	background-color:rgb(25,77,219);
    position:absolute;
    width:213px;                 /* this value should match the images width */
    height:218px;                /* this value should match the images height */
    margin-left:-17px;
	z-index:0;
 }
#container img {
   border:1px solid #000;
}
div.home
{
	width:100%;
	height:100%;
}

 div.container1
{
position:absolute;
width:71.5%;
margin-left:180px;
border:2px solid blue;

}

div.content
{
margin-left:191px;
/*border-left:5px solid gray;*/
height:690px;
padding:0.5em;
position:relative;
background-image:url(../images/3d4.jpg);
background-repeat:no-repeat;
}
/*
div.footer
{
padding:0.5em;
color:white;
background-image:url(../images/footer.jpg);
clear:left;
height:30px;
text-align: center;

}

div.left
{
float:left;
width:190px;
margin:0px;
padding:1em;
background-image:url(../images/bgleft.jpg);
background-repeat:repeat;
height:680px;
line-height:120%;
}
*/
a.hover button {
background-image:url(../images/hprojects.jpg);
}

div.buttons
{
margin-left:10px;
line-height:10px;
}

table.calendar{
margin-left:-10px;
}

#comp
{
padding:0;
margin:0px;
height:100px;
width:100%;
}

and here's the index.html

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>HOME-3D WEBSITE</title>
<link rel="stylesheet" type="text/css" href="home.css" />
<link rel="stylesheet" type="text/css" href="css/imageFader.css">

<script type="text/javascript" src="scripts/imageFader.js"></script>
<script type="text/javascript" src="scripts/calendar.js"></script>

<script src="src/js/jscal2.js"></script>
<script src="src/js/lang/en.js"></script>
<link rel="stylesheet" type="text/css" href="src/css/jscal2.css" />
<link rel="stylesheet" type="text/css" href="src/css/border-radius.css" />
<link rel="stylesheet" type="text/css" href="src/css/steel/steel.css" />

<script type='text/javascript' src="dropdown/jquery-1.2.3.min.js"></script>
<script type='text/javascript' src="dropdown/menu.js"></script>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>

<!--<script language="javascript" type="text/javascript">
alert("Welcome to 3D WEBSITE! HAve Fun and Enjoy Surfing")
</script>-->

<body>
<div class="home">
<div class="container2">

<div class ="scrollimg" style="margin-bottom:-5px;padding:0px;position: relative; width: 60px; height: 4px; z-index: 2;margin-left:20px;" id="layer1">
            <center>
            <applet name="Template1" code="uPixScreen.class" archive="360/uPixScreen.jar" width=155 height=150>
               <PARAM NAME=licenseFile VALUE="360/_psk2.ext">
               <PARAM NAME=customizationFile VALUE="360/Default.cfg">
               <PARAM NAME=title VALUE="3D">
               <PARAM NAME=titlePos VALUE="0">
               <PARAM NAME=viewType VALUE="1">
               <PARAM NAME=autoPan VALUE="yes">
               <PARAM NAME=autoPanSpeed VALUE="30">
               <PARAM NAME=startYaw VALUE="260">
               <PARAM NAME=startPitch VALUE="0">
               <PARAM NAME=startFOV VALUE="114">
               <PARAM NAME=partialStitch VALUE="no">
               <PARAM NAME=horFov VALUE="360">
               <PARAM NAME=url VALUE="360/3D.JPG" > 
</applet></center></div>
<img id="toper" src="image/bg.gif" alt="" />

<ul id="nav">
    <li><a href="//projsrv03/Group/3D%20System/01_COMMON/06_3D_Online_WEB/03_Common_Working_Folder/08_ALBERTO/3dsite/index.html">Home</a></li>
    <li><a href="#">Forms</a></li>
	<li><a href="#">Organization</a></li>
	<li><a href="#">Forum</a></li>
	<li><a href="#">Gallery</a></li>
    <li><a href="#">Group Links</a>
      <ul>
            <li><a href="#">QUICK LINKS</a>
              <ul>
                    <li><a href="#">CYBOZU</a></li>
                    <li><a href="#">DASH</a></li>
              </ul>
            </li>
            <li><a href="#">IT</a></li>
            <li><a href="#">ADMIN</a></li>
			<li><a href="#">EQUIPMENTS</a></li>
            <li><a href="#">CIVIL</a></li>
			<li><a href="#">PIPING</a></li>
            <li><a href="#">PROCESS</a></li>
      </ul>
    </li>
</ul>
<!--<ul class ="head">
<li><a class="heads" href="//projsrv03/Group/3D%20System/01_COMMON/06_3D_Online_WEB/03_Common_Working_Folder/08_ALBERTO/3dsite/index.html">Home</a></li>
<li><a class="heads" href="#">Forms</a></li>
<li><a class="heads" href="#">Members</a></li>
<li><a class="heads" href="#">Forums</a></li>
<li><a class="heads" href="#">Gallery</a></li>
<li><a class="heads" href="#">Quick Links</a></li>
<li><a class="heads" href="#">Group Links</a>
	<ul class ="head1">
		<li><a class="heads" href="#">IT</a></li>
		<li><a class="heads" href="#">EUIPMENTS</a></li>
	</ul>
</li>
</ul>
-->
</div>
<div class="container1">
<div class="left"><p>
<a id="link" http://localhost/3dsite/">     
<img id="top" src="images/logo.jpg" alt="">

</a><br><br><br><br><br><br><br><br><br><br><br><br><font color='white'><p><hr style="height:0.1em;width:15em;border:1px solid white;" />
"Do not think impossibilities, think and act optimistically."<hr style="width:15em;border:1px solid white;" /></p></font>
<div class="buttons">
<a id = "button" href="\\projsrv03\Group\3D System\01_COMMON\06_3D_Online_WEB\03_Common_Working_Folder\08_ALBERTO\3dsite\project.html"><img class="projects" src="images/projects.jpg" alt="" /></a>
<a id = "button" href="\\projsrv03\Group\3D System\01_COMMON\06_3D_Online_WEB\03_Common_Working_Folder\08_ALBERTO\3dsite\plan.html"><img class="projects" src="images/plans.jpg" alt="" /></a>
<a id = "button" href="\\projsrv03\Group\3D System\01_COMMON\06_3D_Online_WEB\03_Common_Working_Folder\08_ALBERTO\3dsite\events.html"><img class="projects" src="images/events.jpg" alt="" /></a>
</div>
<br>
<table class="calendar">
      <tr>
        <td style="width: 20em">
          <div id="cont"></div>
        </td>
      </tr>
    </table>
    <script type="text/javascript"> 
      Calendar.setup({
              cont          : "cont",
              fdow          : 1,
              selectionType : Calendar.SEL_MULTIPLE,

              checkRange    : function(date, cal) {
                      alert("Date " + date + " cannot be selected");
              }
      });
   </script>
</div>
<div class="content">
<img id="comp" src="images/3dbanner1.jpg" alt=""><br><br>
<p class="para2">The department customizes program and creates databases to make work faster. It does administrative work for
 Plant Engineering Division. It is also helpful in the Engineering stage for the following department: Piping, Electrical, 
 Instrument, Civil and Equipment. The main work of the department is to administer, manage and maintain the system. 
<b>3D System Department</b> has 5 system tools: <strong><a href="\\projsrv03\Group\3D System\01_COMMON\06_3D_Online_WEB\03_Common_Working_Folder\08_ALBERTO\3dsite\PDS.html">PDS</a>, 
<a href="\\projsrv03\Group\3D System\01_COMMON\06_3D_Online_WEB\03_Common_Working_Folder\08_ALBERTO\3dsite\PDMS.html">PDMS</a>, <a href="\\projsrv03\Group\3D System\01_COMMON\06_3D_Online_WEB\03_Common_Working_Folder\08_ALBERTO\3dsite\spf.html">SPF, 
<a href="\\projsrv03\Group\3D System\01_COMMON\06_3D_Online_WEB\03_Common_Working_Folder\08_ALBERTO\3dsite\SP3D.html">SP3D </a>and 
<a href="\\projsrv03\Group\3D System\01_COMMON\06_3D_Online_WEB\03_Common_Working_Folder\08_ALBERTO\3dsite\sprd.html">SPRD</a> .</strong> Each system tool is administered by a Lead Engineering who
 manages the work of each member.
</p> 
<br><br><br>
<h3>Qualifications of a 3D Member:</h3>
<p class="para1"> * knowledge on basic office applications</p>
<p class="para1"> * knowledge on power tools ( OOP Language, Scripting, RDBMS)</p>
<p class="para1"> * Basic Trigonometry and Analytic Geometry</p>
<p class="para1"> * Ability to manage multiple task</p>
<p class="para1"> * Can work with less supervision</p>
<br><br>
<h3>Why use 3D?</h3>
<p class="para1"> * Easy manipulation of data</p>
<p class="para1"> * Data consistency</p>
<p class="para1"> * Accurate input</p>
<p class="para1"> * Lesser time and cost</p>
<p class="para1"> * Efficient 3D Visualization</p>
<p class="para1"> * Clash Checking purposes</p>
</ul>
</div>
<div class="footer">Contact Us @local 204-205<br> All Rights Reserved © 2011 - 3D System Department
</div>
</div>
</body>
</html>

i really need help...

**noahssite** · Sep 4th, 2011, 08:11 PM

Add this to your home.css file:

Code:

#nav li ul
{
z-index: 1;
}

The z-index property controls the stack order of the HTML element. You can read more here: http://www.w3schools.com/cssref/pr_pos_z-index.asp

**rj_yan31** · Sep 4th, 2011, 08:14 PM

Originally Posted by noahssite

Add this to your home.css file:

Code:

#nav li ul
{
z-index: 1;
}

The z-index property controls the stack order of the HTML element. You can read more here: http://www.w3schools.com/cssref/pr_pos_z-index.asp

nothing happen..

**noahssite** · Sep 4th, 2011, 08:44 PM

What web browser did you test it in? I tested it in Mozilla Firefox and Google Chrome.

EDIT: It works in Internet Explorer 9 as well. Did you copy it exactly?

**rj_yan31** · Sep 4th, 2011, 08:46 PM

my browser is IE7. actually i tried to add the code in container1 which is under imageFader.css and it works!

i got it now, i found where the z-index to be place, tnx for the idea noahssite. you really help me a lot..

..

**noahssite** · Sep 4th, 2011, 08:47 PM

Your welcome

Mark the thread as resolved if you have no more questions.

**rj_yan31** · Sep 4th, 2011, 08:50 PM

done! and i added reputation to you even though i really dont understand what will happen if you will earn lot of reputation.. lol .. anyway thanks a lot..

**noahssite** · Sep 5th, 2011, 08:00 AM

added reputation to you even though i really dont understand what will happen if you will earn lot of reputation

Nothing. It's just that. A reputation.

Thread: [RESOLVED] [css] POSITIONING.

Thread Tools

Display

[RESOLVED] [css] POSITIONING.

Re: [css] POSITIONING.

Re: [css] POSITIONING.

Re: [css] POSITIONING.

Re: [css] POSITIONING.

Re: [css] POSITIONING.

Re: [css] POSITIONING.

Re: [css] POSITIONING.

Re: [RESOLVED] [css] POSITIONING.

Re: [RESOLVED] [css] POSITIONING.

Posting Permissions