I am recently new to CSS and HTML and I have a problem while allocating my block under the header:
I have tried several solutions but I have not succeed. I would appreciate if you could give me a hint with it. Thanks
<! DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title goes here</title>
<meta name="description" content="Description of your site goes here">
<meta name="keywords" content="keyword1, keyword2, keyword3">
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="page">
<div class="header" >
<h1>
<img src="images/img1.jpg" width="250" height="190" float="right" />
<p> SOME TEXT HERE </p>
</h1>
</div>
<div class="topmenu">
<ul>
<li>Home</li>
<li>About Us</li>
<li>What's New</li>
<li>Services</li>
<li>Contact</li>
<li>Resources</li>
<li>Links</li>
</ul>
</div>
</body>
</html>
And my CSS CODE:
body {
font-family: sans-serif,Arial;
font-size: 12px;
color: #000000;
margin: 0px;
background-color:#d9d7d7;
}
h1, h2, h3, h4, h5, h6, p, ul, ol, li, form, input, textarea {
padding: 0px;
margin: 0px;
color: black;
}
a {
color: #072FCF;
text-decoration: underline;
}
a:hover {
color: #072FCF;
text-decoration: none;
}
.main-out {
background-image: url(../images/trans.png);
background-position: center top;
width: 100%;
float: left;
}
.main {
width: 1000px;
margin: 0px auto;
}
.page {
width: 1000px;
float: left;
padding: 42px 0px 0px 0px;
position: center;
}
.header {
position:absolute;
top:42px;
margin-left:-500px;
left:50%;
width: 1000px;
height: 200px;
background-color: white;
border-style: solid solid none solid;
border-width: thick;
}
.header h1{
display: inline;
text-align: left;
font-family: cursive;
font-size: 45px;
color: black;
}
.header img {
display: block;
float: left;
}
.header p {
line-height: 190px; /* Here is the trick... line-height = image height */
}
.topmenu {
position:absolute;
background-color: black;
width: 1000px;
height: 37px;
border: 1px solid #000000;
}
.topmenu ul {
width: 100%;
height: 37px;
list-style-type: none;
}
.topmenu ul li {
height: 37px;
float: left;
padding-right: 24px;
padding-left: 24px;
}
.topmenu ul li a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
line-height: 37px;
color: #FFFFFF;
text-decoration: none;
display: block;
height: 37px;
float: left;
padding-right: 21px;
padding-left: 21px;
}
.topmenu ul li a:hover {
background-image: url(../images/menu-hov.jpg);
background-repeat: repeat-x;
background-position: left top;
}
Thanks
I have made several changes to your html/css:
body {
font-family: sans-serif, Arial;
font-size: 12px;
color: #000000;
margin: 0px;
background-color:#d9d7d7;
}
h1, h2, h3, h4, h5, h6, p, ul, ol, li, form, input, textarea {
padding: 0px;
margin: 0px;
color: black;
}
a {
color: #072FCF;
text-decoration: underline;
}
a:hover {
color: #072FCF;
text-decoration: none;
}
.main-out {
background-image: url(../images/trans.png);
background-position: center top;
width: 100%;
float: left;
}
.main {
width: 1000px;
margin: 0px auto;
}
.page {
width: 1000px;
margin: 0 auto;
}
.header {
position: relative;
width: 1000px;
height: 200px;
background-color: white;
border-style: solid solid none solid;
border-width: thick;
}
.header h1 {
display: inline;
text-align: left;
font-family: cursive;
font-size: 45px;
color: black;
}
.header img {
display: block;
float: left;
}
.header p {
line-height: 190px;
/* Here is the trick... line-height = image height */
}
.topmenu {
position:relative;
background-color: black;
width: 1000px;
height: 37px;
border: 1px solid #000000;
padding-right: 8px;
}
.topmenu ul {
width: 100%;
height: 37px;
list-style-type: none;
}
.topmenu ul li {
height: 37px;
float: left;
padding-right: 24px;
padding-left: 24px;
}
.topmenu ul li a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
line-height: 37px;
color: #FFFFFF;
text-decoration: none;
display: block;
height: 37px;
float: left;
padding-right: 21px;
padding-left: 21px;
}
.topmenu ul li a:hover {
background-image: url(../images/menu-hov.jpg);
background-repeat: repeat-x;
background-position: left top;
}
<body>
<div class="page">
<div class="topmenu">
<ul>
<li>Home
</li>
<li>About Us
</li>
<li>What's New
</li>
<li>Services
</li>
<li>Contact
</li>
<li>Resources
</li>
<li>Links
</li>
</ul>
</div>
<div class="header">
<h1>
<img src="images/img1.jpg" width="250" height="190" float="right" />
<p> SOME TEXT HERE </p>
</h1>
</div>
</body>
You need to understand three things to improve your html & css skills:
Always follow natural stacking order (first element in html will
display before second element...),
Don't use position: absolute
except if you know what you are doing as #Billy said,
Use html5 tags if you don't need to support IE8 and below. If you do, then use HTML5
Shiv to make them compatible.
Now here is a valid code that is also responsive (it will resize to your browser's viewport size). I have added a lot of comments in the code so that you can easily understand.
Good luck with your project!
.page {
width: 100%; /* Makes the page responsive */
max-width: 1000px; /* all the content inside this div will be 1000 px width */
margin: 0 auto; /* To center your page div in the page */
}
.topmenu ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.topmenu ul li a {
display: block;
float: left;
width: 14.2857142%; /* 100 / 7 (number of menu items) */
background-color: #000;
font: bold 12px Arial, Helvetica, sans-serif;
color: #fff;
text-decoration: none;
padding: 10px 0;
text-align: center;
}
.topmenu ul li a:hover {
/* As a general rule, never use images for hovers */
background-color: #fff;
color: #000;
}
.topmenu:after { /* This is a clearfix to clear your floated elements */
content: "";
display: table;
clear: both;
}
header img {
display: inline-block;
width: 250px;
height: 190px;
}
header h1 {
display: inline;
text-align: left;
font-family: cursive;
font-size: 25px;
color: black;
vertical-align: top; /* if you want the text to start at the top of the picture. Otherwise try middle or bottom */
}
<div class="page">
<!-- always start with the first element on your page: here it's your navigation -->
<nav class="topmenu"> <!-- use html5 tags. If you need to support IE8 or below you can use HTML5 Shiv -->
<ul>
<li>Home</li>
<li>About Us</li>
<li>What's New</li>
<li>Services</li>
<li>Contact</li>
<li>Resources</li>
<li>Links</li>
</ul>
</nav>
<header> <!-- same, use html5 tags -->
<!-- As a general rule, css is for styling not html so don't put any width, height or style in img tag -->
<img src="http://placehold.it/250x190" alt="your picture description"/> <!-- always use alt text in images for accessibility purposes -->
<h1>SOME TEXT HERE</h1>
</header>
</div> <!-- don't forget this div that closes your .page -->
Remove all of your absolute positioning (and add in the missing </div> tag to finish the .page div - I'm assuming this is wrapping all of your content inside).
To center your content, replace your .page CSS rule with this:
.page{
width: 1000px; // I would reccommend using 960px instead as it is more standard
margin: 0 auto;
//add your padding in if you need it
}
Don't use absolute positioning until you understand it and why/how/when you should use it
I think you should rearrange your HTML markup.It doesn't seem like you are using the proper nested rule.I suggest you try to remove the img tag outside the h1 tag.Your div with class = "page" doesn't have a ending tag.
Related
This question already has answers here:
How to disable margin-collapsing?
(12 answers)
Closed 5 years ago.
Here is the HTML code (the white gap started appearing as soon as I added h3 to the last div):
body {
margin: 0;
font-family: sans-serif;
font-weight: 400;
background-image: url("../images/rooms.jpg");
}
.container {
width: 80%;
margin: 0 auto;
}
header {
background: #343434;
}
header::after {
content: '';
display: table;
clear: both;
}
.logo {
float: left;
padding: 10px;
}
nav {
float: right;
}
nav ul {
margin: 0;
padding: 0;
list-style-type: none;
}
nav li {
padding: 0;
display: inline-block;
margin-left: 60px;
padding-top: 19px;
position: relative;
}
nav a {
text-decoration: none;
color: white;
font-size: 13px;
text-transform: uppercase;
padding: 1em 0.5em;
}
nav a:hover {
color: yellow;
}
.welcome {
width: 100%;
height: 250px;
background: #406295;
}
.welcome h3 {
text-align: center;
}
<header>
<div class="container">
<img src="images/logo.png" alt="">
<nav>
<ul>
<li>Room Types</li>
<li>Services</li>
<li>About Us</li>
</ul>
</nav>
</div>
</header>
<div class="welcome">
<h3>Welcome to</h3>
</div>
I am fairly new to web development and stackoverflow. So I am sorry for any inconveniences. Any help is appreciated. Thank you.
Set margin: 0px; on h3 tag to resolve this issue. Check updated Snippet below..
body{
margin:0;
font-family: sans-serif;
font-weight: 400;
background-image: url("../images/rooms.jpg");
}
.container{
width: 80%;
margin : 0 auto;
}
header{
background: #343434;
}
header::after{
content: '';
display: table;
clear:both;
}
.logo{
float: left;
padding:10px;
}
nav{
float:right;
}
nav ul{
margin: 0;
padding: 0;
list-style-type: none;
}
nav li{
padding: 0;
display: inline-block;
margin-left: 60px;
padding-top: 19px;
position: relative;
}
nav a{
text-decoration: none;
color:white;
font-size: 13px;
text-transform: uppercase;
padding: 1em 0.5em;
}
nav a:hover{
color:yellow;
}
.welcome{
width: 100%;
height: 250px;
background: #406295;
}
.welcome h3{
text-align: center;
margin: 0px;
}
<header>
<div class="container">
<img src="images/logo.png" alt="">
<nav>
<ul>
<li>Room Types</li>
<li>Services</li>
<li>About Us</li>
</ul>
</nav>
</div>
</header>
<div class="welcome">
<h3>Welcome to</h3>
</div>
Just remove the margin from h3 like
.welcome h3 {
text-align: center;
margin:0;
}
body {
margin: 0;
font-family: sans-serif;
font-weight: 400;
background-image: url("../images/rooms.jpg");
}
.container {
width: 80%;
margin: 0 auto;
}
header {
background: #343434;
}
header::after {
content: '';
display: table;
clear: both;
}
.logo {
float: left;
padding: 10px;
}
nav {
float: right;
}
nav ul {
margin: 0;
padding: 0;
list-style-type: none;
}
nav li {
padding: 0;
display: inline-block;
margin-left: 60px;
padding-top: 19px;
position: relative;
}
nav a {
text-decoration: none;
color: white;
font-size: 13px;
text-transform: uppercase;
padding: 1em 0.5em;
}
nav a:hover {
color: yellow;
}
.welcome {
width: 100%;
height: 250px;
background: #406295;
}
.welcome h3 {
text-align: center;
margin:0;
}
<header>
<div class="container">
<img src="images/logo.png" alt="">
<nav>
<ul>
<li>Room Types</li>
<li>Services</li>
<li>About Us</li>
</ul>
</nav>
</div>
</header>
<div class="welcome">
<h3>Welcome to</h3>
</div>
This is due to collapsing margins
Remove the margin on the h3. Replace it with padding if you want to create space between the header and maintain the background colour.
body {
margin: 0;
font-family: sans-serif;
font-weight: 400;
background-image: url("../images/rooms.jpg");
}
.container {
width: 80%;
margin: 0 auto;
}
header {
background: #343434;
}
header::after {
content: '';
display: table;
clear: both;
}
.logo {
float: left;
padding: 10px;
}
nav {
float: right;
}
nav ul {
margin: 0;
padding: 0;
list-style-type: none;
}
nav li {
padding: 0;
display: inline-block;
margin-left: 60px;
padding-top: 19px;
position: relative;
}
nav a {
text-decoration: none;
color: white;
font-size: 13px;
text-transform: uppercase;
padding: 1em 0.5em;
}
nav a:hover {
color: yellow;
}
.welcome {
width: 100%;
height: 250px;
background: #406295;
}
.welcome h3 {
text-align: center;
margin-top: 0;
}
<header>
<div class="container">
<img src="images/logo.png" alt="">
<nav>
<ul>
<li>Room Types</li>
<li>Services</li>
<li>About Us</li>
</ul>
</nav>
</div>
</header>
<div class="welcome">
<h3>Welcome to</h3>
</div>
You can try adding style="display: inline; margin:0px; padding:0px;" to your <h3> Tag.
Another way is to apply a rule of overflow: auto to the .welcome div... thus creating a new block formatting context and avoiding the collapsing margins.
Edit: Let's add a little more context. In the spec, you can read that adjoining margins will collapse under certain circumstances. In particular, the margins need to belong to block-level boxes participating in the same block formatting context.
Even though .welcome and h3 are block-level boxes in your example, neither automatically establishes a new block formatting context (meaning they participate in the same block formatting context, meaning their margins collapse). Looking at the spec again, we see that some of the ways to establish a new block formatting context is to have a float, an absolutely positioned element, or a block box with the property of overflow set to something else than visible.
That's why the suggestions regarding overflow: auto or floating one of the elements work. My understanding is that if we make .welcome establish a new block formatting context, the context it participates in is different from the one it establishes itself. Removing the margin (possibly replacing it with padding) is another way to get around the problem.
Either apply margin-top:0 for H3-Tag
or
apply a float:left for .welcome
Both will fix your issue
Question
I've looked over the code very carefully and can't see a reason at all whatsoever why the header nav float isn't working in the stylesheet. I'm including all the html code and css code down below. I want to move my
header nav to the right in my css code so that my links appear on the top right corner of my home page horizontally.
body {
font: 15px/1.5 Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
background-color: #f4f4f4;
}
/*Global*/
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
ul {
margin: 0;
padding: 0;
}
/* header */
header {
background: #35424a;
color: #fff;
padding-top: 30px;
min-height: 70px;
border-bottom: #000 3px solid;
}
header a {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header li {
float: left;
display: inline;
padding: 0 20px 0 20px;
}
header #branding {
float: left;
}
header #branding h1 {
margin: 0;
}
header nav {
float: right;
margin-top: 10px;
}
header .highlight, header .current a {
color: #e8491d;
font-weight: bold;
}
header a:hover {
color: #ccc;
font-weight: bold;
}
/* Home Section */
#home {
min-height: 400px;
background: url("http://www.ridgedesign.ie/wp-content/uploads/2011/02/Ridge-Design-Website-Design-Background.jpg") 0 400px;
background-size: cover;
text-align: center;
color: #fff;
}
#home h1 {
margin-top: 100px;
font-size: 55px;
margin-bottom: 10px;
}
#home p {
font-size: 20px;
<!DOCTYPE>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Home</title>
<body>
<header>
<div class="container">
<div id="branding"><span class="highlight"><h1>James
Velardi</span></h1>
<nav>
<ul>
<li class="current">Home</li>
<li>About</li>
<li>Services</li>
</ul>
</nav>
</div>
</div>
</header>
<section id="home">
<div class="container">
<h1>Affordable Professional Web Design</h1>
<p>laskfj;jla;jal;j;aljs;lasj;lasjl;ajsdlajsdl;fajsldfkjals;dfjalsdkfjalsf</p>
</div>
</section>
You have two problems that become quite obvious if you look at the page in the browser inspector:
The first is that you have floated the branding div, and floating an element removes it from the regular flow and it isn't full width anymore, so the navigation that is inside is put below the heading.
You have mixed the opening and closing tags of <h1> and <span class="highlight"> and this caused that the block <h1> is being inside of the inline <span>, at least in Firefox.
Compare this screenshot of your example in the Firefox inspector:
With this other one of the adjusted code:
Remember, browser inspector is your friend.
body {
font: 15px/1.5 Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
background-color: #f4f4f4;
}
/*Global*/
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
ul {
margin: 0;
padding: 0;
}
/* header */
header {
background: #35424a;
color: #fff;
padding-top: 30px;
min-height: 70px;
border-bottom: #000 3px solid;
}
header a {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header li {
float: left;
display: inline;
padding: 0 20px 0 20px;
}
header #branding {
/*float: left;*/
}
header #branding h1 {
margin: 0;
}
header nav {
float: right;
margin-top: 10px;
}
header .highlight, header .current a {
color: #e8491d;
font-weight: bold;
}
header a:hover {
color: #ccc;
font-weight: bold;
}
/* Home Section */
#home {
min-height: 400px;
background: url("http://www.ridgedesign.ie/wp-content/uploads/2011/02/Ridge-Design-Website-Design-Background.jpg") 0 400px;
background-size: cover;
text-align: center;
color: #fff;
}
#home h1 {
margin-top: 100px;
font-size: 55px;
margin-bottom: 10px;
}
#home p {
font-size: 20px;
<!DOCTYPE>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Home</title>
<body>
<header>
<div class="container">
<div id="branding"><h1><span class="highlight">James
Velardi</span></h1>
<nav>
<ul>
<li class="current">Home</li>
<li>About</li>
<li>Services</li>
</ul>
</nav>
</div>
</div>
</header>
<section id="home">
<div class="container">
<h1>Affordable Professional Web Design</h1>
<p>laskfj;jla;jal;j;aljs;lasj;lasjl;ajsdlajsdl;fajsldfkjals;dfjalsdkfjalsf</p>
</div>
</section>
I added class="nav" to the navigation unordered list and set position to absolute using a .nav selector.
.nav {
position:absolute;
top: 20px;
right:0px;
}
You can change the position by adjusting top and right values.
body {
font: 15px/1.5 Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
background-color: #f4f4f4;
}
/*Global*/
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
ul {
margin: 0;
padding: 0;
}
/* header */
header {
background: #35424a;
color: #fff;
padding-top: 30px;
min-height: 70px;
border-bottom: #000 3px solid;
}
header a {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
.nav {
position:absolute;
top: 20px;
right:0px;
}
header li {
float: left;
display: inline;
padding: 0 20px 0 20px;
}
header #branding {
float: left;
}
header #branding h1 {
margin: 0;
}
header nav {
float: right;
margin-top: 10px;
}
header .highlight, header .current a {
color: #e8491d;
font-weight: bold;
}
header a:hover {
color: #ccc;
font-weight: bold;
}
/* Home Section */
#home {
min-height: 400px;
background: url("http://www.ridgedesign.ie/wp-content/uploads/2011/02/Ridge-Design-Website-Design-Background.jpg") 0 400px;
background-size: cover;
text-align: center;
color: #fff;
}
#home h1 {
margin-top: 100px;
font-size: 55px;
margin-bottom: 10px;
}
#home p {
font-size: 20px;
}
<header>
<div class="container">
<div id="branding"><span class="highlight"><h1>James
Velardi</h1></span>
<nav>
<ul class="nav">
<li class="current">Home</li>
<li>About</li>
<li>Services</li>
</ul>
</nav>
</div>
</div>
</header>
<section id="home">
<div class="container">
<h1>Affordable Professional Web Design</h1>
<p>laskfj;jla;jal;j;aljs;lasj;lasjl;ajsdlajsdl;fajsldfkjals;dfjalsdkfjalsf</p>
</div>
</section>
I think your #branding div being floated left is breaking it--and doesn't seem necessary since you want that left aligned anyway.
It works for me with:
#branding {
float: none
}
Also - in your html you need to move your floated .nav div before the .highlight span
I've begun making a basic porfolio page and I'm starting with a simple header that I want at the top center of the white space of the page, and it seems to be hidden or just not there at all. Can anybody see what I'm doing wrong? Link to site: http://me14ch.leedsnewmedia.net/portfolio/portfolio.html
Here is the HTML bit i'm focusing on:
<div class="header"><h1>Portfolio</h1></div>
and the entire CSS for the whole site is:
* {
margin:0;
border:0;
padding:0;
}
body {
height: 100%;
width: 100%;
overflow: hidden;
}
.navigation li {
display: inline;
}
a {
color: grey;
text-decoration: inherit;
}
a:hover{
color: black;
}
.current {
font-weight:normal;
margin-bottom:5px;
border-bottom: 2px solid;
display: table;
}
.wrapper {
margin-left: 0 auto;
margin-right:0 auto;
margin-top: 15%;
margin-bottom: 10%;
text-align:center;
}
h1 {
font-family:"Kaushan Script";
font-size: 4em;
color:#FADBC8 ;
}
h2 {
font-size: 1em;
text-transform:uppercase;
text-decoration: none;
letter-spacing: 0.2em;
text-decoration: none;
font-family: "Poiret One";
}
#header {
text-align:center;
width: 80%;
float: left;
background-color: black;
}
.photo img {
width: 12%;
height: 12%;
border-radius:50%;
border: 3px solid #FADBC8;
margin-top:30px;
}
#sidebar {
float: left;
margin-right: 5px;
font-family: "Poiret One";
text-transform: uppercase;
letter-spacing: 0.25em;
height: 100%;
width: 20%;
text-align: left;
position: fixed;
background: #F9DBC8;
}
#sidebar li {
list-style-type: none;
color: white;
margin-top: 10%;
margin-bottom: 10%;
margin-left: 10px;
padding: 0;
}
/* drop down menu */
#sidebar ul {
list-style-type:none;
position: relative;
width: 50%;
z-index: 2;
margin-top: 70%;
}
#sidebar ul li ul {
margin: 0;
}
#sidebar ul ul {
display: none;
}
#sidebar ul li:hover > ul {
display: block;
}
.social-sidebar-buttons {
float: right;
width: 3%;
margin-top: 31%;
margin-right: 2%;
}
in your css you have 'header' as id and not a class, use the dot notation for a class
.header {
text-align:center;
width: 80%;
float: left;
background-color: black;
}
adding margin:auto; will center the div in the middle. It automatically gives even spacing either side.
Well.. your defining a class but styling a id selector.
1.) remove the below.
#header { ... }
2.) replace with.
.header { ... }
3.) You need to define a height, you can keep your existing style you had associated with misplaced #header but a few additional suggestions below:
.header {
height: 100px; // define height
margin: 0 auto; // center if you want
}
You have multiple closed head tags and you haven't defined a class for your header.
<!doctype html>
<html>
<head>
<style>
.header {
text-align:center;
width: 80%;
float: left;
background-color: black;
}
</style>
<meta charset="UTF-8">
<title>Chloe Hammond - Digital Portfolio</title>
<link href="stylesheet2.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Bad+Script|Kaushan+Script|Poiret+One' rel='stylesheet' type='text/css'>
<!--METADATA-->
<meta name="description" content="A digital portfolio page showcasing Chloe Hammond's most recent projects from her New Media degree course at the University of Leeds. "/>
<meta name="keywords" content="chloe, hammond, portfolio, digital, new, media, experience, contact, work, university, student, leeds, intern, internship, freelance"/>
</head>
<body>
<div id="sidebar">
<h2><ul>
<li>Home</li>
<li class="current">Portfolio
<ul>
<li>Design</li>
<li><a href="photo.html">Photo</li>
<li><a href="motion.html">Motion</li>
<li><a href="web.html">Web</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
</ul></h2>
</div>
<div class="header"><h1>Portfolio</h1></div>
<div class="social-sidebar-buttons">
<img src="facebook2.png" target="_blank" alt="Connect with Chloe on Facebook"/>
<img src="twitter2.png" target="_blank" alt="Connect with Chloe on Twitter" />
<img src="instagram2.png" target="_blank" alt="View Chloe's Instagram feed" />
<img src="mailto2.png" target="_blank" alt="Email Chloe" />
</div>
</div>
</body>
</html>
In my code I used h tags for the different text i wanted to display. But for some reason, my h5 and h6 tags won't vertically align nicely to the left. It also looks like the text in the header is doing something to it
HTML
<head>
<meta charset="utf-8" />
<title>Amanda Farrington</title>
<link rel="stylesheet" href="css/demo.css" />
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,500' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="header">
<a href="index.html"><div id="leftHeader">
<img src="assets/logo2.jpg" alt="Logo" style="width:65px;height:65px">
<h1>Amanda Farrington</h1>
</div>
<div id="nav">
<ul>
<li>About</li>
<li>Work</li>
<li>Contact</li>
<li>Notes</li>
</ul>
</div>
</div>
<div id="hero2">
<h6>Project Type</h6>
<h5>Project Title</h5>
</div>
<div id="workImage">
<img src="assets/trees.jpg" alt="Logo" style="width:100%;height:100%">
</div>
<div id="workInfo">
<p>BOUT MY PROJECTS<p>
</div>
</body>
</html>
CSS
/*----------header styles-------------*/
#header {
color: #D7DADB;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size : 15px;
text-align: left;
width: 100%;
padding-left: 3em;
position: relative;
height: 15%;
box-sizing: border-box;
padding-top: 1em;
}
#header img
{
float: left;
padding-left: 3em;
}
h1{
width: 9em;
float: left;
padding-left: 0.5em;
color: #45CCCC;
padding-bottom: 1px;
}
#nav {
width: 50%;
margin:0;
padding:0;
text-align: right;
color: red;
font-size:20px;
float: right;
padding-right: 2em;
}
#nav ul {
padding: 1px;
}
#nav li {
display: inline;
padding: 38px;
}
#nav li a {
color: #2C3E50;
text-decoration: none;
}
#nav li a:hover {
color: #45CCCC;
}
/*----------work page styles-------------*/
#hero2{
width: 100%;
height: 10em;
position: relative;
background: red;
top: 5em;
}
#workImage
{
top: 9%;
width: 80%;
z-index: 1;
margin-left: auto;
margin-right: auto;
position: static;
}
#workInfo{
width: 70%;
height: 50em;
margin-left: auto;
margin-right: auto;
}
p{
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 25px;
color: #2C3E50;
float: left;
}
h5{
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 40px;
color: #2C3E50;
float: left;
display: inline-block;
vertical-align: middle;
}
h6{
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 20px;
color: #45CCCC;
float: left;
}
Your parent containers are collapsing since you're applying float:left; to your <p>, <h5>, and <h6> tags. Floats take items out of the document flow. So when you float all elements within a div, the div will collapse because it doesn't think anything is in the div. To force the div to respect floated elements within itself, you need to apply a clearfix class to #hero2. This will push down the image and text immediately below the hero down.
clearfix CSS
.clearfix:before, .clearfix:after {
content: " ";
display: table;
}
.clearfix:after { clear: both; }
To understand clearfix better, read this SO thread: "Which method of clearfix is best?"
I've never seen anything stupid like that, or may be it's 2:30 am and I am hallucinating. I've made simple anchor links within the header and I am completely unable to click on them. They are just plain text and are completely non-clickable.
I'll be thankful if you can give me a hint as what/where I am not obeying the HTML/CSS daemon.
HTML
<header>
<div class="confine">
<div class="complete-head-content">
<div class="left-width-less logo-width">
<img src="./imgs/twit-logo.png" />
</div>
<div class="right-width-less">
<div class="top-header-content">
<h1 class="pres-title">Defining Twisted Strategy</h1>
</div>
<div class="lower-header-content">
<div id="navcontainer">
<ul>
<li>Meet the Hobos</li>
<li>Why me?</li>
<li>Our Work in Oblivion</li>
<li>Our Perspective</li>
<li>Our Approach</li>
</ul>
</div>
</div>
</div>
<div class="c"> </div>
</div>
</div>
</header>
<div id="contend">
... ... ...
CSS
a {
color: #EA2E49;
text-decoration: none;
}
a:hover {
text-decoration: underline;
color: #EA2E49;
cursor: pointer;
}
header {
height: 50px;
position: absolute;
top: 0;
left: 0;
width: 100%;
display: block;
z-index: 1;
}
.complete-head-content {
width: 100%;
background-color: #a0c654;
height: 130px;
}
.left-width-less {
float: left;
background-color: #fff;
width: 15%;
text-align: center;
height: 130px;
vertical-align: middle;
}
.left-width-less img {
width : 76px;
height: 100px;
margin-top: 10px;
}
.right-width-less {
float: right;
width: 85%;
}
.top-header-content {
width: 100%;
height: 70px;
background: #437b3c url("../imgs/presentation-title-bg.jpg") no-repeat right;
}
.lower-header-content {
width: 100%;
height: 70px;
}
.logo {
cursor: pointer;
}
/* Navigation */
#navcontainer {
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
text-transform: uppercase;
margin-top: 19px;
}
#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: left;
}
#navcontainer ul li { display: inline; }
#navcontainer ul li a
{
text-decoration: none;
padding: .2em 1.7em;
color: #fff;
}
#navcontainer ul li a:hover
{
color: #fff;
background-color: #369;
}
EDIT
Thanks to Nikhil, the had a Z-index:1 which when removed fixed the bug.
Thanks.
Unless you left something out. it is working for me with and without css.
Tested in IE 8
How did you include the CSS btw?
The <div id="contend"> right next to tag had a z-index:1. This made every link in <header> tag non-clickable.
The solution was to remove the z-index property.
Hope it helps someone.