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>
Related
What should I do so that the content of the body is dynamic when hiding and showing the Side Menu? I am trying to create a product management project with PHP.
I have created a Side Menu ( Sidebar ), for which I used a template. The Side Menu also has a navigation bar that contains the button that we use to hide and show the Side Menu.
The new pages or views are added through php, and I want the content of the pages that I add new to occupy the entire screen, with a margin-left: 40px to the left and scroll dynamically when we show the Side Menu When I add a new page, two problems arise:
The content of the new page is overlaid on top of the navigation bar and hidden under the Sidebar.
See the screenshot
I have fixed this problem first by adding margin-top and margin-left
.bodis {
margin-top: 50px;
margin-left: 330px!important;
}
But this is not very dynamic and it is not Responsive either, since when I hide the Sidebar, the content of the pages stays in the center of the page and when the screen size is reduced, the content even disappears.
You can check it in the first screenshot, . You can see that the content disappears when we reduce the size of the screen .
the content of the body remains in the center of the screen when we hide the Side Menu, and in the second screenshot
The template uses several frameworks for css and javascript that I show below. I have read the documentation of some of them, such as Bootstrap, but it is not clear to me what would be the best way to make the dynamic content for each of the screens that I add to the project
Bootstrap V4.3
Bootstrap Material Design V4.0
Font Awesome V5.9.0
Sweet Alerts V8.13.0 CSS file
jQuery Custom Content Scroller V3.1.5
------ javascript ----
jQuery V3.4.1
popper
Bootstrap V4.3
How can I make content dynamic and effective on mobile devices?
How can I make the content of the page occupy almost the entire screen and scroll when showing the Side Menu? Can I use any of the frameworks that the template uses?
I show the bar code of the Side Menu and that of One of the views, in this case the Home
HOME VIEW:
<div class="bodis">
<div class="full-box page-header">
<h1 class="title">Home</h1>
<h2>BIENVENIDO ESTO ES EL HOME</h2>
</div>
</div>
<main class="full-box main-container">
<section class="full-box nav-lateral">
<div class="full-box nav-lateral-bg show-nav-lateral"></div>
<div class="full-box nav-lateral-content">
<figure class="full-box nav-lateral-avatar">
<i class="far fa-times-circle show-nav-lateral"></i>
<img src="./assets/avatar/Avatar.png" class="img-fluid" alt="Avatar">
<figcaption class="roboto-medium text-center">
Leading Company <br><small class="roboto-condensed-light">Panel Administración</small>
</figcaption>
</figure>
<div class="full-box nav-lateral-bar"></div>
<nav class="full-box nav-lateral-menu">
<ul>
<li class="usuarioColor">
<a href="#" class="nav-btn-submenu">
<i class="fas fa-users fa-fw"></i>
Usuarios
<i class="fas fa-chevron-down"></i>
</a>
<ul>
<li>
<a href="index.php?vista=user_new">
<i class="fas fa-plus fa-fw"></i>
Añadir Usuario
</a>
</li>
<li>
<a href="index.php?vista=user_list">
<i class="fas fa-clipboard-list fa-fw"></i>
Lista de Usuarios
</a>
</li>
<li>
<a href="index.php?vista=user_search">
<i class="fas fa-search fa-fw"></i>
Buscar
</a>
</li>
</ul>
</li>
<li class="productosColor">
<a href="#" class="nav-btn-submenu">
<i class="fas fa-file-invoice-dollar fa-fw"></i>
Productos <i class="fas fa-chevron-down"></i></a>
<ul>
<li>
<a href="#">
<i class="fas fa-plus fa-fw"></i>
Añadir Producto</a>
</li>
<li>
<a href="#">
<i class="fas fa-clipboard-list fa-fw"></i>
Lista de Productos</a>
</li>
<li>
<a href="#">
<i class="fas fa-hand-holding-usd fa-fw"></i>
Por Categoria
</a>
</li>
<li>
<a href="#">
<i class="fas fa-search-dollar fa-fw"></i>
Buscar
</a>
</li>
</ul>
</li>
<li>
<i class="fas fa-store-alt fa-fw"></i> Empresa
</li>
</ul>
</nav>
</div>
</section>
<!-- Page content -->
<section class=" full-box page-content">
<nav class="fexid-top full-box navbar-info">
<a href="#" class="float-left show-nav-lateral">
<i class="fas fa-exchange-alt"></i>
</a>
<a href="#">
<i class="fas fa-user-cog"></i>
</a>
<a href="#" class="btn-exit-system">
<i class="fas fa-power-off"></i>
</a>
</nav>
</section>
</main>
#font-face {
font-family: 'roboto_medium_regular';
src: url('../webfonts/roboto-medium-webfont.woff2') format('woff2'),
url('../webfonts/roboto-medium-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'roboto_condensed_light';
src: url('../webfonts/robotocondensed-light-webfont.woff2') format('woff2'),
url('../webfonts/robotocondensed-light-webfont.woff') format('woff'),
url('../webfonts/robotocondensed-light-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'roboto_condensed_regular';
src: url('../webfonts/robotocondensed-regular-webfont.woff2') format('woff2'),
url('../webfonts/robotocondensed-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
:root{
--color-one: #F5F5F5;
--color-two: #24292E;
--color-three: #EC5252;
/*--color-three: #0366D6;*/
--form-color: #14111A;
--accent-color: #253556;
/*--accent-color: #455A64;*/
--border-color: #D8D8D8;
}
.bodis {
margin-top: 50px;
margin-left: 330px!important;
}
body,html{
font-family: 'roboto_condensed_light';
width: 100vw;
height: 100vh;
background-color: var(--color-one);
color: #333;
font-size: 16px;
}
.full-box{
margin: 0;
padding: 0;
box-sizing: border-box;
width: 100%;
}
.form-neon{
border: 1px solid var(--border-color);
background-color: #FFF;
padding: 15px;
border-radius: 3px;
}
/*---------- Page headers styles ----------*/
.page-header{
padding: 30px 20px 60px 20px;
}
.page-header > :nth-child(1){
padding-bottom: 7px;
}
.page-header > :nth-child(2){
font-size: 18px;
}
/*---------- Page nav tabs ----------*/
.page-nav-tabs{
display: flex;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 30px;
}
.page-nav-tabs li,
.page-nav-tabs li a{
height: 40px;
line-height: 40px;
}
.page-nav-tabs li{
margin: 5px 20px;
}
.page-nav-tabs li a{
color: var(--accent-color);
font-size: 17px;
min-width: 200px;
width: auto;
display: block;
text-align: center;
user-select: none;
transition: all .2s ease-in-out;
border-bottom: 2px solid transparent;
}
.page-nav-tabs li a.active{
color: var(--color-three);
cursor: none;
pointer-events: none;
}
.page-nav-tabs li a:hover{
text-decoration: none;
color: #333;
border-bottom: 2px solid #333;
}
/*---------- Edit bootstrap styles ----------*/
.form-control[readonly]{
background-color: transparent;
}
.form-control:focus,
.form-control:active{
outline: none;
box-shadow: none;
border: none;
}
.form-control-file:active,
.form-control-file:focus{
outline: none;
}
.table .btn{
margin-bottom: 0;
}
.table thead th{
color: #FFF;
}
.table tbody tr{
color: #333;
transition: all .2s ease-in-out;
}
.table-dark,
.table{
background-color: #fff;
}
.table-dark{
border: 1px solid var(--accent-color);
}
.table-dark thead tr{
background-color: var(--accent-color);
}
.table-dark td,
.table-dark thead th,
.table-dark th{
border: none;
}
.table-dark tr:hover{
color: var(--color-three);
background-image: linear-gradient(to right, transparent, rgba(124, 100, 112, .2) 85%, transparent);
}
.page-link{
transition: all .2s ease-in-out;
}
.page-link:hover{
background-color: var(--color-three);
color: #FFF;
}
table form{
margin-bottom: 0;
}
/*---------- Text Styles ----------*/
.roboto-medium{
font-family: 'roboto_medium_regular';
}
.roboto-condensed-light{
font-family: 'roboto_condensed_light';
}
.roboto-condensed-regular{
font-family: 'roboto_condensed_regular';
}
/*---------- login Styles ----------*/
.login-container{
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #0575E6;
background: -webkit-linear-gradient(to right, #021B79, #0575E6);
background: linear-gradient(to right, #021B79, #0575E6);
}
.login-content{
width: 95%;
max-width: 320px;
height: auto;
border: 1px solid var(--border-color);
background-color: #FFF;
border-radius: 4px;
padding: 15px;
color: var(--accent-color);
}
.btn-login{
width: 90%;
padding: 10px 0;
display: block;
margin: 0 auto;
border-radius: 3px;
margin-top: 30px;
background-color: transparent;
color: var(--accent-color);
border: 1px solid var(--accent-color);
transition: all .2s ease-out;
}
.btn-login:hover{
background-color: var(--color-three);
border: 1px solid var(--color-three);
text-decoration: none;
color: #fff;
}
.btn-login:active,
.btn-login:focus{
outline: none;
}
/*---------- Page layout Styles ----------*/
.main-container{
height: 100%;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
.page-content,
.nav-lateral{
height: 100%;
overflow: hidden;
}
.page-content{
position: fixed;
padding-left: 300px;
transition: all .2s ease-in-out;
padding-bottom: 20px;
}
/***********************/
/* Nav Lateral */
/***********************/
/* COLORES DE LAS LISTAS */
/* nav > ul > li a:hover {
background: white !important;
color:#47748b !important;
} */
.usuarioColor {
background: rgb(239, 149, 54);
}
.nav-lateral{
width: 300px;
position: absolute;
top: 0;
left: 0;
z-index: 1;
transition: all .2s ease-in-out;
background-image: url('../assets/img/nav-font.jpg');
background-position: center center;
background-size: cover;
}
.nav-lateral-bg{ display: none; }
.nav-lateral-content{
max-width: 300px;
height: 100%;
background-color: rgba(36, 41, 46, .8);
}
.nav-lateral-bar{
height: 3px;
background-color: var(--color-three);
}
.nav-lateral-avatar{
padding: 40px 0;
}
.nav-lateral-avatar i{
display: none;
}
.nav-lateral-avatar img{
width: 50%;
margin: 0 auto;
display: block;
border: 4px solid #FFF;
border-radius: 100%;
}
.nav-lateral-avatar figcaption{
margin-top: 20px;
color: #FFF;
}
.nav-lateral-menu{
height: auto;
}
.nav-lateral-menu ul{
margin: 0;
padding: 0;
list-style: none;
}
.nav-lateral-menu ul li{
width: 100%;
height: auto;
}
.nav-lateral-menu ul li a{
display: block;
width: 100%;
height: 45px;
line-height: 45px;
text-decoration: none;
color: #FFF;
font-size: 17px;
box-sizing: border-box;
padding-left: 20px;
transition: all .2s ease-in-out;
}
.nav-lateral-menu ul li a.active{
color: #FFF;
background-color: var(--color-three);
}
.nav-lateral-menu ul li a:hover{
color: #fff;
background-image: linear-gradient(to right, transparent, rgba(255, 255, 255, .1) 50%, transparent);
}
.nav-lateral-menu ul li ul{
display: none;
border: 1px solid var(--color-three);
background: rgba(20, 30, 48, .5);
}
.nav-lateral-menu ul li ul a{
padding-left: 45px;
}
.show-nav-lateral-submenu{
display: block !important;
}
.nav-lateral-menu .fa-chevron-down,
.nav-lateral-menu .fa-chevron-up{
float: right;
height: 45px;
line-height: 45px;
margin-right: 7px;
transition: all .2s ease-in-out;
}
/* Page content */
.navbar-info{
height: 50px;
border-bottom: 1px solid var(--border-color);
text-align: right;
padding-right: 10px;
}
.navbar-info a{
color: var(--accent-color);
height: 50px;
min-width: 40px;
text-align: center;
line-height: 50px;
display: inline-block;
transition: all .2s ease-out;
user-select: none;
}
.navbar-info a:hover{
color: var(--color-three);
background-image: radial-gradient(circle,rgba(250, 30, 78, .1), transparent 80%);
}
.navbar-info a:active,
.navbar-info a:focus{
outline: none;
}
/*---------- Home Styles ----------*/
.tile-container{
text-align: center;
padding: 20px 25px;
}
.tile{
height: 200px;
width: 200px;
margin: 10px;
display: inline-block;
text-decoration: none;
color: var(--accent-color);
border: 1px solid var(--border-color);
border-radius: 3px;
user-select: none;
transition: all .2s ease-in-out;
background-color: #FFF;
}
.tile:hover{
text-decoration: none;
border-color: var(--color-three);
}
.tile:focus,
.tile:active{
outline: none;
}
.tile-tittle{
margin: 0;
width: 100%;
padding: 0;
height: 40px;
line-height: 40px;
box-sizing: border-box;
text-transform: uppercase;
border-bottom: 1px solid var(--border-color);
transition: all .2s ease-in-out;
font-family: 'roboto_medium_regular';
}
.tile:hover .tile-tittle{
color: #FFF;
border-color: var(--color-three);
background-color: var(--color-three);
}
.tile-icon{
width: 100%;
height: 160px;
box-sizing: border-box;
padding-top: 22px;
}
.tile-icon > i{
font-size: 80px;
}
.tile-icon > p{
font-family: 'roboto_medium_regular';
height: 35px;
line-height: 35px;
}
.tile:hover .tile-icon > i,
.tile:hover .tile-icon > p{
color: var(--color-three);
}
/*---------- Breakpoints ----------*/
#media (max-width: 767px){
.nav-lateral{
width: 100%;
overflow: hidden;
display: none;
background-image: none;
}
.nav-lateral.active{
display: block;
z-index: 9999;
}
.nav-lateral-bg{
width: 100%;
height: 100%;
background-color: rgba(3, 3, 3, .4);
position: relative;
display: block;
z-index: 2;
}
.nav-lateral-content{
position: absolute;
left: 0;
top: 0;
z-index: 3;
transform: translateX(-400px);
transition: all .3s ease-in-out;
background-color: var(--color-two);
}
.nav-lateral.active .nav-lateral-content{
transform: translateX(0);
}
.nav-lateral-avatar i{
height: 50px;
width: 50px;
line-height: 50px;
color: #FFF;
cursor: pointer;
font-size: 25px;
position: absolute;
top: 5px;
right: 0;
text-align: center;
display: block;
transition: all .2s ease-out;
}
.nav-lateral-avatar i:hover{
color: var(--color-three);
}
.page-content{
padding-left: 0;
}
}
/* Bootstrap breakpoints */
#media (min-width: 576px){
}
#media (min-width: 768px){
.nav-lateral.active{
transform: translateX(-400px);
}
.page-content.active{
padding-left: 0;
}
}
#media (min-width: 992px){
}
#media (min-width: 1200px){
}
/*---------- Keyframes ----------*/
I have tried to fix this error by adding margin-top and margin-left :
.bodis {
margin-top: 50px;
margin-left: 330px!important;
}
But the result still does not meet the desired.
I have read the bootstrap documentation trying to find a solution, but I don't see that it is the best for my needs
I have tried to implement the answers of this question, but it didn't work in my case
I finally found a solution to my problem, and although I can't add all the code here, the solution was very simple.
I have only ordered my css files and removed what is not necessary, to avoid problems.
For views that are added back to my app, I put them inside two div.
The parent wraps everything and has the following css:
bodysuits {
margin-top: 80px;
overflow-y: hidden;
width:100%;
}
.body .content {
padding: 20px;
}
And we also add a second div with the div class="content"
In this way my different pages would look like this:
<div class="bodis page-content">
<div class="content">
<h1 class="title ">Title</h1>
<h2 class="subtitle">Subtitle</h2>
<!-- THE REST OF THE CONTENT --!>
</div>
</div>
Update the media query code by changing the width from 100% to 300px like so;
#media(max-width: 767px)
.nav-side-bg {
width: 300px;
height: 100%;
background-color: rgba(3, 3, 3, .4);
position: relative;
display: block;
z-index: 2;
}
All this worked and I am encouraged to study css more intensely since I see that it is a very powerful language in web layout
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>
So I wrote a small website and everything was working great, all styles were working but today it only displays the style sheet in mobile view in the normal desktop view it disregards all the styles in my css/style.css
The navbar and header imag keeps their style regardless of the size of the browser just the rest of the styles are gone when in desktop view
My header and footer is included in all pages with php includes the files is in includes/header.php and includes/footer.php
Here is the link to the project as well to look at maxi.maxihome.co.za
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<!-- Bootstrap--!>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<!-- Style sheet -->
<link rel="stylesheet" href="css/style.css">
<!--Google Fonts -->
<link href="https://fonts.googleapis.com/css?
family=Acme|Neuton&display=swap" rel="stylesheet"><link
href="https://fonts.googleapis.com/css?
family=Acme|Neuton|PT+Mono&display=swap" rel="stylesheet"><link
href="https://fonts.googleapis.com/css?
family=Acme|Neuton|PT+Mono|Sintony&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?
family=Acme|Molengo|Neuton|PT+Mono|Sintony&display=swap"
rel="stylesheet">
<!-- js script header -->
<script type="text/javascript"src="js/app.js">
</script>
<title>Maxi Home Renovations</title>
</head>
<body>
<section class="header">
<!-- custom menu -->
<div class="nav">
<div class="logo">
<img class="imagelogo"src="images/name.png" alt="">
</div>
<div class="togg">
<div></div>
<div></div>
<div></div>
</div>
<ul class="firstlevel">
<li></li>
<li></li>
<li>Home</li>
<li>Services</li>
<li class="has-sub"><a>Renovations</a>
<ul class="sub">
<li>Kitchen</li>
<li>Bathroom</li>
<li>Living Area</li>
<li>Total Renovation</li>
</ul></li>
<li>Contact Us</li>
<li><i class="fa fa-facebook-square"></i></li>
</ul>
</div>
<img class="headerImage" src="images/headerImg.png"
alt="HeaderImage">
</section>
</body>
/*index page*/
<?php
include "includes/header.php" ?>
<section class="feature">
<div class="container">
<div class="row">
<div class="col-sm-6">
<div id="carouselExampleInterval" class="carousel slide" data-
ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" data-interval="5000">
<img class="imgCar"src="images/h1.JPG" class="d-block w-100"
alt="...">
</div>
<div class="carousel-item" data-interval="5000">
<img class="imgCar"src="images/h2.JPG" class="d-block w-100"
alt="...">
</div>
<div class="carousel-item" data-interval="5000">
<img class="imgCar" src="images/h3.jpg" class="d-block w-100"
alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleInterval"
role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true">
</span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleInterval"
role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true">
</span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<?php
include "includes/footer.php" ?>
.headerImage{
width: 100%;
heigth: 300px;
padding-top:75px;
color:#bf2132;
}
.fimage{
width: 100%;
heigth: 300px;
padding-top:75px;
}
.navbar-default{
background-color:#bf2132;
border-color: #bf2132;
}
/* navigation */
.nav
{
width:100%;
background-color:#ccc;
position:fixed;
top:0;
left:0;
z-index: 9999;
}
.nav .logo
{
display:flex;
width:200px;
height: 50px;
flex-wrap:wrap;
justify-content: center;
align-items: center;
text-transform:uppercase;
cursor:pointer;
}
.imagelogo{
width:100px;
heigth:50px;
}
.togg
{
position:absolute;
right:40px;
top:20px;
display:none;
z-index: 5;
}
.togg div {
width: 36px;
height: 2px;
background-color: red;
margin: 6px 0px;
position: relative;
transition:all .8s ease;
}
.togg.lijo div
{
position:absolute;
transition:all .8s ease;
}
.togg.lijo div:nth-child(1){
transform: rotate(48deg);
top: 7px;
/* position: absolute; */
right: 0px;
}
.togg.lijo div:nth-child(2)
{
width:0px;
top: 7px;
/* position: absolute; */
right: 0px;
}
.togg.lijo div:nth-child(3)
{
transform: rotate(-48deg);
top: 7px;
right: 0px;
}
.nav ul.firstlevel
{
list-style:none;
width:calc(100% - 200px);
background: rgb(191,33,50);
background: linear-gradient(0deg, rgba(191,33,50,1) 0%,
rgba(247,77,5,0.9976365546218487) 33%, rgba(191,33,50,1) 100%);
margin-bottom:0px;
padding-left:0px;
}
.nav ul.firstlevel li
{
display:inline-block;
margin-bottom:0px;
color:#000;
}
.nav ul.firstlevel li a
{
cursor:pointer;
display:block;
padding:15px;
transition:.8s ease;
text-decoration:none;
text-transform:uppercase;
color:#fff;
}
.nav ul.firstlevel li a:hover
{
text-decoration:none;
}
.nav ul.firstlevel li ul.sub li {
display: block;
background-color:rgba(191,33,50,1);
}
.nav ul.firstlevel li ul.sub li:hover {
display: block;
background-color:rgba(172, 78, 2, 0.79);
}
.nav ul.firstlevel li ul.sub li a{
color:#fff;
}
.nav ul.firstlevel li ul.sub
{
width:200px;
position:absolute;
padding-left:0px;
opacity:0;
visibility: hidden;
transform:translateY(30px);
transition:.5s linear;
padding-top:20px;
}
.nav ul.firstlevel li ul.sub:after {
content: '';
width: 41px;
height: 20px;
border-bottom: solid 18px rgba(191,33,50,1);
border-left: solid 20px transparent;
border-right: solid 21px transparent;
top: 0px;
display: block;
position: absolute;
left: 16px;
}
#media(min-width:1024px)
{
.nav ul.firstlevel li:hover ul.sub
{
visibility:visible;
opacity:1;
transform:translateY(0px);
}
.nav ul.firstlevel li:hover
{
display:inline-block;
margin-bottom:0px;
background-color: rgba(27, 27, 27, 0.32);;
color:#fff !important;
}
.nav ul.firstlevel li:hover a
{
color:#fff !important;
}
}
#media(max-width:1024px)
{
.nav
{
min-height:50px;
}
.togg
{
display:block;
top:10px;
}
.nav ul.firstlevel
{
position: absolute;
top: 50px;
transform: translateX(100%);
right: 0;
transition:.8s ease;
width:40%;
height: calc(100vh - 50px);
z-index: fixed;
}
.nav ul.firstlevel li {
display: block;
}
.nav ul.firstlevel.surya {
transform: translateX(0%);
}
.nav ul.firstlevel li ul.sub
{
opacity: 1;
visibility: visible;
display:none;
position:relative;
padding-top:0px;
width:100%;
transition:0s;
transform: translateY(0px);
}
.nav ul.firstlevel li ul.sub:after
{
display:none;
}
/* Feature */
.feature{
padding-left: 100px;
padding-right: 100px;
padding-top: 70px;
padding-bottom: 70px;
background-image: url("../images/paper.jpg");
text-align:center;
}
.houseimg{
width: 400px;
height: 350px;
border:5px solid rgb(191,33,50);
background-color:#ff0;
}
.about{
padding-right: 100px;
padding-left: 100px;
padding-bottom: 70px;
text-align:center;
background-image: url("../images/paper.jpg");
}
/* spinning text */
#blink{
width:100%;
height: 50px;
padding: 15px;
text-align: center;
line-height: 50px;
}
.htext{
font-family: "Alfa Slab One";
color: rgb(191,33,50);
animation: blink 1.5s linear infinite;
padding-bottom: 100px;
}
#keyframes blink{
0%{opacity: 0;}
50%{opacity: .5;}
100%{opacity: 1;}
}
/* paragraph background */
.backpar{
border-radius: 25px;
background: rgb(191,33,50);
background: linear-gradient(0deg, rgba(191,33,50,1) 0%,
rgba(247,77,5,0.9976365546218487) 33%, rgba(191,33,50,1) 100%);
padding: 20px;
width: 100%;
height: 100%;
color: white;
font-family: "Concert One";
}
.footer{
background-image: url("../images/footer.png");
}
/* Contact */
.contact{
padding-left: 70px;
padding-right: 70px;
padding-top: 70px;
padding-bottom: 70px;
background-image:url("../images/paper.jpg");
}
.jumbotron {
background: rgb(191,33,50);
color: #FFF;
border-radius: 0px;
}
.jumbotron-sm { padding-top: 24px;
padding-bottom: 24px; }
.jumbotron small {
color: #FFF;
}
.h1 small {
font-size: 24px;
}
/* carousel homepage*/
.carousel-item{
width: 100% !important;
Height: 350px !important;}
.imgCar{
width: 100% !important;
Height: 350px !important;
border: 2px solid red;
border-radius: 5px;
}
I have noticed I left out a curly bracket everything is working again
Embarrassed Thank you
php
and im beginner with with php,html and css
for example i want to change the logo to be in top center but it does not change
i use xampp to run my php file im not sure if i use the right way to link
css to php file
<?php include('server.php'); ?>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Home page</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="http://code.jquery.com/jquery-3.3.1.js"></script>
<link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600" rel="stylesheet">
<link rel="stylesheet" href="StyleIndex.css">
</head>
<body>
<header class="Logo">
<a href="index.php">
<img alt="logo" src="logo3.jpg" />
</a>
</header>
<nav>
<div>
<i class="fa fa-bars"></i>
</div>
<ul>
<li>Home</li>
<li>Drop 1 <i class="fa fa-sort-desc"></i>
<ul>
<li>m 1</li>
<li>m 2</li>
<li>m 3</li>
<li>m 4</li>
</ul>
</li>
<li>Drop 2 <i class="fa fa-sort-desc"></i>
<ul>
<li>m 1</li>
<li>m 2</li>
<li>m 3</li>
<li>m 4</li>
</ul>
</li>
<li>About</li>
<li>Logout</li>
</ul>
</nav>
<script type="text/javascript">
$("nav div").click(function() {
$("ul").slideToggle();
$("ul ul").css("display", "none");
});
$("ul li").click(function() {
$("ul ul").slideUp();
$(this).find('ul').slideToggle();
});
$(window).resize(function() {
if($(window).width() > 768) {
$("ul").removeAttr('style');
}
});
</script>
<div class="semiProfile">
<div class="avatar">
<img src="avatar.png" />
</div>
<div class="Username">
<?php if (isset($_SESSION['username'])) : ?>
<p class="username"><strong><?php echo $_SESSION['username']; ?></strong></p>
<?php endif ?>
</div>
</div>
<div class="Content">
<div class="news">
<p class="status">
</p>
</div>
<div class="Chat">
<Form class="chatBox">
<input class="statusBar" type="text" placeholder="Write your status ...!" />
<button>Send</button>
</Form>
</div>
</div>
<div class="NewQuestion">
<div class="avatar1">
<img src="avatar.png" />
</div>
<div class="Username">
<?php if (isset($_SESSION['username'])) : ?>
<p class="username1"><strong><?php echo $_SESSION['username']; ?></strong></p>
<?php endif ?>
</div>
<div class="Question">
<p class="question">
This is the area where the new and trending questions are written on the website
</p>
</div>
</div>
<footer class="footer">
Copyrights!
</footer>
</body>
</html>
and i try to style it but there is no affect on it
and here is my css file StyleIndex.css
* {
margin: 0px;
padding: 0px;
}
body {
margin: 0;
padding: 0;
background-color:#161515;
}
.logo img{
position: absolute;
left: 100px;
}
.nav{
position: absolute;
}
.nav .a
{
padding: 20px;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
background-color: rgb(34, 33, 33);
position: relative;
}
ul li {
display: inline-block;
}
ul li a {
color: aliceblue;
text-decoration: none;
padding: 15px;
display: block;
}
ul li:hover {
background: lightgrey;
}
ul ul {
position: absolute;
min-width: 200px;
background: lightgrey;
display: none;
}
ul ul li {
display: block;
background: #e3e3e3;
}
ul li:hover ul {
display: block;
}
ul li i {
color: aliceblue;
float: right;
padding-left: 20px;
}
nav div {
background-color: rgb(34, 33, 33);
color: #292929;
font-size: 24px;
padding: 0.6em;
cursor: pointer;
display: none;
}
#media(max-width: 768px) {
nav div {
display: block;
}
ul {
display: none;
position: static;
background-color: rgb(34, 33, 33);
}
ul li {
display: block;
}
ul ul {
position: static;
background-color: rgb(34, 33, 33);
}
}
.semiProfile
{
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid black;
background-color: rgb(34, 33, 33);
position:absolute;
}
.avatar img
{
max-width: 80px;
max-height: 80px;
}
.logout
{
margin: 15px 0 0;
color:aliceblue;
font-size: 12px;
}
.username
{
position: absolute;
left: 150px;
top: 60px;
color:aliceblue;
}
.About
{
margin: 15px 0 0;
color: aliceblue;
font-size: 12px;
}
.Logo img
{
max-width: 80px;
max-height: 80px;
}
.footer
{
position: absolute;
left: 200px;
top: 900px;
color: aliceblue;
}
.Contect
{
width: 360px;
padding: 10% 0 0;
margin: auto;
}
.news
{
position: relative;
z-index: 1;
background: rgb(34, 33, 33);
max-width: 360px;
margin: 0 auto 20px;
padding: 20px;
text-align: center;
border: 1px solid black;
}
.status
{
margin: 15px 0 0;
color: aliceblue;
font-size: 15px;
}
.Chat
{
position: relative;
z-index: 1;
background: rgb(34, 33, 33);
max-width: 360px;
margin: 0 auto 20px;
padding: 20px;
text-align: center;
border: 1px solid black;
}
.Chat input
{
font-family: "Roboto", sans-serif;
outline: solid;
background: #f2f2f2;
width: 100%;
border: 0;
margin: 0 0 15px;
padding: 15px;
box-sizing:border-box;
font-size: 14px;
}
.Chat button
{
font-family: "Roboto", sans-serif;
text-transform: uppercase;
outline: 0;
background: #000000;
width: 100%;
border: 0;
padding: 15px;
color: #FFFFFF;
font-size: 14px;
cursor: pointer;
}
.Chat button:hover, .Chat button:active
{
background: #630645;
}
.username1
{
position: absolute;
top: 10px;
left: 110px;
color: aliceblue;
}
.avatar1 img
{
max-width: 80px;
max-height: 80px;
border-radius: 50%;
top: 10px;
left: 20px;
position:absolute;
}
.NewQuestion
{
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid black;
background-color: rgb(34, 33, 33);
position: absolute;
right: 90px;
top: 135px;
}
.question
{
position: absolute;
top: 50px;
left: 110px;
color: aliceblue;
}
i found the problem , the problem was from xampp im not sure what happened but
i used other program and now it's working
after checking network tab i saw that css file appear after some time and when it appear
it has an old version of it im not sure why but i used PhpStorm and then i make localhost
using PhpStorm and now it's working thank you for people tried to help me :)
I have a problem like this.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
</head>
<body>
<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</body>
</html>
This code is working very well in independently.But when i integrate it with my website template it is not working.In my website I do like this.I create a view like this and i load it in a controller and pass it to a another view.In that particular view I do like this.
<div class="navbar-collapse collapse ">
<div class="menu">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation">Home</li>
<li role="presentation"><?=$navbar?></li>
<li role="presentation">Issues</li>
<li role="presentation"><button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">SIGN UP</button></li>
</ul>
</div>
</div>
This is how i load view in controller.
$data['navbar'] = $this->load->view('navbar', NULL, TRUE);
I have save the view file as navbar.php.
In that view, it is not working.How can I get solve this problem? I think it is a problem with css and js files are shuffling.
You are using template based on bootstrap so there definitely have a conflict with the bootstrap dropdown class
Edit your classname in html and css for... mydropdown, mydropdown-content and it should be okey :]
Here is the fixed version
Css
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.mydropdown {
position: relative;
display: inline-block;
}
.mydropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.mydropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.mydropdown-content a:hover {background-color: #f1f1f1}
.mydropdown:hover .mydropdown-content {
display: block;
}
.mydropdown:hover .dropbtn {
background-color: #3e8e41;
}
HTML :
<div class="mydropdown">
<button class="dropbtn">Dropdown</button>
<div class="mydropdown-content">
Link 1
Link 2
Link 3
</div>
</div>