I have a little problem that I could work around but it annoys me that I don't understand it. Maybe you can help. I have a header with a nav bar inside which is floated to the right. Now when I add margin-top to the nav and set it equal to say 10% it is not sizing relative the the parents height. Instead it appears much further down the page. Heres my code:
* {
margin: 0;
padding: 0;
}
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
}
header {
background-color: yellow;
height: 10%;
width: 100%;
overflow: hidden;
}
header img {
float: left;
}
nav {
float: right;
background-color: grey;
width: 30%;
text-align: center;
margin-top: 1%;
}
nav ul {
list-style-type: none;
}
nav ul li {
display: inline;
}
<header>
<img src="" alt="Reece Barrett's" height="" width="" />
<nav>
<ul>
<li>About Me
</li>
<!--
-->
<li>Porfolio
</li>
<!--
-->
<li>Contact
</li>
</ul>
</nav>
</header>
If you want header to be auto height, Use min-height instead of using height, also remove overflow:hidden otherwise this will hide overflowed content.
header {
background-color: yellow;
min-height: 10%;
width: 100%;
overflow: hidden;
}
For more info https://developer.mozilla.org/en/docs/Web/CSS/min-height
You can use min-height: 10%
heres the fiddle: https://jsfiddle.net/a4sg5b72/
I would approach it using the positioning absolute & relative.
Codepen: http://codepen.io/rezasan/pen/YGmVGo
header {
background-color: yellow;
height: 10%;
width: 100%;
position:relative;
}
header img {
position:absolute;
left:0;
top:50%;
transform:translateY(-50%);
}
nav {
background-color: grey;
width: 30%;
text-align: center;
position:absolute;
right:0;
top:50%;
transform:translateY(-50%);
}
You can try this:
*{
margin: 0;
padding: 0;
}
body{
width: 100%;
height: 1000px;
}
header{
background-color: yellow;
height: 10%;
width: 100%;
}
header img{
float: left;
}
nav{
float: right;
background-color: grey;
width: 30%;
text-align: center;
margin-top: 10%;
}
nav ul{
list-style-type: none;
}
nav ul li{
display: inline;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Home Page</title>
</head>
<body>
<header>
<img src="" alt="Reece Barrett's" height="" width="" />
<nav>
<ul>
<li>About Me</li>
<li>Porfolio</li>
<li>Contact</li>
</ul>
</nav>
</header>
</body>
</html>
It's because overflow: hidden of Head
Related
The nav takes the full screen width and the footer is sticking to the left. Both is wrong and I would like to have the navigation a width of 90% and both be centered. I hope I described the problem comprehensibly.
html code:
#media only screen
and (device-width: 3840px)
and (device-height: 2160px)
and (orientation: landscape) {
body {
width: 90%;
font-size: 300%;
}
.mainHeader img.Margrit {
height: auto;
width: 12%;
top: 20%;
}
.mainHeader img.Logo {
height: auto;
width: 12%;
top: 60%;
}
.mainHeader img.Couture {
height: auto;
left: 0%;
top: -18%;
width: 75%;
}
.mainHeader nav {
width: 90%;
height: 100px;
}
.mainHeader nav ul {
padding-left: 0;
}
.mainHeader nav ul li {
width: 25%;
text-align: center;
}
.mainHeader nav a:link, .mainHeader nav a:visited {
padding: 20px 367px;
height: 59px;
display: inline-block;
}
.mainFooter {
display: table;
height: 100px;
width: 90%;
text-align: center;
}
.mainFooter p {
display: table-cell;
vertical-align: middle;
text-align: left;
padding-left: 1%;
}
}
<!DOCTYPE html>
<html lang="de">
<head>
<title>Couture Anni</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="resources/css/style.css">
<link href="https://fonts.googleapis.com/css?family=Coming+Soon" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header class="mainHeader">
<img class="Logo" src="resources/img/Content_variation_800_e.png" alt="Logo">
<img class="Margrit" src="resources/img/IMG_5347_small.jpg" alt="Annamaria Hofstetter">
<img class="Couture" src="resources/img/Content_variation_800_g.png" alt="Couture Anni">
<nav>
<ul>
<li class="active">Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Kontakt</li>
</ul>
</nav>
</header>
<footer class="mainFooter">
<p>Copyright © couture-anni.ch</p>
</footer>
</body>
</html>
I chose this query because it reproduces the problem. At least I think.
You should keep the body element at 100% and size the other contents from there. margin: 0 auto; takes care of centering your element.
body{
width: 100%;
}
.mainHeader{
width: 90%;
margin: 0 auto;
}
.mainFooter{
position: fixed;
width: 100%;
bottom: 3%;
}
.mainFooter .footerBody{
width: 90%;
margin:0 auto;
height: 40px;
clear: both;
text-align: left;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background-color: #9cb34f;
}
.mainFooter .footerBody p {
display: table-cell;
vertical-align: middle;
text-align: left;
padding-left: 1%;
margin-top: 0;
}
As for your footer, use the mainFooter class as the wrapper for the fixed positioning, then add a 90% sized container inside that and set display: block;
<footer class="mainFooter">
<div class="footerBody">
<p>Copyright © couture-anni.ch</p>
</div>
</footer>
Hope this helps!
I'm trying to create a webpage that will have a fixed sidebar and scrollable content. It does work if I don't have a header div. If I scroll page I have some empty space that previously was a header (i marked it with red color). I'd like my sidebar to cover the empty space after I scroll through header div.
Here's my HTML Code - how can I fix this?
<!doctype html>
<head>
<link rel="stylesheet" href="style.css"type=" text/css"/>
</head>
<body>
<div id="page">
<div id="header">
</div>
<div id="navigation">
<ul>
<li>home</li>
<li>news</li>
<li>contact</li>
<li>about</li>
</ul>
</div>
<div id="content">
<div id="abcd">
</div>
</div>
</body>
CSS
#page
{
position:relative;
width:100%;
height:3000px;
background-color:yellow;
}
#header
{
background-color: blue;
width:100%;
height:150px;
}
#navigation
{
background-color: red;
width:10%;
height:3000px;
float:left;
}
#content
{
float:left;
background-color: green;
width:90%;
overflow: auto;
height:1000px;
}
body
{
margin: 0;
}
ul
{
list-style-type: none;
margin: 0;
padding: 0;
width: 10%;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}
li a
{
display: block;
color: #000;
padding: 8px 0 8px 16px;
text-decoration: none;
}
You have to place your navigation div in outermost part i.e. in body(not in any other div).
I have tested this and its now working fine.
Your new code should be
<html>
<head>
<link rel="stylesheet" href="style.css" type=" text/css" />
</head>
<body>
<div id="navigation">
<ul>
<li>home</li>
<li>news</li>
<li>contact</li>
<li>about</li>
</ul>
</div>
<div id="page">
<div id="header">
</div>
<div id="content">
<div id="abcd">
</div>
</div>
</div>
</body>
</html>
And your modified css:-
#page {
position: relative;
width: 100%;
height: 3000px;
background-color: yellow;
}
#header {
background-color: blue;
width: 100%;
height: 150px;
display: block;
}
#navigation
{
background-color: red;
width:10%;
height:100%;
float:left;
position: absolute;
z-index:1;
}
#content {
float: left;
background-color: green;
width: 90%;
overflow: auto;
height: 1000px;
}
body {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 10%;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}
li a {
display: block;
color: #000;
padding: 8px 0 8px 16px;
text-decoration: none;
}
In css I have changed the navigation's height to 100% and its z-index to 1.
Also you didn't close the div tag with class "page".
Reference:- w3 css sidenav
Please try this:
#navigation {
background-color: red;
width: 10%;
height: 3000px;
float: left;
position: absolute;
z-index: 99999;
left: 0;
top: 0;
}
I'm trying to have an image next to my vertical navbar but it's being displayed under it.
This is how I'm doing it
body
{
font-family: 'Open Sans', sans-serif;
background-color: #333;
}
.element
{
display:inline-block;
float:left;
}
#wrapper
{
position:absolute;
height:100%;
width:200px;
bottom:0px;
background-color:#0F4D92;
}
nav
{
top: 50%;
margin-top: -75px;
position: fixed;
}
ul
{
list-style-type: none;
width: 200px;
height: 40px;
}
<div class="element" id="wrapper">
<nav>
<ul>
<li>Home</li>
<li>Withdraw</li>
<li>Deposit</li>
</ul>
</nav>
</div>
<img class="element" src="../bg.jpg"/>
Yet, this is how it looks:
As you can see the image is behind the navbar. I can't just use a margin because I need an element with the size of the gray space so I can have the image in the center of that space. So how can I fix this?
Gathering from what you want to achieve, I took the liberty to change up your markup and made you a working copy. Less complicated than what you were trying to do I think. I hope this helps in some way.
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
height: 100%;
}
body {
font-family: 'Open Sans', sans-serif;
background-color: #333;
}
.element {
position: relative;
height: 100%;
width: 100%;
font-size: 0;
}
nav,
.imgWrapper {
display: inline-block;
height: 100%;
}
nav {
width: 20%;
background-color: #0F4D92;
font-size: 1rem;
}
nav > * {
position: relative;
top: 50%;
transform: translateY(-50%);
}
.imgWrapper {
vertical-align: top;
width: 80%;
}
.imgWrapper > img {
width: 100%;
height: 100%;
}
ul {
list-style-type: none;
width: 200px;
height: 40px;
}
<div class="element">
<nav>
<ul>
<li>Home
</li>
<li>Withdraw
</li>
<li>Deposit
</li>
</ul>
</nav>
<div class="imgWrapper">
<img src="http://placehold.it/2000x2000" alt="" />
</div>
</div>
Your wrapper for the navbar is position: absolute; which means that none of the other elements will interact with it. Maybe try using position: relative; instead.
By the way you are doing it one solution is to give .element a left margin, but you will always have to set a margin if you want to display something next to your navbar (because its absolute positioned):
.element
{
display:inline-block;
float:left;
margin-left: 210px;
}
Wrapper position causing this problem. You must change it to relative. You also need to change the following:
##wrapper {
position: relative;
}
#wrapper {
float: left;
width: 250px;
overflow: hidden;
}
.element {
float: right;
}
#wrapper,
.element {
display: inline-block;
width: 100%;
}
I have seen a lot of similar topics; however I do not seem to get the css code right.
Layout of my page: has a background image. Then I want to create a white page in the middle with different blocks () starting with navigation at the top, header,content.
Im not getting the navigation bar to display at the top of the page (without space between the top of the browser and the bar) there is a small gap in between). Furthermore I want my content to always fill the screen until 'just' above the lower part of the browser.
HTML
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href ="css/main.css">
</head>
<body>
<div class="wrapper">
<div class="nav">
<ul>
<li>Home</li>
<li>Education</li>
<li>Experience</li>
<li>More</li>
<li>Contact</li>
</ul>
</div>
<div class="header">
</div>
<div class="maincontent">
</div>
</div>
</body>
</html>
CSS
html, body {
height: 100%;
margin: 0;
}
body {
background-image: url("bgimg.png");
background-repeat: repeat;
}
.wrapper{
width: 960px;
height: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 0 auto;
position: relative;
top: 0px;
background-color: white;
}
.nav {
background-color: white;
width: 100%;
height: 40px;
font-family: "Sans-serif", Verdana;
}
.nav li {
float: left;
list-style: none;
float: left;
display: inline;
text-align: center;
width: 20%;
line-height: 40px;
}
.nav a {
display: block;
width: 100px;
}
.header {
background-color: #F7D358;
width: 960px;
height: 100px;
position: relative;
top: 0px;
}
.maincontent {
background-color: white;
height: 100%;
margin: 0;
padding:0;
}
Easiest way in this case is to set:
.nav ul {
margin: 0;
}
I recommend you (highly) to use CSS RESET STYLE to avoid these problems.
Example: http://meyerweb.com/eric/tools/css/reset/
I can't figure out why my nav bar is not going all the way across the top! I'm sure it's a super easy fix. This is for a full page slider. I only included the relevant html/css. hope that is enough!
HTML
<!DOCTYPE>
<link rel="stylesheet" href="style.css" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
<head>
<title>Full Page Slider</title>
</head>
<nav>
<a id="home">Home</a>
<a id="">About</a>
<a id="">Contact</a>
<div class="sliderButtons"></div>
</nav>
<div id="full-slider-wrapper">
<div id="full-slider">
<div class="slide-panel active ">
Panel 1 content here
</div><div class="slide-panel">
Panel 2 content here
</div>
</div>
</div>
CSS
* { margin:0; padding:0; }
p { margin:5px 0 10px 0; }
html {
min-width: 100%;
font-family: 'Lato', sans-serif;
}
nav {
text-align: left;
margin-left: 16%;
border-bottom-style:ridge;
background-color: FF7400;
}
nav a {
font-size:20px;
text-decoration:underline;
display: inline-block;
padding: 1em;
}
div.sliderButtons {
float: right;
margin-right: 20%;
}
#full-slider-wrapper {
overflow: hidden;
}
#full-slider {
position: relative;
width: 800px;
height: 600px;
margin: 0 auto;
}
#full-slider .slide-panel {
position: absolute;
top: 0;
left: 0;
width: 800px;
height: 600px;
visibility: hidden;
}
#full-slider .slide-panel.active {
position: absolute;
visibility: visible;
}
#full-slider-nav {
position: relative;
top: 0;
right: 0;
}
#full-slider-nav-left, #full-slider-nav-right {
display: inline-block;
height: 0;
width: 0;
margin-left: 15px;
border: 20px solid transparent;
cursor: pointer;
}
Your nav element has margin-left: 16%;. Change or remove that rule.
jsFiddle example
You mean - why it does not take the full width? If so - look closely, your nav selector got a margin-left of 16%
remove margin-left: 16%; & change text-align: left; to text-align:center;
use Div forget about nav
hope it helps you. Enjoy.