I have a new site I am putting together to learn web coding.
My current code for the section in question is as follows:
require_once 'includes/functions.php';
<?php
if(logged_in())
{
$data = $db->query('SELECT COUNT(id) AS num FROM mail WHERE userid = "'.$_SESSION['id'].'"');
$row = $data->fetch_assoc;
$mcount = $row['num'];
}
?>
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php echo SITENAME; ?></title>
<link rel="stylesheet" type="text/css" href="styles/main.css"
</head>
<body>
<div id="wrapper">
<div id="header">
<?php
if(logged_in())
{
echo 'Welcome, ' . $_SESSION['username'] . '! <img src="" alt="" width="32" height="32" /> ('.$mcount.')';
}
else
{
echo 'Welcome, Guest!';
}
?>
</div>
<div id="banner"><img src="" alt="" width="1000" height="250" /></div>
<div id="navbar">
<ul>
<li>Home</li>
<li>
<?php
if(logged_in())
{
?>
Logout
<?php
} else {
?>
Login/Register
<?php
}
?>
</li>
<li>Forums</li>
<li>Contact Us</li>
<li>Donate</li>
</ul>
</div>
<div id="content">
... Content to be added here ...
</div> <!-- end content -->
<div id="footer">Copyright 2018 <?php echo SITENAME; ?>. All Rights Reserved.<br />Webmaster Terms of Service</div>
</div> <!-- end wrapper -->
</body>
</html>
and my CSS for these sections are as such:
#navbar
{
float: left;
}
#navbar ul
{
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;;
background-color: #f1f1f1;
position: fixed;
overflow: auto;
}
#navbar li a
{
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
#navbar li a:hover
{
background-color: #555;
color: white;
}
#content
{
float:right;
width: 810px;
padding: 10px;
}
#footer
{
clear: both;
font-size: 9pt;
text-align: center;
}
My question is this: The Navbar and the Content lines up fine (navbar is fixed to the right so that it will scroll with the page content), but the footer is hidden behind the navbar if the content is shorter than the navbar height.
Is there a way to set the footer min-height to inherit the height of the navbar div so that it will always appear below the fixed navbar instead of behind it?
I researched this on the web, and nothing touched on how to do this specifically (they just said to create a element between the fixed element and the bottom element to create a buffer, which is not what I am trying to do).
Update
Updated code with the entire php file (index.php)
Website URL for preview to see issue live: Test Site
You could make the body the height of the browser window by doing the following
body
{
height: 100%;
}
I'm going blind on this, Is This the desired look ?
#navbar
{
float: left;
}
#navbar ul
{
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;;
background-color: #f1f1f1;
position: fixed;
overflow: auto;
}
#navbar li a
{
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
#navbar li a:hover
{
background-color: #555;
color: white;
}
#content
{
float:right;
width: 810px;
padding: 10px;
}
#footer
{
clear: both;
font-size: 9pt;
text-align: center;
position: fixed;
bottom: 0;
height: 100px;
width: 100%;
background: red;
}
<div id="navbar">
<ul>
<li>Home</li>
<li>
Logout
Login/Register
</li>
<li>Forums</li>
<li>Contact Us</li>
<li>Donate</li>
</ul>
</div>
<div id="content">
</div>
<div id="footer">
</div>
set the CSS file like this
#content
{
float:right;
width: 810px;
padding: 10px;
height: 100%;
}
#footer
{
clear:both;
font-size: 9pt;
width: 100%;
background-color: green;
color: white;
text-align: center;
}
I think your expecting answer is this. now the footer is on top of the nav bar
If you want to use a pure CSS without Javascript, you could apply a min-height to the .content element which will force the footer down; In the demo below I have specified the .content to have a min-height: 100vh; to make sure it is at least 100% of the height of the viewport.
Read to the comments in the code for reasons for some of my changes
#navbar {
position: fixed;
left: 0;
top: 0;
/*float: left; Float values do not control the position of fixed elements, the above offset values do*/
}
#navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
/*position: fixed; Placing your fixed position value on the #navbar element makes more structural sense*/
overflow: auto;
}
#navbar li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
#navbar li a:hover {
background-color: #555;
color: white;
}
#content {
float: right;
width: 810px;
padding: 10px;
min-height: 100vh; /*Change this to what you want*/
}
#footer {
clear: both;
font-size: 9pt;
text-align: center;
}
<div id="navbar">
<ul>
<li>Home</li>
<li>Forums</li>
<li>Contact Us</li>
<li>Donate</li>
</ul>
</div>
<div id="content">
</div>
<div id="footer">
FOOTER
</div>
Another solution would be to set a margin-bottom on the .content that is the same height as the #navbar element:
#navbar {
position: fixed;
left: 0;
top: 0;
/*float: left; Float values do not control the position of fixed elements, the above offset values do*/
}
#navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
/*position: fixed; Placing your fixed position value on the #navbar element makes more structural sense*/
overflow: auto;
}
#navbar li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
#navbar li a:hover {
background-color: #555;
color: white;
}
#content {
float: right;
width: 810px;
padding: 10px;
margin-bottom: 136px /*Current height of the #navbar*/;
}
#footer {
clear: both;
font-size: 9pt;
text-align: center;
}
<div id="navbar">
<ul>
<li>Home</li>
<li>Forums</li>
<li>Contact Us</li>
<li>Donate</li>
</ul>
</div>
<div id="content">
</div>
<div id="footer">
FOOTER
</div>
Related
I am creating a custom menu (but also using bootstrap as a front-end engine) and cannot override default user agent stylesheet (currently testing on chrome).
Let's say I have a div for the menu and I want to insert menu items (equal width for all). The problem is that there is a default padding/margin and I am not being able to place them in the same row.
In my example, I have a div and four menu items (each should be 25% as in the CSS).
Here is JSFIDDLE: JSFIDDLE
Here is my code:
HTML:
<!-- LOAD CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/styles.css" rel="stylesheet" />
<!-- LOAD JQUERY -->
<script src="js/jquery-3.2.1.min.js"></script>
----------------------------------------------------
<header>
<div class="container">
<nav class="mega-menu">
<ul>
<li class="test-class">1</li>
<li class="test-class">1</li>
<li class="test-class">1</li>
<li class="test-class">1</li>
</ul>
</nav>
</div>
</header>
----------------------------------------------------
<!-- LOAD JS -->
<script src="js/bootstrap.min.js" type="text/javascript"></script>
CSS:
ul, ol {
margin: 0;
padding: 0;
list-style: none;
}
* {
margin:0;
padding:0;
}
.mega-menu {
margin-top: 32px;
position: relative;
z-index: 100;
background-color: yellow;
border: 1px solid black;
}
.mega-menu>ul {
text-align: center;
}
.mega-menu>ul>li {
display: inline-block;
font-size: 13px;
line-height: 15px;
vertical-align: top;
width: 25%;
}
.test-class {
background-color: red;
border: 1px solid blue;
}
You are facing white spaces issue and not padding/margin as you think. You can add display:flex to the container to fix the issue
#import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");
/* custom css */
ul,
ol {
margin: 0;
padding: 0;
list-style: none;
}
* {
margin: 0;
padding: 0;
}
.mega-menu {
margin-top: 32px;
position: relative;
z-index: 100;
background-color: yellow;
border: 1px solid black;
}
.mega-menu>ul {
text-align: center;
display: flex;
}
.mega-menu>ul>li {
display: inline-block;
font-size: 13px;
line-height: 15px;
vertical-align: top;
width: 25%;
}
.test-class {
background-color: red;
border: 1px solid blue;
}
<header>
<div class="container">
<nav class="mega-menu">
<ul>
<li class="test-class">1</li>
<li class="test-class">1</li>
<li class="test-class">1</li>
<li class="test-class">1</li>
</ul>
</nav>
</div>
</header>
Or the font-size:0 trick (for old browsers)
#import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");
/* custom css */
ul,
ol {
margin: 0;
padding: 0;
list-style: none;
}
* {
margin: 0;
padding: 0;
}
.mega-menu {
margin-top: 32px;
position: relative;
z-index: 100;
background-color: yellow;
border: 1px solid black;
}
.mega-menu>ul {
text-align: center;
font-size:0;
}
.mega-menu>ul>li {
display: inline-block;
font-size: 13px;
line-height: 15px;
vertical-align: top;
width: 25%;
}
.test-class {
background-color: red;
border: 1px solid blue;
}
<header>
<div class="container">
<nav class="mega-menu">
<ul>
<li class="test-class">1</li>
<li class="test-class">1</li>
<li class="test-class">1</li>
<li class="test-class">1</li>
</ul>
</nav>
</div>
</header>
Related links for more solution and explanation :
Display: Inline block - What is that space?
How to remove the space between inline-block elements?
Ignore whitespace in HTML
Your problem is whitespaces between the inline-block elements. These are known to break the expected alignment. So, in order to solve it, you can do some HTML changes, or applying font-size: 0; to the parent (and restore it with a value for the children, if needed).Your can check CSS-tricks: Fighting the space between inline block elements for more info.
The simpler solution, though, is to use display: flex on the ul. If the parent is a flexbox, its children will be aligned in a row (or a column, if you set it to), without any spaces but custom-added margins.
#import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");
/* custom css */
ul, ol {
margin: 0;
padding: 0;
list-style: none;
}
* {
margin:0;
padding:0;
}
.mega-menu {
margin-top: 32px;
position: relative;
z-index: 100;
background-color: yellow;
border: 1px solid black;
}
.mega-menu>ul {
text-align: center;
display: flex;
}
.mega-menu>ul>li {
display: inline-block;
font-size: 13px;
line-height: 15px;
vertical-align: top;
width: 25%;
}
.test-class {
background-color: red;
border: 1px solid blue;
}
<header>
<div class="container">
<nav class="mega-menu">
<ul>
<li class="test-class">1</li>
<li class="test-class">1</li>
<li class="test-class">1</li>
<li class="test-class">1</li>
</ul>
</nav>
</div>
</header>
Set float: left;
.mega-menu>ul>li {
display: inline-block;
font-size: 13px;
line-height: 15px;
vertical-align: top;
width: 25%;
float:left;
}
I'm trying to make my menu / navigationbar to center horizontally. I can't quite figure out what I've done wrong / forgotten. Also after my last li is right padding. How do I remove it?
HTML
<div class="wrapper">
<div class="header"></div>
<div class="Header"></div>
<ul class="menu">
<li>Home</li>
<li>Over mij</li>
<li>Mijn diensten</li>
<li>Contact</li>
</ul>
</div>
CSS
.wrapper {
width: 100%;
}
.menudiv {
width: 80%;
border: 1px red solid;
margin: auto;
}
.menu {
text-align: center;
border: 1px red solid;
position: relative;
display:inline-block;
transform: translateX(-50%);
left: 50%;
color: black;
padding-left: 20%;
padding-right: 18%;
min-width: 80%;
max-width: 80%;
}
.menu li {
float: left;
display: block;
padding-right: 5%;
}
.menu li:after {
content: '/';
padding-left: 20px;
}
https://jsfiddle.net/sdzLn5hd/
Well, first of all, are you sure this is how your HTML code should be?
<div class="Header">
</div>
<ul class="menu">
<li>Home </li>
<li>Over mij </li>
<li>Mijn diensten </li>
<li>Contact </li>
</ul>
instead of :
<div class="Header">
<ul class="menu">
<li>Home </li>
<li>Over mij </li>
<li>Mijn diensten </li>
<li>Contact </li>
</ul>
</div>
I'd suggest you to check this first.
Secondly, your menu is centered (the menu-items are not. Maybe that's what you meant). Just taking a look at your CSS and adding background-color to it makes it all clear.
.wrapper {
width: 100%;
}
.menudiv {
width: 80%;
border: 1px red solid;
margin: auto;
}
.menu {
border: 1px red solid;
padding: 55px 0;
position: relative;
display:inline-block;
transform: translateX(-50%);
left: 50%;
color: black;
width: 80%;
}
.menu li {
float: left;
display: block;
padding-right: 5%;
}
.menu li:after {
content:'/';
padding-left: 20px;
}
div.wrapper {
background-color: orange;
}
<title>Webdesign Maarten</title>
<body>
<div class="wrapper">
<div class="header">
<!-- hier image te zetten JQuery prefereerbaar Sliding !-->
</div>
<div class="Header">
<!-- menu float left indent met icoon gecentreerd opzicht v wrap. no list style -->
</div>
<ul class="menu">
<li>Home</li>
<li>Over mij</li>
<li>Mijn diensten</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>
Now, onto the solutions, I am not sure what exactly you are looking for, but I can suggest you two possible solutions.
Solution 1:
Modify the .menu li class as below :
.menu li {
display: block;
text-align: center;
}
See this below :
.wrapper {
width: 100%;
}
.menudiv {
width: 80%;
border: 1px red solid;
margin: auto;
}
.menu {
border: 1px red solid;
padding: 55px 0;
position: relative;
display:inline-block;
transform: translateX(-50%);
left: 50%;
color: black;
width: 80%;
}
.menu li {
display: block;
text-align: center;
}
.menu li:after {
content:'/';
padding-left: 20px;
}
<title>Webdesign Maarten</title>
<body>
<div class="wrapper">
<div class="header">
<!-- hier image te zetten JQuery prefereerbaar Sliding !-->
</div>
<div class="Header">
<!-- menu float left indent met icoon gecentreerd opzicht v wrap. no list style -->
<ul class="menu">
<li>Home</li>
<li>Over mij</li>
<li>Mijn diensten</li>
<li>Contact</li>
</ul>
</div>
</div>
</body>
</html>
Solution 2:
Modify the .menu and .menu li class as below :
.menu {
border: 1px red solid;
padding: 55px 0;
position: relative;
display:inline-block;
transform: translateX(-50%);
left: 50%;
color: black;
width: 80%;
text-align: center; /*Add this property*/
}
.menu li {
display: block;
text-align: center;
}
See this below :
.wrapper {
width: 100%;
}
.menudiv {
width: 80%;
border: 1px red solid;
margin: auto;
}
.menu {
border: 1px red solid;
padding: 55px 0;
position: relative;
display:inline-block;
transform: translateX(-50%);
left: 50%;
color: black;
width: 80%;
text-align: center;
}
.menu li {
display: inline-block;
text-align: center;
}
.menu li:after {
content:'/';
padding-left: 20px;
}
<title>Webdesign Maarten</title>
<body>
<div class="wrapper">
<div class="header">
<!-- hier image te zetten JQuery prefereerbaar Sliding !-->
</div>
<div class="Header">
<!-- menu float left indent met icoon gecentreerd opzicht v wrap. no list style -->
<ul class="menu">
<li>Home</li>
<li>Over mij</li>
<li>Mijn diensten</li>
<li>Contact</li>
</ul>
</div>
</div>
</body>
</html>
To remove padding from the last li item, you need to target it:
.menu li:last-child {
padding-right: 0;
}
Looking at your code, I can't really figure out what is that you need. Html is all messed up. Why do you close header div before menu?
Change the li to display inline-block, target the last of the li's with :last-child:
.menu {
text-align:center;
border: 1px red solid;
padding: 55px 0;
position: relative;
display:inline-block;
transform: translateX(-50%);
left: 50%;
color: black;
width: 80%;
}
.menu li {
display:inline-block;
padding-right: 5%;
}
.menu li:last-child {
padding-right: none;
}
JSFiddle Demo
Here is the best I could do. I added flexbox style to the ul, and removed some padding to get it centered.
fiddle: https://jsfiddle.net/sdzLn5hd/7/
HTML
<title>Webdesign Maarten</title>
<body>
<div class="wrapper">
<div class="header">
<!-- hier image te zetten JQuery prefereerbaar Sliding !-->
</div>
<div class="Header">
<!-- menu float left indent met icoon gecentreerd opzicht v wrap. no list style -->
</div>
<ul class="menu">
<li>Home</li>
<li>Over mij</li>
<li>Mijn diensten</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>
CSS
.wrapper {
width: 100%;
}
.menudiv {
width: 80%;
border: 1px red solid;
margin: auto;
}
.menu {
border: 1px red solid;
padding: 55px 0;
position: relative;
display:flex;
transform: translateX(-50%);
left: 50%;
color: black;
width: 80%;
}
.menu li {
margin:auto;
display: block;
}
.menu li:after {
content:'/';
padding-left: 20px;
}
https://jsfiddle.net/sdzLn5hd/9/ something like this perhaps is what you're looking for
<title>Webdesign Maarten</title>
<body>
<div class="wrapper">
<div class="header">
<!-- hier image te zetten JQuery prefereerbaar Sliding !-->
<ul class="menu">
<li>Home</li>
<li>Over mij</li>
<li>Mijn diensten</li>
<li>Contact</li>
</ul>
</div>
</div>
</body>
removing some unneeded tags in your html
put in your .menu
.menu { text-align:center; }
.menu li {
display: inline-block;
padding-right: 5%;
}
Your float:left will always send the elements to their furthest left possible.
and add this line in your css (remove the last '/' and padding)
.menu li:last-child:after {
content: '';
padding-left: 0px;
}
see here: https://jsfiddle.net/sdzLn5hd/5/
To center text and inline elements, a block parent should have text-align: center applied.
Since you have this tagged as HTML5, I would like to provide you with a more semantic approach to your HTML too. There were a lot of extra styling properties left over from you trying to get this to work, so I re-wrote your CSS thus far (including a few more changes that I try to explain in comments). You can see my code in the snippet below:
* { margin: 0px; padding: 0px; } /* Simple CSS reset */
header { display: block; text-align: center; }
h1,
nav > ul {
display: inline-block;
border: 1px red solid;
padding: 20px 0px;
width: 80%;
}
nav > ul { border-top: none; }
nav > ul > li { display: inline; }
nav > ul > li:after { content: "/" }
nav > ul > li:last-child:after { content: "" } /* Remove trailing separator */
nav > ul > li > a {
padding: 15px; /* Padding here is important for touch */
color: black;
text-decoration: none;
}
nav > ul > li > a:hover { text-decoration: underline; }
<header>
<h1>Title</h1>
<nav>
<ul>
<li>Home</li>
<li>Blog</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
I have a "hamburger" mobile navigation button that when clicked brings up a div titled #navigation. However, due to where the div is positioned (it is in other divs) the div does not extend to 100% of the width of the document, just 100% of the width of the container div.
Not only is this a problem but there is also a secondary issue because the navigation div also overlaps slightly with both the header div and the div below it. I'd rather it push the header up and the div below it down.
Whilst I could take this div out of the container and possibly fix the problems by placing it elsewhere, that then causes problems with the navigation on the full size version of the page then as the #navigation div is the same for both versions of the page, just different styling. Here's the code.
body {
margin: 0;
line-height: 1.428;
}
.wrap {
width: 90%;
max-width: 71.5em;
margin: 0 auto;
padding: 0.625em 0.625em;
}
#header {
background: #442869;
padding-top: 1em;
padding-bottom: 1em;
min-height: 6em;
}
#mobile-navigation-btn {
display: none;
float: right;
}
#navigation {
display: block;
float: right;
}
#navigation ul {
list-style: none;
}
#navigation li {
display: inline-block;
float: left;
padding-right: 2em;
padding-top: 0.7em;
padding-bottom: 0.7em;
}
#navigation li:last-child {
padding-right: 0em;
}
#navigation li a {
color: #ffffff;
text-decoration: none;
}
.show-menu {
text-decoration: none;
color: black;
background: #ac3333;
text-align: center;
padding: 20px 10px;
border: 1px black solid;
}
.show-menu:hover {
background: #ac1111;
}
#extra {
background: #222922;
padding-top: 1em;
padding-bottom: 1em;
min-height: 2em;
color: white;
}
/*Hide checkbox*/
input[type=checkbox]{
display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #navigation{
display: block;
}
#hamburger {
display: inline-block;
}
.icon-bar {
display: block;
width: 22px;
height: 2px;
border-radius: 1px;
margin-bottom: 4px;
background-color: black;
}
#media only screen and (max-width : 920px) {
#mobile-navigation-btn {
display: block;
}
#navigation {
display: none;
width: 100%;
margin: 0;
padding: 0;
background-color:#333333;
top: 0;
left: 0;
}
/*Create vertical spacing*/
#navigation li {
margin-bottom: 1px;
}
/*Make dropdown links vertical*/
#navigation ul li {
display: block;
float: none;
margin:0;
padding:0;
}
/*Make all menu links full width*/
#navigation ul li, li a {
width: 100%;
}
}
<!doctype html>
<head>
<script>
// Picture element HTML5 shiv
document.createElement( "picture" );
</script>
<script src="picturefill.min.js" async>
</script>
<title>
</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="header">
<div class="wrap">
<picture>
<source srcset="seiri-logo-regular.png" media="(min-width: 1100px)">
<img srcset="seiri-logo-small.png" alt="…">
</picture>
<div id="mobile-navigation-btn">
<label for="show-menu" class="show-menu">
<div id="hamburger">
<span class="icon-bar">
</span>
<span class="icon-bar">
</span>
<span class="icon-bar">
</span>
</div>
Menu
</label>
</div>
<input type="checkbox" id="show-menu" role="button">
<div id="navigation">
<ul>
<li>
<a href="#" class="current">
Home
</a>
</li>
<li>
<a href="#">
Customer Research
</a>
</li>
<li>
<a href="#">
Business Improvement
</a>
</li>
<li>
<a href="#">
Contact Us
</a>
</li>
<li>
<a href="#">
Blog
</a>
</li>
</ul>
</div>
</div>
</div>
<div id="extra">
<div class="wrap">
Test
</div>
</div>
</body>
</html>
you could add position: relative; to #header and position: absolute; to #navigation plus top: 69px /*adjust to your needs*/ inside #media only screen and (max-width : 920px) {}
the absolute position takes it out of the flow.
I'm trying to make my header banner stretch / fit to the website's dimensions, however, I am unsure how to make this happen on every browser.
HTML5:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Play - Learn - Grow</title>
<link rel="stylesheet" href="main.css">
</head>
<body class="body">
<span class="text_h">
Welcome to KUBE Toy Library!
</span>
<span class="banner_h">
<img src="Images\Top_Banner.jpg" alt="Banner" height="150" width ="1240"/>
</span>
<nav>
<ul class="nav">
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
<li>Become a Member</li>
<li>Borrow Toys</li>
<li>Our Policies</li>
<li>Site Map</li>
</ul>
</nav>
<span class="banner_l">
<img src="Images\Left_Banner.jpg" alt="Banner" />
</span>
<span class="banner_r">
<img src="Images\Left_Banner.jpg" alt="Banner" />
</span>
<h2 class="headers">Welcome to the Home Page!</h2>
<div class="container">
Our aim is to provide the children of the community with an ever-changing variety of educational and fun toys to enhance
their cognitive, social, emotional and physical development in the important first six years of their lives.
<br><br><span class="Links">Be sure to check out our Wikispace site with more information here!</span>
</div>
<div id="content"></div>
<div id="footer">
Copyright © 2013
</div>
</body>
</html>
CSS:
/* Entire Document CSS */
html{
height: 100%;
}
/* Header CSS */
.headers{
color: #FFD89A;
text-align: center;
padding: 10px;
}
/* Body CSS */
.body{
background-color: #61B329;
height: 50%;
color: #FFFFFF;
}
.container{
margin: 0 auto 0 auto;
width: 50em;
text-align: center;
padding-bottom: 500px;
height: 50%;
}
/* Navigation CSS */
.nav {
display: inline-block;
background-color: #00B2EE;
border: 1px solid #000000;
border-width: 1px 0px;
margin: 0;
padding: 0;
min-width: 1000px;
width: 100%;
}
.nav li {
list-style-type: none;
width: 14.28%;
float: left;
}
.nav a {
display: inline-block;
padding: 10px 0;
width: 100%;
text-align: center;
}
/* Banner / Picture CSS / Text in Images */
.banner_l{
float: left;
}
.banner_r{
float: right;
}
.banner_h{
positon: relative;
width: 100%;
}
.text_h{
position: absolute;
color: white;
text-align: center;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
}
/* Footer CSS */
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
}
#content {
padding-bottom: 3em;
}
/* Link CSS */
a:link{
color: #FFFFFF;
text-decoration: none;
}
a:visited{
color: #FFFFFF;
text-decoration: none;
}
a:hover{
background-color: #028482;
color: #FFFFFF;
text-decoration: underline;
}
a:active{
background-color: #FCDC3B;
color: #AA00FF;
text-decoration: overline;
}
.Links A:hover{
color: #028482;
background-color: transparent;
text-decoration: underline overline;
}
If your wondering why this is being created, this is for a school assessment task, and all content is fictious.
Try:
* {margin:0; padding: 0;}
.banner_h {display: block; width: 100%;}
.banner_h img {width:100%}
Check the result out in a fiddle.
I'm currently coding my design portfolio and have encountered a problem with the layout.
Here is a link to my website so you can see the problem: http://www.mozazdesign.co.cc/
Basically, I want the contact me and the icons below to appear under the header and navigation. I have put them in separate containers but for some reason where ever I place the contact me div the header follows.
Here's the code:
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link href="styles.css" rel="stylesheet" type="text/css" />
<title>MozazDesign Portfolio</title>
</head>
<body>
<div id="container">
<div id="header">
<div id="logo">
</div><!--end logo-->
<div id="nav">
<ul id="main_nav">
<li>home</li>
<li>about me</li>
<li>gallery</li>
<li>blog</li>
<li>contact</li>
</ul><!--end main nav-->
</div><!--end nav-->
</div><!--end header-->
<div id="main_content">
<div id="contact">
</div><!--end contact"-->
</div><!--end main content-->
</div><!--end container-->
</body>
body {
padding: 0px;
margin: 0px;
background:url('images/Background.png');
font-family: century gothic;
}
#nav a {
text-decoration: none;
color: white;
}
#container {
margin: 0 auto;
width: 960px;
}
#header {
width: 960px;
}
#logo {
background:url('images/Logo.png') no-repeat;
height: 340px;
width: 524px;
float: left;
margin-left: 0px; <!--check-->
}
#nav {
background:url('images/Nav_Container.png') no-repeat;
width: 435px;
height: 33px;
float: right;
margin-top: 100px;
padding: 0px;}
#main_nav {
padding: 0px;
margin-left: 15px;
margin-top: 5px;
}
#main_nav li {
list-style: none;
display: inline;
font: 18px century gothic, sans-serif;
color: white;
margin-right: 18px;
}
#main_content {
width: 960px;
margin-top: 250px;
}
#contact {
background: url('images/contact.png');
height: 274px;
width: 295px;
}
I would really appreciate any help! Thanks in advance! :)
One of the problems you had was that your floated elements were not being contained inside the parent element (#header). You can use overflow:auto; on the parent element to contain floated elements inside. But, for a header like this, I usually opt to just position everything absolutely, since the content is not dynamic.
I am not sure if this is exactly what you are looking for, but this CSS will make it look like what you are looking for, I think.
body {
padding: 0px;
margin: 0px;
background:url('Images/background.png');
font-family: century gothic;
}
#nav a {
text-decoration: none;
color: white;
}
#container {
margin: 0 auto;
width: 960px;
}
#header {
height:200px;
position:relative;
}
#logo {
background:url('Images/Logo.png') no-repeat;
height: 340px;
width: 524px;
position:absolute;
}
#nav {
background:url('Images/Nav_Container.png') no-repeat;
width: 435px;
height: 33px;
position:absolute;
right:0;
top:100px;
padding: 0px;
}
#main_nav {
padding: 0px;
margin-left: 15px;
margin-top: 5px;
}
#main_nav li {
list-style: none;
display: inline;
font: 18px century gothic, sans-serif;
color: white;
margin-right: 18px;
}
#main_content {
}
#contact {
background:url('Images/Contact.png');
height: 274px;
width: 295px;
margin-left:125px;
}
Looks like you need clear: both on your main_content div.
I think an
#header {
overflow:hidden
}
or anything else that clears the floats of div#nav and div#logo should help.
It take 2 steps:
1) Move <div id="contact">...</div><!--end contact"--> into <div id="logo">...</div><!--end logo-->.
2) Change the #contact style to:
background: url("Images/Contact.png") repeat scroll 0 0 transparent;
height: 274px;
top: 200px;
width: 295px;
position: relative;
float: right;
top: 200px;
You need to set position: relative, otherwise it is not working.