I’m new to CSS and am finding it very challenging. I am getting there. In the mean time does this CSS and HTML look correct to you? And yes, I do use Dreamweaver. Please don’t hold it against me. I will change eventually.
Please keep all client information out of quoted material.
Thanks for your help.
CSS
@charset "utf-8";
/* CSS Document */
/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,
table,tr,td,th,p,img {
margin:0;
padding:0;
}
img,fieldset {
border:none;
}
hr {
display:none; /* I use HR for CSS off users */
}
body {
text-align:center; /* center #pageWrapper IE 5.x */
font:normal 85%/140% arial,helvetica,sans-serif;
background:#0E5EBE;
}
#pageWrapper {
width:900px;
margin:0 auto;
background:#FFF;
}
#bannerHolder{
width:900px;
}
h1 {
position:relative;
overflow:hidden;
width:100%;
padding:211px 0 2px;
background:#DCB000 url(images/h1Banner.jpg) top center no-repeat;
}
h1 span,
h1 small {
width:230px;
float:left;
display:inline;
margin-left:145px;
font:bold 14px/16px arial,helvetica,sans-serif;
text-align:center;
}
h1 b {
position:absolute;
top:209px;
left:-3px;
width:900px;
height:36px;
background:url(images/h1Text.png) 0 0 no-repeat;
}
#schoolName{
background:#FFFF00;
}
#mainMenu {
list-style:none;
padding:8px 0 68px;
}
#contactusInfo{
width:500px;
position:absolute;
left:441px;
top: 349px;
}
#mainMenu li {
display:inline;
padding:0 4px;
}
#mainMenu a {
display:-moz-inline-block;
display:-moz-inline-box;
display:inline-block;
padding:2px 6px;
text-decoration:none;
font-weight:bold;
color:#444;
border:solid #000;
border-width:0 1px;
}
#mainMenu a:active,
#mainMenu a:focus,
#mainMenu a:hover {
color:#000;
background:#ccc;
/* background:#BCD;
*/}
.column {
float:right;
/* display:inline; prevent IE margin doubling */
width:360px;
padding-top:1em;
margin-right:60px;
text-align:left;
top:440px;
}
.column p {
padding-bottom:1em;
}
.quoteBox {
width:214px;
margin:0.5em auto 0;
padding-bottom:20px;
font:normal 14px/16px arial,helvetica,sans-serif;
color:#FFF;
background:#0E5EBE url(images/quoteBox.png) bottom right no-repeat;
}
.logoHolder{
width:72px;
height: 90px;
position:absolute;
top:286px;
left:325px;
margin-left:0px;
visibility: visible;
}
.quoteBox span {
display:block;
padding:6px 8px 0;
text-align:center;
background:#0E5EBE url(images/quoteBox.png) top left no-repeat;
}
h2 {
margin-bottom:0.4em;
font:bold 120%/120% arial,helvetica,sans-serif;
}
h2.standout {
padding:4px 8px;
color:#FFF;
background:#0E5EBE;
}
.schoolName span {
padding-bottom:1em;
top:205px;
}
#events {
list-style:none;
text-align:center;
padding-bottom:1em;
}
#footer {
clear:both;
padding:0.5em;
background:#FFFF00;
/* background:#DCB000;
*/
}
.plate {
display:block;
margin:0 auto 0.5em;
}
HTML
<!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"
lang="en"
xml:lang="en"
><head>
<meta
http-equiv="Content-Type"
content="text/html; charset=utf-8"
/>
<meta
http-equiv="Content-Language"
content="en"
/>
<title>
St. xxxxxxxx of the xxxxxxxxx Elementary School
</title>
<link href="sample1.css" rel="stylesheet" type="text/css" />
</head><body>
<div id="pageWrapper">
<div id="bannerHolder"><img src="images/stxxxxxxxxbanner.jpg" alt="" width="900" height="174" /></div>
<div class="schoolName" id="schoolName"><img src="images/schoolnameandslogan.jpg" alt="St.xxxxxxxx Elementary School" width="900" height="46"/></div>
<div>
<ul id="mainMenu">
<li><a href="http://xxxxxxxxxxxxx/trialcss">About St. xxxxxxxx</a></li>
<li><a href="http://xxxxxxxxxxxxx/trialcss/curriculum.html">Admissions</a></li>
<li><a href="http://xxxxxxxxxxxxx/trialcss/contactus.html">Curriculum</a></li>
<li><a href="http://xxxxxxxxxxxxx/trialcss/aboutus.html">Faculty & Staff</a></li>
<li><a href="#">News & Events</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
<hr />
</div>
<div class="column">
<img
src="images/frontofschool.jpg"
alt="Front of School"
class="plate"
/>
<h2 class="quoteBox"><span>Upcoming Events</span></h2>
<ul id="events">
<li>Events get posted here 09/27/2010</li>
<li>Events get posted here 12/14/2010</li>
</ul><hr />
<h2>Discover excellence at Saint xxxxxxxx of the Palisade Elementary School.</h2>
<p>
The school offers a challenging academic curriculum that is rich in religious education and faith formation as well as the moral values your child will need to succeed in life. With low teacher-student ratios and plenty of personal attention, our school creates a safe and encouraging environment that interests and discover the best in themselves, their classmates and the world.
</p><p>
At the very foundation of the education we offer in a dedication to excellence - an emphasis on rigor and relationship in each classroom that allows each student to achieve. That's why our students consistently score higher on nationally standardized testing than public or charter school counterparts. They have gone on to succeed at academic competitions and at least 97% of our graduates eventually go on to attend college after studying at some of the area's finest xxxxxxxxxxxx and specialized high schools.
</p><hr />
<!-- .column --></div>
<div class="column">
<h2 class="standout">We Look Forward to Hearing From You</h2>
<div class="address">
Saint xxxxxxxx of the xxxxxxxxx Elementary School<br />
xxxx xxxxxxxxx Avenue, West <br />
New York, NJ 07093<br />
Phone:xxxxxxxxxxxxxx<br />
Fax: xxxxxxxxxxxx<br />
Email: <a href="mailto:Principal@StxxxxxxxxxxxxxxxxxElem.com">Principal@StxxxxxxxxxxxxxxxxxElem.com</a>
<!-- .address --></div><hr />
<h2>Preparing leaders of competence, compassion and character.</h2>
<img
src="images/childrendownslide.jpg"
alt="Children on slide"
class="plate"/>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p><hr />
<!-- .column --></div>
<div id="footer">
Saint xxxxxxxx of the xxxxxxxxx Elementary School<br />
xxxx xxxxxxxxx Avenue, West New York, NJ 07093 Phone:xxxxxxxxxxxxxx<br />
<!-- #footer --></div>
<!-- #pageWrapper --></div>
</body></html>