I'd like to create a dropdown menu from the profile section of the navbar. How can I do that?
I've tried looking it up but I didn't found any good sulotion that fits my ides. (I'd like this dropdown menu to contain 2 items.)
*{
text-decoration: none;
background-color: #141424;
color: #787884;
margin: 0;
padding: 0;
}
.avatar{
vertical-align: middle;
}
ul li {
padding: 30px 40px;
font-size: 2rem;
list-style-type: none;
display: inline-block;
font-family: sans-serif;
}
ul li a{
font-family: "Magic Mushroom";
}
a:hover{
color: white;
}
ul li:hover a{
background-color: #454552;
}
ul li:hover{
background-color: #454552;
}
ul li a img{
border-radius: 50%;
}
.nav{
text-align: center;
border-bottom: 3px solid #787884;
}
.active{
color: white;
}
<div class="nav">
<ul>
<li>Main page</li>
<li>Servers</li>
<li>Rules</li>
<li>VIP</li>
<li>Contact</li>
<li>Profile</li>
</ul>
</div>
not that much stylish but like regular ones you see on other websites
also don't forget to run it on your own browser
try to make it responsive
you are using "px" that is not a good idea for declaring measures
try to use "vh" for height and "vw" for width
*{
text-decoration: none;
background-color: #141424;
color: #787884;
margin: 0;
padding: 0;
}
.avatar{
vertical-align: middle;
}
ul li {
padding: 30px 40px;
font-size: 2rem;
list-style-type: none;
display: inline-block;
font-family: sans-serif;
}
ul li a{
font-family: "Magic Mushroom";
}
a:hover{
color: white;
}
ul li:hover a{
background-color: #454552;
}
ul li:hover{
background-color: #454552;
}
ul li a img{
border-radius: 50%;
}
.nav{
text-align: center;
border-bottom: 3px solid #787884;
}
.active{
color: white;
}
.dropdown {
position: absolute;
height: 0;
pointer-events: none;
opacity: 0;
transition: 0.3s ease;
width: 40vw;
top: 120px;
display: flex;
z-index: -1;
flex-direction: column;
right: 10%;
background-color: #454552;
}
.profile:hover .dropdown{
height: 10vh;
opacity: 1;
pointer-events: all;
top: 100px;
z-index: 1;
}
<html lang="hu">
<head>
<meta charset="UTF-8">
<meta name="author" content="Farkas">
<title></title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="nav">
<ul>
<li>Main page</li>
<li>Servers</li>
<li>Rules</li>
<li>VIP</li>
<li>Contact</li>
<li class="profile">Profile
<ul class="dropdown">
<li>item1</li>
<li>item2</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Related
My problem is, that my mobile navbar dont work and i cant figure out why.
I searched up on much websites but cant find anything what i did wrong.
Of course i changed this but i still dont know what and my mobile navbar dont show up:
Image: https://prnt.sc/BH-gA0TxumST
Here you can see, that the menu is almost there but when i click, nothing happens.
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Astra | Discord bot</title>
<meta content="" name="description">
<meta content="" name="keywords">
<meta property="og:title" content="Astra · Discord Bot" />
<meta property="og:type" content="website" />
<meta property="og:image" content="/assets/img/favicon.png" />
<meta property="og:description"
content="Astra manages your server - you can handle your discord server with Astra: Administration, level system, temp channels, welcome message, and much more." />
<meta name="theme-color" content="#5846f9">
<link href="assets/img/favicon_transparent.png" rel="icon">
<link href="assets/img/favicon_transparent.png" rel="favicon_transparent">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Roboto:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
<link href="assets/vendor/aos/aos.css" rel="stylesheet">
<link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
<link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
<link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
<link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
<link href="assets/css/style.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
</head>
<body>
<?php
include_once 'templates/header.php';
?>
header.php
<header id="header" class="fixed-top ">
<div class="container d-flex align-items-center justify-content-between">
<img src="../assets/img/Astra_Stern.png" alt="" >
<nav id="navbar" class="navbar">
<ul >
<li><a class="nav-link scrollto active" href="https://astra-bot.de/#hero">Home</a></li>
<li><a class="nav-link scrollto" href="https://astra-bot.de/#about">About</a></li>
<li><a class="nav-link scrollto" href="https://astra-bot.de/#team">Team</a></li>
<li><a class="nav-link scrollto" href="https://astra-bot.de/#features">Features</a></li>
<li><a class="nav-link scrollto" href="https://astra-bot.de/#faq">FAQ</a></li>
<li><a class="file" href="commands">Commands</a></li>
<li><a class="getstarted" href="./invite.php">Invite</a></li>
</ul>
<i class="bi bi-list mobile-nav-toggle"></i>
</nav>
</div>
</header>
css
/**
* Template Name: Techie - v4.3.0
* Template URL: https://bootstrapmade.com/techie-free-skin-bootstrap-3/
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/
/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
font-family: "Open Sans", sans-serif;
color: #444444;
}
a {
color: #5846f9;
text-decoration: none;
}
a:hover {
color: #8577fb;
text-decoration: none;
}
h1, h2, h3, h4, h5, h6 {
font-family: "Poppins", sans-serif;
}
/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.back-to-top {
position: fixed;
visibility: hidden;
opacity: 0;
right: 15px;
bottom: 15px;
z-index: 996;
background: #5846f9;
width: 40px;
height: 40px;
border-radius: 4px;
transition: all 0.4s;
}
.back-to-top i {
font-size: 28px;
color: #fff;
line-height: 0;
}
.back-to-top:hover {
background: #7b27d8;
color: #fff;
}
.circular--square {
border-radius: 50%;
}
.back-to-top.active {
visibility: visible;
opacity: 1;
}
::-webkit-scrollbar {
width: 20px;
}
::-webkit-scrollbar-track {
background-color: #373131;
}
::-webkit-scrollbar-thumb {
background-color: #5846f9;
border-radius: 20px;
border: 6px solid transparent;
background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
background-color: #686868;
}
::selection {
color: #5846f9;
background-color: #69c1e4;
}
/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9999;
overflow: hidden;
background: #36393e;
}
#preloader:before {
content: "";
position: fixed;
top: calc(50% - 30px);
left: calc(50% - 30px);
border: 6px solid #5846f9;
border-top-color: #e7e4fe;
border-radius: 50%;
width: 60px;
height: 60px;
-webkit-animation: animate-preloader 1s linear infinite;
animation: animate-preloader 1s linear infinite;
}
#-webkit-keyframes animate-preloader {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#keyframes animate-preloader {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
#media screen and (max-width: 768px) {
[data-aos-delay] {
transition-delay: 0 !important;
}
}
/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#header {
transition: all 0.5s;
z-index: 997;
padding: 20px 0;
}
#header.header-scrolled, #header.header-inner-pages {
background: rgba(24, 6, 185, 0.8);
padding: 12px 0;
}
#header .logo {
font-size: 32px;
margin: 0;
padding: 0;
line-height: 1;
font-weight: 400;
letter-spacing: 2px;
text-transform: uppercase;
}
#header .logo a {
color: #fff;
}
#header .logo img {
max-height: 40px;
}
/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/**
* Desktop Navigation
*/
.navbar {
padding: 0;
}
.navbar ul {
margin: 0;
padding: 0;
display: flex;
list-style: none;
align-items: center;
}
.navbar li {
position: relative;
}
.navbar > ul > li {
padding: 10px 0 10px 24px;
}
.navbar a, .navbar a:focus {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 3px;
font-family: "Poppins", sans-serif;
font-size: 15px;
font-weight: 600;
color: rgba(255, 255, 255, 0.7);
white-space: nowrap;
transition: 0.3s;
position: relative;
}
.navbar a i, .navbar a:focus i {
font-size: 12px;
line-height: 0;
margin-left: 5px;
}
.navbar > ul > li > a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: -5px;
left: 0;
background-color: #fff;
visibility: hidden;
width: 0px;
transition: all 0.3s ease-in-out 0s;
}
.navbar a:hover:before, .navbar li:hover > a:before, .navbar .active:before {
visibility: visible;
width: 100%;
}
.navbar a:hover, .navbar .active, .navbar .active:focus, .navbar li:hover > a {
color: #fff;
}
.navbar .getstarted {
padding: 8px 25px;
margin-left: 30px;
border-radius: 5px;
color: #fff;
transition: 0.3s;
font-size: 14px;
font-weight: 600;
border: 2px solid rgba(255, 255, 255, 0.5);
}
.navbar .getstarted:hover {
color: #fff;
border-color: #fff;
}
.navbar .getstarted:before, .navbar li:hover > .getstarted:before {
visibility: hidden;
}
.navbar .dropdown ul {
display: block;
position: absolute;
left: 24px;
top: calc(100% + 30px);
margin: 0;
padding: 10px 0;
z-index: 99;
opacity: 0;
visibility: hidden;
background: #fff;
box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
transition: 0.3s;
}
.navbar .dropdown ul li {
min-width: 200px;
}
.navbar .dropdown ul a {
padding: 10px 20px;
font-size: 14px;
color: #2c4964;
}
.navbar .dropdown ul a i {
font-size: 12px;
}
.navbar .dropdown ul a:hover, .navbar .dropdown ul .active:hover, .navbar .dropdown ul li:hover > a {
color: #5846f9;
}
.navbar .dropdown:hover > ul {
opacity: 1;
top: 100%;
visibility: visible;
}
.navbar .dropdown .dropdown ul {
top: 0;
left: calc(100% - 30px);
visibility: hidden;
}
.navbar .dropdown .dropdown:hover > ul {
opacity: 1;
top: 0;
left: 100%;
visibility: visible;
}
#media (max-width: 1366px) {
.navbar .dropdown .dropdown ul {
left: -90%;
}
.navbar .dropdown .dropdown:hover > ul {
left: -100%;
}
}
/**
* Mobile Navigation
*/
.mobile-nav-toggle {
color: #fff;
font-size: 28px;
cursor: pointer;
display: none;
line-height: 0;
transition: 0.5s;
}
#media (max-width: 991px) {
.mobile-nav-toggle {
display: block;
}
.navbar ul {
display: none;
}
}
.navbar-mobile {
position: fixed;
overflow: hidden;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: rgba(28, 47, 65, 0.9);
transition: 0.3s;
z-index: 999;
}
.navbar-mobile .mobile-nav-toggle {
position: absolute;
top: 15px;
right: 15px;
}
.navbar-mobile ul {
display: block;
position: absolute;
top: 55px;
right: 15px;
bottom: 15px;
left: 15px;
padding: 10px 0;
background-color: #fff;
overflow-y: auto;
transition: 0.3s;
}
.navbar-mobile > ul > li {
padding: 0;
}
.navbar-mobile a {
padding: 10px 20px;
font-size: 15px;
color: #2c4964;
}
.navbar-mobile a:hover:before, .navbar-mobile li:hover > a:before, .navbar-mobile .active:before {
visibility: hidden;
}
.navbar-mobile a:hover, .navbar-mobile .active, .navbar-mobile li:hover > a {
color: #5846f9;
}
.navbar-mobile .getstarted {
margin: 15px;
}
.navbar-mobile .dropdown ul {
position: static;
display: none;
margin: 10px 20px;
padding: 10px 0;
z-index: 99;
opacity: 1;
visibility: visible;
background: #fff;
box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
}
.navbar-mobile .dropdown ul li {
min-width: 200px;
}
.navbar-mobile .dropdown ul a {
padding: 10px 20px;
}
.navbar-mobile .dropdown ul a i {
font-size: 12px;
}
.navbar-mobile .dropdown ul a:hover, .navbar-mobile .dropdown ul .active:hover, .navbar-mobile .dropdown ul li:hover > a {
color: #5846f9;
}
.navbar-mobile .dropdown > .dropdown-active {
display: block;
}
it would be nice if someone can have a look at it and tell me what i did wrong :/
You need to make this site responsive. check this question. Otherwise, if you are using bootstrap, you need to import the bootstrap CSS file. Add this line to the head of the HTML.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
visit bootstrap for many details. This code will help you to get bootstrap 4.0
If you are using different classes which does not have a bootstrap class, you need to make them responsive manually. This is its basic structure of it. You need to customize all your elements to the appropriate sizes. For more details click here
#media only screen and (max-width:600px) {
h1, .h01 {
font-size: 2.6rem;
letter-spacing: -.07rem;
}
}
The CSS code for the navbar appears at the top of the page. How can I hide it? I use internal CSS.
Here's how it looks in the browser:
This is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="layout/css/bootstrap.min.css" rel="stylesheet">
<link href="layout/css/fontawesome.min.css" rel="stylesheet">
<style>
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
body{
display: inline;
font-family: sans-serif;
overflow: hidden;
user-select: none;
}
nav .logo{
color: white;
font-size: 33px;
font-weight: bold;
line-height: 50px;
padding-left: 50px;
}
nav{
height: 70px;
background: #063247;
box-shadow: 0 3px 15px rgba(0,0,0,.4);
}
nav ul{
float: right;
margin-right: 10px;
}
nav ul li{
display: inline-block;
}
nav ul li a{
color: white;
display: block;
padding: 0 15px;
line-height: 70px;
font-size: 20px;
background: #063247;
transition: .5s;
}
nav ul li a:hover,
nav ul li a.active{
color: #23dbdb;
}
nav ul ul{
position: absolute;
top: 85px;
border-top: 3px solid #23dbdb;
opacity: 0;
visibility: hidden;
}
nav ul li:hover > ul{
top: 70px;
opacity: 1;
visibility: visible;
transition: .3s linear;
}
nav ul ul li{
width: 150px;
display: list-item;
position: relative;
border: 1px solid #042331;
border-top: none;
}
nav ul ul li a{
line-height: 50px;
}
nav ul ul ul{
border-top: none;
}
nav ul ul ul li{
position: relative;
top: -70px;
left: 150px;
}
nav ul ul li a i{
margin-left: 45px;
}
section{
background: url(bg.jpeg);
background-position: center;
background-size: cover;
height: 100vh;
}
</style>
</head>
<body>
<nav>
<label class="logo">Clothes Store</label>
<ul>
<li><a class="active" href="home.php">الصفحة الرئيسية</a></li>
<li>
<a href="viewProducts.php">الفئات
<i class="fas fa-caret-down"></i>
</a>
</li>
<li>إضافة منتجات
</li>
<li>السلة</li>
<li>التواصل</li>
<li>Feedback</li>
<li>تسجيل الخروج</li>
</ul>
</nav>
</body>
</html>
On all pages, this code appears at the top of the page.
What is the wrong in the code?
At first it doesn't appear, but then suddenly comes:
.....................................................
I need to make tabbed layout using HTML in my php page. Lets say welcome.php and all I need to show my page at the beginning as follows,
I need to make three tabs as below and each of this tab should be clickable. For details1 and details2, when I clicked that button it should popup a vertical menu.
Then I need the nature as follows,
When someone clicked Mainview, content should be displayed in the white space. If someone clicked Deatils1 then popup the menu if someone clicked item1 the content inside item1 should be show in whitespace likewise I need to navigate the content.
I have tried upto this level.Here is my try.
<?php
session_start();
// Check if the user is logged in, if not then redirect him to login page
if(!isset($_SESSION["loggedin"]) || $_SESSION["loggedin"] !== true){
header("location: login.php");
exit;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dashboard</title>
<link rel="stylesheet" href="./project/styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<div class="wrapper">
<div class="sidebar">
<h2 style="font-family: Verdana;">Dashboard</h2>
<ul>
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-paper-plane"></i> Page 1</li>
<li><i class="fa fa-mobile"></i> Page 2</li>
<li><i class="fa fa-phone"></i> Page 3</li>
<li><i class="fa fa-plug"></i> Page 4</li>
<li><i class="fa fa-user"></i> Page 5</li>>
</ul>
</div>
<div class="main_content">
<?php
include "adminHeader.php";
?>
<div class="info">
</div>
</div>
</div>
</div>
From above code I could get Side bar and Admin Header as below,
can someone help me to achieve what I need? Any help is appreciated.
Thanks in advance!
Here is my current css styles,
#import url('https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
font-family: 'Josefin Sans', sans-serif;
}
body{
background-color: #f3f5f9;
}
.wrapper{
display: flex;
position: relative;
display: flex;
width: 100%;
height: 100%
}
.wrapper .sidebar{
width: 220px;
height: 100%;
background: #4b4276;
padding: 30px 0px;
position: fixed;
font-size: 15px;
display: block;
height: 100%;
flex-shrink: 0;
}
.wrapper .sidebar h2{
color: #fff;
text-transform: uppercase;
text-align: center;
margin-bottom: 30px;
font-family: Helvetica;
}
.wrapper .sidebar ul li{
padding: 15px;
border-bottom: 1px solid #bdb8d7;
border-bottom: 1px solid rgba(0,0,0,0.05);
border-top: 1px solid rgba(255,255,255,0.05);
}
.wrapper .sidebar ul li a{
color: #bdb8d7;
display: block;
}
.wrapper .sidebar ul li a .fas{
width: 25px;
}
.wrapper .sidebar ul li:hover{
background-color: #594f8d;
}
.wrapper .sidebar ul li:hover a{
color: #fff;
}
.wrapper .sidebar .social_media{
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
display: flex;
}
.wrapper .sidebar .social_media a{
display: block;
width: 40px;
background: #594f8d;
height: 40px;
line-height: 45px;
text-align: center;
margin: 0 5px;
color: #bdb8d7;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.wrapper .main_content{
margin-left: 220px;
width: calc(100% - 200px);
display: block ;
}
.hidden{
display :none;
}
.wrapper .main_content .header{
padding: 20px;
background: #fff;
color: #717171;
border-bottom: 1px solid #e0e4e8;
display: flex;
justify-content: space-between;
position: relative;
width: 100% ;
}
.wrapper .main_content .info{
margin: 10px;
color: #717171;
line-height: 25px;
}
.wrapper .main_content .info div{
margin-bottom: 20px;
}
.error {
color: red;
}
.vega-actions {display: none}
h3 {
font-family: 'Source Code Pro', sans-serif;
font-weight: 50;
font-size: 10px;
margin-top:0px;
display: block;
color: #404040;
text-align: right;
border-top:3px solid #000;
}
.main_content .info .card .card-body h3 {
font-size: 15px;
}
.card {
display: flex;
justify-content: center;
}
.flex {
display: flex;
justify-content: space-between;
}
.wrapper {
display: flex;
width: 100%;
height: 100%
}
.yellowBg {
background-color: #0ff;
}
Just a quick overview of what you want trying to achieve. Just check and run the code below. Hope it gives you idea.
document.querySelector(".has-sub").onclick = function() {
children = this.children[1];
if ( children.classList.contains("open") ) {
children.classList.remove("open");
} else {
children.classList.add("open");
}
}
.has-sub,
a {
text-decoration: none;
padding: 5px;
display: inline-block;
}
.nav {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.has-sub,
.nav-menu {
border: 1px solid green;
text-align: center;
}
.has-sub {
cursor: pointer;
position: relative;
}
.sub {
position: absolute;
left: 0;
top: 0;
width: 100%;
margin-top: 30px;
display: none;
background: gray;
}
.open {
display: block;
}
<div class="nav">
<div class="nav-menu">
<a href="#">
main view
</a>
</div>
<div class="has-sub">
<span>detail 1</span>
<ul class="sub">
<li>sub detail 1</li>
<li>sub detail 2</li>
</ul>
</div>
<div class="nav-menu">
<a href="#">
detail 2
</a>
</div>
</div>
I am trying to use the following header menu template across my website. unfortunately, the menu hides the top part of my page content. I am a newbie. Please help. I tried, removing z-index, adding bottom margin, noting works.
The header.php code
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Responsive Hamburger Menu</title>
</head>
<body>
<!-- partial:index.partial.html -->
<header class="header">
<a href="" class="logo">
<img src="https://placeholder.com/wp-content/uploads/2018/10/placeholder.com-logo1.jpg"
class="logoimage"/></a>
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn">
<span class="navicon"></span>
</label>
<ul class="menu">
<li class="contactme">Contact Me</li>
<li class="aboutme">About Me</li>
<li class="projects">Projects</li>
<li class="Home">Home</li>
</ul>
</header>
<!-- partial -->
<style>
body {
margin: 0;
font-family: Helvetica, sans-serif;
background-color: #fffceb;
}
a {
color: #000;
}
/* header */
.header {
background-color: #fff;
box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
position: fixed;
width: 100%;
z-index: 3;
}
.header ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-color: #fff;
}
.header li a {
display: block;
padding: 20px 20px;
text-decoration: none;
}
.header li a:hover,
.header .menu-btn:hover {
background: rgb(255, 245, 246);
color: rgb(247, 133, 152);
}
.header .logo {
display: block;
float: left;
font-size: 2em;
padding: 10px 20px;
text-decoration: none;
}
/* menu */
.header .menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
}
/* menu icon */
.header .menu-icon {
cursor: pointer;
display: inline-block;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
}
.header .menu-icon .navicon {
background: #333;
display: block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
}
.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
background: #333;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.header .menu-icon .navicon:before {
top: 5px;
}
.header .menu-icon .navicon:after {
top: -5px;
}
/* menu btn */
.header .menu-btn {
display: none;
}
.header .menu-btn:checked ~ .menu {
max-height: 240px;
}
.header .menu-btn:checked ~ .menu-icon .navicon {
background: transparent;
}
.header .menu-btn:checked ~ .menu-icon .navicon:before {
transform: rotate(-45deg);
}
.header .menu-btn:checked ~ .menu-icon .navicon:after {
transform: rotate(45deg);
}
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
top: 0;
}
.logoimage{
width: 130px;
}
/* 48em = 768px */
#media (min-width: 48em) {
.header li {
float: left;
}
.header li a {
padding: 20px 30px;
}
.header .menu {
clear: none;
float: right;
max-height: none;
}
.header .menu-icon {
display: none;
}
.Home{
order: 1;
}
.projects{
order: 2;
}
.aboutme{
order: 3;
}
.contactme{
order: 4;
}
}
#media only screen and (max-width: 600px) {
.menu{
display: flex;
flex-direction: column-reverse;
}
}
</style>
</body>
</html>
Then I have a index.php where I include this header.
The style related to my index.php is
body {
background-color: #f2f2f2;
}
.formular input:disabled {
background-color: #dddddd;
}
.hint {
color: grey;
}
.title {
font-weight: bold;
}
p.subtitle {
font-weight: bold;
}
.requiredSymbol {
color: red;
}
.formular input[readonly="readonly"] {
background-color: #dddddd;
}
form.formular,
.validationEngineContainer {
/*background-color: #FFFFFF;*/
font-family: tahoma, verdana, "sans-serif";
font-size: 12px;
padding: 20px;
border: 1px solid #a5a8b8;
width: 700px;
margin: 0 auto;
}
.formular fieldset {
margin-top: 20px;
padding: 15px;
border: 1px solid #b5b8c8;
border-radius: 5px;
}
Your header css should have a position:relative. And you can add some margin to add distance from whatever is in the body.
Example shown below:
.header {
background-color: #fff;
box-shadow: 1px 1px 4px 0 rgb(0 0 0 / 10%);
position: relative;
width: 100%;
z-index: 3;
margin-bottom: 10px;
}
I'm making a list and each list item has the same structure:
I already got the image & header in place but below the header I have a paragraph, and I don't know how to make it like it's shown in the picture (with the subject & others), like there's columns and they're at fixed locations in the list item (so they order evenly vertically).
My current paragraph is just subject: test. I don't know how to place the "other" texts.
My CSS code related to this:
div {
margin: 20px;
}
ul {
list-style-type: none;
width: 1000px;
}
h3 {
font: bold 20px/1.5 Helvetica, Verdana, sans-serif;
}
li img {
float: left;
margin: 0 15px 0 0;
}
li p {
font: 200 12px/1.5 Georgia, Times New Roman, serif;
}
li {
padding: 10px;
overflow: auto;
}
li:hover {
background: #eee;
cursor: pointer;
}
and my HTML code:
<ul>
<li>
<img src="http://lorempixum.com/100/100/nature/2">
<h3>Header</h3>
<p>Subject: Test</p>
</li>
</ul>
Thanks!
use this code:
DEMO
HTML
<ul>
<li>
<img src="http://lorempixum.com/100/100/nature/2" />
<h3>Header</h3>
<ul>
<li><strong>Subject:</strong> test</li>
<li><strong>Other:</strong> test</li>
<li><strong>Other:</strong> test</li>
<li><strong>Other:</strong> test</li>
<li><strong>Other:</strong> test</li>
<li><strong>Other:</strong> test</li>
</ul>
</li>
</ul>
CSS
body, html, ul{
margin:0;
padding:0;
}
div {
margin: 20px;
}
ul {
list-style-type: none;
width: 1000px;
}
ul ul{
float:right;
width:865px;
}
li li{
width:31%;
float:left;
padding: 10px 1%;
}
h3 {
font: bold 20px/1.5 Helvetica, Verdana, sans-serif;
margin:0;
}
li img {
float: left;
margin: 0 15px 0 0;
}
li p {
font: 200 12px/1.5 Georgia, Times New Roman, serif;
}
li {
padding: 10px;
overflow: auto;
}
li:hover {
background: #eee;
cursor: pointer;
}
This is something like you want:
CSS:
div {
margin: 20px;
}
ul {
list-style-type: none;
width: 1000px;
}
h3 {
font: bold 20px/1.5 Helvetica, Verdana, sans-serif;
margin-top:-5px;
position:relative;
}
li img {
float: left;
margin: 0 15px 0 0;
}
li p {
font: 200 12px/1.5 Georgia, Times New Roman, serif;
margin-top:-20px;
position:relative;
}
li {
padding: 10px;
overflow: auto;
}
li:hover {
background: #eee;
cursor: pointer;
}
and you can see jsfiddle