I am trying to learn and use html5 and have a basic layout but the sidebar (aside) and section (content) elements are not equal in length and I want them to be equal. I have been trying to fix this with faux column method but with no success yet. I have had several attempts and my last attempt so far I used a background image in 'mid-section' div but this isn't displaying!
I show the html5 and css code here and am grateful for some advice and help on what I need to do to get the columns equal length.
<!Doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" type ="text/css" href="stylev1.css" media="screen" >
<title>RPD simple html5 example
</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="page">
<header>
<h1>Header content area</h1>
</header>
<nav>
<p>Nav content area for links-horizontal or vertical</p>
</nav>
<div class="mid-section">
<article>
<section>
<p><article> - Defines an article</p>
</section>
<section>
ARTICLE content
Lorem ipsum.......................
.....................................
.....................................
</section>
<section>
Article Content 2
Lorem ipsum.......................
.....................................
.....................................
</section>
</article>
<aside>
<p><aside> - Defines an aside</p>
ASIDE Content (sidebar)
</aside>
</div>
<footer>
Page footer content area
</footer>
</div>
</body>
</html>
/*CSS reset-basic! */
html {
margin:0; padding:0;
}
#page{
width:960px;
margin:0 auto;
text-align:left;
}
body {
background-color:#5B5C58;
color: #000000;
font-family:Calibri, Verdana, Arial, sans-serif;
font-size: 14px;
text-align:center;
margin:0;
}
header, footer, nav, article, section, aside {
display:inline-block;
}
header {
width:100%;
margin-bottom:10px;
background-color:green;
width;50px;
}
nav {
width:100%;
background-color:#F0F8FF;
float:left;
}
nav ul{
width:100%;
list-style:none;
margin:0;
padding:0;
}
nav ul li{
display:inline;
padding:3px 7px;
}
nav span{
float:right;
display:inline-block;
}
.mid-section {
color:red;
background: url(images/rpdsimplehtml5fauxcols6.png) repeat-y;
}
aside {
width:30%;
background-color:#B0E2FF;
margin:4px 2px;
padding:10px;
float:right;
margin-top:10px;
margin-bottom:10px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
article {
width:65%;
background-color:#B0E2FF;
margin:4px 2px;
padding:10px;
float:left;
margin-top:10px;
margin-bottom:10px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
section {
display:block;
background-color:#E0FFFF;
font-family:Cambria, Verdana, Arial, sans-serif;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
margin:4px 2px;
padding:10px;
}
footer {
width:100%;
background-color:#82CFFD;
margin-top:10px;
height:50px;
clear:both;
}
I am most grateful for helpful replies, thanks
I feel that CSS doesn't give us suitable solutions to entire classes of problems similar to yours. Putting together a simple layout shouldn't devolve into a contest of wits and a guessing game.
Therefore, against the protests of lots of CSS purists, I use and recommend tables for layout. Not indiscriminately, but when CSS fails to deliver.
Done with tables, your problem suddenly becomes trivial.
EDIT
Done. "fixed-up" code in pastebin.
It looks a bit garish but can be tweaked to look the way you wanted, I'm sure.
This is the best method of keeping three columns the same height, that I have seen so far. It require extra markup in your HTML unfortunately. Plus it isn't specific to HTML5, but changing the tags isn't a problem.
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
If you are aiming for "HTML5" and "CSS3" you can use display: table-*
nav, article, aside {
display: table-cell;
}
I could not really figure this out!
I see so many css/jscript/jquery fixes on internet search my brain is overloading!
I didn't much like the table code so I have left that approach for now!
All I have done is add a 'mid-section' div (div mainarticle) with a background image (is that the 'faux col' method?). Anyway I have now a simple html5 layout page (which has nearly driven me nuts to get- I am not good at css coding!!).
Here is my current code:
``<!Doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" type ="text/css" href="rpdnewstyle.css" media="screen" >
<title>RPD simple html5 example
</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="wrap">
<div id="page">
<header>
<h1>Header content area</h1>
</header>
<nav>
<p>Nav content area for links-horizontal or vertical</p>
</nav>
<div id="mainarticle">
<article>
<section>
<p><article> - Defines an article</p>
</section>
<section>
ARTICLE content
Lorem ipsum.......................
.....................................
.....................................
</section>
<section>
Article Content 2
Lorem ipsum.......................
.....................................
.....................................
Nulla euismod commodo libero sit amet viverra.
Fusce mauris elit, gravida sit amet luctus eu, sodales sit amet ipsum.
Donec tincidunt tincidunt quam, vel faucibus magna tristique et.
Duis quis enim arcu. Nam varius luctus tempus. Suspendisse potenti.
Duis iaculis eleifend diam. Etiam volutpat tincidunt dolor,
id dignissim risus pellentesque in. Nam ullamcorper felis
sed nisl luctus tincidunt. In metus tellus, pretium in fermentum nec,
posuere vitae turpis. Nulla facilisi. Aenean id purus eros, sed dignissim massa.
Sed condimentum mollis nunc nec aliquet. Pellentesque porta arcu vel massa rutrum
pellentesque. Aliquam consectetur volutpat sodales. Vivamus porttitor pellentesque elit,
nec vestibulum lacus vestibulum laoreet. Aliquam erat volutpat.
Cras molestie tellus non dolor volutpat fringilla. Morbi ut justo justo,
eu euismod sapien. Curabitur iaculis metus in ligula ultrices volutpat.
</section>
</article>
<aside>
<p><aside> - Defines an aside</p>
ASIDE Content (sidebar)
</aside>
</div>
</div>
<footer>
Page footer content area
</footer>
</div>
</div>
</body>
</html>
and the css:
/* CSS Document */
html {
margin:0; padding:0;
}
body {
margin:0;
padding:0;
line-height: 1.5em;
font-family:Geneva, Arial, Helvetica, sans-serif;
}
#wrap {
width:900px;
margin:0px auto;
}
header {
border:1px solid #000;
height:135px;
background:#DEDEDE;
margin-bottom:0px;
width:100%;
}
h1 { margin-top:45px;
}
#mainarticle {
border:1px solid #000; border-top:none;
background:#fff;
width:900px;
background: url(images/faux-2-2-col.gif);
margin-bottom: 0px;
overflow: auto; /* Paul O Brien Fix for IE www.pmob.co.uk */
}
#page{
width:900px;
margin:0; auto;
text-align:center;
}
header, footer, nav, article, section, aside {
display:inline-block;
}
nav {
width:100%;
background-color:#F0F8FF;
float:left;
border:1px solid #000;
}
nav ul{
width:100%;
list-style:none;
margin:0;
padding:0;
}
nav ul li{
display:inline;
padding:3px 7px;
}
nav span{
float:right;
display:inline-block;
}
aside {
width:20%;
display: table-cell;
display:block;
margin:4px 2px;
padding:10px;
float:right;
margin-top:10px;
margin-bottom:10px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
article {
display: table-cell;
width:70%;
background-color:#B0E2FF;
margin:4px 2px;
padding:10px;
float:left;
margin-top:10px;
margin-bottom:10px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
section {
display:block;
background-color:#E0FFFF;
font-family:Cambria, Verdana, Arial, sans-serif;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
margin:4px 2px;
padding:10px;
}
footer { width:100%;
background-color:#000;
margin-top:0px;
height:50px;
clear:both;
color:#fff;
border:1px solid #000;
}
What a performance! The joys of css and html5..
Unbelievably now I am going to code an html5 Wordpress theme based on this template...I think I am going mad!!:-) Thanks for all help & best wishes to all!
Related
I have an old site.
Now I want to make it mobile friendly.
So I am trying to add a mobile navigation and for making it works I want to use pure css only. NO javascript.
I am not allowed to add JS code to the files.
I tried following:
Mark up (I can not touch anything inside nav-menu class):
<!--- mobile navigation -->
<div class="tm_menu_mobile">
<div class="menu_icon">
<div class="three_line"></div>
<div class="three_line"></div>
<div class="three_line"></div>
</div>
<div style="clear:both;"></div>
<div class="nav-menu">
<ul>
<li class="page_item page-item-4">Page 1</li>
<li class="page_item page-item-2">Page 2</li>
<li class="page_item page-item-2">Page 2</li>
</ul>
</div>
</div>
And then I tried this CSS:
.tm_menu_mobile { width: 100%; max-width: 1005px; margin: 0 auto; display: block; background-color: #0071b7; }
.menu_icon { width: 100% }
.tm_menu_mobile .menu_icon{ width:50px; height:50px; border-radius: 10px; border:2px solid #fff; float:right; margin-right:10px; }
.menu_icon .three_line{ float:none; width:36px; height:5px; background:#fff; margin:9px auto; }
.tm_menu_mobile .nav-menu ul { text-align: center; }
.tm_menu_mobile .nav-menu ul li { border-bottom: 1px solid #fff; padding: 15p
Until here it's fine I think.
Now I want to work for animation / toggle (using CSS only)
how can I achieve:
By default the ul / nav-menu should NOT be displayed. Only menu_icon should be displayed.
When the visitor clicks on the menu_icon the ul should be displayed / toggled down.
When the user click AGAIN on the menu_icon the ul should be disappeared / toggled up and display: none.
I want to do this using CSS only.
FIDDLE IS HERE
Your best bet is most likely the :target CSS selector and anchor tags.
In the snippet below there are a menu button which has an a tag to #menu, which if target makes the menu visible and shows a div beneath which links to #, to hide the menu, if the user click outside.
The important part
#tabhelper {
display:none;
position:fixed;
right:0;
width:20%;
height:100%;
top:0;
z-index: 10;
}
#menu:target ~ #content > a#menubtn {
left:80%;
}
#menu:target ~ #content > article {
left:80%;
right:-80%;
-webkit-filter: blur(3px);
}
#menu:target ~ #tabhelper {
display:block;
}
Everything else
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,700);
html {
width:100%;
}
* {
box-sizing: border-box;
}
body {
display:block;
margin: 0;
width: 100%;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
color: #222;
}
#content {
position: fixed;
height:100%;
width:180%;
left:-80%;
background: #ecf0f1;
}
#content > nav {
position:fixed;
width:80%;
height:100%;
background: #34495e;
}
#content > nav > ul {
list-style: none;
margin:0;
padding: 0;
margin-top: 5px;
}
#content > nav > ul > li > a {
display: block;
width:100%;
padding:10px;
background: #2c3e50;
margin-bottom: 5px;
color:#ddd;
text-decoration: none;
}
#content > a#menubtn {
position: fixed;
background: #9b59b6;
width:40px;
height:40px;
left:0;
top:0;
z-index: 100;
}
#content > a#menubtn:before { /*http://css-tricks.com/three-line-menu-navicon/*/
content: "";
position: absolute;
left: 10px;
top: 12px;
width: 20px;
height: 3px;
background: #fff;
box-shadow:
0 6px 0 0 #fff,
0 12px 0 0 #fff;
}
#content > article {
position: fixed;
padding: 25px;
left: 0;
right: 0;
height: 100%;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
#tabhelper {
display:none;
position:fixed;
right:0;
width:20%;
height:100%;
top:0;
z-index: 10;
}
#content, #menubtn, #content > article {
transition: all .4s;
}
#menu {
display: none;
}
#menu:target ~ #content {
left:0;
}
#menu:target ~ #content > a#menubtn {
left:80%;
}
#menu:target ~ #content > article {
left:80%;
right:-80%;
-webkit-filter: blur(3px);
}
#menu:target ~ #tabhelper {
display:block;
}
<div class="helper" id="menu"></div>
<a id="tabhelper" href="#"></a>
<div id="content">
<a id="menubtn" href="#menu"></a>
<nav>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ul>
</nav>
<article>
<h1>HTML Ipsum Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
</article>
</div>
CSS and HTML alone can respond to click.
You should be able to use :focus, as long as each element is discretely wrapped in it's own HTML element which has a tab index
You can try this by opening the dev tools, selecting an element on this page and selecting :focus to force focus state (right hand click).
In your HTML you will need tabindex - this is required, but also ensures your UI responds to the keyboard as well as the mouse
This fiddle gives a demo: http://jsfiddle.net/szhtebjm/4/
To target an element that you don't have access to within the parent you can use the html tag directly in the css, within the :focus, as demonstrated in the fiddle with span element
This is a basic example to prove concept that focus will work to trigger changes on click with css, applying animations can be done with keyframes and transitions
An example with transitions is here:
http://jsfiddle.net/szhtebjm/8/
One final point, you're violating separation of concerns by doing this. Javascript should handle functionality and css should handle styles. The best way would really be to have set-up that allowed you to add javascript which you could then use to handle the menu functionality
i want to display three div tag in a parent div tag
parent div has no width and height
one inner div will be on left side with fixed width and height
2nd inner div will be in center with fixed height only and its width is between two other div tags
3rd inner div will be on right side
css
#container{}
#columnright{
float:left;
width:200px;
height: 400px;
}
#content{
margin-right:auto;
margin-left:auto;
height: 400px;
}
#columnleft{
float:right;
width:150px;
height: 400px;
}
html
<div id="container">
<div id="columnright"></div>
<div id="content"></div>
<div id="columnleft"> </div>
</div>
<style>
#columnright{
width:200px;
float:left;
}
#content{
width:200px;
float:left;
}
#columnleft{
float:left;
width:150px;
}
</style >
<div id="container">
<div id="columnright">hi</div>
<div id="content">hello</div>
<div id="columnleft">how</div>
</div>
<style>
#columnright
{
width: 200px;
height:400px;
}
#content
{
float: left;
height: 400px;
}
#columnleft
{
float: right;
width: 150px;
height: 400px;
}
</style>
<div id="container">
<div id="columnright"></div>
<div id="content"></div>
<div id="columnleft"></div>
</div>
I think the above code can help you. In the first inner div, no need to right float : left. Becoz u told that it must have fixed width and height. If u mention float property, it doesn't occupy the space.
You need to youse CSS3's calc() function to calculate the width of your content div.
See here:
JSFiddle
I also colored the divs for easier understanding. You should probably also remain your div's, because at the time your "columnright" is on the left hand side of the screen and vice versa.
This accomplishes what you're trying to do without floating anything. I also corrected your #columnright to actually be on the right side and your #columnleft to actually be on the left side. And I added background color to better illustrate what's going on.
HTML
<div id="container">
<div id="columnright"></div>
<div id="content"></div>
<div id="columnleft"> </div>
</div>
CSS
#container {
position:relative;
background-color:#E0E0E0;
}
#columnleft {
position:absolute;
top:0;
left:0;
width:150px;
height: 400px;
background-color:#CCCCE0;
}
#columnright {
position:absolute;
top:0;
right:0;
width:200px;
height: 400px;
background-color:#E0CCCC;
}
#content {
margin-right:200px;
margin-left:150px;
height: 400px;
background-color:#CCE0CC;
}
Fiddle
http://jsfiddle.net/mNnAq/
http://jsfiddle.net/hdrenollet/dsbSt/embedded/result/
If I understand you correctly, you're looking for something like this:
<head>
<title></title>
<script>
</script>
<style>
#parent{
width:100%;
}
#columnleft{
position:relative;
float:left;
border: 1px solid black;
top:0px;
width:150px;
height: 400px;
}
#content{
position:relative;
width:100%;
top:0px;
padding: 20px;
margin-left:150px;
margin-right:200px;
}
#columnright{
border: 1px solid black;
float:right;
top:0px;
width:200px;
height: 400px;
}
</style>
</head>
<body>
<div id="parent">
<div id="columnleft"></div>
<div id="columnright"></div>
<div id="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lectus sem, lobortis fermentum eleifend non, interdum at orci. Ut nec mauris vulputate, eleifend elit vitae, suscipit felis. Etiam leo ligula, pellentesque non urna sed, sagittis hendrerit nibh. Sed pharetra pellentesque nunc vitae imperdiet. orci. Nam ac nisi sed ipsum ullamcorper aliquet eget lobortis enim. Duis consequat sed arcu vel vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus mollis porttitor sapien. Duis a sodales justo. Mauris gravida aliquet nunc in scelerisque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel nunc sagittis, dapibus quam eu, congue magna.</div>
</div>
</body>
You'll need to set your margin-left and margin-right of your content container to the widths of your left and right columns.
______________________
| Header |
|______________________|
| |
| |
| Content |
| |
| |
|______________________|
| Footer |
|______________________|
I would like to make this UI, and each is a div. The header height is 30px. And the footer is 30px. But I don't know the content height. I need to use the user frame to calculate.
The total height should be 100%.
Can I do it in pure CSS?
Using flexbox, this is easy to achieve.
Set the wrapper containing your 3 compartments to display: flex; and give it a height of 100% or 100vh. The height of the wrapper will fill the entire height, and the display: flex; will cause all children of this wrapper which has the appropriate flex-properties (for example flex:1;) to be controlled with the flexbox-magic.
Example markup:
<div class="wrapper">
<header>I'm a 30px tall header</header>
<main>I'm the main-content filling the void!</main>
<footer>I'm a 30px tall footer</footer>
</div>
And CSS to accompany it:
.wrapper {
height: 100vh;
display: flex;
/* Direction of the items, can be row or column */
flex-direction: column;
}
header,
footer {
height: 30px;
}
main {
flex: 1;
}
Here's that code live on Codepen: http://codepen.io/enjikaka/pen/zxdYjX/left
You can see more flexbox-magic here: http://philipwalton.github.io/solved-by-flexbox/
Or find a well made documentation here: http://css-tricks.com/snippets/css/a-guide-to-flexbox/
--[Old answer below]--
Here you go: http://jsfiddle.net/pKvxN/
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Layout</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
header {
height: 30px;
background: green;
}
footer {
height: 30px;
background: red;
}
</style>
</head>
<body>
<header>
<h1>I am a header</h1>
</header>
<article>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a ligula dolor.
</p>
</article>
<footer>
<h4>I am a footer</h4>
</footer>
</body>
</html>
That works on all modern browsers (FF4+, Chrome, Safari, IE8 and IE9+)
Here is how to to that:
The header and footer are 30px height.
The footer is stuck to the bottom of the page.
HTML:
<div id="header">
</div>
<div id="content">
</div>
<div id="footer">
</div>
CSS:
#header {
height: 30px;
}
#footer {
height: 30px;
position: absolute;
bottom: 0;
}
body {
height: 100%;
margin-bottom: 30px;
}
Try it on jsfiddle: http://jsfiddle.net/Usbuw/
Try This
<!DOCTYPE html>
<html>
<head>
<title>Sticky Header and Footer</title>
<style type="text/css">
/* Reset body padding and margins */
body {
margin:0;
padding:0;
}
/* Make Header Sticky */
#header_container {
background:#eee;
border:1px solid #666;
height:60px;
left:0;
position:fixed;
width:100%;
top:0;
}
#header {
line-height:60px;
margin:0 auto;
width:940px;
text-align:center;
}
/* CSS for the content of page. I am giving top and bottom padding of 80px to make sure the header and footer do not overlap the content.*/
#container {
margin:0 auto;
overflow:auto;
padding:80px 0;
width:940px;
}
#content {
}
/* Make Footer Sticky */
#footer_container {
background:#eee;
border:1px solid #666;
bottom:0;
height:60px;
left:0;
position:fixed;
width:100%;
}
#footer {
line-height:60px;
margin:0 auto;
width:940px;
text-align:center;
}
</style>
</head>
<body>
<!-- BEGIN: Sticky Header -->
<div id="header_container">
<div id="header">
Header Content
</div>
</div>
<!-- END: Sticky Header -->
<!-- BEGIN: Page Content -->
<div id="container">
<div id="content">
content
<br /><br />
blah blah blah..
...
</div>
</div>
<!-- END: Page Content -->
<!-- BEGIN: Sticky Footer -->
<div id="footer_container">
<div id="footer">
Footer Content
</div>
</div>
<!-- END: Sticky Footer -->
</body>
</html>
After fiddling around a while I found a solution that works in >IE7, Chrome, Firefox:
http://jsfiddle.net/xfXaw/
* {
margin:0;
padding:0;
}
html, body {
height:100%;
}
#wrap {
min-height:100%;
}
#header {
background: red;
}
#content {
padding-bottom: 50px;
}
#footer {
height:50px;
margin-top:-50px;
background: green;
}
HTML:
<div id="wrap">
<div id="header">header</div>
<div id="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. </div>
</div>
<div id="footer">footer</div>
with Grid
<div class='container'>
<header>header</header>
<div>content</div>
<footer>footer</footer>
</div>
.container {
display: grid;
grid-template-rows: auto 1fr auto;
height: 100vh;
}
Below is the sample code and you can run a snippet to see the result.
html,body {
display: flex;
flex-direction: column;
height: 100%;
}
sidenav{
border:1px solid black;
flex: .3;
}
container{
border:1px solid black;
flex: 1;
}
header{
border:1px solid black;
flex:.1;
}
content{
display:flex;
flex:1;
border:1px solid black;
}
footer{
border:1px solid black;
flex:.1;
}
<body>
<header >header</header>
<content>
<sidenav>sidenav</sidenav>
<container>container</container>
</content>
<footer>footer</footer>
</body>
Try this
CSS
.header{
height:30px;
}
.Content{
height: 100%;
overflow: auto;
padding-top: 10px;
padding-bottom: 40px;
}
.Footer{
position: relative;
margin-top: -30px; /* negative value of footer height */
height: 30px;
clear:both;
}
HTML
<body>
<div class="Header">Header</div>
<div class="Content">Content</div>
<div class="Footer">Footer</div>
</body>
I'm working on a new project, and it appears that both opera and IE are giving me extra space to my li element.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#import "stil.css";
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.14.custom.min.js"></script>
<script type="text/javascript" src="reel.js"></script>
<script type="text/javascript" src="dropdown.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Savic</title>
</head>
<body>
<div id="container">
<div id="header">
<div id="menu">
<p> Samostalna Zanatska Radnja</p>
<a id="logo" href="index.html">Savić</a>
<div id="darrow">
</div>
<div id="darrow2">
</div>
<ul id="nav">
<li><a class="link" style="background:url(images/activeb.jpg) repeat-x" href="#">Početna</a></li>
<li><a class="link" id="izb" href="#">Izrada</a></li>
<li><a class="link" id="ugb" href="#">Ugradnja</a></li>
<li><a class="link" href="#">Galerija</a></li>
<li><a class="link" href="#">Kontakt</a></li>
</ul>
<ul id="izd">
<li>Ograda</li>
<li>Kapija</li>
<li>Gelendera</li>
<li>Čelične konstrukcije</li>
<li>Garažnih vrata</li>
</ul>
<ul id="ugd">
<li>Kupatila</li>
<li>Vodovoda</li>
<li>Kanalizacije</li>
<li>Grejanja</li>
<li>Servis pumpi za vodu</li>
</ul>
</div>
</div>
<div id="body">
<!-- ALL STUFF GOES HERE -->
<div id="holder">
<!-- LEVI DIV -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<div id="left">
<div id="portfolio_cycler" class="shadow roundbox">
<img class="active" src="images/reel1.jpg" />
</div>
<div id="circles"></div>
<img id="horg" src="images/horg.jpg" />
<div id="topt">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pellentesque semper ligula at volutpat. In hac habitasse platea dictumst. Nam ultrices diam eu dolor cursus in semper ligula faucibus. Nulla mattis tortor vel nunc rutrum convallis. Maecenas egestas diam sit amet odio mattis sit amet pellentesque orci bibendum. Ut sodales fringilla sem, nec volutpat mi scelerisque non. Phasellus luctus laoreet nunc, eget tincidunt massa egestas vel. Phasellus id sapien ante. Fusce vulputate, urna quis condimentum molestie, erat sapien porttitor dui, eu pulvinar orci enim non massa. Mauris in cursus mauris. Sed tortor justo, placerat tristique blandit at, rutrum quis nisi.</p>
</div>
</div>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<!-- LEVI DIV KRAJ -->
</div>
<!-- ALL STUFF ENDS HERE -->
</div>
<div id="footer"></div>
</div>
</body>
</html>
CSS:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}
/*NEOPHODNO ZA FOOTER */
/*<div id="container">
<div id="header">
<div id="menu">
</div>
</div>
<div id="body">
Sve stavljati u body, kao i margin: 0 auto, ne treba wrap div
</div>
<div id="footer"></div>
</div>
*/
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:url(images/background.jpg) repeat-x;
height:100px;
}
#body {
width:980px;
margin:0 auto;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:25px; /* Height of the footer */
background:url(images/footer.jpg) repeat-x;
}
#wrap{
width:980px;
margin:0 auto;
background:#000;
height:100px;
}
/* FOOTER PODESAVANJA */
#menu{
width:980px;
margin:0 auto;
position:relative;
top:2px;
height:98px;
background:url(images/header2.jpg) 0px 0px;
}
#holder{
width:960px;
position:relative;
left:10px;
top:10px;
}
#menu p,a,li{
font-family:Arial, Helvetica, sans-serif;
color:#FFF;
font-weight:bold;
position:relative;
}
#menu p{
font-size:12px;
left:55px;
top:10px;
width:200px;
}
#logo{
font-size:40px;
top:5px;
left:80px;
text-decoration:none;
}
#nav li{
font-size:12px;
display:inline;
}
#nav ul{
position:relative;
height:20px;
}
#nav{
position:relative;
top:10px;
left:0px;
}
#nav a{
font-size:12px;
padding-right:14px;
padding-left:14px;
}
.link{
padding-top:5px;
padding-bottom:5px;
text-decoration:none;
top:1px;
}
#portfolio_cycler{position:relative;}
#portfolio_cycler img{position:absolute;z-index:1}
#portfolio_cycler img.active{z-index:3}
#circles{
position:absolute;
z-index:7;
top:250px;
left:690px;
}
#izd{
width:130px;
background:#48a9c4;
position:absolute;
z-index:5;
font-size:12px;
text-align:center;
top:98px;
left:60px;
height:120px;
}
#ugd{
width:130px;
background:#48a9c4;
position:absolute;
z-index:5;
font-size:12px;
text-align:center;
top:98px;
left:146px;
height:120px;
}
#izd li, #ugd li{
list-style:none;
padding-top:3px;
padding-bottom:5px;
}
#izd a, #ugd a{
text-decoration:none;
display:block;
width:130px;
}
#izb{
visibility:visible;
}
#darrow{
position:absolute;
left:130px;
top:80px;
background:url(images/darrow.png) no-repeat;
width:10px;
height:12px;
z-index:5;
}
#darrow2{
position:absolute;
left:214px;
top:80px;
background:url(images/darrow.png) no-repeat;
width:10px;
height:12px;
z-index:5;
}
#horg{
position:relative;
top:277px;
}
#topt{
position:relative;
width:770px;
top:283px;
text-align:justify;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
I don't want to create special css or use javascript to fix this, so can anyone tell me what's the problem. I assume that id nav causes the problem but I'm not sure.
The problem is with your CSS. Try adding these:
#nav {
margin: 0;
padding: 0;
}
#nav li {
/* use this instead of display:inline */
float: left;
display: block;
}
Those are just some fixes to the bugs that I can quickly spot. There might be more bugs. If you want to learn how to make a horizontal menu with CSS, check out my tutorial on Cramie.net - Create CSS Horizontal Menu
I have a website I'm working on that I should have perfected the layout on FIRST. But I am now faced with the issue of the not going all the way to the bottom. I have read the tutorials on how to get the 3 column layout in CSS http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
but
what I need is something that will be an easy fix for my existing site.... I have about 10 pages already created and I was thinking about going back to a table layout (and then retrofitting the whole thing like I've done here -->http://www.centuryautosd.com/new.asp
unless
someone has an easier, better way of doing it.
Here is the existing website as it stands now with CSS and the issue with the columns -->
http://www.centuryautosd.com/
I could sure use some help!
I'm pretty sure this tactic will work for you: http://www.ejeliot.com/blog/61
Edit: Ok, here we go.
Looking past the Dreamweaver template and split up inline CSS, I have made adjustments as follows:
1> Move mainContent between sidebar1 and sidebar2 in the HTML.
2> Change sidebar1's css to:
.thrColFixHdr #sidebar1 {
float: left;
width: 150px;
background: #CCCCCC;
padding: 15px 10px 0px 20px;
margin-bottom: -2000px;
padding-bottom: 2000px;
}
The background has been changed to highlight the effect on the page.
3> Change sidebar2's css to:
.thrColFixHdr #sidebar2 {
float: left;
width: 160px;
background: #EEEEEE;
padding: 15px 10px 0px 20px;
margin-bottom: -2000px;
padding-bottom: 2000px;
}
4> Change mainContent's css to:
.thrColFixHdr #mainContent {
float: left;
width: 390px;
background: #DDDDDD;
padding: 0 10px;
margin-bottom: -2000px;
padding-bottom: 2000px;
}
5> Add a definition for contentContainer:
.thrColFixHdr #contentContainer {
overflow: hidden;
}
6> Change .footer to #footer and change margin-top: 8px to padding-top: 8px and add text-align:center and break up the footer text.
Entire code run through Notepad++ HTML Tidy here (some tab formatting slightly lost when putting into Stack Overflow):
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content=
"HTML Tidy for Windows (vers 14 February 2006), see www.w3.org" />
<meta http-equiv="Content-Type" content=
"text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
/*<![CDATA[*/
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
}
.thrColFixHdr #container {
width: 780px;
background: #FFFFFF;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
}
.thrColFixHdr #header {
background: #DDDDDD;
padding: 0 10px 0 20px;
}
.thrColFixHdr #header h1 {
margin: 0;
padding: 10px 0;
}
.thrColFixHdr #contentContainer {
overflow: hidden;
}
.thrColFixHdr #sidebar1 {
float: left;
width: 150px;
background: #CCCCCC;
padding: 15px 10px 0px 20px;
margin-bottom: -2000px;
padding-bottom: 2000px;
}
.thrColFixHdr #sidebar2 {
float: left;
width: 160px;
background: #EEEEEE;
padding: 15px 10px 0px 20px;
margin-bottom: -2000px;
padding-bottom: 2000px;
}
.thrColFixHdr #mainContent {
float: left;
background: #DDDDDD;
width: 390px;
padding: 0 10px;
margin-bottom: -2000px;
padding-bottom: 2000px;
}
.thrColFixHdr #footer {
padding: 0 10px 0 20px;
background:#BBBBBB;
}
.thrColFixHdr #footer p {
margin: 0;
padding: 10px 0;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
/*]]>*/
</style>
<!--[if IE 5]>
<style type="text/css">
/* place css box model fixes for IE 5* in this conditional comment */
.thrColFixHdr #sidebar1 { width: 180px; }
.thrColFixHdr #sidebar2 { width: 190px; }
</style>
<![endif]-->
<!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.thrColFixHdr #sidebar2, .thrColFixHdr #sidebar1 { padding-top: 30px; }
.thrColFixHdr #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->
<style type="text/css">
/*<![CDATA[*/
.side a {
color: #FFF;
text-decoration: none;
}
a.side:link {color:#FF3;
text-decoration: none;
} /* unvisited link */
a.side:visited {color:#FFF
text-decoration: none;
} /* visited link */
a.side:hover {color:#C00}
a.side:active {color:#C00}
/*]]>*/
</style>
<style type="text/css">
/*<![CDATA[*/
#footer {
font: 12px Arial, Helvetica, sans-serif;
color: #FF3;
text-decoration: none;
padding-top: 8px;
text-align: center;
}
a.footer:link {color:#FF3}
a.footer:visited {color:#FFF}
a.footer:hover {color:#C00}
a.footer:active {color:#C00}
/*]]>*/
</style>
</head>
<body class="thrColFixHdr">
<div id="container">
<div id="header">
<h1>Header</h1><!-- end #header -->
</div>
<div id="contentContainer">
<div id="sidebar1">
<h3>Sidebar1 Content</h3>
<p>The background color on this div will only show for the
length of the content. If you'd like a dividing line
instead, place a border on the left side of the #mainContent
div if it will always contain more content.</p>
<p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu,
pellentesque eget, cursus et, fermentum ut, sapien.</p>
<!-- end #sidebar1 -->
</div>
<div id="mainContent">
<h1>Main Content</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Praesent aliquam, justo convallis luctus rutrum, erat nulla
fermentum diam, at nonummy quam ante ac quam. Maecenas urna
purus, fermentum id, molestie in, commodo porttitor, felis. Nam
blandit quam ut lacus. Quisque ornare risus quis ligula.
Phasellus tristique purus a augue condimentum adipiscing.
Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique
in, vulputate at, odio. Donec et ipsum et sapien vehicula
nonummy. Suspendisse potenti.</p>
<h2>H2 level heading</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Praesent aliquam, justo convallis luctus rutrum, erat nulla
fermentum diam, at nonummy quam ante ac quam. Maecenas urna
purus, fermentum id, molestie in, commodo porttitor, felis. Nam
blandit quam ut lacus. Quisque ornare risus quis ligula.
Phasellus tristique purus a augue condimentum adipiscing.
Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique
in, vulputate at, odio.</p><!-- end #mainContent -->
</div>
<div id="sidebar2">
<!-- #BeginLibraryItem "/Library/sidebar2.lbi" -->
<div align="center" class="side">
<img src="images/seHable.jpg" width="162" height="48" alt=
"Se Habla Espanol" border="0" /><br />
<br />
<a href="https://secure.carfax.com/creditCard.cfx" target=
"_blank"><img src="images/carfax.jpg" width="145" height="35"
alt="CARFAX" border="0" /></a><br />
<a href="https://secure.carfax.com/creditCard.cfx" target=
"_blank">FREE CAR FAX</a><br />
<br />
<a href=
"http://www.autorepair.ca.gov/pubwebquery/Vehicle/PubTstQry.aspx"
target="_blank"><img src="images/caGOV.jpg" width="109"
height="78" alt="CA.gov" longdesc=
"http://www.autorepair.ca.gov/pubwebquery/Vehicle/PubTstQry.aspx"
border="0" /><br />
Verify a Smog Check</a><br />
<br />
<a href="http://www.iihs.org/ratings/default.aspx" target=
"_blank"><img src="images/topSafetyPick.jpg" width="111"
height="131" alt="Top Safety Picks" longdesc=
"http://www.iihs.org/ratings/default.aspx" border=
"0" /><br />
Top Safety Picks</a><br />
<br />
<a href="http://www.kbb.com/" target="_blank"><img src=
"images/kbb.jpg" width="155" height="56" alt=
"Kelly Blue Book" longdesc="http://www.kbb.com/" border=
"0" /><br />
Kelly Blue Book</a>
</div><!-- #EndLibraryItem -->
<h3>Sidebar2 Content</h3>
<p>The background color on this div will only show for the
length of the content. If you'd like a dividing line
instead, place a border on the right side of the #mainContent
div if it will always contain more content.</p>
<p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu,
pellentesque eget, cursus et, fermentum ut, sapien.</p>
<!-- end #sidebar2 -->
</div>
<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
</div>
<div id="footer">
<!-- #BeginLibraryItem "/Library/footer.lbi" -->
<span class="footer">CENTURY AUTO GROUP, INC. |
619.281.2300<br />
COPYRIGHT 2009-2011 ALL RIGHTS RESERVED | EMAIL: <a href=
"mailto:staff#centuryautosd.com" class=
"footer">STAFF#CENTURYAUTOSD.COM</a></span>
<!-- #EndLibraryItem --><!-- end #footer -->
</div><!-- end #container -->
</div>
</body>
</html>