I am trying to create a layout with the header and footer at 100% width while the container has a width of 940px. I have seen an example of this on blogs and news websites. Instead of floating the contained content, it has the appearance of being anchored to the top and bottom of the page.
Also the website I am creating has only a few pages so I've placed the navigation within the header. The navigation is centered by using absolute positioning.
When I shrink the window (in any browser) everything stays in its place except that I see a white background covering the content below the header. I don't know why this is happening but I think the dropdown menu might have caused a problem. Thanks
Here's my CSS code:
body,html,ul,li{
margin:0;
padding:0;
color:#000;
}
#wrap-head {
width:100%;
margin:0 auto;
background-image:url('header-bg.png');
}
#header {
width: 940px;
height: 140px;
max-height:130px;
position: relative;
margin-left:auto;
margin-right:auto;
padding: 0;
clear:both;
background-color: white;
}
.logo {
position: absolute;
top:0;
left:0;
}
#nav {
position:absolute;
top:48px;
left:470px;
}
#nav{
list-style:none;
font-weight:bold;
margin-bottom:10px;
/* Clear floats */
float:left;
z-index:5;
}
#nav li{
float:left;
margin-right:10px;
position:relative;
}
#nav a{
display:block;
padding:6px;
color:#fff;
background:#0066ff;
text-decoration:none;
}
#nav a:hover{
color:#fff;
background:#0066ff;
text-decoration:underline;
}
/*--- DROPDOWN ---*/
#nav ul{
background:rgba(255,255,255,0);
list-style:none;
position:absolute;
left:-9999px;
}
#nav ul li{
padding-top:1px;
float:none;
left:0px;
background:#ccc;
}
#nav ul a{
white-space:nowrap;
}
#nav li:hover ul{
left:0;
}
#nav li:hover a{
background:#0066ff;
text-decoration:underline;
}
#nav li:hover ul a{
text-decoration:none;
}
#nav li:hover ul li a:hover{
background:#333;
}
/*-- MAIN BODY STYLES --*/
#wrap-body {
width:100%;
margin:0 auto;
font-family:Arial, Helvetica, sans-serif;
font-size: 0.875em;
background-color: black;
overflow:hidden;
}
h2 {
margin:0 0 1em;
}
#container {
width:940px;
margin:0 auto;
overflow:hidden;
background-color: #666666;
}
#content {
float:left;
width:640px;
padding:5px 10px;
background-color:#666666;
}
#sidebar {
float:right;
width:260px;
padding:5px 10px;
background:#CCC;
}
#footer {
clear:both;
padding:5px 10px;
background:#333;
}
#footer p {
margin:0;
color:#FFF;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
}
* html #footer {
height:1px;
}
#footercontent {
margin-left:auto;
margin-right: auto;
width: 940px;
height:126px;
padding:0px;
clear:both;
}
Here's the HTML
<body>
<div id="wrap-head">
<div id="header">
<img class="logo" src="logotest.gif" width="280" height="110" />
<ul id="nav">
<li>
HOME
</li>
<li>
ABOUT IMHS
<ul>
<li>
Introduction
</li>
<li>
Mission Statement
</li>
<li>
Member Profiles
</li>
</ul>
</li>
<li>
NEWS
</li>
<li>
FEATURES
<ul>
<li>
Articles
</li>
<li>
Book Reviews
</li>
<li>
Monthly Feature
</li>
<li>
IMH Schoolhouse
</li>
</ul>
</li>
<li>
LINKS
</li>
</ul>
</div>
</div>
<!--END OF NAVIGATION-->
<!--END OF NAVIGATION-->
<div id="wrap-body">
<div id="container">
<div id="content">
<h2>Column 1</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel magna. Mauris risus nunc, tristique varius, gravida in, lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue adipiscing mauris, a nonummy diam ligula ut risus. Praesent varius. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<h3>Consectetuer adipiscing elit</h3>
<p>Nulla dictum. Praesent turpis libero, pretium in, pretium ac, malesuada sed, ligula. Sed a urna eu ipsum luctus faucibus. Curabitur fringilla. Suspendisse sit amet quam. Sed vel pede id libero luctus fermentum. Vestibulum volutpat tempor lectus. Vivamus convallis tempus ante. Nullam adipiscing dui blandit ipsum. Nullam convallis lacus ut quam. Mauris semper elit at ante. Vivamus tristique. Pellentesque pharetra ante at pede. In ultrices arcu vitae purus. In rutrum, erat at mollis consequat, leo massa consequat libero, ac vestibulum libero tellus sed risus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
<div id="sidebar">
<h2>Column 2</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel magna.</p>
</div>
</div>
<div id="footer">
<div id="footercontent">
<p>aaaaa aaaa </p>
</div>
</div>
</div>
</body>
Thanks
you should give the min-width to your body
body{
min-width:940px;
}
or see the live demo with your updated code:- http://jsfiddle.net/WnecH/1/
Related
so I have this project where I was given a screenshot of a website and have to replicate it while using HTML and CSS code purely. But I have gotten myself into a little predicament where my navbar has excess space that I don't want because I want a search bar to go where that excess space is at.
html {
background-color: lightgrey;
font-size: 100%;
}
body{
margin: 5%;
margin-top: 0;
font-family: Georgia, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif;
}
/* Navigation Bar*/
nav ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #e9eed0
}
#current a{
background-color: #b8d03b;
color: white;
}
.nav li {
float: left;
border-right: 1px solid #bbb
}
.nav li a {
display: block;
color: #8c8f7d;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Search Bar */
.search {
float: right;
}
/* Heading */
.heading{
background-color: #f6f6f6;
border: 1px solid #b8d03b;
border-bottom:.5px solid #b8d03b;
}
/* Main text area */
.main {
display: block;
background-color: #ffffff;
color: grey;
border: 1px solid #b8d03b;
float: left;
}
.content{
width: 50%;
float: left;
padding: 5px 15px;
}
.middle{
width:30%;
float: left;
padding: 5px 15px;
margin: 0px 5px 5px 5px;
}
.sidebar{
width: 10%;
padding: 5px 15px;
float: left;
}
/* Calendar */
.october{
text-align: center;
}
.weekdays {
margin: 0;
padding: 10px 0;
background-color: #cccccc;
text-align: center;
}
.weekdays li {
display: inline-block;
color: #ffffff;
width: 10%;
text-align: center;
}
.days {
text-align: center;
padding: 10px 0;
background: #eee;
margin: 0;
}
.days li {
list-style-type: none;
display: inline-block;
width: 10%;
text-align: center;
margin-bottom: 5px;
font-size:12px;
color: #777;
}
.days li .active {
color: #3c8cd7 !important
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title> Final Project </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header role='banner'>
<nav>
<ul class="nav">
<li id="current">Home </li>
<li>ELA </li>
<li> Photos</li>
<li> About</li>
<li> Contact</li>
</ul>
</nav>
</header>
<div class="search">
<form method="get" action="search-results.php" role="search">
<label for="search"> Search: </label>
<input type="search" size="30">
<input type="submit" value="Search" />
</div>
<div class="heading">
<p><span> News Flash</span> By Guillermo Molina </p>
<p><small>>> Home</small></p>
</div>
<div class="main">
<article class="content">
<p><small>posted on Novermber 16, 2017 by Guillermo Molina</small></p>
<h1>About This Template</h1>
<p><strong>News Flash</strong> Denec leo. Vivamus fermnetum nibh in augue.
Praesent a lacus at erna congue rutrum. Nulla enim erosm porttitor eu, tempus
id, varius non, nib. Duis enim nula luctus eu, dapibus lacinia, venenatis id quam.
Vestibulum imperdiet, magna nec eleifend rutrum, nunc lectus vestibulum velit, euismod lacinia quam nisl id lorem. Quisque erat.
</p>
<p>Vestibulum imperdiet, magna nec eleifend rutrum, nunc lectus vestibulum
velit, euismod lacinia quam nisl id lorem. Quisque erat.</p>
<h2>A Heading Level 2</h2>
<p>This paragraph is followed by a sample unordered list:</p>
<ul>
<li>Consectetuer adipiscing elit</li>
<li>Metus aliquam pellentesque</li>
<li>Urnanet non molestie semper</li>
<li>Proin gravida orci porttitor</li>
</ul>
<h3>Heading Level 3</h3>
<p>While this is followed by a blockquote:</p>
<blockquote cite="http://www.google.com">
Donec leo, vivamus nibh in augue praesent a lacus at urna congue rutrum. Quisque dictum integer nisl risus, sagittis convallis,
rutrum id, congue, and nibh.
</blockquote>
<p> Comments(33) Permalink </p>
<hr>
<p>TAGS: DOLOR IPSUM SIT AMET DOLOR IPSUM LOREM SIT AMET </p>
</article>
<section class="middle">
<h2>Recent Posts</h2>
<h3>Aliquam Libero</h3>
<p>Nullam ante orci, eget, tempus quis, ultrices in, est. Curabitur sit amet nulla. Nam in massa. Sed vel tellus. Curabitur sem urna,
consequat vel, sescipit in, mattis placerat, nulla. Sed ac leo. Pellentesque imperdiet.More...</p>
<h3>Semper Vestibulum</h3>
<p>DOnec leo, vivamus fermentum nibh in augue praesent a lacus at urna congue rutrum. Quisque dictum integer nisl risus, sagittis convallis, rutrum id,
congue, and nibh More... </p>
</section>
<aside class="sidebar">
<h2>Categories</h2>
Aliquam libero
Consectetuer elit
Metus pellentesque
Suspendisse mauris
Urnanet molestie semper
Proin orci porttitor
<h2>Archives</h2>
September(23)
August(31)
July(31)
June(30)
(31)
<h2>Calendar</h2>
<p class="october">October 2017</p>
<ul class="weekdays">
<li>M</li>
<li>T</li>
<li>W</li>
<li>T</li>
<li>F</li>
<li>S</li>
<li>S</li>
</ul>
<ul class="days">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li><span class="active">10</span></li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>27</li>
<li>28</li>
<li>29</li>
<li>30</li>
<li>31</li>
</ul>
</aside>
</div>
</body>
</html>
I'm wondering changes I can make to my code in order to make the search bar be right next to the navbar while getting rid of the excess space that the navbar has.
html {
background-color: lightgrey;
font-size: 100%;
}
body{
margin: 5%;
margin-top: 0;
font-family: Georgia, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif;
}
/* Navigation Bar*/
nav ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #e9eed0
}
#current a{
background-color: #b8d03b;
color: white;
}
.nav li {
float: left;
border-right: 1px solid #bbb
}
.nav li a {
display: block;
color: #8c8f7d;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Search Bar */
.search {
float: right;
}
/* Heading */
.heading{
background-color: #f6f6f6;
border: 1px solid #b8d03b;
border-bottom:.5px solid #b8d03b;
}
/* Main text area */
.main {
display: block;
background-color: #ffffff;
color: grey;
border: 1px solid #b8d03b;
float: left;
}
.content{
width: 50%;
float: left;
padding: 5px 15px;
}
.middle{
width:30%;
float: left;
padding: 5px 15px;
margin: 0px 5px 5px 5px;
}
.sidebar{
width: 10%;
padding: 5px 15px;
float: left;
}
/* Calendar */
.october{
text-align: center;
}
.weekdays {
margin: 0;
padding: 10px 0;
background-color: #cccccc;
text-align: center;
}
.weekdays li {
display: inline-block;
color: #ffffff;
width: 10%;
text-align: center;
}
.days {
text-align: center;
padding: 10px 0;
background: #eee;
margin: 0;
}
.days li {
list-style-type: none;
display: inline-block;
width: 10%;
text-align: center;
margin-bottom: 5px;
font-size:12px;
color: #777;
}
.days li .active {
color: #3c8cd7 !important
}
/** Added ***/
nav{
width: 100%;
}
.navbar{
float: left
}
.search{
float: right;
}
.clearfix{
clear: both;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title> Final Project </title>
<link rel="stylesheet" href="style.css">
<style>
nav{
width: 100%;
}
.navbar{
float: left
}
.search{
float: right;
}
.clearfix{
clear: both;
}
</style>
</head>
<body>
<header role='banner'>
<nav>
<div class="navbar">
<ul class="nav">
<li id="current">Home </li>
<li>ELA </li>
<li> Photos</li>
<li> About</li>
<li> Contact</li>
</ul>
</div>
<div class="search">
<form method="get" action="search-results.php" role="search">
<label for="search"> Search: </label>
<input type="search" size="30">
<input type="submit" value="Search" />
</form>
</div>
<div class="clearfix"></div>
</nav>
</header>
<div class="heading">
<p><span> News Flash</span> By Guillermo Molina </p>
<p><small>>> Home</small></p>
</div>
<div class="main">
<article class="content">
<p><small>posted on Novermber 16, 2017 by Guillermo Molina</small></p>
<h1>About This Template</h1>
<p><strong>News Flash</strong> Denec leo. Vivamus fermnetum nibh in augue.
Praesent a lacus at erna congue rutrum. Nulla enim erosm porttitor eu, tempus
id, varius non, nib. Duis enim nula luctus eu, dapibus lacinia, venenatis id quam.
Vestibulum imperdiet, magna nec eleifend rutrum, nunc lectus vestibulum velit, euismod lacinia quam nisl id lorem. Quisque erat.
</p>
<p>Vestibulum imperdiet, magna nec eleifend rutrum, nunc lectus vestibulum
velit, euismod lacinia quam nisl id lorem. Quisque erat.</p>
<h2>A Heading Level 2</h2>
<p>This paragraph is followed by a sample unordered list:</p>
<ul>
<li>Consectetuer adipiscing elit</li>
<li>Metus aliquam pellentesque</li>
<li>Urnanet non molestie semper</li>
<li>Proin gravida orci porttitor</li>
</ul>
<h3>Heading Level 3</h3>
<p>While this is followed by a blockquote:</p>
<blockquote cite="http://www.google.com">
Donec leo, vivamus nibh in augue praesent a lacus at urna congue rutrum. Quisque dictum integer nisl risus, sagittis convallis,
rutrum id, congue, and nibh.
</blockquote>
<p> Comments(33) Permalink </p>
<hr>
<p>TAGS: DOLOR IPSUM SIT AMET DOLOR IPSUM LOREM SIT AMET </p>
</article>
<section class="middle">
<h2>Recent Posts</h2>
<h3>Aliquam Libero</h3>
<p>Nullam ante orci, eget, tempus quis, ultrices in, est. Curabitur sit amet nulla. Nam in massa. Sed vel tellus. Curabitur sem urna,
consequat vel, sescipit in, mattis placerat, nulla. Sed ac leo. Pellentesque imperdiet.More...</p>
<h3>Semper Vestibulum</h3>
<p>DOnec leo, vivamus fermentum nibh in augue praesent a lacus at urna congue rutrum. Quisque dictum integer nisl risus, sagittis convallis, rutrum id,
congue, and nibh More... </p>
</section>
<aside class="sidebar">
<h2>Categories</h2>
Aliquam libero
Consectetuer elit
Metus pellentesque
Suspendisse mauris
Urnanet molestie semper
Proin orci porttitor
<h2>Archives</h2>
September(23)
August(31)
July(31)
June(30)
(31)
<h2>Calendar</h2>
<p class="october">October 2017</p>
<ul class="weekdays">
<li>M</li>
<li>T</li>
<li>W</li>
<li>T</li>
<li>F</li>
<li>S</li>
<li>S</li>
</ul>
<ul class="days">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li><span class="active">10</span></li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>27</li>
<li>28</li>
<li>29</li>
<li>30</li>
<li>31</li>
</ul>
</aside>
</div>
</body>
</html>
You have to add some more classes,
extra css
nav{
width: 100%;
}
.navbar{
float: left
}
.search{
float: right;
}
.clearfix{
clear: both;
}
And nav html little modified
<nav>
<div class="navbar">
<ul class="nav">
<li id="current">Home </li>
<li>ELA </li>
<li> Photos</li>
<li> About</li>
<li> Contact</li>
</ul>
</div>
<div class="search">
<form method="get" action="search-results.php" role="search">
<label for="search"> Search: </label>
<input type="search" size="30">
<input type="submit" value="Search" />
</form>
</div>
<div class="clearfix"></div>
</nav>
Just use the float:right and float:left and then clear:both.
Check this..
In your CSS rules add this:
header {
display: inline-block;
}
div.search {
line-height: 45px;
}
You only need the first one, the second is purely decorative
Im working on a website right now but i have some problems with putting a image on top of 2 divs, and there is a other problem the bottom div is the footer, wich i want to keep stick to the bottom ofcourse (this part works but the image on top of the divs not)
Here is a image to show you my idea better :
I'd like to know a few ideas of how i can implement this, if you need to see my code ask me.
For the people who commented already under my post,
first of all thank you for your time but sadly it didnt work (so far i keep trying your suggestions)
but to help you a bit more to understand what i try to do, i give you a bit of my code.
<html>
<head>
<style type="text/css">
/* general */
body { background: #fdfdfd; font: 12px Verdana, Geneva, sans-serif; color:#444; margin: 0 0 300px; /* bottom = footer height */}
html { position: relative; min-height: 100%;}
.fix_width { width: 940px; margin: 0 auto; }
.fix_width:after, .left_foot_cont ul li:after { content: " " ; display:block; height:0; clear:both; visibility:hidden; }
#header { background:#6FF; height:100px; z-index: 3; position: relative; border-top: color: #555555 thick; border-width:5px; }
#container { position:relative; top:0px; margin-top:100px; overflow: auto;}
.cont {width:250px; padding-left:20px; margin-left:10px; display:inline-block; float:left; }
#footer { background: #A9CF38; position: absolute;
left: 0;
bottom: 0;
height: 200px;
width: 100%;
overflow: auto;}
img {width:940px; }
</style>
</head>
<body>
<div id="header">
<div class="fix_width">
<h2>
Just the header nothing important
</h2>
</div>
</div>
<div id = "container">
<div class="fix_width">
<div class="cont">
<h2>
Lorem ipsum
</h2>
<p class="last">
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. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
</p> <!-- End p.last -->
</div><!-- End .cont -->
</div> <!-- End .fix_width -->
</div><!-- End .container -->
<!-- Where should i put the image ????? --->
<img src="http://www.mormonshare.com/sites/default/files/handouts/cg_banner-blank.gif"> </img>
<div id = "footer">
<div class="fix_width">
<div class="footer_con_left">
<h2>
Lorem ipsum
<br /><br />
</h2>
<h1>
dolor sit amet
<br />
dolor sit amet
<br />
dolor sit amet
<br />
dolor sit amet
</h1>
</div> <!-- End. footer_con_left -->
</div><!-- Einde class fix_width -->
</div> <!-- Einde class footer -->
</body>
</html>
As you can see the image in the code, i want this image to be placed 50% on the white space and 50% on the green space (so in the code between the container div and between the footer div, or maybe better to say on top of these divs)
Thanks for helping!
You should place an image in DIV1, set position:relative to DIV1, position:absolute to IMAGE and set bottom:-50% to IMAGE or bottom:0px;margin-bottom:-50%;
Wrap Image in a div:
targethoweveryouwish {
position:absolute;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-300px;
z-index:10;
}
Ok, heres whats going on in the code above. the 50% attributes are moving the div to the center of the page, but it is moving the top left corner of the div to the center, so you'll need to subtract half the height and width of the div to make it center properly, make those adjustments to the margin-top and margin-left properties. The z-index is basically like a 2D way to add layers to your page. Everything is on layer 0 by default, so if you want to overlap things, just put them on a higher or lower z-index. You can use negative values too.
I think you should check this code I've made on this link
The code on the above link will center your image between your divs
Ignore this one .
<html>
<head>
<style type="text/css">
#container{
width:100%;
height:100%;
position:absolute;
background:black;
margin:0px;
padding:0px;
}
#test1{
width:100%;
height:35%;
position:relative;
background:blue;
margin:0px;
padding:0px;
}
#test2{
width:100%;
height:25%;
position:relative;
background:white;
margin:0px;
padding:0px;
}
#test3{
width:100%;
height:40%;
position:absolute;
background:red;
margin:0px;
padding:0px;
}
.content{
width:200px;
height:200px;
background:white;
float:left;
margin:10px 0px 10px 50px;
left:200px;
position:relative;
}
</style>
</head>
<body>
<div id="container">
<div id="test1"></div>
<div id="test2"></div>
<div id="test3">
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="fr">
<head>
<style>
aside#_left{
width:239px;
margin-left:0px;
margin-right:1px;
display:inline;
position:fixed;
}
#content{
padding-top:70px;
padding-left:225px;
}
.menu01{
background-color:#827F80;
width:80%;
}
ul#nav{
color:#6E7377;
list-style-type:none;
line-height:200%;
padding-top:5px;
padding-bottom:10px;
margin:0px;
padding:0px;
text-align:center;
}
ul#nav li:hover{
cursor:pointer;
border-top:1px solid #7a9bb6;
border-bottom:1px solid #7a9bb6;
background:#5482a0;
}
#nav a:link{
color:#6E7377;
text-decoration:none;
font-weight:bolder;
}
#nav a:hover{
color:#78C6FF;
}
#nav li * {
color: inherit;
}
#nav li:hover * {
color: inherit;
color:#78C6FF;
}
</style>
</head>
<body>
<aside id="_left">
<img src="images/logo.png" />
<nav class="menu01">
<ul id="nav">
<li>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Etiam interdum egestas nulla, ac dignissim urna suscipit non.</li>
</ul>
</nav>
</aside>
<div id="content">
<p>
Cras at dapibus mi. Vestibulum quis odio odio, a scelerisque mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Ut ornare convallis elementum. Vivamus tincidunt malesuada lacus nec lacinia. Vestibulum lorem tortor, gravida sed convallis nec, dapibus ut leo. Donec id posuere leo.
Cras quis ante et dolor dictum euismod.
</p>
</div>
</body>
</html>
Simply all I want is to populate the link font color from a li:hover. I suspect I'm just too lunatic...
Basically when the mouse go over the aside navigation panel I would like the text inside it to change, no matter what element are inside it, like <a>.
Update::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Status: completed, code updated
This depends on the elements inside of your li elements, but assuming you know what they are (in this case a):
#nav li:hover a {
color: inherit;
}
Though depending on how the a:link, a:visited, a:hover and a:active states are defined the specificity of other selectors may override this declaration.
To be a little less precise, you can use the * wildcard selector:
#nav li:hover * {
color: inherit;
}
But, again, this may be overruled by other, more specific, selectors defined elsewhere (especially if an id is used).
I am getting the following validation errors:
Line 63, Column 7: End tag for body seen but there were unclosed elements.
</body>
Line 19, Column 25: Unclosed element section.<section id="content"
I am using a HTML5 validator and I suspect this error is why my sidebar is not aligning.
CSS:
html{
height:100%;
}
body{
width:960px;
height:100%;
margin:0 auto;
}
p,h1,h2{
margin:25px;
}
header{
width:100%;
border-bottom:1px solid green;
}
header #logo{
height:90px;
width:150px;
border:1px solid red;
}
header nav{
width:100%;
height:45px;
border:1px solid red;
}
header nav ul{
float:left;
}
header nav ul li{
display:inline;
}
header nav li a{
float:left;
text-decoration: none;
margin-left:15px;
}
#content{
float:left;
width:705px;
height:100%;
border:1px solid red;
}
#showcase{
position: relative;
width:705px;
padding:20px 0px 20px 20px;
}
#showcase ul{
float:left;
display:block;
margin-left:-20px;
margin-bottom:20px;
width:200px;
border:1px solid green;
list-style:none;
}
#showcase ul li h3{
margin: 0 0 0 -15px;
letter-spacing: -0.25px;
margin: 4px 0px 3px 0px;
text-indent: 3px;
}
#showcase ul li h3 a {
color: #010101;
text-decoration: none;
}
#showcase ul li h3 a:hover {
color: #4fbcd8;
}
#showcase ul p {
height:70px;
margin:0 0 0 -15px;
line-height: 1.6em;
padding-left: 3px;
}
#showcase ul img{
width:175px;
height:137px;
background-color:pink;
}
#sidebar{
float:right;
height:100%;
width:225px;
border:1px solid red;
}
#box_one, #box_two, #box_three{
height:100px;
border-bottom:1px solid #ccc;
}
footer{
clear:both;
height:24px;
border:1px solid red;
}
HTML:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Template 2011</title>
<link rel="stylesheet" href="_assets/css/style.css">
</head>
<body>
<header>
<div id="logo">Template Here</div>
<nav>
<ul>
<li>Page One</li>
<li>Page Two</li>
<li>Page Three</li>
<li>Page Four</li>
</ul>
</nav>
</header>
<section id="content">
<h1>Main Content Section</h1>
<p>Content</p>
<section id="showcase">
<h1>My Work</h1>
<ul><!-- Showcase One -->
<li>
<img src="#" alt="#" />
<br/>
<h3>Photography</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sem massa, auctor ac tempor at, congue quis erat. Fusce at adipiscing magna. Duis iaculis quam vel ante aliquam eget faucibus nisi pretium. Aenean varius tempus vulputate. Cras ipsum nisi, vehicula id aliquam a, blandit iaculis felis. Sed viverra diam purus. Nam tempor, risus feugiat auctor tristique, arcu massa gravida diam, scelerisque luctus dolor magna eget sapien.</p>
</li>
</ul>
<ul><!-- Showcase Two -->
<li>
<img src="#" alt="#" />
<br/>
<h3>Photography</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sem massa, auctor ac tempor at, congue quis erat. Fusce at adipiscing magna. Duis iaculis quam vel ante aliquam eget faucibus nisi pretium. Aenean varius tempus vulputate. Cras ipsum nisi, vehicula id aliquam a, blandit iaculis felis. Sed viverra diam purus. Nam tempor, risus feugiat auctor tristique, arcu massa gravida diam, scelerisque luctus dolor magna eget sapien.</p>
</li>
</ul>
<ul><!-- Showcase Three -->
<li>
<img src="#" alt="#" />
<br/>
<h3>Photography</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sem massa, auctor ac tempor at, congue quis erat. Fusce at adipiscing magna. Duis iaculis quam vel ante aliquam eget faucibus nisi pretium. Aenean varius tempus vulputate. Cras ipsum nisi, vehicula id aliquam a, blandit iaculis felis. Sed viverra diam purus. Nam tempor, risus feugiat auctor tristique, arcu massa gravida diam, scelerisque luctus dolor magna eget sapien.</p>
</li>
</ul>
</section>
<section id="sidebar">
<div id="box_one">
<p>Box One</p>
</div>
<div id="box_two">
<p>Box Two</p>
</div>
<div id="box_three">
<p>Box Three</p>
</div>
</section>
<footer>
<p>This is the footer</p>
</footer>
</body>
add a </section> closing-tag on line 48 just above the other </section> . it is missing there
The following portion of code seems to be missing an end section tag:
<p>Content</p>
<section id="showcase">
<h1>My Work</h1>
<ul><!-- Showcase One -->
<li>
<img src="#" alt="#" />
<br/>
<h3>Photography</h3>
<p>Lorem ipsum...</p>
</li>
</ul>
<ul><!-- Showcase Two -->
<li>
<img src="#" alt="#" />
<br/>
<h3>Photography</h3>
<p>Lorem ipsum....</p>
</li>
</ul>
<ul><!-- Showcase Three -->
<li>
<img src="#" alt="#" />
<br/>
<h3>Photography</h3>
<p>Lorem ipsum...</p>
</li>
</ul>
I'm using this layout to create a 2 column fluid web page.
What I can't seem to do is make it so that both the columns in the layout have a height of 100% therefore pushing the footer to the bottom of the page!
Whats the best way to achieve this effect?
Thanks in advance!
Last time I read about this the best answer was display: table; for the main container and display: table-cell; for each column. This will make the column the height that you specify.
#wrap {
background: orange;
display: table;
height: 88%;
width: 550px;
padding: 11px;
}
#col1 {
display:table-cell;
background: #808080;
width: 222px;
border: 1px solid #FFF;
padding: 12px;
}
#col2 {
display:table-cell;
background: #808080;
width: 111px;
border: 1px solid #FFF;
padding: 12px;
}
<!-- this container will determine the height of both columns -->
<div id="wrap">
<div id="col1">
<p>Lorem ipsum something or other.</p>
</div>
<div id="col2">
<p>More Lorem than ipsum.</p>
</div>
</div>
<!-- end container -->
hopefully this is what you're looking for:
http://matthewjamestaylor.com/blog/perfect-2-column-right-menu.htm
Try a different layout, why waste your time trying to hack a cross-browser solution?
This seems to be what you need, but I'm sure you can find others: http://www.savio.no/examples/three-column-layout-6.asp
I do the following in my personal site's CSS file:
#footer
{width: 100%;
bottom: 0px;
padding-top: .5em;
padding-bottom: .5em;
background-color: #ffffff;
border-top: 1px #000000 solid;
text-align: center;
margin-top: .25em;
}
Also, I have little in the way of nested div tags. I prefer to have the elements float around each other.
have 2 div tags, each as a column floating next to each other, and another div tag to clear the floats, then lastly another div to be the footer:
<div id="col1"></div>
<div id="col2"></div>
<div clear="c"></div>
<div id="footer"></div>
<style type="text/css"><!--
#col1{
float:left;
width:80%;
}
#col2{
float:right;
width:20%;
}
.c{
clear:both;
}
#footer{}
--></style>
With this, it's also easier to make it a 3 column.
<div id="col1"></div>
<div id="col2"></div>
<div id="col3"></div>
<div clear="c"></div>
<div id="footer"></div>
<style type="text/css"><!--
#col1{
float:left;
width:200px;
}
#col2{
float:right;
width:300px;
}
#col3{
width:400px;
margin-left:200px;
margin-right:300px;
}
.c{
clear:both;
}
#footer{}
--></style>
Here's another way...
<div id="container">
<div id="col1"></div>
<div id="col2"></div>
</div>
<div id="footer"></div>
<style type="text/css"><!--
body { height: 100% }
#container { height: 100% }
#col1 { height:100%; float:left; width: 70% }
#col2 { height:100%; float:right; width: 30% }
#footer { height: 50px; clear: both }
--></style>
Just made jsfiddle by Matthew James Taylor post. For me it was very useful. I think this is not a problem to remade for two column.
<div id="container3">
<div id="container2">
<div id="container1">
<div id="col1"><p>Column 1</p>
<p>Nunc egestas, vut mus hac diam lacus lacus nisi odio,
turpis dictumst mattis! Turpis ac ut nec nec et augue, in nec turpis
hac quis risus vel risus pid ridiculus purus urna ultrices ac turpis. In,
magna odio mattis! Ultricies? Odio nec odio enim porta urna phasellus
proin in lacus! Dignissim eros, ac duis porttitor dapibus et vel sed est?
Nec placerat egestas, nunc rhoncus scelerisque sit sit, magna elementum
eu ac, montes dolor ultrices eros velit! Urna dignissim. Enim, aliquam ut
porta etiam amet dolor in natoque? Integer nunc? Magnis, auctor sit nunc
in nec, dictumst
pulvinar proin! In nisi pulvinar penatibus lorem nec, tempor porta
ultricies, et monte.a asdfjasdjfklasdfasdfljsdfkj</p>
</div>
<div id="col2">
<p>Column 2 </p>
<p>Nunc egestas, vut mus hac diam lacus lacus nisi odio,
turpis dictumst mattis! Turpis ac ut nec nec et augue, in nec turpis
hac quis risus vel risus pid ridiculus purus urna ultrices ac turpis. In,
magna odio mattis! Ultricies? Odio nec odio enim porta urna phasellus
proin in lacus! Dignissim eros, ac duis porttitor dapibus et vel sed est?
Nec placerat egestas, nunc rhoncus scelerisque sit sit, magna elementum
eu ac, montes dolor ultrices eros velit! Urna dignissim. Enim, aliquam ut
porta etiam amet dolor in natoque? Integer nunc? Magnis, auctor sit nunc
</div>
<div id="col3">Column 3</div>
</div>
</div>
#container3 {
float:left;
width:100%;
background:green;
overflow:hidden;
position:relative;
}
#container2 {
float:left;
width:100%;
background:yellow;
position:relative;
right:30%;
}
#container1 {
float:left;
width:100%;
background:red;
position:relative;
right:40%;
}
#col1 {
float:left;
width:26%;
position:relative;
left:72%;
overflow:hidden;
}
#col2 {
float:left;
width:36%;
position:relative;
left:76%;
overflow:hidden;
}
#col3 {
float:left;
width:26%;
position:relative;
left:80%;
overflow:hidden;
}
Try : overflow:hidden; on the wrap .
Hope That Helps