65 replies [Last post]
felixters
felixters's picture
Offline
Enthusiast
Last seen: 11 years 41 weeks ago
Timezone: GMT-4
Joined: 2007-04-22
Posts: 55
Points: 0

Drats, I was hoping it

Drats, I was hoping it wouldn't come to that. Anyway, it may not be so bad. I need to get the guy who made these graphics to try and make their file sizes smaller too, the site takes too long to load.

I made the fix for the links at the top, but the font-size was too big. I can't seem to make it similar across all browsers, but it's not really an issue.

Thanks for your help again Smile

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 22 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

As you make the changes,

As you make the changes, re-post to that link you gave me so I can see it live. Just to make sure Smile

I'm a bit tired right now (fell asleep at 5pm !), so I may just take a rest for a while.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 22 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Hi This bit I said to

Hi

This bit I said to do:

#nav li{ display:inline; padding:0 .2em 0 .1em; height:30px; border-right:2px solid black; }

Should have been:

#nav li{
display:inline;
padding:0 1em 0 .8em;
height:30px;
border-right:2px solid black;
}

Sorry about that Smile

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 22 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Next font-size

Next font-size fix:

This:

#services ul{ font-size: 70%; }

to:

#services ul{ font-size: 79%; }

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 22 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

And this: #leftcol p{

And this:

#leftcol p{ font-size: 79%; }

to:

#leftcol p{ font-size: 86%; }

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 22 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

And #rightcol #top

And

#rightcol #top blockquote{ font-size: 69%; }

to:

#rightcol #top blockquote{ font-size: 79%; }

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 22 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

And h2{ font-size:

And

h2{ font-size: 100%; }

to:

h2{ font-size: 114.9%; }

Note that you have the h2 set to bold, which is the default anyway. With this font, at this size, you can see the problems with different browsers. Change the size to 115% and IE goes too big, and at 114% Opera is too small.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 22 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

And #main p{ font-size:

And

#main p{ font-size: 79%; }

to:

#main p{ font-size: 93%; }

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 22 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Ok Now the side

Ok

Now the side menu

Obviously, still can't figure the png transparency. Maybe the person who made it used 32 bit rather than 24 bit?

Anyway, this css replaces all of that for the side menu:

#leftcol ul { list-style: none; margin: 45px 0px 15px 12px; } * html #leftcol ul {margin-left:6px;} #leftcol ul li { display:block; height:142px; width:200px; margin: 3px 0px; overflow: hidden; /* Next 3 are new */ text-align:center; line-height:142px; vertical-align:middle; position:relative; } #leftcol ul li a em{ display:block; position: absolute; left:0; top:0; height: 142px; width: 200px; cursor:pointer; } #leftcol ul li#photogallery a em{background: url(../Images/PhotoGallery.png) no-repeat;} #leftcol ul li#aboutuslnk a em{background: url(../Images/AboutUs.png) no-repeat;} #leftcol ul li#serviceslnk a em{background: url(../Images/Services.png) no-repeat;} #leftcol ul li#contactus a em{background: url(../Images/ContactUs.png) no-repeat;}

#leftcol ul li#photogallery a:focus em, #leftcol ul li#photogallery a:hover em, #leftcol ul li#photogallery a:active em, #leftcol ul li#aboutuslnk a:focus em, #leftcol ul li#aboutuslnk a:hover em, #leftcol ul li#aboutuslnk a:active em, #leftcol ul li#serviceslnk a:focus em, #leftcol ul li#serviceslnk a:hover em, #leftcol ul li#serviceslnk a:active em, #leftcol ul li#contactus a:focus em, #leftcol ul li#contactus a:hover em, #leftcol ul li#contactus a:active em {background-position: 0px -142px;}

Note how you can combine the rollover bits.

Doing it this way means if there are no images the text for the links show, but when images are on, they cover the link text. Try it, rename the images folder temporarily.

Next, the footer. Then it's done?

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 22 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Whoops The html for the

Whoops

The html for the side menu!

  • Photo Gallery
  • About Us
  • Contact Us
  • Contact Us

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 22 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Well, the footer is done

Well, the footer is done like how i would do it.

The horizontal menu with |'s in between probably needs changing to be like the one I re-did in the header.

Reckon you're done. Yes?

The links at the top seem to work and don't disappear.

The bit with the horizontal list of services with the faded background doesn't stand out too well, as that image gets darker to the right and the text is black.

Personally, I don't like the rotating images and quotes. It makes the page slow to load and does what?

Wouldn't it be better to have a fixed bit of text and picture, and maybe use php to load a randomly different set each time the page loads?

Now, I trust you can see that starting with a graphical design and trying to make it work is hard. Whoever designed this didn't really have a good idea of what is sensible and what isn't. The design is clearly based on printed media thinking, and not flexible web design.

Anyway, I'll be around but not all the time for next week.

CYA

felixters
felixters's picture
Offline
Enthusiast
Last seen: 11 years 41 weeks ago
Timezone: GMT-4
Joined: 2007-04-22
Posts: 55
Points: 0

Lots of changes here! I'll

Lots of changes here! I'll go through them all later, thanks Smile

ClevaTreva wrote:

Personally, I don't like the rotating images and quotes. It makes the page slow to load and does what?

Wouldn't it be better to have a fixed bit of text and picture, and maybe use php to load a randomly different set each time the page loads?

I agree with you... the client wanted it that way though. In fact, he wanted to have up to 15 images in the rotator. We talked him down to only a handful.

ClevaTreva wrote:

Now, I trust you can see that starting with a graphical design and trying to make it work is hard. Whoever designed this didn't really have a good idea of what is sensible and what isn't. The design is clearly based on printed media thinking, and not flexible web design.

What is the normal flow of work when you are contracted to build a site? I would think the client would want to see the layout up front or near the beginning. I'm currently in the process of teaching the designer about good web standards and why css layouts are better than table layouts. He still doesn't understand why I refuse to set a pixel value for fonts, but hes learning Tongue (He used to work with a guy who used tables for design, but now he would like me to start helping).

I'm hoping as time goes on he will catch on to the idea of building flexible web designs and designing for the web, not printed media. If you have any suggestions as to how I can help convert him quicker, please share them.

Thanks!

felixters
felixters's picture
Offline
Enthusiast
Last seen: 11 years 41 weeks ago
Timezone: GMT-4
Joined: 2007-04-22
Posts: 55
Points: 0

The images are png32. Hmm.

The images are png32. Hmm. I just tried converting them from 32->24 in macromedia fireworks, but it saved the background as white not transparent. I'm guessing there is a different way to convert this.

Is it known that png32 doesn't work in IE6?

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 22 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

felixters wrote:What is the

felixters wrote:
What is the normal flow of work when you are contracted to build a site?

To ask what needs to be the content and likely site structure. Code it up with just html, using ipsum lorem if necessary.

Quote:
I would think the client would want to see the layout up front or near the beginning.

Once you get used to the flexible nature of page widths, font-sizes nad the problems that IE has, you can start to graphically think web rather than print. I tend to use css page of the month type sites to give the customer some ideas.

Quote:
If you have any suggestions as to how I can help convert him quicker, please share them.

Only when he sees how flexible you can be, will he realise the benefits. Also, once done, css styled sites are easier to maintain.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 22 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

felixters wrote:The images

felixters wrote:
The images are png32. Hmm. I just tried converting them from 32->24 in macromedia fireworks, but it saved the background as white not transparent. I'm guessing there is a different way to convert this.

Is it known that png32 doesn't work in IE6?

I know how to use ms filters to get pngs working, but i know ie can't do this with 32 bit pngs.

Given the nature of the shady edges, I cannot see how you could make this work in ie6 without an alpha transparency, so i would stick to my suggestion of jpgs for ie.

Again, another example of getting to know what you can sensibly do on a web page. Those buttons look pretty, but are not practical. Indeed the whole design is not very flexible when it comes to font size changes. Think about that for the next design. Text needs space to expand, and fixed zones are not a good idea.