So I'm working on a portfolio website for myself (just for fun), and I have gotten a nav bar developed that I really like. Now, I cannot seem to close the overall nav bar div parent, and every div that I insert seems to appear inside the nav bar div as a child, even though I've checked about 20 times to make sure everything is closed. Did I do something in my CSS that is forcing it to stay open and create more children?
If you look in the HTML code, the picture div keeps appearing inside my nav bar. It's extremely frustrating.
<DOCTYPE html>
<html>
<head>
<title>Jeff Lester | Portfolio</title>
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div class="nav">
<div class="buttons">
<div class="programming">
<p>Programming</p>
</div>
<div class="cinematography">
<p>Cinematography</p>
</div>
<div class="photography">
<p>Photography</p>
</div>
<div class="skills">
<p>Skills</p>
</div>
<div class="bio">
<p>Bio</p>
</div>
<div class="jeff_lester">
<p>Jeff Lester</p>
</div>
</div>
</div>
<div class="picture"><p>Picture</p></div>
</body>
</html>
body {
background-image: url('retina_wood_#2X.png')
}
/* Navigation Bar */
.nav {
background-color: #F5F5F5;
height: 75px;
width: 100%;
position: fixed;
line-height: 70px;
border-top: 4px solid #6E94E6;
border-bottom: 1px solid #DEDEDE;
opacity: 0.80;
}
.nav a {
color: #858585;
text-decoration: none;
display: block;
}
.nav a:hover {
color: #303030;
}
/* Approx. 62% of page */
.nav .buttons {
width: 1202px;
margin: 0 auto;
}
.nav .buttons .programming {
background-color: #F5F5F5;
height: 70px;
width: 140px;
text-align: center;
border-right: 1px solid #DEDEDE;
float: right;
}
.nav .buttons .cinematography {
background-color: #F5F5F5;
height: 70px;
width: 140px;
text-align: center;
border-right: 1px solid #DEDEDE;
float: right;
}
.nav .buttons .photography {
background-color: #F5F5F5;
height: 70px;
width: 140px;
text-align: center;
border-right: 1px solid #DEDEDE;
float: right;
}
.nav .buttons .Skills {
background-color: #F5F5F5;
height: 70px;
width: 140px;
text-align: center;
border-right: 1px solid #DEDEDE;
float: right;
}
.nav .buttons .bio {
background-color: #F5F5F5;
height: 70px;
width: 140px;
text-align: center;
border-left: 1px solid #DEDEDE;
border-right: 1px solid #DEDEDE;
float: right;
}
.nav .buttons .jeff_lester {
background-color: #6E94E6;
height: 70px;
width: 100px;
text-align: center;
border-left: 1px solid #DEDEDE;
border-right: 1px solid #DEDEDE;
margin-right: 400px;
float: right;
}
.nav .buttons .jeff_lester a {
color: #F5F5F5;
}
.nav .buttons .jeff_lester a:hover {
color: #303030;
}
Thats because the .nav element is position:fixed. Changed to position:relative and done
here is fixed
http://jsbin.com/fokunixa/1/edit
Update:
to make the .nav fixed without affecting the others element(in this case .picture) you have to set the .picture relative and give some margin from top.
.picture{
position:relative;
top:20px;
}
Here the example.
There are some great post that talk about positioning:
Difference between style = "position:absolute" and style = "position:relative"
http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
You can keep the postion fixed if you want that effect. You need to take into account however that fixed positioned elements are lifted out of the document flow. That is why your 'picture' is not getting pushed down to the postion you would expect it to be and it appears to be inside your nav.
This can easily be solved by adding a margin-top to your body that equals the height of your fixed header, and setting the top value of your header to 0.
I went ahead and copied your code to a fiddle and added my suggestions:
http://jsfiddle.net/uHFv4/
Off topic: just because I can't help it, I know that this is not codereview, but your markup is quite horrible. You navigation is a list of links and should look something like:
<nav>
<ul>
<li class="programming">
Programming
</li>
...
And in your css, you write all the styles for each button, while most often they are all the same except for the width. I sense some room for improvement there...
First option: Remove position: fixed; from the .nav
DEMO
.nav {
background-color: #F5F5F5;
height: 75px;
width: 100%;
line-height: 70px;
border-top: 4px solid #6E94E6;
border-bottom: 1px solid #DEDEDE;
opacity: 0.80;
}
If you really want your .nav to be fixed while scrolling the page, then
DEMO
Add padding to your body
body {
background-image: url('retina_wood_#2X.png');
padding-top: 80px;
}
Add top:0 in .nav
.nav {
background-color: #F5F5F5;
height: 75px;
width: 100%;
position: fixed;
line-height: 70px;
border-top: 4px solid #6E94E6;
border-bottom: 1px solid #DEDEDE;
opacity: 0.80;
top: 0;
}
When you using floats, they change the layout of the page. the document dosen't render a height for them. In the picture class you should write clear:both; to clear the floats and change the position of the nav to position relative as answered above. Like this:
.nav {
background-color: #F5F5F5;
height: 75px;
width: 100%;
position: relative;
line-height: 70px;
border-top: 4px solid #6E94E6;
border-bottom: 1px solid #DEDEDE;
opacity: 0.80;
}
.picture{
position: relative;
clear: both;
}
If you want to keep your header as position fixed then you can specify that it stays at the top of the document with top: 0px; and then give the picture class a top margin of 70px or so, i.e the height of the nav. like this:
.nav {
background-color: #F5F5F5;
height: 75px;
width: 100%;
position: fixed;
top: 0px;
line-height: 70px;
border-top: 4px solid #6E94E6;
border-bottom: 1px solid #DEDEDE;
opacity: 0.80;
}
.picture{
position: relative;
margin-top: 70px;
}
I've tested both of these and they work :) Good luck :)
Related
I have a header element in a header div but for some reason i can't seem to add any bottom margin or padding to it. Margin/padding top, left, and right work find however. is there a reason for this? here is my code.
html
<div id="Container">
<div id="Header">
<h1>My Webpage</h1>
</div>
</div>
css
#Container {
position: relative;
width: 96%;
height: 98%;
left:2%;
background-color: black;
border-radius: 10px;
box-shadow: 0px 0px 15px 5px;
}
/----------------------------------------/
#Header {
position: absolute;
height: 15%;
width: 100%;
/*background-color: red;*/
border-bottom: 2px solid #e8e2e2;
}
#Header h1 {
font-size: 2.5em;
text-align: center;
color:#e8e2e2;
/*background-color: red;*/
}
I would avoid using position styling like that; it tends to interfere with the way block elements interact with each other. Based on the styles and markup provided, I don't see a reason why padding/margin would not be working; however your example doesn't actually show any padding/margin applied, so it's hard to say what might be going wrong.
I would alter your styling thusly:
#Container {
width: 96%;
margin-left: auto;
margin-right: auto;
background-color: black;
border-radius: 10px;
box-shadow: 0px 0px 15px 5px;
}
#Header {
height: 15%; /* This should really be a static number, not a percentage*/
width: 100%;
border-bottom: 2px solid #e8e2e2;
margin-bottom: 20px; /* This will push elements below your header div down by 20 px*/
}
Try to add pading to header tag's self. Because it is relative to other containers.
#Container {
position:relative;
width: 96%;
height: 98%;
left:2%;
background-color: black;
border-radius: 10px;
box-shadow: 0px 0px 15px 5px;
}
#Header {
position:relative;
height: 15%;
width: 100%;
/*background-color: red;*/
border-bottom: 2px solid #e8e2e2;
}
#Header h1 {
position:relative;
padding-top:20px;
font-size: 2.5em;
text-align: center;
color:#e8e2e2;
/*background-color: red;*/
}
<div id="Container">
<div id="Header">
<h1>My Webpage</h1>
</div>
</div>
Firstly, please add #for Container as in #Container in css.
Below is the code where I have added margin bottom for h1. Please let me know if you still have any troubles.
<html>
<head>
<style type="text/css">
#Container {
position: relative;
width: 96%;
height: 98%;
left:2%;
background-color: black;
border-radius: 10px;
box-shadow: 0px 0px 15px 5px;
}
#Header {
position: absolute;
height: 15%;
width: 100%;
/*background-color: red;*/
border-bottom: 2px solid #e8e2e2;
}
#Header h1 {
font-size: 2.5em;
text-align: center;
color:#e8e2e2;
border:1px solid red;
margin-bottom:10px;
}
</style>
</head>
<body>
<div id="Container">
<div id="Header">
<h1>My Webpage</h1>
<p>some text here</p>
</div>
</div>
</body>
</html>
Hope this helps.
Thanks
Padding-bottom and margin-bottom does actually work, it's just that it's not visible because you're currently setting the height of #Header to 15% and then giving it that light grey bottom border. This is what gives the illusion that padding-bottom or margin-bottom doesn't work.
See working version here http://codepen.io/sajadtorkamani/pen/zxxzgo
HTML
<div id="Container">
<div id="Header">
<h1>My Webpage</h1>
</div>
</div>
CSS
Container {
position: relative;
width: 96%;
height: 98%;
left:2%;
background-color: black;
border-radius: 10px;
box-shadow: 0px 0px 15px 5px;
}
#Header {
position: absolute;
/* height: 15%; */
width: 100%;
/*background-color: red;*/
border-bottom: 2px solid #e8e2e2;
}
#Header h1 {
font-size: 2.5em;
text-align: center;
color:#e8e2e2;
padding-bottom: 20px;
/*background-color: red;*/
}
Just commenting out height: 15% for #Header solves the issue.
I am trying to make a simple chatbox with a header in css, I am trying to align the chat to the bottom of the page, and to the right of the page. I have tried using
float: right;
bottom: 0;
position: absolute;
It aligns it to the bottom of the page but not to the right. Here is my full code
CSS
#chatbox {
height: 360px;
width: 320px;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
float: right;
bottom: 0;
position: absolute;
}
.chatheader {
font-family:'PT Sans';
background: #999;
width: 322px;
height: 36px;
color: #fff;
text-align: center;
padding-top: 15px;
}
HTML
<div class="chatheader">chatboxheader</div>
<div id="chatbox">
</div>
Here is a demo of the code DEMO
This is just a very simple script because I am trying to get it aligned first, later On I will make it look better. Thanks in advance to anyone who can help me!
Since you want both chatheader and chatbox on the bottom right of the page. I have modified code little bit. I have wrapped both of them in a div.
HTML:
<div id="chat-container">
<div class="chatheader">chatboxheader</div>
<div id="chatbox"></div>
</div>
CSS:
#chat-container {
right :0;
bottom: 0;
position: absolute;
}
right:0 will keep the element on extreme right.
Updated fiddle here.
DEMO
HTML
#chatbox {
height: 360px;
width: 320px;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
}
.chatheader {
font-family:'PT Sans';
background: #999;
width: 322px;
height: 36px;
color: #fff;
text-align: center;
padding-top: 15px;
float:right;
}
.chatMain {
position:absolute;
bottom:0;
right:0;
}
Okay, so this is all supposed to be in one 139px height header and it renders as such in dreamweaver, but as soon as I view it in a browser the menu div splits down onto a second row.
Here's the HTML:
<div id="header">
<div id="header2">
<div id="title">
<img src="titleimg.png" border="0" />
</div>
<div id="menu">
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
<div id="five"></div>
</div>
</div>
</div>
And here is the CSS:
#header {
top: 0;
left: 0;
position: fixed;
height: 139px;
width: 100%;
background-image: url('headerbg.png');
border-bottom: solid 1px #797978;
text-align: center;
display: inline-table;
}
#header2 {
width: 1040px;
margin: 0 auto;
text-align: left;
}
#title {
padding-top: 27px;
width: 287px;
height: 112px;
background-image: url('title3d.png');
background-repeat: no-repeat;
background-position: right bottom;
float: left;
}
#menu {
width: 753px;
height: 13px;
border-left: solid 1px #474747;
display: inline-table;
}
#one {
width: 19%;
height: 139px;
border-right: solid 1px #474747;
float: left;
}
#two {
width: 19%;
height: 139px;
border-right: solid 1px #474747;
float: left;
}
#three {
width: 19%;
height: 139px;
border-right: solid 1px #474747;
float: left;
}
#four {
width: 19%;
height: 139px;
border-right: solid 1px #474747;
float: left;
}
#five {
width: 19%;
height: 139px;
border-right: solid 1px #474747;
float: left;
}
Help would be greatly appreciated!
You are making the mistake of thinking your total width is 1040px by just adding up the width of #menu and #title but you are forgetting that you also have a 1px border-left on your #menu hence your width becomes 1041 and hence gets pushed over. so if you reduce either the menu or title's width by 1pixel you will be good to go :)
Also you can save some code on the css for the menu elements if you are going to repeat the same code for #one, #two etc etc:
#menu > div {
width:19%;
height:139px;
border-right: solid 1px #474747;
float:left;
}
The width of your title element is set to 287px; which is larger than the container.
I have tweaked up your code a little bit to make it sane.
http://jsfiddle.net/gwfQt/
The issue what you are actually facing is, you have divided the width of #title and #menu completely within 1040px which is the width of your header.
However, you didn't take into account that DIV within #menu has borders.
Also suggest you use classes if you have repetitive styles for different divs.
Let me know if I can improve my answer with better code.
My case is as follows. I have a div with two children divs. I'd like the 'event' div to be 300px of width and height. First requirement is to keep the size of the 'event' div when 'content' and 'bar' elements use 100% of parent's width. Secondly as for now, borders of 'content' element are not visible. Is it possible to fit everything inside without using hardcoded values and get this display properly in most of the modern browsers (FF, Chrome, Opera, IE7+) ?
This is what I'd like to achieve (notice the left red bar which takes 100% height and doesn't collide with the grey border around the event element):
And this is what I have. Html :
<div id="wrapper">
<div id="scheduler">
<div class="event" style="top: 30px; height: 300px; width: 300px">
<div class="bar"></div>
<div class="content">
<div class="inner-content">Some text</div>
</div>
</div>
</div>
</div>
, css :
#wrapper {
width: 600px;
height: 600px;
}
#scheduler {
background-color: #E1FFFE;
display: block;
height: 100%;
width: 100%;
padding: 0 10px;
position: relative;
}
#scheduler .event {
display: block;
float: left;
position: relative;
width:100%;
overflow:hidden;
}
#scheduler .event .bar {
background-color: red;
display: inline;
float: left;
height: 100%;
position: relative;
width: 5px;
}
#scheduler .event .content {
background-color: white;
border: 1px solid #CCCCCC;
border-left: none;
display: inline;
float: left;
height: 100%;
position: absolute;
width: 100%;
}
and a runnable demo :
http://jsfiddle.net/6nTvD/1/
Try this. Take out the bar div, then change the .content css to:
#scheduler .event .content {
background-color: white;
border: 1px solid #CCCCCC;
border-left: 5px solid red; // replaces the bar
display: inline;
float: left;
height: 99%; // a bit of a hack to fit the border in
position: relative;
width: 98%; // hack
}
http://jsfiddle.net/Dp3yz/
EDIT: Code with the .bar still in place:
#scheduler .event .bar {
background-color: red;
display: inline;
float: left;
height: 99.9%; /* Small offset at bottom */
position: relative;
width: 5px;
}
#scheduler .event .content {
background-color: white;
/* revised border */
border-top: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
display: inline;
float: left;
height: 99%;
position: absolute;
width: 98%;
}
New version:
http://jsfiddle.net/JJrC9/1/
I don't think I fully understand your quandary, however, with the only difference I can spy between your desired outcome and your current work being the presence of the borders -- switching overflow:hidden; on #scheduler .event to overflow:visible; produces something that visually looks to me like it achieves the desired affect.
Imagine (or if you can't imagine, watch) this piece of code:
<div class="block"></div>
<style>
.block {
width: 10px;
height: 10px;
display: block;
background-color: red;
border: 1px solid #000000;
border-bottom: 0;
}
</style>
Now look at the bottom line. This is my problem; I want the left and right border to be 1px longer (so the bottom border is the part between the left border and right border).
Is it possible to accomplish this??
This is a way to do it, since the box model does not support what you need, using only one div:
<div class="block"><div></div></div>
and the css:
.block {
width: 10px;
height: 10px;
border: 1px solid #000000;
border-bottom: 0;
padding-bottom: 1px;
}
.block div {
width: 10px;
height: 10px;
background-color: red;
}
This will extend the black border on the left and right side with 1px.
Try this :)
http://jsfiddle.net/z6ASC/
This is possible if you have two containers, one for the outside left/right borders, and one for the inside bottom-border. I've put together a demo showing this.
DEMO:
http://wecodesign.com/demos/stackoverflow-7074782.htm
<style type="text/css">
#borderOutside {
height: 200px;
width: 300px;
border:1px solid #900;
border-bottom: none;
padding-bottom: 5px; /*this is the gap at the bottom*/
}
#borderInside {
height: 100%;
border-bottom: 1px solid #900;
}
</style>
<div id="borderOutside">
<div id="borderInside"><!--Your Content--></div>
</div>
It can be done without adding any extraneous elements in your HTML via this strategy:
.block {
position: relative;
width: 10px;
height: 10px;
display: block;
background-color: red;
}
.block:before {
position: absolute;
content: '';
width: 10px;
height: 11px;
top: -1px;
left: -1px;
border: 1px solid #000;
border-bottom: none;
}
The pseudo element :before is only supported from IE8, but works in all other major browsers.