Being new to HTML and CSS i was trying to create a Sticky Navigation Bar and it seems like i did not code it right. I have posted my code below, please do help me out with the issue.
Thanks.
<!DOCTYPE>
<html>
<head>
<title>test</title>
<style>
html,
body {
margin: 0;
padding: 0;
}
nav{
min-height: 40px;
height: 55px;
background-color: #67518e;
width: 100%;
}
div{
padding-top: 30px;
padding-bottom: 30px;
border-top: 1px solid green;
border-bottom: 1px solid green;
background-color: yellow;
width: 100%;
}
</style>
</head>
<body>
<nav>
</nav>
<div>
</div>
</body>
</html>
You need to use position: fixed on you nav with top and left values..
top:0;
left:0;
position:fixed;
and your div need to have margin-top equal to nav-height, otherwise it will just overlay each togther;
margin-top:55px;
Here is a fiddle; http://jsfiddle.net/h9u1fe4v/
Related
I have a site with 4 div tags:
Header (for navigation etc)
Logoheader (for a Logo)
content (my site content)
footer (for additional information)
the header and logo div should have a fix height and both should be 100% in their widht.
the footer div has a fix height of 132px and should be at the very bottom of the page.
The content div should fill the rest of the space which is left between the logoheader and the footer.
Here my code:
html:
<html>
<head>
<title>test</title>
<link href="_css/main.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="headerWrapper"></div>
<div id="logoWrapper"></div>
<div id="contentWrapper"></div>
<div id="footerWrapper"></div>
</body>
</html>
css:
body, html {
background-color: green;
margin: 0;
padding: 0;
}
#headerWrapper {
background-color: #ff6b2b;
height: 45px;
}
#logoWrapper {
background-color: white;
width: 100%;
height: 100px;
border-bottom: 1px solid black;
}
#contentWrapper {
margin-left: auto;
margin-right: auto;
height: 100%;
width: 70%;
background-color: red;
}
#footerWrapper {
background-color: #ff6a2b;
height: 132px;
border-top: 1px solid black;
}
The outcome isnt really what I was looking for, maybe someone can help me to fix this problem. Because the whole site should be visible without scrolling.
Greetings :)
I want the green div to be below the blue div instead of on top of it without changing either of their position values and using pure css only.
http://jsfiddle.net/LpjgLydv/40/
Is this possible?
Assumptions:
I may use inline css only
This is for a footer that needs to stay at the bottom regardless of how much content is on the page
Any other element on the page besides the footer (and html,head,body) may or may not exist at any given time
The footer is nested in <body> and cannot be placed anywhere else
I figured it out. Basically I had to add a relative position and a min-height to the html attribute as well as a margin-bottom to the body attribute:
http://jsfiddle.net/LpjgLydv/44/
html
<html>
<head>
</head>
<body>
<div class="box"></div>
<div class="box2"></div>
</body>
</html>
css
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 250px;
}
.box
{
border: solid 10px blue;
position: relative;
height:900px;
width:380px;
margin-top: 5px;
margin-left: 8px;
}
.box2
{
border: solid 10px green;
position: absolute;
bottom:0px;
left:8px;
height: 180px;
width: 380px;
}
It now meets the criteria of all of the assumptions in the question.
You can use this without positioning.
.inner-box
{
border: solid 10px blue;
height:900px;
width:380px;
margin-top: 5px;
float:left;
}
.inner-box2
{
border: solid 10px green;
float:left;
bottom:0px;
height: 180px;
width: 380px;
clear:both;
}
I got a problem with HTML, the problem is footer overlay in main like this image
I want to create a left sidebar in main page, a header at a top, and a footer. Besides I used RenderBody() for main in my HTML:
<div class="left">
LEFT
</div>
<div id="main">
#RenderBody()
</div>
<div id="footer">
built with <a target="_blank" href="http://asp.net/mvc"> ASP.NET MVC 4</a>
<button style="margin-left: 25px; float:left">Slide Toggle</button>
</div>
Here my CSS:
#main
{
position: absolute;
left:178px; top:92px; right:0; bottom:0;
}
#left {
position:absolute;
float:left;
width: 178px;
min-height: 400px;
}
#footer
{
clear: both;
padding: 10px;
text-align: right;
border-top: 1px dotted #8A8575;
border-bottom: 1px dotted #8A8575;
clear: both;
font-family: Constantia, Georgia, serif;
}
Any suggestions how to fix that problem.
Firstly, it should be div id="left" in your html since in your css "#left" not ".left".
Secondly, what lee8oi said is true.You can try his method.
Thirdly, you also can applying this method jsfiddle by adding a new div (set display:inline-block) to wrap #left and #main by set "#left" as float:left and "#main" as float:right.
.wrapper
{
display:inline-block;
}
#main
{
background-color:yellow;
float:right;
}
#left
{
float:left;
width: 178px;
background-color:blue;
}
Addition: I'm just putting background-color to make clearer to you where the div is. Good Luck!!.
Well one problem is that you can't 'position: absolute' and 'float: left' in the same element. They both position elements in different ways.
The answer to your question, I believe, would be CSS's 'display: inline-block'. Normally div's are not allowed to render side-by-side. Instead maybe you should try something like this:
<!doctype html>
<html lang="en">
<head>
<title><!-- Insert your title here --></title>
<style>
div.inline
{
color: red;
display: inline-block
}
#main
{
border: 1px solid blue;
width: 100%;
height: auto;
}
#head {
height: 100px;
width: 100%;
border: 1px solid green;
}
#left {
width: 15%;
min-height: 400px;
border: 1px solid red;
}
#body {
width: 84%;
}
#footer
{
padding: 10px;
text-align: right;
border-top: 1px dotted #8A8575;
border-bottom: 1px dotted #8A8575;
font-family: Constantia, Georgia, serif;
}
</style>
</head>
<body>
<div id="main">
<div id="head">
The header
</div>
<div id="left" class="left inline">
LEFT
</div>
<div id="body" class="inline">
#RenderBody()
</div>
<div id="footer">
built with <a target="_blank" href="http://asp.net/mvc"> ASP.NET MVC 4</a>
<button style="margin-left: 25px; float:left">Slide Toggle</button>
</div>
</div>
</body>
</html>
I have the following html:
<!DOCTYPE html>
<html>
<head>
<title>JBA</title>
<style type="text/css">
body {
margin:0;
padding:0;
}
#layout {
float: left;
}
#title {
padding: 10px;
border: 1px solid #ccc;
position: relative;
}
#content {
position: absolute;
top: 26px;
left: 0;
right: 0;
bottom: 0;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="layout">
<label id="title">Below is content:</label>
<div id="content">
</div>
</div>
</body>
<script>
</script>
</html>
What I need is to position #content div right below the #title label. However, float and position settings shouldn't be changed. So, how to calculate #content's top? 26px seems to work for Chrome but, for IE it needs to be 28px. Why?
give position relative to the "#layout" div
#layout {
float: left;
position:relative;
}
I have tested it in chromium as well as IE9. For both position top: 28 is working properly. Screenshot is attached.
Are you expecting something like this LINK
some changes in your CSS :
body {
margin:0;
padding:0;
}
#layout {
float: left;
}
#title {
padding: 5px;
border: 1px solid #ccc;
float:left;
}
#content {
clear:both;
width:400px;
height:400px;
border: 1px solid #ccc;
}
You should set padding and margin to 0 on #content since browsers render this differently (Even though it´s not set).
I'd like to have a [Fixed][Liquid][Fixed] cross-browser compatible layout.
HTML:
body
div#col-1
div#col-2
div#col-3
CSS:
#col-1 {
width:150px;
float:left;
}
#col-2 {
width:100%;
padding:0 150x;
}
#col-3 {
positon:absolute:
right:0;
width:150px;
}
Would this work/better way to do it?
This is pretty simple.
here is the code
<html>
<head>
<style type="text/css">
#left {
float: left;
width: 150px;
border: 1px solid black;
background-color: #999;
height: 50px;
}
#right {
float: right;
width: 150px;
border: 1px solid black;
background-color: #999;
height: 50px;
}
#center {
/* margin with 10px margin between the blocks*/
margin: 0 160px;
border: 1px solid black;
height: 50px;
}
</style>
</head>
<body>
<div id="left">Text</div>
<div id="right">Text</div>
<div id="center">Text</div>
</body>
</html>
I'm using floats instead of position absolute. The advantage of using floats above absolute positioning is that you can put a nother div beneath it, lets say the footer. And just give it a clear: both and it will automatically display at the bottom of the page.
here is an example with a footer
<html>
<head>
<style type="text/css">
#left {
float: left;
width: 150px;
border: 1px solid black;
background-color: #999;
height: 50px;
}
#right {
float: right;
width: 150px;
border: 1px solid black;
background-color: #999;
height: 50px;
}
#center {
/* margin with 10px margin between the blocks*/
margin: 0 160px;
border: 1px solid black;
height: 50px;
}
#footer {
clear: both;
margin-top: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="left">Text</div>
<div id="right">Text</div>
<div id="center">Text</div>
<div id="footer">footer</div>
</body>
</html>
Voila! You've got your liquid layout.
check this out:
http://siteroller.net/articles/3-column-no-tables-no-floats
But no,I don't think that would work. There are plenty of links in said article though to address your issue.
And if there is any interest, I will extend what is written there.
Okay, got it: http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-31-fixed-fluid-fixed/
I like Robert's answer. I would also add a wrapper around the left, right, center and footer. Here, I set the id to "page":
<body>
<div id="page">
<div id="left">Text</div>
<div id="right">Text</div>
<div id="center">Text</div>
<div id="footer">footer</div>
</div>
</body>
Then, you can also add the style for the "page":
#page {
min-width: 600px;
}
This way, if the user shrinks their browser down to a very small size, the content still looks good.