Two +1 problems this time around and once again thanks for helping this non-professional. I really have studied all this before hand. It makes such sense in the videos but it just seems to not work for me. I’m cursed?
[URL=“http://www.garygreen.me/norway/Template.htm”]I’ve put the site up on the net: See it here.
First: In the upper right corner in the div topright nested inside the div top, I have a 3 line address and an anchor / link to email me.
In FireFox it is all well and good. In Safari the line breaks are not recognized. Should this be done as an unordered list?
Second: I put in a nav bar what shows a bottom border when in the Hover state. This causes everything below it to move down. Looks like an earthquake to me. How to prevent this?
Third (pushing my luck): Under the #navcontainer div is the #label div that I’ve given a puke green background so that I can see where it is. I’ve stuck some text into it.
In Firefox the text has strange breaks in it I can’t explain. In Safari strange break and aligns to the right. I should have some kind of header or paragraph property connected to the text? Tried that but didn’t seem to help.
All help and criticisms are welcome. I really did study texts and videos before embarking on this. Sorry if I seem just the dumb nuub.
<!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>New Norway Template</title>
<style type="text/css">
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
color: #000;
background: #c56065;
background-image:url(images/backgroundbase.png);
background-repeat:repeat-x;
}
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0; /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
/*padding-right: 15px;
padding-left: 15px;*/ /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
}
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
border: none;
}
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
color: #42413C;
text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
}
a:visited {
color: #6E6C64;
text-decoration: underline;
}
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
text-decoration: none;
}
/* ~~ this fixed width container surrounds all other elements ~~ */
.container {
width: 960px;
margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
padding: 0;
background-image: url("http://www.sitepoint.com/forums/images/people.png");
background-repeat: no-repeat;
background-attachment:fixed;
background-position: 50% 0px;
}
#topleft {
font-family: georgia, times, serif;
font-size:36px;
font-style:oblique;
color:#c56065;
Float: left;
width: 450px;
text-shadow: 2px -2px 1px #666;
text-transform: uppercase;
}
#topmiddle {
font-family: georgia, times, serif;
font-size:20px;
font-style:normal;
width: 225px;
float: left;
margin-top: 15px;
text-shadow: 2px -2px 1px #c56065;
}
#topright {
font-family: georgia, times, serif;
font-size:12px;
font-style:normal;
margin-top: 5px;
float:right;
}
#navcontainer {
position:relative;
top:10px;
}
#navcontainer ul
{
padding-left: 0;
margin-left: 0;
color: White;
float: left;
width: 100%;
font-family: arial, helvetica, sans-serif;
}
#navcontainer ul li { display: inline; }
#navcontainer ul li a
{
padding: 0.2em 1em;
color: White;
text-decoration: none;
float: left;
border-right: 1px solid #fff;
}
#navcontainer ul li a:hover
{
color: #fff;
border-bottom: 5px solid #c56065;
padding-bottom:2px;
}
#label {
position:relative;
top:200px;
background-color:#CCFF99;
text-align:left;
}
.content {
padding: 10px 0;
position:relative;
top:200px;
}
</style>
</head>
<body>
<div class="container">
<div id="top">
<div id="topleft">
Kiropraktikk First
</div>
<div id="topmiddle">
Helse For Hele Familien
</div>
<div id="topright">
Radmann Halmrasts vei 18</br>
1337 Sandvika, NORWAY</br>
Tel: xxx-xxxx-xxxx <a href="mailto:drgarylgreen@gmail.com">EmailUs. Click Here</a>
</div>
</div>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>
<div id="label">
<h3>Let's see how this looks once it is on the page.</h3>
</div>
<div class="content">
<h1>Instructions</h1>
<p>Be aware that the CSS for these layouts is heavily commented. If you do most of your work in Design view, have a peek at the code to get tips on working with the CSS for the fixed layouts. You can remove these comments before you launch your site. To learn more about the techniques used in these CSS Layouts, read this article at Adobe's Developer Center - <a href="http://www.adobe.com/go/adc_css_layouts">http://www.adobe.com/go/adc_css_layouts</a>.</p>
<h2>Layout</h2>
<p>Since this is a one-column layout, the .content is not floated. If you add a .footer within the .container, it will simply follow the .content div. </p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
</div>
<div class="footer">
</div>
</div>
</body>
</html>
(while IE has “supported” many CSS3 “features” since IE5)