I am trying to make the 4 colums with the class .column to be 100% of the page's height, but can't do it and I have no idea why.
body,
html {
margin: 0px;
padding: 0px;
font-family: Helvetica, sans-serif;
height: 100%;
width: 100%;
}
#header {
height: 40px;
width: 100%;
background-color: grey;
display: block;
}
#logo {
float: left;
font-size: 30px;
font-weight: bold;
padding-left: 15;
padding-top: 3px;
margin: 0 auto;
width: 10%;
}
#menu {
margin: 0 auto;
width: 50%;
height: 50%;
padding: 10px;
text-align: center;
}
#menu li {
display: inline;
border: 1px solid black;
border-radius: 15%;
background-color: red;
color: white;
}
#menu a {
text-decoration: none;
padding: 0 10px;
/* variable width */
}
a:hover {
background-color: black;
}
a:link,
a:visited,
a:active {
color: white;
}
.column {
top: 0;
left: 0;
margin: 0;
padding: 0;
width: 25%;
height: 100%;
float: left;
-webkit-box-shadow: inset 0px 0px 0px 1px black;
-moz-box-shadow: inset 0px 0px 0px 1px black;
box-shadow: inset 0px 0px 0px 1px black;
}
.clear-div {
clear: both;
}
<div id="header">
<div id="logo">
CodePlayer
</div>
<div id="menu">
<li>HTML
</li>
<li>CSS
</li>
<li>JAVASCRIPT
</li>
<li>OUTPUT
</li>
</div>
<div class="clear-div">
</div>
<div class="column" id="html">
This column needs to be 100% of the page's height
</div>
<div class="column" id="css">
This column needs to be 100% of the page's height
</div>
<div class="column" id="javascript">
This column needs to be 100% of the page's height
</div>
<div class="column" id="output">
This column needs to be 100% of the page's height
</div>
</div>
I am a beginner and every advice on good web developement practices will be very valuable to me so if there's something that I could've have done better please let me know.
Add the following CSS to each of your divs,for which you want the height to be 100% of page height:
height: 100vh;
example:
<div class="column" id="html" style="height: 100vh;">
This column needs to be 100% of the page's height
</div>
percentages are with respect to parents and parent of column is .header which have 40px height
thats why you have 40px height for you column
the problem you are solving is a bit difficult but you can do this
.column {
height: 100vh;
}
see if that helps you
read about vh here https://developer.mozilla.org/en/docs/Web/CSS/length
You can use CSS Flexbox. You also need to change your HTML structure a little.
Wrap all your 4 columns inside a parent div (in my case it is named as .column-holder) and give it a height using CSS calc() function. Like:
.column-holder {
display: flex;
height: calc(100vh - 45px); /* Total Viewport Height - Header Height */
}
Have a look at the working snippet below (use full screen mode):
body, html {
margin: 0px;
padding: 0px;
font-family: Helvetica, sans-serif;
height: 100%;
width: 100%;
}
#header {
height: 45px;
width: 100%;
background-color: grey;
display: block;
}
#logo {
float:left;
font-size: 30px;
font-weight: bold;
padding-left: 15;
padding-top: 3px;
margin: 0 auto;
width: 10%;
}
#menu {
margin: 0 auto;
width: 50%;
padding: 10px;
text-align:center;
}
#menu li {
display:inline;
border: 1px solid black;
border-radius: 15%;
background-color: red;
color: white;
}
#menu a {
text-decoration:none;
padding:0 10px; /* variable width */
}
a:hover {
background-color: black;
}
a:link, a:visited, a:active {
color: white;
}
.column {
top: 0;
left:0;
margin: 0;
padding: 0;
width: 25%;
height: 100%;
float: left;
-webkit-box-shadow:inset 0px 0px 0px 1px black;
-moz-box-shadow:inset 0px 0px 0px 1px black;
box-shadow:inset 0px 0px 0px 1px black;
}
.clear-div {
clear:both;
}
.column-holder {
display: flex;
height: calc(100vh - 45px);
}
<html>
<head>
<title>CodePlayer</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="header">
<div id="logo">
CodePlayer
</div>
<div id="menu">
<li>HTML</li>
<li>CSS</li>
<li>JAVASCRIPT</li>
<li>OUTPUT</li>
</div>
<div class="clear-div"></div>
</div>
<div class="column-holder">
<div class="column" id="html">
This column needs to be 100% of the page's height
</div>
<div class="column" id="css">
This column needs to be 100% of the page's height
</div>
<div class="column" id="javascript">
This column needs to be 100% of the page's height
</div>
<div class="column" id="output">
This column needs to be 100% of the page's height
</div>
</div>
</body>
</html>
Hope this helps!
Your HTML structure is Wrong . if you wish to make Column take full page Height you will need to put columns out of header which is set to height:40px;
body,
html {
margin: 0px;
padding: 0px;
font-family: Helvetica, sans-serif;
height: 100%;
width: 100%;
}
#header {
height: 40px;
width: 100%;
background-color: grey;
display: block;
}
#logo {
float: left;
font-size: 30px;
font-weight: bold;
padding-left: 15;
padding-top: 3px;
margin: 0 auto;
width: 10%;
}
#menu {
margin: 0 auto;
width: 50%;
height: 50%;
padding: 10px;
text-align: center;
}
#menu li {
display: inline;
border: 1px solid black;
border-radius: 15%;
background-color: red;
color: white;
}
#menu a {
text-decoration: none;
padding: 0 10px;
/* variable width */
}
a:hover {
background-color: black;
}
a:link,
a:visited,
a:active {
color: white;
}
.column {
top: 0;
left: 0;
margin: 0;
padding: 0;
width: 25%;
height: 100%;
float: left;
-webkit-box-shadow: inset 0px 0px 0px 1px black;
-moz-box-shadow: inset 0px 0px 0px 1px black;
box-shadow: inset 0px 0px 0px 1px black;
}
.clear-div {
clear: both;
}
<div id="header">
<div id="logo">
CodePlayer
</div>
<div id="menu">
<li>HTML
</li>
<li>CSS
</li>
<li>JAVASCRIPT
</li>
<li>OUTPUT
</li>
</div>
</div>
<div class="clear-div">
</div>
<div class="column" id="html">
This column needs to be 100% of the page's height
</div>
<div class="column" id="css">
This column needs to be 100% of the page's heigh
</div>
<div class="column" id="javascript">
This column needs to be 100% of the page's height
</div>
<div class="column" id="output">
This column needs to be 100% of the page's height
</div>
You can use HEIGHT calc Tricks to get the height for column class. For this calc you need to header height and close the header div before the clear div and after the menu close div. Then you just write the column height something like this height: calc(100% - 40px) . 40px is your header height.
Additional suggestions: remove the width and height you set for menu. So you will get better view on small screen. Also you don't need the column top:0 left:0; you can use this when you use position element. If you have any Question ask me in comment
body,
html {
margin: 0px;
padding: 0px;
font-family: Helvetica, sans-serif;
height: 100%;
width: 100%;
}
#header {
height: 40px;
width: 100%;
background-color: grey;
display: block;
}
#logo {
float: left;
font-size: 30px;
font-weight: bold;
padding-left: 15;
padding-top: 3px;
margin: 0 auto;
width: 10%;
}
#menu {
margin: 0 auto;
padding: 10px;
text-align: center;
}
#menu li {
display: inline;
border: 1px solid black;
border-radius: 15%;
background-color: red;
color: white;
}
#menu a {
text-decoration: none;
padding: 0 10px;
/* variable width */
}
a:hover {
background-color: black;
}
a:link,
a:visited,
a:active {
color: white;
}
.column {
margin: 0;
padding: 0;
width: 25%;
height: calc(100% - 40px);
float:left;
-webkit-box-shadow: inset 0px 0px 0px 1px black;
-moz-box-shadow: inset 0px 0px 0px 1px black;
box-shadow: inset 0px 0px 0px 1px black;
}
.clear-div {
clear: both;
}
<div id="header" class="clear-div">
<div id="logo">
CodePlayer
</div>
<div id="menu">
<li>HTML
</li>
<li>CSS
</li>
<li>JAVASCRIPT
</li>
<li>OUTPUT
</li>
</div>
</div>
<div class="clear-div"></div>
<div class="column" id="html">
This column needs to be 100% of the page's height
</div>
<div class="column" id="css">
This column needs to be 100% of the page's height
</div>
<div class="column" id="javascript">
This column needs to be 100% of the page's height
</div>
<div class="column" id="output">
This column needs to be 100% of the page's height
</div>
EDITED ANSWER AFTER COMMENT (html structure in question was wrong)
You would probably want to restrict the overall height to 100%, so use height: calc(100% - 40px); on .column as in the following snippet:
body,
html {
margin: 0px;
padding: 0px;
font-family: Helvetica, sans-serif;
height: 100%;
width: 100%;
}
#header {
height: 40px;
width: 100%;
height: 40px;
background-color: grey;
display: block;
}
#logo {
float: left;
font-size: 30px;
font-weight: bold;
padding-left: 15;
padding-top: 3px;
margin: 0 auto;
width: 10%;
}
#menu {
margin: 0 auto;
width: 50%;
padding: 10px;
text-align: center;
}
#menu li {
display: inline;
border: 1px solid black;
border-radius: 15%;
background-color: red;
color: white;
}
#menu a {
text-decoration: none;
padding: 0 10px;
/* variable width */
}
a:hover {
background-color: black;
}
a:link,
a:visited,
a:active {
color: white;
}
.column {
margin: 0;
padding: 0;
width: 25%;
height: calc(100% - 40px);
float: left;
-webkit-box-shadow: inset 0px 0px 0px 1px black;
-moz-box-shadow: inset 0px 0px 0px 1px black;
box-shadow: inset 0px 0px 0px 1px black;
}
.clear-div {
clear: both;
}
<div id="header">
<div id="logo">
CodePlayer
</div>
<div id="menu">
<li>HTML
</li>
<li>CSS
</li>
<li>JAVASCRIPT
</li>
<li>OUTPUT
</li>
</div>
<div class="clear-div">
</div>
</div>
<div class="column" id="html">
This column needs to be 100% of the page's height
</div>
<div class="column" id="css">
This column needs to be 100% of the page's height
</div>
<div class="column" id="javascript">
This column needs to be 100% of the page's height
</div>
<div class="column" id="output">
This column needs to be 100% of the page's height
</div>
You can use a flex-layout and achieve this with min-height property. For more info on flex layout read this ->https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.fill-height-or-more {
min-height: 100%;
display: flex;
flex-direction: row;
> div {
border-style: solid;
display: flex;
flex-direction: column;
}
}
http://codepen.io/anon/pen/OboJdP
Related
I am trying to display a particular div content with particular menu but my code is not showing like that. For the reference attached screenshot.(only with CSS). I don't want to use JS. When I am hovering on particular menu then all div content are displaying. And design is not looking good.
Here is my code:
<style>
.menu {
height: 24%;
width: 600px;
margin: auto;
border: 1px solid RGBA(0, 0, 0, 0.4);
font-family: calibri, monospace;
}
div.menu .button {
padding:5px 0px 5px 0px;
display:block;
cursor: pointer;
text-align:center;
width: 150px;
height: 50%;
background: #333;
border: 1px solid white;
color: #e7e7e7;
font-weight: 600;
}
div.menu .button:hover {
padding:5px 0px 5px 0px;
display:block;
cursor: pointer;
text-align:center;
width: 150px;
height: 50%;
background: #ff0000;
border: 1px solid white;
color: #e7e7e7;
font-weight: 600;
}
.menu .content {
position:absolute;
display:none;
width: 440px;
height: 23%;
margin-left: 155px;
border: 1px solid #e7e7e7;
}
.menu .content:hover {
left:150px;
top:0px;
color:black;
display:block;
}
.menu .button:hover:focus:active ~ div.content {
display: block;
}
html {
width: 100%;
height: 100%;
display: flex;
}
body {
display: flex;
margin: auto;
}
</style>
<body>
<div class="menu">
<div tabindex="0" class="button">Home</div>
<div class="content">
“A house is made of bricks and beams. A home is made of hopes and dreams. Home is where our story begins…”
</div>
<div tabindex="0" class="button">Contact</div>
<div class="content">
“Contacts added but not one is worthy enough to remain as their priority.”
</div>
<div tabindex="0" class="button">About</div>
<div class="content">
“To be yourself in a world that is constantly trying to make you something else is the greatest accomplishment.”
</div>
</div>
</body>
</html>
This is my image link.
Please try this,
.menu {
height: 24%;
width: 600px;
margin: auto;
border: 1px solid RGBA(0, 0, 0, 0.4);
font-family: calibri, monospace;
position:relative;
}
div.menu .button {
padding:5px 0px 5px 0px;
display:block;
cursor: pointer;
text-align:center;
width: 150px;
height: 50%;
background: #333;
border: 1px solid white;
color: #e7e7e7;
font-weight: 600;
}
div.menu .button:hover {
padding:5px 0px 5px 0px;
display:block;
cursor: pointer;
text-align:center;
width: 150px;
height: 50%;
background: #ff0000;
border: 1px solid white;
color: #e7e7e7;
font-weight: 600;
}
.menu .content {
position:absolute;
display:none;
width: 440px;
opacity:0;
margin-left: 155px;
border: 1px solid #e7e7e7;
}
.menu .button:hover+.content {
display: inline-block;
opacity:1;
transition:display 3s;
top:0;
}
html {
width: 100%;
height: 100%;
display: flex;
}
body {
display: flex;
margin: auto;
}
<body>
<div class="menu">
<div tabindex="0" class="button">Home</div>
<div class="content">
“A house is made of bricks and beams. A home is made of hopes and dreams. Home is where our story begins…”
</div>
<div tabindex="0" class="button">Contact</div>
<div class="content">
“Contacts added but not one is worthy enough to remain as their priority.”
</div>
<div tabindex="0" class="button">About</div>
<div class="content">
“To be yourself in a world that is constantly trying to make you something else is the greatest accomplishment.”
</div>
</div>
</body>
I have been trying for hours with different methods to get my navigation buttons to be mobile-responsive and collapse in a specified vertical order. I want the nav buttons to collapse in a vertical column below the two logos, once the screen size is shrunken (to around 500px). How do I fix my code to achieve this?
.container-fluid {
border: 1px solid #000000;
max-width: 1600px;
overflow: hidden;
}
.wrap {
/*background-color: yellow;*/
/*overflow: hidden;*/
}
.Logos {
width: 312px;
display: inline-block;
/*background-color: blue;*/
}
/*
.Logos img{
max-width: 300px;
height: auto;
}
*/
.nav.wrap.one {
display: inline-block;
/*background-color: green;*/
float: right;
margin-top: 25px;
}
ul.navigation {
font: bold 11px "Helvetica Neue", Helvetica, Arial, sans-serif;
/*text-align center;*/
/*border: 1px solid green;*/
/*overflow: hidden;*/
}
.navigation li {
display: inline-block;
}
.navigation a {
background: #395870;
background: linear-gradient(#49708f, #293f50);
border-right: 1px solid rgba(0, 0, 0, .3);
color: #fff;
padding: 12px 20px;
text-decoration: none;
}
.navigation a:hover {
background: #314b0;
box-shadow: inset 0 0 10px 1px rgba(0, 0, 0, .3);
}
.navigation li:first-child a {
border-radius: 4px 0 0 4px;
}
.navigation li:last-child a {
border-right: 0;
border-radius: 0 4px 4px 0;
}
.row.two {
background-image: url(https://s1.postimg.org/5gvbly4hin/East_Hyde_Park_Chicago_aerial_0470.jpg);
background-position: absolute;
background-size: cover;
background-repeat: no-repeat;
max-width: 100%;
height: 550px;
margin: auto;
}
.floater.box {
background-color: rgba(255, 255, 255, .40);
border-radius: 10px;
/*opacity: .45;*/
max-width: 75%;
height: 200px;
position: absolute;
top: 50%;
left: 0;
right: 0;
margin: auto;
overflow: hidden;
}
.form-search {
margin: 0 auto;
text-align: center;
font: bold 13px sans-serif;
max-width: 325px;
position: relative;
}
.form-search input {
width: 230px;
box-sizing: border-box;
border-bottom-left-radius: 2px;
border-top-left-radius: 2px;
background-color: #ffffff;
box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.08);
padding: 14px 15px 14px 40px;
border: 1px solid #b6c3cd;
;
border-right: 0;
color: #4E565C;
outline: none;
margin-top: 70px;
-webkit-appearance: none;
}
.form-search button {
border-bottom-right-radius: 2px;
border-top-right-radius: 2px;
background-color: #6caee0;
box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.08);
color: #ffffff;
padding: 15px 22px;
margin-left: -4px;
cursor: pointer;
border: none;
outline: none;
}
.form-search i {
position: absolute;
top: 15px;
left: 20px;
font-size: 16px;
color: #80A3BD;
}
/* Placeholder color */
.form-search input::-webkit-input-placeholder {
color: #879097;
}
.form-search input::-moz-placeholder {
color: #879097;
opacity: 1;
}
.form-search input:-ms-input-placeholder {
color: #879097;
}
.nav.wrap.two {
display: inline-block;
text-align: center;
width: 100%;
margin-top: 10px;
}
<div class="container-fluid">
<!-- Top Box -->
<div class="wrap">
<div class="Logos">
<img src="https://s26.postimg.org/iqkxecqnd/Coldwell_Banker-_Logo_RS1.jpg" width="150" height="82" class="img-responsive" />
<img src="https://s26.postimg.org/iqkxecqnd/Coldwell_Banker-_Logo_RS1.jpg" width="150" height="82" class="img-responsive" /> </div>
<div class="nav wrap one">
<!--navigation buttons-->
<ul class="navigation">
<li id="NAV-ONE">LOG IN</li>
<li id="NAV-TWO">BUY A HOME</li>
<li id="NAV-THREE">SELL A HOME</li>
<li id="NAV-FOUR">CONTACT US</li>
</ul>
</div>
</div>
<!-- Middle Box -->
<div class="row two">
<div>
<div class="floater box">
<form class="form-search" method="get" action="#">
<input type="search" name="search" placeholder="I am looking for..">
<button type="submit">Search</button>
<i class="fa fa-search"></i>
</form>
</div>
</div>
</div>
</div>
<!-- Bottom Box -->
<div class="row three">
<div class="nav wrap two">
<!--navigation buttons-->
<ul class="navigation">
<li id="NAV-A">MY LISTINGS</li>
<li id="NAV-B">COMMUNITIES SERVED</li>
<li id="NAV-C">PROPERTIES</li>
</ul>
</div>
</div>
</div>
Here is a link to my CodePen: https://codepen.io/IDCoder/full/rGWeEE/
CSS is all about be natural order, natural position, natural styles... what I means is that your code isn't being natural, you can see here:
.navigation li {
display: inline-block;
}
.navigation a {
padding: 12px 20px;
}
I want to focus me in those properties because here we are saying:
You <a> element that are inside this man -> <li> (<li id="NAV-ONE">LOG IN</li>), yes you! You will be bigger even if you're inside him!
Well, in real life, we can't put bigger things into smaller spaces. What happens in real life and CSS is: smaller things into bigger things.
So if we make this change:
.navigation li {
display: inline-block;
padding: 12px 20px;
}
.navigation a {
/* We changed who is bigger than who */
}
It takes a natural order (because now the spaces where .navigation a will be is bigger than him). The final code is something like this (this will wrap when you use phone):
.navigation li {
display: inline-block;
padding: 12px 20px;
background: linear-gradient(#49708f, #293f50);
background: #395870;
border-right: 1px solid rgba(0, 0, 0, .3);
}
.navigation a {
color: #fff;
text-decoration: none;
}
More
I was playing and I found this cool way to wrap when screen is small, I think it's cool:
#media all and (max-width: 500px){
ul.navigation{
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
}
}
Also, remember that when you want to make responsive design you need meta:viewport into your html's head:
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
I have following html for my site:
Edit: https://jsfiddle.net/3v66fv3u/1/ for the static site
and my approach of making the site responsive: https://jsfiddle.net/wba321bm/
<!DOCTYPE html>
<html>
<head>
<link href="custom.css" rel="stylesheet">
</head>
<body>
<h1 class="title">Headline</h1>
<div class="wrapper">
<div class="left">
<div class="top">
<img id="img_1" src="img_1.png">
</div>
<div class="bottom">
<img id="img_3" src="img_3.png">
</div>
</div>
<div class="middle">
<div class="about-text">
<h3>small headline</h3>
<p>actually a lot of text</p>
</div>
</div>
<div class="right">
<div class="top">
<img id="img_2" src="img_2.png">
</div>
<div class="bottom">
<img id="img_4" src="img_4.png">
</div>
</div>
</div>
<img class="banner" src="banner.png"/>
</body>
</html>
And this is my current css file:
html {
font-family: "Verdana", Geneva, sans-serif;
color: white;
}
body {
margin: auto;
background-color: black;
width: 1150px;
}
hr {
border-top: 1px dotted black;
}
.title {
text-align: center;
padding-bottom: 20px;
}
.wrapper {
margin: auto;
}
.left {
float: left;
}
.middle {
height: 597px;
width: 550px;
float: left;
border-top: 1px solid white;
border-bottom: 1px solid white;
box-shadow: inset 0px 0px 20px 0px rgba(0,0,0,1);
margin-top: -4px;
}
.about-text {
margin-left: 25px;
margin-right: 25px;
}
.right {
float: left;
}
.gallery {
padding-top: 100px;
width: 100%;
text-align: center;
}
img {
height: 300px;
transition: 0.5s ease;
backface-visibility: hidden;
/* inline-block fügt standardmäßig 4px Padding hinzu
das muss nun wieder subtrahiert werden. */
margin-top: -4px;
}
img:hover {
opacity: 0.5;
}
#img_1 {
border-top-left-radius: 30px;
}
#img_2 {
border-top-right-radius: 30px;
}
#img_3 {
border-bottom-left-radius: 30px;
}
#img_4 {
border-bottom-right-radius: 30px;
}
/* 827 x 178 */
.banner {
width: 410px;
height: 90px;
position: absolute;
right: 0px;
bottom: 0px;
}
The website currently looks like this (with static layout):
Now I want to go away from the fixed layout and want to make the website responsive. However, when I give the fields a relative width the whole layout gets messed up...
This is the css I tried to use to achieve the responsive layout:
html, body {
font-family: "Verdana", Geneva, sans-serif;
color: white;
background-color: black;
height: 100%;
}
hr {
border-top: 1px dotted black;
}
.title {
text-align: center;
padding-bottom: 20px;
}
.wrapper {
border: 1px solid white;
margin: auto;
width: 80%;
}
.left {
float: left;
}
.middle {
width: 40%;
height: auto;
float: left;
border-top: 1px solid white;
border-bottom: 1px solid white;
box-shadow: inset 0px 0px 20px 0px rgba(0,0,0,1);
margin-top: -4px;
}
.about-text {
margin-left: 25px;
margin-right: 25px;
}
.right {
float: left;
}
.gallery {
padding-top: 100px;
width: 100%;
text-align: center;
}
img {
width: 40%;
height: auto;
transition: 0.5s ease;
backface-visibility: hidden;
/* inline-block fügt standardmäßig 4px Padding hinzu
das muss nun wieder subtrahiert werden. */
margin-top: -4px;
}
img:hover {
opacity: 0.5;
}
#img_1 {
border-top-left-radius: 30px;
}
#img_2 {
border-top-right-radius: 30px;
}
#img_3 {
border-bottom-left-radius: 30px;
}
#img_4 {
border-bottom-right-radius: 30px;
}
/* 827 x 178 */
.banner {
width: 20%;
height: 10%;
position: absolute;
right: 0px;
bottom: 0px;
}
It's a matter of WHICH elements get the percentage value. In my adaptation of your fiddle, I assigned width: 30% to .left and right (which are the containers for the images) and made the image width 100% to span the whole width of their containers.
See here: https://jsfiddle.net/35n4dxqn/1/
well, when you give a or a division relative attribute it will be placed relative or according to the previous div i.e. it will not be independent from other divisions.
the solution if you want to make it responsive one forward and efficient way is to use Grid System (Bootstrap class).
Im trying to make the height of the "mainbar" div stretch the entire page without there being a need for the vertical scrollbar while also making sure I can see the top of the div. when I remove the "margin-top" value from the "mainbar" css it removes the scrollbar but cuts off the top 50px. How would I move the div 50px lower (so I can see all of the content inside of it) without extending the page and adding the scrollbar back?
Here is the html:
<!DOCTYPE html>
<html>
<head>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="navbar">
<ul>
<li class="nav">Home</li>
<li class="nav">About</li>
<li class="nav">Upload</li>
</ul>
</div>
<div class="mainbar">
<h1>hello</h1>
<h2>whats up</h2>
</div>
</body>
</html>
Here is the css
* {
box-sizing: border-box;
}
body {
background-color: #450068;
background-color: rgb(69, 0, 104);
margin: 0px;
padding: 0px;
}
h1, h2 {
text-align: center;
color: white;
}
li {
display: inline;
text-align: right;
list-style: none;
padding: 20px;
}
.navbar {
background-color: #8729a5;
border-bottom: .5px solid gray;
width: 100%;
height: 50px;
position: fixed;
top: 0;
padding: 0px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}
.mainbar {
background-color: #8729a5;
background-color: black;
height: 100vh;
width: 1100px;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
border: .5px solid gray;
border-radius: 15px;
overflow: scroll;
overflow-x: hidden;
}
* {
box-sizing: border-box;
}
body {
background-color: #450068;
background-color: rgb(69, 0, 104);
margin: 0px;
padding: 0px;
}
h1, h2 {
text-align: center;
color: white;
}
li {
display: inline;
text-align: right;
list-style: none;
padding: 20px;
}
.navbar {
background-color: #8729a5;
border-bottom: .5px solid gray;
width: 100%;
height: 45px;
position: fixed;
top: 0;
padding: 0px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}
body > .mainbar {
background-color: #8729a5;
background-color: black;
height: 90vh;
width: 1100px;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
border: .5px solid gray;
border-radius: 15px;
overflow: scroll;
overflow-x: hidden;
overflow-y: auto
}
new slimScroll(Element);
<!DOCTYPEhtml>
<head>
<link href="style.css" type="text/css" rel="stylesheet">
<script src="slimscroll.js"></script>
</head>
<body>
<div class="navbar">
<ul>
<li class="nav">Home</li>
<li class="nav">About</li>
<li class="nav">Upload</li>
</ul>
</div>
<div class="mainbar">
<h1>hello</h1>
<h2>whats up</h2>
<h2>whats up</h2>
</div>
</body>
Looked at : https://github.com/kamlekar/slim-scroll
and Hide scroll bar, but still being able to scroll
Not sure if that is what you wanted but the plugin removed the scrollbar on the right of the page >>
So the problem, it seems, is that you have a fixed height for navbar, and want mainbar to take the remainder of the screen.
With mainbar having a height of 100vh it will be as tall as the viewport; so anything you do to move it down 50px will cause the scrollbar to appear. This is the headache of mixing pixel sizes and relative (%, vh/vw) sizes.
If your target browser(s) support modern CSS, a flexbox is the solution to this problem.
If not, the "old way" is to use JavaScript to adjust the size of your mainbar div after the initial CSS-based layout is calculated; a pure CSS solution didn't exist before flexbox.
Try modifing your CSS maybe it will solve the problem.
margin-top to padding-top for the .mainbar.
* {
box-sizing: border-box;
}
body {
background-color: #450068;
background-color: rgb(69, 0, 104);
margin: 0px;
padding: 0px;
}
h1, h2 {
text-align: center;
color: white;
}
li {
display: inline;
text-align: right;
list-style: none;
padding: 20px;
}
.navbar {
background-color: #8729a5;
border-bottom: .5px solid gray;
width: 100%;
height: 50px;
position: fixed;
top: 0;
padding: 0px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}
.mainbar {
background-color: #8729a5;
background-color: black;
height: 100vh;
width: 1100px;
margin-left: auto;
margin-right: auto;
padding-top: 50px; /* here */
border: .5px solid gray;
border-radius: 15px;
overflow: scroll;
overflow-x: hidden;
}
I'm trying to achieve the effect of having a centered image that flows past its containing div's borders, but without using position: absolute, because it hides the header buttons behind it. Is there any clean way to do this without just using old-school absolute position with all the elements (which would be a real pain if I try to do any kind of responsiveness at all)?
Relevant code:
.container {
max-width: 60rem;
margin: 0 auto;
padding: 3rem 1.5rem;
border-right: 1px solid black;
border-left: 1px solid black;
background-color: white;
}
.container.no-border {
border: none;
background-color: transparent;
position: relative;
}
#logo {
display: block;
position: absolute;
top: 0;
left: 50%;
width: 150px;
margin-left: -75px;
}
JSFiddle: http://jsfiddle.net/bH35r/
P.S. I'm willing to utilize pretty much anything as long as it does the job cleanly.
You can use display:inline-block;
FIDDLE
HTML :
<div class="section header">
<div class="container no-border">
<a class="header" href="#">About</a>
<a class="header" href="#">News</a>
<a class="header" href="#">Teams</a>
<div class="logo_wrap">
<img id="logo" src="http://equineclub.zachschristmaslist.info/images/pennant.png"/>
</div>
<a class="header" href="#">Apparel</a>
<a class="header" href="#">Sponsorship</a>
<a class="header" href="#">Contact</a>
</div>
</div>
CSS :
body {
margin: 0;
font-family: Helvetica;
font-size: 100%;
background-color: #191A18;
}
.section {
margin: 0;
padding: 0;
clear: both;
}
.section.header {
background-image: url('../images/background.png');
background-position: 50% 90%;
border-bottom: 1px solid #A8A8A8;
box-shadow: 0 1rem 1rem #000;
text-align: center;
}
.container {
max-width: 60rem;
margin: 0 auto;
padding: 0 1.5rem;
border-right: 1px solid black;
border-left: 1px solid black;
background-color: white;
}
.container.no-border {
border: none;
background-color: transparent;
position: relative;
}
.container.logo {
background-image: url('../images/main-image.jpg');
background-position: 50% 20%;
min-height: 20rem;
}
a.header {
color: white;
display:inline-block;
text-decoration: none;
padding: 3rem 1.5rem;
margin: 0 0.5rem;
background-color: rgba(255,255,255,0.1);
}
#logo {
width: 150px;
}
.logo_wrap{
display: inline-block;
height: 5.5rem;
vertical-align:top;
overflow:visible;
}
Use a CSS background image.
.container {
max-width: 60rem;
margin: 0 auto;
padding: 3rem 1.5rem;
border-right: 1px solid black;
border-left: 1px solid black;
background-color: white;
background-image:url(....);
background-repeat-no-repeat;
background-position: 0px 0px; <--- adjust accordingly.
}
In general, images that are part of the UI (not the content) should be CSS backgrounds, not inline images anyway.