I've been trying to make a vertical navigation for tablet and mobile.
I gave second level ul that position static, but It's still floating around like given position absolute.
the .depth2 should fit in between depth1>lis but it still floating around. the seethrough white boxes are the .depth2. how can I fix it?
<div class="header_con">
<span></span>
<p><img src="images/logo.png" alt="logo"></p>
<nav>
<ul class="depth1">
<li>코로나-19
<ul class="depth2">
<li>손세정제</li>
<li>소독제</li>
</ul>
</li>
<li>컬렉션
<ul class="depth2">
<li><small>new</small>클레멘타인 앤 바질</li>
<li><small>new</small>베티버 앤 바이올렛</li>
<li>아로마테라피 시너지</li>
<li>허벌리스트</li>
<li>풋 리바이버</li>
<li>인블룸</li>
<li>크리스탈크러쉬</li>
<li>배스타임</li>
<li>선물세트/ 기프트세트</li>
</ul>
</li>
<li>오일
<ul class="depth2">
<li>페이셜오일</li>
<li>멀티오일</li>
</ul>
</li>
.
.
.
</ul>
</nav>
</div>
</header>
navigation CSS for pc
header nav { width: 750px; position: absolute; left: 50%; margin-left: -360px;}
header ul.depth1>li{float: left; width: 70px; margin: 0 0.2%; font-size: 0.9em;
font-weight: bold; text-align: center;}
header ul.depth2{display: none; position: absolute; z-index: 100; width: 200px; margin-top: 20px;
background: #fff; text-align: left; padding: 20px; font-weight: normal; font-size: 0.8em;}
header ul.depth2>li {margin-bottom: 12px;}
navigation CSS for tablet
header div.header_con nav {/* display: none;*/ position: fixed; top: 0; right: 0; bottom: 0;
left: 0; width: 100%; height: 100%; background: #0b223b; z-index: 110; margin-left: 0;}
header div.header_con nav a{ color: white;}
header div.header_con nav .depth1{display: block; color: white; height: 100%;}
header div.header_con nav .depth1 li {float: none ;width: 100%; height: 50px; line-height: 50px;
border-bottom: 1px solid #999; }
header div.header_con nav .depth2 {display: block; position: static; width: 100%; height: auto;
margin-top: 0; padding: 0; background: rgba(255,255,255,0.4); }
header div.header_con nav .depth2 li {padding: 0 0 0 20px;}
Change position:static to position:relative on your tablet css for header div.header_con nav .depth2.
Static and absolute both pull content out of the document flow so use with care.
Also remove height:50px from header div.header_con nav .depth1 li as the 1st level li total height should also allow for the total height of nested ul
Related
I have a photo of the most recent post on my page and would like to put a small portion of text onto the top left corner of the picture. I have tried code to do so from other online resources, but none of them have worked. Can someone please check why my code isn’t working or provide an alternate method of putting text on an image?
Here is my HTML + CSS:
* {
margin: 0;
padding: 0;
}
body {
}
nav {
width: 100%;
height: 90px;
background-color: black;
display: flex;
}
nav h1 {
text-align: center;
font-family: arial;
color: white;
font-size: 44px;
line-height: 55px;
float: left;
padding: 15px 20px;
flex: 1 0 auto;
}
nav ul {
position: absolute;
right: 0;
}
nav ul li {
float: left;
list-style: none;
position: relative; /* we can add absolute position in subcategories */
padding-right: 1em;
}
nav ul li a {
display: block;
font-family: arial;
color: white;
font-size: 20px;
padding: 34px 14px;
text-decoration: none;
}
nav ul li ul {
display: none;
position: absolute;
background-color: black;
padding: 5px; /* Spacing so that hover color does not take up entire chunk */
border-radius: 0px 0px 4px 4px;
transform: translateX(1rem);
}
nav ul li:hover ul {
/* This means when li is hovered, we want the unordered list inside list item to do something. */
display: block;
}
nav ul li ul li{
width: 130px; /* increases width so that all text can be fit */
border-radius: 4px;
}
nav ul li ul li a:hover {
background-color: #ADD8E6;
a
}
.newest-review-cover img {
height: 50%;
width: 100%;
position: relative;
display: inline-block;
}
.newest-review-cover .newest-review-title {
position: absolute;
z-index: 999;
margin: 0 auto;
left: 0;
right: 0;
text-align: center;
top: 120%; /* Adjust this value to move the positioned div up and down */
background: rgba(0, 0, 0, 0.8);
font-family: Arial,sans-serif;
color: #fff;
width: 60%; /* Set the width of the positioned div */
}
<!DOCTYPE html>
<html>
<head>
<link href="header+footer.css" rel = "stylesheet" type="text/css" />
<link href="Homepage.css" rel = "stylesheet" type="text/css" />
<meta charset="utf-8">
<title> The Novel Column - Book Reviews </title>
</head>
<body>
<nav>
<h1> The Novel Column </h1>
<ul>
<li> Resources
<ul>
<li> Book Reviews </li>
<li> Quotes and Principles </li>
<li> Community Aid </li>
</ul>
</li>
<li> About Us </li>
</ul>
</nav>
<section class="newest-review-cover">
<img src="https://thenovelcolumn.com/wp-content/uploads/2019/06/the-5am-club-poster.jpg" alt="The 5AM Club">
<div class="newest-review-title">
<p> The 5AM Club </p>
</div>
</section>
</body>
</html>
Thanks in advance for your help!
For starters, you are targeting your newest-review-title class wrong in your CSS, by using a period between review and title. Change that. Also, try making your container the relative element instead of your image, like so:
.newest-review-cover {
position: relative;
}
.newest-review-cover img {
display: block;
width:100%;
}
.newest-review-title {
position: absolute;
display:block;
z-index: 999;
margin:0 auto;
text-align: center;
top: 50%;
width: 60%;
left:20%
}
This method provides an alternative solution using the CSS background image property. Then you can place your text in the div using the CSS you already had in place. You can adjust the height by adjusting the height of the div. The size of the image can be adjusted using the CSS background-size property.
* {
margin: 0;
padding: 0;
}
body {}
nav {
width: 100%;
height: 90px;
background-color: black;
display: flex;
}
nav h1 {
text-align: center;
font-family: arial;
color: white;
font-size: 44px;
line-height: 55px;
float: left;
padding: 15px 20px;
flex: 1 0 auto;
}
nav ul {
position: absolute;
right: 0;
}
nav ul li {
float: left;
list-style: none;
position: relative;
/* we can add absolute position in subcategories */
padding-right: 1em;
}
nav ul li a {
display: block;
font-family: arial;
color: white;
font-size: 20px;
padding: 34px 14px;
text-decoration: none;
}
nav ul li ul {
display: none;
position: absolute;
background-color: black;
padding: 5px;
/* Spacing so that hover color does not take up entire chunk */
border-radius: 0px 0px 4px 4px;
transform: translateX(1rem);
}
nav ul li:hover ul {
/* This means when li is hovered, we want the unordered list inside list item to do something. */
display: block;
}
nav ul li ul li {
width: 130px;
/* increases width so that all text can be fit */
border-radius: 4px;
}
nav ul li ul li a:hover {
background-color: #ADD8E6;
a
}
.newest-review-cover {
position: relative;
height: 383px;
width: 100%;
}
.newest-review-cover_bg {
background-image: url('https://thenovelcolumn.com/wp-content/uploads/2019/06/the-5am-club-poster.jpg');
height: 100%;
background-size: 100%;
background-repeat: no-repeat;
}
.newest-review-cover .newest-review.title {
position: absolute;
z-index: 999;
margin: 0 auto;
left: 0;
right: 0;
text-align: center;
top: 120%;
/* Adjust this value to move the positioned div up and down */
background: rgba(0, 0, 0, 0.8);
font-family: Arial, sans-serif;
color: #fff;
width: 60%;
/* Set the width of the positioned div */
}
<!DOCTYPE html>
<html>
<head>
<link href="header+footer.css" rel="stylesheet" type="text/css" />
<link href="Homepage.css" rel="stylesheet" type="text/css" />
<meta charset="utf-8">
<title> The Novel Column - Book Reviews </title>
</head>
<body>
<nav>
<h1> The Novel Column </h1>
<ul>
<li> Resources
<ul>
<li> Book Reviews </li>
<li> Quotes and Principles </li>
<li> Community Aid </li>
</ul>
</li>
<li> About Us </li>
</ul>
</nav>
<section class="newest-review-cover">
<div class="newest-review-cover_bg">
<p class="newest-review-cover_title">
The 5AM Club
</p>
</div>
</section>
</body>
</html>
I have a side navigation I'm building, and it needs to be fully keyboard accessible as well as have the links themselves nested in list items. Everything else works fine, but I've been asked to produce a hover animation which is an animated pseudo element.
I've got most of that done, being the structure of the nav and the animation. However, the animated ::before element always seems to show up at the top of the list item, and will push the anchor down by whatever height I've set. I've tried both height:inherit and 100% for the ::before content, but that doesn't work.
The ideal behavior is that the content would animate in-line with the anchor from the bottom to the top, and simply occupy the height (100%) of the li element with my specified width.
Note: I can't use list-style:none because a screen reader will not identify how many items are in the list.
EDIT: took out the button element. Just focusing on the menu.
Here's a CodePen: https://codepen.io/anon/pen/EZbLMY
Feel free to fork it.
HTML:
<div id="mySidenav" class="sidenav" aria-label="Menu" aria-hidden="true">
<nav>
<ul role="navigation">
<li id="about">About</li>
<li id="services">Services</li>
<li id="clients">Clients</li>
<li id="contact">Contact</li>
</ul>
</nav>
</div>
CSS:
/* The side navigation menu */
.sidenav {
height: 100%;
width: 250px;
position: absolute;
z-index: 2;
top: 0;
background-color: #fff;
overflow-x: hidden;
padding-top: 60px;
}
.showOverlay{
display: block !important;
}
/* The navigation menu links */
.sidenav a{
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #000;
display: block;
width: inherit;
}
/*Clean up space between elements*/
.sidenav nav ul{
padding: 0;
margin: 0;
}
.sidenav nav ul li::before{
content:"";
width: 4px;
height: 0px;
display: block;
background-color: #000000;
}
.sidenav nav ul li:hover::before{
height: 20px;
transition: 0.3s ease-out;
padding-left: 2px;
}
Change the position of the ::before element to absolute. Also, to line things up neatly, add a position:relative to the li elements.
/* The side navigation menu */
.sidenav {
height: 100%;
width: 250px;
position: absolute;
z-index: 2;
top: 0;
background-color: #fff;
overflow-x: hidden;
padding-top: 60px;
}
.showOverlay {
display: block !important;
}
/* The navigation menu links */
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #000;
display: block;
width: inherit;
}
/*Clean up space between elements*/
.sidenav nav ul {
padding: 0;
margin: 0;
}
/*Make li elements relative, so that the before elements are positioned correctly*/
.sidenav nav ul li {
position: relative;
}
.sidenav nav ul li::before {
content: "*";
width: 4px;
height: 0px;
display: block;
background-color: #000000;
/*Add absolute positioning*/
position: absolute;
top: 8px;
}
.sidenav nav ul li:hover::before {
height: 20px;
transition: 0.3s ease-out;
padding-left: 2px;
}
<div id="mySidenav" class="sidenav" aria-label="Menu" aria-hidden="true">
<nav>
<ul role="navigation">
<li id="about">About</li>
<li id="services">Services</li>
<li id="clients">Clients</li>
<li id="contact">Contact</li>
</ul>
</nav>
</div>
I have successfully stored a PDF object on the resume section of this website I am working on. However, I am trying to align the top of the Object (which in this case is the PDF viewer) with the bottom of the header (which is represented by a gray line in the upcoming screenshot). I keep getting whitespace in between the top of the Object and the bottom of the header, as evidenced in this screenshot.
Here is the HTML of the body section in question:
<body>
<header>
<a href="index.html" id="logo"> <h1>
<div id="header_title">
Title
</div></h1> </a>
<div id="header_border"></div>
<nav id="nav">
<ul>
<li>
<a href="index.html" class="selected" >About</a>
</li>
<li>
Resume
</li>
<li class="subNav">
<a>Portfolio</a>
<ul>
<li>
Writing Samples
</li>
<li>
Photoshop
</li>
</ul>
</li>
<li>
Contact
</li>
</ul>
</nav>
</header>
<object id="resume" data="img/Resume.pdf" type="application/pdf" style="float: left" width="100%" height="100%">
<p>
It appears you don't have a PDF plugin for this browser.
No biggie... you can <a href="myfile.pdf">click here to
download the PDF file.</a>
</p>
</object>
</body>
And CSS:
html {
height: 100%;
}
body {
font-family: 'Playfair Display', open sans;
height: 100%;
}
#wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
a {
text-decoration: none;
}
img {
max-width: 100%; /* images fill width of parent container
image will shrink with size of container */
}
h3 {
margin: 0 0 1em 0;
}
/************************
HEADING
*************************/
header {
position: relative;
float: left;
margin: 0 0 30px 0; /* top, right, bottom, left */
padding: 5px 0 0 0; /* ibid */
width: 100%; /* since floated, this element does not have an
explicit width; therefore, it must be assigned to 100%
of page*/
}
#logo {
text-align: center;
margin: 0;
}
h1 {
font-family: 'Playfair Display', open sans;
/* font-size: 100px; font-size is overruled in responsive.css
for computer screens set in min-width 660*/
margin: 85px 0;
font-weight: normal;
/* font-weight: normal; will unbold the headline, as headlines
are set to bold by default. */
line-height: 0.8em;
}
#header_title {
position: absolute;
bottom: 0;
left: 50px;
padding: 10px 0;
}
#header_border {
width: calc(95% - 70px);
position: absolute;
bottom: 0;
margin-left: 50px;
border-bottom: 2px solid #dddede;
}
/************************
NAVIGATION
*************************/
nav {
position: absolute;
bottom: 0;
right: 0;
padding: 10px 0;
}
nav ul {
list-style: none;
margin: 0 10px;
padding: 0;
}
nav > ul > li { /* only impacts the first list items; keeps About, Portfolio, Contacts in horizontal line*/
display: inline-block;
position: relative;
}
nav > ul> li> a {
font-weight: 800;
padding: 15px 10px;
}
nav > ul > li.subNav ul > li> a {
}
nav > ul > li.subNav ul { /* now free to style/block secondary list*/
display: none;
position: absolute;
top: 100%;
left: 0;
white-space: nowrap;
background: pink;
}
nav ul li.subNav:hover ul {
display: block;
text-align: left;
}
/***********************
* BODY
*/
#resume {
height: 100%;
width: 100%;
}
Your header styles have a margin of 30px on the bottom. Remove this and the object will line up with the bottom of your header.
margin: 0 0 30px 0; /* top, right, bottom, left */
should be
margin: 0;
I seem to be having trouble getting my navigation bar to span the width of the page and to locate itself underneath the header I've added. Could someone please help me?
<body>
<div id= "header">
FOOD
</div>
<div id= "navbar">
<ul>
<li>Home </li>
<li>Favs </li>
<li>Cusine
<ul>
<li>Asian </li>
<li>Europe </li>
</ul>
</li>
<li>Recipes </li>
<li>FAQ </li>
<li>Contact Us </li>
</ul>
</div>
</body>
This is the css I've used. I kept adding widths but it just seems to have different widths.
#navbar
{
clear: both;
float: left;
margin: 0px;
padding: 0px;
width: 100%;
font-family: sans-serif;
z-index: 1000;
position: relative;
top: 100px;
}
#navbar ul
{
list-style: none;
padding: 0px;
margin: 0px;
float: right;
position: relative;
right: 50%;
}
#navbar ul li
{
float: left;
position: relative;
left: 50%;
}
#navbar ul li a
{
display: block;
margin: 0px;
text-decoration: none;
background-color: #735D41;
color: white;
font-weight: bold;
text-align: center;
border: 1px solid;
width: 100%;
}
#navbar ul li ul li a
{
background-color: #735D41;
color: white;
}
#navbar ul ul
{
display: none;
position: relative;
left: 0px;
right: auto;
}
#navbar ul ul li
{
left: auto;
margin: 0px;
clear: left;
width: 100%;
}
A good option would be to remove most of your floats and relative positioning and instead use display:table on the ul and display:table-cell on the lis. This will enable you to stretch the nav across the screen. Try it with this:
#navbar ul {
list-style: none;
padding: 0px;
margin: 0px;
width:100%;
display:table;
}
#navbar ul li {
display:table-cell;
}
See an Example here
In this example I used your code but changed and removed a few things. It should be sufficient enough to give you a good idea of what to do.
When I place the width of by web page as 100% it fits to the browser. But when I re-adjust the size of the browser the navigation bar I used overlaps and all the positions go wrong. I can't figure out the mistake yet. I will post the css and the html code below. Please someone help me to fix my web page.
HTML:
<div class="main">
<div class="header">
<div class="logo12">
<h2 style="position:absolute; left:20px; top:2px; color:#FFFFFF;">
<a>
<font face="verdana">PHIS</font>
<small>Public Health Information System-Sri Lanka</small>
</a>
</h2>
</div>
<div>
</div>
<div id="menu">
<ul>
<li>Home</li>
<li>
Services
<ul id="SubNav">
<li id="AccessFormPHI">Data Entry</li>
<li id="DataEntry">Edit Temporary Forms</li>
<li id="ViewData">View Data</li>
<li id="ViewAggregatedData">Data Aggregation</li>
</ul>
</li>
<li>Help</li>
<li>
Profile
<ul id="SubNav">
<li id="AccessForm">View and Maintain Profile</li>
<li id="ChangePassword">Change Password</li>
<li>Log Out</li>
</ul>
</li>
</ul>
</div>
</div>
CSS:
/* Height of the navigation bar became shorter */
.main {
width: 100%;
font: 13px Georgia, "verdana", "Times New Roman", Times, serif;
color: #FFFFFFF;
background-color: #F2F2F2;
height: 1000px;
left: 0px;
}
/* No difference was appeared*/
#cssmenu {
position: absolute;
top: 100px;
left: 0px;
}
/* Adjust the olor of the navigation bar */
.logo12 {
position: absolute;
padding-top: 10px;
/*padding-left: 60px; */
top: 0%;
height: 6%;
width: 100%;
left: 0px;
background: -moz-linear-gradient(top,#084B8A ,#0B173B);
}
/* Adjust the place where navigation */
#menu {
position: absolute;
left: 45%; /* change to 390px to 350px */
top: 20px;
display: inline;
}
#menu ul {
margin-left: auto;
margin-right: auto;
width :700px; /*change to 60% to 800px*/
}
/* upto now no difference */
#menu ul li {
display: inline;
float: left;
list-style: none;
position: relative;
height: 60px;
width: 130px;
padding-bottom: 20px;
font-size: 13px;
}
/* Adjust the width of the sub navigation bar */
#menu ul li ul li {
float: left;
list-style: none;
position: relative;
height: 30px;
width: 180px;
font-size: 12px;
}
/* Adjust the color of the sub navigation bar */
#menu li ul {
margin: 0px;
padding: 10px;
display: none;
position: absolute;
left: 0px;
z-index: 99;
top: 28px;
background: -moz-linear-gradient(top,#084B8A ,#0B173B); #726E6D; /*Menu Hover Color*/
border: 1;
}
#menu ul li:hover ul {
display: block;
width: auto;
}
/* Upto now no difference was visible */
#menu li li {
list-style: none;
}
/* Color of sub navigation bar letters became gray */
#menu li li a {
color: #FFFFFF;
text-decoration: none;
}
/* Letters hover color red in the sub navigation bar */
#menu li li a:hover {
color: #900;
text-decoration: none;
}
/* Upto now no difference */
li#main1 {
padding-top: 0px;
}
/* Main navigation bar disappeared */
#menu a {
padding-right: 25px;
text-decoration: none;
letter-spacing: -1px;
font-size: 1.2em;
color: #BDBDBD;
font: cambria;
}
/* Upto now no difference */
#menu ul li a:hover {
/* background: #D8D8D8; /*a tag hover color*/
padding: 5px; /*change to 12px to 5px*/
left: 0px;
}
You can use relative width for CSS,for example:
.main, .header{width:100%;}
Add white-space: nowrap to your navigation CSS. I know this is an old post, but seems to have no solution yet.