What I would like is to pretty much keep the same look that I have at Properties With Stlye Home Page. (index.html) is my only page for now.
I understand I need to have a menu. I plan to have a vertical menu on the left side of the viewport.
I do have a menu suggestion from within the CSS forum that I’m going to try. By the way, which menu design is favored by end users, horizontal or vertical?
NOW - my reason for writing.
If you look at my html I’m sure you will agree that it’s quite ugly!
I need to know how to clean this up while keeping the same look and get rid of all of the <br> etc. and junk before I go any further.
Here is my html.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Properties With Stlye Home Page</title>
<link rel="stylesheet" href="css/homepage.css" type="text/css" media="all">
</head>
<body>
<div id=outer>
<div class="flair" align="right">Properties With Style</div>
<div class="flair" align="right" style="font-size:160%">A California Real Estate Corporation</div>
<p class="image"><img src="http://www.sitepoint.com/forums/images/ricksfadedpicture.jpg" width="120" height="180"><br><br><br><br><br><br><br><br><br>
<p> Welcome to Properties With Stlye. We specialize in South Orange County residential real estate. We say that our Clients <em>Are Propeties With Style</em>. Our Internet Site is currently under development. We are upgrading our site with new and exciting real-time local information. Detailed macro and micro data and charts that seriously enhance the understanding of local markets, very local. Currently we are working with investor buyers who are taking advantage of low pricing and stunning rates of return. Many buyers are snapping up properties via all cash offers.</p>
<p class="content"> Please contact us directly at <a href="mailto:xxxxxx">Properties With Style</a>.</p>
<br>
<p>We will be adding content as soon as possible.</p>
<p style="font-size:80%">Rick Schreiber is President of<em> Properties With Style </em>and has served the real estate industry for over 30 years.</p>
<p style="font-size:80%">This site is optomized for Microsoft Internt Explorer.<p>
<div id=footer>Copyright, Properties With Style Inc., a Real Estate Corporation©. The information being provided by SoCalMLS, CRISNet Regional MLS and/or CARETS is for the consumer's personal, non-commercial use and may not be used for any purpose other than to identify prospective properties consumer may be interested in purchasing. Any information relating to real estate for sale referenced on this web site comes from the Internet Data Exchange (IDX) program of the SoCalMLS, CRISNet Regional MLS and/or CARETS. This web site may reference real estate listing(s) held by a brokerage firm other than the broker and/or agent who owns this web site. The accuracy of all information, regardless of source, including but not limited to square footages and lot sizes, is deemed reliable but not guaranteed and should be personally verified through personal inspection by and/or with the appropriate professionals." The data contained herein is copyrighted by SoCalMLS, CRISNet Regional MLS and/or CARETS and is protected by all applicable copyright laws. Any unauthorized dissemination of this information is in violation of copyright laws and is strictly prohibited. Copyright © 2011 SoCalMLS®, CRISNet Regional MLS®, CARETS®" All Displays of Licensed Content shall include: "Property Information © 2011" SoCalMLS Inc. All rights reserved. Certain information contained herein is derived from information which is the licensed property of, and copyrighted by, SoCalMLS Inc.</div>
</div outer>
</body>
</html>
Maybe I better insert my css page also.
@charset "utf-8";
/* CSS Document */
/*http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/*/
.flair {font-family: 'FlairRoman';
font-size:300%;
color: #6CF;
src: url(/fonts/'FlairRoman.eot');
src: local('☺'),
url("FlairRoman.woff") format("woff"),
url("FlairRoman.otf") format("opentype"),
url("FlairRoman.svg#grablau") format("svg");
text-align: right;
}
.night {font-family: "NiteClub";
font-size:400%;
color:#6CF;
src: url(/fonts/"NiteClub.eot");
src: local('☺'),
url("NiteClub.woff") format("woff"),
url("NiteClub.otf") format("opentype"),
url("NiteClub.svg#grablau") format("svg");
text-align: right;
}
.tang {font-family: "tangerine";
font-size:400%;
color:#6CF;
src: url(/fonts/"tangerine.eot");
src: local('☺'),
url("tangerine.woff") format("woff"),
url("tangerine.otf") format("opentype"),
url("tangerine.svg#grablau") format("svg");
text-align: right;
}
html, body {color:#000;
background-image: url(../images/blinds1.png);
background-attachment:fixed;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
margin-top:1%;
margin-right:1%;
margin-bottom:1%;
margin-left:1%;
margin: 0;
}
#outer {width: 94%;
margin:auto;
max-width:1200;
min-width:600;
}
p {font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size:100%;
line-height: 120%;
color:#6CF;
text-align: right;
/*margin-right:160px;*/
}
.content p {font-size:80%;
text-align:right;
line-height:100%;
color: #6CF;
}
.titleb {font-family: "FlairRoman", sans serif; font-size:200%; color: #6CF; text-shadow:#999;
}
.titlem {font-family: "FlairRoman" ; font-size:160%; color:#6CF; text-shadow:#999;
}
.titles {font-family: "FlairRoman";
font-size:120%;
color:#6CF;
text-shadow:#999;
text-align: right;
}
p.image img{float:right;
}
p.image span {
overflow:hidden;
font-size:70%;
float:right;
text-align:justify;
width:100px;
}
#footer {font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size:64%;
line-height: 100%;
color:#6CF;
text-align: justify;
/*margin-right:160px;*/
}
footer p {margin:0;
}
/* eND css*/
I’d really appreciate some help.
Thanks.
Rick