The first h1 tag I use in my code works for me with the styling I'm going for but the second and third ones don't. The second one does not become a heading at all (just plain small text) and the third is too big.
h1 {
color: #2B2B2B;
white-space: normal;
word-break: break-all;
font-family: Georgia;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<img src="Logo.png" alt:"">
<div class="container">
<nav>
<ul>
<li>About Us</li>
<li>Services</li>
<li>Continuing Education Courses</li>
<li>Support Groups & Workshops</li>
<li>First Appointment & Fees Insurance</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
<hr>
<div class="profile-box">
<img src="Group 1.png" alt="" align="center" width="300px" height="100px">
<main>
<section>
<h1>Grounding and Resourcing Technique Giveaway</h1>
<h2>
Being a mental health clinician can be such an empowering and rewarding role. You can change,
help, and nourish so many of those struggling with everyday life. Through the responsibilities
you take on while helping others, it’s so important to practice grounding and resourcing
techniques with your clients.
</h2>
</section>
<div class="child-one child" <h1>Bill Maceus, Co-Founder of XYZ is giving away a FREE handout for
grounding and resourcing methods.</h1>
<img src="Rectangle 817.png" alt="" align="left">
<h2>
Learn ways to keep your client grounded by establishing comfortability, learning breathing and
body awareness techniques, object-based resourcing, and so much more. This handout will help you
overcome some of those challenges you face daily as a mental health clinician while working with
clients.
</h2>
<hr>
<h1>Simply fill out the form below to download.</h1>
<h2>You will be sent a copy to your email.</h2>
</div>
</main>
</div>
</div>
</body>
There's a syntax error in your HTML. The following line is incomplete:
<div class="child-one child"
Anything that comes after that line may produce unexpected results. You need to complete the opening div tag (and also close it somewhere, if that is your complete code).
<div class="child-one child">
Use <style> tag to enclose the css.
<style>
h1 {
color: #999999;
white-space:normal;
word-break: break-all;
font-family: Georgia;
text-align:center;
}
</style>
You also forgot the closing tag for div, though not entirely sure where you want the placement for closing tag would be.
<div class="child-one child"></div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<img src="Logo.png" alt:"">
<div class= "container">
<nav>
<ul>
<li>About Us</li>
<li>Services</li>
<li>Continuing Education Courses</li>
<li>Support Groups & Workshops</li>
<li>First Appointment & Fees Insurance</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
<hr>
<div class="profile-box">
<img src="Group 1.png" alt="" align="center" width="300px" height="100px">
<main>
<h1>Grounding and Resourcing Technique Giveaway</h1>
<section>
<h2>
Being a mental health clinician can be such an empowering and rewarding role. You can change,
help, and nourish so many of those struggling with everyday life. Through the responsibilities you take on while helping others, it’s so important to practice grounding and resourcing techniques with your clients.
</h2>
</section>
<div class="child-one child">
<h1>Bill Maceus, Co-Founder of XYZ is giving away a FREE handout for grounding and resourcing methods.</h1>
<img src="Rectangle 817.png" alt="" align="left">
<h2>
Learn ways to keep your client grounded by establishing comfortability, learning breathing and body awareness techniques, object-based resourcing, and so much more. This handout will help you overcome some of those challenges you face daily as a mental health clinician while working with clients.
</h2>
<hr>
<h1>Simply fill out the form below to download.</h1>
<h2>You will be sent a copy to your email.</h2>
</div>
<style>
h1 {
color: #2B2B2B;
white-space:normal;
word-break: break-all;
font-family: Georgia;
text-align:center;
}
</style>
</body>
You had a lot of errors such as no closing body or div tags, and now all of them are the same size.
You leave a closing tag on div class
<div class="child-one child"
<h1>Bill Maceus, Co-Founder of XYZ is giving away a FREE handout for grounding and resourcing methods.</h1>
Please complete the code to be:
<div class="child-one child">
If you are using VS Code editor, install Auto Close Tag extension if you haven't yet to avoid this kind of problem and Prettier extension as well is a big help for you to looks your code organize and easy to see what is wrong.
Links:
Auto Close Tag extension - https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag
Prettier extension - https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
Related
i am making a website for school. The images need to float right with some <p> text to left of it but cant make it work. Who can help me, see img for clearence. Here is some code:
.img-inno {
float: right;
height: 10%;
width: 10%;
text-align: left;
}
<header class="inno"> Innovation 1, Running
</header>
<p> One of the best sporting technoligies out is a treadmill to determine which running shoes you need. </p>
<p> You will walk a couple of 100 meters and a screen will show how you place you foot in the shoes you have tested. </p>
<p> Based on that you can choose new choes and will determine again if the shoes fit. </p>
Eventually you will have some good data which shoes will fit the best. The data will be sent via email.
<footer>
<p> These shops are everywhere! In the USA and The Netherlands, you name it! </p>
More info? Click here
</footer>
<a href="https://21run.com/eu/">
<img class="img-inno" id="img1" src="https://hips.hearstapps.com/hmg-prod/images/male-athlete-running-on-tartan-track-royalty-free-image-1624297569.jpg?crop=0.670xw:1.00xh;0.245xw,0&resize=640:*" alt="Running, copyright belongs to runner's world">
</a>
</article>
<article>
<header class="inno"> Innovation 2, Bowling
</header>
<p>This one could be a little bit silly, but it is a good innovation. I am talking about the Computerized Scoring Bowling.</p>
<p> A computer will focus on the score, while you can focus on the bowling aspect and don't have to count your scores. </p>
<p>These small innovations have a impact about our daily life without you aven noticing.</p>
<footer>
Fun Fact: The risk of a false score went down drasticly after this invention.
Make a reservation for bwoling here.
</footer>
<a href="https://www.etsy.com/nl/listing/1052730525/aangepaste-airbrushed-bowling-ball?gpla=1&gao=1&">
<img class="img-inno" src="https://cdn.bleacherreport.net/images_root/slides/photos/000/995/723/83452843_display_image.jpg?1307417974" alt="Bowling, Copyright belongs to bleacherreport.com">
</a>
</article>
As c.m. noted it is better to do it with CSS Flexbox.
Check out the following example to get an idea of how it works.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
article {
display: flex;
justify-content: space-between;
/*flex-wrap: wrap;
Use this if you want the images to wrap under the text for smaller screen sizes*/
}
.left {
flex-grow: 3;
flex-shrink: 1;
flex-basis: auto;
}
.right {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
}
.img-inno {
max-width: 200px;
width: 100%;
}
</style>
<title>Document</title>
</head>
<body>
<article>
<div class="left">
<header class="inno">
Innovation 1, Running
</header>
<p> One of the best sporting technoligies out is a treadmill to determine which running shoes you need. </p>
<p> You will walk a couple of 100 meters and a screen will show how you place you foot in the shoes you have tested. </p>
<p> Based on that you can choose new choes and will determine again if the shoes fit. </p>
<p>Eventually you will have some good data which shoes will fit the best. The data will be sent via email.</p>
<footer>
<p> These shops are everywhere! In the USA and The Netherlands, you name it!</p>
<p> More info? Click here</p>
</footer>
</div>
<div class="right">
<a href="https://21run.com/eu/">
<img class="img-inno" id="img1" src="https://hips.hearstapps.com/hmg-prod/images/male-athlete-running-on-tartan-track-royalty-free-image-1624297569.jpg?crop=0.670xw:1.00xh;0.245xw,0&resize=640:*" alt="Running, copyright belongs to runner's world">
</a>
</div>
</article>
<article>
<div class="left">
<header class="inno">
Innovation 2, Bowling
</header>
<p>This one could be a little bit silly, but it is a good innovation. I am talking about the Computerized Scoring Bowling.</p>
<p> A computer will focus on the score, while you can focus on the bowling aspect and don't have to count your scores. </p>
<p>These small innovations have a impact about our daily life without you aven noticing.</p>
<footer>
Fun Fact: The risk of a false score went down drasticly after this invention.
Make a reservation for bwoling here.
</footer>
</div>
<div class="right">
<a href="https://www.etsy.com/nl/listing/1052730525/aangepaste-airbrushed-bowling-ball?gpla=1&gao=1&">
<img class="img-inno" src="https://cdn.bleacherreport.net/images_root/slides/photos/000/995/723/83452843_display_image.jpg?1307417974" alt="Bowling, Copyright belongs to bleacherreport.com">
</a>
</div>
</article>
</body>
</html>
Use CSS Flexbox
That is the html code
<article>
<p>Text</p>
<img src=""/>
</article>
and that css
article {
width: 500px;
display: flex;
}
then you can put spacing with margin and padding on your p or img and you can align your content, too
don't use float anymore, that's not modern coding style
read more about flexbox, there is a nice guide at css-tricks.com
this is HTMl and css code i used to run a sample project and im unable to understand why my css styling is different from the online compiler and the IDE(virtual studio code) so please help me in this
li:first-child {
color: blue;
font-weight: bold;
font-style: italic;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="style.css" />
<title>the Basic Language of the Web: HTML</title>
</head>
<body>
<header class="main-header">
<h1>📘 The Code Magazine</h1>
<nav>
Blog
Challenges
Flexbox
CSS Grid
</nav>
<p>test text</p>
</header>
<h3>Why should you learn HTML?</h3>
<p>
There are countless reasons for learning the fundamental language of the
web. Here are 5 of them:
</p>
<ul>
<li>
<p>To be able to use the fundamental web dev language</p>
</li>
<li>
To hand-craft beautiful websites instead of relying on tools like
Worpress or Wix
</li>
<li>To build web applications</li>
<li>To impress friends To have fun 😃</li>
</ul>
<p>Hopefully you learned something new here. See you next time!</p>
</article>
<aside>
<h4>Related posts</h4>
<ul class="related">
<li>
<img
src="img/related-1.jpg"
alt="related 1 image"
width="75"
,height="75"
/> How to Learn Web Bevelopment
<p class="related-author">By Jonas Schmedtmann</p>
</li>
<li>
<img
src="img/related-2.jpg"
alt="related-2 image"
width="75"
height="75"
/>
The Unknown Powers of CSS
<p class="related-author">By Jim Dillon</p>
</li>
<li>
<img
src="img/related-3.jpg"
alt="related-3 image"
height="75"
,width="75"
/>
Why JavaScript is Awesome
<p class="related-author">By Matilda</p>
</li>
</ul>
</aside>
</li>
<li>
<img
src="img/related-3.jpg"
alt="related-3 image"
height="75"
,width="75"
/>
Why JavaScript is Awesome
<p class="related-author">By Matilda</p>
</li>
</ul>
Here I used a pseudo class to change the attribute of the first child of the li tag. In .related, the color changes in the online compiler but when I run in VSCode the color attribute is not changing but font weight and font style attributes are changing.
thanks for helping me
here is my screenshot run in VS code
The color is changing to blue without any issues. However that is a link that you're styling. Once it's clicked, its color changes to purple.
To force the purple to be blue, or any other color, you also need to style the link using another psuedo class.
li a:visited {
color: blue;
}
EDIT:
If you have given the class .related-author a color it will override your li:first-child style since it has a higher specificity level.
Look here for eg:
.related-author {
color: grey;
}
li:first-child {
color: blue;
font-weight: bold;
font-style: italic;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="style.css" />
<title>the Basic Language of the Web: HTML</title>
</head>
<body>
<header class="main-header">
<h1>📘 The Code Magazine</h1>
<nav>
Blog
Challenges
Flexbox
CSS Grid
</nav>
<p>test text</p>
</header>
<h3>Why should you learn HTML?</h3>
<p>
There are countless reasons for learning the fundamental language of the web. Here are 5 of them:
</p>
<ul>
<li>
<p>To be able to use the fundamental web dev language</p>
</li>
<li>
To hand-craft beautiful websites instead of relying on tools like Worpress or Wix
</li>
<li>To build web applications</li>
<li>To impress friends To have fun 😃</li>
</ul>
<p>Hopefully you learned something new here. See you next time!</p>
</article>
<aside>
<h4>Related posts</h4>
<ul class="related">
<li>
<img src="img/related-1.jpg" alt="related 1 image" width="75" ,height="75" /> How to Learn Web Bevelopment
<p class="related-author">By Jonas Schmedtmann</p>
</li>
<li>
<img src="img/related-2.jpg" alt="related-2 image" width="75" height="75" />
The Unknown Powers of CSS
<p class="related-author">By Jim Dillon</p>
</li>
<li>
<img src="img/related-3.jpg" alt="related-3 image" height="75" ,width="75" />
Why JavaScript is Awesome
<p class="related-author">By Matilda</p>
</li>
</ul>
</aside>
</li>
<li>
<img src="img/related-3.jpg" alt="related-3 image" height="75" ,width="75" />
Why JavaScript is Awesome
<p class="related-author">By Matilda</p>
</li>
</ul>
To solve this, use :
.related-author {
color: grey;
}
li:first-child > * {
color: blue;
font-weight: bold;
font-style: italic;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="style.css" />
<title>the Basic Language of the Web: HTML</title>
</head>
<body>
<header class="main-header">
<h1>📘 The Code Magazine</h1>
<nav>
Blog
Challenges
Flexbox
CSS Grid
</nav>
<p>test text</p>
</header>
<h3>Why should you learn HTML?</h3>
<p>
There are countless reasons for learning the fundamental language of the web. Here are 5 of them:
</p>
<ul>
<li>
<p>To be able to use the fundamental web dev language</p>
</li>
<li>
To hand-craft beautiful websites instead of relying on tools like Worpress or Wix
</li>
<li>To build web applications</li>
<li>To impress friends To have fun 😃</li>
</ul>
<p>Hopefully you learned something new here. See you next time!</p>
</article>
<aside>
<h4>Related posts</h4>
<ul class="related">
<li>
<img src="img/related-1.jpg" alt="related 1 image" width="75" ,height="75" /> How to Learn Web Bevelopment
<p class="related-author">By Jonas Schmedtmann</p>
</li>
<li>
<img src="img/related-2.jpg" alt="related-2 image" width="75" height="75" />
The Unknown Powers of CSS
<p class="related-author">By Jim Dillon</p>
</li>
<li>
<img src="img/related-3.jpg" alt="related-3 image" height="75" ,width="75" />
Why JavaScript is Awesome
<p class="related-author">By Matilda</p>
</li>
</ul>
</aside>
</li>
<li>
<img src="img/related-3.jpg" alt="related-3 image" height="75" ,width="75" />
Why JavaScript is Awesome
<p class="related-author">By Matilda</p>
</li>
</ul>
I am building a website and I came across an issue. The footer of this page doesn't stretch to the edge of the website, like it does on this page.
Here is the HTML of the first page where the footer is displaying incorrectly.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="css/main.css" type="text/css" />
<title>ItsBabylicious.com - cute soft embroidered baby blankets & other embroidery</title>
</head>
<body>
<div class="wrap">
<h1 id="logo">Itsbabylicios.com<br /></h1>
<ul id="menu">
<li>Home</li>
<li>Gallery</li>
<li>Products</li>
<li>Store</li>
<li>Contact</li>
</ul>
<div class="row">
<div id="text" class ="column" style ="width:%100">
<h2>Baby gifts and embroidery </h2>
<p>Here at Babylicous.com we sell baby blankets. The Yummy type that babys just want to rub on their face.</p>
<p>Babylicious blankets are special. Each balnket is embroidered to your custom order. in over 40 colors if you want a blanket truly special contact us as we are a fully custom embroidery shop that aims to please</p>
</div>
<div class="column" style="width:%100">
<img src="custom name on baby blanket.jpg" alt="Cutest Baby blanket pic ever!" style="max-width: 100%;border-radius: 8px">
</div>
<div id="green_bubble">
<p>check out our new etsy shop
</div>
</div>
<!-- Generated by https://smooth.ie/blogs/news/svg-wavey-transitions-between-sections -->
<div style="height: 150px; overflow: hidden;" ><svg viewBox="0 0 500 150" preserveAspectRatio="none" style="height: 100%; width: 100%;"><path d="M0.00,49.98 C149.99,150.00 349.20,-49.98 500.00,49.98 L500.00,150.00 L0.00,150.00 Z" style="stroke: none; fill: #FF99CB;"></path></svg></div>
<div id="footer">
<div class="wrap">
<div id="bubble"><p>We are located in Lakewood NJ 08701 just give us a call 732 305 0260</p></div>
<div id="copyright">
<p>Copyright © 2008 − Happy Template − Design: Luka Cvrk, <a title="Awsome Web Templates" href="http://www.solucija.com/">Solucija</a></p>
</div>
<div class="clear"></div>
</div>
</div>
</body>
</html>
In the links you provided, on the second page's source, if you check your div with id="footer" is wrapped in a div with class="wrap" while on the gallery page its not.
and since the wrap class has a fixed width of 900px, so the footer is also of the same width, just move the footer outside the wrap and it will become full width.
Hope it helps.
The top third of my page, including a graphic and headline, shows up just fine in Firefox and Explorer, but does not appear in Chrome when accessed from my server. It does appear in Chrome when viewing the page as a file.
The graphic is defined in the CSS file as:
/** adbox **/
#adbox {
background: #020a13 url(../images/bg-adbox.jpg) no-repeat center top;
font-family: Georgia, "Times New Roman", Times, serif;
min-height: 433px;
margin: -56px 0 22px;
And the HTML file is:
<!DOCTYPE html>
<!-- Website template by freewebsitetemplates.com -->
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>donfiler.net - web design </title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div id="header">
<div class="wrapper clearfix">
<div id="logo">
<img src="images/logo.png" alt="LOGO">
</div>
<ul id="navigation">
<li class="selected">
Home
</li>
<li>
About
</li>
<li>
Blog
</li>
<li>
Gallery
</li>
<li>
Contact Us
</li>
</ul>
</div>
</div>
<div id="contents">
<div id="adbox">
<div class="wrapper clearfix"><p></p><p></p>
<div class="info">
<h1>Web Design & Social Media Marketing</h1>
<p>
Proven Consultant, Author | Helping Companies Translate Their Business Goals to Reality.
</p>
</div>
</div>
<div class="highlight">
<h2>707-217-8457 if you want a mobile friendly web site.</h2>
</div>
</div>
<div class="body clearfix">
<div class="click-here">
<h1>Impact Marketing</h1>
Click Here!
</div>
<p style="font-size:12px;">
Proven Consultant, Author | Helping Companies Translate Their Business Goals to Reality. We design web sites with dynamic database interaction; deliver computer based training; create comprehensive marketing campaigns; specialize in hand coding HTML, CSS, PHP, Mysql and JavaScript to customize web design and user interface.
</p>
</div>
</div>
<div id="footer">
<ul id="featured" class="wrapper clearfix">
<li>
<img src="images/THUMBNAIL_IMAGE4.jpg" alt="Img" height="204" width="180">
<h3>Order Now</h3>
<p>
Memories of growing up in Europe during the Cold War. The first book in a series about Don's life.
</p>
</li>
<li>
<img src="images/THUMBNAIL_IMAGE3.jpg" alt="Img" height="204" width="180">
<h3>Order Now</h3>
<p>
A catchy tune by the Beach Boys in the mid-sixties, the lyrics of "Be True to Your School" hit many highlights of high school in that era.
</p>
</li>
<li>
<img src="images/THUMBNAIL_IMAGE2.jpg" alt="Img" height="204" width="180">
<h3>Order Now</h3>
<p>
College Years and Rock Band Entrepreneur. The third book in a series about Don's life.
</p>
</li>
<li>
<img src="images/THUMBNAIL_IMAGE1.jpg" alt="Img" height="204" width="180">
<h3>Order Now</h3>
<p>
Contributing to others is the highest form of success you can achieve and I wanted to impart what I have learned over the years working for a living.
</p>
</li>
</ul>
<div class="body">
<div class="wrapper clearfix">
<div id="links">
<div>
<h4>Social</h4>
<ul>
<li>
Google +
</li>
<li>
Facebook
</li>
<li>
Youtube
</li>
</ul>
</div>
<div>
<h4>Blogs</h4>
<ul>
<li>
Blogspot
</li>
<li>
Marketing Blog
</li>
<li>
Web Design Blog
</li>
</ul>
</div>
</div>
<div id="newsletter">
<h4>Newsletter</h4>
<p>
Sign up for Our Newsletter
</p>
<form action="https://donfiler.us/newsletter" method="post">
<!--<input type="text" value="">-->
<input type="submit" value="Sign Up!">
</form>
</div>
<p class="footnote">
© Copyright © 2016 Don Filer all rights reserved.
</p>
</div>
</div>
</div>
</body>
</html>
The Google Chrome extension AdBlock is blocking that element for me, because its ID is adbox. Check if you have that extension enabled, as well.
In general, try avoiding the word "ad" when naming HTML elements.
From the start, I can see a major flaw in the code- you named an element adbox. Most ad-blocking extensions work this way- they scan for ads, and that element will be perceived as an ad, simply because of it's name.
To quote CapitalQ,
In general, try avoiding the word "ad" when naming HTML elements.
Check if you have an ad-blocking extension turned on, and if so, try the site without that extension. Also, rename that element ASAP!
I'm ultimately looking to rebuild an old website that complies to web standards, and thought I would try getting my feet wet in html5 and css3. I know neither of these are fully supported across browsers yet, but I'm willing to work within whatever limits for the time-being.
However, I'm already ramming my head against an early wall, and frankly feel pretty stupid right now. I can't seem to highlight text OR open links in the pages generated by my code.
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>The Hominis Inquiry: Reconstructing Psychology, Societies, and Human Ecosystems</title>
<link rel="stylesheet" href="HIcss3.css" />
<script src="HIjs.js"></script>
</head>
<body>
<div class="title">
<div id="search">
<form id="searcher" onclick="startSearch('sbox')">
<input type="text" id="sbox" size="15" value="Search This Site">
<input type="button" id="sbutt" value="Find">
</form>
</div>
</div>
<div class="navigation">
<div id="about"> About </div>
<div id="blog"> Blog </div>
<div id="research"> Research/ Academic Papers </div>
<div id="hypercourse"> Hypercourses </div>
<div id="links"> Links </div>
<div id="contact"> Contact </div>
</div>
<div class="download">
<a href="http://www.mozilla.com/firefox/" target="_blank">
Firefox is strongly recommended for viewing this page. Download the latest version free!<img src="firefox.jpg" />
</a>
</div>
<p>
Welcome to HI Updates!
</p>
</body>
</html>
css:
body {border:0; margin:0; padding:0; vertical-align:top; text-align:center; background-color:#FFDDAA; color:#440000}
h1 {font-size:3em; font-weight:700}
h2 {font-size:1.5em; font-weight:600}
h3 {font-size:1.25em; font-weight:500}
p {}
a {color:#000066; font-weight:600; text-decoration:none}
a:hover {background-color:#FFFFDD}
a:visited {color:#440066}
div.title {position:fixed; width:100%; height:10.5em; background-image:url(hominquiry_laeroprocni.jpg); }
div.download {text-align:left}
div.download img {border:0; float:left; width:3em; height:3em}
div.navigation {}
#about {}
#blog {}
This was not a problem with my last layout in html 4, and feel I must be overlooking something REALLY obvious... even worse, it went through the validator without a hitch :P
Thanks!
Your div.title is position: fixed so it is actually floating over your links, so they don't receive the hover or click events from your mouse. Remove it to try it out.
With: http://jsfiddle.net/LFTpB/
Without: http://jsfiddle.net/THyke/