I was wondering how I could stop div's from falling under my navigation/information bar when I minimize the screen's width. The information bar is 1200px in height, I just want it to sit on the left side without any disturbance from div's and other code when I decide to minimize the width.
Or better yet, if someone could show me how to shrink the "information bar" in height when the browser is minimizing while the div's fall under it that would be very helpful.
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel='stylesheet' href=o>
<link href="https://fonts.googleapis.com/css?family=Abel|Abril+Fatface|Amaranth|Arapey|Armata|Asap+Condensed|Bellefair|Cabin+Condensed|Cormorant+Unicase|Cormorant+Upright|Dancing+Script|EB+Garamond|Economica|Frank+Ruhl+Libre|Great+Vibes|Gruppo|Gudea|Halant|Heebo|Hind+Guntur|IM+Fell+Great+Primer+SC|Italianno|Karla|Kreon|Kristi|Kurale|Molengo|Old+Standard+TT|Open+Sans+Condensed:300|Ovo|Parisienne|Pinyon+Script|Poiret+One|Pontano+Sans|Prata|Quattrocento|Rouge+Script|Share|Spectral|Tangerine|Tenali+Ramakrishna|Trirong|Voces|Yantramanav|Yrsa" rel="stylesheet">
<title></title>
</head>
<body>
<h1>Site</h1>
<nav>
<ul class="menu">
<li>Information</li>
<li>Wanting</li>
<li>To</li>
<li>Stay</li>
<li>Undisruptive</li>
<li>To</li>
<li>Div's</li>
</ul>
</nav>
<div>
<div class=red>
</div>
<div class=red>
</div>
<div class=red>
</div>
</div>
</body>
</html>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
text-align:center;
font-family
}
h1{
background-color:black;
color:white;
padding:1em;
font-size:2em;
}
.menu{
background-color:gray;
width:200px;
height:1200px;
position:relative;
float:left;
}
.red{
position:relative;
border:1px solid red;
float:left;
width:350px;
height:350px;
}
#media screen and (min-width:600px){
.red{
}
}
This may helpful:
You can change width into "%"
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
text-align: center;
font-family
}
h1 {
background-color: black;
color: white;
padding: 1em;
font-size: 2em;
}
.menu {
background-color: gray;
width: 25%;
height: 1200px;
position: relative;
float: left;
}
.right {
float: left;
width: 75%
}
.red {
position: relative;
border: 1px solid red;
float: left;
width: 100%;
height: 350px;
}
#media (max-width:600px) {
.menu {
width: 35%;
}
.right {
width: 65%
}
}
<h1>Site</h1>
<nav>
<ul class="menu">
<li>Information</li>
<li>Wanting</li>
<li>To</li>
<li>Stay</li>
<li>Undisruptive</li>
<li>To</li>
<li>Div's</li>
</ul>
</nav>
<div class="right">
<div class=red>
</div>
<div class=red>
</div>
<div class=red>
</div>
</div>
I would say, your code is at a very basic level to achieve what you ask for, but I have tried something, hope so that fulfils the requirement.
<div class="site-name">
<h1>Site</h1>
<div class="hamburger" id="hamClick">
<span></span>
<span></span>
<span></span>
</div>
</div>
<nav>
<ul class="menu" id="menu">
<li>Information</li>
<li>Wanting</li>
<li>To</li>
<li>Stay</li>
<li>Undisruptive</li>
<li>To</li>
<li>Div's</li>
</ul>
</nav>
<div>
<div class=red></div>
<div class=red></div>
<div class=red></div>
</div>
here is the css:
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
text-align:center;
}
.site-name {
padding: 1em;
position: relative;
background-color:black;
}
.site-name h1{
color:white;
font-size:2em;
}
.menu{
background-color:gray;
width:200px;
height:1200px;
position:relative;
float:left;
}
.red{
position:relative;
border:1px solid red;
float:left;
width:350px;
height:350px;
}
.hamburger {
display: none;
position: absolute;
border: 1px solid #fff;
border-radius: 4px;
padding: 4px;
top: 20px;
cursor: pointer;
}
.hamburger span {
width: 20px;
height: 2px;
background: #fff;
margin-top: 2px;
display: block;
}
.hamburger span:first-child {
margin-top: 0px;
}
#media only screen and (max-width:600px){
.hamburger {
display: block;
}
.menu {
height: 0px;
transition: all .3s ease-in-out;
position: absolute;
overflow: hidden;
}
.menu.active {
height: 150px;
transition: all .3s ease-in-out;
z-index: 999;
}
.red {
width: 100%;
/* height: 100vw; */
}
}
and a little bit of Javascript:
document.getElementById('hamClick').addEventListener('click', function() {
var collapse = document.getElementById('menu');
collapse.classList.toggle('active');
});
Look at the JSFiddle code here: JSFiddle
Related
I am having problems creating a two row navigation bar using HTML, CSS, and JavaScript.
This is what I want my navbar to look like :
However, the logo seems to overlap the links on the right-hand side, which do not what I want.
My HTML:
<div id="top-bar">
<div class="container">
<ul>
<li><i class="fab fa-facebook"></i> <i class="fab fa-twitter"></i> <i class="fab fa-instagram"></i> </li>
<li style="padding:0;"><img src="https://via.placeholder.com/250x115" alt="" width="100%">
<li>01283 575 671</li>
<li>Join Now </li>
</ul>
</div>
</div>
<div class="nav-bg">
<div class="container">
<ul id="nav">
<li>Facilties</li>
<li>Timetable</li>
<li>Blog</li>
<li></li>
<li>The Team</li>
<li>Events</li>
<li>Contact Us</li>
</ul>
</div>
</div>
My CSS:
* { box-sizing:border-box }
body {
margin: 0px;
font-family: 'Montserrat', sans-serif;
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
#media (min-width: 768px) {
.container {
width: 750px;
}
}
#media (min-width: 992px) {
.container {
width: 970px;
}
}
#media (min-width: 1200px) {
.container {
width: 1170px;
}
}
#top-bar {
float: left;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 0px;
overflow: hidden;
width:100%;
min-width: 650px;
min-height: 50px;
background: #FFDE00;
}
#top-bar div ul {
margin:0;
padding:0;
list-style:none;
}
#top-bar div ul li {
float:left;
padding: 15px 15px;
width: 20%;
background: #FFDE00;
font-weight:500;
text-transform:uppercase;
}
#top-bar div ul li:first-child{
width:40%;
}
#top-bar div ul li:last-child{
background:#081F2D;
}
#top-bar div ul li a {
display: block;
color:#081F2D;
text-decoration:none;
text-align: center;
font-size:17px;
}
#top-bar > div > ul > li:nth-child(4) > a{
color:#FFDE00;
}
#nav {
text-align: justify;
min-width: 500px;
font-size: 0;
padding-left:0;
}
.nav-bg{
background-color: #EEEEEE;
}
#nav:after {
content: '';
display: inline-block;
width: 100%;
}
#nav li {
display: inline-block;
background-color: #ccc;
}
#nav a {
padding: 15px 40px;
display: block;
font-size: 1rem;
text-align: center;
color:#081F2D;
text-transform:uppercase;
font-weight:600;
text-decoration: none;
background-color: #EEEEEE;
}
#nav .nav_blank { width: 250px; padding: 15px 0; }
#nav .nav_first { padding-left: 0; }
#nav .nav_last { padding-right: 0; }
The codepen to my problem is https://codepen.io/mrsalami/pen/VEyXVJ
Redo your structure as follows by implementing CSS-Grids
CSS part:
#parent_column
{
grid-template-columns:1fr 0.61fr 1fr;
display: grid;
width: 100vw;
height: 20vh;
}
#first_column
{
grid-column: 1;
display:grid;
grid-template-rows: 1fr 1fr;
}
#second_column
{
grid-column: 2;
}
#third_column
{
grid-column: 3;
display:grid;
grid-template-rows: 1fr 1fr;
}
HTML as
<div id="parent_column">
<div id="first_column">
<div style="background-color: rebeccapurple;">Top Bar Content on Left</div>
<div style="background-color: gold;">Bottom Bar Content on Left</div>
</div>
<div id="second_column">
<a href="#" style="position: absolute; z-index:1; top:0;"><img src="https://via.placeholder.com/250x115" alt=""
width="100%"></a>
</div>
<div id="third_column">
<div style="background-color: red;">Top Bar Content on Left</div>
<div style="background-color: pink">Bottom Bar Content on Left</div>
</div>
</div>
Result:
CSS-Grid is now supported on 87.85% of the browsers and for IE browser you need to add the prefix ms-
For more reference of browser support on CSS Grid
I would suggest div and span instead of ul and li. Also, divide all stuff in 3 parts - left, center and right. That will make your task easier resulting below.
HTML:
<body>
<div id="top-bar">
<div class="container">
<div class="left-right-container">
<div class="left-container">
<span><i class="fab fa-facebook"></i> <i class="fab fa-twitter"></i> <i class="fab fa-instagram"></i> </span>
</div>
<div class="right-container">
<span>01283 575 671</span>
<span>Join Now </span>
</div>
</div>
<div class="center-container">
<span style="padding:0;"><img src="https://via.placeholder.com/250x115" alt="" width="100%"></span>
</div>
</div>
</div>
<div class="nav-bg">
<div class="container">
<div class="left-right-nav">
<div class="left-nav">
<div>
<span>Facilties</span>
<span>Timetable</span>
<span>Blog</span>
</div>
</div>
<div class="right-nav">
<div>
<span>The Team</span>
<span>Events</span>
<span>Contact Us</span>
</div>
</div>
</div>
<div class="center-nav">
</div>
</div>
</div>
CSS:
* { box-sizing:border-box }
body {
margin: 0px;
font-family: 'Montserrat', sans-serif;
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.left-container, .center-container, .right-container{
position:absolute;
display:inline-block;
margin:0;
padding:0;
width: calc(50% - 125px);
}
.left-container{
left:0;
height: 50px;
overflow:hidden;
}
.left-container span {
margin: auto;
left: 0;
right: 0;
position: absolute;
}
.center-container{
width:250px;
height:115px;
z-index:2;
left:0;
right:0;
margin:auto;
}
.right-container{
right:0;
height: 50px;
overflow:hidden;
}
.right-container span:last-child{
background:#081F2D;
width:40%;
float:right;
}
.right-container span:last-child a{
color:#FFDE00;
}
.left-right-container{
background: #FFDE00;
height: inherit;
}
.left-container span, .right-container span {
padding: 15px 15px;
font-weight:500;
text-transform:uppercase;
width:59%;
display: inline-block;
}
#media (min-width: 768px) {
.container {
width: 750px;
}
}
.left-container span a, .right-container span a {
display: block;
color:#081F2D;
text-decoration:none;
text-align: center;
font-size:17px;
}
#media (min-width: 992px) {
.container {
width: 970px;
}
}
#media (min-width: 1200px) {
.container {
width: 1170px;
}
}
#top-bar {
float: left;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 0px;
overflow: hidden;
width:100%;
min-width: 650px;
min-height: 50px;
background: #FFDE00;
}
/******************/
.nav-bg{
width:100%;
position:absolute;
top:50px;
height: 50px;
z-index:1;
}
.left-right-nav{
background-color: #EEEEEE;
height: inherit;
}
.left-nav, .center-nav, .right-nav {
position:absolute;
display:inline-block;
width: calc(50% - 125px);
}
.left-nav{
left:0;
}
.center-nav{
width:250px;
height:50px;
z-index:1;
left:0;
right:0;
margin:auto;
}
.right-nav{
right:0;
}
.left-nav div, .right-nav div{
margin: auto;
left: 0;
right: 0;
position:absolute;
background-color: #EEEEEE;
text-align:right;
}
.left-nav div span{
}
.right-nav div span{
float:left;
}
.left-nav div span, .right-nav div span{
display: inline-block;
}
.left-nav span a, .right-nav span a {
padding: 15px 40px;
display: block;
font-size: 1rem;
text-align: center;
color:#081F2D;
text-transform:uppercase;
font-weight:600;
text-decoration: none;
background-color: #EEEEEE;
}
https://codepen.io/anon/pen/MPGRvm
I don't see any options except using grid template or spit navigation into two blocks - left and right.
In case of grid this can help you: A Complete Guide to Grid
Please refer to the posted image. I want to add a margin-left on the first image and then in the rest of image I don't want them. Can I use the child selectors to achieve this or there is any other way?
Can I make the images, overflow: scroll like we do in case of text? As I don't know jquery/javascript as of now.
* {
box-sizing: border-box;
}
body {
background:gray;
/*border: 2px solid yellow;*/
}
.wrapper {
width: 93%;
height: auto;
margin: auto;
}
.headwrap {
padding-top: 70px;
}
.logo {
margin: 0;
float: left;
}
.socialbuttons {
float: right;
}
.socialbuttons ul {
list-style: none;
float: right;
}
.socialbuttons ul li {
float: left;
width:50px;
height:50px;
padding:0;
margin-right: 30px;
background: #000;
border-radius:30px;
}
.socialbuttons ul li img{
margin-left:20px;
margin-top:20px;
}
.navbar {
margin-top: 40px;
width: 100%;
background: #db3636;
float: left; /* this and see changes */
}
.navbar ul {
list-style: none;
margin: 0;
padding: 0 5px; /* the 0 helps with making the borders span full height of navbar*/
/* float producing wrong results */
}
.navbar ul li {
float: left; /* height of menu bar increases when float is defined */
display: inline; /* does it have any use ? */
padding: 25px 10px;
border-right: 1px solid black;
border-left: 1px solid black;
color: white;
font-size: 14px;
font-weight: bold;
font-family: sans-serif;
text-align: center;
width: 15%;
}
.navbar ul li:first-child {
border-left: none;
}
.navbar ul li:last-child {
border-right: none;
}
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
line-height: 0;
}
.clearfix:after {
clear: both;
}
.slider img {
float:left;
width:100%;
}
.text{
color:white;
margin-top:-35%;
float:left;
margin-left: 80px;
font-weight: bold;
font-family: Helvetica, Arial, Sans-Serif;
font-size : 50px;
line-height: .5;
}
#project {
background-color: #555653;
width: 100%;
margin-top: 10px;
float: left;
}
.head {
float: left;
background-color: #1D1D1C;
width: 100%;
}
.head h3 {
color: white;
font-family: Arial , sans-serif;
font-weight: lighter;
margin-left: 20px;
}
.imgContainer img {
margin-top: 20px;
padding-left: 40px
}
<!DOCTYPE html>
<html>
<head>
<title>Industrial Website demo</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial scale=1.0">
<link href="damion.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="wrapper">
<header class="headwrap">
<div class="logo">
<img src="logo.png" alt="Damion max">
</div>
<div class="socialbuttons">
<ul>
<li><img src="facebook.png"></img></li>
<li><img src="twitter.png"></img> </li>
<li><img src="feed.png"></img></li>
<li><img src="google.png"></img></li>
</ul>
</div>
<nav class="navbar">
<ul class="clearfix">
<li style="width:5%;"><img src="home.png"></li>
<li>ABOUT US</li>
<li>GALLERY</li>
<li>EVENTS</li>
<li>BLOG</li>
<li>CONTACTS</li>
<li style="padding:0; width:20%;"><input type="text" style="background:black; height:30px; width:90%; margin:20px 0 0 20px; border:0; border-radius:10px;"></li>
</ul>
</nav>
</header>
<div class="slider">
<img src="industrial.jpg" />
<div class="text">WE ARE PROFESSIONAL,<p><span style="font-weight:lighter; line-height:100%; color: yellow ;">COMPETITIVE AND COMPETENT</span></p></P></div>
</div>
<div id="project">
<div class="head">
<h3>FEATURED PROJECTS</h3>
</div>
<div class="imgContainer">
<img src="1.jpg"/>
<img src="2.jpg"/>
<img src="3.jpg"/>
<img src="4.jpg"/>
<img src="5.jpg"/>
<!--<img src="6.jpg"/>-->
</div>
</div>
</div>
</body>
</html>
Use :first-child selector for this:
.imgContainer img:first-child{
margin-left:10px;
}
You can easily achieve this using this css
.imageContainer img:first-child
{
margin-left:20px;
}
You can select the first child with any of the given selectors below:
.imgContainer img:first-of-type
.imgContainer img:first-child
.imgContainer img:nth-child(1)
If you want to set some sort of overflow to your images, you'll need to wrap them in another element, like a generic div and set your overflow rules to this element, standard overflow rules won't apply directly to img elements.
See CSS Tricks - overflow
I want my menu to stay on its place while I scroll, but when I add the following in my CSSposition:fixed; the whole thing goes out of the place from where I want it to be.
In this jsfiddle you can see how it is now and how I want it to be. The only thing wrong with it, is that if I change the position to fixed it doesn't stay where I want it to be anymore.
<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Satisfy' rel='stylesheet' type='text/css'>
<title>random</title>
<!-- <link rel="stylesheet" type="text/css" href="styles/style.css"> -->
</head>
<body>
<div id="container">
<div id="headcontainer">
</div>
<div id="menu">
<div id="logo">
<p>
Hier komt een logo
</p>
</div>
<ul>
<li>
Home
</li>
<li>
Over
</li>
<li>
Contact
</li>
<li>
Producte
</li>
</ul>
</div>
<div id="content">
<div class="text-box">
</div>
<div class="text-box">
</div>
</div>
</div>
</body>
</html>
<style>
/*Global*/
* {
margin: 0px;
}
body {}
h1,
h2,
h3,
h4,
h5,
h6 {}
h1 {}
h2 {}
h3 {}
h4 {}
a {}
img {}
#container {
margin-left: auto;
margin-right: auto;
width: 100%;
}
#headcontainer {
width: 100%;
height: 100vh;
background-color: pink;
}
/* navigation */
#menu {
height: 100px;
width: 100%;
background-color: rgba(0, 0, 255, 0.1);
max-height: 100px;
border: 1px solid black;
border-top: none;
}
#menu li {
display: inline-block;
text-decoration: none;
padding-left: 20px;
position: relative;
padding-right: 20px;
}
#menu ul {
float:right;
height:100%;
width: auto;
line-height: 100px;
margin-right:25px;
}
#menu ul li {
}
#menu ul li:hover {
cursor:pointer;
color: white;
}
#logo {
height: 50px;
width: auto;
background-color: red;
float: left;
margin-top: 0px;
margin-top: 30px;
margin-left: 60px;
}
/*content*/
#content {
width:100%;
height:1000px;
min-height:500px;
margin-left: auto;
margin-right: auto;
}
.text-box {
width:40%;
height:auto;
background-color:blue;
min-height:100px;
float:left;
margin-left:5%;
margin-right:5%;
margin-top:50px;
}
</style>
EDIT:
I'm trying to achieve something like this:
http://themes.lucky-roo.com/resume-cv/berg-v1.7/HTML_Template/home-1-static-image.html
Ok, i see what you want and i think you will code this behaviour in Javascript.
This kind of solution will be okay for you ??
Démo : http://jsfiddle.net/cc48t
$(window).scroll(function () {
if ($(window).scrollTop() > 100) {
$('#scroller').css('top', $(window).scrollTop());
}
}
);
Use menu inside the headercontainor and give position: fixed; fom #menu
<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Satisfy' rel='stylesheet' type='text/css'>
<title>random</title>
<!-- <link rel="stylesheet" type="text/css" href="styles/style.css"> -->
</head>
<body>
<div id="container">
<div id="headcontainer">
<div id="menu">
<div id="logo">
<p>
Hier komt een logo
</p>
</div>
<ul>
<li>
Home
</li>
<li>
Over
</li>
<li>
Contact
</li>
<li>
Producte
</li>
</ul>
</div>
</div>
<div id="content">
<div class="text-box">
</div>
<div class="text-box">
</div>
</div>
</div>
</body>
</html>
<style>
/*Global*/
* {
margin: 0px;
}
body {}
h1,
h2,
h3,
h4,
h5,
h6 {}
h1 {}
h2 {}
h3 {}
h4 {}
a {}
img {}
#container {
margin-left: auto;
margin-right: auto;
width: 100%;
}
#headcontainer {
width: 100%;
height: 100vh;
background-color: pink;
}
/* navigation */
#menu {
position: fixed;
height: 100px;
width: 100%;
background-color: rgba(0, 0, 255, 0.1);
max-height: 100px;
border: 1px solid black;
border-top: none;
}
#menu li {
display: inline-block;
text-decoration: none;
padding-left: 20px;
position: relative;
padding-right: 20px;
}
#menu ul {
float:right;
height:100%;
width: auto;
line-height: 100px;
margin-right:25px;
}
#menu ul li {
}
#menu ul li:hover {
cursor:pointer;
color: white;
}
#logo {
height: 50px;
width: auto;
background-color: red;
float: left;
margin-top: 0px;
margin-top: 30px;
margin-left: 60px;
}
/*content*/
#content {
width:100%;
height:1000px;
min-height:500px;
margin-left: auto;
margin-right: auto;
}
.text-box {
width:40%;
height:auto;
background-color:blue;
min-height:100px;
float:left;
margin-left:5%;
margin-right:5%;
margin-top:50px;
}
</style>
Since you are not using JQuery, You can achieve it through the simple javascript
var header = document.querySelector('div'),
title = header.querySelector('ul'),
fix_class = 'fixnav';
function stickyScroll(e) {
if( window.pageYOffset > 310 ) {
title.classList.add(fix_class);
}
if( window.pageYOffset < 310 ) {
title.classList.remove(fix_class);
}
}
// Scroll handler to toggle classes.
window.addEventListener('scroll', stickyScroll, false);
<style>
/*Global*/
* {
margin: 0px;
}
body {}
h1,
h2,
h3,
h4,
h5,
h6 {}
h1 {}
h2 {}
h3 {}
h4 {}
a {}
img {}
#container {
margin-left: auto;
margin-right: auto;
width: 100%;
}
#headcontainer {
width: 100%;
height: 100vh;
background-color: pink;
}
/* navigation */
.fixnav{
position:fixed;
z-index:9999;
top:0;
}
#menu {
height: 100px;
width: 100%;
background-color: rgba(0, 0, 255, 0.1);
max-height: 100px;
border: 1px solid black;
border-top: none;
transition: 1s all;
}
#menu li {
display: inline-block;
text-decoration: none;
padding-left: 20px;
position: relative;
padding-right: 20px;
}
#menu ul {
float:right;
height:100%;
width: auto;
line-height: 100px;
margin-right:25px;
}
#menu ul li {
}
#menu ul li:hover {
cursor:pointer;
color: white;
}
#logo {
height: 50px;
width: auto;
background-color: red;
float: left;
margin-top: 0px;
margin-top: 30px;
margin-left: 60px;
}
/*content*/
#content {
width:100%;
height:1000px;
min-height:500px;
margin-left: auto;
margin-right: auto;
}
.text-box {
width:40%;
height:auto;
background-color:blue;
min-height:100px;
float:left;
margin-left:5%;
margin-right:5%;
margin-top:50px;
}
</style>
<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Satisfy' rel='stylesheet' type='text/css'>
<title>random</title>
<!-- <link rel="stylesheet" type="text/css" href="styles/style.css"> -->
</head>
<body>
<div id="container">
<div id="headcontainer">
</div>
<div id="menu">
<div id="logo">
<p>
Hier komt een logo
</p>
</div>
<ul>
<li>
Home
</li>
<li>
Over
</li>
<li>
Contact
</li>
<li>
Producte
</li>
</ul>
</div>
<div id="content">
<div class="text-box">
</div>
<div class="text-box">
</div>
</div>
</div>
</body>
</html>
Fiddle: https://jsfiddle.net/sank8893/mvmbtcby/3/
I create a jsfiddle.
I just add those lines in #menu and it works for me:
position : fixed;
top: 0;
The menu doesn't move.
JS:
$(document).ready(function() {
$(window).scroll(function () {
//if you hard code, then use console
//.log to determine when you want the
//nav bar to stick.
console.log($(window).scrollTop())
if ($(window).scrollTop() > 100) {
$('#nav_bar').addClass('navbar-fixed');
}
if ($(window).scrollTop() < 100) {
$('#nav_bar').removeClass('navbar-fixed');
}
});
});
Css:
.navbar-fixed{
position:fixed;
z-index:auto;
Top:0px;
}
Since you need this css to be appended only when you have scrolled a certain height in your webpage, Using this js code you can append navbar-fixed class to menu div after scrolling a certain amount of height.
Add the following script it will work fine
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$(window).scroll(function () {
if ($(window).scrollTop() > 650) {
$('#menu').css('position', 'fixed').css('top', '0');
} else {
$('#menu').css('position', 'static');
}
});
</script>
Add these styles to your menu in css
.
position: fixed
top:0
The combination of these 2 will make sure the menu stays where it has to stay : always at the top.
As #Error404 said:
the fixed elements goes out of the normal flow of the document and this
is why you can position it on the top of the screen.
Am having layout issues, trying to understand floats and how to position elements. Am very new to css/html. Could someone help me understand how this layout is going to work. Some problems:
1) Unable to change the height of footer without ruining layout, footer seems to get pushed upwards.
2) When i inspect the page through chrome the footer div is included inside the 'wrapper' div when it's outside it in the code.
3) Adding padding to the content div also seems to break the layout
<!DOCTYPE html>
<html lang="en">
<head>
<title>DCW</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<!--NAV BAR -->
<nav>
<ul>
<div class="float-left">
<li><a class="active" href="default.asp">PD</a></li>
<li>Projects</li>
<li>About</li>
<li>Contact</li>
</div>
<div class="float-right">
<li>Hire Us!</li>
</div>
</ul>
</nav>
<!-- HEADER -->
<header>
<div id="title_wrapper">
</div>
</header>
<!-- BODY CONTENT -->
<div id="wrapper">
<div id="content">
<div class="info">
col1
</div>
<div class="info">
col2
</div>
</div>
<!-- SIDEBAR -->
<div id="sidebar">
<div id="sidebar-text">
content 2
</div>
</div>
</div>
<!-- FOOTER -->
<footer>
Footer
</footer>
</body>
CSS:
html, body
{
width: 100%;
height: 100%;
margin:0;
padding: 0;
}
p.thick {
font-weight: bold;
}
h1, p {
padding: 0;
margin: 0;
}
/*Nav */
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
nav li {
float: left;
}
nav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
nav li a:hover {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
.float-left {
float:left;
}
.float-right {
float:right;
}
/* Header */
header #title_text{
font-size: 100px;
font-family: arial;
}
header #title_wrapper{
text-align:center;
position: relative;
top: 200px;
}
header {
background-color: orange;
position: relative;
height:100%;
width: 100%;
color:white;
margin:0;
}
/*Content*/
#wrapper{
min-height: 70%;
height: auto;
height: 70%;
}
#content{
float:left;
width:100%;
height: 100%;
text-align: center;
}
#sidebar{
float: left;
background-color: lightgrey;
height: 75%;
text-align: center;
width: 100%;
}
#sidebar-text{
font: 14px/22px normal helvetica, sans-serif;
padding-top: 30px;
text-decoration: none;
line-height: 200%;
}
.img-circle {
border-radius: 50%;
}
.info{
width: 50%;
float: left;
}
blockquote.style2 {
font: 14px/22px normal helvetica, sans-serif;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 50px;
padding-left: 15px;
border-left: 3px solid #ccc;
outline-style: double;
outline-color: lightgrey;
}
/* footer */
footer{
background-color: orange;
}
Cheers
I did make a +200px padding content with a +200px footer. Didn't changed anything besides the display:inline-block on the footer plus box-sizing: border-box; on the content.
html, body
{
width: 100%;
height: 100%;
margin:0;
padding: 0;
}
p.thick {
font-weight: bold;
}
h1, p {
padding: 0;
margin: 0;
}
/*Nav */
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
nav li {
float: left;
}
nav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
nav li a:hover {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
.float-left {
float:left;
}
.float-right {
float:right;
}
/* Header */
header #title_text{
font-size: 100px;
font-family: arial;
}
header #title_wrapper{
text-align:center;
position: relative;
top: 200px;
}
header {
background-color: orange;
position: relative;
height:100%;
width: 100%;
color:white;
margin:0;
}
/*Content*/
#wrapper{
min-height: 70%;
height: auto;
height: 70%;
}
#content{
float:left;
width:100%;
height: 100%;
text-align: center;
padding:100px;
box-sizing: border-box;
}
#sidebar{
float: left;
background-color: lightgrey;
height: 75%;
text-align: center;
width: 100%;
}
#sidebar-text{
font: 14px/22px normal helvetica, sans-serif;
padding-top: 30px;
text-decoration: none;
line-height: 200%;
}
.img-circle {
border-radius: 50%;
}
.info{
width: 50%;
float: left;
}
blockquote.style2 {
font: 14px/22px normal helvetica, sans-serif;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 50px;
padding-left: 15px;
border-left: 3px solid #ccc;
outline-style: double;
outline-color: lightgrey;
}
/* footer */
footer{
display: inline-block;
background-color: orange;
height:200px;
width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>DCW</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<!--NAV BAR -->
<nav>
<ul>
<div class="float-left">
<li><a class="active" href="default.asp">PD</a></li>
<li>Projects</li>
<li>About</li>
<li>Contact</li>
</div>
<div class="float-right">
<li>Hire Us!</li>
</div>
</ul>
</nav>
<!-- HEADER -->
<header>
<div id="title_wrapper">
</div>
</header>
<!-- BODY CONTENT -->
<div id="wrapper">
<div id="content">
<div class="info">
col1
</div>
<div class="info">
col2
</div>
</div>
<!-- SIDEBAR -->
<div id="sidebar">
<div id="sidebar-text">
content 2
</div>
</div>
</div>
<!-- FOOTER -->
<footer>
Footer
</footer>
</body>
It is not necessary to give width and height as 100% for html and body or div in css width is 100% by default. You can mention the width only when it is required.
for giving height to footer just add clear:both for footer selector
footer{background-color: orange;clear:both;height:50px;}
this will solve problems 1 & 2. When you add padding the design breaks because each time when you add width it keeps adding to the current width already given to the same div or element. This can be solved either by re adjusting the element width or using box-sizing: border-box.
First of all im a bit confused but i will do my best to explain my problem and what i want.
I have a div and inside that div i have another div, i want that div to move to left and right, nothing more, it has to follow the same path as the image when resizing (see my project).
How do i make that div that is behind the white circle always do the same path as the circle ?
body {
margin: 0;
width:100%;
}
body > div {
height: 200px;
}
.header {
background-color: transperent;
height: 100px;
color: white;
}
.product {
margin-top:0px;
height: 600px;
background-color: blue;
color: white;
float:left;
width:50%;
margin:0;
padding:0;
display: inline-block;
}
.product2 {
height: 600px;
margin-top:0px;
background-color: red;
color: white;
width:50%;
float:left;
margin:0;
padding:0;
position: relative;
display: inline-block;
}
.product2 img{
position: absolute;
right: 0;
bottom: 0;
}
.main{
background-image: url("http://i.imgur.com/Y5hHusa.png");
height:650px;
}
#crew {
height:50px;
clear:both;
background-color: tomato;
color: darkgrey;
}
.stick {
position: fixed;
top: 0;
}
.tour {
background-color: black;
color: darkgrey;
}
.pricing {
background-color: gold;
color: black;
}
.contact {
background-color: black;
color: white;
}
.menu {
float: right;
font-size: 18px;
list-style: outside none none;
margin-top: -5px;
margin-right: 50px;
}
.menu li a {
color: blue;
display: block;
text-decoration: none;
}
.menu li {
display: inline;
float: left;
padding-right: 23px;
}
.menu li a:hover{
background-color:none;
color:red;
}
.div_form {
height:35%;
width:40%;
margin-top:36%;
margin-left:41%;
background-color:blue;
}
.product2 .div_form{
}
.product2 .div_form .form_title{
position:absolute;
z-index:1;
margin-top:270px;
margin-left:1em;
font-size:3em
}
.product2 .div_form .form_circulo{
z-index:1
}
.product2 .div_form .div_email .input_first_email{
margin-top: -70%;
margin-left:50%;
height:3em;
border-radius:5px;
padding:1em;
width:45%;
}
.product2 .div_form .divbtnsubmit{
background-color:red;
margin-left:60%;
width:20em;
height:3em;
border-radius:1em;
text-align:center;
margin-top:1em;
width:45%
}
.product2 .div_form .divbtnsubmit .btnsumnitform
{
font-size:2em;
color:white;
position:absolute;
padding:.3em;
margin-left:-3.5em
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="styles.css" rel="stylesheet" type="text/css" >
<title> Layout </title>
</head>
<body>
<div class="main">
<div class="header">
<img src="http://i.imgur.com/48nYArD.png">
<ul class="menu">
<li>Home </li>
<li>Product Tour </li>
<li>Pricing </li>
<li>Try </li>
<li>Vision</li>
</ul>
</div>
<div class="product">
</div>
<div class="product2">
<img src="http://i.imgur.com/3UTs03w.png">
<div class="div_form">
</div>
</div>
</div>
</div>
<div id="crew">
</div>
<div class="tour">
</div>
<div class="pricing">
</div>
<div class="contact">
</body>
</html>
PS: Sorry for argumentation, my english isnt the best, hope you can understand.
Regards,
Duarte Andrade.
The problem is you're trying to position the div_form div vertically by giving it a margin-top of 36%. But a margin with a value in % is always relative to the width of the container, not the height. See the W3C.
The simplest solution is, because you know the height of the container (product2) is 600px, is to set the margin to 36% of 600px, or 216px.
body {
margin: 0;
}
.product {
height: 600px;
background-color: blue;
color: white;
float: left;
width: 50%;
margin: 0;
padding: 0;
display: inline-block;
}
.product2 {
height: 600px;
background-color: red;
color: white;
width: 50%;
float: left;
margin: 0;
padding: 0;
position: relative;
display: inline-block;
}
.product2 img {
position: absolute;
right: 0;
bottom: 0;
}
.div_form {
height: 35%;
width: 40%;
margin-top: 216px; /* This is what I changed */
margin-left: 41%;
background-color: blue;
}
<div class="main">
<div class="header">
<div class="product">
</div>
<div class="product2">
<img src="http://i.imgur.com/3UTs03w.png">
<div class="div_form">
</div>
</div>
</div>
</div>
Or if you really need a percentage of the parent's height, you would remove the margins and give the div position:absolute in the same way as the img. Then you can use left:41%; top:36%; but you will also need to experiment with the z-indexes a bit to get their stacking order right again.