I have a couple of issues with this code:
1. The fourth div is being seemingly squished. Its height is smaller than the other divs.
2. The height of the container div doesn't change to 50%. I used wv, but I'm not sure why % doesn't work.
https://codepen.io/anon/pen/drERNr
.container {
background: blue;
width: 75%;
height: 50vw;
}
.box {
width: 20%;
background: #333;
color: white;
font-size: 25px;
font-family: 'helvetica';
border: 1px solid blue;
margin: 2px;
float: left;
text-align: center;
}
#box4 {
width: 20%;
background: #333;
color: white;
font-size: 25px;
font-family: 'helvetica';
border: 1px solid blue;
margin-top: 2px;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="index.css">
<title>prac</title>
</head>
<body>
<div class="container">
<div id="one" class="box">
<p>One</p>
</div>
<div id="two" class="box">
<p>Two</p>
</div>
<div id="three" class="box">
<p>Three</p>
</div>
<div id="box4">
<p>four</p>
</div>
</div>
</body>
</html>
Your fourth element is being squashed because you float the first three elements to the left, but don't 'reset' the float. This can be achieved with a clearfix:
#box4:before {
content: "";
display: table;
clear: both;
}
.container {
background: blue;
width: 75%;
height: 50vw;
}
.box {
width: 20%;
background: #333;
color: white;
font-size: 25px;
font-family: 'helvetica';
border: 1px solid blue;
margin: 2px;
float: left;
text-align: center;
}
#box4:before {
content: "";
display: table;
clear: both;
}
#box4 {
width: 20%;
background: #333;
color: white;
font-size: 25px;
font-family: 'helvetica';
border: 1px solid blue;
margin-top: 2px;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="index.css">
<title>prac</title>
</head>
<body>
<div class="container">
<div id="one" class="box">
<p>One</p>
</div>
<div id="two" class="box">
<p>Two</p>
</div>
<div id="three" class="box">
<p>Three</p>
</div>
<div id="box4">
<p>four</p>
</div>
</div>
</body>
</html>
As for why you can't use % on the .container, it's because percentage-based units inherit their value from the immediate parent (and chain upwards), yet <body> has no fixed height defined. You need a calculated height on the parent in order for the child to be able to calculate its own height as a percentage.
Related
I'm not able to figure out how to "hide" the main body content behind my header on this site. It's still a work-in-progress. The header appears to be transparent, even when I set it to z-index:10 and position:fixed. Any help would be greatly appreciated.
https://gbears96.github.io/bigStart/
Here's the code:
html {
font-size: 16px;
font-family: "Roboto", sans-serif;
background-color: #fffcf6;
margin: 0;
}
header {
display: flex;
align-items: center;
/*margin:0 auto;*/
position: fixed;
width: 100%;
z-index: 100;
top: 0px;
border: 2px pink solid;
}
.header-content {
display: flex;
align-items: center;
border-bottom: 0.5px solid #002F6C;
width: 100%;
}
#logo {
max-height: 5rem;
}
#spacer {
max-height: 10rem;
flex: 1;
}
header nav {
display: block;
font-size: 0.75rem;
}
header nav ul {
display: flex;
list-style: none;
}
header nav li {
padding-right: 3rem;
}
header nav li a {
text-decoration: none;
color: #002F6C;
text-transform: uppercase;
}
.main {
position: relative;
top: 100px;
}
.mission-section {
/* background-image: url("../images/downtown.jpeg"); */
display: flex;
justify-content: center;
height: 20rem;
border-bottom: 0.5px solid #002F6C;
width: 100%;
align-items: center;
border: 2px pink solid;
}
.mission-section h1 {
font-family: "Times New Roman", serif;
font-weight: lighter;
font-size: 3em;
}
.mission-content {
align-items: center;
}
.features-section {
display: flex;
justify-content: space-between;
padding: 0rem;
width: 100%;
margin: auto;
margin-top: 1rem;
margin-bottom: 1rem;
border-left: 0.5px solid #002F6C;
border: 2px pink solid;
}
.features-section .feature {
display: flex;
border-right: 0.5px solid #002F6C;
/* padding: 0% 1%; */
}
.feature .center {
text-align: center;
width: 100%;
}
.feature h2 {
font-family: "Times New Roman", serif;
font-weight: lighter;
font-size: 2em;
}
.feature h3 {
font-family: "Times New Roman", serif;
font-weight: lighter;
font-size: 1.5em;
}
.feature .image-container {
width: 100%;
margin: 0 auto;
overflow: hidden;
}
.image-container img {
display: block;
width: 95%;
height: 95%;
margin: 0 auto;
}
.feature .content {}
.team-section {
display: flex;
width: 100%;
border: 2px pink solid;
}
.images-container {
display: flex;
max-width: 100%;
padding: 0 1%;
border: 1px solid pink;
}
<DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BigStart Company Homepage</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<!-- Header -->
<header>
<div class="header-content">
<!-- Content: logo + nav bar on right -->
<img src="./images/bigstart2.png" id="logo">
<div id="spacer"></div>
<nav>
<ul>
<li>
About
</li>
<li>
Products
</li>
<li>
Team
</li>
</ul>
</nav>
</div>
</header>
<div class="main">
<!-- Mission Statement -->
<div class="mission-section">
<div class="mission-content">
<h1 class="mission-motto">We take your company from idea to reality.</h1>
</div>
</div>
<!-- TEMP
<div class="temp">
<h1> hi </h1>
</div> -->
<!-- Images of Features -->
<div class="features-section">
<div class="feature">
<div class="center">
<div class="image-container">
<img src="./images/startup-square.jpg">
</div>
<div class="content">
<h2>The concept.</h2>
<h3>We take that idea...</h3>
</div>
</div>
</div>
<div class="feature">
<div class="center">
<div class="image-container">
<img src="./images/metaverse.jpeg">
</div>
<div class="content">
<h2>The future.</h2>
<h3>... and turn it into the next big thing.</h3>
</div>
</div>
</div>
</div>
<!-- Team -->
<div class="team-section">
<div class="team-center">
<h1> hi </h1>
</div>
<div class="images-container">
<div class="image-container">
<h2>1</h2>
<h2>2</h2>
<h2>3</h2>
<h2>4</h2>
</div>
</div>
</div>
</main>
</body>
</html>
Default value of background-color is transparent, it just wasn't noticeable until it overlaps with other elements, you have to give it another value if you want it not to be (i.e. add background-color: #fff on your header). See the snippet below:
html {
font-size: 16px;
font-family: "Roboto", sans-serif;
background-color: #fffcf6;
margin: 0;
}
header {
display: flex;
align-items: center;
/*margin:0 auto;*/
position: fixed;
width: 100%;
z-index: 100;
top: 0px;
border: 2px pink solid;
background: #fff;
}
.header-content {
display: flex;
align-items: center;
border-bottom: 0.5px solid #002F6C;
width: 100%;
}
#logo {
max-height: 5rem;
}
#spacer {
max-height: 10rem;
flex: 1;
}
header nav {
display: block;
font-size: 0.75rem;
}
header nav ul {
display: flex;
list-style: none;
}
header nav li {
padding-right: 3rem;
}
header nav li a {
text-decoration: none;
color: #002F6C;
text-transform: uppercase;
}
.main {
position: relative;
top: 100px;
}
.mission-section {
/* background-image: url("../images/downtown.jpeg"); */
display: flex;
justify-content: center;
height: 20rem;
border-bottom: 0.5px solid #002F6C;
width: 100%;
align-items: center;
border: 2px pink solid;
}
.mission-section h1 {
font-family: "Times New Roman", serif;
font-weight: lighter;
font-size: 3em;
}
.mission-content {
align-items: center;
}
.features-section {
display: flex;
justify-content: space-between;
padding: 0rem;
width: 100%;
margin: auto;
margin-top: 1rem;
margin-bottom: 1rem;
border-left: 0.5px solid #002F6C;
border: 2px pink solid;
}
.features-section .feature {
display: flex;
border-right: 0.5px solid #002F6C;
/* padding: 0% 1%; */
}
.feature .center {
text-align: center;
width: 100%;
}
.feature h2 {
font-family: "Times New Roman", serif;
font-weight: lighter;
font-size: 2em;
}
.feature h3 {
font-family: "Times New Roman", serif;
font-weight: lighter;
font-size: 1.5em;
}
.feature .image-container {
width: 100%;
margin: 0 auto;
overflow: hidden;
}
.image-container img {
display: block;
width: 95%;
height: 95%;
margin: 0 auto;
}
.feature .content {}
.team-section {
display: flex;
width: 100%;
border: 2px pink solid;
}
.images-container {
display: flex;
max-width: 100%;
padding: 0 1%;
border: 1px solid pink;
}
<DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BigStart Company Homepage</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<!-- Header -->
<header>
<div class="header-content">
<!-- Content: logo + nav bar on right -->
<img src="./images/bigstart2.png" id="logo">
<div id="spacer"></div>
<nav>
<ul>
<li>
About
</li>
<li>
Products
</li>
<li>
Team
</li>
</ul>
</nav>
</div>
</header>
<div class="main">
<!-- Mission Statement -->
<div class="mission-section">
<div class="mission-content">
<h1 class="mission-motto">We take your company from idea to reality.</h1>
</div>
</div>
<!-- TEMP
<div class="temp">
<h1> hi </h1>
</div> -->
<!-- Images of Features -->
<div class="features-section">
<div class="feature">
<div class="center">
<div class="image-container">
<img src="./images/startup-square.jpg">
</div>
<div class="content">
<h2>The concept.</h2>
<h3>We take that idea...</h3>
</div>
</div>
</div>
<div class="feature">
<div class="center">
<div class="image-container">
<img src="./images/metaverse.jpeg">
</div>
<div class="content">
<h2>The future.</h2>
<h3>... and turn it into the next big thing.</h3>
</div>
</div>
</div>
</div>
<!-- Team -->
<div class="team-section">
<div class="team-center">
<h1> hi </h1>
</div>
<div class="images-container">
<div class="image-container">
<h2>1</h2>
<h2>2</h2>
<h2>3</h2>
<h2>4</h2>
</div>
</div>
</div>
</main>
</body>
</html>
Reference from w3schools.
I think it is very important to add to #Yong's answer that background-color does not inherit. Therefore the default background-color value for ALL elements is transparent regardless of parent background-color.
So setting your HTML element background-color to
html {
:
background-color: #fffcf6;
}
does not then set the body and all other enclosing elements to this color, they will all remain transparent.
The way to solve your problem is to change the value of the header background-color; as #Yong said it is defaulting to transparent when you run your code. Giving it any other value will solve it. E.g to have it same color as the rest of the page:
header {
display: flex;
align-items: center;
/*margin:0 auto;*/
position: fixed;
width: 100%;
z-index: 100;
top: 0px;
border: 2px pink solid;
background: #fffcf6;
}
Here are some useful references from developer.mozilla and w3schools about the background-color property.
This question already has answers here:
How can I position my div at the bottom of its container?
(25 answers)
Closed 3 years ago.
that creates a centered list of buttons. Unfortunately at the top of the page.
<html>
<head>
<style>
#test {
display: table;
margin: 0 auto;
bottom: 5em;
}
.mybtn .button {
background-color: orange;
border: 1px solid green;
width: 120px;
color: white;
font-size: 14px;
padding: 10px;
text-align: center;
text-decoration: none;
display: block;
}
</style>
</head>
<body>
<div id="test">
<div class="mybtn">
<button class="button">Result</button>
<button class="button">Result</button>
<button class="button">Result</button>
<button class="button">Result</button>
</div>
</div>
</body>
</html>
any reason why bottom: 5em does not work ?
as a beginner in css I would appreciate any hint on why I need also to set .mybtn make the css work !
Just place position:relative
<html>
<head>
<style>
#test {
position: relative;
display: table;
margin: 0 auto;
bottom: 5em;
}
.mybtn .button {
background-color: orange;
border: 1px solid green;
width: 120px;
color: white;
font-size: 14px;
padding: 10px;
text-align: center;
text-decoration: none;
display: block;
}
</style>
</head>
<body>
<div id="test">
<div class="mybtn">
<button class="button">Result</button>
<button class="button">Result</button>
<button class="button">Result</button>
<button class="button">Result</button>
</div>
</div>
</body>
</html>
As you can see, my header and footers do not span the entire page, unlike my row in the center....that does(indicated by the red) my style sheet if needed is this.
html,body{
height:100%;
width:100%;
margin: 0px;
padding: 0px;
}
#blogheader{
background-color: green;
height: 57%;
margin: 0px;
}
Any help is greatly appreciated!, I have been stuck on this for about an hour now. I have no clue why this is happening. I am using bootstrap. But the only row/col combo I have is in the center where the three icons are.
You mention you are using Bootstrap.
I can reproduce the error which seems to be be because the 'blogheader in not in a .row wrapper.
Codepen Demo
Without .row view # fullscreen
html,
body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}
.container-fluid {
height: 100%;
}
#blogheader {
background-color: green;
height: 50px;
margin: 0px;
}
.col-sm-4 {
height: 50px;
background: pink;
border: 1px solid grey;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div id="blogheader"></div>
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
</div>
</div>
With .row view # fullscreen
html,
body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}
.container-fluid {
height: 100%;
}
#blogheader {
background-color: green;
height: 50px;
margin: 0px;
}
.col-sm-4 {
height: 50px;
background: pink;
border:1px solid grey;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div id="blogheader"></div>
</div>
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
</div>
</div>
Try:
html, body {
height:100px;
width:100vw;
margin: 0px;
padding: 0px;
}
Simple code.jsfiddle
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/normalize.css"/>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div class="header">
<div class="nav">
<div class="navTitle">1</div>
<div class="subNav subNav1">test1</div>
<div class="subNav subNav2">test2</div>
<div class="subNav subNav3">test3</div>
<div class="subNav subNav4">test4</div>
</div>
</div>
<div class="container">
</div>
<div class="left">
<div class="leftEles leftEle1"></div>
<div class="leftEles leftEle2"></div>
<div class="leftEles leftEle3"></div>
<div class="leftEles leftEle4"></div>
<div class="leftEles leftEle5"></div>
</div>
<div class="footer">
</div>
<script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/script.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
And CSS.
body{
overflow: hidden;
font-size: 20px;
padding: 0;
margin: 0;
}
.header{
width: 100%;
height: 50px;
background-color: #0092C7;
position: relative;
}
.left{
position: absolute;
left: 0;
top: 50px;
width: 200px;
bottom: 0;
border-right: 1px solid #C0C0C0;
}
.container{
position: absolute;
left: 200px;
top: 50px;
bottom: 0;
right: 0;
}
.leftEles{
width: 100%;
height: 50px;
background-color: #F4F3DE;
border-bottom: 1px solid #C0C0C0;
cursor: pointer;
}
.leftEles:hover{
opacity: 0.7;
}
.nav{
width: 200px;
height: 250px;
line-height: 50px;
float: right;
text-align: center;
}
.navTitle{
border-left: 1px solid #C0C0C0;
}
.subNav{
border-bottom: 1px solid #C0C0C0;
background-color: rgba(0,146,199,0.7);
cursor: pointer;
}
.subNav:hover{
color: #FFFFFF;
}
I'm curious why the hover and cursor effect on .subNav won't work!
Simple and silly question. Help me, many thx!
Your effect was not working because of .container is overlapping .header
Use z-index css on .header:
z-index: 2;
Complete css of .header
.header{
width: 100%;
height: 50px;
z-index:2;
background-color: #0092C7;
position: relative;
}
UPDATED DEMO
.container is positioned over navigation, has higher natural z-index (in code is after navigation).
To place navigation over container, set to navigation position: relative (only positioned elements (excluding position: static;) works with z-index) and higher z-index than 1.
.nav{
width: 200px;
height: 250px;
line-height: 50px;
float: right;
text-align: center;
position: relative;
z-index: 2
}
http://jsfiddle.net/4b2d0fyv/3/
http://i.imgur.com/mFtXm.jpg here is a screenshot.
The areas marked in red are where the problems are. When I view the page in firefox it looks fine, in chrome there are tiny gaps, I don't deal with ie.
What is the correct way to size these divs such that each div will "connect" with other divs without leaving any gaps whenever the browser changes? something with jquery or js?
html:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="./css/main.css" />
</head>
<body>
<div id="header">
<h1>New York Tech Map</h1>
</div>
<div id="navlinks">
<div class="topnav">
About Us
</div>
<div class="topnav">
Contact Us
</div>
<div class="topnav">
Sign Up
</div>
<div class="topnav">
Help
</div>
</div>
<div id="sidebar">
</div>
<div id="map">
</div>
<div id="footer">
© 2012 NYC Tech Map
</div>
</body>
</html>
css:
html, body {
margin: 0;
padding: 0;
height: 100%;
background: #F0F0F0;
}
a { text-decoration: none; color: grey; }
a:hover{ color: red; }
#header {
width: 100%;
height: 75px;
background: red;
margin-top: -21px;
}
#navlinks { float: right; width: 80%;}
.topnav {
width: 25%;
height: 25px;
float: left;
padding-top: 5px;
background: #2D2D2D;
text-align: center;
font-family: arial, sans serif;
font-size: 15px;
font-weight: bold;
}
#sidebar {
width: 20%;
height: 500px;
float: left;
background: blue;
}
#map {
height: 80.8%;
width: 80%;
float: right;
}
.
.popa:hover {
background: #D6D6D6;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 25px;
background: #2D2D2D;
text-align: center;
font-family: arial, sans serif;
font-weight: bold;
padding-top: 5px;
color: grey;
}
it is better just resize dynamically, use js to get the window size then have that element adjust accordingly.