Tue, 2007-06-26 13:28
I would like to redo this old site: http://www.portlandwinegroup.com
What would be the basic layout to rebuild it in? Would it be a 4 column format?
Tue, 2007-06-26 14:58
#1
I'd say a three-column. I
I'd say a three-column. I don't like the way the list is split into two columns, I'd just make it one and have different sections that span the entire width; maybe using a small simple tabbed navigation system?
Tue, 2007-06-26 22:08
#2
I'm still getting used to
I'm still getting used to positioning, would I use divs for each section? making each a percentage away from the left edge? How do I set up the sections? And the tabbed navigation? what is the setup for that, an inline list?
Wed, 2007-06-27 17:26
#3
That site looks very
That site looks very familiar, have you worked on it here before?
You'd need something like:
The body element needs to be the width of the three columns, then you use auto margins to center it.
Use floats and negative margins to create the three columns.
Also your "link" section would be better labelled as something like "affiliates" 
Fri, 2007-06-29 03:22
#4
Would the general text
Would the general text listing for the names and addresses be in or
Fri, 2007-06-29 10:32
#5
I'd use a heading tag (H3
I'd use a heading tag (H3 maybe) for the headers (eg Wine Shops), then maybe a definition list, or the address tag?
Wed, 2007-07-11 00:26
#6
thepineapplehead wrote:That
thepineapplehead wrote:
That site looks very familiar, have you worked on it here before?
You'd need something like:
The body element needs to be the width of the three columns, then you use auto margins to center it.
Use floats and negative margins to create the three columns.
Also your "link" section would be better labelled as something like "affiliates"
I did list this site, www.portlandwinegroup.com before. At this point in my limited knowledge of CSS I can see what bad, bloated html code looks like, but I get overwhelmed trying to set up the basic framework to rework the site. What would be the basic structure for a 3 column template with header and footer? Is that what I need to redo this site?
I've read the CSS sites you have mentioned here in this forum, but can't get the placement structure in my head. Can't grasp the floats and negative margins yet. I keep trying, but it comes slowly. :?
Thanks for all your help and advice.
Wed, 2007-07-11 16:50
#7
Ignore looks and design. In
Ignore looks and design.
In fact don't even bother previewing in a browser for now.
Crack open notepad, copy and paste just the content in, and start getting it wrapped in semantic tags.
Wed, 2007-07-11 22:09
#8
Will do. Thanks.
Will do. Should I copy all the html from view page source with all the repetition of font tags and all? And clean that up later?
Thanks.
Wed, 2007-07-11 23:18
#9
Don't copy all the html,
Don't copy all the html, just rip out the raw guts of it, and work on styling it proper latter.
Don't use font tags if you can anymore, as css is better and easier to change for that stuff
Thu, 2007-07-12 07:58
#10
davek7 wrote:Will do. Should
davek7 wrote:
Will do. Should I copy all the html from view page source with all the repetition of font tags and all? And clean that up later?
Thanks.
No.
Copy the content from the browser window, so you just get plain text
Fri, 2007-07-13 12:05
#11
OK, did that and named it
OK, did that and named it pwg.html
Now should I start adding the html tags, then the style sheet? should I try creating div tags for the columns?
Here's what it looks like now...
http://www.portlandwinegroup.com/pwg.html
Where do you start?
Fri, 2007-07-13 16:52
#12
Ignore the div tags and
Ignore the div tags and columns for now, get the content marked up semantically, so when you view it with no styles, it makes sense.
Fri, 2007-07-13 23:15
#13
Excuse me for my ignorance,
Excuse me for my ignorance, but what do you mean by semantically?
Sat, 2007-07-14 00:12
#14
Try Googling semantic+html -
Try Googling semantic+html - you'll probably find more than you ever wanted to know
Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again 
Sat, 2007-07-14 01:52
#15
davek7, here's a start
davek7,
here's a start (using both your existing page and the raw content you posted). I haven't included the necessary html (doctype, html, head, body, etc.)
Portland Wine Group
The Portland Wine Group is a new way of discovering wines locally and from around the world. A directory of all things wine related in the Portland area.
Wine Shops
- Allegri Wine Shop and Art Gallery
- 44 N Main Street
- Gresham, OR
- 503-465-1841
Sat, 2007-07-14 14:25
#16
Smee wrote:Try Googling
Smee wrote:
Try Googling semantic+html - you'll probably find more than you ever wanted to know
Thank you. Now it's quite clear.
Sat, 2007-07-14 14:30
#17
Thank you for your help.
Thank you for your help. This is the direction I needed
Sat, 2007-07-14 16:17
#18
Keep us informed! Let us
Keep us informed! Let us know when you've got the HTML tags added, we'll go from there.
Sun, 2007-07-15 12:38
#19
OK, I've got the html tags
OK, I've got the html tags done. http://www.portlandwinegroup.com/pwg.html
Now what's next?
Sun, 2007-07-15 12:55
#20
Fix up the few errors -
Fix up the few errors - eg
The Portland Wine Group is a new way of discovering wines locally and from around the world. A directory of all things wine related in the Portland area.
Wine Shops
add the hyper links in, and get the source ordered a bit better - H1 before the H2, for example.
Sun, 2007-07-15 14:02
#21
thepineapplehead wrote:Fix
thepineapplehead wrote:
Fix up the few errors - eg
The Portland Wine Group is a new way of discovering wines locally and from around the world. A directory of all things wine related in the Portland area.
Wine Shops
How should this be changed? What's wrong with the p tag?
Sun, 2007-07-15 14:21
#22
Quote:How should this be
Quote:
How should this be changed? What's wrong with the p tag?
The part TPH highlighted is the problem. Ie, 'Wine Shops'.
It doesn't seem to be a part of the previous paragraph and isn't a para by itself. It's probably an artifact from a previous layout or edit.
Sun, 2007-07-15 14:32
#23
I've gone through your html
I've gone through your html and cleaned some things up.
Firstly the doctype - I changed it to strict as there's no reason to code to outdated standards. Then I added some elements in the head including the style tags. Note that this for development only. After the page reaches a certain point I recommend removing the styles from the page and using an external stylesheet.
I placed quotes around all href entities (I accidentally left them out in my first example). I then removed the wine glass image and wine crossing image. Unless you have compelling reason for them to be part of the content, you should place them as background images. Next was some validation correction. The definition lists should close before each new section and a new one open after the header.
I also removed the navigation bringing you to the top of the page - that can be added later if needed. The footer was changed from a div with inline styling (never use inline styling) to a p. We'll be adding the necessary divs later as we go through the page styling, but for now we want the content only. I've also redone the formatting for easier reading (eliminated spaces and indented child elements).
I've taken a while to do this and see TPH and Phreestyle are already in on the helping - that's good. TPH's suggestion of source ordering is good. It might make sense to move parts of the html around now. Remember, the page as it stands is how people with images/styling off will see it - that includes Search Engines.
Portland Wine Group - Redo
/**/
Wine links
Portland Wine Group
The Portland Wine Group is a new way of discovering wines locally and from around the world. A directory of all things wine related in the Portland area.
Wine Shops
- Allegri Wine Shop and Art Gallery
- 44 N Main Street
- Gresham, OR
- 503-465-1841
Wine Supplies & Storage
- Above the Rest Homebrewing
- 11945 SW Pacific Hwy Ste 235
- Portland, OR 97223-6478
- 503-968-2736
Wine Clubs & Associations
- Pacific Northwest Wine Club
- 16285 SW 85th Ave. #104
- Tigard, OR 97224
- 503-620-6691
Wine Bars
- Aalto Lounge
- 3356 SE Belmont St.
- Portland, OR 97214
- 503-235-6041
Restaurants
- Abou Karim - Lebanese Cuisine
- 221 SW Pine St.
- Portland, OR 97204
- 503-223-5058
More Wine Bars
- Thirst
- 0315 SW Montgomery St #340
- Portland, OR 97201
- 503-295-2747
Portland Wine Group | Portland Oregon | Contact Us
Links:
- Oregon Wine
- Oregon Wine Board
- Oregon Wine Distributors
- Washington Wine Commission
- California Wine
- Wine Spectator
- Wines of France
- French Wine Regions
- Italian Wine Regions
- Geovino World of Wine
- Greek Wine
- Promote your wine business!
- About Us
Sun, 2007-07-15 14:43
#24
Thanks for the input. Here's
Thanks for the input. Here's what I have now...
http://www.portlandwinegroup.com/pwg.html
what's wrong with the links? I can't see it!
Sun, 2007-07-15 14:54
#25
damn/ I posted the wrong one
damn/ I posted the wrong one - this one has the links corrected, and ampersands coded correctly.
Portland Wine Group - Redo
/**/
Wine links
Portland Wine Group
The Portland Wine Group is a new way of discovering wines locally and from around the world. A directory of all things wine related in the Portland area.
Wine Shops
- Allegri Wine Shop and Art Gallery
- 44 N Main Street
- Gresham, OR
- 503-465-1841
Wine Supplies & Storage
- Above the Rest Homebrewing
- 11945 SW Pacific Hwy Ste 235
- Portland, OR 97223-6478
- 503-968-2736
Wine Clubs & Associations
- Pacific Northwest Wine Club
- 16285 SW 85th Ave. #104
- Tigard, OR 97224
- 503-620-6691
Wine Bars
- Aalto Lounge
- 3356 SE Belmont St.
- Portland, OR 97214
- 503-235-6041
Restaurants
- Abou Karim - Lebanese Cuisine
- 221 SW Pine St.
- Portland, OR 97204
- 503-223-5058
More Wine Bars
- Thirst
- 0315 SW Montgomery St #340
- Portland, OR 97201
- 503-295-2747
Portland Wine Group | Portland Oregon | Contact Us
Links:
- Oregon Wine
- Oregon Wine Board
- Oregon Wine Distributors
- Washington Wine Commission
- California Wine
- Wine Spectator
- Wines of France
- French Wine Regions
- Italian Wine Regions
- Geovino World of Wine
- Greek Wine
- Promote your wine business!
- About Us
Sun, 2007-07-15 15:43
#26
Your H1 and leading
Your H1 and leading paragraph are joined, keep them together
Portland Wine Group
The Portland Wine Group is a new way of discovering wines locally and from around the world. A directory of all things wine related in the Portland area.
Wine links
Sun, 2007-07-15 17:07
#27
Adjusted that. Why are my
Adjusted that. Why are my links not working at the bottom of the page? What's missing?
Sun, 2007-07-15 22:41
#28
compare your code to my last
compare your code to my last posted code.
Mon, 2007-07-16 14:55
#29
I added the quotes to the
I added the quotes to the links at the top, but they don't have any real links in them.
Here's the links at the bottom of the page...
why don't these work?
Mon, 2007-07-16 14:57
#30
Malformed HTML - <a
Mon, 2007-07-16 15:55
#31
thepineapplehead
thepineapplehead wrote:
Malformed HTML -
shoudl be
Thanks. I knew I was missing something. All the links work now.
Now what would be my next step?
How do I left align the addresses? in CSS I presume?
Mon, 2007-07-16 17:05
#32
Start thinking about basic
Start thinking about basic grouping divisions next, adding in divs to group related elements - for example, you may want a header div containing the title and preamble; a navigation div containing (obviously) the nav, maybe one for wine shops, one for wine clubs, etc.
Then give each division a horrible background colour (lime, aqua and fuchsia are good choices) so you can see what's where.
Mon, 2007-07-16 18:11
#33
I'll work on that and get
I'll work on that and get back to you!
Tue, 2007-07-17 21:44
#34
Well I made a mess, but it
Well I made a mess, but it is an experiment... www.portlandwinegroup.com/pwg.html
How do I take this clumsy mess and put it in three orderly columns? I will eventually put each group on its own page, but I want to get the understanding of a three column page. Getting the sizes right and all. Do you like percentages or pixels better for placement?
Wed, 2007-07-18 17:49
#35
Are you sure you want to go
Are you sure you want to go for a three-column layout now?
Give it a lot of thought. I'd change the design
Wed, 2007-07-18 23:10
#36
I'm open to a new format.
I'm open to a new format. What do you suggest? Two column?
What if I have a page of just restaurants listed and have as many as four columns so it doesn't scroll down too far? I thought with CSS, you can put groups of text anywhere on the page. :?
Thu, 2007-07-19 00:06
#37
You can put text anywhere,
You can put text anywhere, but it just can break the flow very easily...
In that example, I couldn't look at it because the middle column dissapeared for example. If you can, for less headaches, I might recommend the two column layout style somehow.
Thu, 2007-07-19 21:50
#38
I'll try the two column
I'll try the two column format and get back to you after some more experimentation.
Fri, 2007-07-20 15:57
#39
Even though everyone thinks
Even though everyone thinks this would be better in two columns,I'm still experimenting with three columns...
http://www.portlandwinegroup.com/pwg.html
How do I move the middle column up to match the left and right columns?
Fri, 2007-07-20 20:36
#40
Here dave, give this a
Here dave, give this a study. It's basically a 3 column floated layout with the center column divided again into two columns. It's fairly close to the original and can obviously be styled even closer.
Portland Wine Group - Redo
/**/
The Portland Wine Group is a new way of discovering wines locally and from around the world. A directory of all things wine related in the Portland area.
Wine Shops
- Allegri Wine Shop and Art Gallery
- 44 N Main Street
- Gresham, OR
- 503-465-1841
Wine Supplies & Storage
- Above the Rest Homebrewing
- 11945 SW Pacific Hwy Ste 235
- Portland, OR 97223-6478
- 503-968-2736
Wine Clubs & Associations
- Pacific Northwest Wine Club
- 16285 SW 85th Ave. #104
- Tigard, OR 97224
- 503-620-6691
Wine Bars
- Aalto Lounge
- 3356 SE Belmont St.
- Portland, OR 97214
- 503-235-6041
Restaurants
- Abou Karim - Lebanese Cuisine
- 221 SW Pine St.
- Portland, OR 97204
- 503-223-5058
More Wine Bars
- Thirst
- 0315 SW Montgomery St #340
- Portland, OR 97201
- 503-295-2747
Links:
- Oregon Wine
- Oregon Wine Board
- Oregon Wine Distributors
- Washington Wine Commission
- California Wine
- Wine Spectator
- Wines of France
- French Wine Regions
- Italian Wine Regions
- Geovino World of Wine
- Greek Wine
- Promote your wine business!
- About Us
Fri, 2007-07-20 22:36
#41
Wow! That's beautiful. I'll
Wow! That's beautiful. I'll spend time looking it over and figure out how to add the internal anchor links and add the other two pages to it using the same style sheet. I'll also make it an external style sheet. Thanks
Sun, 2007-07-22 18:04
#42
I've been working on it...
I've been working on it... www.portlandwinegroup.com/pwg.html
I'm adding the promote, about, and distributor pages. Made some links and anchor links.
On the promote page I started to use the column2 style but I see that I should use a new class to add the content to. Correct?
http://www.portlandwinegroup.com/pwg-promote.html
Would I use something like:
p.center {margin:20px;}
Is this the direction I should be taking?
Sun, 2007-07-22 18:45
#43
Well, it really depends on
Well, it really depends on how you want things to look. You could (in the promote page) change the column2 id to content id. That would essentially leave you with 2 columns matching the front page without the third column on the right. Of course, you would still need to adjust things - for instance you may want to add
#content p {to the css.
margin: 1em 10px;}
Be careful in your html. It appears you have a closing div after the container is closing. Technically it's not, they close in the opposite order they're opened, but the comment is on the second to last div. You want to close the (current) #column2 div before the footer - just move the very last closing div up to just before the #footer.
Mon, 2007-07-23 19:07
#44
I was thinking about
I was thinking about ditching the columnar layout altogether and going for a different approach. I'll have a think 
Tue, 2007-07-24 03:07
#45
wolfcry911 wrote:Well, it
wolfcry911 wrote:
Well, it really depends on how you want things to look. You could (in the promote page) change the column2 id to content id. That would essentially leave you with 2 columns matching the front page without the third column on the right. Of course, you would still need to adjust things - for instance you may want to add
#content p {to the css.
margin: 1em 10px;}
Be careful in your html. It appears you have a closing div after the container is closing. Technically it's not, they close in the opposite order they're opened, but the comment is on the second to last div. You want to close the (current) #column2 div before the footer - just move the very last closing div up to just before the #footer.
Thanks, I made a few changes. Does it look better? http://www.portlandwinegroup.com/pwg-promote.html
Tue, 2007-07-24 13:49
#46
wolfcry911 wrote:Be careful
wolfcry911 wrote:
Be careful in your html.
You now have 14 errors in your html. I know for certain I didn't put font tags in the markup (they've been deprecated for eons). You've eliminated two closing divs (one I suggested moving not deleting). And other errors. I had suggested moving the closing content div so that the footer begins after all columns - I don't think it looks right the way it stands now.
Tue, 2007-07-24 14:17
#47
I got rid of those old font
I got rid of those old font tags, but don't remember where the div tags were that you mentioned.
All the errors in the form tag were created by Paypal, and the button works so I don't want to touch that.
The validation mentioned that the doc type is wrong. should it be something else?
I took out the left column, how do I center the text? http://www.portlandwinegroup.com/pwg-promote.html
At least I'm starting to understand more about the structure even though its not perfect. Dreamweaver was a bad influence on my web design. It takes a while to relearn the proper way. I really appreciate all your help.
Tue, 2007-07-24 14:31
#48
the end of the page should
the end of the page should look like this:
this will fix the missing closing div tags, place them in the correct order, and correct another error (<d > tag?).
If you want to use the #content div as the only centered column, you can do one of two things.
The first is to place an id on the body of that page - say, <body id="onecol"> and then in the css, add a descendant selector to change #content to your needs. Like so#onecol #content {
float: none;
margin: 0 auto;
}
The second would be to keep the first column in the markup with no content inside it. I don't really care for this second method because it creates extraneous markup.
Tue, 2007-07-24 15:07
#49
I did as you
I did as you said... http://www.portlandwinegroup.com/pwg-promote.html
Looks good to me. Did I miss anything?
Tue, 2007-07-24 17:11
#50
the two closing divs at the
the two closing divs at the end are still incorrect - they need to be </div> not </d>
the errors in the Paypal form are very easy to correct. First the inputs need to be enclosed in a block level element - a div, p, or probably most correct, a fieldset. Then each of the three inputs need a space and closing slash before the >. Then remove the border attribute and those errors are corrected.
The only thing you may want to do is this small change in the css:
content p, #content h3, #content form, #content h1{ to align everything in the column.
margin: 1em 10px;}