i got an html structure as below,
<div id="page-wrap">
<header>
<div id="logo">
</div>
<nav>
<ul>
<li>text 1<li>
<li>text 2</li>
<li>text 3</li>
</ul>
</nav>
</heder>
<div id="main-content">
<h1>Some Heading</h1>
<p>Some Text</p>
<div>A div</div>
</div> <!-- end of main-content -->
</div> <!-- end of page-wrap -->
with css
#page-wrap {
max-width:850px;
top:0;
bottom:0;
height:100%;
margin: 0 auto;
}
header {
padding: 80px 0px 0px 0px ;
position: relative;
}
#logo {
position: absolute;
left:0;
width:123px;
height:122px;
background:transparent url(../images/logo.png) no-repeat;
}
header nav {
position: absolute;
right:0;
}
header nav ul {
}
header nav ul li {
display:inline;
list-style: none;
}
as above.. the main-content div overlaps the header >.< please suggest propper css for getting main-content have an 80px distance from bottom of the header.. (there is a logo with 122px height on the header)
HTML
<div id="page-wrap">
<header>
<div id="logo"> </div>
<nav>
<ul>
<li>text 1<li>
<li>text 2</li>
<li>text 3</li>
</ul>
<div class="clear"> </div>
</nav>
<div class="clear"> </div>
</header>
<div class="clear"> </div>
<div id="main-content">
<h1>Some Heading</h1>
<p>Some Text</p>
<div>A div</div>
</div> <!-- end of main-content -->
</div> <!-- end of page-wrap -->
CSS:
html, body {
height: 100%;
}
#page-wrap {
max-width:850px;
height:100%;
margin: 0 auto;
}
header {
margin: 80px 0 0 0;
}
#logo {
width:123px;
height:122px;
background: url("../images/logo.png") no-repeat;
float: left;
}
header nav {
float: right;
}
header nav ul {
}
header nav ul li {
display:inline;
list-style: none;
}
#main-content {
margin: 80px 0 0 0;
}
.clear {
clear: both;
}
Look up CSS clear: both, and you'll understand why I used clear.
Try giving some top margin for main-content...
CODE:
<div id="main-content">
//somecode
<div>
CSS:
# main-content
{
margin-top:somepixel;
}
Related
i'm trying to make a nav bar at the end of a div, but the problem i have is that when i put position: fixed at it's parent, the justify.content: space-between disappear.
This is the code I have:
<main>
<div>
<div class="row">
<div class="logo col-3">
<img src="img/logo.jpg">
</div>
<div class="video-container">
<img src="img/Foto1.jpg">
</div>
</div>
<div class="text">
<p> Some text here </p>
</div>
<nav>
<ul>
<li>About</li>
<li>Projects</li>
<li>Ask</li>
<li>Work in progress</li>
<li>Idea</li>
<li>FAQ</li>
<li>Contact</li>
</ul>
</nav>
</div>
</main>
<style>
nav{
position: fixed;
bottom: 0;
}
nav ul{
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;
}
nav ul li{
list-style: none;
}
nav ul li a{
text-decoration: none;
color: black;
}
<style>
I would like to have a nav bar fixed and justified.
I can't seem to understand how I should center this menu among the logo and the login/register
http://jsfiddle.net/hnnsr97x/2/
HTML
<header id="header">
<div id="LogReg">
<h2>Login | Register</h2>
</div>
<div id="logo">
<a class="logo" href="index.html"><img alt="Logo" title="logo" src="Logo/logo.png" ></a>
</div>
<nav id="menu">
<ul class="main_menu">
<li>MENU1</li>
<li>MENU2</li>
<li>MENU3</li>
</ul>
</nav>
</header>
CSS:
#header {
width:100%;
}
#logo, #menu {
float:left;
}
#menu {
}
#menu li {
display:inline-block;
}
#LogReg {
text-align:right;
}
The fiddle is quite empty because I cleared it from some things I tried
So I'm here to ask for someone to explain how I should get the menu in the center? I'm obviously missing something.
Try this: http://jsfiddle.net/hnnsr97x/6/
the calc(50% - 500px) is saying make the margin-left 50% minus the width of the image and half of the menu
#logo{
float:left;
}
#menu {
float:left;
margin-left: calc(50% - 500px);
}
Do you mean centering the menu like this?
<header id="header">
<div id="LogReg">
<h2>Login | Register</h2>
</div>
<div class="container">
<div id="logo">
<a class="logo" href="index.html">
<img alt="Logo" title="logo" src="Logo/logo.png" >
</a>
</div>
<nav id="menu">
<ul class="main_menu">
<li>MENU1</li>
<li>MENU2</li>
<li>MENU3</li>
</ul>
</nav>
</div>
</header>
CSS style:
#header {
width: 100%;
}
.container {
display: block;
margin: 0 auto;
width: 300px;
}
#logo {
float: left;
}
#menu {
float: right;
}
.main_menu {
margin: 0;
}
#menu li {
display: inline;
}
#LogReg {
text-align: right;
}
http://jsfiddle.net/jonathanzuniga/66xnov5z/embedded/result/
See working demo here Centered Menu
HTML:
<header id="header">
<div id="LogReg">
Login | Register
</div>
<div id="logo">
<a class="logo" href="index.html">LOGO</a>
</div>
<nav id="menu">
<ul>
<li>MENU1</li>
<li>MENU2</li>
<li>MENU3</li>
</ul>
</nav>
</header>
CSS:
#header {
width:100%;
display:block;
position:relative;
}
#LogReg {
float:right;
}
#logo{
position:absolute;
top: 0px;
left:10px;
}
#menu{
display:block;
width:100%;
text-align:center;
overflow:hidden;
}
#menu li {
display:inline;
}
https://jsfiddle.net/AkashPinnaka/0eq1f9az/embedded/result/ I am assuming you are intended to make them align in a line. And obviously you know the height of your logo. Let me assume your logo is of height 40px.
Modify your HTML code to the following code.
<header id="header">
<div id="logo">
<a class="logo" href="index.html"><img alt="Logo" title="logo" src="http://www.planwallpaper.com/static/images/9-credit-1.jpg"></a>
MENU1
MENU2
MENU3
</div>
<div id="LogReg">
Login | Register
</div>
</header>
And CSS code as following
#header {
width:100%;
height: 100px;
}
div#logo{
float: left;
}
div#logo a{
/* line-height: 100px; */
display: table-cell;
vertical-align: middle;
}
div#LogReg{
line-height: 40px;
float: right;
}
img{
height: 40px;
width: 80px; /* just assumed to be 80px wide. Width doesn't matter as long as it is not too long. */
}
I took img height as 40px in css as I assumed.
This aligns logo, navigation menu and login|register in the same line.
If you need Login|Register a bit higher than logo and menu, just reduce the line-height of div#LogoReg to less than 40px.
And if u want some margin on both left and right sides, wrap your whole header content in another div tag as shown below
<header id = "header">
<div id = "header_in">
</div>
</header>
and give the width of div#header_in as 80% or something you like. This gives the margin on both left and right sides of your header.
div#header_in{
width: 80%;
}
Let me know if you want anything different.
I managed to make my footer to stick to the bottom of the window, then avoid my content div... but now, it's overlapping for about 15px before dropping below.
I want the footer to drop, but to never overlap the content. I think it may have something to do with my margins, but my tweaking has not yet solved this.
Any suggestions?
Adding margin-bottom:15px doesn't seem to help, because it's only shown once the footer overlaps enough to push the footer down. Then the margin is shown, but not before that small amount of overlap.
The #push div is supposed to make this all possible, from what I understood on Twitter's bootstrap example.
CSS:
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
margin: 0;
height: 100%;
}
#wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -50px;
min-width: 900px;
}
.main_nav {
list-style-type: none;
margin: 0;
width: 160px;
float: left;
padding-left: 40px;
overflow: hidden;
}
#bio_content {
width: 700px;
min-height: 445px;
margin-bottom: 15px;
float: left;
}
#bio_text {
padding: 10px;
}
#push {
height: 50px;
}
#footer {
height: 50px;
width: 100%;
float: left;
}
HTML:
<body>
<div id="wrapper">
<div id="header">
<h1></h1>
</div>
<ul class="main_nav">
<li>Home</li>
<li>About</li>
<li>Music</li>
<li>Services</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
<div id="bio_content">
<div id="bio_text"></div>
</div>
<div id="push"></div>
</div>
<div id="footer">
<div id="footer_content"></div>
</div>
</body>
</html>
I thin it's a float issue. A fiddle would help diagnose this better. I would suggest doing this
<body>
<div id="wrapper">
<div id="header">
<h1></h1>
</div>
<ul class="main_nav">
<li>Home</li>
<li>About</li>
<li>Music</li>
<li>Services</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
<div id="bio_content">
<div id="bio_text"></div>
</div>
<div style="clear:both"></div> //add this to clear the bio_content div
<div id="push"></div>
</div>
<div id="footer">
<div id="footer_content"></div>
</div>
</body>
</html>
You need to clear the styles in your footer. Add a clear:both to your footer css.
#footer {
clear: both;
height: 50px;
width: 100%;
}
I am using HTML5/CSS3 and what I am trying to do is create a page that scrolls if needed or is all on one section of the screen if there is less data. At the moment I have not used a wrapper due to googling I was told that you could use body -> works fine. As you see in my CSS I have set my html,body to 100% and then on viewing the code it scrolls.
How could I make this screen size dependent?
html,body{
margin:0 auto;
width:960px;
height:100%;
}
header{
width:100%;
border-bottom:1px solid red;
}
header #logo{
}
header nav{
float:left;
border:1px solid red;
width:100%;
margin:0 0 5px 0;
}
header nav ul li{
float:right;
height:40px;
margin:0 0 0 15px;
list-style-type: none;
}
header ul li a{
color:#000;
font-size:14px;
text-decoration: none;
}
#content{
float:left;
width:700px;
min-height:100%;
border:1px solid red;
}
#sidebar{
float:right;
width:250px;
min-height:100%;
border:1px solid green;
}
footer{
clear: both;
width:100%;
height:40px;
}
Template Layout 2011
</script>
<div id="logo">
<h1>Template Logo 2011</h1>
</div><!--logo end -->
<nav>
<ul>
<li>Page One</li>
<li>Page Two</li>
<li>Page Three</li>
<li>Page Four</li>
<li>Page Five</li>
</ul>
</nav>
</header>
<section id="content">
<h1>Content Introduction</h1>
<p>Content</p>
</section>
<aside id="sidebar">
<article id="box_one">
<h2>Box One</h2>
<p>Box Content</p>
</article>
<article id="box_two">
<h2>Box Two</h2>
<p>Box Content</p>
</article>
<article id="box_three">
<h2>Box One</h2>
<p>Box Content</p>
</article>
</aside>
<footer>
<p>Footer content</p>
</footer>
This is for CSS3. The main key is the display: table; display: table-cells; used together gives you the matched height you are looking for without the divs or asides etc. being actual table cells.
<!Doctype HTML>
<html>
<Head>
<style type="text/css">
html,body{
margin:0 auto;
width:960px;
}
header{
width:100%;
border-bottom:1px solid red;
}
header #logo{
}
header nav{
float:left;
border:1px solid red;
width:100%;
margin:0 0 5px 0;
}
header nav ul li{
float:right;
height:40px;
margin:0 0 0 15px;
list-style-type: none;
}
header ul li a{
color:#000;
font-size:14px;
text-decoration: none;
}
#wrapper{
display: table;
width: 960px;
border: 1px solid blue;
}
#content{
display: table-cell;
width:700px;
border:1px solid red;
min-height: 250px;
}
#sidebar{
display: table-cell;
width:250px;
border:1px solid green;
}
footer{
clear: both;
width:100%;
height:40px;
}
</style>
</head>
<body>
<div id="logo">
<h1>Template Logo 2011</h1>
</div><!--logo end -->
<nav>
<ul>
<li>Page One</li>
<li>Page Two</li>
<li>Page Three</li>
<li>Page Four</li>
<li>Page Five</li>
</ul>
</nav>
<div id="wrapper">
<div id="content">
<h1>Content Introduction</h1>
<p>Content</p>
</div>
<div id="sidebar">
<article id="box_one">
<h2>Box One</h2>
<p>Box Content</p>
</article>
<article id="box_two">
<h2>Box Two</h2>
<p>Box Content</p>
</article>
<article id="box_three">
<h2>Box One</h2>
<p>Box Content</p>
</article>
</div>
</div>
<footer>
<p>Footer content</p>
</footer>
</body>
</html>
I'm using the 960.gs frameowrk and http://www.cssstickyfooter.com and want to have a separate back ground colour for the main content div. This div won't stretch the background to the bottom of the page.
HTML:
<div id="wrapper">
<div id="content" class="container_12">
<div class="grid_12" id="header"><img src=logo.png" alt="" width="145" height="160" border="0" /></div><!--header-->
<div class="clear"></div>
<div class="grid_12" id="navbar">
<ul>
<li>Home</li>
<li>menu 1</li>
<li>menu 2</li>
<li>menu 3</li>
<li>menu 4</li>
<li>menu 5</li>
</ul>
</div><!--navbar-->
<div class="clear"></div>
<div class="grid_12" id="content_body">
<div class="grid_4" id="sidebar">
sidebar left
</div> <!--sidebar-->
<div class="grid_7" id="body_right">
body right
</div> <!--body_right-->
</div> <!--content_body-->
<div class="clear"></div>
</div><!--content-->
</div> <!--wrapper-->
<div id="footer"> footer </div> <!--footer-->
CSS:
html, body, #wrapper {height: 100%;}
body > #wrapper { height: auto; min-height: 100%; }
/* must be same height as the footer */
#content { overflow: auto;
padding-bottom: -1.5em;
}
#footer {
position: relative;
margin-top: -1.5em; /* negative value of footer height */
height: 1.5em;
clear: both;
}
/*Opera Fix*/
body:before { /* thanks to Maleika (Kohoutec)*/
content: "";
height:100%;
float: left;
width: 0;
margin-top: -32767px; /* thank you Erik J */
}
body {
min-width: 960px;
background: #E9F2F9;
}
div#header{
background-color: #3399cc;
}
div#navbar {
background-color: #FF9900;
}
div#navbar LI{
margin: 0 auto;
display: inline;
padding-right: 5px;
}
div#content_body{
background: #9CC4E4;
}
You have a div class="clear" but clear isn't defined in your CSS - you need to specify "clear:both" in a .clear CSS class.