I have two div(s), one contains a list e.g. About, partners and so forth. In another divs i want to insert another list. I cant figure out how use the after pseudo element to display the contents of the second div when i hover on About (which is inside the first div) i have tried various things and still cant figure out. Thank you for any help
<div class="firstscreen">
<div class="header">
<div id="trademark">
<img src="images/coin.png" id="logo">
<h2 id="logoName">Test</h2>
</div>
<div id="divList">
<ul id="list">
<li id="About">About</li>
<li>Test</li>
<li>Partners</li>
<li>Contact</li>
</ul>
<div id="abouthover">
<p>Testing</p>
</div>
</div>
</div>
***** css code below *****
html body {
margin: 0px;
padding: 0px;
background-color:#F4F6FF;
}
.firstscreen{
height: 63em;
background: url("images/shopping.jpeg");
}
/* header is a first main div on the first page that contains two divs trademark and divList */
.header {
width: 100%;
position: fixed;
display: flex;
background-color: white;
top:0px;
border: solid red;
}
/* travemark is a div containing the logo plus logoName*/
#trademark {
width: 15%;
display: flex;
}
#logo {
width: 70px;
height: 70px;
object-fit: contain;
}
#logoName {
float: right;
font-size: 24px;
padding-left: 10px;
color: #1a237e;
}
/* divList is a div containing <ul> lists*/
#divList {
width: 30%;
text-align: center;
margin-left: 20%;
padding-top: 10px;
border: solid purple;
}
#list li {
display: inline;
margin: 20px;
font-size: 20px;
color: #1a237e;
}
#About::after {
}
#abouthover {
border: solid green;
position: relative;
border: solid green;
display: block;
position: absolute;
}
Below is the code to show and hide list on About :hover inside same div under about.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<div id="divList">
<ul id="list">
<li id="About">About</li>
<li>Test</li>
<li>Partners</li>
<li>Contact</li>
</ul>
<div id="abouthover" style="display: none;">
<p>Testing</p>
</div>
</div>
</body>
<script src = "https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$(document).ready(function() {
$("#About").hover(function() {
$("#abouthover").show();
});
$("#About").mouseout(function() {
$("#abouthover").hide();
});
});
</script>
</html>
Related
I trying to create a header of a website, with the logo and name positioned on the left side and the tabs at the center. i have two divs the first holding the logo and the name and the other the tabs(lists). But they are not aligned on horizontally together rather than one div is below the other. I have used float but it doesn't seem to work as i would like as other divs and elements clash with floated divs. I do know a similar question has been asked but they don't work for me.
.header {
width: 100%;
border: solid red;
}
#trademark {
border: solid green;
width: 15%;
}
#logo {
width: 70px;
}
#logoName {
float: right;
}
#divList {
border: solid black;
width: 50%;
text-align: center;
margin-left: 25%;
}
#list li {
display: inline;
margin: 20px;
}
<div class="header">
<div id="trademark">
<img src="images/coin.png" id="logo">
<h2 id="logoName">Halo</h2>
</div>
<div id="divList">
<ul id="list">
<li>About</li>
<li>TCH</li>
<li>Partners</li>
<li>Contact</li>
</ul>
</div>
</div>
no errors how not being formatted as needed
try this
.header {
width: 100%;
border: solid red;
}
#trademark {
border: solid green;
width: 20%;
display: flex;
}
#logo {
width: 70px;
}
#logoName {
float: right;
}
#divList {
border: solid black;
width: 50%;
text-align: center;
margin-left: 25%;
}
#list li {
display: inline;
margin: 20px;
}
<div class="header">
<div id="trademark">
<div class="icon">
<img src="images/coin.png" id="logo">
</div>
<h2 id="logoName">Halo</h2>
</div>
<div id="divList">
<ul id="list">
<li>About</li>
<li>TCH</li>
<li>Partners</li>
<li>Contact</li>
</ul>
</div>
</div>
Trying to set up a simple 'cheat sheet' of logo and nav bar that I can reuse. I'm having trouble preventing the right floated nav from overflowing into content below.
NB. I'm new to this so I have added borders to all elements to help me see what's happening.
I have tried to add a clear:left (even though I know it should be clear:right as the content has been floated right) to the element proceeding the navigation but that did not work of course!
*{
box-sizing: border-box;
}
header{
display: inline-block;
}
.logo{
background-image: url("logo.png");
background-repeat:no-repeat;
width: 140px;
height: 81px;
margin: 10px;
display: inline-block;
}
nav{
border: 1px solid black;
float: right;
width: auto;
}
ul{
list-style: none;
padding-left: 0;
border: 1px solid red;
vertical-align: middle;
}
li{
display: inline-block;
width: auto;
padding: 20px;
background-color: yellow;
margin-bottom: 5px;
border: 1px solid yellow;
}
.divider{
clear: both;
}
<header>
<div class="logo"></div>
<nav>
<ul>
<li>About</li>
<li>Portfolio</li>
<li>Shopping</li>
<li>Contact Me</li>
</ul>
</nav>
</header>
<div class="divider"></div>
<main>
<h1>The display Property</h1>
So next I tried clear:both and that did not work.
I have also tried to set the nav to display:inline-block but that did not work.
Ideally I would like to solve this without using any pre-provided templates and my just raw code or display:flex.
Thanks in advance :)
Hope this helps.
.nav_bar {
margin: 10px;
padding: 10px;
background-color: #00021a;
color: white;
}
.logo {
display: inline-block;
vertical-align: middle;
width: 7%;
}
.logo img {
height: auto;
width: 50px;
}
.nav {
display: inline-block;
vertical-align: middle;
width: 90%;
}
.nav_container li {
list-style: none;
float: right;
padding: 10px;
}
<head>
<link rel="stylesheet" href="styles.css">
</head>
<div class="nav_bar">
<div class="nav_container">
<div class="logo">
<img class="logo"
src="https://t4.ftcdn.net/jpg/00/71/26/83/240_F_71268376_KIbJvY0SYwlvikWpahjNCv5IBfukykG9.jpg"/>
</div>
<nav class="nav">
<ul>
<li>About</li>
<li>Portfolio</li>
<li>Shopping</li>
<li>Contact Me</li>
</ul>
</nav>
</div>
</div>
Here's the Fiddle
This question already has answers here:
What is a clearfix?
(10 answers)
What methods of ‘clearfix’ can I use?
(29 answers)
Closed 3 years ago.
I created a nav bar but my border-bottom not working , it is working as a border-top instead. I am trying to create a nav bar like twitter for learning. It will be a great help if someone helps me to solve it
*{
margin: 0px;
padding: 0px;
}
.header{
width: 100%;
height: auto;
border-bottom: 1px solid #dae0e4;
}
.container{
width: 90%;
margin: 10px auto;
}
.main-nav{
width: 50%;
float: left;
}
.second-nav{
float: right;
}
ul {
list-style-type: none;
overflow: hidden;
}
li {
float: left;
font-size: 120%;
}
li a {
color: #6f7d87;
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.body{
clear: both;
}
<!DOCTYPE html>
<html>
<head>
<title>Twitter</title>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<div class="page">
<div class="header">
<div class="container">
<div class="main-nav">
<ul>
<li>Home</li>
<li>Notification</li>
<li>Messages</li>
</ul>
</div>
<div class="second-nav">
<ul>
<li>Search Bar</li>
<li>Profile</li>
<li>Tweet</li>
</ul>
</div>
</div>
</div>
<div class="body">
<p>Something</p>
</div>
</div>
</body>
</html>
I expect the border to show the lining downside but it is showing it upside, I couldn't find the solution anywhere on the web and also I was unable to fix it.
The border did appear, but visually on top of the header.
This is because the child elements of .header are floated and hence the height of .header becomes zero. To avoid this, add a clearfix to .header. Here I've used overflow:auto to fix it.
* {
margin: 0px;
padding: 0px;
}
.header {
width: 100%;
height: auto;
border-bottom: 1px solid #000;
}
.container {
width: 90%;
margin: 10px auto;
overflow: auto;
}
.main-nav {
width: 50%;
float: left;
}
.second-nav {
float: right;
}
ul {
list-style-type: none;
overflow: hidden;
}
li {
float: left;
font-size: 120%;
}
li a {
color: #6f7d87;
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.body {
clear: both;
}
<div class="page">
<div class="header">
<div class="container">
<div class="main-nav">
<ul>
<li>Home</li>
<li>Notification</li>
<li>Messages</li>
</ul>
</div>
<div class="second-nav">
<ul>
<li>Search Bar</li>
<li>Profile</li>
<li>Tweet</li>
</ul>
</div>
</div>
</div>
<div class="body">
<p>Something</p>
</div>
</div>
I am trying to display some content in div tag when hovering on the menu. Here I am trying to display a div when hovering on About. But it does not work.Kindly only check the commented portion. Ignore rest!
Here is my html:
<html>
<head>
<link rel="stylesheet" href="Style/styling.css">
<head>
<body>
<div class="container">
<header class="head-nav">
<img class="logo" src="Images/Logo.jpg">
<nav class="navigation">
<ul>
<li>Home</li>
<!––The hovering Menu––>
<li class="dispmenu">About</li>
<li >Center</li>
<li >Team </li>
<li>Team</li>
<li>Testing</li>
<li>Services</li>
<ul>
</nav>
</header>
<div class="submenu">
Hello
</div>
</div>
</body>
</html>
And CSS:
.container {
width: 1000px;
height: 1000px;
margin: 0 auto;
border: 1px solid gray;
}
header {
overflow: hidden;
}
.logo {
float: left;
}
.navigation ul {
list-style: none;
}
.navigation ul li {
background-color: #e0e0d1;
margin-top: 40px;
width: 96px;
border: 1px solid lightblue;
height: 40px;
text-align: center;
float: left;
}
.navigation ul li a {
font-size: 11px;
text-decoration: none;
color: black;
}
li a:hover:not(.active) {
color: #2485ba;
}
.active {
color: #2485ba;
}
/*the css for hiding and displaying*/
.dispmenu:hover .submenu {
visibility: visible;
}
.submenu {
background-color: darkblue;
color: white;
width: 684;
height: 100px;
margin-left: 312px;
visibility: hidden;
}
Here's a jQuery option if you go that route..
fiddle
https://jsfiddle.net/Hastig/ns6j55zg/
You can read about .hover here
$('.dispmenu').hover(function() {
$('.submenu').addClass('dispmenu-hover');
}, function() {
$('.submenu').removeClass('dispmenu-hover');
})
body {
margin: 0;
}
.container {
/*width: 1000px;*/
/*height: 1000px;*/
margin: 0 auto;
border: 1px solid gray;
}
header {
overflow: hidden;
}
.logo {
float: left;
}
.navigation ul {
list-style: none;
display: flex;
}
.navigation ul li {
display: flex;
background-color: #e0e0d1;
margin-top: 40px;
/*width: 96px;*/
flex: 1;
border: 1px solid lightblue;
height: 40px;
text-align: center;
float: left;
}
.navigation ul li a {
display: flex;
justify-content: center;
align-items: center;
flex: 1;
text-align: center;
font-size: 11px;
text-decoration: none;
color: black;
}
li a:hover:not(.active) {
color: #2485ba;
}
.active {
color: #2485ba;
}
.submenu {
background-color: darkblue;
color: white;
width: 684;
height: 100px;
margin-left: 312px;
visibility: hidden;
}
/*the css for hiding and displaying*/
/* this class moved to appear after .submenu class */
.dispmenu-hover {
visibility: visible;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<header class="head-nav">
<img class="logo" src="Images/Logo.jpg">
<nav class="navigation">
<ul>
<li>Home</li>
<!––The hovering Menu––>
<li class="dispmenu">About</li>
<li>Center</li>
<li>Team </li>
<li>Team</li>
<li>Testing</li>
<li>Services</li>
</ul>
</nav>
</header>
<div class="submenu">
Hello
</div>
</div>
.dispmenu:hover .submenu {
You have a space between those selectors. A space is a descendant combinator.
The element <div class="submenu"> is not a descendant of the element <li class="dispmenu">. It is a sibling of the great-grandparent of the list item.
CSS selectors provide no way to describe going up the DOM tree, so you can't achieve this without either:
Changing the structure of the DOM
Using JavaScript
Ideally you should do both since:
It doesn't make much sense for a submenu to be completely disconnected from the menu item it is for. Think about how that type of data is normally represented.
You can't put in things like time delays before a menu vanishes, which makes a menu like the one you are trying to create challenging for people with some accessibility needs (e.g. sufferers of arthritis who many struggle to move the mouse in a straight line and keep the pointed inside the borders of the menu).
This question already has answers here:
How do I vertically align text in a div?
(34 answers)
How can I horizontally center an element?
(133 answers)
Closed 5 years ago.
I've looked at several posts here on stackoverflow and can't find an answer that solves my issue. The issue appears to be the same as many other questions, with the simple difference that I am trying to center text that will change and I want it perfectly centered.
Below is a a basic example of what I have currently; the text on the bottom is centered between the text on the left and right, where as the text on the top is centered in the DIV. The text on the bottom should reflect the same.
I have tried a multitude of solutions, from display: inline block (which decreases my spacer width) to margin: 0 auto, all the way to converting the containing div to display: table-cell, vertical align middle.
Any help will be greatly appreciated!
body {
background: #333;
color: white;
}
.container {
width: 80%;
height: 150px;
position: relative;
left: 10%;
}
.container .slide, li { display: none; }
.active { display: block !important; }
.header { text-align: center; }
ul {
margin: 0;
padding-left: 0px;
}
li {
list-style: none;
font-variant: small-caps;
}
.spacer {
width: 100%;
height: 1px;
background: white;
box-shadow: 1px 1px 15px 1px rgba(0, 150, 255, 1);
margin-top: 5px;
margin-bottom: 5px;
}
.slide {
width: 100%;
height: 79%;
background-color: white;
}
.focus { text-align: center; }
.left { float: left; }
.right { float: right; }
<div class="container">
<div class="header">
<div class="spacer"></div>
<ul>
<li class="active">Summary</li>
</ul>
<div class="spacer"></div>
</div>
<div class="slide active">
</div>
<div class="slide">
</div>
<div class="focus">
<div class="spacer"></div>
<ul class="left">
<li class="active">ASDF</li>
</ul>
<ul class="right">
<li class="active">POV - ASR</li>
</ul>
<ul>
<li class="active">LKJHGFDSAPOIURTQAJK</li>
</ul>
<div class="spacer"></div>
</div>
</div>
EDIT
This post is not able to use the answers utilized in both related questions; though they are similar in nature, setting a specific width for my LI elements to achieve perfect center is not possible with pure CSS (SCSS maybe but not CSS3). The display: table answer did not work for me. Hence the reason I asked it as a new question; I tried 15 different suggested answers before posting my question.
I would put the 3 links in the footer in a single ul, use display: flex on the ul, and flex: 1 0 0 on the li's so they'll take up the same amount of space, then use text-align in each li to position the text.
body {
background: #333;
color: white;
}
.container {
width: 80%;
height: 150px;
position: relative;
left: 10%;
}
.container .slide,
li {
display: none;
}
.active {
display: block !important;
}
.header {
text-align: center;
}
ul {
margin: 0;
padding-left: 0px;
}
li {
list-style: none;
font-variant: small-caps;
}
.spacer {
width: 100%;
height: 1px;
background: white;
box-shadow: 1px 1px 15px 1px rgba(0, 150, 255, 1);
margin-top: 5px;
margin-bottom: 5px;
}
.slide {
width: 100%;
height: 79%;
background-color: white;
}
.focus {
text-align: center;
}
/* new stuff */
.bottom {
display: flex;
}
.bottom li {
flex: 1 0 0;
}
.bottom li:first-child {
text-align: left;
}
.bottom li:last-child {
text-align: right;
}
<div class="container">
<div class="header">
<div class="spacer"></div>
<ul>
<li class="active">Summary</li>
</ul>
<div class="spacer"></div>
</div>
<div class="slide active">
</div>
<div class="slide">
</div>
<div class="focus">
<div class="spacer"></div>
<ul class="bottom">
<li class="active left">ASDF</li>
<li class="active left">LKJHGFDSAPOIURTQAJK</li>
<li class="active left">POV - ASR</li>
</ul>
<div class="spacer"></div>
</div>
</div>
If you don't want your left and right items to effect the positioning of the center item, you can take them out of the flow by using position: absolute;.
With this in place, you can align them using left or right.
ul.left, ul.right {
position: absolute;
}
ul.left {
left: 0;
}
ul.right {
right: 0;
}
Working example:
body {
background: #333;
color: white;
}
.container {
width: 80%;
height: 150px;
position: relative;
left: 10%;
}
.container .slide, li { display: none; }
.active { display: block !important; }
.header { text-align: center; }
ul {
margin: 0;
padding-left: 0px;
}
li {
list-style: none;
font-variant: small-caps;
}
.spacer {
width: 100%;
height: 1px;
background: white;
box-shadow: 1px 1px 15px 1px rgba(0, 150, 255, 1);
margin-top: 5px;
margin-bottom: 5px;
}
.slide {
width: 100%;
height: 79%;
background-color: white;
}
.focus { text-align: center; }
ul.right {position: absolute; right: 0;}
ul.left {position: absolute; left: 0;}
<div class="container">
<div class="header">
<div class="spacer"></div>
<ul>
<li class="active">Summary</li>
</ul>
<div class="spacer"></div>
</div>
<div class="slide active">
</div>
<div class="slide">
</div>
<div class="focus">
<div class="spacer"></div>
<ul class="left">
<li class="active">ASDF</li>
</ul>
<ul class="right">
<li class="active">POV - ASR</li>
</ul>
<ul>
<li class="active">LKJHGFDSAPOIURTQAJK</li>
</ul>
<div class="spacer"></div>
</div>
</div>
I've removed your float properties because with this implementation, they are no longer necessary.