Sep 1st, 2011, 03:09 AM
#1
Thread Starter
Lively Member
Sep 4th, 2011, 07:20 PM
#2
Frenzied Member
Re: [css] POSITIONING.
You will get more answers if you use the forum CODE tags to display your code rather than attach it in an attachment.
Sep 4th, 2011, 07:51 PM
#3
Thread Starter
Lively Member
Re: [css] POSITIONING.
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...
Attached Images
Last edited by rj_yan31; Sep 4th, 2011 at 08:02 PM .
Sep 4th, 2011, 08:11 PM
#4
Frenzied Member
Re: [css] POSITIONING.
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
Sep 4th, 2011, 08:14 PM
#5
Thread Starter
Lively Member
Re: [css] POSITIONING.
Originally Posted by
noahssite
nothing happen..
Sep 4th, 2011, 08:44 PM
#6
Frenzied Member
Re: [css] POSITIONING.
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?
Sep 4th, 2011, 08:46 PM
#7
Thread Starter
Lively Member
Re: [css] POSITIONING.
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..
..
Sep 4th, 2011, 08:47 PM
#8
Frenzied Member
Re: [css] POSITIONING.
Your welcome
Mark the thread as resolved if you have no more questions.
Sep 4th, 2011, 08:50 PM
#9
Thread Starter
Lively Member
Re: [RESOLVED] [css] POSITIONING.
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..
Sep 5th, 2011, 08:00 AM
#10
Frenzied Member
Re: [RESOLVED] [css] POSITIONING.
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.
Posting Permissions
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
Forum Rules
Click Here to Expand Forum to Full Width