Planning my htm & css design

[kyllle]

Hi All,

Iv been working as a web content editor for a while now and understand html very well and the concept of css through having to edit countless amounts of webpages through my work, but, I have never actually built my own site using css and I feel its now time to make this step up to benefit myself and my job.

I have been provided with the oppoertunity to create a charity based site for my local walking club so I have drwan up a design on photoshop of how id like the homepage to look (please view attached jpg)

now I was wondering if you could help with my next stage, getting my head round whats involved in this design and how I should approach the coding.

Thanks for taking time to look, and all advice appreciated, also if you have any comments on the design or layout of my propossed site would be great thanks!!!

[MidiMagic]

I usually set up styles as I need them. And I design the big parts of the page first, and then add the little details.

And no lorem ipsum in the final product.:icon_mrgreen:

[kyllle]

Hi all,

So Iv started the html/css production and have managed to get myself into a few problems that I just cant get my head round, ok so before you check the link I should highlight a few things that I know I havnt done correctly:

> Basically I have went with the background for the time being but it will def be changed to a gradient repeated across the page.

> I just cant get the text positioned to save my life!!! tried padding and resizing the widths but no joy??

> How do I go about altering the line space of the blockquote?

All advice welcomed and thanks for looking!!

link: http://www.glen-lodge.co.uk/quilly/quilly.html

[jpusdafs]

Hi all,

So Iv started the html/css production and have managed to get myself into a few problems that I just cant get my head round, ok so before you check the link I should highlight a few things that I know I havnt done correctly:

> Basically I have went with the background for the time being but it will def be changed to a gradient repeated across the page.

> I just cant get the text positioned to save my life!!! tried padding and resizing the widths but no joy??

> How do I go about altering the line space of the blockquote?

All advice welcomed and thanks for looking!!

link: http://www.glen-lodge.co.uk/quilly/quilly.html

you should consider using em or percentages for sizing your text. you can also try adjusting your margins instead of padding... this might help. by using em (i.e. font-size:0.9em;) or percentages (i.e. font-size:90%;) will allow your text to flow more smoothly, and allow your site to be more flexible.

hope this helps.

/jp/

[ctrl4ltdeleteme]

Hey,
Let me preface my statements by saying that I really like the design, and that design is not my forté.

Ok, Your background image ,"repeat.jpg", should probably be 1px width. The reason being is that if you are using repeat-x for any reason, it is so that you can save bandwidth. If you reduce the size of the image-width then the page should load faster.

Also, don't name it repeat.jpg name it something that has more semantic value like xxxxx_bkg.jpg. The reason for this is that you are bound to end up with something else that is repeating and you don't want to end up in a situation where your choosing between editing repeat1, or repeat2 and have no idea whether you are editing the page background or a div background. The name should tell you something about where it goes and what it does.

Put all of your styles in a separate file. If you have five pages for your site(home, meetings, faqs, contacts,links, and something else) you don't want to be in a situation where you need to make a global change and have to edit every file you have(this would also be a good time for me to mention php includes but that's not exactly web design). You can use this

<link href="/css/main.css" rel="stylesheet" type="text/css" />

in each document to create a link to one static stylesheet, this will allow you to make global changes to your page. Here is a stylesheet from a site that I designed.
http://swingknights.org/css/main.css
I'm not really proud of the design of the site, but as time went on I tried to keep a certain structure for the style sheet.....an even better one would be
http://techrangers.cdws.ucf.edu/_assets/styles/bin/Sprocket_Style.css

Also, I don't know what you are using to develop the page, but when I started making pages for the internetz I got a firefox addon called webdeveloper. There is an option called "outline block level elements" which is very helpful in finding spacing errors.

Also, just a thought, if your server allows for php you should utilize it, if not that's sort of a bummer....

I hope that helps and good luck with the site.

-Austin

[MidiMagic]

Blockquote is scheduled to be deprecated, so don't use it in new designs.