I'm having trouble displaying the form, in the div tabs. Any quick solution without changing a whole lot of code or using javascript?
I'm quite new, and have used a tutorial of youtube to create the responsive tabs using only css and html. Please ignore the nav bar as i will be fixining, just the tabs and forms.
nav {
list-style-type: none;
font-family: sans-serif;
margin: 0;
padding: 0;
width: 20%;
background-color: #3C3939;
height: 100%;
/*full height */
position: fixed;
/* Make it stick, even on scroll */
overflow: auto;
/* enable scrolling if the sidenav has too much content */
}
li a {
display: block;
/* links as block elements, whole link area click */
color: #000;
padding: 8px 1px;
/*padding between pages*/
padding-top: 20px;
text-decoration: none;
text-align: center;
}
ul {
list-style-type: none;
}
/* change link color on hover */
li a:hover {
background-color: #555;
color: #F3ECEC;
}
.title {
text-align: center;
color: #3C3939;
background-color: #3C3939;
}
.title1 {
text-align: center;
color: #572222;
background-color: #3C3939;
padding-top: 20px;
}
/* NAV ENDS */
/* TABS STRS */
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
font-family: arial;
font-size: 16px;
line-height: 1.6
}
.container {
max-width: 452px;
margin: 50px auto;
position: relative;
left: 20%;
bottom: 10%;
}
.tab_trigger {}
.tab_trigger ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
}
.tab_trigger ul li {
width: 50%;
}
.tab_trigger ul li label {
position: relative;
display: block;
padding: 8px 15px;
cursor: pointer;
min-width: 100px;
text-align: center;
font-weight: 700;
text-transform: uppercase;
border-radius: 8px 8px 0 0;
}
.tab_trigger ul li:nth-child(1) label {
background: rgb(90, 72, 72);
}
.tab_trigger ul li:nth-child(2) label {
background: rgb(90, 72, 72);
}
.tab_container_wrap {
overflow-y: scroll;
overflow-x: hidden;
height: 590px;
}
.tab_container_wrap input {
position: absolute;
width: 0;
height: 0;
margin: 0;
z-index: -100;
top: -10000px;
}
.tab_container_wrap input:checked+.tab_content_box {
display: block;
}
.tab_container_wrap :-ms-input-placeholder:checked+.tab_content_box {
display: block;
}
/* CONTENT BOX SWITCH*/
.tab_content_box {
background: yellow;
padding: 20px;
height: 590px;
}
.tab_content_box h2 {
margin: 0 0 20px
}
.tab_content_box:nth-of-type(1) {
background: #3C3939;
display: none;
}
.tab_content_box:nth-of-type(2) {
background: #3C3939;
overflow: visible;
}
/* END CONTENT BOX SWITCH */
/* END TABS */
/* STYLING SCRUMS STRT */
.scrums2 {
position: absolute;
left: 100px;
}
<!DOCTYPE html>
<html>
<head>
<title>Organize</title>
<link rel="stylesheet" href="Home.css" hreflang="test.py" type="text/css">
</head>
<body>
<nav>
<ul>
<li>
<div class="title">
<h1>Organize</h1>
</div>
</li>
<li>Folders</li>
<li>Timeline</li>
<li>Pages</li>
<li>Meetings</li>
<li>
<div class="title1">
<h3>documents</h3>
</div>
</li>
<li></li>
</ul>
</nav>
<!-- TABS -->
<div class="container">
<div class="tab_trigger">
<ul>
<li><label for="tab1">Messages</label></li>
<li><label for="tab2">scrums</label></li>
</ul>
</div>
<div class="tab_container_wrap">
<input type="radio" checked id="tab1" name="1">
<!-- MESSAGES -->
<div class="tab_content_box">
<h2>Messages</h2>
<p>YOU KNOW WHAT</p>
</div>
<!-- MESSAGES END -->
<input type="radio" checked id="tab2" name="1">
<!-- SCRUMS -->
<div class="tab_content_box">
<h2>Scrums</h2>
<p>hi</p>
<div class="scrums2">
<div class="form">
<p>hi</p>
<ul>
<p>hi</p>
<li>hi<input type="text" id="a" name="a" placeholder="What did you do today?"></li>
<li><input type="text" id="b" name="b" placeholder="Obstacles faced?"></li>
<li><input type="text" id="c" name="c" placeholder="What did you do yesterday?"></li>
</ul>
</div>
</div>
</div>
<!-- SCRUMSEND -->
<!-- TABSEND -->
</div>
</div>
</body>
</html>
Fixed :) any future people answer :
.tab_container_wrap input{} needed an input type by doing .tab_container_wrap input[type=radio]
otherwise, input elements that are in the div container will be hidden.
Here is a sample code of the answer.
.tab_container_wrap input[type="radio"]{
position:absolute;
width:0;
height:0;
margin:0;
z-index: -100;
top: -10000px;
}
.tab_container_wrap input:checked + .tab_content_box{
display: block;
}
.tab_content_box:nth-of-type(1){
background:#3C3939;
display: none;
}
.tab_content_box:nth-of-type(2){
background: #3C3939;
display: none;
}
Related
/*---POPUP MENU CSS---*/
.box{
position:fixed;
top: 0.1%;
left: 14px;
display: inline-block;
cursor: pointer;
}
ul{
list-style-type: none;
}
ul li{
font-family: Lato;
padding: 10px;
}
ul li a{
text-decoration: none;
color: black;
}
ul li:hover{
background-color: bisque;
}
.box1{
position: absolute;
top:3%;
left:15px;
z-index: 1;
background-color: floralwhite;
max-width: 260px;
box-sizing: border-box;
box-shadow: 2px 5px 15px black;
display: none;
}
.box2{
position: absolute;
top:3%;
left:8%;
z-index: 2;
background-color: floralwhite;
max-width: 260px;
box-sizing: border-box;
box-shadow: 2px 5px 15px black;
display: none;
}
.box:hover .box1{
display: block;
}
#nav li:focus .box2 {
display:block;
}
<!--box-->
<div class="box">
<img src="https://img.icons8.com/ios-filled/344/menu-rounded.png"
height="35px"width="35px" id="menu">
<!--box1-->
<div class="box1">
<ul>
<li id="nav">item1 »</li>
<li>item2</li>
<li><a href="#" >item3</a></li>
<li>item4</li>
<li><a href="#" >item5</a></li>
<li>item6</li>
</ul>
</div>
</div>
<!--box2-->
<div class="box2">
<ul>
<li>sub-item1</li>
<li>sub-item2</li>
<li>sub-item3</li>
<li>sub-item4</li>
</ul>
</div>
I'm trying to create a popup menu that appears when you click or hover on a small image(basically an icon)with only html and css no js. But problem is the main menu appears but sub-menu don't appear when you focus on some desire item from the list.
Is there anything that I can do? I just want to build a very basic menu.`
You can use checkbox inputs to simulate this behaviour with the :checked attribute.
By hiding the checkbox and making your menu icon a label for that input element, you can toggle the checked state and use CSS to display based on that instead of hover.
/*---POPUP MENU CSS---*/
.box {
position: fixed;
top: 0.1%;
left: 14px;
display: inline-block;
cursor: pointer;
}
ul {
list-style-type: none;
}
ul li {
font-family: Lato;
padding: 10px;
}
ul li a {
text-decoration: none;
color: black;
}
ul li:hover {
background-color: bisque;
}
.box1 {
position: absolute;
top: 3%;
left: 15px;
z-index: 1;
background-color: floralwhite;
max-width: 260px;
box-sizing: border-box;
box-shadow: 2px 5px 15px black;
display: none;
}
.box2 {
position: absolute;
top: 3%;
left: 8%;
z-index: 2;
background-color: floralwhite;
max-width: 260px;
box-sizing: border-box;
box-shadow: 2px 5px 15px black;
display: none;
}
#nav li:focus .box2 {
display: block;
}
/**
* Checkbox toggle
*/
/* hide the checkbox */
.menu-toggle {
display: none;
}
/* display the box when input is checked */
.menu-toggle:checked ~ .box1 {
display: block;
}
<!--box-->
<div class="box">
<!-- hidden checkbox -->
<input class="menu-toggle" id="menu-toggle" type="checkbox" />
<!-- label for the toggle -->
<label for="menu-toggle">
<img src="https://img.icons8.com/ios-filled/344/menu-rounded.png"
height="35px"width="35px" id="menu">
</label>
<!--box1-->
<div class="box1">
<ul>
<li id="nav">item1 »</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
</ul>
</div>
</div>
<!--box2-->
<div class="box2">
<ul>
<li>sub-item1</li>
<li>sub-item2</li>
<li>sub-item3</li>
<li>sub-item4</li>
</ul>
</div>
There is a navigation menu that I developed in <header>. However, the <p> element I use after the <header> element and the <header> components overlap. Why does this issue occur and how do I fix this issue?
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: cabin, sans-serif;
}
header {
display: block;
}
.primary {
color: blue;
font-weight: bold;
}
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 70px;
position: fixed;
top:0px;
padding: 0 30px;
background: transparent;
}
.navbar ul {
display: flex;
}
.navbar li {
list-style: none;
}
.navbar a {
text-decoration: none;
margin: 0 5px;
padding: 10px 20px;
font-weight: bolder;
}
.navbar a:hover{
border-bottom: 2px blue solid;
}
.navbar a:visited{
color: blue;
}
<body>
<!-- Navigation Menu -->
<header>
<div class="navbar">
<h1 class="logo"><span class="primary">benj</span>.codes</h1>
<ul>
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</div>
</header>
<!-- Content -->
<p>test</p>
</body>
This issue occurs in the .navbar class style position: fixed; caused by its use. In this case, the navigation menu remains fixed when the scrollbar is opened. So you can enclose other elements after the <header> element in a <div> element; apply a margin-top style to this element and you will see all other content scroll.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: cabin, sans-serif;
}
header {
display: block;
}
.primary {
color: blue;
font-weight: bold;
}
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 70px;
/* This style applied causes the <p> element to render above. */
position: fixed;
top:0px;
padding: 0 30px;
background: yellow;
}
.navbar ul {
display: flex;
}
.navbar li {
list-style: none;
}
.navbar a {
text-decoration: none;
margin: 0 5px;
padding: 10px 20px;
font-weight: bolder;
}
.navbar a:hover{
border-bottom: 2px blue solid;
}
.navbar a:visited{
color: blue;
}
/* The following style has been applied to the <div> element that encloses other elements. */
.container {
margin-top: 70px; /* To avoid shifting caused by the "position: fixed" class style */
height: 1500px; /* To make the scrollbar pop up */
}
p {
height: 200px;
border: 1px solid red;
background-color: lightgray;
}
<body>
<header>
<div class="navbar">
<h1 class="logo"><span class="primary">benj</span>.codes</h1>
<ul>
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</div>
</header>
<div class="container">
<p>Content</p>
</div>
</body>
I've been trying to search for a solution but I couldn't find any yet.
I would like to make a transparent navigational menu bar with a hero section just like in this website here https://paragonmigration.com/
I'm having trouble with the image part where the navigation menu overlapses it.
This is what I have done so far with html:
body {
padding: 0;
margin: 0;
width: 100%; /* fixes white space on the right side */
overflow-x: hidden; /* fixes white space on the right side */
}
h4 {
font-size: 18px;
}
/*#top-header {
height: 39px;
background-color: #36404a;
color: #fff;
line-height: 39px;
padding-left: 50px;
margin: 0;
padding: 0;
}*/
.top-header {
display: flex;
background-color: #36404a;
color: #fff;
height: 39px;
align-items: center;
}
.top-header > div {
margin: 0 15px;
}
.top-header > div > i {
margin-right: 5px;
}
.top-header-address {
padding-left: 50px;
}
.top-header-email {
flex: 2;
}
.top-header-facebook {
flex-basis: 2em;
}
.top-header-facebook a {
color: #fff;
}
.top-header-book {
display: flex; /* in order to center the elements inside */
background-color: #fa0505;
flex-basis: 251px;
height: 100%; /* in order to entirely stretch and fill to the parent element's* height */
align-items: center;
justify-content: center;
}
/* remove the right margin for the last div */
.top-header div:nth-last-child(1) {
margin: 0;
}
.top-header-book a {
text-decoration: none;
color: #fff;
margin-right: 5px;
font-weight: bold;
}
/*
#site-header-menu {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
*/
.nav-menu {
display: flex;
height: 80px;
background-color: rgba(255, 255, 255, 0.6);
align-items: center;
}
/* add sticky functionality to navigation menu */
.sticky {
position: fixed;
top: 0;
width: 100%;
background-color: #36404a;
color: #fff;
z-index: 2;
}
.sticky.nav-menu ul li a {
color: #fff;
}
.logo img {
height: 75px;
width: 156px;
}
.nav-menu ul {
display: flex;
flex: 4;
/*height: 100%;*/
justify-content: center;
align-items: center;
list-style-type: none;
margin: 0;
padding: 0;
}
.nav-menu ul > li {
font-size: 14px;
margin: 0 10px;
}
.nav-menu ul li a {
text-decoration: none;
color: #000;
}
.have-questions {
display: flex;
align-items: center;
justify-items: center;
text-align: center;
}
.message-icon i {
color: red;
}
.questions {
font-size: 18px;
margin: 10px;
line-height: 1.5em;
}
#slider {
position: relative;
top: -150px;
padding: 0;
background: url('../assets/images/slide.jpg') no-repeat center center fixed;
/* background-size: cover;*/
height: 750px;
color: #fff;
z-index: -1;
}
<div id="site-header-menu">
<div class="container top-header">
<div class="top-header-address">
<i class="fas fa-map-marker-alt"></i>
Address: 2903, Single Business Tower, Dubai
</div>
<div class="top-header-email">
<i class="far fa-envelope"></i>
Email Address: info#paragonmigration.com
</div>
<div class="top-header-facebook">
<i class="fab fa-facebook-f"></i>
</div>
<div class="top-header-book">
Book A Consultation
<i class="fas fa-long-arrow-alt-right"></i>
</div>
</div><!-- #site-header-menu -->
<div class="nav-menu" id="nav-menu">
<div class="logo"><img src="assets/images/logo.png" alt="logo"></div>
<ul>
<li>HOME</li>
<li>ABOUT US</li>
<li>CANADA</li>
<li>POLAND</li>
<li>AUSTRALIA</li>
<li>NEW ZEALAND</li>
<li>UK</li>
<li>CONTACT US</li>
</ul>
<div class="have-questions">
<div class="message-icon"><i class="far fa-comment-alt fa-3x"></i></div>
<div class="questions">
<div>Have any Questions?</div>
<div>04 303 3000</div>
</div>
</div>
</div><!-- .nav-menu -->
</div><!-- site-header-menu -->
<div id="slider">
<p id="welcome">WELCOME TO PARAGON</p>
<p id="migration">Migration and Visa</p>
<p id="consultants"><em>Consultants</em></p>
LEARN MORE >
</div><!-- #slider -->
I am pretty new to web-development and as I'm making the navbar, the positioning is off. This is a picture of what's happening. The right side of the navbar entailing the links/other pages are going under, but when I make the right-side logo smaller, they go back up. I'm not sure what is happening. My code is as follows:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Speech and Debate</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<!-- inline css styling to reset margins/padding -->
<body style="margin: 0; padding: 0">
<header style="width: 100%; height: 10vh; background: #002654; top: 2.5vh">
<div id="green-strip"></div>
<div class="container">
<img src="../img/sd-logo.png" alt="logo" class="logo" width="300vw">
<nav>
<ul>
<li>Home</li>
<li>Debate</li>
<li>Speech</li>
<li>Schedule</li>
<li>News</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
CSS
#green-strip{
width: 100%; height: 2.5vh;
border-style: solid;
border-color: #026f4d;
background-color: #026f4d;
}
// nav bar container
.container {
width: 100%;
margin: 0 auto;
}
// nav bar background
// header {
// width: 100%; height: 10vh;
// background: #002654;
// top: 2.5vh;
//}
// prevents container from shrinking after nav bar elements float
header::after {
content: '';
display: table;
clear: both;
}
.logo {
text-align: left;
}
nav {
text-align: right;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 2vw;
margin-right: 2vw;
position: relative;
}
nav ul li a {
font-family: 'Work Sans', sans-serif;
font-weight: 500;
font-style: normal;
letter-spacing: 0.05vw;
font-smooth: 2em;
font-size: 13px;
color: #fff;
text-decoration: none;
text-transform: uppercase;
}
nav a:hover {
color: #b6b8b6;
}
nav a::before {
content: '';
display: block;
height: 0.35vh;
width: 100%;
background-color: #fff;
position: absolute;
top: -2vh;
width: 0%;
transition: all ease-in-out 250ms;
}
nav a:hover::before {
width: 100%;
}
Thank you very much.
You can ensure the content inside navigation is adjusted to center by setting display to flex just like what #somedev said.
#green-strip{
width: 100%; height: 2.5vh;
border-style: solid;
border-color: #026f4d;
background-color: #026f4d;
}
// nav bar container
.container {
width: 100%;
margin: 0 auto;
}
// nav bar background
// header {
// width: 100%; height: 10vh;
// background: #002654;
// top: 2.5vh;
//}
// prevents container from shrinking after nav bar elements float
header::after {
content: '';
display: table;
clear: both;
}
.logo {
text-align: left;
}
nav {
display: flex;
text-align: right;
justify-content: center;
}
nav img{
position: absolute;
left: 0;
}
nav ul {
position: absolute;
margin: 0;
padding: 0;
list-style: none;
right: 0;
}
nav li {
display: inline-block;
margin-left: 2vw;
margin-right: 2vw;
position: relative;
}
nav ul li a {
font-family: 'Work Sans', sans-serif;
font-weight: 500;
font-style: normal;
letter-spacing: 0.05vw;
font-smooth: 2em;
font-size: 13px;
color: #fff;
text-decoration: none;
text-transform: uppercase;
}
nav a:hover {
color: #b6b8b6;
}
nav a::before {
content: '';
display: block;
height: 0.35vh;
width: 100%;
background-color: #fff;
position: absolute;
top: -2vh;
width: 0%;
transition: all ease-in-out 250ms;
}
nav a:hover::before {
width: 100%;
}
<!-- inline css styling to reset margins/padding -->
<body style="margin: 0; padding: 0">
<header style="width: 100%; height: 10vh; background: #002654; top: 2.5vh">
<div id="green-strip"></div>
<div class="container">
<nav>
<img src="../img/sd-logo.png" alt="logo" class="logo" width="300vw">
<ul>
<li>Home</li>
<li>Debate</li>
<li>Speech</li>
<li>Schedule</li>
<li>News</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
Its becouse your logo element has wrong position set.
Try adding this:
.logo {
text-align: left;
position: absolute;
}
"position: absolute;" means that your logo will be ignored by other elements and will always be right there where you want it to be
Also when designing a page it is always a good idea to remove margin and padding in a very beginning of css file, like this:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
Please help, I need the white space on the right bar gone and the position of the main content placed at the middle of the page.
What should I do? Any suggestion?
This is my site : http://www.plebonline.co.uk
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px 18px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #ea730b;
}
.clock {
color: white;
text-align: center;
padding: 16px 18px;
display: block;
}
.leftbar {
float: left;
background-color: #333;
width: 10%;
margin: 0;
padding: 1em;
margin-bottom: -5000px;
padding-bottom: 5000px;
overflow: hidden;
}
.rightbar {
float: right;
background-color: #333;
width: 10%;
margin: 0;
padding: 1em;
margin-bottom: -5000px;
padding-bottom: 5000px;
overflow: hidden;
}
.maincontent {
padding: 0;
float:left;
margin-left: 10%;
margin-right: 10%;
background-color: #ff00ff;
width: 80%;
}
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li>Projects</li>
<li>Notes</li>
<li>About</li>
<li>Contact</li>
<li style="float:right" class="clock" id="clock"></li>
<script>
var today = new Date();
document.getElementById('clock').innerHTML=today;
</script>
</ul>
<div class="leftbar"></div>
<div class="maincontent"></div>
<div class="rightbar"></div>
There is a div tag close without opening that may be causing the problem.
Change:
<div class="leftbar"></div>
<div class="maincontent"></div>
</div>
<div class="rightbar"></div>
To:
<div class="leftbar"></div>
<div class="maincontent"></div>
<div class="rightbar"></div>
I notice that you didn't put your rightbar and leftbar in any div. In my code here, I remove the right and left bar. You can adjust the code if you want them back.
It's better to add some container to hold all of your element. As you notice the header and the maincontent is inside the div class .container.
Hope this help.
html,body {
margin:0;
padding:0;
height: 100%;
/*
* The container which hold the header and the main content
*/
.container {
width:100%;
position: absolute;
height:1200px;
background:#333;
}
/*
* Header which contain your menu and date
*/
.header {
width:100%;
}
/*
* The main content of your site
*/
.maincontent {
width:80%;
max-width:1000px;
background-color: #fff;
float:left;
left:50%;
height:100%;
margin-left:-500px;
position: absolute;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px 18px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #ea730b;
}
.clock {
color: white;
text-align: center;
padding: 16px 18px;
display: block;
}
</style>
<body>
<div class="container">
<div class="header">
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li>Projects</li>
<li>Notes</li>
<li>About</li>
<li>Contact</li>
<li style="float:right" class="clock" id="clock"></li>
<script>
var today = new Date();
document.getElementById('clock').innerHTML=today;
</script>
</ul>
</div>
<div class="container">
<div class="maincontent">
<h1>This is the content</h1>
</div>
</div>
</body>