I am new to CSS and have been trying to build a 2-column website. The code is here: JSFiddle. There is a left-side menu with a right-side content area. If the window is large enough, there is no problem with the layout. However, when resizing the window to a narrow one, the content overflows to the menu area and I don't know how to fix it without making the position fixed or absolute, which I don't want to do because I want to have a footer at the end of the page. Can someone help me fix the problem? Thank you so much!
I also apologize in advance for the long code. I don't know which part lies the problem and pasted everything
html code:
<body>
<div id="wrapper">
<div id="menunav">
<img src="images/logo.jpg" alt="siteLogo" class="centered" id="logo"/>
<nav id="nav">
<ul>
<li>Portfolio</li>
<li>About Me</li>
<li>Resume</li>
</ul>
</nav>
</div>
<div id="content">
<div class="grid3">
<article class="bucket" >
<a href="#">
<img src="images/baskerville1.jpg" alt=""/>
<div class = "img-overlay">
<h3>Monogram</h3></div>
</a>
</article>
<article class="bucket">
<a href="#">
<img src="images/Gastalt.png" alt=""/>
<div class="img-overlay">
<h3>Gastalt Composition</h3>
</div>
</a>
</article>
<article class="bucket">
<a href="#">
<img src="images/redThread.png" alt=""/>
<div class="img-overlay">
<h3>The Red Thread - A Visual Book</h3>
</div>
</a>
</article>
<article class="bucket">
<a href="#">
<img src="images/poster copy.png" alt=""/>
<div class="img-overlay">
<h3>Typographic Hierarchy</h3>
</div>
</a>
</article>
<article class="bucket">
<a href="#">
<img src="images/Spaces.png" alt=""/>
<div class="img-overlay">
<h3>Living in Two Spaces</h3>
</div>
</a>
</article>
</div>
</div>
<div id="footer">©2014</div>
</div>
</body>
css code:
#charset "UTF-8";
*{
margin:0;
}
html, body {
margin: 0;
background-color: #FFFFFF;
height: 100%;
padding: 0;
}
#wrapper {
background-color: #FFFFFF;
width: 1000px;
padding-bottom: 0px;
margin:0 auto;
position:relative;
min-height: 100%;
}
#menunav {
position: fixed;
width:180px;
padding-top:80px;
height: 100%;
display: block;
margin: 0px;
}
#logo {
width: 70%;
position: static;
}
#menunav ul {
list-style-type: none;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#menunav a {
display: block;
padding-top: 8px;
padding-bottom: 8px;
margin-top: 12px;
margin-right: 0px;
margin-left: 0px;
text-align: left;
padding-left: 20px;
background-color: rgba(193,193,193,1.00);
color: rgba(0,0,0,1.00);
}
#menunav a:hover, #menunav a:active, #mainnav a:focus, #menunav a.thispage {
background-color: rgba(0,174,210,1.00);
color: rgba(255,255,255,1.00);
text-decoration: none;
}
#content {
display: block;
margin: 0 auto;
padding-left:225px;
padding-top:80px;
background-color:#fffeee;
}
.centered {
margin-left: auto;
margin-right: auto;
display: block;
margin-top: auto;
margin-bottom: auto;
}
a {
text-decoration: none;
}
.bucket {
position:relative;
float: left;
margin-left: 3.2%;
margin-bottom:30px;
}
.grid3 .bucket:nth-of-type(3n+1){
margin-left: 0;
clear: left;
}
.grid3 .bucket{
width: 31.2%;
}
.img-overlay h3 {
opacity: 1;
display: inline-block;
margin: auto;
height: 20px;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left:0;
color: rgba(255,254,254,1.00);
text-align: center;
vertical-align: middle;
}
.img-overlay {
background-color: rgba(0,0,0,0.6);
bottom: 0px;
top: 0px;
opacity: 0;
overflow:hidden;
filter: alpha(opacity=0);
position: absolute;
width: 100%;
z-index: 1000;
transition: opacity 0.3s;
-webkit-transition: opacity 0.3s;
}
.bucket:hover .img-overlay {
opacity:1;
filter: alpha(opacity=100);
}
.bucket img {
width: 100%;
}
#footer{
clear:both;
text-align: center;
line-height:20px;
vertical-align: middle;
}
#media screen and (max-width:740px){
/*change 3 column to 2 column*/
.grid3 .bucket:nth-of-type(3n+1) {
margin-left: 3.2%;
clear: none;
}
.grid3 .bucket:nth-of-type(2n+1) {
margin-left: 0;
clear: left;
}
}
Set z-index:1 and set background-color: #FFFFFF; in #menunav
#menunav {
z-index: 1;
background-color: #FFFFFF;
position: fixed;
width:180px;
padding-top:80px;
height: 100%;
display: block;
margin: 0px;
}
Here it is http://jsfiddle.net/n9V3W/2/ working!!!
Related
I cannot get the text for navigation to display inline and in the grey bar at the top of the page. I am guessing there is some type of problem with my CSS. Before I had the text included with the class="box" and the formatting was working, but the buttons wouldn't work, so I created a new div class="new" so the buttons would work.
HTML:
<div class="box-contents">
<img src="../images/LOGO.png" alt="Stephen Crawford Photography Logo">
</div>
<div class="box">
</div>
<div class="new">
<nav>
<ul>
<li class="button"><a class="button-text" href="portfolio.html">portfolio</a></li>
<li class="button"><a class="button-text" href="../html/about.html">about</a></li>
<li class="button"><a class="button-text" href="../html/contact.html">contact</a></li>
</ul>
</nav>
</div>
CSS:
#charset "utf-8";
/* CSS Document */
body{
margin: 0;
padding: 0;
font-size: 100%;
}
.box {
width: auto;
height: 120px;
background: grey;
overflow: hidden;
opacity: 0.85;
position: relative;
z-index: 3;
}
.box-contents {
margin: auto;
width: 100%;
overflow: hidden;
position: absolute;
opacity: 1 !important;
z-index: 4;
}
.new ul{
font-family: 'Roboto Condensed', sans-serif;
font-weight: lighter;
letter-spacing: 2px;
font-size: 2em;
margin-top: 0;
padding-top: 25px;
float: right;
margin-right: 100px;
position: relative;
list-style-type: none;
margin: 0;
padding: 0;
display: inline;
z-index: 99;
}
a{
text-decoration: none;
color: inherit;
}
img{
display: block;
float: left;
width: 150px;
margin: 10px 2%;
}
.images{
display: block;
width: 800px;
float: inherit;
margin: auto;
padding-bottom: 20px;
padding-top: 20px;
}
The picture below shows the formatting issues
The most appropriate approach is to contain your logo and navigation links within your <nav> element. Right now they're broken out into separate elements which will cause them to stack. Recently, flexbox has become the best solution for situations like this. You'll be flexing your nav container and the unordered list inside. The margin property on the ul has left set to auto, which will push the navigation items to the right.
I've removed all of the unnecessary elements since we really just need <nav>. Hopefully this helps. I've included only the relevant CSS to give you a better understanding of what is happening.
nav {
display: flex;
align-items: center;
background-color: grey;
}
nav ul {
display: flex;
margin: 0 0 0 auto;
list-style-type: none;
}
nav ul li {
padding-right: 10px;
}
<nav>
<img src="//placehold.it/150x50" alt="Stephen Crawford Photography Logo">
<ul>
<li class="button"><a class="button-text" href="portfolio.html">portfolio</a></li>
<li class="button"><a class="button-text" href="../html/about.html">about</a></li>
<li class="button"><a class="button-text" href="../html/contact.html">contact</a></li>
</ul>
</nav>
Add this css to your code and <div class="new"> //content </div> inside <div class="box"> </div> like so
.new ul li{
display: inline-block;
}
body{
margin: 0;
padding: 0;
font-size: 100%;
}
.box {
width: auto;
height: 120px;
background: grey;
overflow: hidden;
opacity: 0.85;
position: relative;
z-index: 3;
}
.box-contents {
margin: auto;
width: 100%;
overflow: hidden;
position: absolute;
opacity: 1 !important;
z-index: 4;
}
.new ul{
font-family: 'Roboto Condensed', sans-serif;
font-weight: lighter;
letter-spacing: 2px;
font-size: 2em;
margin-top: 0;
padding-top: 25px;
float: right;
margin-right: 100px;
position: relative;
list-style-type: none;
margin: 0;
padding: 0;
display: inline;
z-index: 99;
}
.new ul li{
display: inline-block;
}
a{
text-decoration: none;
color: inherit;
}
img{
display: block;
float: left;
width: 150px;
margin: 10px 2%;
}
.images{
display: block;
width: 800px;
float: inherit;
margin: auto;
padding-bottom: 20px;
padding-top: 20px;
}
<body>
<div class="box-contents">
<img src="../images/LOGO.png" alt="Stephen Crawford Photography Logo">
</div>
<div class="box">
<div class="new">
<nav>
<ul>
<li class="button"><a class="button-text" href="portfolio.html">portfolio</a></li>
<li class="button"><a class="button-text" href="../html/about.html">about</a></li>
<li class="button"><a class="button-text" href="../html/contact.html">contact</a></li>
</ul>
</nav>
</div>
</div>
<div>
<img class="images" src="../images/DSC_7997-Edit.jpg" alt="Trevi Fountain, Rome">
<img class="images" src="../images/DSC_1195.jpg" alt="Lake Hartwell">
<img class="images" src="../images/DSC_7564-Edit.jpg" alt="Cinque Terre">
<img class="images" src="../images/_DSC4277.jpg" alt="Park City">
<img class="images" src="../images/LAC_6060.jpg" alt="Toccoa Falls">
<img class="images" src="../images/DSC_7547-Edit.jpg" alt="Cinque Terre">
<img class="images" src="../images/_DSC8776.jpg" alt="Campfire">
<img class="images" src="../images/_DSC2203-Edit.jpg" alt="Milkyway">
<img class="images" src="../images/_DSC8094-Edit.jpg" alt="Lake Hartwell">
</div>
</body>
Put your div with class new in div with class box
<div class="box">
<div class="new">...</div>
</div>
and then change your css by replacing .new ul with .new li
.new li{
...
}
I have the following HTML and CS(Fiddle Example):
header {
text-align: center;
}
div.wrapper {
margin: 0 auto;
max-width: 640px;
text-align: left;
position: relative;
}
em.brand img {
display: block;
}
ul.menu {
list-style: none;
margin: 0;
padding: 0;
}
ul.menu li {
display: inline-block;
margin: 0;
padding: 8px;
}
ul.menu li a {
text-decoration: none;
font-size: 18px;
color: white;
}
em {
border: 1px solid red;
position: absolute;
z-index: 2000;
}
nav {
position: absolute;
z-index: 2000;
right: 0;
}
.slides {
width: 100%;
position: relative;
}
.slide .frame img {
width: 100%;
}
.slide .text {
position: absolute;
text-align: center;
top: 80px;
width: 100%;
}
.slide .text h2 {
color: white;
font-size: 40px;
margin: 8px;
}
.slide .text p {
color: white;
font-size: 20px;
margin: 8px;
}
main {
border: 1px solid red;
font-size: 20px;
}
<header>
<div class="wrapper">
<em class="brand">
<img src="http://via.placeholder.com/200x40?text=LOGO"/>
</em>
<nav class="menu">
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
<div class="slides">
<div class="slide">
<div class="frame">
<img src="http://lorempixel.com/1200/675/nature/1" />
</div>
<div class="text">
<h2>Our Message</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
</header>
<main>
Main content
</main>
The logo and menu are on left and right both on top of image.
Message and caption and centered on top of image ...
So far so good. But in some screen sizes I need to crop the image.
I do it placing the image in a DIV with negative margins (Fiddle Example):
<div class="frame">
<img src="http://lorempixel.com/1200/675/nature/1" />
</div>
.slide .frame {
margin: -20px 0;
}
The problem is, as you can see in the online example, the logo, main content and menu are moved ...
Is there a way to solve this?
You can include the image in CSS using the
background-image:url('...')
property. Then you can crop it with the
background-size: 999px ... ;
attribute.
If I think better of your problem you have to set the margin .slide .frame img or you can use this image within CSS background-image:url('...')
header {
text-align: center;
}
div.wrapper {
margin: 0 auto;
max-width: 640px;
text-align: left;
position: relative;
}
em.brand img {
display: block;
}
ul.menu {
list-style: none;
margin: 0;
padding: 0;
}
ul.menu li {
display: inline-block;
margin: 0;
padding: 8px;
}
ul.menu li a {
text-decoration: none;
font-size: 18px;
color: white;
}
em {
border: 1px solid red;
position: absolute;
z-index: 2000;
}
nav {
position: absolute;
z-index: 2000;
right: 0;
}
.slides {
width: 100%;
position: relative;
}
.slide .frame img {
margin: -20px 0;
width: 100%;
}
.slide .text {
position: absolute;
text-align: center;
top: 80px;
width: 100%;
}
.slide .text h2 {
color: white;
font-size: 40px;
margin: 8px;
}
.slide .text p {
color: white;
font-size: 20px;
margin: 8px;
}
main {
border: 1px solid red;
font-size: 20px;
position: relative;
top: 20px;
}
<header>
<div class="wrapper">
<em class="brand">
<img src="http://via.placeholder.com/200x40?text=LOGO"/>
</em>
<nav class="menu">
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
<div class="slides">
<div class="slide">
<div class="frame">
<img src="http://lorempixel.com/1200/675/nature/1" />
</div>
<div class="text">
<h2>Our Message</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
</header>
<main>
Main content
</main>
if you to crop the image of 20px top and bottom, apply the negative margins to it and hide overflow from its parent : http://jsfiddle.net/hxdhv147/6/
header {
text-align: center;
}
div.wrapper {
margin: 0 auto;
max-width: 640px;
text-align: left;
position: relative;
}
em.brand img {
display: block;
}
ul.menu {
list-style: none;
margin: 0;
padding: 0;
}
ul.menu li {
display: inline-block;
margin: 0;
padding: 8px;
}
ul.menu li a {
text-decoration: none;
font-size: 18px;
color: white;
}
em {
border: 1px solid red;
position: absolute;
z-index: 2000;
}
nav {
position: absolute;
z-index: 2000;
right: 0;
}
.slides {
width: 100%;
position: relative;
}
.slide .frame {overflow:hidden}
.slide .frame img {
width: 100%;
margin: -20px 0;
}
.slide .text {
position: absolute;
text-align: center;
top: 80px;
width: 100%;
}
.slide .text h2 {
color: white;
font-size: 40px;
margin: 8px;
}
.slide .text p {
color: white;
font-size: 20px;
margin: 8px;
}
main {
border: 1px solid red;
font-size: 20px;
}
<header>
<div class="wrapper">
<em class="brand">
<img src="http://via.placeholder.com/200x40?text=LOGO"/>
</em>
<nav class="menu">
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
<div class="slides">
<div class="slide">
<div class="frame">
<img src="http://lorempixel.com/1200/675/nature/1" />
</div>
<div class="text">
<h2>Our Message</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
</header>
<main>
Main content
</main>
note that CSS
use to have the clip(); rules to crop content.
but now i would advise object-fit about image
i build a basic sidebar, with an navigation list inside. What i'm trying is to get the last div container .sidebar-footer on the bottom of the sidebar. When i gave the class a position absolute, it's overlaying over the list item, what should i do to get it like in our design pic?
<div class="pulse-menu">
<div class="menu-bg clearfix">
<div class="sidebar-profile">
<img src="img/users/avatar.jpg" class="sidebar-img" alt="Candice Swanepoel" title="Candice Swanepoel" />
<h5>Candice Swanepoel</h5>
</div>
</div>
<nav>
<ul>
<li>Dashboard</li>
<li>Models</li>
<li>Kunden</li>
<li>Finanzen</li>
<li>Mitarbeiter</li>
<li>Einstellung</li>
</ul>
<div class="sidebar-footer">
<li><i class="icon-cloud-upload circle-icon"> </i></li>
</div>
</nav>
</div>
Css:
.pulse-menu {
background-color: #fafafa;
width: 19.286em;
position: fixed;
z-index: 1050;
top: 0;
bottom: 0;
height: 100%;
text-transform: uppercase;
overflow-y: scroll;
}
.menu-bg {
width: 270px;
height: 230px;
background: url(../img/media/menu_bg.svg) ;
background-size: 270px 221px;
background-repeat: no-repeat;
}
.sidebar-profile {
margin: 0 auto;
width: 100%;
text-align: center;
box-sizing: border-box;
padding: 20px 0;
color: #333;
line-height: 0.6em;
}
.sidebar-profile img {
border-radius: 100%;
height: 60px;
width:60px;
}
.sidebar-profile h5 {
padding-top: 0.50em;
color: #a8a8a8;
font-size: 1.02em;
}
.pulse-menu>nav ul {
padding: 0;
list-style-type: none;
}
.pulse-menu>nav>ul>li>a {
color:#333;
display:block;
font-size:1.02em;
height:40px;
line-height:0px;
padding-bottom:1.5em;
padding-left:2em;
padding-right:2em;
padding-top:1.5em;
text-align:center;
}
here is a working jsfiddle with my code
Give your footer class this styles
.sidebar-footer{
height: 50px;
position: absolute;
width: 100%;
bottom: 0;
list-style-type: none;
padding-bottom:5.5em;
}
You can use the :last-child selector in your CSS.
HTML:
<nav>
<ul>
<li>Dashboard</li>
<li>Models</li>
<li>Kunden</li>
<li>Finanzen</li>
<li>Mitarbeiter</li>
<li>Einstellung</li>
</ul>
<div class="sidebar-footer">
<li><i class="icon-cloud-upload circle-icon"> </i></li>
</div>
</nav>
CSS
.nav ul li:last-child {
//your styling
}
CSS
<style>
.pulse-menu {
background-color: #fafafa;
width: 19.286em;
position: fixed;
z-index: 1050;
top: 0;
bottom: 0;
height: 100%;
text-transform: uppercase;
overflow-y: scroll;
}
.menu-bg {
width: 270px;
height: 230px;
background: url(../img/media/menu_bg.svg) ;
background-size: 270px 221px;
background-repeat: no-repeat;
}
.sidebar-profile {
margin: 0 auto;
width: 100%;
text-align: center;
box-sizing: border-box;
padding: 20px 0;
color: #333;
line-height: 0.6em;
}
.sidebar-profile img {
border-radius: 100%;
height: 60px;
width:60px;
}
.sidebar-profile h5 {
padding-top: 0.50em;
color: #a8a8a8;
font-size: 1.02em;
}
.pulse-menu>nav ul {
padding: 0;
list-style-type: none;
}
.pulse-menu>nav>ul>li>a {
color:#333;
display:block;
font-size:1.02em;
height:40px;
line-height:0px;
padding-bottom:1.5em;
padding-left:2em;
padding-right:2em;
padding-top:1.5em;
text-align:center;
}
.specialelement {
padding-top: 500px;
display:block;
padding-left:6em;
list-style-type: none;
color: #333;
}
</style>
HTML
<div class="pulse-menu">
<div class="menu-bg clearfix">
<div class="sidebar-profile">
<img src="img/users/avatar.jpg" class="sidebar-img" alt="Candice Swanepoel" title="Candice Swanepoel" />
<h5>Candice Swanepoel</h5>
</div>
</div>
<nav>
<ul>
<li>Dashboard</li>
<li>Models</li>
<li>Kunden</li>
<li>Finanzen</li>
<li>Mitarbeiter</li>
<li class="specialelement">
<li>Einstellung</li>
</li>
<div class="sidebar-footer">
<li><i class="icon-cloud-upload circle-icon"> </i></li>
</div>
</nav>
</div>
Result
Sorry for repeating this question similar to SO here: Can I create a div with a Curved bottom?
But method there does not fulfill my customization need of header.
But what i want to achieve is not quite similar to what i've achieve with the border border-bottom-left-radius and border-bottom-right-radius.
As you can see the images that header i want to achieve is linearly curved throughout the bottom but with what i've achieved is that i'm having more curvy border at the left and right portion of header and curved is not linear throughout the bottom. It becomes straight after short distance. I've tried to increase the %age but it becomes even more curved at edges.
Is there any other way of doing this so that i get linearly curved throughout the bottom?
Here is my code:
CSS Code:
header{
background-color: #000;
border-bottom-left-radius:25%;
border-bottom-right-radius:25%;
padding: 10px;
opacity: 0.35;
position: fixed;
width: 100%;
z-index: 1000;
}
Here is the link JSfiddle link: https://jsfiddle.net/ozqneuha/
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700);
/* --Global CSS-- */
.header-container {
margin: 0 auto;
width: 1170px;
}
ul {
padding: 0;
margin: 0;
}
/* Header CSS*/
header {
background-color: #000;
border-bottom-left-radius: 25%;
border-bottom-right-radius: 25%;
padding: 10px;
opacity: 0.35;
position: fixed;
width: 100%;
z-index: 1000;
}
header nav ul {
list-style-type: none;
}
header .logo {
display: inline-block;
}
header .header-nav {
display: inline-block;
float: right;
padding: 7px;
}
header li {
float: left;
margin-left: 20px;
}
header li a {
color: #fff;
font: 600 16px'Open Sans';
text-transform: uppercase;
text-decoration: none;
}
header li a:hover,
header li a:active {
color: #e51937;
text-decoration: none;
}
<header>
<div class="header-container">
<div class="logo">
<a href="#">
<img src="http://i.imgur.com/2JbjOqY.png" alt="logo">
</a>
</div>
<div class="header-nav">
<nav>
<ul>
<li>Search
</li>
<li>Map
</li>
<li>Properties
</li>
<li>Parking
</li>
<li>Residents
</li>
<li>Pay Online
</li>
</ul>
</nav>
</div>
<!-- /.header-nav -->
</div>
<!-- /.header-container -->
</header>
You could give clip-path a try, but make sure to check browser support.
Can I use CSS clip-path property
You basically just use an ellipse to clip your header div.
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700);
body {
margin: 0;
}
/* --Global CSS-- */
.header-container{
margin: 0 auto;
width: 1170px;
text-align: right;
}
ul{
padding: 0;
margin:0;
}
/* Header CSS*/
header{
background-color: #000;
/*
border-bottom-left-radius:25%;
border-bottom-right-radius:25%;
*/
padding: 10px;
opacity: 0.35;
position: fixed;
width: 100%;
z-index: 1000;
min-height: 50px;
-webkit-clip-path: ellipse(60% 100% at 50% 0%);
clip-path: ellipse(60% 100% at 50% 0%);
}
header nav ul{
list-style-type: none;
}
header .logo {
display: inline-block;
float: left;
}
header .header-nav{
display: inline-block;
/*float: right;*/
padding: 7px;
}
header li{
float: left;
margin-left: 20px;
}
header li a{
color: #fff;
font: 600 16px 'Open Sans';
text-transform: uppercase;
text-decoration: none;
}
header li a:hover,
header li a:active{
color: #e51937;
text-decoration: none;
}
#media screen and (max-width: 1169px) {
.header-container {
width: 840px;
}
header .header-nav{
display: inline-block;
}
}
#media screen and (max-width: 996px) {
.header-container {
width: 100%;
}
header .logo {
float: none;
display: block;
text-align: center;
}
header .header-nav{
display: none;
}
}
<header>
<div class="header-container">
<div class="logo">
<a href="#">
<img src="http://i.imgur.com/2JbjOqY.png" alt="logo" />
</a>
</div>
<div class="header-nav">
<nav>
<ul>
<li>Search</li>
<li>Map</li>
<li>Properties</li>
<li>Parking</li>
<li>Residents</li>
<li>Pay Online</li>
</ul>
</nav>
</div><!-- /.header-nav -->
</div><!-- /.header-container -->
</header>
Can you try this way?
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700);
/* --Global CSS-- */
.header-container {
margin: 0 auto;
width: 1170px;
}
ul {
padding: 0;
margin: 0;
}
/* Header CSS*/
header {
background-color: #000;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
padding: 10px 10px 35px;
opacity: 0.35;
position: fixed;
width: 100%;
z-index: 1000;
}
header nav ul {
list-style-type: none;
}
header .logo {
display: inline-block;
}
header .header-nav {
display: inline-block;
float: right;
padding: 7px;
}
header li {
float: left;
margin-left: 20px;
}
header li a {
color: #fff;
font: 600 16px'Open Sans';
text-transform: uppercase;
text-decoration: none;
}
header li a:hover,
header li a:active {
color: #e51937;
text-decoration: none;
}
<header>
<div class="header-container">
<div class="logo">
<a href="#">
<img src="http://i.imgur.com/2JbjOqY.png" alt="logo">
</a>
</div>
<div class="header-nav">
<nav>
<ul>
<li>Search
</li>
<li>Map
</li>
<li>Properties
</li>
<li>Parking
</li>
<li>Residents
</li>
<li>Pay Online
</li>
</ul>
</nav>
</div>
<!-- /.header-nav -->
</div>
<!-- /.header-container -->
</header>
This is how I did it:
.overlay {
position: absolute;
z-index: -1;
height: 100%;
border-radius: 50%;
width: 150%;
left: -25%;
top: -60%;
background: rgba(121, 121, 121, 0.8);
pointer-events:none;
}
Here is the JSFiddle demo
Adjust the width, left and top percentage to your liking :)
I've finally figured out out the solution of this problem. I've used pesudo class :before for the solution.
/* --Global CSS-- */
.header-container {
display: table;
margin: 0 auto;
width: 1170px;
height: 100%;
}
ul {
padding: 0;
margin: 0;
}
/* Header CSS*/
header {
padding: 10px;
position: fixed;
width: 100%;
z-index: 1000;
}
header:before {
background-color: rgba(0, 0, 0, 0.35);
width: 150%;
content: '';
height: 150px;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
top: -76px;
position: absolute;
z-index: -1;
margin-left: -25%;
}
header ul {
list-style-type: none;
}
header .logo {
display: table-cell;
vertical-align: middle;
}
header .header-nav {
display: table-cell;
float: right;
padding: 7px;
vertical-align: middle;
}
header li {
display: inline-block;
}
header li a {
color: #fff;
font: 600 16px'Open Sans';
padding: 0 15px 0 15px;
text-transform: uppercase;
text-decoration: none;
transition: all 0.3s;
}
header li a:hover,
header li a:active {
color: #e51937;
text-decoration: none;
}
<header>
<div class="header-container">
<div class="logo">
<a href="#">
<img src="http://i.imgur.com/2JbjOqY.png" alt="logo">
</a>
</div>
<div class="header-nav">
<nav>
<ul>
<li>Search
</li>
<li>Map
</li>
<li>Properties
</li>
<li>Parking
</li>
<li>Residents
</li>
<li>Pay Online
</li>
</ul>
</nav>
</div>
<!-- /.header-nav -->
</div>
<!-- /.header-container -->
</header>
I'm trying to have a full screen header and at the bottom of that (but within it) have a link which says learn more. Then below the header have the rest of the website content, in this case "test".
The two issues I have is:
Learn more should sit at the bottom middle but it doens't, it sits slightly to the right
The div class "content" is sat within the gray box not under it.
This is the code I am working with:
* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
}
a {
text-decoration: none;
}
.header {
height: 100%;
width: 100%;
background: lightgray;
text-align: center;
min-height: 350px;
position: relative;
}
li {
list-style: none;
}
.nav {
display: block;
padding: 20px;
}
.nav img {
float: left;
}
.nav ul {
float: right;
font-size: 0;
}
.nav ul li {
display: inline-block;
font-size: 16px;
padding-left: 10px;
}
.nav ul li:first-child {
padding-left: 0px
}
.nav ul li a {
padding: 0 10px;
}
.learn {position: absolute; bottom: 0; width: 200px;}
.content {background-color: blue; display: block;}
<html>
<body>
<div class="header">
<div class="nav">
<img width="39" height="35" alt="" src="#">
<ul>
<li>Services
</li>
<li>Writings
</li>
<li>Contact
</li>
</ul>
</div>
<span class="billboard">Hello!</span>
<a class="learn">Learn More</span>
</div>
<div class="content">Test</div>
</body>
</html>
You have an unclosed anchor tag. And you need to set left: 50%; width: auto; to your .learn class in order to center it.
* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
}
a {
text-decoration: none;
}
.header {
height: 100%;
width: 100%;
background: lightgray;
text-align: center;
min-height: 350px;
position: relative;
}
li {
list-style: none;
}
.nav {
display: block;
padding: 20px;
}
.nav img {
float: left;
}
.nav ul {
float: right;
font-size: 0;
}
.nav ul li {
display: inline-block;
font-size: 16px;
padding-left: 10px;
}
.nav ul li:first-child {
padding-left: 0px
}
.nav ul li a {
padding: 0 10px;
}
.learn {position: absolute; bottom: 0; width: auto; left: 50%;}
.content {background-color: blue; display: block;}
<html>
<body>
<div class="header">
<div class="nav">
<img width="39" height="35" alt="" src="#">
<ul>
<li>Services
</li>
<li>Writings
</li>
<li>Contact
</li>
</ul>
</div>
<span class="billboard">Hello!</span>
<a class="learn">Learn More</span></a>
</div>
<div class="content">Test</div>
</body>
</html>
To center align 'Learn more', use
.learn {
position: absolute; bottom: 0; width: 200px;
left: 50%; transform: translateX(-50%);
}
Before the content, <a class="learn">Learn More</span> closing tag should be </a>
https://jsfiddle.net/afelixj/efty6zjL/