I'm trying to reproduce a website in HTML et css. In my code, I have differents lists, each on with differents css properties. In my browser, the properties are mixed, and I can't understand...
My html code :
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="file:///my css !/css/odpf.css" >
<title>Olympiades</title>
</head>
<body>
<div id="barre_haut">
</div>
<div id="wrapper">
<div class="container bg-white">
<nav>
<ul id="menu_haut" class="nav flex-column flex-md-row justify-content-end">
<li id="menu_haut" class="nav-item"><a class="nav-link" href="#">Recherche</a></li>
<li id="menu_haut" class="nav-item menurouge"><a class="nav-link" href="#">Connexion</a></li>
<li id="menu_haut" class="nav-item"><a class="nav-link" href="#">Mon compte</a></li>
<li id="menu_haut" class="nav-item"><a class="nav-link" href="#">Presse</a></li>
</ul>
</nav>
<div class="row ">
<div class="col-md-4 bg-white"><div class="position-absolute" style="bottom:0px; left:35px"><img src="https://odpf.org/templates/odpftemplate/img/site-logo-398x106.png" alt="Logo Olympiades" style="width:100%; height:auto"></div></div>
<div class="col-md-3 bg-white"></div>
<div class="col-md-5 bg-white pr-0"><img src="https://odpf.org/templates/odpftemplate/img/home-rightcol-top2.png" alt="image_en_tete" style="width:100%; height:auto"></div>
</div>
<div class="row">
<div class="col-md-4 col-gche-accueil ">
<div class="row px-3 pb-0">
<img src="https://odpf.org/images/odpf_slider_home_08.jpg" style="width:100%; height:auto">
<div class="menugche">
<h3 class="mt-1">les olympiades de physique france</h3>
<ul>
<li class="menugche">C'est quoi ?</li>
<li class="menugche">Comment ça se passe ?</li>
</ul>
<h3 class="mt-1">Revivez les éditions passées</h3>
<ul>
<li class="menugche">Archives</li>
<li class="menugche">Les mémoires</li>
<li class="menugche">Colloque de la 20ème édition</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div id="barre_bas">
</div>
</body>
</html>
And my css :
#import url(http://fonts.googleapis.com/css?family=Oxygen:400,300,700);
body {
margin:0;
padding:0;
background: url('../images/bg-home.png') no-repeat center fixed;
background-size: cover;
}
a {
text-decoration: none;
color:black;
}
.menurouge {
background-color: #b1191d;
color: white;
}
.menurouge a {
text-decoration: none;
color:white;
}
.fondnoir {
background-color: black;
color: white;
}
/* Header */
#barre_haut {
background-color: black;
height: 16px;
width: 100%;
}
#wrapper {
background-color: #555f69;
/*position: relative;
top:16px;*/
height: 35px;
width: 100%;
padding: 0;
}
.container {
width:100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
#media (min-width: 576px){
.container {
max-width: 540px;
}
}
#media (min-width: 786px){
.container {
max-width: 720px;
}
}
#media (min-width: 992px){
.container {
max-width: 960px;
}
}
#media (min-width: 1200px){
.container {
max-width: 960px;
}
#barre_bas {
clear: both;
width: 100%;
background-color: #555f69;
height: 10px;
}
#menu_haut {
height: 35px;
background-color: white;
color: black;
font-family: 'Oxygen', sans-serif;
font-size: 12px;
font-weight: 300;
text-align: center;
text-transform: uppercase;
list-style-type: none;
text-decoration: none;
}
.col-gche-accueil {
background-color: black;
width: 100%;
float: left;
position: relative;
padding: 46px 20px 20px;
}
.col-gche-accueil::before {
content: ' ';
background: url('https://odpf.org/templates/odpftemplate/img/home-leftcol-top.png') no-repeat;
width: 100%;
height: 101px;
top: 0;
left: 0;
position: absolute;
z-index: 10;
}
.menugche h3 {
font-family: 'Oxygen', sans-serif;
font-size: 40px;
line-height:43px;
font-weight: 300;
color: #ffffff;
text-transform: uppercase;
margin: 14px 0 8px;
}
.menugche ul li:before {
content: '';
display: block;
}
.menugche ul li:after {
content: '';
display: table;
clear: both;
}
.menugche ul,li,a {
background-color: #b1191d;
color: #ffffff;
display: block;
font-size: 18px;
line-height: 20px;
list-style-type: none;
text-decoration: none;
padding: 3px 0 0;
margin: 0;
}
And, tipycally, my menu line in beginning should be black on withe, in 12, and it appears withe on red, in 20 with properties defined by "menugche"....
What's wrong in my head ?
Thank you in advance !
.menugche ul,li,a {
This defines three separate rules:
Any ul element which is a descendant of an element with the menugche class;
Any li element;
Any a element;
I suspect you wanted the rules to be:
Any ul element which is a descendant of an element with the menugche class;
Any li element which is a descendant of an element with the menugche class;
Any a element which is a descendant of an element with the menugche class;
If that's the case, you'll need to repeat the class name:
.menugche ul, .menugche li, .menugche a {
Related
I'm attempting to familiarise myself with Bootstrap in order to build a responsive website for an assignment, and have based my design off of this template.
I have replaced the main body of content with a landing screen for my website that involves a carousel (complete with captions) for the background image, as well as the website's logo in the centre of the page. Aside from the text upon it, the navbar remains unchanged.
Everything on the page is wrapped inside a wrapper div, which contains a sidebar nav for the sidebar, and a content div for the rest of the page content. Inside the content div is the bg div (contains the carousel, including its indicators and captions), hdr div (containing the toggle sidebar button as seen in the demo), and the body div (containing the logo).
Ideally, I would like everything within the content div to behave as if it were 'fixed'. I want the logo, background, carousel indicators, captions, etc. to remain in the viewport when the webpage is scrolled. However, I cannot set the position to 'fixed' as it breaks the navbar.
For now, I also have my bg div set to position 'absolute' so that the carousel captions/indicators remain in the centre of the page when the navbar is expanded or collapsed. So not only do my elements not remain fixed as I would like them, there is also tons of whitespace at the bottom of the page when the web page is viewed at lower resolutions.
Below is the code for my website.
/*
DEMO STYLE
*/
#import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
body {
font-family: 'Poppins', sans-serif;
background: #fafafa;
}
img {
display: block;
max-width: 100%;
height: auto;
}
p {
font-family: 'Poppins', sans-serif;
font-size: 1.1em;
font-weight: 300;
line-height: 1.7em;
color: #999;
}
a, a:hover, a:focus {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
.navbar {
padding: 15px 10px;
background: #fff;
border: none;
border-radius: 0;
margin-bottom: 40px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
.navbar-btn {
box-shadow: none;
outline: none !important;
border: none;
}
.line {
width: 100%;
height: 1px;
border-bottom: 1px dashed #ddd;
margin: 40px 0;
}
i, span {
display: inline-block;
}
.carousel-item {
height: 100vh;
min-height: 300px;
background: no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky + .content {
padding-top: 60px;
}
.carousel-caption h3 {
font-size: 2.5vw;
}
.carousel-caption p {
font-size: 1.5vw;
}
.carousel-indicators {
position: absolute;
margin-right: auto;
margin-left: auto;
}
.carousel-caption {
position: absolute;
margin-right: auto;
margin-left: auto;
}
/* ---------------------------------------------------
SIDEBAR STYLE
----------------------------------------------------- */
.wrapper {
display: flex;
align-items: stretch;
}
#sidebar {
min-width: 250px;
max-width: 250px;
background: #7386D5;
color: #fff;
transition: all 0.3s;
}
#sidebar.active {
min-width: 80px;
max-width: 80px;
text-align: center;
}
#sidebar.active .sidebar-header h3, #sidebar.active .CTAs {
display: none;
}
#sidebar.active .sidebar-header strong {
display: block;
}
#sidebar ul li a {
text-align: left;
}
#sidebar.active ul li a {
padding: 20px 10px;
text-align: center;
font-size: 0.85em;
}
#sidebar.active ul li a i {
margin-right: 0;
display: block;
font-size: 1.8em;
margin-bottom: 5px;
}
#sidebar.active ul ul a {
padding: 10px !important;
}
#sidebar.active a[aria-expanded="false"]::before, #sidebar.active a[aria-expanded="true"]::before {
top: auto;
bottom: 5px;
right: 50%;
-webkit-transform: translateX(50%);
-ms-transform: translateX(50%);
transform: translateX(50%);
}
#sidebar .sidebar-header {
padding: 20px;
background: #6d7fcc;
}
#sidebar .sidebar-header strong {
display: none;
font-size: 1.8em;
}
#sidebar ul.components {
padding: 20px 0;
border-bottom: 1px solid #47748b;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a:hover {
color: #7386D5;
background: #fff;
}
#sidebar ul li a i {
margin-right: 10px;
}
#sidebar ul li.active > a, a[aria-expanded="true"] {
color: #fff;
background: #6d7fcc;
}
a[data-toggle="collapse"] {
position: relative;
}
a[aria-expanded="false"]::before, a[aria-expanded="true"]::before {
content: '\f078';
display: block;
position: absolute;
right: 20px;
font-family: FontAwesome;
font-size: 0.6em;
}
a[aria-expanded="true"]::before {
content: '\f077';
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: #6d7fcc;
}
ul.CTAs {
padding: 20px;
}
ul.CTAs a {
text-align: center;
font-size: 0.9em !important;
display: block;
border-radius: 5px;
margin-bottom: 5px;
}
a.download {
background: #fff;
color: #7386D5;
}
a.article, a.article:hover {
background: #6d7fcc !important;
color: #fff !important;
}
/* ---------------------------------------------------
CONTENT STYLE
----------------------------------------------------- */
#content {
padding: 0;
min-height: 100vh;
transition: all 0.3s;
position: relative;
width: auto;
height: auto;
}
#hdr {
position: relative;
z-index: 100;
padding: 20px;
}
#bg {
position: fixed;
top: 0;
left: 0;
z-index: -100;
width: 100%;
height: 100%;
}
#body {
height: 84%;
}
#logo {
position: relative;
width: 30%;
height: 30%;
top: 5%;
margin-top: auto;
margin-left: auto;
margin-right: auto;
}
/* ---------------------------------------------------
MEDIAQUERIES
----------------------------------------------------- */
#media (max-width: 768px) {
#sidebar {
min-width: 80px;
max-width: 80px;
text-align: center;
margin-left: -80px !important ;
}
a[aria-expanded="false"]::before, a[aria-expanded="true"]::before {
top: auto;
bottom: 5px;
right: 50%;
-webkit-transform: translateX(50%);
-ms-transform: translateX(50%);
transform: translateX(50%);
}
#sidebar.active {
margin-left: 0 !important;
}
#sidebar .sidebar-header h3, #sidebar .CTAs {
display: none;
}
#sidebar .sidebar-header strong {
display: block;
}
#sidebar ul li a {
padding: 20px 10px;
}
#sidebar ul li a span {
font-size: 0.85em;
}
#sidebar ul li a i {
margin-right: 0;
display: block;
}
#sidebar ul ul a {
padding: 10px !important;
}
#sidebar ul li a i {
font-size: 1.3em;
}
#sidebar {
margin-left: 0;
}
#sidebarCollapse span {
display: none;
}
}
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<link rel=stylesheet type=text/css href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
</head>
<body>
<div class="wrapper">
<!-- Sidebar Holder -->
<nav id="sidebar">
<div class="sidebar-header">
<h3>Website</h3>
<strong>W</strong>
</div>
<ul class="list-unstyled components">
<li class="active">
<a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false">
<i class="fas fa-home"></i>
Home
</a>
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>Home 1</li>
<li>Home 2</li>
<li>Home 3</li>
</ul>
</li>
<li>
<a href="#">
<i class="fas fa-briefcase"></i>
About
</a>
<a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false">
<i class="fas fa-newspaper"></i>
Pages
</a>
<ul class="collapse list-unstyled" id="pageSubmenu">
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</li>
<li>
<a href="#">
<i class="fas fa-link"></i>
Portfolio
</a>
</li>
<li>
<a href="#">
<i class="fas fa-paperclip"></i>
FAQ
</a>
</li>
<li>
<a href="#">
<i class="fas fa-at"></i>
Contact
</a>
</li>
</ul>
<ul class="list-unstyled CTAs">
<li>Download source</li>
<li>Back to article</li>
</ul>
</nav>
<!-- Page Content Holder -->
<div id="content" class="container-fluid" style="width:100%;overflow:hidden;">
<div id="bg" style="width:100% !important;position:absolute;">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active" style="background-image: url('https://www.publicdomainpictures.net/pictures/170000/velka/red-purple-pattern-background.jpg');">
<div class="carousel-caption">
<h3>First Slide</h3>
<p>This is a description for the first slide.</p>
</div>
</div>
<div class="carousel-item" style="background-image: url('https://www.publicdomainpictures.net/pictures/140000/velka/cool-calm-green-water-background.jpg');">
<div class="carousel-caption">
<h3>Second Slide</h3>
<p>This is a description for the second slide.</p>
</div>
</div>
<div class="carousel-item" style="background-image: url('https://www.publicdomainpictures.net/pictures/170000/velka/blue-brush-strokes-background.jpg');">
<div class="carousel-caption">
<h3>Third Slide</h3>
<p>This is a description for the third slide.</p>
</div>
</div>
</div>
</div>
</div>
<div id="hdr">
<nav class="navbar navbar-default" style="background-color:rgba(0,0,0,0);">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" id="sidebarCollapse" class="btn btn-info navbar-btn">
<i class="fas fa-align-left"></i>
<span>Toggle Sidebar</span>
</button>
</div>
</div>
</nav>
</div>
<div id="body" class="container-fluid">
<img id="logo" src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png">
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('#sidebarCollapse').on('click', function () {
$('#sidebar').toggleClass('active');
});
});
</script>
</body>
</html>
What can I do?
I am converting my desktop menu in the mobile menu, but the code is not working.
I am using checkbox trick, when checkbox is checked the menu will appear, otherwise menu display will be none.
At 1280px my desktop will switched into mobile, but it's not working properly as expected.
HTML Code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Soofyantheband</title>
<link rel="stylesheet" href="assets/css/style2.css"/>
<link rel="stylesheet" type="text/css" href="assets/css/mini-nav_bar.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" href="assets/css/style.css"/>
</head>
<body>
<!-- Webpage Wrap inside "wrapper" -->
<div id="wrapper">
<!--1.Header Section-->
<div class="header">
<div class="container">
<div class="nav">
<label for="toggle">☰</label>
<input type="checkbox" id="toggle"/>
<header>
<div id="band_Logo">
</div>
<div id="menu" class="menu" style="line-height:94px; ">
<ul style="margin:0">
<li>Home</li>
<li >Events</li>
<li >Projects</li>
<li >Unplugged</li>
<li >Gallery</li>
<li >Videos</li>
<li >About</li>
<li >Contact Us</li>
</ul>
</div>
</header>
</div>
</div>
</div>
</div>
</body>
</html>
CSS Code
html, body {
width: 100%;
height: 100%;
margin: 0;
}
html {
font-family: "helvetica neue", sans-serif;
}
.nav {
/*border-bottom: 1px solid #EAEAEB;*/
text-align: right;
height: 70px;
line-height: 70px;
}
.menu {
margin: 0 30px 0 0;
}
.menu ul li {
clear: right;
text-decoration: none;
color: gray;
margin: 0 10px;
line-height: 70px;
display:none;
}
span {
color: #54D17A;
}
label {
margin: 0 40px 0 0;
font-size: 26px;
line-height: 70px;
display: none;
width: 26px;
float: right;
}
#toggle {
display: none;
}
#media only screen and (max-width: 1280px) {
label {
display: block;
cursor: pointer;
}
.menu ul {
text-align: center;
width: 100%;
display: none;
}
.menu ul li a{
display: block;
border-bottom: 1px solid #EAEAEB;
margin: 0;
}
#toggle:checked + .menu ul li a{
display: block;
}
}
There were some issues in your code.
This line #toggle:checked + .menu ul li a won't work. .menu is not a sibling of #toggle, it is a child of a sibling (header). Instead, use the general sibling combinator (~) to target the header.
You set display: none for the ul and li, but then only changed the display type for the ul. Setting display: none for the ul is sufficient.
html,
body {
width: 100%;
height: 100%;
margin: 0;
}
html {
font-family: "helvetica neue", sans-serif;
}
.nav {
/*border-bottom: 1px solid #EAEAEB;*/
text-align: right;
height: 70px;
line-height: 70px;
}
.menu {
margin: 0 30px 0 0;
}
.menu ul li {
clear: right;
text-decoration: none;
color: gray;
margin: 0 10px;
line-height: 70px;
}
span {
color: #54D17A;
}
label {
margin: 0 40px 0 0;
font-size: 26px;
line-height: 70px;
display: none;
width: 26px;
float: right;
}
#toggle {
display: none;
}
#media only screen and (max-width: 1280px) {
label {
display: block;
cursor: pointer;
}
.menu ul {
text-align: center;
width: 100%;
display: none;
}
.menu ul li a {
display: block;
border-bottom: 1px solid #EAEAEB;
margin: 0;
}
#toggle:checked ~ header .menu ul {
display: block;
}
}
<div id="wrapper">
<!--1.Header Section-->
<div class="header">
<div class="container">
<div class="nav">
<input type="checkbox" id="toggle" />
<label for="toggle">☰</label>
<header>
<div id="band_Logo">
</div>
<div id="menu" class="menu" style="line-height:94px; ">
<ul style="margin:0">
<li>Home</li>
<li>Events</li>
<li>Projects</li>
<li>Unplugged</li>
<li>Gallery</li>
<li>Videos</li>
<li>About</li>
<li>Contact Us</li>
</ul>
</div>
</header>
</div>
</div>
</div>
</div>
My code is as shown below:
xyz.scss
.menu-about {
display: none;
}
header {
display: none;
}
.container {
background-color: yellow;
width: 100%;
height: 100%;
}
#q-nav-about {
width: 100%;
height: 4rem;
position: fixed;
display: flex;
align-items: center;
top: 0;
background-color: white;
z-index: 3000;
.q-logo {
margin-left: 1rem;
width: 99px;
height: 50px;
}
ul {
flex: 1;
display: flex;
flex-direction: row;
justify-content: flex-end;
}
.q-nav-about {
position: relative;
color: #898989;
text-decoration: none;
font-size: 18px;
font-family: $f3;
padding: 0rem 2rem 0rem 2rem;
}
ul li {
list-style: none;
}
.q-nav-work {
position: relative;
color: #898989;
font-size: 18px;
text-decoration: none;
font-family: $f3;
padding: 0rem 2rem 0rem 2rem;
}
.q-nav-contact {
position: relative;
color: #898989;
text-decoration: none;
font-size: 18px;
font-family: $f3;
padding: 0rem 8rem 0rem 2rem;
}
}
.r-contact-container {
margin-top: 4rem;
width: 100%;
height: 100% !important;
background-color: blue;
.row {
.no-padding {
padding: 0 !important;
margin: 0 !important;
}
}
}
xyz.html
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.rawgit.com/scottjehl/picturefill/3.0.2/dist/picturefill.js" async></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<header>
<img class="mob-logo-about" src="../image/logo_logo.svg" alt="New york">
<button class="hamburger">☰</button>
<button class="cross">˟</button>
</header>
<div class="menu-about">
<ul>
<a href="/template/about-us.html">
<li>About us</li>
</a>
<a href="#work">
<li>Products</li>
</a>
<a href="#contact-us">
<li>Contact</li>
</a>
</ul>
</div>
<div id="q-nav-about">
<img class="q-logo" src="../image/logo_logo.svg" alt="New york">
<ul>
<li><a class="q-nav-about " href="/template/xyz.html">xyz</a>
</li>
<li><a class="q-nav-work" href="#abx">abx</a>
</li>
<li><a class="q-nav-contact" href="#lll">lll</a>
</li>
</ul>
</div>
<div class="container r-contact-container">
<div class="row">
<div class="col-sm-8 no-padding">hdbdasjhdasdhjsda</div>
<div class="col-sm-4 no-padding">sdcdbcjdhhddahs</div>
</div>
</div>
</body>
</html>
My layout looks as shown below:
You need to add the below CSS:
html, body{
height:100%;
width:100%;
}
Then you can adjust the height of the r-contact-container.
.r-contact-container {
margin-top: 4rem;
width: 100%;
height: 86% !important;
background-color: blue;
}
This height can be adjusted, I have just used 86%.
JSFiddle Demo
You can use other unit of measure, you can try using:
height: 100vh.
"100vh" is 100% of height of window screen.
I've made a website for a school project and want to improve the design a little more. I think the logo makes the header a little bit to big. So I want to move my navbar from under the header to inside the header, to make it look smaller. That's all. I'll post the code and photos underneath.
This is how it looks now
How I want it to be
/* -----------------------
Layout
------------------------*/
.container {
max-width: 70em;
margin: 0 auto;
}
.header {
font-family: 'Handlee', cursive;
color: #fff;
background: #7eabac;
padding: 0.5em 0em;
}
.header-heading {
margin: 0;
max-width: 300px;
margin-left: 400px;
max-height: 300px;
}
.nav-bar {
background: #e9f1f1;
padding: 0;
}
.content {
overflow: hidden;
padding: 1em 1.25em;
background-color: #fff;
}
.main,
.zijkant {
margin-bottom: 1em;
}
.footer {
color: #fff;
background: #656565;
padding: 1em 1.25em;
}
/* -----------------------
Navbar
------------------------*/
.nav {
margin: 0;
padding: 0;
list-style: none;
font-family: 'Open Sans Condensed', sans-serif;
}
.nav li {
display: inline;
margin: 0;
}
.nav a {
display: block;
padding: .7em 1.25em;
color: #black;
text-decoration: none;
border-bottom: 1px solid gray;
}
.nav a:link {
color: black;
}
.nav a:visited {
color: black;
}
.nav a:focus {
color: black;
background-color: white;
}
.nav a:hover {
color: black;
background-color: #eededb;
}
.nav a:active {
color: white;
background-color: #f4ebe9;
}
<!DOCTYPE html>
<html lang="nl">
<head>
<link rel="stylesheet" href="etc/css/styles.css">
</head>
<script type="text/javascript">
function zoom() {
document.body.style.zoom = "-20%"
}
</script>
<body onload="zoom()">
<div class="header">
<div class="container">
<img src="etc/img/logo-wec.png" class="header-heading"></img>
</div>
</div>
<div class="nav-bar">
<div class="container">
<ul class="nav">
<li><a class="active" href="index.html">Home</a>
</li>
<li>Nieuws
</li>
<li>Producten
</li>
<li>ROC
</li>
<li>Contact
</li>
</ul>
</div>
</div>
</body>
</html>
Put the image container and navbar in the same container:
<div class="header">
<div class="container">
<img src="etc/img/logo-wec.png" class="header-heading"></img>
</div>
<div class="nav-bar">
<div class="container">
<ul class="nav">
<li><a class="active" href="index.html">Home</a>
</li>
<li>Nieuws
</li>
<li>Producten
</li>
<li>ROC
</li>
<li>Contact
</li>
</ul>
</div>
</div>
</div>
Give the header position relative and the position the navbar using absolute positioning:
.header {
font-family: 'Handlee', cursive;
color: #fff;
background: #7eabac;
padding: 0.5em 0em;
position: relative;
}
.nav-bar{
position: absolute;
right: 0;
top: 0;
bottom: 0;
margin: auto;
height: 50px;//adjust to center vertically
width: 300px;//adjust to your liking
}
You have to set a height to nav-bar in order to make sure it is centered vertically
I've finished coding my website for a 1024x768 resolution and now want to add #media queries to my code so that the sidebar disappears when the screen is at a width of 980px and then stays like that all the way down from there. I have tried adding the #media max-width 980 myself but it does not seem to be working at all. I've also tried in various places on the page but again, no luck. It's so frustrating! Code Below (Sorry if it's really long, I'm gonna leave it all in there to avoid any questions regarding code).
HTML:
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width" />
<title>Lakeside Books</title>
<link rel="stylesheet" type="text/css" href="masterstyle.css">
<meta name="viewsize" content="width-device-width,initial-scale=1.0">
<!--[if IE]>
<script type="text/javascript" src="_http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="sidebar">
<nav id="nav">
<h3 id="welcometext">Welcome To<br>Lakeside Books</h3>
<div id="searchbar">
<form action="http://www.example.com/search.php">
<input type="text" name="search" placeholder=" ...Search Book Title" class="searchstyle"/>
</form>
</div>
<ul>
<li style="background-color: #333">
<a href="1Index.html" class="link">
<span style="color: #ed786a">Home</span>
</a>
</li>
<li>
<a href="2Catgeories.html" class="link">
Categories
</a>
</li>
<li>
<a href="http://example.com" class="link">
Bestsellers
</a>
</li>
<li>
<a href="http://example.com" class="link">
Find Us
</a>
</li>
<li>
<a href="http://example.com" class="link">
Contact
</a>
</li>
</ul>
</nav>
</div>
CSS:
html, body { /* ### */
margin:0;
padding:0;
height:100%;
width:100%;
}
body {
background-color: #fdfdfd;
font-family: Arial, "Open Sans", sans-serif-light, sans-serif, "Segoe UI";
}
#wrapper {
width: 100%;
height: 100%;
margin:0 0 0 20%; /* ### */
}
#sidebar {
background-color: #212528;
position: fixed;
width: 20%;
height: 100%;
top: 0;
left: 0;
overflow: hidden;
text-shadow: 0.1em 0.1em 0 rgba(0, 0, 0, 0.1);
}
#nav {
color: #DADADA;
display: block;
max-width: 100%;
}
#nav ul {
padding-left: 0;
}
#nav li {
list-style-type: none;
margin: 0;
padding: 0.75em 0 0.75em 0;
text-align: center;
max-width: 100%;
}
#nav li:hover {
background:#333;
}
#nav li a {
display: block;
padding: 0.5em 0;
}
.link {
text-align: right;
margin-right: 25%;
letter-spacing: 1px;
display: block;
}
#nav li a:link{
color: #DADADA;
text-decoration: none;
}
#nav li a:visited{
color: #DADADA;
text-decoration: none;
}
#nav li a:hover{
color: #DADADA;
text-decoration: none;
}
#nav li a:active{
color: #DADADA;
text-decoration: none;
}
#welcometext {
text-align: center;
/*font-style: italic;*/
text-transform: uppercase;
font-size: 1em;
margin-top: 2em;
}
#searchbar {
width: 70%;
margin-left: auto;
margin-right: auto;
padding: 1em 1em 0.5em 1em;
text-align: right;
}
#searchbar .searchstyle{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#searchbar input {
max-width: 95%;
}
/*-------Media Styles-------*/
#media all and (max-width: 980px){
#sidebar{
float: none;
}
}