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

  • Thread starter Dave Ritche
  • Start date
  • Tags
    Css Html
In summary: CONTACT</a></li> <ul> <li><a href="#">COURSES</a></li> <li><a href="#">COURSES</a></li> <
  • #1
Dave Ritche
70
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
  • #2
It's easier to help if you post your code.
 
  • Like
Likes Dave Ritche
  • #3
Okay thanks i try..
 
  • #4
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.
 
  • #6
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
 
  • #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>
 
  • #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..
 
  • #9
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 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 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 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 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 Silicon Waffle

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

1. What is the difference between HTML and CSS?

HTML (HyperText Markup Language) is responsible for creating the structure and content of a webpage, while CSS (Cascading Style Sheets) is used to control the presentation and layout of the webpage. In other words, HTML defines the content and CSS defines the visual appearance of the content.

2. Why does my HTML/CSS code not work?

There could be several reasons why your code is not working. Some common reasons include missing or incorrect syntax, conflicting styles, or an issue with the browser compatibility. It is important to check your code for any errors and also make sure you are using the correct CSS selectors and properties.

3. How can I make my webpage responsive?

To make a webpage responsive, you can use CSS media queries to adjust the layout and styles based on the screen size. It is also important to use relative units like percentages instead of fixed units like pixels for your designs. This allows the content to scale and adapt to different screen sizes.

4. What is the box model in CSS?

The box model refers to the way in which elements are rendered on a webpage. It consists of four components: content, padding, border, and margin. The content is the actual text or image within the element, the padding is the space between the content and the element's border, the border is the line around the element, and the margin is the space between the element and other elements on the page.

5. How can I center an element using CSS?

To center an element horizontally, you can use the CSS property "text-align: center;" on the parent element. To center vertically, you can use the "display: flex;" and "align-items: center;" properties on the parent element, and "margin: auto;" on the child element. Keep in mind that the element must have a set width for this to work.

Similar threads

HTML/CSS, element position affected by zoom
    • Programming and Computer Science
Replies
3
Views
3K
Learning about Python application deployment - possible recommendations
    • Computing and Technology
Replies
7
Views
329
I'm struggling with the CSS counter mechanism(s)
    • Engineering and Comp Sci Homework Help
Replies
1
Views
1K
Why is my program crashing when using multiple classes and pointers?
    • Programming and Computer Science
Replies
5
Views
846
What are some pieces of advice for a struggling programming learner?
    • STEM Academic Advising
2
Replies
40
Views
2K
Why can't there be a Database tool that has the best of everything?
    • Programming and Computer Science
Replies
5
Views
2K
C# Open Source C# Physics Library
    • Programming and Computer Science
Replies
29
Views
6K
Calculate tilt angle of a bar lifted via two ropes on fixed points
    • Introductory Physics Homework Help
Replies
7
Views
1K
HTML/CSS: Placing DIVs Next to Each Other
    • Computing and Technology
Replies
6
Views
2K
How to Float Vertically in CSS?
    • Programming and Computer Science
Replies
1
Views
3K

Hot Threads

Recent Insights

Back
Top