10 replies [Last post]
jsabarese
jsabarese's picture
Offline
Enthusiast
Positively 4th Street
Last seen: 8 years 27 weeks ago
Positively 4th Street
Timezone: GMT-4
Joined: 2005-02-05
Posts: 404
Points: 7

okay, guys-- this is a project that i worked on all weekend, and finished last night. i made a completely new design out of the textual content and images which were already there.

here's the URL with Flash intro, and without. I checked it at the w3 validator. the stylesheet passed after some modification-- mostly color name issues, which Hugo warned me are not the best choices, so i went back to the w3 schools site where i got them, and changed them to the matching code values. i also had my body {} style messed up-- had font-family: sans-serif; and below in the same tag, font: verdana, ...., and then a third font declaraion of font-size: small;. the w3 validator said "verdana is not a valid font size", so i guess it was a short-hand problem-- fixed it.

if you care to make a comparison to what used to be there, take a look here.
**EDIT**: here is the best example of it's original state. the first URL in this paragraph reflects some early ideas i was trying before the big-hit.**end edit**
that's actually an intermediate revision-- you have to go to the gallery and pick one of the galleries to actually see what the site originally looked like (if you see red text color, you're there).

i am aware of a few problems-- mostly float issues when the site is viewed in IE. on the "corporate party" page, my right <ul> doesn't look right in IE. and it suffers similarly in IE where i used CSS positioning on other pages as well, in particular, the "hush lounge" page-- thumbs at the bottom. the biggest problem i have is the right column in IE-- it doesn't rest under the header, but under the last bit of the main column. i tried several things, but could not get it to work right. if you view in Firefox, it should look exactly as i wanted it (at least on my 1280 x 960 screen).

oh, one last thing. the gallery pages-- where the albums are... i made that w/ a really nice little free program called "JAlbum", a Java program. best little album creator i've ever tried. then, i'm using javascript to open those albums from the thumbnails on the gallery pages themselves. i just learned how to do that yesterday, so i wanted to try it. i think it looks better than simply using <a href.... target="_blank"..>. i realize i should probably hand-code the gallery albums, but i am fond of this particular JAlbum template, so i'll really have to practice to come up w/ something that i'll like better. i didn't check those pages for validation, as i didn't really code them.

there you have it. it's got a lot of content. i wouldn't expect you to look at everything. can't wait to read some feedback on it! thanks!

HellsBells
HellsBells's picture
Offline
Leader
Bedford, UK
Last seen: 12 years 25 weeks ago
Bedford, UK
Joined: 2004-04-07
Posts: 851
Points: 0

Site Overhaul: ready out w/ the old, in w/ the new?

Hi

There's a couple of things that I noticed:

I find the red on grey writing of the navigation quite hard to read - you might want to go for a greater contrast. Come to think of it I can't think of any time I've seen red text (actual text, not images) that's been easy to read.

I don't think the Bubble room logo is up to the standard of the other pages (just my opinion there so feel free to ignore me!).

I think there should be more padding between the central text area and the right hand column - it's actually touching in places.

You should really warn people that the Calendar page opens up in another window - maybe with the <title> tag?

When I increase the text-size twice in FF the main text content goes underneath the left-hand column.

Pretty good going for a couple of days work though!

My strategy is so simple an idiot could have devised it!

"Also, your CSS (no offence) makes me want to gouge my eyes out with a rusty spoon" - TPH

illtron
Offline
Regular
Last seen: 16 years 25 weeks ago
Joined: 2004-05-07
Posts: 40
Points: 0

Site Overhaul: ready out w/ the old, in w/ the new?

Some padding on that menu on the left would make it look a heckofalot nicer. Also you might want to look into not having the text be centered there either.

Also also, the "best viewed with firefox" thing.... I've never been crazy about that practice. You really need to fix it so that it works in explorer. You could do the simplified box model hack to get it working or just adjust the size and padding on that center area.

jsabarese
jsabarese's picture
Offline
Enthusiast
Positively 4th Street
Last seen: 8 years 27 weeks ago
Positively 4th Street
Timezone: GMT-4
Joined: 2005-02-05
Posts: 404
Points: 7

Site Overhaul: ready out w/ the old, in w/ the new?

HellsBells wrote:

I find the red on grey writing of the navigation quite hard to read

i agree 100%-- especially after i looked at it today here on my work computer. big difference. that was ... for lack of a better phrase... poor planning. (a bad idea, etc)

Quote:
I don't think the Bubble room logo is up to the standard of the other pages

i also agree w/ you there. if you can, try to dig it up from the root directory (should be the same page w/out the /Rive2/ in between). you'll see what i was trying to do w/ it. i didn't want to take the liberty of making an entirely new logo, but the existing logo is pretty bad.

Quote:
You should really warn people that the Calendar page opens up in another window - maybe with the <title> tag?

yeah, i didn't know what to do w/ that. the GM coincidentally contacted me about this today. he wants to know whether to renew the contract! can you believe he pays for that horrid thing? i'm going to try to convince him to let me buy a php script. wish i could write one myself, but i'm just not that advanced yet, and i'd hate to be responsible for a serious event calendar crash. actually, someone here referred me to a nice little php calendar script for around $40 i think. it's not really the style i was looking for-- i want more like what you see at the the exisitng off-site calendar, but i want to keep it w/in the style of what i've made, so it's not going off site, and it looks nice w/ the rest of the presentation.

thanks the feedback. i really appreciate it.

did you notice the right column problem in iE? in my IE, the column is down below the main area. i'm looking for advice on how to fix it. also, the other float problems that i'm having. any ideas there? (i realize the stylesheet is messy-- i need to clean it up! but i wanted to get it up there for this guy to see)

oh, and the "best viewed thing", i agree. it sounds like a cop-out, doesn't it. it's my way of promoting FF and at the same time admitting that i couldn't fix it for IE... hehe... no, you're right. i thought it looked cheezy after i came back to it. still lots of tweaking to be done, and lots of things that i keep finding.

oh, did i mention that the Nav needs to be re-done? going from advice of someone who commented about a "really simple" layout i submitted for review mid-last week, i decided to try some of the lists at "listomatic" i think it's called? you can find the link if you look for my other submission here titled "beginner written all over it?"

thanks again for the help! i'm eager to get home and fix all this ! Wink

jsabarese
jsabarese's picture
Offline
Enthusiast
Positively 4th Street
Last seen: 8 years 27 weeks ago
Positively 4th Street
Timezone: GMT-4
Joined: 2005-02-05
Posts: 404
Points: 7

Site Overhaul: ready out w/ the old, in w/ the new?

illtron wrote:
You could do the simplified box model hack to get it working

hey, i missed this first time around. i'm not aware of the "simplified box model hack". could someone please steer me in the right direction?

or, by referencing as you did, illtron, are you trying to tell me that this box model hack is not a preferred solution?

know what? it just occurred to me how much i have learned from this forum. no, i'm not trying to brown-nose! i'm kindof amazed at what i was able to do w/ that site (the one in this thread). i would never have gotten that far if it wasn't for investigating suggestions, and heeding advice from the friendly users here. everything from Firefox plugins and validation, to how to logically analyise and debug my code for problems. i wish the PHP forum i visit were as useful. again, not trying to suck-up-- considering how i feel about this accomplishment (this site overhaul), i just felt it was an appropriate time to say thanks. it's a priviledge to be here, to converse amongst you all, and to have received as much help as i feel that i have.

okay, now somebody cut the cake!

illtron
Offline
Regular
Last seen: 16 years 25 weeks ago
Joined: 2004-05-07
Posts: 40
Points: 0

Site Overhaul: ready out w/ the old, in w/ the new?

here ya go... http://css-discuss.incutio.com/?page=BoxModelHack

These guys here are great. I'm no master myself, but a lot of the posters here are. I'm like somebody who can read a language but barely speak it. This place is seriously great.

jsabarese
jsabarese's picture
Offline
Enthusiast
Positively 4th Street
Last seen: 8 years 27 weeks ago
Positively 4th Street
Timezone: GMT-4
Joined: 2005-02-05
Posts: 404
Points: 7

Site Overhaul: ready out w/ the old, in w/ the new?

illtron wrote:
This place is seriously great.

indeed. i once commented that the learning which takes place here is much better than what you will find a paid-for online training courses (like vtc.com, for example). although i've learned from training courses, the one-on-one communication w/ real-world issues, for myself at least, is so much more valuable in terms of education.

not to mention the sense of camaraderie quickly established by those who moderate, and otherwise lead this forum...

jsabarese
jsabarese's picture
Offline
Enthusiast
Positively 4th Street
Last seen: 8 years 27 weeks ago
Positively 4th Street
Timezone: GMT-4
Joined: 2005-02-05
Posts: 404
Points: 7

BUMP - STILL LOOKING FOR ADVICE

i'm still hoping for an assessment of my maincol div vs my rightcol div.

How might I fix it in IE so the right column rests up against the bottom of the header, instead of "floating" w/ its top at the bottom of the maincol, as if there's not enough room for it to fit where it belongs-- beside, not under the main column. please?

HellsBells, you mention about it being close-- and touching in some places, do you have a suggested fix?

i guess there's nothing to be afraid of, but i admit i am a bit anxious about getting in there and guessing at what i should tweak. i suppose as long as i make a backup of my stylesheet, and html, i should be okay.

i'd still like to engage in more discussion about it.

what about my <ul>'s here? it looks precisely as i want it in Firefox, but not in IE. suggestions?

HellsBells
HellsBells's picture
Offline
Leader
Bedford, UK
Last seen: 12 years 25 weeks ago
Bedford, UK
Joined: 2004-04-07
Posts: 851
Points: 0

Site Overhaul: ready out w/ the old, in w/ the new?

Hi

I'd reduce the width of the Maincol to 65% - that seems to work in FF but I've not checked it in IE.

Haven't got time to play with the <ul>s but my suggestion would be to give the floated div a width - all floats should have widths unless they're already implicit - e.g. an image.

My strategy is so simple an idiot could have devised it!

"Also, your CSS (no offence) makes me want to gouge my eyes out with a rusty spoon" - TPH

jsabarese
jsabarese's picture
Offline
Enthusiast
Positively 4th Street
Last seen: 8 years 27 weeks ago
Positively 4th Street
Timezone: GMT-4
Joined: 2005-02-05
Posts: 404
Points: 7

Site Overhaul: ready out w/ the old, in w/ the new?

HellsBells wrote:
give the floated div a width - all floats should have widths unless they're already implicit - e.g. an image.

ah! thank you. i have learned something! i'll take a look at what i can do. i know it probably seems like i've been begging for someone to fix it for me, but that's really not the case. i've been working on other projects in the meantime out of necessity, so i figured i'd gather what resources i could before getting back to it... which i plan to do this weekend.

i really appreciate all of the help. thanks.

jsabarese
jsabarese's picture
Offline
Enthusiast
Positively 4th Street
Last seen: 8 years 27 weeks ago
Positively 4th Street
Timezone: GMT-4
Joined: 2005-02-05
Posts: 404
Points: 7

BUMP- VERSION 2- FLOAT &amp; COLUMN PROBLEMS SOLVED

Okay, as far as i can tell, everything is now working the way I wanted it. I wasn't sure if i was going to be able to say this, but I am pleased with the overall outcome of this redesign.

Since the debut of the overhaul, until now, I have made the following changes:

  • re-styled the Navigation menu
  • removed the gratuitous "Best Viewed with Firefox" "tag" from the footer
  • Resized the MainCol <div> from 69% to 65% to fix the RightCol so it displays properly in IE6 (it looked right here at 69% in FireFox, although HellsBells recommended this change w/out viewing it in IE, so i don't know exactly what it looked like in his Firefox-- i can only guess that his description of the MainCol text "touching" the RightCol in some places must have given him the evidence he needed to properly diagnose the problem). See above commentary for description of the RightCol's previous erroneous state.
  • Re-sized 2 images an unnoticeable, yet effective value from 440px to 430px (the "Tabu Girls", and "Links Banner" on their respective pages) which were also contributing to my RightCol issue. This i discovered after reducing MainCol from 69% to 65%.
  • Changed box values of the thumbnails on the Hush page so they look the "same" in IE and FF. Previously using a {margin-right: 50%;} on both the 1st and 2nd thumbnails, which displayed as i wanted in FF, but NOT in IE, I removed the margin-right values, replacing them w/ {padding-right: 45px;}, and adding the same to the third which previously had no padding or margin. 45px being a rather arbitrary number as i tried 33px, half the size of the thumbnail itself, but that wasn't enough for the look i wanted. i guess you could say I resolved that about 75% of the thumbnail sizes made for good padding in this case.
  • Assigned a width to the floated <ul> on the right-side of the "Party / Corporate Booking" page. This was my biggest challenge, which became much more manageable after Chris informed me that "all floats should have widths". I thought I was never going to get it right in IE and FF at the same time, but after i calmed down and tried a few things, to my delight, it worked!
  • Fixed a validation error where <ul><strong><li></li>...<li></li><strong></ul> which was invalid, although it displayed as i wanted, and was overlooked by the FF HTML Tidy Extension, but recognized by w3.org's XHTML validator. This was resolved by placing the <strong> after the <li> and before the </li> tags for every <li>.

and i think that's it!

I hope that someone is able to learn something from this. I tried to explain everything as thoroughly as possible in hopes that perhaps someone else is suffering similar difficulty, and they might find a solution here. If something here rings a bell for your own problem, then please feel free to PM me, or ask in the thread. I don't presume to be an expert, but I try to help others when i can.

I don't talk any more tech here, so if you're looking for more CSS rules, etc, you may want to keep searching once you've finished w/ the above. However, if I may indulge you for one extra moment, I'd like to tell you the (short-version) of how this whole thing came to be.
i was going to do a "Flash site" for them, but the day i sat down w/ my Flash tutorials, and all ready to start, instead i decided against it. I was really begining to get tired of the level of abstraction one must deal with when using software like DreamWeaver or Flash (i guess you could say, the level to which you have no control over the inner functions, and ultimately the final output). I don't doubt that there are people who have mastered Flash, and Action Script, who are also masters at CSS and PHP-- who would disagree w/ my opinion there, and i do believe that there is good in Flash, as there is good in many things to be learned for the well rounded developer.

i dabbled very briefly w/ the MS Visual Web Developer Express (a "free" software) because for brief moment of insanity, i decided to concede to the M$ influence, to abandon all hope of learning to hand-code a server side scripting language (at the time ColdFusion), and to try to jump on-top of the MS dotNET wave and see how far i could ride it. Fortunately for me, some people here at this very forum talked some sense into me, and I bagged that M$ lunacy, started reading a book on PHP, and surprised at my progress after near completion of that book, decided to do the same with CSS. so, here i am. thanks guys for showing me the way.

There is a camaraderie here, and amongst the PHP crowd that i don't think could ever thrive in the dotNET world. Heck, their own people don't have a standard, "single definition" for what dotNET is, let alone the community of end-users-- who just do not typically seem so friendly or willing to help the next-guy. I'm not saying the technology is all together bad, but there is something to be said for being able to come to a forum like this, basically knowing nothing, and just a few short months later, to have learned-- and i mean, really learned by explanation, example, and practice if not just for the sake of sharing in and spreading the good-will which thrives here, so much to be able to re-design a website project like the one discussed in this thread.

In the unlikely event that any newbies are reading this, what i'm trying to say here is, if you're thinking of learning CSS, and you find it to be intimidating, please don't give up. Find a good book-- and if you can't find a book, then read articles online, or follow the links provided at this site, and sites like it, then come here and talk about your learning, ask for help, and just keep going. You'll be glad you did.
Smile

thanks for reading.

[/]