...

View Full Version : My portfolio



gilgalbiblewhee
08-20-2008, 09:50 PM
I would like to hear all the worst criticism (along with tips to make it better of course!) on my portfolio:
http://205.205.200.231/~h806209/

Many thanks!

ps. I use Firefox for it so anyone who has IE 5, 6 or 7, I would like to hear you out as well.

Fou-Lu
08-20-2008, 10:05 PM
There is no data, which is my major criticism >.<. Lol, I'm guessing you're just showing the layout and scheme right now though.
It also doesn't pass markup validation: http://validator.w3.org/check?uri=http%3A%2F%2F205.205.200.231%2F~h806209%2F&charset=(detect+automatically)&doctype=Inline&group=0

I'm red/green colour blind (which is why I don't generally do design work). The layout is nice, its simplistic and elegant, but the colours look terrible to me. I'd lighten it up a bit even if you stick with the scheme you have, it has a 'stuffy' sort of feel to it. I think you may want to shrink down the size of the main content block and increase the width of the side bars.


On further inspection of the source, I found out why you have no data. You'll need to choose a newer xml framework to work with, it fails to produce any data in FF3. Works on IE 6 though. The split in the content block is odd, the left aligned data is alright, but you have an odd orange block sitting in the corner. I'm guessing its an overflow control thats breaking that one, I'll advanced edit this and add a screeny. Maybe add some images as well, its a little on the plain side. Something simple, gradients or rounded border edges to give some more depth to the screen.

Millenia
08-20-2008, 10:13 PM
In my browser (Firefox 3 on Linux) there is what I must say almost 100px gap between the left side of the screen and where the content starts. Causing a horizontal scrollbar.

ThirdDash
08-20-2008, 10:19 PM
Ok...since you've asked for the brutal truth, here it is.

1) Your page has horizontal and vertical scrolling. That's a BIG Turnoff. Pick one (usually vertical) and stick to it. Your page seems optimized for 1200+ width which is not what most people use. Personally, if I have to scroll across a page and also down it to see content, I'm just going to close that site and move to something more accessible.

2) You have an embedded scroll bar inside your window. Not sure why because it only compounds the problem stated in 1). Too many scroll bars is the best way to lose potential viewers and in your case it does absolutely nothing to enhance the browsing experience.

3) The colors you have used are (in my opinion) atrocious. Yellow in small doses adds impact, but when you use it as the background and then use black text over it the overall effect reads something like DANGER DANGER DO NOT READ FURTHER. It hurts the eye and isn't soothing at all. Added to that you have a very odd pairing of dirty green / yellow which makes the page look very unappealing. I'm not sure why you chose those two colors but I'd reevaluate those choices. From a readability point you page does not fare well, from an aesthetic point it's down right ugly. There are many sites and web resources you can look to to gain an understanding of how people interpret colors and what kind of emotions they conjure up. Arbitrarily using two colors because they are different is a good way to lose users before they even have a chance to look at your site.

4) Your layout of 3 columns doesn't suit the content. Your work is what you want to display...so why is it a small 150x150 box in the first column ? Presentation of your content in a portfolio site is what's going to get you work, you want it to be front and centre. Look around the web and you'll find some great examples of portfolio sites that have dramatic impact and make you want to know more about the designer. Your site at the moment conjures up some very negative feelings about your skills.

5) You've got 14 Validation errors and I would use a STRICT doctype instead of a transitional one. Also, stick your CSS into a separate file instead of having it inline. Seperation of content and presentation is a good professional habit to get into.

Overall, the way i see it your site needs a good re-think. I personally don't like the basic design, the colors you've used or the method in which you've coded. Harsh...perhaps. But if you take heed of some of my points I'm confident your next revision will fair a lot better.

Good luck, and keep your chin up. :)

Regards,

Sid

Apostropartheid
08-20-2008, 10:50 PM
*cough* ThirdDash's review was very thorough. There's not much to add, but why on gods earth is your content added by JavaScript? That's really not a good idea--what if I had it disabled? How would a search engine index it?

gilgalbiblewhee
08-20-2008, 11:14 PM
There is no data, which is my major criticism >.<. Lol, I'm guessing you're just showing the layout and scheme right now though.
It also doesn't pass markup validation: http://validator.w3.org/check?uri=http%3A%2F%2F205.205.200.231%2F~h806209%2F&charset=(detect+automatically)&doctype=Inline&group=0


Does the validation consider JavaScript? I will have to look into that. Thanks.

gilgalbiblewhee
08-20-2008, 11:18 PM
On further inspection of the source, I found out why you have no data. You'll need to choose a newer xml framework to work with, it fails to produce any data in FF3. Works on IE 6 though. The split in the content block is odd, the left aligned data is alright, but you have an odd orange block sitting in the corner. I'm guessing its an overflow control thats breaking that one, I'll advanced edit this and add a screeny. Maybe add some images as well, its a little on the plain side. Something simple, gradients or rounded border edges to give some more depth to the screen.


There's a swf file which has to appear there. There's a div tag and by AJAX I made it load into that. So I guess besides Firefox 2.0 it's giving problems. Hmmm...

gilgalbiblewhee
08-20-2008, 11:19 PM
In my browser (Firefox 3 on Linux) there is what I must say almost 100px gap between the left side of the screen and where the content starts. Causing a horizontal scrollbar.

Can you post a screen cap? Thanks.

gilgalbiblewhee
08-20-2008, 11:21 PM
*cough* ThirdDash's review was very thorough. There's not much to add, but why on gods earth is your content added by JavaScript? That's really not a good idea--what if I had it disabled? How would a search engine index it?

Would you consider most of the surfers have JavaScript turned off?

Fou-Lu
08-21-2008, 01:47 AM
This really depends on you're target audience. I find that developer based sites have a lower probability of JS enabled versus non-developer audience. I personally only enable my JS if I suspect its actually required to view particular data, I otherwise have it off. I did enable it for you're site, and it still wouldn't load. I find that too often JS is abused, visual animations, those bloody popup windows for Ads, and form validation (especially if its poor validation, I ran across an email what wouldn't validate first.last@domain.com -_-).
I would NOT use JS to import data. If you are storing XML data you would be better off processing it on the server side and returning it as html to the client. This will ensure that the data is correctly populated (but not necessarily formated!), regardless of the browser. The only exception to this is AJAX, which handles the intermediate requests between the server process and the client. Its still generally server handled though.

oesxyl
08-21-2008, 04:25 AM
I would like to hear all the worst criticism (along with tips to make it better of course!) on my portfolio:
http://205.205.200.231/~h806209/

Many thanks!

ps. I use Firefox for it so anyone who has IE 5, 6 or 7, I would like to hear you out as well.
remove position: absolute; left: 150px; and top: 0; from body style. After you validate the page will be simple to center content without using position absolute.
hmm, I lied when I said simple, :)
About 5&#37; or less of the user have javascript disabled/blocked and some of them, I don't know how many, disable/block flash. I'm one of them, :)
Last time when I look to your site flash was working but now ask me to install adobe flash.
In this situation I think is better to notify the user that he/she need javascript and/or flash enabled to see the content.
I don't know who make this to change, you or me? It's probably me.
color problems:

http://colorfilter.wickline.org/

http://colorvisiontesting.com/

this can help you to see how it looks in other browsers.

http://browsershots.org/

flash, js, .... :

http://blog.deconcept.com/swfobject/
http://onlinetools.org/articles/unobtrusivejavascript/index.html
http://en.wikipedia.org/wiki/Progressive_Enhancement

best regards

gilgalbiblewhee
08-21-2008, 05:09 AM
remove position: absolute; left: 150px; and top: 0; from body style. After you validate the page will be simple to center content without using position absolute.



<body style="background-color: #808000; display: block; text-align: center;"

But Firefox doesn't center it for some reason. I don't remember how but in one case when I put display: block and then Text-align: center it worked but not when it's applied to the body.

gilgalbiblewhee
08-21-2008, 05:23 AM
There is no data, which is my major criticism >.<. Lol, I'm guessing you're just showing the layout and scheme right now though.
It also doesn't pass markup validation: http://validator.w3.org/check?uri=http%3A%2F%2F205.205.200.231%2F~h806209%2F&charset=(detect+automatically)&doctype=Inline&group=0


It shows 14 errors beginning with the JavaScript. I don't know why it's picking on the for loop. Maybe it shouldn't be "transitional" but something else.

_Aerospace_Eng_
08-21-2008, 05:23 AM
Get rid of ALL your absolute positioning. You are abusing it. Float your side bar to the left as well as the content area. Set the width of #master to 900px and add margin:auto;

Again don't use absolute positioning if you don't need to. If this is a portfolio for web development then you have a lot to learn.

gilgalbiblewhee
08-21-2008, 05:30 AM
Get rid of ALL your absolute positioning. You are abusing it. Float your side bar to the left as well as the content area. Set the width of #master to 900px and add margin:auto;

Again don't use absolute positioning if you don't need to. If this is a portfolio for web development then you have a lot to learn.

Speaking of width, what is the best width? 955px? 900px?...or 100%?

oesxyl
08-21-2008, 05:53 AM
It shows 14 errors beginning with the JavaScript. I don't know why it's picking on the for loop. Maybe it shouldn't be "transitional" but something else.
the porpouse of transitional is to use a new html version with old code not for new page.
Some people use transitional because they consider that is more easy to work with it but I'm not agree. Since you already have some page with strict I think you may use strict.
To avoid validator to parse javascript you can use comments:


<script type="text/javascript">//<![CDATA[
...
//]]></script>

as Aero said, remove ALL absolute positioning, left and top declaration including inner span and div's elements.

best regards

_Aerospace_Eng_
08-21-2008, 05:58 AM
If you can make your site fluid then great. Good example layout here: http://bonrouge.com/2c-hf-fluid.php

gilgalbiblewhee
08-21-2008, 06:24 AM
the porpouse of transitional is to use a new html version with old code not for new page.
Some people use transitional because they consider that is more easy to work with it but I'm not agree. Since you already have some page with strict I think you may use strict.
To avoid validator to parse javascript you can use comments:


<script type="text/javascript">//<![CDATA[
...
//]]></script>

as Aero said, remove ALL absolute positioning, left and top declaration including inner span and div's elements.

best regards
I use Dreamweaver 8 for building web pages. But I'm not sure what to call it if I include AJAX, PHP, DHTML. I use iFrames but no other frames.

gilgalbiblewhee
08-21-2008, 07:38 PM
remove position: absolute; left: 150px; and top: 0; from body style. After you validate the page will be simple to center content without using position absolute.

Here's the page woth no positioning besides the body and 1st div:
http://205.205.200.231/~h806209/indexnopositioning.php

oesxyl
08-21-2008, 08:14 PM
Here's the page woth no positioning besides the body and 1st div:
http://205.205.200.231/~h806209/indexnopositioning.php
is overlap because you still have position absolute in first div of div #maindiv and inner span.
same thing in div #greg.

add a new div and put inside divs #navbar and #picbar like that:


<div style="float: left;">
<div id="navbar" ......
<div id="picbar" ....
</div>
<div id="maindiv"....

after that we must make another changes but do that first.

PS: install firebug extension for firefox, will help you a lot.

best regards

gilgalbiblewhee
08-23-2008, 05:37 AM
Get rid of ALL your absolute positioning. You are abusing it. Float your side bar to the left as well as the content area. Set the width of #master to 900px and add margin:auto;

Again don't use absolute positioning if you don't need to. If this is a portfolio for web development then you have a lot to learn.
Is there a tutorial on how to position?

I know w3schools has much to say about CSS. But putting a page together...

Ok let's say you have:

<html>
<head>
</head>
<body style="position: absolute; left: 0px; top: 0px; width: 955px;">
<div id="master" style="float: left;">
<div style="float: left;">
<div id="navbar" ......
<div id="picbar" ....
</div>
<div id="maindiv"....
</div>
</body>
</html>

I learned some things in class. But wasn't the master div supposed to wrap all the body content? and what about the individual div tag styles' positioning?

oesxyl
08-23-2008, 09:11 AM
I don't touch the #master div, but is my fault that I don't explain better.

<html>
<head>
</head>
<body style="width: 100&#37;;">
<div id="master" style="float: left;">
<div style="float: left;">
<div id="navbar" ...... </div>
<div id="picbar" .... </div>
</div>
<div id="maindiv"....</div>
...rest of content from div #master...
</div>
</body>
</html>
the idea is to put the left navigation in a container and #maindiv to the right of it.
as you said, you need #master div to center content in the page.

PS: get rid of position absolute, left and top and use width 100%.
best regards

gilgalbiblewhee
08-23-2008, 10:09 PM
I don't touch the #master div, but is my fault that I don't explain better.

<html>
<head>
</head>
<body style="width: 100%;">
<div id="master" style="float: left;">
<div style="float: left;">
<div id="navbar" ...... </div>
<div id="picbar" .... </div>
</div>
<div id="maindiv"....</div>
...rest of content from div #master...
</div>
</body>
</html>
the idea is to put the left navigation in a container and #maindiv to the right of it.
as you said, you need #master div to center content in the page.

PS: get rid of position absolute, left and top and use width 100%.
best regards

So is it true that the master div should wrap around the body content (only inside the body)?

oesxyl
08-23-2008, 10:32 PM
So is it true that the master div should wrap around the body content (only inside the body)?
yes. You can't center the body element, so the only way to center the content without dealing with each part of it is to put into a container and center the container. :)
The master div must be splited verticaly in two parts so you must have two divs one for
each part and then the div from the left, the first div must contain the divs for navigation.
That is what I said in my previous posts.
Then you can add a float: left to the div and the divs will be side by side.

best regards

gilgalbiblewhee
08-24-2008, 04:14 AM
I don't touch the #master div, but is my fault that I don't explain better.

<html>
<head>
</head>
<body style="width: 100%;">
<div id="master" style="float: left;">
<div style="float: left;">
<div id="navbar" ...... </div>
<div id="picbar" .... </div>
</div>
<div id="maindiv"....</div>
...rest of content from div #master...
</div>
</body>
</html>
the idea is to put the left navigation in a container and #maindiv to the right of it.
as you said, you need #master div to center content in the page.

PS: get rid of position absolute, left and top and use width 100%.
best regards
What about the following. Is it important in the body? I haven't understood the significance of the display attribute.
display: block;

<body style="width: 100%;background-color: #808000; display: block; text-align: center;" onLoad="parseXML(); bodyOnload(); ">

gilgalbiblewhee
08-24-2008, 04:27 AM
I have a few more questions on css positioning.
How to center the content;
What about the positioning of the inside tags? If you want to position at a specific place.

<body style="width: 100&#37;; background-color: #808000;" onLoad="parseXML(); bodyOnload();">
<div id="master" style="float: left; display: block; text-align: left; width: 955px;">
<div id="navbar" style="position: absolute; left: 10px; top: 10px; margin: 0 0 10px 0; border: none; background-color: #FFCC00; width: 200px; height: 180px;"></div>
<div id="picbar" style="position: absolute; left: 10px; top: 200px; margin: 0 0 10px 0; border: none; background-color: #FFCC00; width: 200px; height: 390px; overflow-y: scroll;"></div>
<div id="maindiv" style="position: absolute; left: 230px; top: 10px; border: none; background-color: #FFFFAE; width: 700px; height: 580px;">
<div id="galbar" style="position: absolute; left: 150px; top: 0px; z-index: 3;"></div>
</div>
</div>
</body>

oesxyl
08-24-2008, 01:23 PM
I have a few more questions on css positioning.
How to center the content;
What about the positioning of the inside tags? If you want to position at a specific place.

<body style="width: 100%; background-color: #808000;" onLoad="parseXML(); bodyOnload();">
<div id="master" style="float: left; display: block; text-align: left; width: 955px;">
<div id="navbar" style="position: absolute; left: 10px; top: 10px; margin: 0 0 10px 0; border: none; background-color: #FFCC00; width: 200px; height: 180px;"></div>
<div id="picbar" style="position: absolute; left: 10px; top: 200px; margin: 0 0 10px 0; border: none; background-color: #FFCC00; width: 200px; height: 390px; overflow-y: scroll;"></div>
<div id="maindiv" style="position: absolute; left: 230px; top: 10px; border: none; background-color: #FFFFAE; width: 700px; height: 580px;">
<div id="galbar" style="position: absolute; left: 150px; top: 0px; z-index: 3;"></div>
</div>
</div>
</body>
this is what we try to avoid. Why did you come back again here? Try to don't think visualy because this is not a picture. If you put #navbar and #picbar into a container( a div), youl will have two elements to positioning, navigation in left and #maindiv on the left side of navigation.

best regards

gilgalbiblewhee
08-24-2008, 10:38 PM
this is what we try to avoid. Why did you come back again here? Try to don't think visualy because this is not a picture. If you put #navbar and #picbar into a container( a div), youl will have two elements to positioning, navigation in left and #maindiv on the left side of navigation.

best regards

I don't understand what you're saying.

gilgalbiblewhee
08-24-2008, 10:55 PM
It's not centering on Firefox:

<body style="width: 100%; background-color: #808000;" onLoad="parseXML(); bodyOnload(); ">
<div id="master" style="float: left; margin:0px auto; text-align: center; width: 955px;">
<div id="navbar" style="text-align: left; margin: 0 0 10px 0; border: none; background-color: #FFCC00; width: 200px; height: 180px;"></div>
<div id="picbar" style="text-align: left; margin: 0 0 10px 0; border: none; background-color: #FFCC00; width: 200px; height: 390px; overflow-y: scroll;"></div>
<div id="maindiv" style="text-align: left; border: none; background-color: #FFFFAE; width: 700px; height: 580px;">
<div id="galbar" style="text-align: left; z-index: 3;"></div>
</div>
</div>
</body>

oesxyl
08-25-2008, 01:26 AM
It's not centering on Firefox:

<body style="width: 100&#37;; background-color: #808000;" onLoad="parseXML(); bodyOnload(); ">
<div id="master" style="float: left; margin:0px auto; text-align: center; width: 955px;">
<div id="navbar" style="text-align: left; margin: 0 0 10px 0; border: none; background-color: #FFCC00; width: 200px; height: 180px;"></div>
<div id="picbar" style="text-align: left; margin: 0 0 10px 0; border: none; background-color: #FFCC00; width: 200px; height: 390px; overflow-y: scroll;"></div>
<div id="maindiv" style="text-align: left; border: none; background-color: #FFFFAE; width: 700px; height: 580px;">
<div id="galbar" style="text-align: left; z-index: 3;"></div>
</div>
</div>
</body>


<body style="width: 100%; background-color: #808000;" onLoad="parseXML(); bodyOnload(); ">
<div id="master" style="float: left; margin:0px auto; overflow: auto; text-align: center; width: 955px;">
<div style="float: left;">
<div id="navbar" style="text-align: left; margin: 0 0 10px 0; border: none; background-color: #FFCC00; width: 200px; height: 180px;"></div>
<div id="picbar" style="text-align: left; margin: 0 0 10px 0; border: none; background-color: #FFCC00; width: 200px; height: 390px; overflow-y: scroll;"></div>
</div>
<div id="maindiv" style="text-align: left; border: none; background-color: #FFFFAE; width: 700px; height: 580px;">
<div id="galbar" style="text-align: left; z-index: 3;"></div>
</div>
</div>
</body>
- remove float: left from #master
- include only #navbar and #picbar into a div and add a float: left to it
- add a overflow: auto to #master to clear inner float

and explain what I said and you don't understand.

best regards

gilgalbiblewhee
08-25-2008, 05:32 AM
<body style="width: 100%; background-color: #808000;" onLoad="parseXML(); bodyOnload(); ">
<div id="master" style="float: left; margin:0px auto; overflow: auto; text-align: center; width: 955px;">
<div style="float: left;">
<div id="navbar" style="text-align: left; margin: 0 0 10px 0; border: none; background-color: #FFCC00; width: 200px; height: 180px;"></div>
<div id="picbar" style="text-align: left; margin: 0 0 10px 0; border: none; background-color: #FFCC00; width: 200px; height: 390px; overflow-y: scroll;"></div>
</div>
<div id="maindiv" style="text-align: left; border: none; background-color: #FFFFAE; width: 700px; height: 580px;">
<div id="galbar" style="text-align: left; z-index: 3;"></div>
</div>
</div>
</body>
- remove float: left from #master
- include only #navbar and #picbar into a div and add a float: left to it
- add a overflow: auto to #master to clear inner float

and explain what I said and you don't understand.

best regards

Ok but when I remove all positioning, everything is messed up:

<div id="master" style="margin:0px auto; text-align: center; width: 955px; overflow: auto;">
<div style="float: left;">
<div id="navbar" style="text-align: left; margin: 0 0 10px 0; border: none; background-color: #FFCC00; width: 200px; height: 180px;"></div>
<div id="picbar" style="text-align: left; margin: 0 0 10px 0; border: none; background-color: #FFCC00; width: 200px; height: 390px; overflow-y: scroll;"></div>
</div>
<div id="maindiv" style="text-align: left; border: none; background-color: #FFFFAE; width: 700px; height: 580px;">
<div id="galbar" style="text-align: left; z-index: 3;"></div>
</div>
</div>

oesxyl
08-25-2008, 11:33 PM
Ok but when I remove all positioning, everything is messed up:

<div id="master" style="margin:0px auto; text-align: center; width: 955px; overflow: auto;">
<div style="float: left;">
<div id="navbar" style="text-align: left; margin: 0 0 10px 0; border: none; background-color: #FFCC00; width: 200px; height: 180px;"></div>
<div id="picbar" style="text-align: left; margin: 0 0 10px 0; border: none; background-color: #FFCC00; width: 200px; height: 390px; overflow-y: scroll;"></div>
</div>
<div id="maindiv" style="text-align: left; border: none; background-color: #FFFFAE; width: 700px; height: 580px;">
<div id="galbar" style="text-align: left; z-index: 3;"></div>
</div>
</div>
can you post a link to see how is messed up?

best regards

gilgalbiblewhee
08-26-2008, 12:43 AM
can you post a link to see how is messed up?

best regards

I was thinking today that it might also be the AJAX files in the tags.

I still have to check.


<body style="margin: 0px; padding: 0px; width: 100%; background-color: #808000;" onLoad="parseXML(); bodyOnload(); <?php //fillSidebar();?>">
<div id="master" style="padding: 10px; width: 955px; <?php //overflow: hidden;?> margin: 0px auto; width: 955px; overflow: auto;">
<div style="float: left;">
<div id="navbar" style="float: right; margin: 0px 0px 10px 0px; border: none; background-color: #FFCC00; width: 200px; height: 180px;"></div>
<div id="picbar" style="float: right; margin: 0px 0px 10px 0px; border: none; background-color: #FFCC00; width: 200px; min-height: 390px; overflow-y: scroll;"></div>
</div>
<div id="maindiv" style="float: right; margin-left: 10px; border: none; background-color: #FFFFAE; width: 700px; min-height: 580px;">
<div id="galbar" style="float: left; margin-left: 150px;"></div>
</div>
</div>
</body>

oesxyl
08-26-2008, 12:59 AM
<body style="margin: 0px; padding: 0px; width: 100&#37;; background-color: #808000;" onLoad="parseXML(); bodyOnload(); <?php //fillSidebar();?>">
<div id="master" style="padding: 10px; width: 955px; <?php //overflow: hidden;?> margin: 0px auto; width: 955px; overflow: auto;">
<div style="float: left;">
<div id="navbar" style="float: right; margin: 0px 0px 10px 0px; border: none; background-color: #FFCC00; width: 200px; height: 180px;"></div>
<div id="picbar" style="float: right; margin: 0px 0px 10px 0px; border: none; background-color: #FFCC00; width: 200px; min-height: 390px; overflow-y: scroll;"></div>
</div>
<div id="maindiv" style="float: right; margin-left: 10px; border: none; background-color: #FFFFAE; width: 700px; min-height: 580px;">
<div id="galbar" style="float: left; margin-left: 150px;"></div>
</div>
</div>
</body>
picture don't help to much, I need a link.
I guess is messed because you use wrong float.
Another problem is that this:

<?php // something ?>
don't output anything. You must use echo/print to display/output 'something' but have no sense to use php to output 'overflow: auto' for example.

best regards

gilgalbiblewhee
08-26-2008, 05:12 AM
<body style="margin: 0px; padding: 0px; width: 100%; background-color: #808000;" onLoad="parseXML(); bodyOnload(); <?php //fillSidebar();?>">
<div id="master" style="padding: 10px; width: 955px; <?php //overflow: hidden;?> margin: 0px auto; width: 955px; overflow: auto;">
<div style="float: left;">
<div id="navbar" style="float: right; margin: 0px 0px 10px 0px; border: none; background-color: #FFCC00; width: 200px; height: 180px;"></div>
<div id="picbar" style="float: right; margin: 0px 0px 10px 0px; border: none; background-color: #FFCC00; width: 200px; min-height: 390px; overflow-y: scroll;"></div>
</div>
<div id="maindiv" style="float: right; margin-left: 10px; border: none; background-color: #FFFFAE; width: 700px; min-height: 580px;">
<div id="galbar" style="float: left; margin-left: 150px;"></div>
</div>
</div>
</body>
picture don't help to much, I need a link.
I guess is messed because you use wrong float.
Another problem is that this:

<?php // something ?>
don't output anything. You must use echo/print to display/output 'something' but have no sense to use php to output 'overflow: auto' for example.

best regards

Here's the link of the messy page:
http://205.205.200.231/~h806209/indexmess.php

jerry62704
08-26-2008, 08:33 PM
Would you consider most of the surfers have JavaScript turned off?

Most have it turned on. But do you want to lose the others?

gilgalbiblewhee
08-27-2008, 05:00 AM
Here's the link of the messy page:
http://205.205.200.231/~h806209/indexmess.php

I need someone to tell me why the float left/right isn't aligning properly. I posted the link above.
Here's an example that works:
http://205.205.200.231/~h806209/positioning.php
and
http://205.205.200.231/~h806209/positioning1.php

One's in a style tags the other's inline.

But when I insert my codes it shows things messed up.

jerry62704
08-27-2008, 04:44 PM
Moderator - can you move the above to the HTML/CSS section?

oesxyl
08-27-2008, 11:15 PM
Moderator - can you move the above to the HTML/CSS section?
yes, agree, is not anymore a review.


Here's the link of the messy page:
http://205.205.200.231/~h806209/indexmess.php
you have a lot of position absolute, use in a wrong way float, both left and right. You put what you want to be in the left side of the page in the right.


I need someone to tell me why the float left/right isn't aligning properly. I posted the link above.
to understand how it work build a page, simple only head, body and one div. Inside the div put a img and some text. Then play with it, make the img float left, then after you how it look replace right with left. Doing your own experiments help a lot.
Two links, read before makeing the experiments:

http://www.complexspiral.com/publications/containing-floats/
http://www.barelyfitz.com/screencast/html-training/css/positioning/


Here's an example that works:
http://205.205.200.231/~h806209/positioning.php
and
http://205.205.200.231/~h806209/positioning1.php

One's in a style tags the other's inline.

But when I insert my codes it shows things messed up.
because both are wrong. Read previous posts to see why.

best regards

gilgalbiblewhee
08-29-2008, 01:58 AM
Ok. I'm still working on it but here's what I came up with so far:
http://205.205.200.231/~h806209/index1.php

oesxyl
08-29-2008, 02:16 AM
Ok. I'm still working on it but here's what I came up with so far:
http://205.205.200.231/~h806209/index1.php
it look better, :)
in #navbar div, you can remove width from li elements. And is a typo, "Ilusrator 10", missing 't'.

best regards



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum