[RESOLVED] [css] POSITIONING.-VBForums
Results 1 to 10 of 10

Thread: [RESOLVED] [css] POSITIONING.

  1. #1

    Thread Starter
    Lively Member
    Join Date
    Jul 2011
    Posts
    127

    Resolved [RESOLVED] [css] POSITIONING.

    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..
    Attached Files Attached Files
    Last edited by rj_yan31; Sep 4th, 2011 at 07:14 PM. Reason: attached files

  2. #2
    Frenzied Member
    Join Date
    Jan 2008
    Posts
    1,754

    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.

  3. #3

    Thread Starter
    Lively Member
    Join Date
    Jul 2011
    Posts
    127

    Re: [css] POSITIONING.

    Quote Originally Posted by noahssite View Post
    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 Attached Images  
    Last edited by rj_yan31; Sep 4th, 2011 at 09:02 PM.

  4. #4
    Frenzied Member
    Join Date
    Jan 2008
    Posts
    1,754

    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

  5. #5

    Thread Starter
    Lively Member
    Join Date
    Jul 2011
    Posts
    127

    Re: [css] POSITIONING.

    Quote Originally Posted by noahssite View Post
    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..

  6. #6
    Frenzied Member
    Join Date
    Jan 2008
    Posts
    1,754

    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?

  7. #7

    Thread Starter
    Lively Member
    Join Date
    Jul 2011
    Posts
    127

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

  8. #8
    Frenzied Member
    Join Date
    Jan 2008
    Posts
    1,754

    Re: [css] POSITIONING.

    Your welcome

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

  9. #9

    Thread Starter
    Lively Member
    Join Date
    Jul 2011
    Posts
    127

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

  10. #10
    Frenzied Member
    Join Date
    Jan 2008
    Posts
    1,754

    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
  •  



Featured


Click Here to Expand Forum to Full Width

Survey posted by VBForums.