The thing is, i have a sided fixed nav menu with 230px width and now I want to make a fixed top nav bar with 100% width.
But when I add any element with right float in the top navigation bar, the elements are all hidden because the bar has 100% width plus 230px from the sidebar.
nav#fixed-nav-top {
position: fixed;
top: 0;
left: 230px;
z-index: 9999;
width: 100%;
height: 50px;
border-left: 1px solid #191b1b;
background-color: #141616;
border-bottom: 1px #252525 solid;
}
nav#nav-sided {
position: fixed;
font-family: "Helvetica"; /* Tahoma */
color: #c1c1c1;
height: 100%;
width: 230px;
top: 0;
left: 0;
background-color: #262626;
border-right: 1px #252525 solid;
z-index: 8888;
}
<nav id="fixed-nav-top">
<div id="top-main">
</div>
<div id="user-area">
</div>
</nav>
<nav id="nav-sided">
<div id="logo">
<div class="main-logo">:)</div>
</div>
other stuffs
</nav>
With your current styles, instead of width:100% (remove this), add right:0:
nav#fixed-nav-top {
position: fixed;
top: 0;
left: 230px;
right:0;
z-index: 9999;
height: 50px;
border-left: 1px solid #191b1b;
background-color: #141616;
border-bottom: 1px #252525 solid;
}
Example:
nav#fixed-nav-top {
position: fixed;
top: 0;
left: 230px;
right:0;
z-index: 9999;
height: 50px;
border-left: 1px solid #191b1b;
background-color: #141616;
border-bottom: 1px #252525 solid;
}
nav#nav-sided {
position: fixed;
font-family: "Helvetica"; /* Tahoma */
color: #c1c1c1;
height: 100%;
width: 230px;
top: 0;
left: 0;
background-color: #262626;
border-right: 1px #252525 solid;
z-index: 8888;
}
<nav id="fixed-nav-top">
<div id="top-main">
</div>
<div id="user-area">
</div>
</nav>
<nav id="nav-sided">
<div id="logo">
<div class="main-logo">:)</div>
</div>
other stuffs
</nav>
You don't need calc or anything fancy, it's simple as this. Of course you can make the sidebar be above the navbar if you'd like to, here it is below it.
Note that you can use box-sizing: border-box to make your life much easier.
* {
box-sizing: border-box;
}
.body {
padding-left: 200px;
padding-top: 50px;
}
.sidebar {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 200px;
padding-top: 50px;
background: red;
}
.left {
float: left;
}
.right {
float: right;
}
.navbar {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 50px;
padding-left: 200px;
background: black;
color: white;
}
<div class="body">
<div class="sidebar">Sidebar</div>
<div class="navbar">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="main">Blablabla</div>
</div>
style:
div{
position:absolute;
left:230px;
right:0px;
}
example: JSFiddle
or:
div{
margin-left:230px;
}
example: JSFiddle
Related
Here is a fiddle i tried to make to produce the issue:
http://jsfiddle.net/BPJxD/1/
With the markup of top, middle, and bottom sections, problem is:
1- As you can see the footer colored in black is not really on the bottom of the page despite having position:absolute and bottom:0px on the footer div
2- More importantly, leftSection, middleSection and rightSection DIVs overlap with the header and footer DIVs, in fact, in this fiddle the only way to see the text displayed of the 3 middle sections is to have padding placed to avoid having it displayed underneath the header DIV.
I have tried placing top and bottom values of 30px on middleContainer to fix the overlap issue but this does not solve the problem, all I want is to keep headerContainer on top and footerContainer on the bottom while all the 3 middle sections adjust to 100% height. leftSection and rightSection have fixed width, but middleSection has flexible width and height.
body {
margin: 0;
}
#mainContainer {
position: absolute;
right: 4%;
left: 4%;
height: 100%;
}
#headerContainer {
width: 100%;
z-index: 10;
position: absolute;
background: #323232;
color: white;
height: 30px;
}
#middleContainer {
height: 100%;
}
#leftSection {
position: absolute;
float: left;
width: 175px;
background: #71ABD1;
height: 100%;
overflow: auto;
color: black;
padding-top: 30px;
}
#middleSection {
position: absolute;
height: 100%;
background-color: yellow;
left: 175px;
right: 175px;
color: black;
padding-top: 30px;
}
#rightSection {
float: right;
height: 100%;
width: 175px;
border-left: 1px dotted black;
background: red;
color: black;
padding-top: 30px;
}
#footerContainer {
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
background: #323232;
color: white;
}
<div id="mainContainer">
<div id="headerContainer">
headerContainer
</div>
<div id="middleContainer">
<div id="leftSection">
leftSection
</div>
<div id="middleSection">
middleSection
</div>
<div id="rightSection">
rightSection
</div>
</div>
<div id="footerContainer">
footerContainer
</div>
</div>
All of your divs are padding-top 30px and 100% - that makes the container 100%+30px high
Try
height: calc(100% - 30px);
body {
margin: 0;
}
#mainContainer {
position: absolute;
right: 4%;
left: 4%;
height: 100%;
}
#headerContainer {
width: 100%;
z-index: 10;
position: absolute;
background: #323232;
color: white;
height: 30px;
}
#middleContainer {
height: 100%;
}
#leftSection {
position: absolute;
float: left;
width: 175px;
background: #71ABD1;
height: calc(100% - 30px);
overflow: auto;
color: black;
padding-top: 30px;
}
#middleSection {
position: absolute;
height: calc(100% - 30px);
background-color: yellow;
left: 175px;
right: 175px;
color: black;
padding-top: 30px;
}
#rightSection {
float: right;
height: calc(100% - 30px);
width: 175px;
border-left: 1px dotted black;
background: red;
color: black;
padding-top: 30px;
}
#footerContainer {
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
background: #323232;
color: white;
}
<div id="mainContainer">
<div id="headerContainer">
headerContainer
</div>
<div id="middleContainer">
<div id="leftSection">
leftSection
</div>
<div id="middleSection">
middleSection
</div>
<div id="rightSection">
rightSection
</div>
</div>
<div id="footerContainer">
footerContainer
</div>
</div>
I would like to center a circle on a line, like this:
I've got the following code:
.circle {
width: 75px;
height: 75px;
border-radius: 50%;
position: absolute;
left: 76%;
top: 41px;
background-color: #000;
}
.box {
width:500px;
height:150px;
position: relative;
border: 1px solid #eee;
.left {
width:200px;
height:100%;
position:relative;
}
<div class="Box">
<div class="Left">
<div class="circle">
</div>
</div>
<div class="Right"></div>
</div>
However, when i resize the windows, it ends up like this:
How can i make sure the circle stays in place, even when i resize my window?
You could take a different approach and use the border-right property on the .left div to represent the vertical line behind the .circle:
.circle {
width: 75px;
height: 75px;
border-radius: 50%;
position: absolute;
right: -37.5px; /* modified / - half of the circle's width */
top: 41px;
background-color: #000;
}
.box {
width: 500px;
max-width: 100%; /* added / responsive */
height: 150px;
position: relative;
border: 1px solid #eee;
}
.left {
width: 200px;
max-width: 100%; /* added / responsive */
height: 100%;
position: relative;
border-right: 1px solid #eee; /* added */
}
<div class="box">
<div class="left">
<div class="circle">
</div>
</div>
<div class="right"></div>
</div>
Another simply way to do this is using pseudo element like this :
.box {
margin: 10px auto;
max-width: 400px;
border: 1px solid #000;
text-align: center;
position: relative;
}
.box:before {
content: " ";
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 1px;
margin-left: -0.5px;
background: #000;
}
.cirle {
display: inline-block;
width: 100px;
height: 100px;
border-radius: 50%;
background: #000;
margin: 20px 0;
}
<div class="box">
<div class="cirle"></div>
</div>
this part of the code will make sure the line will stay at the center:
.box:before {
left: 50%;
margin-left: -0.5px;
}
I am having trouble adding gray color to the left of that div.
<div class="full-width">
<div class="footer-nav">
<div class="footer-nav-left">
<p class="text-center"> © Copyright 2016. All Rights Reserved </p>
</div>
<div class="footer-nav-right">
Nav links here
</div>
</div>
</div>
Please check link below for full code:
JS Fiddle
What I need is:
A 60 deg angle requires uneven borders.
.footer-nav-left:after { /* note, now an 'after' */
content: '';
line-height: 0;
font-size: 0;
width: 0;
height: 0;
border-top: 80px solid gray;
border-bottom: 0px solid transparent;
border-left: 0px solid transparent;
border-right: 40px solid transparent; /* half border-top */
position: absolute;
top: 0;
left: 100%;
}
For the grey background extending to the left side of the viewport, use another pseudo-element
.footer-nav-left:before {
content: '';
line-height: 0;
font-size: 0;
width: 50vw;
height: 100%;
background: inherit;
position: absolute;
top: 0;
right: 100%;
}
body {
margin: 0;
}
.full-width {
background-color: black;
overflow: hidden;
/* no scroll bar */
}
.footer-nav {
min-height: 80px;
width: 480px;
margin: 0 auto;
}
.footer-nav-left {
background-color: gray;
min-height: 80px;
position: relative;
float: left;
color: #FFFFFF;
z-index: 1001;
}
.footer-nav-left:before {
content: '';
line-height: 0;
font-size: 0;
width: 50vw;
height: 100%;
background: green;
/* for demo purposes: use inherit for production */
position: absolute;
top: 0;
right: 100%;
z-index: -1;
}
.footer-nav-left:after {
content: '';
line-height: 0;
font-size: 0;
width: 0;
height: 0;
border-top: 80px solid gray;
border-bottom: 0px solid transparent;
border-left: 0px solid transparent;
border-right: 40px solid transparent;
position: absolute;
top: 0;
left: 100%;
}
.footer-nav-left p {
margin-top: 30px;
font-size: 15px;
}
<div class="full-width">
<div class="footer-nav">
<div class="footer-nav-left">
<p class="text-center">© Copyright 2016. All Rights Reserved</p>
</div>
<div class="footer-nav-right">
Nav links here
</div>
</div>
</div>
Note: the angled border only works (as would any) because the height of the parent is known. Percentage width borders are not yet possible.
Like this?
New css:
.footer-nav{
min-height: 80px;
width:100%; // <-- changed
margin:0 auto;
}
.footer-nav-left p{
margin-top: 30px;
font-size:15px;
margin-left: 80px; // <-- changed
}
Updated fiddle
Not sure about your border issue;
.footer-nav-left p{
margin-top: 30px;
font-size:15px;
margin-left:80px;
}
.footer-nav{
min-height: 80px;
width:960px;
margin:0 auto;
position:relative;
}
.footer-nav-left{
background-color:gray;
min-height:80px;
position: absolute;
left:0;
color:#FFFFFF;
z-index:1001;
}
I want the border div to be "hidden" behind the circle and not cross through it. I thought z-index was the way to do things like this.
Any ideas?
JSFIDDLE: http://jsfiddle.net/qs5xmege/1/
CSS and HTML
.container {
width: 15%;
height: 100px;
float: left;
position: relative;
}
.circle {
width:22px;
height:22px;
border-radius:11px;
border: 3px solid red;
background-color: #FFF;
margin: 30px auto 0 auto;
z-index: 100;
}
.border {
width: 50%;
height: 100px;
position: absolute;
border-right: thin solid black;
top: 0;
left: 0;
z-index: 1;
}
<div class="container">
<div class="border"></div>
<div class="circle"></div>
</div>
Give .circle a position:relative, z-index works only with position:relative, position:absolute or position: fixed
.container {
width: 15%;
height: 100px;
float: left;
position: relative;
}
.circle {
width:22px;
height:22px;
border-radius:11px;
border: 3px solid red;
background-color: #FFF;
margin: 30px auto 0 auto;
position: relative;
z-index: 100;
}
.border {
width: 50%;
height: 100px;
position: absolute;
border-right: thin solid black;
top: 0;
left: 0;
z-index: 1;
}
<div class="container">
<div class="border"></div>
<div class="circle"></div>
</div>
Add position:relative; to .circle.
z-index need relative, absolute or fixed vaue for position.
Set position:relative of div circle and z-index:2 ie. 1 more than border is enough
.circle {
background-color: #FFFFFF;
border: 3px solid #FF0000;
border-radius: 11px;
height: 22px;
margin: 30px auto 0;
position: relative;
width: 22px;
z-index: 2;
}
Snippet
.container {
width: 15%;
height: 100px;
float: left;
position: relative;
}
.circle {
background-color: #FFFFFF;
border: 3px solid #FF0000;
border-radius: 11px;
height: 22px;
margin: 30px auto 0;
position: relative;
width: 22px;
z-index: 2;
}
.border {
width: 50%;
height: 100px;
position: absolute;
border-right: thin solid black;
top: 0;
left: 0;
z-index: 1;
}
<div class="container">
<div class="border"></div>
<div class="circle"></div>
</div>
Try like this:
.circle {
background-color: #fff;
border: 3px solid red;
border-radius: 11px;
display: block;
height: 22px;
margin: 0 auto;
position: relative;
top: -68px;
width: 22px;
}
.border {
border-right: thin solid black;
height: 100px;
width: 50%;
}
I have the following html code:
<div class="main">
<div class="sidebar">
<div class="sidebar-footer">
</div>
</div>
</div>
and css:
.main {
position: relative;
}
.sidebar {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 500px;
margin-bottom: 10px;
}
I need sidebar-footer to align itself to the bottom of sidebar also. How do I do this?
Working fiddle.
CSS:
.main {
border: solid 1px blue;
position: relative;
}
.sidebar {
border: solid 1px red;
position: relative;
bottom: 0;
left: 0;
right: 0;
height: 500px;
margin-bottom: 10px;
}
.sidebar-footer
{
border: solid 1px green;
position: absolute;
width: 100%;
bottom: 0px;
}