Why is my HTML and CSS nav bar pushing down other content?

  • Context: HTML/CSS 
  • Thread starter Thread starter Dave Ritche
  • Start date Start date
  • Tags Tags
    Css Html
Click For Summary

Discussion Overview

The discussion revolves around issues related to a navigation bar created using HTML and CSS, specifically focusing on how the dropdown menu interacts with other content on the webpage. Participants are exploring solutions to prevent the dropdown from pushing other content down and addressing visibility issues when hovering over menu items.

Discussion Character

  • Technical explanation
  • Debate/contested
  • Homework-related

Main Points Raised

  • One participant describes a problem where the dropdown list of the navigation bar pushes other content down, expressing a desire for the dropdown to overlay other elements instead.
  • Several participants request the original code to better understand the issue and provide assistance.
  • Some participants suggest using jQuery and its plugins for creating interactive web pages.
  • One participant points out that the height of the navigation bar is set to a fixed value, which may contribute to layout issues.
  • Another participant advises against using fixed width and height values for divs, suggesting that it complicates scaling of site components.
  • A participant mentions that after resolving the initial issue, a new problem arises where the dropdown list disappears when hovering over it due to a paragraph below it.
  • Multiple participants request the HTML and CSS files related to the new issue to provide further assistance.
  • A participant shares their HTML and CSS files, indicating that they are still experiencing issues with the dropdown menu.
  • Another participant provides a demonstration of a potential fix for the dropdown visibility issue.

Areas of Agreement / Disagreement

Participants generally agree on the need to adjust CSS properties to resolve the dropdown menu issues, but multiple competing views and solutions are presented without a consensus on the best approach.

Contextual Notes

Participants express uncertainty about specific CSS properties and their effects on layout, indicating a need for further clarification on how to achieve the desired behavior of the dropdown menu.

Dave Ritche
Messages
70
Reaction score
6
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!
 
Technology news on Phys.org
It's easier to help if you post your code.
 
  • Like
Likes   Reactions: Dave Ritche
Okay thanks i try..
 
Dave Ritche said:
Okay thanks i try..
Click on the + sign to create a block to insert your code. It will help if you use indentation on the code also.
 
Borg said:
It's easier to help if you post your code.
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
 
<!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>
 
.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..
 
Now,it must be easier to figure out what's the problem and what is the solution..:woot::woot::woot::woot::woot:
 
  • #10
1.Your nav_main has its height defined up to 1000px.

2. Make your popup "visible".
 
Last edited:
  • #11
Silicon Waffle said:
1.Your nav_main has its height defined up to 1000px.

2. Make your popup "visible".
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..
 
  • #12
Silicon Waffle said:
1.Your nav_main has its height defined up to 1000px.

2. Make your popup "visible".
And nav_main is the DIV tag ..it's not the nav itself..
 
  • #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.
 
  • Like
Likes   Reactions: Dave Ritche
  • #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?
 
  • #15
Here is the drop-down list but the list disappears due to the paragraph beneath it..
ab.jpg
 
  • #16
Please post your html and css files that cause such an issue.
I don't see it in this live demo.
 
  • Like
Likes   Reactions: Dave Ritche
  • #17
Silicon Waffle said:
Please post your html and css files that cause such an issue.
I don't see it in this live demo.
*{
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
 
  • Like
Likes   Reactions: Silicon Waffle
  • #18
Silicon Waffle said:
Please post your html and css files that cause such an issue.
I don't see it in this live demo.
<!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...
 
  • Like
Likes   Reactions: Silicon Waffle
  • #19
Thanks for sharing your files,
A fix is demo'ed here.
 
  • #20
Thanaks for your reply.
Thank you very much..
 
  • Like
Likes   Reactions: Silicon Waffle

Similar threads

HTML/CSS Background-position CSS confusion with percentage values?
  • · Replies 9 ·
Replies
9
Views
3K
HTML/CSS [CSS] Why do my containers shrink at screen widths <347px?
  • · Replies 5 ·
Replies
5
Views
3K
HTML/CSS Html5 <canvas> element related apps not working
  • · Replies 3 ·
Replies
3
Views
2K
HTML/CSS HTML/CSS, element position affected by zoom
  • · Replies 3 ·
Replies
3
Views
4K
HTML/CSS HTML/CSS: Placing DIVs Next to Each Other
  • · Replies 6 ·
Replies
6
Views
3K
HTML/CSS Is There a Way to Indent Tables in XHTML?
  • · Replies 3 ·
Replies
3
Views
3K
I'm struggling with the CSS counter mechanism(s)
  • · Replies 1 ·
Replies
1
Views
2K
HTML/CSS What HTML tag can I use to bypass category filters on my website?
  • · Replies 1 ·
Replies
1
Views
2K
Learning about Python application deployment - possible recommendations
  • · Replies 7 ·
Replies
7
Views
3K
What are some pieces of advice for a struggling programming learner?
  • · Replies 40 ·
2
Replies
40
Views
4K