Practicing on anchor tags and drop down menu. In the following code, the dropdown is not working. Don't know why. The div containing text "This is dropdown menu" should appear exactly below the div containing text "This is text. Its in center" whenever the later is hovered upon. Both the divs are of same width.
html,body {
margin: 0px;
height: 100%;
/* [disabled]width: 100%; */
left: 0px;
top: 0px;
background-color: rgba(255,255,255,1);
}
.wrapper {
text-align: center;
margin-top: 0;
margin-left: auto;
height: 100%;
max-width: 960px;
background-color: rgba(0,0,0,1);
margin-right: auto;
position: relative;
}
.link1 {
height: auto;
width: 50%;
color: rgba(255,255,255,1);
margin-right: auto;
margin-left: auto;
background-color: rgba(204,204,204,1);
}
.link1 a {
text-decoration: none;
display: block;
}
.link1 a:hover {
text-decoration: underline;
background-color: rgba(255,0,0,1);
}
.link1 a:hover .dropdown {
display: block;
}
.dropdown
{
height: 25%;
width: 50%;
background-color: rgba(204,204,204,1);
margin-right: auto;
margin-left: auto;
text-align: center;
display: none;
}
<div class="wrapper">
<div class="link1">
This is text. Its in center
</div>
<div class="dropdown">This is dropdown menu</div>
</div>
Your css selector .link1 a:hover .dropdown selects the element with the class dropdown which has to be inside of an a element in a hover state (a:hover), which is inside an element with a class of link1.
This doesn't match your html markup.
To get it work, you can change your html to this:
<div class="wrapper">
<div class="link1">
<a href="http://www.hotmail.com">
This is text. Its in center
<div class="dropdown">This is dropdown menu</div>
</a>
</div>
</div>
Hope it helped.
Lexith is partly right, you need to add the dropdown within the container div, you can then select the sibling of the hovered a link.
Like so;
CSS -
.link1 a:hover + .dropdown {
display: block;
}
HTML -
<div class="link1">
This is text. Its in center
<div class="dropdown">This is dropdown menu</div>
</div>
CSS update -
This allows the dropdown to stay open when hovering on it
.dropdown:hover,
.link1 a:hover + .dropdown {
display: block;
}
This means it doesnt have any of the a tag styling. View my code pen
Related
I am trying to style - on one line - a group of buttons on the left, a navigation list in the middle, and a group of buttons on the right. I have grouped the navigation buttons for when the layout should change. Question is how to get the navigation structure on the same line in the center of the parent element?
I have made both overarching div elements into "display: inline" elements, and also the navigation.
Do I need to use absolute positioning of the nav for this to work? Why?
How can I center the nav horizontally?
My HTML:
// you need to have font smoothing on to avoid blurred and jagged lines
html{
background-color: rgb(235, 235, 235);
}
#main_body{
width: 1200px;
margin: auto;
background-color: white;
}
// first line header styling
#header_topnav{
width: 96%;
height: fit-content;
}
// button div, navigation and button div
.topnav_button{
width: 45px;
height: 35px;
margin-top: 18px;
margin-bottom: 10px;
}
// make div inline element to get it on one line
#left_buttons{
display: inline;
position: relative;
}
// make div inline element to get it on one line
// no other way than to go with left or margin
#right_buttons{
display: inline;
position: relative;
margin-left: 87.5%;
// left: 86.5%;
}
// vertical centering
ul {
margin: auto;
}
// for horizontal nav menu
li {
display: inline;
float: left;
margin-left: 10px;
}
// display block so clickable area is larger
li a {
display: block;
}
// how do you center this horizontally?
// do I have to make position absolute? can't I keep it in between the button sections?
#top_navmenu {
position: absolute;
display: inline;
margin-top: 28px;
}
<div id="main_body">
<header>
<section id="header_topnav">
<div id="left_buttons">
<button class="topnav_button"></button>
<button class="topnav_button"></button>
</div>
<nav id="top_navmenu">
<ul>
<li><a>F+</a></li>
<li><a>POLITIK</a></li>
</ul>
</nav>
<div id="right_buttons">
<button class="topnav_button"></button>
</div>
</section>
</header>
</div>
You don't need to use position: absolute. You can achieve this with flexbox.
Just add display:flex on the wrapper ( #header_topnav ) and flex-grow: 1 on the middle menu. This way the menu will occupy all the available space between the left and right buttons.
Also when sharing code here on SO please be sure you share valid code.
HTML code is missing some closing tags
// is not a valid comment in CSS. Use /* comment */ instead.
See below
html {
background-color: rgb(235, 235, 235);
}
#main_body {
width: 100%;
margin: auto;
background-color: white;
}
#header_topnav {
height: fit-content;
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
.topnav_button {
width: 45px;
height: 35px;
margin-top: 18px;
margin-bottom: 10px;
}
#left_buttons {
display: inline;
position: relative;
}
#right_buttons {
position: relative;
}
ul {
margin: auto;
display: flex;
flex-direction: row;
}
li {
margin-left: 10px;
}
li a {
display: block;
}
#top_navmenu {
margin-top: 28px;
flex-grow: 1;
display: flex;
align-items: center;
}
<div id="main_body">
<header>
<section id="header_topnav">
<div id="left_buttons">
<button class="topnav_button"></button>
<button class="topnav_button"></button>
</div>
<nav id="top_navmenu">
<ul>
<li><a>F+</a></li>
<li><a>POLITIK</a></li>
</ul>
</nav>
<div id="right_buttons">
<button class="topnav_button"></button>
</div>
</section>
</header>
</div>
There is an issue with dropdown, when hover it.
Instead of normal opening, the dropdown menu expands header.
Where is an error in the code?
I wrote this code from example on w3school()Code example, by which this code is written
There are also several attempts to do the same:
first attempt
second attempt
And in all of these attempts i do the same error, but cannot find where
exactly.
Can somebody show where are the errors?
* {
margin: 0;
padding: 0;
overflow-x: hidden;
}
header, nav {
background-color: aliceblue;
color: darkcyan;
font-family: Arial, Helvetica, sans-serif;
width: 100%;
height: auto;
text-align: center;
padding: 10px;
}
a {
text-decoration: none;
color: darkcyan;
padding: 10px;
display: inline-block;
}
.active {
padding-left: 0;
}
a, .dropdown {
display: inline-block;
width: 100px;
padding: 10px;
}
.dropdown .dropbutton {
border: none;
outline: none;
color: inherit;
background-color: inherit;
font-size: inherit;
}
.dropdown-content {
display: none;
position: absolute;
background-color: whitesmoke;
color: black;
width: auto;
}
.dropdown-content a {
float: none;
padding: 10px;
display: block;
text-align: center;
}
.dropdown:hover .dropdown-content {
display: block;
position: relative;
width: auto;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title>Dropdown Third Version</title>
</head>
<body>
<header>
<h1>The Homework</h1>
<nav>
Home
Hobbies
Third Page
<div class="dropdown">
<button class="dropbutton">Dropdown</button>
<div class="dropdown-content">
One
Two
Three
</div>
</div>
</nav>
</header>
</body>
</html>
Make a simple change to position in css:
.dropdown:hover .dropdown-content {
display: block;
position: absolute;----------------------This One
width: auto;
text-align: center;
}
Use this link to understand: Difference Between relative and absolute
This is because you have given position:relative in css instead give position:absolute for following selector .inline:hover .dropdown
.inline:hover .dropdown {
display: block;
position: absolute;
padding: 10px;
background-color: white;
color: dimgray;
}
And one more modification is that for all sub menu you have mentioned the class dropdown instead of that under one div which is having class dropdown
<div class="inline">The Page
<div class="dropdown">
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>
</div>
here is working example : https://liveweave.com/NpUwOZ
.dropdown:hover .dropdown-content {
display: block;
position: absolute;
width: auto;
text-align: center;
}
just delete the position line or change position in to absolute
You forgot to link the CSS file in your HTML code. Make sure you do that first.
Othetwise it won't do anything.
I am trying to create a horizontal subnavigation bar in CSS (without an unordered list), but I can't get the dropdown menu to appear.
Here's my code in HTML:
<div class="navbar sticky">
Home
<div class="subnav">
<button class="subnavbtn">Learn <i class="fa fa-caret-down"></i></button>
<div class="subnav-content">
Print
Review
Examples
More Info
</div>
</div>
<div class="subnav">
<button class="subnavbtn">Game <i class="fa fa-caret-down"></i></button>
<div class="subnav-content">
Play Now!
How to Play
Cards
</div>
</div>
Minigames
</div>
Here's my code in CSS:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.navbar {
overflow: hidden;
background-color: green;
position: sticky;
top: 0;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.subnav {
float: left;
overflow: hidden;
}
.subnav .subnavbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover,
.subnav:hover .subnavbtn {
background-color: chartreuse;
color: black;
}
.subnav-content {
display: none;
position: absolute;
left: 0;
background-color: red;
width: 100%;
z-index: 1;
visibility: hidden;
}
.subnav-content a {
float: left;
color: white;
text-decoration: none;
display: inline;
}
.subnav-content a:hover {
background-color: #eee;
color: black;
}
.subnav:hover .subnav-content {
visibility: visible;
display: block;
}
I've tried changing the opacity or even using visibility, but it just won't work for me. Sometimes the drop down will appear, however the top nav bar will transform (the "Game" link will shift right, starting at the point where "More Info" ends even though they are on different bars).
Most solutions I've seen while searching this issue is that they are not using (display: block;), but I have been and I don't know what to do at this point.
Here's fiddle
Remove overflow:hidden; from your .navbar declaration and replace it with float:left; and width:100%;
Floated elements are removed from the calculated height of the parent element. However, overflow:hidden; invokes the height to be calculated via block formatting context but, was hiding your dropdowns cause overflow is hidden.
Also, floating the parent element means the children dictate the parent's height making it more dynamic.
Revised Fiddle Here
Just remove the position property from the div with class name navbar.
.navbar {
overflow: hidden;
background-color: green;
top: 0;
}
Dropdown menu appear out of the navbar.
So, you should replace overflow: hidden with height: 50px in .navbar:
.navbar {
height: 50px;
background-color: green;
position: sticky;
top: 0;
}
I want to show the divs #botone, #bottwo and #botthree one after the other. I also want to have the background image to be adjusted by 100% width and proportional height on #botone div.
Now the last two Divs show up behind the #botone Div and the #botone div adds the 49px to the vertical placement that comes from the .topnav Div.
I also want to fixate the .topnav Div on top.
** body {
margin: 0px 0px;
}
/* Add a black background color to the top navigation */
.topnav {
background-color: #000;
overflow: hidden;
height: 49px;
}
/* Style the links inside the navigation bar */
.topnav a {
float: right;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add a color to the active/current link */
.topnav a.active {
background-color: #4CAF50;
color: white;
}
.block {
float: left;
width: 40px;
}
.blocka {
float: right;
width: 250px;
}
#botone {
position: absolute;
height: 100%;
width: 100%;
background-image: url("arc.jpg");
background-size: cover;
}
#bottwo {
background-color: blue;
height: 400px;
width: 100%;
}
#botthree {
background-color: yellow;
height: 600px;
width: 100%;
}
<div class="topnav">
<div class="block">
Oi
</div>
<div class="blocka">
News
Contact
About
</div>
</div>
<div id="botone">testtext
</div>
<div id="bottwo">testtext
</div>
<div id="botthree">testtext
</div>
If I understand your question correctly, does this accomplish what you're trying to do?
HTML:
<div class="topnav">
<div class="block">
Oi
</div>
<div class="blocka">
News
Contact
About
</div>
</div>
<div id="botone">testtext
</div>
<div id="bottwo">testtext
</div>
<div id="botthree">testtext
</div>
CSS: (Changes at bottom)
body {
margin: 0px 0px;
}
/* Add a black background color to the top navigation */
.topnav {
background-color: #000;
overflow: hidden;
height: 49px;
}
/* Style the links inside the navigation bar */
.topnav a {
float: right;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add a color to the active/current link */
.topnav a.active {
background-color: #4CAF50;
color:white;
}
.block { float:left;width: 40px; }
.blocka { float:right;width: 250px; }
#botone {
position: absolute;
height: 100%;
width: 100%;
background-image: url("arc.jpg");
background-size: cover;
}
#bottwo {
background-color:blue;
height: 400px;
width: 100%;
}
#botthree {
background-color:yellow;
height: 600px;
width: 100%;
}
/*--- Fixes --*/
.topnav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 5;
}
#botone {
/*-- Test --*/
background-image: url("https://images.pexels.com/photos/948358/pexels-photo-948358.jpeg?auto=compress&cs=tinysrgb&h=650&w=940");
background-position: center;
height: 100vh;
margin-top: 49px;
position: relative;
}
link to example
A little confused with your requirements description but I think this is what you're trying to achieve:
.topnav {
background-color: #000;
overflow: hidden;
height: 49px;
position:fixed; //add this
width:100%; //add this
}
#botone {
position: absolute;
margin-top: 49px; //add this
height: 100%;
width: 100%;
background-image: url("arc.jpg");
background-size: cover;
}
To fixate the top nav or header, use position:fixed. You would have to define the width as 100% or it automatically takes a width: auto.
To ensure the following div shows directly under the fixed element, give it a margin-top corresponding to the height of the fixed element. If you are using SCSS, this would be much better in responsive design, since you can create a function that applies the height to the margin-top at the same time. But if you are using CSS, just check your #media queries to make sure the height and the margin-top are consistent.
At the moment the blue element is your element that follows the fixed element. If you want to add something in between the blue element and the header (i.e. a slideshow, or banner) treat is as the blue element is being treated now. Give this the margin-top and remove it from the blue element, since the blue element is no longer directly under the fixed header.
See DEMO
Or the whole code in the snippet
body {
margin: 0px 0px;
}
/* Add a black background color to the top navigation */
.topnav {
background-color: #000;
overflow: hidden;
height: 49px;
position:fixed;
width:100%;
top:0;
}
/* Style the links inside the navigation bar */
.topnav a {
float: right;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add a color to the active/current link */
.topnav a.active {
background-color: #4CAF50;
color: white;
}
.block {
float: left;
width: 40px;
}
.blocka {
float: right;
width: 250px;
}
#botone {
position: absolute;
margin-top: 49px;
height: 100%;
width: 100%;
background-image: url("arc.jpg");
background-size: cover;
}
#bottwo {
background-color: blue;
height: 400px;
width: 100%;
}
#botthree {
background-color: yellow;
height: 600px;
width: 100%;
}
<div class="topnav">
<div class="block">
Oi
</div>
<div class="blocka">
News
Contact
About
</div>
</div>
<div id="botone">testtext
</div>
<div id="bottwo">testtext
</div>
<div id="botthree">testtext
</div>
I have a menu bar and it consists of two divs. In the end it looks like only a single menu bar. And I need this menu bar to be fixed on top when I scroll down the page.
My HTML code:
<div id="body">
<header id="header">
<div class="inner">
<div id="topmenu">
Login
</div>
<div id="social" class="icons">
<span>Twitter</span>
<span>Facebook</span>
<span>Linked In</span>
</div>
</div>
</header>
</div>
And my CSS:
#header .inner #topmenu {
float: right;
width: 50%;
height: 30px;
background-color: #5f5f5f;
}
#header .inner #topmenu .login {
text-decoration: none;
float: right;
background:url('images/loginlink.png') no-repeat 40px 12px;
padding-right: 20px;
padding-top: 5px;
color: white;
}
#header .inner .icons {
float: left;
width: 50%;
height: 30px;
background-color: #5f5f5f;
}
#header .inner .icons .twitter span {
display: none;
}
#header .inner .icons .twitter {
width: 20px;
height: 20px;
display: inline-block;
background:url('images/i_twitter.png') no-repeat center center;
padding-top: 10px;
padding-left: 10px;
}
Note: I need to have this menu bar "broken" into two parts like this. I cannot modify HTML, I'm able to modify only the CSS file.
Link to example.
Is there any solution how to fix that without using JavaScript?
You can set .inner with position:fixed;top:0
#header .inner{
width:100%;
position:fixed;
top:0px;
}
Example