I am trying to make my horizontal menu transform to vertical when page resized or screen size is below 500 pixes but after making changes i realised my menu behaving like this only in edge and ie not in safari or chrome. At safari menu is shown vertically whatever the size is, and at chrome menu is shown horizontally whatever the size is. How can i make it behave same like in ie and edge?
Below is my index html and css file:
/* CSS Document */
body {
font-family: 'Happy Monkey', cursive;
}
.container {
position: relative;
top: 5px;
}
.top {
position: relative;
}
.banner-home {
position: absolute;
top: 0px;
height: 237px;
width: 300px;
background-image: url("../images/faruk-yeni2.png");
background-position: center;
background-size: cover;
padding-bottom: 0px;
}
.baslik-altcizgi {
position: absolute;
top: 235px;
padding-top: 0px;
width: 100%;
height: 20px;
background-color: #111111;
}
.baslik-yazi {
position: absolute;
top: 255px;
text-align: left;
font-size: 2em;
height: 30px
}
main {
position: absolute;
top: 550px;
}
nav ul li a {
text-decoration: none;
color: #F2B544;
background-color: #2C0E40;
display: block;
text-align: center;
padding: 10px 0 10px 0;
margin-bottom: 5px
}
nav ul li a:hover {
background-color: #0D0D0D;
color: #FFFFFF
}
nav ul {
position: relative;
top: 300px;
list-style: none;
padding-left: 0;
}
.image-one {
text-align: center;
padding: 0 20px;
}
.image-two {
text-align: center;
padding: 0 20px;
}
.image-three {
text-align: center;
padding: 0 20px;
}
.art-one-home-img {
width: 100%;
height: 650px;
}
.art-two-home-img {
width: 100%;
height: 650px;
}
.art-three-home-img {
width: 100%;
height: 650px;
}
#media screen and (min-width:500px) {
nav ul {
display: flex;
}
nav ul li {
flex: 1;
margin: 0px;
}
.feature-images {
display: flex;
}
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ömer Faruk Durusoy</title>
<link rel="stylesheet" href="css/homepage.css">
<link href="https://fonts.googleapis.com/css?family=Happy+Monkey&display=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<header>
<div class="top">
<div class="banner-home"></div>
<div class="baslik-altcizgi"></div>
<div class="baslik-yazi">
My name
</div>
</div>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Videos</li>
<li>Contact</li>
</ul>
</nav>
</header>
<main>
<section class="feature-images">
<div class="image-one">
<img src="images/javascript.png" alt="Javascript">
<p>Lorem ipsum </p>
</div>
<div class="image-two">
<img src="images/html5.png" alt="html5">
<p>Lorem ipsum </p>
</div>
<div class="image-three">
<img src="images/java.png" alt="Java">
<p>Lorem ipsum </p>
</div>
</section>
<article class="art-one-home">
<div class="art-one-home-img"></div>
<h2>This is the article one</h2>
<p>Lorem ipsum</p>
</article>
<article class="art-two-home">
<div class="art-two-home-img"></div>
<h2>This is the article one</h2>
<p>Lorem ipsum </p>
</article>
<article class="art-three-home">
<div class="art-three-home-img"></div>
<h2>This is the article one</h2>
<p>Lorem ipsum</p>
</article>
</main>
<footer>
</footer>
</div>
</body>
</html>
Try this way.
First declare classes or css properties to elements then it will do changes as per the screen size.
nav ul {
display: flex;
}
nav ul li {
flex: 1;
margin: 0px;
}
.feature-images {
display: flex;
}
#media screen and (min-width:500px) {
nav ul {
display: flex;
}
nav ul li {
flex: 1;
margin: 0px;
}
.feature-images {
display: flex;
}
}
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.
I have an H2 (id=cover) which I'd like to stay centered and higher up in a background image, but as the page size shrinks it eventually drops to the bottom of the image, then falls off of it on my mobile android phone. Any help would be appreciated. Here is the code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Johnson Landscaping</title>
<link rel="stylesheet" href="style.css">
</head>
<div id="container">
<header>
<h1>Johnson Landscaping</h1>
<nav>
<ul class="menu">
<li>home</li>
<li>contact us</li>
</ul>
</nav>
</header>
<div>
<div class="image">
<img src="images/background-backlight-blur-color-262713.jpg" alt="" />
<h2 id="cover"><span>Quality Garden Care on the North Shore</span></h2>
</div>
<h2>Services</h2>
<div class="Services">
<h4>Garden Maintenance</h4>
<img src="images/person-holding-a-green-plant-1072824.jpg" alt="person holding green
plant">
<p>Enter Details</p>
</div>
<div class="Services">
<h4>Garden Design</h4>
<img src="images/blade-of-grass-depth-of-field-environment-garden-580900.jpg" alt="blades of
grass">
<p>Enter Details</p>
</div>
<div class="Services">
<h4>Tree and Shrub Pruning</h4>
<img src="images/apple-tree-6035.jpg" alt="apple tree">
<p>Enter Details</p>
</div>
<div class="Services">
<h4>Pressure Washing</h4>
<img src="images/photography-of-bricks-covered-with-moss-1089280.jpg" alt="bricks
covered in moss">
<p>Enter Details</p>
</div>
</main>
</div>
<footer>
<nav>
<ul>
<li>home</li>
<li>contact us</li>
</ul>
</nav>
</footer>
</body>
</html>
and css to go with it
html {
background: #f7f7f7;
color: #7cae49;
font-family: 'garamond', sans-serif;
}
body {
background: white;
margin: 0 auto;
font-family: 'garamond', sans-serif;
color: rgb(49, 46, 46);
text-align: center;
}
h1 {
float: none;
display: inline-block;
color: #5c7e3a;
width: 100%;
font-size: 50px;
text-align: center;
}
nav, li {
display: inline-block;
}
header, footer {
background: #DAF7A6;
color: #7cae49;
border-radius: 10px;
}
footer {
text-align: center;
padding: 30px 20px;
}
li {
list-style: none;
line-height: 20px;
font-size: 40px;
padding-right: 20px;
padding-top: 5px;
}
.image {
position: relative;
height: 60;
width: 100%;
margin: 0 auto;
border-radius: 10px;
}
#cover {
position: absolute;
top: 200px;
width: 100%;
color: white;
text-align: center;
vertical-align: middle;
display: flex, inline-block;
font-size: 20px;
}
a {
text-decoration: none;
color: inherit;
}
a:hover {
color: #0e69e9;
}
h2 {
color: #7cae49;
text-align: center;
font-size: 30px;
}
.Services {
box-sizing: border-box;
width: 90%;
margin: 5px;
padding: 5px;
vertical-align: top;
text-align: center;
display: inline-block;
color: #7cae49;
}
img {
max-height: 60%;
max-width: 90%;
display: block;
margin-left: auto;
margin-right: auto;
border-radius: 10px;
}
Thanks for looking. Cheers!
Try this.
inside your style.css in #cover, change the top value to 0px;
#cover {
position: absolute;
top: 0px;
width: 100%;
color: white;
text-align: center;
vertical-align: middle;
display: flex, inline-block;
font-size: 20px;
}
I have a new site I am putting together to learn web coding.
My current code for the section in question is as follows:
require_once 'includes/functions.php';
<?php
if(logged_in())
{
$data = $db->query('SELECT COUNT(id) AS num FROM mail WHERE userid = "'.$_SESSION['id'].'"');
$row = $data->fetch_assoc;
$mcount = $row['num'];
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php echo SITENAME; ?></title>
<link rel="stylesheet" type="text/css" href="styles/main.css"
</head>
<body>
<div id="wrapper">
<div id="header">
<?php
if(logged_in())
{
echo 'Welcome, ' . $_SESSION['username'] . '! <img src="" alt="" width="32" height="32" /> ('.$mcount.')';
}
else
{
echo 'Welcome, Guest!';
}
?>
</div>
<div id="banner"><img src="" alt="" width="1000" height="250" /></div>
<div id="navbar">
<ul>
<li>Home</li>
<li>
<?php
if(logged_in())
{
?>
Logout
<?php
} else {
?>
Login/Register
<?php
}
?>
</li>
<li>Forums</li>
<li>Contact Us</li>
<li>Donate</li>
</ul>
</div>
<div id="content">
... Content to be added here ...
</div> <!-- end content -->
<div id="footer">Copyright 2018 <?php echo SITENAME; ?>. All Rights Reserved.<br />Webmaster Terms of Service</div>
</div> <!-- end wrapper -->
</body>
</html>
and my CSS for these sections are as such:
#navbar
{
float: left;
}
#navbar ul
{
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;;
background-color: #f1f1f1;
position: fixed;
overflow: auto;
}
#navbar li a
{
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
#navbar li a:hover
{
background-color: #555;
color: white;
}
#content
{
float:right;
width: 810px;
padding: 10px;
}
#footer
{
clear: both;
font-size: 9pt;
text-align: center;
}
My question is this: The Navbar and the Content lines up fine (navbar is fixed to the right so that it will scroll with the page content), but the footer is hidden behind the navbar if the content is shorter than the navbar height.
Is there a way to set the footer min-height to inherit the height of the navbar div so that it will always appear below the fixed navbar instead of behind it?
I researched this on the web, and nothing touched on how to do this specifically (they just said to create a element between the fixed element and the bottom element to create a buffer, which is not what I am trying to do).
Update
Updated code with the entire php file (index.php)
Website URL for preview to see issue live: Test Site
You could make the body the height of the browser window by doing the following
body
{
height: 100%;
}
I'm going blind on this, Is This the desired look ?
#navbar
{
float: left;
}
#navbar ul
{
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;;
background-color: #f1f1f1;
position: fixed;
overflow: auto;
}
#navbar li a
{
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
#navbar li a:hover
{
background-color: #555;
color: white;
}
#content
{
float:right;
width: 810px;
padding: 10px;
}
#footer
{
clear: both;
font-size: 9pt;
text-align: center;
position: fixed;
bottom: 0;
height: 100px;
width: 100%;
background: red;
}
<div id="navbar">
<ul>
<li>Home</li>
<li>
Logout
Login/Register
</li>
<li>Forums</li>
<li>Contact Us</li>
<li>Donate</li>
</ul>
</div>
<div id="content">
</div>
<div id="footer">
</div>
set the CSS file like this
#content
{
float:right;
width: 810px;
padding: 10px;
height: 100%;
}
#footer
{
clear:both;
font-size: 9pt;
width: 100%;
background-color: green;
color: white;
text-align: center;
}
I think your expecting answer is this. now the footer is on top of the nav bar
If you want to use a pure CSS without Javascript, you could apply a min-height to the .content element which will force the footer down; In the demo below I have specified the .content to have a min-height: 100vh; to make sure it is at least 100% of the height of the viewport.
Read to the comments in the code for reasons for some of my changes
#navbar {
position: fixed;
left: 0;
top: 0;
/*float: left; Float values do not control the position of fixed elements, the above offset values do*/
}
#navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
/*position: fixed; Placing your fixed position value on the #navbar element makes more structural sense*/
overflow: auto;
}
#navbar li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
#navbar li a:hover {
background-color: #555;
color: white;
}
#content {
float: right;
width: 810px;
padding: 10px;
min-height: 100vh; /*Change this to what you want*/
}
#footer {
clear: both;
font-size: 9pt;
text-align: center;
}
<div id="navbar">
<ul>
<li>Home</li>
<li>Forums</li>
<li>Contact Us</li>
<li>Donate</li>
</ul>
</div>
<div id="content">
</div>
<div id="footer">
FOOTER
</div>
Another solution would be to set a margin-bottom on the .content that is the same height as the #navbar element:
#navbar {
position: fixed;
left: 0;
top: 0;
/*float: left; Float values do not control the position of fixed elements, the above offset values do*/
}
#navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
/*position: fixed; Placing your fixed position value on the #navbar element makes more structural sense*/
overflow: auto;
}
#navbar li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
#navbar li a:hover {
background-color: #555;
color: white;
}
#content {
float: right;
width: 810px;
padding: 10px;
margin-bottom: 136px /*Current height of the #navbar*/;
}
#footer {
clear: both;
font-size: 9pt;
text-align: center;
}
<div id="navbar">
<ul>
<li>Home</li>
<li>Forums</li>
<li>Contact Us</li>
<li>Donate</li>
</ul>
</div>
<div id="content">
</div>
<div id="footer">
FOOTER
</div>
My page has a fixed header, I am aware that this causes content flows to begin at the top of the page. I've been searching for a workaround for this and nothing seems to be working, for example this one
Below is the code and here is a codepen - As you can see the content in my article is being displayed at the top of the page, although it is place at the bottom of my html.
I'd appreciate an explained workaround so that I can LEARN.
UPDATE - adding padding-top:{500px} successfully fixed this issue. Is this a recommended workaround? I was made aware of this fix here.
Thanks guys!
*,
*:before,
*:after {
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 0;
}
.col-1 {
width: 100%;
}
.inline-block-container>* {
display: -moz-inline-stack;
display: inline-block;
}
ul,
ol {
list-style: none;
margin: 0px;
padding: 0px;
}
.wrapper {
position: fixed;
height: 100px;
width: 100%;
top: 0;
z-index: 99;
}
.header {
width: 100%;
top: 0;
border-bottom: 1px solid #ddd;
background-color: white;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
}
.header .logo a img {
width: 150px;
height: 49px;
}
.logo {
margin-left: 40px;
}
.menu li {
padding-right: 50px;
margin-right: 20px;
}
.header .menu ul {
margin: 0;
padding: 0;
}
.header .menu ul li {
display: inline-block;
list-style: none;
}
.header .menu ul li a {
text-decoration: none;
display: block;
padding: 30px 20px;
}
.site-content {
margin-top: 100px;
}
.banner-home {
background: url("");
height: 100vh;
width: 100%;
background-size: cover;
position: absolute;
z-index: -1000;
}
#intro {
position: absolute;
top: 70%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
text-align: center;
color: #020000;
z-index: 50;
}
#intro a {
border: 3px solid #020000;
cursor: pointer;
}
#intro li a {
padding: 20px;
color: #020000;
font-weight: 800;
}
#intro li a:hover {
background-color: #ffd800;
}
<div id="page" class="rare-site">
<div class="wrapper">
<div id="global-navigation">
<!-- Global Header -->
<header class="header">
<div class="logo">
<a href="">
<!--<img src="images/rare-logo.png">-->
<h1>Rare Select</h1>
</a>
</div>
<nav class="menu">
<ul>
<li>HOME</li>
<!--
-->
<li>
<div class="flexbox-container">
INFO
</li>
<!--
-->
<li>
<div class="flexbox-container">
NEWSLETTER
</div>
<!--
-->
<li>
<div class="flexbox-container">
CONTACT
</li>
<!--
-->
</ul>
</header>
</div>
</div>
<div id="content" class="site-content">
<div id="primary" class="content-area">
<!-- Content Area -->
<main id="main" class="site-main" role="main">
<div class="banner large-trunk">
<div class="banner-home"></div>
<div class="banner-overlay">
<div id="intro">
<h2 class="discover"><u>The easy way to discover models.</u></h2>
<div id="button-container">
<div id="button-overlay">
<ul class="inline-block-container">
<li><a class="discover-1">I'm looking to become a model</a></li>
<li><a class="discover-2">I'm looking for a model</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<article id="newsletter">
<div class="newsletter-entry">
<section class="news-content trunk">
<div class="feature-box">
<h2>Recent News</h2>
</div>
</section>
</div>
</article>
</main>
</div>
</div>
</div>
You already have a 100px header and a margin-top applied to site-content for the content following it, as is usually done.
A position: fixed header will be taken out of the flow. So the DOM element following it will overlap.
A z-index higher that the surrounding content is given so that it comes on top (which you have done giving wrapper a z-index: 99)
The content following it is given a margin-top value. If the height of the header is fixed (as is the case here) you give it using CSS, if the height of the header is dynamic, you might have to opt for javascript to set the height dynamically.
So restrict the heights of #global-navigation and .header using height: 100% and add display: flex to the navigation ul. Also remove the absolute positioning of the banner and apply background image to site-content- see demo below:
*,
*:before,
*:after {
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 0;
}
.col-1 {
width: 100%;
}
.inline-block-container>* {
display: -moz-inline-stack;
display: inline-block;
}
ul,
ol {
list-style: none;
margin: 0px;
padding: 0px;
}
.wrapper {
position: fixed;
height: 100px;
width: 100%;
top: 0;
z-index: 99;
}
#global-navigation { /* ADDED */
height: 100%;
}
.header {
height: 100%; /* ADDED */
width: 100%;
top: 0;
border-bottom: 1px solid #ddd;
background-color: white;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
}
.header .logo a img {
width: 150px;
height: 49px;
}
.site-content { /* ADDED */
background: url("http://placehold.it/50x50");
height: 100vh;
width: 100%;
background-size: cover;
}
.logo {
margin-left: 40px;
}
.menu li {
padding-right: 50px;
margin-right: 20px;
}
.header .menu ul {
display: flex; /* ADDED */
margin: 0;
padding: 0;
}
.header .menu ul li {
display: inline-block;
list-style: none;
}
.header .menu ul li a {
text-decoration: none;
display: block;
padding: 30px 20px;
}
.site-content {
margin-top: 100px;
}
.banner-home {} /* removed absolute positioning */
#intro { /* removed absolute positioning */
width: 100%;
text-align: center;
color: #020000;
z-index: 50;
}
#intro a {
border: 3px solid #020000;
cursor: pointer;
}
#intro li a {
padding: 20px;
color: #020000;
font-weight: 800;
}
#intro li a:hover {
background-color: #ffd800;
}
<div id="page" class="rare-site">
<div class="wrapper">
<div id="global-navigation">
<!-- Global Header -->
<header class="header">
<div class="logo">
<a href="">
<!--<img src="images/rare-logo.png">-->
<h1>Rare Select</h1>
</a>
</div>
<nav class="menu">
<ul>
<li>HOME</li>
<!--
-->
<li>
<div class="flexbox-container">
INFO
</div>
</li>
<!--
-->
<li>
<div class="flexbox-container">
NEWSLETTER
</div>
<!--
-->
<li>
<div class="flexbox-container">
CONTACT
</div>
</li>
<!--
-->
</ul>
</nav>
</header>
</div>
</div>
<div id="content" class="site-content">
<div id="primary" class="content-area">
<!-- Content Area -->
<main id="main" class="site-main" role="main">
<div class="banner large-trunk">
<div class="banner-home"></div>
<div class="banner-overlay">
<div id="intro">
<h2 class="discover"><u>The easy way to discover models.</u></h2>
<div id="button-container">
<div id="button-overlay">
<ul class="inline-block-container">
<li><a class="discover-1">I'm looking to become a model</a></li>
<li><a class="discover-2">I'm looking for a model</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<article id="newsletter">
<div class="newsletter-entry">
<section class="news-content trunk">
<div class="feature-box">
<h2>Recent News</h2>
</div>
</section>
</div>
</article>
</main>
</div>
</div>
</div>
I have an issue with the following layout in css, as you can see from the image below the two floating elements to the far right have got a big space between them.
and I'm trying to get them to line up like
I'd rather not use negative margins to pull 'sidebar2' into the right spot and the 'mag link' has to separate from the second sidebar.
thanks
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="style.css" />
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="wraper clearfix">
<div class="container clearfix">
<header>header</header>
<div class="carousel">carousel</div>
<div class="posts">posts
<div class="post">Post</div>
<div class="post">Post</div>
<div class="post">Post</div>
<div class="post">Post</div>
<div class="post">Post</div>
<div class="post">Post</div>
</div>
<div class="sidebar1">sidebar1</div>
<div class="mag-link">mag link</div>
<div class="sidebar2">sidebar2</div>
</div><!-- container -->
<footer class="clearfix">footer</footer>
</div><!-- wraper -->
</body>
</html>
css
.wraper {
background-color: rgba(254,139,206,0.27);
width: 100%;
position: absolute;
margin: 0;
padding: 0;
}
.container {
background-color: rgba(253,184,65,0.27);
width: 1040px;
margin: 0 auto;
padding: 0;
}
header {
background-color: rgba(198,247,73,0.27);
margin: 0 0 16px 0;
padding: 0 16px 16px;
height: 292px;
}
.carousel {
background-color: rgba(96,250,193,0.27);
margin: 0 8px 16px 0;
height: 240px;
width: 720px;
display: inline-block;
overflow: hidden;
float: left;
}
.posts {/* page content */
background-color: rgba(94,93,250,0.27);
width: 512px;
float: left;
display: inline-block;
padding: 0;
margin: 0 8px 16px 0;
}
.post {
width: 290px;
height:200px;
}
.sidebar1 {
background-color: rgba(184,88,250,0.27);
display: inline-block;
padding: 0;
margin: 0 8px 16px 8px;
float: left;
position: relative;
width: 208px;
height:800px;
}
.mag-link {
background-color: #fd9e90;
width: 240px;
height: 200px;
margin: 0 0 16px 8px;
float: left;
position: relative;
bottom: 389px;
display: inline-block;
}
.sidebar2 {
background-color: rgba(251,244,57,0.27);
float: left;
width: 240px;
height:1100px;
margin: 0 0 16px 8px;
display: inline-block;
}
footer {
width: 100%;
background: #fd9e10;
height: 312px;
float: left;
}
.clearfix {
zoom: 1; }
.clearfix:before, .clearfix:after {
content: "";
display: table; }
.clearfix:after {
clear: both;}
try this:
http://jsfiddle.net/A2XVQ/1/
i just remove some properties
HTML
<div class="container clearfix">
<header>header</header>
<div class="carousel">carousel</div>
<div class="posts">posts
<div class="post">Post</div>
<div class="post">Post</div>
<div class="post">Post</div>
<div class="post">Post</div>
<div class="post">Post</div>
<div class="post">Post</div>
</div>
<div class="sidebar1">sidebar1</div>
<div class="mag-link">mag link</div>
<div class="sidebar2">sidebar2</div>
</div><!-- container -->
<footer class="clearfix">footer</footer>
</div><!-- wraper -->
CSS
.wraper {
background-color: rgba(254,139,206,0.27);
width: 100%;
position: absolute;
margin: 0;
padding: 0;
}
.container {
background-color: rgba(253,184,65,0.27);
width: 1040px;
margin: 0 auto;
padding: 0;
}
header {
background-color: rgba(198,247,73,0.27);
margin: 0 0 16px 0;
padding: 0 16px 16px;
height: 292px;
}
.carousel {
background-color: rgba(96,250,193,0.27);
margin: 0 8px 16px 0;
height: 240px;
width: 720px;
display: inline-block;
overflow: hidden;
float: left;
}
.posts {/* page content */
background-color: rgba(94,93,250,0.27);
width: 512px;
float: left;
display: inline-block;
padding: 0;
margin: 0 8px 16px 0;
}
.post {
width: 290px;
height:200px;
}
.sidebar1 {
background-color: rgba(184,88,250,0.27);
display: inline-block;
padding: 0;
margin: 0 8px 16px 8px;
float: left;
position: relative;
width: 208px;
height:800px;
}
.mag-link {
background-color: #fd9e90;
width: 240px;
height: 200px;
margin: 0 0 16px 8px;
position: relative;
display: inline-block;
}
.sidebar2 {
background-color: rgba(251,244,57,0.27);
float: left;
width: 240px;
height:1100px;
margin: 0 0 16px 8px;
}
footer {
width: 100%;
background: #fd9e10;
height: 312px;
float: left;
}
.clearfix {
zoom: 1; }
.clearfix:before, .clearfix:after {
content: "";
display: table; }
.clearfix:after {
clear: both;}
}
good luck
You need to place the content part (including the carousel, posts and the first sidebar) into one div and the two elements to the right (mag link and sidebar 2) into a second div and float them left.
HTML would look like that:
<div class="wraper clearfix">
<div class="container clearfix">
<header>header</header>
<div class="contentwrap">
<div class="carousel">carousel</div>
<div class="posts">posts
<div class="post">Post</div>
<div class="post">Post</div>
<div class="post">Post</div>
<div class="post">Post</div>
<div class="post">Post</div>
<div class="post">Post</div>
</div>
<div class="sidebar1">sidebar1</div>
</div>
<div class="sidebarwrapper">
<div class="mag-link">mag link</div>
<div class="sidebar2">sidebar2</div>
</div>
</div><!-- container -->
<footer class="clearfix">footer</footer>
</div><!-- wraper -->
Have a look at my fiddle: http://jsfiddle.net/jW6HW/