Dismiss Notice
Join Physics Forums Today!
The friendliest, high quality science and math community on the planet! Everyone who loves science is here!

Problem with Html and Css

  1. Nov 19, 2015 #1
    Please help..
    I've created a nav bar using list tag in html.when i place pointer on it,the list appears but pushes other contents down leaving space.i don't want it.
    I want the list to be appeared on other contents i mean over them.
    Thanks in advance!
     
  2. jcsd
  3. Nov 19, 2015 #2

    Borg

    User Avatar
    Gold Member

    It's easier to help if you post your code.
     
  4. Nov 19, 2015 #3
    Okay thanks i try..
     
  5. Nov 19, 2015 #4

    Borg

    User Avatar
    Gold Member

    Click on the + sign to create a block to insert your code. It will help if you use indentation on the code also.
     
  6. Nov 19, 2015 #5

    jedishrfu

    Staff: Mentor

    This may also be of interest:

    https://jqueryui.com/menu/

    Many developers use jQuery and its plugins to design interactive web pages.
     
  7. Nov 24, 2015 #6
    okay!
    I have Uploaded the picture of my webpage so you can see the drop-down list menu is pushing the divs and other contents down.I want it to be appeared on divs and other contents..
    nav.jpg
     
  8. Nov 24, 2015 #7
    <!doctype html>
    <html>
    <head>
    <title>creating nav bar</title>
    <link rel="stylesheet" href="css/nav_bar.css">
    <link rel="icon" href="images/glogo.ico">
    </head>
    <body>
    <div class="logo">
    <header>
    <div class="banner">
    <a href="#" title="Home"><img src="images/banner.jpg"></a>
    </div>

    </header>
    </div>


    <div class="nav_main">
    <div class="sub">
    <ul>
    <li><a href="#">HISTORY</a>
    <ul>
    <li><a href="#">ZAMAN</a></li>
    <li><a href="#">ZAMAN</a></li>
    <li><a href="#">ZAMAN</a></li>
    <li><a href="#">ZAMAN</a></li>
    </ul>
    </li>
    <li><a href="#">THE PRINCIPAL</a>
    <ul>
    <li><a href="#">JOHN</a></li>
    <li><a href="#">JOHN</a></li>
    <li><a href="#">COURSES</a></li>
    <li><a href="#">COURSES</a></li>
    </ul>

    </li>
    <li><a href="#">FACULTY</a>
    <ul>
    <li><a href="#">COURSES</a></li>
    <li><a href="#">COURSES</a></li>
    <li><a href="#">COURSES</a></li>
    <li><a href="#">COURSES</a></li>
    </ul>

    </li>
    <li><a href="#">GET ADMISSION</a>
    <ul>


    <li><a href="#">COURSES</a></li>
    <li><a href="#">COURSES</a></li>
    <li><a href="#">COURSES</a></li>
    <li><a href="#">COURSES</a></li>

    </ul>
    </li>
    <li><a href="#">FORUMS</a>
    <ul>
    <li><a href="#">COURSES</a></li>
    <li><a href="#">COURSES</a></li>
    <li><a href="#">COURSES</a></li>
    <li><a href="#">COURSES</a></li>


    </ul>
    </li>




    <ul>
    <div class="section1">
    <section>

    <aside>

    </aside>

    <article class="mainart">
    <img class="parapic" src="images/college1.jpg"/>
    <p class="homepara">
    This is the video of mine having fun with my friends in hostel.People say that the precious time in your life is the University Time.You have the freedom to do anything you want but being in limits.
    We also enjoy this life.At times,we go outside to chill.We have everything we could wish to have in our life.We have great teachers to discuss our subjects.
    </p>
    </article>
    </section>
    </div>
    </div>

    </div>
    </body>
    </html>
     
  9. Nov 24, 2015 #8
    .nav_main{width:1200px;background-color:white;
    margin:auto;
    height:1000px;
    }
    body{background-color:gray;}
    *{
    padding:0px;
    margin:0px;

    }

    .sub{height:40px;background-color:black;}
    .sub ul{display:block;}
    .sub ul li{width:237.5px;
    float:left;
    line-height:40px;
    text-align:center;
    font-size:20px;
    list-style-type:none;
    border:1px solid white;

    }
    .sub ul li a{text-decoration:none;color:white;
    display:block;
    background-color:black;

    }
    .sub ul li a:hover{background-color:#81e865;display:block;color:black;text-decoration:underline;}
    .sub ul li ul li{display:none;}
    .sub ul li:hover ul li{display:block;}

    .section1{width:1200px;height:1000px;}
    section{background-color:#daddda;width:1200px;float:left;}

    .banner{width:100%;height:97px;}
    img{width:100%;height:97px;}
    .parapic {height:500px;width:1200px;}
    .mainart{height:1000px;width:1200px;background-color:white;}
    .homepara{padding:1%;font-size:17px;text-align:justify;margin:0px;color:#3f433e;}

    THIS IS THE CSS FILE..
     
  10. Nov 24, 2015 #9
    Now,it must be easier to figure out what's the problem and what is the solution..:woot::woot::woot::woot::woot:
     
  11. Nov 24, 2015 #10
    1.Your nav_main has its height defined up to 1000px.

    2. Make your popup "visible".
     
    Last edited: Nov 24, 2015
  12. Nov 25, 2015 #11
    thanks for your reply.
    do you have any source/tutorial?
    can you please tell me about that as i don't have any knowledge related to css?
    i thank you in advance..
     
  13. Nov 25, 2015 #12
    And nav_main is the DIV tag ..it's not the nav itself..
     
  14. Nov 26, 2015 #13
    Okay, your problem is reproduced here
    And this is a fix.
    Don't add fixed values of width and height for div's, they just make it hard for you to scale your site components. If fixed values are preferred then table would be better fitted.
     
  15. Nov 29, 2015 #14
    Okay thank you very much for replying.
    The Problem is solved and the drop-down list does not push the other contents down but i'm having another problem.
    I have added a paragraph after the nav menu and the drop-down list is working just perfectly but when I hover the pointer over the drop-down list-item,the list vanishes due to the paragraph beneath it...
    What is the problem and how can i fix it?
    I'm really baffled with it,please,can you help me solve this problem?
     
  16. Nov 29, 2015 #15
    Here is the drop-down list but the list disappears due to the paragraph beneath it.. ab.jpg
     
  17. Nov 30, 2015 #16
    Please post your html and css files that cause such an issue.
    I don't see it in this live demo.
     
  18. Nov 30, 2015 #17
    *{
    padding:0px;
    margin:0px;

    }
    body{background-color:white;}
    .mainnav{height:40px;background-color:black;position:absolute;}

    .mainnav li{float:left;line-height:40px;list-style-type:none;width:266.5px;margin:auto;position:relative;}

    .mainnav li a{color:white;display:block;text-align:center;font-size:17px;text-decoration:none;}
    .mainnav ul li a:hover{background-color:#4daf32;display:block;}
    .mainnav ul li ul li{display:none;absolute;}
    .mainnav ul li ul li a{display:block;}
    .mainnav ul li:hover ul li {display:block;background-color:#1318db;height:40px;}

    section{position:absolute;top:40px;overflow:hidden;}


    this is the Css file
     
  19. Nov 30, 2015 #18
    <!doctype html>
    <html>
    <head>

    <title>nav</title>
    <link rel="stylesheet" href="navcss.css">
    </head>
    <body>

    <nav class="mainnav">
    <ul>
    <li><a href="#">FACULTY</a>
    <ul>
    <li><a href="#">DEPARTMENTS</a></li>
    <li><a href="#">DEPARTMENTS</a></li>
    </ul></li>
    <li><a href="#">DEPARTMENTS</a></li>
    <li><a href="#">FESTIVALS</a></li>
    <li><a href="#">SOCIETIES</a></li>
    <li><a href="#">ENVIRONMENT</a></li>
    <li><a href="#">THE DESIGNER</a></li>

    </ul>

    </nav>
    <section>
    <p class="homepara">
    This is the video of mine having fun with my friends in hostel.People say that the precious time in your life is the University Time.You have the freedom to do anything you want but being in limits.
    We also enjoy this life.At times,we go outside to chill.We have everything we could wish to have in our life.We have great teachers to discuss our subjects.
    </p>
    </section>




    </body>


    </html>



    here is the HTML file...
     
  20. Nov 30, 2015 #19
    Thanks for sharing your files,
    A fix is demo'ed here.
     
  21. Dec 7, 2015 #20
    Thanaks for your reply.
    Thank you very much..
     
Know someone interested in this topic? Share this thread via Reddit, Google+, Twitter, or Facebook




Similar Discussions: Problem with Html and Css
  1. HTML - iframe CSS (Replies: 3)

  2. HTML + Javascript + CSS (Replies: 11)

  3. Html footer problem (Replies: 3)

Loading...