SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Wizard Another Designer's Avatar
    Join Date
    May 2005
    Posts
    1,370
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Does this CSS look correct?

    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
    Code 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
    Code HTML4Strict:
    <!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>

  2. #2
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,902
    Mentioned
    74 Post(s)
    Tagged
    6 Thread(s)
    Check your scripts with these online tools:

    http://jigsaw.w3.org/css-validator/

    http://validator.w3.org/


    .
    Learn how to be ready for The New Move to Discourse

    How to make Make Money Now with a *NEW* look

    Be sure to congratulate Wolfshade on earning Member of the Month for August 2014


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •