Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

pulsewidth947

macrumors 65816
Original poster
Jan 25, 2005
1,106
2
So I'm working on my new site - www.squarefrog.co.uk, I've been making it in Photoshop and Dreamweaver and I keep checking my progress in Safari. I just happened to check the site in Firefox and I noticed it was all out of wack. I checked it on a PC with Internet Explorer and that was screwed up too.
screens.gif

I just checked it with Opera on the Mac and its fine.

How else can I do the layout of my site? I hear you can do layouts with CSS, but to be honest all I've used CSS for is setting colours.
 
CSS is definitely the way to go.

I'd suggest taking the time to learn the CSS, and then it will be much easier from then.

CSS is really easy and quick to learn, and it's fun too.

The best way I learned was from viewing others' CSS and finding out what made other sites tick.

Check this out to get started: http://cssvault.com/cat_layouts.php
 
I noticed in your page source, your table definitions have a mixture of percentage and pixel notation. Could this have anything to do with it? Did you try changing all the 100% values to the corresponding pixel value, since you have pixels defined for every component within the table already?
 
I had a suspicion that was what would be recommended :)

I'm just a bit impatient - trying to teach myself php/sql at the same time. My lease on my web space wil be up before I finish it :rolleyes:

oh the other thing was I was using tables as I had a gif on the right side which expanded to the width of the current screen (in order to make the site appear less small when used with resolutions abou 800x600)

mkrishnan said:
I noticed in your page source, your table definitions have a mixture of percentage and pixel notation. Could this have anything to do with it? Did you try changing all the 100% values to the corresponding pixel value, since you have pixels defined for every component within the table already?
Possibly, but I dont know how to get round that. I want the table to be 100% of the width of the screen. Then I want each column to be a fixed pixel amount, except for the right hand gif which I want to fill the rest of the real-estate on screen :)
 
I get the impression that CSS enables you to more precisely define settings of things. Wish I hadnt started redesigning my site, I hate coding! SQL is easy with phpmyadmin, PHP aint so bad as I've got 2 mates who know it well, but CSS I really dont understand.

The thing I love about tables is in Dreamweaver I can drag out a layout table to design my site quickly. But I suppose theres no point in that if no-one can view it properly.

I should have just stuck with making sites in Flash.
 
Yes, CSS is very powerful.

You can set all kinds of parameters very percisely so that your layout works similarlily on most browsers.

It is also better for accessibility (screen readers, etc).

You can even use CSS *with* tables (my current side does this - but for other reasons than layout).

In a couple of hours, you can really get the hang of CSS and start making really nice things. It's not as hard as it may seem; infact it's terribly easy. Just take a little time and look into it, and you'll be going in no time.

CSS gives you full control over your site's design. For example, without CSS you'd have to change the color of links or fonts on your site for all pages within your site individiual (time consuming!!). With CSS, just make changes in the CSS file (once!), and the changes take place on all pages using that one CSS file.
 
Yeah I love the way you can change the look of a whole site by using an external style sheet. Thats partly the reason I'm doing my site with PHP/SQL, as I get bored of the look of my site after a few months and its easier to give a site a fresh look if you dont have to manually copy over content!

So <div> tags are what I need to look into ? I find its easier to google what you want if you know the tags you are looking for :rolleyes:
 
I'm going to chime in with another nod to CSS for making a consistant and professional looking site. BUT, I also want to point out that most versions of IE handle CSS absolutely horribly. There's some lists out there of CSS 'tags' that IE mangles, but off hand I know there is an issue with having floating 'windows' side-by-side with one another. So, in the example site that pictured above there would be some issues with the side menubars in IE.

There are workaround hacks for this, involving embedding a command that IE mesinterprets and then adding in the right code for CSS compliant browsers, and the 'wrong' hack code for IE. It's kinda confusing, but it works, and it's well documented if you go to a good CSS reference site.

I'm trying to get my companies site redone in CSS rather than tables, but I don't have the time to do it myself, the time/energy to train someobe, or the money to pay someone to do it...

We are a non-profit, so anyone who wants to donate thier expertise is welcome, it'd be tax deductable. ;-)
 
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.