...

View Full Version : paulaosborne.com



l3vi
06-11-2004, 07:52 AM
Hello,
I am the webmaster of paulaosborne.com, and I am doing a total facelift of the site. Here is the URL of the site... its very long, temporarily: Paula Osborne (http://l3vi.no-ip.com/Paula%20Osborne/RECONSTRUCTION/)

Please tell me what you dont like about the site, if it is concerning the code, how can I fix it? Constructive Critisism is welcome!

ronaldb66
06-11-2004, 08:28 AM
Three points:

The swirling chains animation started getting on my nerves in about, oh, four seconds (about two full rotations). Lose it; it looks very old-school and unprofessional. The graphic itself is very nicely done though, so a static version of it might very well come to use.
the page is some 20 miles wide!!! My horizontal scroller shrinks to a stripe, and after scrolling through endless amounts of nothing, on the far right there appears some content. I really don't know what's causing this, but it's obviously unacceptable (oh, I use IE5.5/win; yeah, I know, company box).
Something, I don't know what, took forever to load, and I didn't manage to interrupt loading. After clicking "stop" a number of times with no result, the "back" button is just a button away...

I suggest fixing these first; after that we can go to the good stuff! :D

mindlessLemming
06-11-2004, 04:24 PM
The unstoppable rotating chain gave me a twitch in my left eye, so I escaped to the source....


<div class="menu">
&nbsp;&nbsp;&nbsp;&nbsp;
HOME
&nbsp;&nbsp;&nbsp;&nbsp;

||
&nbsp;&nbsp;&nbsp;&nbsp;
Listings
&nbsp;&nbsp;&nbsp;&nbsp;
||
&nbsp;&nbsp;&nbsp;&nbsp;
Tools &amp; Services
&nbsp;&nbsp;&nbsp;&nbsp;
||
&nbsp;&nbsp;&nbsp;&nbsp;

Community Information
&nbsp;&nbsp;&nbsp;&nbsp;
||
&nbsp;&nbsp;&nbsp;&nbsp;
Request a Home!
</div>

L3vi: I think you've been an active member here long enough to know what I'm about to say about that...:rolleyes: Perhaps it's merely there for design purposes, but even so, that will behave nothing like the unordered list with "||" symbols outside the link text which I recommend you use ;)


<ul class="menu">
<li>
<a href="" title="Paula Osbourne Home Page">HOME</a>
<span>||</span>
</li>
<li>
<a href="" title="Current Properties Available">Listings</a>
<span>||</span>
</li>
<li>
<a href="" title="You make up this one">Tools &amp; Services</a>
<span>||</span>
</li>
<li>
<a href="" title="You make up this one">Community Information</a>
<span>||</span>
</li>
<li>
<a href="" title="You make up this one">Request a Home!</a>
<span>||</span>
</li>
</ul>

You can start beating it into shape with this:


ul#menu {
list-style:none;
padding:0;
margin:0;
}
#menu li {
display:inline;
margin:0;
}
#menu a span {
margin:10px;
}

**/totally untested
When I increased the font size the left column grows, reducing the room available for the main content and causing it to literaly 'spill it's guts' all over the place. Seeing as you're using a fixed width for the primary conainer, perhaps you should also designate the left column's width in pixels.

You haven't checked your code against the validator yet....what's <embed>? :p
You've used < in your link text when you need to use "& lt;" [space added]
You also have a missing </td> on line 117.
[validation results] (http://validator.w3.org/check?uri=http%3A//l3vi.no-ip.com/Paula%2520Osborne/RECONSTRUCTION/)

Things like this:


background-color:#FFFFFF;
border-top:1px solid black;
border-left:1px solid black;
border-right:1px solid black;
position:absolute;
left:50%;
margin-left:-376px;
margin-top:0px;
width:768px;
padding:0px 0px 0px 0px;

Can be shortened down...


background-color:#FFF;
border:1px solid black;
border-bottom:none;
position:absolute;
left:50%;
margin:0 0 0 -376px;
width:768px;
padding:0;

Sometimes every byte counts, and when you do it all the time you start to notice the savings on sites with 3+ stylesheets with over 200 lines each..

Oh Dear!
..Unnecessarry....nested....presentational...tables!
Why l3vi? You're capable of so much more? :)

I like the new layout, though the text in the Contact Form is totally illegible. It's so small that it's just a blurred mess at 100% on the browser.

I really was trying to be purely constructive, but if I've come across a bit harsh, don't take it to heart :D

l3vi
06-11-2004, 06:14 PM
nahh.. you werent harsh :D Thanks a bunch for the help. I will fix those things. I have a question though... I tried using div's instead of tables, because I hate tables more than anything...
But for some reason, I cannot get two divs to come on the same line and give me the same look that I want...???
When I used div's, it made the next div, that was supposed to be right next to it, go to the next line, even though they didnt take up that much space... I will fix that menu thing two :D and the &lt;

Thank you a bunch for the help!

BTW, I did run it through the XHTML validator, and its somewhat confusing me... Ill insert the </td> where it should be, I dont know where that goes... but, I guess that since im new to using flash... I dont yet fully understand how to put one in the page, without causing errors... any help?

EDIT:
Okay, I changed the << and >> to &lt; and &gt;, I added in the missing td :D, I did the menu thing like mindlessLemming said :D I made the contact me font larger as well. I am also working on cleaning up the CSS right now... anything else?

l3vi
06-11-2004, 06:22 PM
the page is some 20 miles wide!!! My horizontal scroller shrinks to a stripe, and after scrolling through endless amounts of nothing, on the far right there appears some content. I really don't know what's causing this, but it's obviously unacceptable (oh, I use IE5.5/win; yeah, I know, company box).

Hmm.. I dont know whats causing that. Do you mind taking a screenshot for me?
Your using IE5.5 WIN? Or WINXP? What resolution are you using?

Still not sure why that happens... Guess I gotta downgrade to IE5.5 now :D

mindlessLemming
06-11-2004, 06:59 PM
Lining Up Divs:
You need to assign float:left; to the first one so that it will allow room for the second one next to it. Div's are block level elements, meaning they will take up as much horizontal space as is available.

Flash:


<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"
width="300" height="120">
<param name="movie" value="http://www.macromedia.com/shockwave/download/triggerpages_mmcom/flash.swf">
<param name="quality" value="high">

<param name="bgcolor" value="#FFFFFF">
<!--[if !IE]> <-->
<object data="http://www.macromedia.com/shockwave/download/triggerpages_mmcom/flash.swf"
width="300" height="120" type="application/x-shockwave-flash">
<param name="quality" value="high">
<param name="bgcolor" value="#FFFFFF">
<param name="pluginurl" value="http://www.macromedia.com/go/getflashplayer">
FAIL (the browser should render some flash content, not this).
</object>
<!--> <![endif]-->

</object>

-- via Hixie (http://ln.hixie.ch/?start=1081798064&order=-1&count=1).

IE 5.0 and 5.5, standalone versions via Skyzyx (http://skyzyx.com/resources/#testing)

l3vi
06-11-2004, 07:49 PM
Im almost done with the non-table version... bTW, the non-table version appears perfect in IE 5.5... (you can add notables.html at the end of the current adress to view it)

l3vi
06-11-2004, 08:22 PM
Okay, I think I fixed everything you guys said to fix. I got the page done without any tables, and I think it looks better without using them :p
It appears correctly in IE 5.5, IE 5.0 Safari, and I think anything else! YAY :p
Like I said,
Thanks a bunch for all of your help! ITS GREATLY APPRECIATED :)

gsnedders
06-11-2004, 09:49 PM
paula.osborne@coldwellbanker.com goes over the border in Safari...

l3vi
06-11-2004, 10:12 PM
Argh... another thing to fix :D
Okay, its good now. I hope... stupid iCapture :p

JAVAEOC
06-11-2004, 11:59 PM
the only thing i do not like is the flash unit at the left, why are u using flash for that, the text looks all blury and small...

l3vi
06-12-2004, 12:30 AM
Okay, no more flash for that! I have now clue why I did that :rolleyes:

mindlessLemming
06-12-2004, 02:17 AM
Good stuff :thumbsup:
But I get a 404 Error for notables.html :confused:

l3vi
06-12-2004, 02:35 AM
Oh, I got rid of notables.html :D I put the original with tables into a BAK folder, and renamed notables to index. Shoulda put it in here I guess :D

mindlessLemming
06-12-2004, 02:43 AM
Cool, now the next step is to get it working without set heights on the boxes...That way it can reflow with more content/larger fonts. Plus that will allow you to use the template for anything the client throws at you :D

Nightfire
06-12-2004, 03:07 AM
<div class="header">Testimonials</div>

Wouldn't it make more sense to use the header tags? <h1></h1> etc

l3vi
06-12-2004, 04:41 AM
I will change them to <hn></hn> in a few minutes :D
BTW, the site is now up at www.paulaosborne.com, replacing the old,ugly,invalid site :D

mindlessLemming
06-12-2004, 05:12 AM
Now that we're getting to the knitty-gritty, how about a couple of pixels worth of padding on your content boxes? Just to get the words away from the borders :)
All your header background img's in the main column are two pixels off in Mozilla.
Personally, I'd make the main content font at least .1em larger, but if not perhaps you could introduce some letter-spacing:; to it?

When you convert the <div id="header"> to <hn>'s, put the remaining text in individual <p>'s and add something like


h2#header p { margin:0; padding:2px; }


Im trying to avoid the massiv amount of work I have to do, so I've tweaked your stylesheet :D


/* Type CSS rules here and they will be applied
to pages from 'www.paulaosborne.com'
immediately as long as you keep this window open. */

/**** LINK-tag style sheet style.css ****/

body
{
font-family:Geneva, Georgia, serif;
padding:0;
background-color:#E8E8E8;
font-size:80%;
}


a:hover {
color:#193768;
text-decoration:none;
font-weight:bold;
}
a:link {
color:#193768;
text-decoration:none;
font-weight:bold;
}
a:visited {
color:#193768;
text-decoration:none;
font-weight:bold;
}
a:active {
color:#193768;
text-decoration:none;
font-weight:bold;
}

div.opc
{
margin-left:5px;
}
div.content
{
background-color:#FFF;
border:1px solid black;
position:absolute;
left:50%;
margin:0 0 0 -376px;
width:768px;
padding:0;
}
div.banner
{
background-image:url(./Images/bbg.jpg);
border-bottom:1px solid black;
width:768px;
height:125px;
}
div.menu
{
background-image:url(./Images/mbg.jpg);
width:758px;
height:20px;
padding:0px 5px 0px 5px;
font-size:1em;
font-weight:bold;
}
div.qcontact
{
border-bottom:1px solid black;
width:100%;
height:230px;
font-size:1em;
text-align:center;
}
div.info
{
border-bottom:1px solid black;
width:100%;
height:230px;
font-size:.8em;
text-align:center;
padding:
}
div.links
{
border-bottom:1px solid black;
width:100%;
height:135px;
font-size:.8em;
text-align:center;
}
div.events
{
width:100%;
height:125px;
font-size:.9em;
text-align:left;
}

div.pcontent
{
border-bottom:1px solid black;
width:100%;
height:475px;
font-size:.9em;
text-align:left;
letter-spacing:.1em; /*-remove after adding <p> -*/
}
/* --- turn this one on when you put each paragraph of content in its own <p>!
.pcontent p {
letter-spacing:.1em;
padding:2px;

} --*/

div.tmls
{
border-right:1px solid black;
width:100%;
height:247px;
font-size:12px;
}
div.lst
{
width:100%;
height:247px;
font-size:1em;
text-align:center;
}
div.copyright
{
font-size:10px;
padding-left:5px;
}
div.lside
{
border-right:1px solid black;
border-bottom:1px solid black;
float:left;
padding:0;
width:199px;

}
div.rside
{
border-bottom:1px solid black;
float:right;
padding-left:2px;
width:566px;
}
div.rlside
{
float:left;
padding:0;
width:348px;
}
div.rrside
{
float:right;
padding:0;
width:215px;
}

.header {
background-image:url(./Images/hbg.jpg);
height:15px;
width:100%px;
text-align:center;
}

.info{
font-size:.8em;
}
.lprev
{
margin-right:20%;
}
.lnext
{
margin-left:20%;
}
.contact
{
width:170px;
border:1px solid #193768;
background-color:#FFFFFF;
}
input
{
border:1px solid #193768;
background-color:#FFFFFF;
}

div.e1
{
background-color:#E3E7ED;
width:100%;
font-size:.9em;
}
div.e2
{
background-color:#FFFFFF;
width:100%;
font-size:.9em;
}

img{
border:none;
}

ul.menu
{
list-style:none;
padding:0;
margin:0;
text-align:center;
}
ul.menu li
{
display:inline;
margin:0;
}
ul.menu li span
{
margin:10px;
}





I got rid of the default Times New Roman (windows) and replaced all your pixel sized fonts with a percentage on the body tag and em units for everything else.
The content overflows the height of its div now, but that's just more reason for you to make it flow :p

I've also finished off the menu. Looks good now, and it's semantically friendly :thumbsup:
Feel free to use or ignore any of the changes I've made - but at least take a good look at it first :)

l3vi
06-12-2004, 11:22 PM
Okay, thank you very much for the help! I changed the font for a few, but Paula said she liked the original font better... guess the customer knows best ;)
But I have another question about advertising... stuff. Mainly what Paula really wants is to be listed fairly high on Google, Yahoo, and all the other major search engines. I know that you need to get other high ranked websites that are similar to yours to link to your site, so that you can get higher... The only thing is that she's a real estate agent, and realtor's compete against each other and from what I know would not want to help each other. So that basically blows any chances of me convincing any of her competitors (other real estate websites) to link to her. Any suggestions on how I can get her listed high on SE without having to get links to her site?

mindlessLemming
06-13-2004, 03:25 AM
<meta name="Revisit-After" content="7 Days" />
<meta name="Robots" content="index,follow" />
Then submit to all of these (http://htmlforums.com/showthread.php?s=&threadid=14710)
It's a start ;)
I'm not positive, but personally I'd make sure that the content had changed slightly every 7 days so that search bots have something to index, otherwise they may not come back too soon..but that's a guess :D

--edit: if the customer wants 'Times New Roman', then it's up to you to declare that font in the css. Don't just expect it because it's the windows default ;)

l3vi
06-13-2004, 03:39 AM
Oh, okay. I will specify it and make those changes tomorow ASAP... She should have at least one part (Most likely the current events section) of the page change every 7 days. Thanks for the help mindless, I owe u one :D

mindlessLemming
06-13-2004, 03:57 AM
No probs man :)
I'm always keen to help members who are willing to put in the hard yards and take peoples suggestion on board :thumbsup:

JAVAEOC
06-14-2004, 08:14 PM
Personally I think that the font size is to small, but if your customer wants such a small font, i guess its ok, however I also would increase the padding on all boxes, and take a look at the picture to see what happens when I increase the fotnsize. Yes I increased it insanly. However for an old man (age 90), who has bad eyes, also needs to increasy a insanly small font insanly much...

hope I made any sense

have fun coding

ronaldb66
06-15-2004, 09:36 AM
Wow, l3vi; I haven't checked the forum over the weekend and all of a sudden the site's totally changed! Looking great now!

Let's see if I can nitpick on a couple of details... :D

First of all, the string of nbsps is not very elegant (in "Current events"): either date or title could be floated, using text-align to align the other.
If the rest of the text is encased in a p or something, you could use text-indent to set indention for the first line instead of, again, using nbsps.

I'm not too wild about the serif font for body text, but you've heard that one already, I guess. That the text size isn't scalable is a major accessibility drawback, especially since the serif font isn't very legible.

On IE5.5/win, not all the dividers and headings line up correctly; minor flaws really, see if you want to invest a minute or two to it. I would suggest setting the border over the footer to the footer itself; right now, it's broken in between the left and main column. Also, I'd like to see some separation between the bottom of the footer and the bottom of the page (similar to what the header looks like).

l3vi
06-15-2004, 10:27 AM
Thank you ronaldb66 :)
Okay, what I have changed so far is I have removed the nbsp's in the current events section with two divs and the style stuff needed...
I have also added a div to create a bit of a space between the top of the page and the content (in Mozilla), so that it doesnt press against the top in mozilla yet not IE. I am still trying to get some space between the bottom and the content right now.
Thanks a bunch for everyones help...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum