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>
Related
Quick rundown on what I'm trying to achieve;
I'm making a floating(left) side-nav bar with two child elements, the first being a clickable icon which sits in a static position that will set the second child's width from 0 to 100% of the parents width.
I'm trying to figure out why setting the second child's width to 0%/0 achieves nothing, I can only assume I'm missing something really simple here.
Code: JSFiddle
#header{
float:left;
position:fixed;
background:#333;
min-height:100%;
overflow:hidden;
z-index:1;
width:80px;}
#toggle-menu{
background:url(http://i.imgur.com/EQiq0zb.png) no-repeat;
width:50px;
height:50px;
background-size:cover;
margin:15px 15px;}
#nav{width:0%;}
Thanks for helping this noobie in advance,
Dodd
you are just missing this :)
#nav{width:0%; overflow:hidden;}
#nav {display: none;} and when hover on the parent, set it to display: block;
jsfiddle: https://jsfiddle.net/mjqym5c4/2/
body,wrapper{min-height:100px;padding:0;margin:0;font-family: 'Roboto', sans-serif;}
body{background-color:#999;}
#header{
float:left;
position:fixed;
background:#333;
min-height:100%;
overflow:hidden;
z-index:1;
width:80px;
}
#header:hover{
width:200px;
}
#header:hover #nav {
display: block;
}
#nav {
display: none;
}
#toggle-menu{
background:url(http://i.imgur.com/EQiq0zb.png) no-repeat;
width:50px;
height:50px;
background-size:cover;
margin:15px 15px;
}
#nav{width:0%;}
#nav ul{display:inline;list-style:none;}
#nav ul li{text-align:left;padding:0 15px;}
#nav ul li a{text-shadow:0 1px 2pt black;color:#fff;text-decoration:none;text-transform:uppercase;}
#banner{width:960px;margin: 0 auto;min-height:100px;background:#333;}
#content{width:960px;margin:0 auto;min-height:1000px;background:#666;}
<body>
<div id="wrapper">
<div id="header">
<div id="toggle-menu"></div>
<div id="nav">
<ul>
<li>Home</li>
<li>Gallery</li>
<li>Drive</li>
<li>Contact</li>
</ul>
</div>
</div>
<!-- /header -->
<div id="banner">
</div>
<div id="content">
</div>
<!-- /content -->
<div id="footer">
</div>
<!-- /footer -->
</div>
<!-- /wrapper -->
</body>
And to answer your question, why width: 0; did "nothing", is because the text is not made smaller. For that you would use font-size: 0;. But the text will still be there.
I'm trying to make a simple top menu with one level of submenus. I want to animate them with translate3d, but I can't manage to get them to sit behind the header with z-index. I'm using Foundation, so the header looks a bit like this:
#main-menu > li {
position: relative;
}
#main-menu ul {
position: absolute;
-webkit-transition: transform 400ms ease; (omitted other prefixes)
transform: translate3d(0,-100%,0);
}
#main-menu > li:hover ul {
transform: translate3d(0,0,0);
}
<div id="header">
<div class="row">
<div class="large-3 small-12 columns">
<a id="logo" href="/"></a>
</div>
<div class="large-9 small-12 columns">
<nav>
<ul id="main-menu" class="menu">
<li class="has-children">
Foo
<ul>
<li>
First Child
</li>
<li>
Second Child
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
So in the normal state the submenus #main-menu ul are translated vertically by their height so that when the main menus buttons are hovered the submenus slide down. However, I can't seem to make it so that the submenus are behind the entire header but appear above the content below.
this may help to your.This can do in several ways.this is one of it.you can do it easily if you start to use bootstrap.this solution only use html, css and js.this may a quick help to you.
<!DOCTYPE>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("li.one").mouseenter(function(){
$("div.submenu").fadeIn(500,function(){
$(this).mouseleave(function(){
$(this).fadeOut(500);
});
});
});
});
</script>
<style type="text/css">
body{
margin: 0;
}
ul{
background-color:black;
}
ul li{
color: white;
list-style-type: none;
display:inline;
font-size:30px;
width:100px;
margin-left: 30px;
margin-right: 30px;
}
div.submenu li{
list-style-type: none;
color: white;
font-size: 30px;
width:200px;
background-color: black;
text-align: center;
position: relative;
top:-15px;
left:550px;
}
div.submenu{
display: none;
}
</style>
</head>
<body>
<div style="text-align:center;">
<ul>
<li class="one">Basin & Sinks</li>
<li>Bathroom Accessories</li>
<li>Showers </li>
<li>Toilets</li>
</ul>
<div class="submenu">
<li>one</li>
<li>two</li>
</div>
</div>
</body>
</html>
You need to set your either your header or main menu (depending on the style you going for) to absolute with no z-index applied and then add a negative z-index to the absolute positioned sub-menu. this will hide the submenu content behind the parent elements.
* {
margin:0;
padding:0:
}
#header {
background: #f4f4f4;
border-bottom: 1px solid #e3e3e3;
height:60px;
position:relative;
}
#main-menu {
position:absolute;
width:100%;
height:30px;
list-style:none;
}
#main-menu li > a {
display:block;
text-decoration:none;
padding:1em 2em;
}
#main-menu li.has-children ul {
position:absolute;
z-index:-1;
top:100%;
-webkit-transition: transform 400ms ease;
transform: translate3d(0,-100%,0);
background:#f4f4f4;
border:1px solid #e3e3e3;
padding:1em;
}
#main-menu li:hover ul {
transform: translate3d(0,20%,0);
}
<div id="header">
<div class="row">
<div class="large-3 small-12 columns">
<a id="logo" href="/"></a>
</div>
<div class="large-9 small-12 columns">
<nav>
<ul id="main-menu" class="menu">
<li class="has-children">
Foo
<ul>
<li>
First Child
</li>
<li>
Second Child
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
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;
}
I am writing a website code but I am unable to display the border for the sidebar. Here it is. And below is the code,
<!DOCTYPE html >
<!--HTML WEBSITE
/*********************************************************************************************************************************************************NAME:FAHAD UDDIN*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************
-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The New Boston</title>
<style type="text/css">
#container
{
padding:0px;
margin:0px;
background:#BFBFBF;
}
#header
{
height:100px;
background-color:#333;
}
#header logo
{
}
#navigation
{
padding:0px;
margin:0px;
}
#navigation ul
{
background-color:#F00;
}
#navigation ul li
{
text-decoration:none;
display:inline;
color:white;
font-size:16px;
padding-right:40px;
padding-top: 0px;
}
#sidebar
{
display: inline;
margin-left: 20px;
width: 300px;
height:800px;
border-bottom-color:#666;
border:thin;
background-color: white;
background-repeat:repeat;
}
#content
{
float:left;
height: 800px;
width: 800px;
background-color:#FFF;
display:inline;
}
#footer
{
clear:both;
height:200px;
background-color:#333;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="navigation">
<ul>
<li><a href="#"><a/>Home</li>
<li><a href="#"><a/>Home</li>
<li><a href="#"><a/>Home</li>
<li><a href="#"><a/>Home</li>
<li><a href="#"><a/>Home</li>
</ul>
</div><!--Header Ends-->
<div id="content">
<p>This is the complain area. Fill complains here</p>
</div><!--Content ENDS-->
<div id="sidebar">
<p>This is a website.</p>
</div><!--SIDEBAR ENDS-->
<div id="footer">
</div><!--FOOTER ENDS-->
</div><!--CONTAINER ENds-->
</body>
</html>
1) Your html has a bug- you've given a/ instead of /a:
<li><a href="#"><a/>Home</li>
2) float to the rescue: give this property in:
<p style="float: left">This is a website.</p>
and add float: right to #sidbar
3) What is border: thin in #sidebar? Give border: 1px solid. Read this for allowed attributes and their values: http://www.w3schools.com/css/css_border.asp
UPDATE
Check here: http://jsfiddle.net/FPJTn/1/
The sidebar was breaking to the next line because of the value given for width for content. I have changed in #content css from width: 800px to width: auto.
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.