...

View Full Version : Homepage Challenge



Powered
02-05-2007, 01:22 PM
Hi,

I have had some great help from this forum covering all aspects of the my website but I am still struggling with the most difficult part of my website, the homepage. There are a number of things I am looking to do:

- add anyother suitable content
- put box around resource center
- automate size of leaf image
- anything else people might suggest.

If anyone could help me with these I would be grateful.

http://worktips.co.uk/index15.html

Karen S. Garvin
02-05-2007, 06:01 PM
When I'm looking at the site, I'm not sure if it's one site or a page of links to other websites. Your homepage needs to be clear on this. Right now it looks like advertising.

None of the links work; I keep getting the Error 404. I take it most of these are in the works?

The navigation menu at left is clean, but the color change is not highly visible. Perhaps bump up the contrast a little more. People with vision problems may not see the difference.

rmedek
02-05-2007, 08:36 PM
This sort of "one size fits all" post might be better answered if you take one question at a time, in the proper forums. Getting a review in the "site reviews" forum might not be a bad place to start. Let me know if you'd like that and I'll move it.

_Aerospace_Eng_
02-05-2007, 10:03 PM
View the page in Firefox and you'll see the things wrong with it.

Powered
02-06-2007, 10:05 AM
What are the problems in Firefox, I find it difficult to be abjective when you have the seen the same page over a hundred times! lol

The main problem I am having is the box around the resource center, if someone could resolve that would be great.

Powered
02-07-2007, 07:39 PM
rmedek could you advise on the problem with the site in Firefox as you mentioned earlier.

Any other views then please feel free to post.

Excavator
02-07-2007, 07:44 PM
No DocType

Powered
02-07-2007, 07:53 PM
Right, so what do I need to do? It appears in Firefox but what is the difference to not having a doctype?

scrupul0us
02-07-2007, 08:15 PM
the difference is being xhtml compliant and knowing how it will rendering in just about any given browser

Excavator
02-07-2007, 08:18 PM
Powered, read about DocTypes in the link in my sig below.

Powered
02-07-2007, 08:27 PM
Im confused, will this help put a border around the resource center area?

Excavator
02-07-2007, 08:47 PM
Powered,
Just to step through a few of the biggest problem areas:

Complete doctype and character encoding like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<TITLE>PowerOverWireless.com - Home</TITLE>
<STYLE type=text/css>
* {
margin: 0;
padding: 0;
}
UNKNOWN {
FLOAT: left
}

You can only use an id once. That first one could be renamed #header maybe.
The second #wrapper needs the floats cleared.

<DIV id=wrapper>
<DIV id=headercolumn1><A href="http://www.poweroverwireless.com/"><IMG height=65
alt="Power Over Wireless" src="power_files/logos7.png" width=564 border=0></A>
</DIV></DIV>
<DIV id=wrapper>
<DIV class=column1>
<DIV id=vertmenu1>

I usually use a strict doctype that requires you to close things.
I THINK that html 4.01 lets you do it this way, but I'm not sure... I'm used to adding a </li> to close each list item.

<DIV id=vertmenu1>
<UL>
<LI><A tabIndex=1 href="http://www.poweroverwireless.com/">Home</A>
<LI><A tabIndex=2 href="http://www.poweroverwireless.com/power.html">Power</A>


When you resize the site narrow enough, the content in each column breaks out the bottom. Need to figure out how you want to handle that, overflow: auto; maybe?



There is so much stuff in #resourcebox that I lost count of the divs!
I think there was one that was not closed though? Check the validator for that.

To get a box around your 3 columns at the bottom just have #resourcebox enclose #resourceheader and #resourcecolumn1 through 3.

Powered
02-07-2007, 09:14 PM
Thanks met, Ive changed the wrapper and also simplfied the resource center and posted a new example

http://worktips.co.uk/index17.html

Could you have a look at this code and advise what I need to do. Thanks for the advice so far I shall work at that concurrently.





<div class="resourcebox">
<div id="resourceheader">
<a href="http://www.poweroverwireless.com/resourcecenter.html" target="blank">Resource Center</a>
</div>
<div id="resourcecolumn1">
<a href="http://www.amazon.com/MIMO-Wireless-Communications-Ezio-Biglieri/dp/0521873282/sr=1-2/qid=1168084564/ref=sr_1_2/102-9007727-0096913?ie=UTF8&s=books" target="blank">MIMO Wireless Communications</a>
</div>
<div id="resourcecolumn2">
<a href="http://www.amazon.com/MIMO-Wireless-Communications-Ezio-Biglieri/dp/0521873282/sr=1-2/qid=1168084564/ref=sr_1_2/102-9007727-0096913?ie=UTF8&s=books" target="blank">MIMO Wireless Communications</a>
</div>
<div id="resourcecolumn3">
Associations
</div>
</div>
</div>
</div>

Excavator
02-07-2007, 09:28 PM
<head> still in the wrong place.
DocType HAS to be the first line. See my post above for the correct format.


Still at least two instances of #wrapper


Delete all those extra closing div tags. Your closing #resourcecolumn3 before it encloses the other columns.


<div id="resourcecolumn3">
Associations
</div>
</div>
</div>
</div>
<div class="basecol3">
<div id="environborder">
<div id="environtextheader">
<a href="http://www.poweroverwireless.com/environment.html" target="blank">ENVIRONMENTAL TECHNOLOGY</a>
</div>
<div id="environtext">
At PowerOverWireless.com we also promote and support the enviromental benefits of Power Over Wireless technology.
</div>
<div id="environimage">
<a href="http://www.poweroverwireless.com/environment.html"><img src="/images/windpower1.png" width="200" height="200" style="float: centre" alt="ENVIRONMENTAL TECHNOLOGY" border="0"/ ></a>
</div>
</div>
</div>
</div>

Powered
02-07-2007, 09:39 PM
Okay, so Ive moved the <head> tag and remove the divs and nows really gone scuiff

http://worktips.co.uk/index18.html

In removing the divs in the resource box the box does around the columns in IE but it stays the same in Firefox. What do you think I need to do next?

scrupul0us
02-07-2007, 09:42 PM
first off... lets try indenting your code... its one giant paragraph in my eyes

Powered
02-07-2007, 09:52 PM
Excavator, I have followed your advice and have now managed to sort the page out with the head in the right place, I had far to many closing divs which I have now deleted and the page is now back to normal.

http://worktips.co.uk/index18.html

But Im still stuck on getting the border around the 3 columns, an advice on how to solve this?

Excavator
02-07-2007, 11:33 PM
Now you have no <html> tag at all! and you close your head before the CSS, that needs closed after the CSS and before the body.
Look at my first post again and copy that bit of code with the DocType in it.
Then put a </html> at the end of your code.

The validator shows all this.


This should put your border around the basecol2 (you don't need to put div in front of that and it really should be an id instead of a class)
You will need to remove the border from some of the other divs.


div.basecol2{
float:left;
margin-top:20px;
padding-bottom: 15px;
width:65%;
border: 1px solid #5671F9;
}

Powered
02-08-2007, 02:33 PM
Hi mate its just the Resource Center I am looking to border a around, I have put to objects in basecol2, the first are just boxes but the second (resource center) has columns in which is making it very tricky to put borders around!

Excavator
02-08-2007, 03:49 PM
It's not tricky at all. Just close #resourceheader's after the 3 columns you want enclosed in a border.
You'll need to clear your floats then too.



You need to work on your basic document layout. Your head is still in the wrong place.

<head> is on line one and shouldn't be. I showed you earlier where that goes.The </head> is about line12.
Cut that and paste it here:

A:visited {text-decoration: none; color: #2C347E;}
A:active {text-decoration: none}
A:hover { color: #FF9100;}


</style>

</head> <--so your CSS is enclosed in the head section-->
<body> <--add the missing body tag too-->


<div id="headwrapper">
<div id="headercolumn1">

And you need </html> at the end.

Powered
02-08-2007, 05:34 PM
Thats great im really getting somewhere but it has knocked out the effect of the columns, do you know how I can get this back within the resource box?

http://worktips.co.uk/homepage1.html

Thanks for this, keep it coming its really getting somewhere.

Excavator
02-08-2007, 07:07 PM
Powered, it works fine on my end.
Thank you for making the attempt at correcting some errors I've been pointing out. I was starting to think you were ignoring me.
You still have a few mistakes though.
You can't expect your webpage to work if it's not laid out properly. This is very basic stuff here but it needs to be done correctly.

Here is the basic layout you need to follow:

<!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"> html starts here
<head> head starts here
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
CSS goes here
</style>
</head> close head after head stuff and before body
<body> body starts here

all your wepage code here

</body> close body
</html> close html

Once they are fixed, if your border and columns still don't work I can still help you with that.

Powered
02-08-2007, 07:26 PM
I think this should be alot more accurate...

http://worktips.co.uk/homepage3.html

Excavator
02-08-2007, 07:39 PM
Not quite.


<!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">
<html> <--delete this. You have started your html on the line above this-->
<head>
<meta http-equiv="Content-Type" content="text/css; charset=utf-8"/>
<title>PowerOverWireless.com - Home</title>



<style type="text/css">
</head> <--delete this. You close the head in the correct place further down-->
<style> <--delete this. You have the correct style tag 2lines up-->


#headercolumn1{
float:left;
}

#headwrapper{
max-width:1000em;
margin:0 auto;
}

Powered
02-12-2007, 11:07 AM
Thanks Excavator, I should have noticed those. Now I can see what opens the head and style, it seems so obvious now. But I am confused because its changed the widths of columns so now they are no longer in line.

Make these changes appears to have a strange impact which I am finding it difficult to put right, Ive tried all weekend to reallign the columns. Plus Im still confused as to how I put the 3 resource columns back in line with one another.

Powered
02-12-2007, 07:32 PM
I've now added a new version which I hope shall help.

http://worktips.co.uk/homepage5.html

Excavator
02-12-2007, 08:03 PM
Make these changes to your CSS:

#headwrapper{
width: 100%;
overflow: hidden;
}
#wrapper{
width: 100%;
overflow: hidden;
}
#basewrapper{
width: 100%;
overflow: hidden;
}
no sense centering a 100% width so I took out margin: 0 auto;
took out max-width because IE6 ignores it
cleared your float so columns 1,2 and 3 work in FF, and so your wrappers enclose their divs.

You still need to do something with the overflow in columns 2 and 3. When you size the browser width down they both break out.


---------------------------------------------
Get your resource columns back with this:

#resourcecolumn1{
float: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 65%;
color: FF9100;
padding: 1px;
font-weight: bold;
width:33%;
}
#resourcecolumn2{
float: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 65%;
color: FF9100;
padding: 1px;
font-weight: bold;
width:33%;
}
#resourcecolumn3{
float: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 65%;
color: FF9100;
font-weight: bold;
padding: 1px;
width:33%;
}



Put your box back around your resource center by clearing the floats - add overflow: hidden; to that div too.



The validator (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fworktips.co.uk%2Fhomepage5.html) still shows LOTS of errors that could easily be fixed!

Powered
02-12-2007, 08:19 PM
http://worktips.co.uk/homepage5.html

Ive made those changes, but im still confused as to what I need to do get columns withing the box.

This is making me really stressed lol

Excavator
02-12-2007, 08:32 PM
Put your box back around your resource center by clearing the floats - add overflow: hidden; to that div too.

Powered
02-12-2007, 08:43 PM
YYYYYYYYEEEEEEEESSSSSSSSSSS, what a relief. I love moments like this. Your brilliant, cheers DUDE.

Yes!!!

But it doesn't appear to work in IE!.

Excavator
02-12-2007, 09:14 PM
Hmm, looks right in IE7... I don't have the box with IE6 running right now.

Powered
02-12-2007, 09:17 PM
So what do you suggest I do next?

Excavator
02-12-2007, 09:20 PM
Fix the errors the validator is showing you.

Powered
02-12-2007, 10:49 PM
What do I do about the small leaf image, I want this to resize within the box?

Excavator
02-12-2007, 11:11 PM
I'm not sure what you mean.
You want the leaf to be the size of the box as a background image?

Powered
02-12-2007, 11:42 PM
Thats right, Ive set at 200 x 200 px, on the screen size I designed it fits extremely well along with text but on other screen sizes it swamps the box and mess up the text along with it. I want the image to be 90 % of the width and the same height.

Do you know how I can do this?

Shoot2Kill
02-12-2007, 11:50 PM
if it is in its own div

wont

width="90%" height="90%"

work... ??

sorry, not looked at code, just a possible quick fix

Powered
02-13-2007, 12:26 AM
Ive tried a few ways of adding a % to the image but each way I try just fails to make the image appear. Does anyone have any examples where they have set the size as an image to change based upon the screen size?

Shoot2Kill
02-13-2007, 01:32 AM
you could set the image to like 90% of the div

then set the div to like 5% or whatever, of the whole page
not a set size

Excavator
02-13-2007, 04:54 AM
#environimage
{
width: 80%;
overflow: hidden;
padding-top: 10px;
padding-bottom: 10px;
margin: 0 auto;
}

This kind of works but your starting to see some of the problems of using percentages for widths.

Powered
02-13-2007, 09:43 AM
What measurements should I use?

The rest of website is done Im just really struggling with this homepage.

Excavator
02-13-2007, 03:54 PM
What measurements should I use?

That's really up to you. Whatever works.

Powered
02-13-2007, 04:59 PM
But I dont know what other measurements to use lol

Excavator,

How long would it take for you to source this webpage out, make it look presentable and tidy? Including the border around the full Resource Center across IE6, IE7 and FF?

Excavator
02-13-2007, 05:31 PM
But I dont know what other measurements to use lol

Excavator,

How long would it take for you to source this webpage out, make it look presentable and tidy? Including the border around the full Resource Center across IE6, IE7 and FF?

So far?
8 days and 48 messages on 3 pages.

For sizing that leaf div just use px (pixel) sizes.

Powered
02-13-2007, 06:47 PM
Sorry what I mean is I really need to get this homepage sorted and If I can pay someone then all be it.

How long would it take you to do?

Excavator
02-13-2007, 10:03 PM
There is a "Web Projects" forum here with a subforum where you can offer to hire someone to code it for you. You could try there.

Powered
02-13-2007, 10:19 PM
Wouldn't you be interested, thats a shame.

Seriously how long would it take you to do, just to put things into context?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum