Trying to add space a bottom of page

If you are just looking for a quick way to add spaces try puttings these:

If you want to add a copyright put them here

PUT THE COPYRIGHT HERE.

Tut tut empty tags used in this way == 'bad'

Haha... either that or give a tutorial on margins..
This will suffice for now.

*wags finger* oh no it won't; give that tutorial on margins!

Thanks, it worked for space, but the copyright didn't. It's in the quilt pattern in DW8 and below the pattern in IE7 and Firefox. How do I get it above the pattern with space above that for the nav row of links? look again... http://www.patchworkcellars.com/

Center aligning the paragraphs with CSS will allow you to add the copyright info with a simple line break

.centered {text-align:center}

As for the spacing at the bottom, you'll want to control that with some CSS on your margins. Not sure what you've named the body container of the page but you can push it out a little with some margin control:


#content {margin-bottom:20px}

Cheers!

#footer{ clear:both; height:100px;

Increase the height.

Remove the extra P to bring to copyright closer to the bottom links.

Thanks, look at it again: http://www.patchworkcellars.com

Where do I add the style for the small grey text for the copyright without using the Dreamweaver way. It works but Id rather use css for that.

dreamweaver left this in embedded on your page:

.style1 { color: #666666; font-size: 10px; }

You can move this to your screen.css

and rename it to something like ".copyright"

then make the proper change in your html file and youll be fine.

or just leave it the way it is.

however, Hugo will come by and yell at you for not following proper semantics.

Hehehehe . . . yell

You must understand that it's not good advice to be advocating the misuse of elements. These new people are impressionable so you may as well tell them the proper way to do it

YELL!, WHO ME?, NEVER. SPEAK STERNLY PERHAPS, BEEN KNOWN TO RANT, OR TO BORE AT LENGTH; BUT YELL NAH

OK, look at it now... http://www.patchworkcellars.com
I think its correct now.

Always validate your markup, you have too many closing divs.

Is there a validator that I can run to point them out?

Try clicking the validate link in Hugo's sig

Hi

But it isn't the same in IE and FF

In IE the text is bold but plain in FF, and the line at the bottom is in a different position, or should I say the bottom menu is higher.

AND YOU DID put those extra blank p's in. Shame. SHAME.

Well there is as you have probably found by now but there is also the html-tidy extension for firefox that provides instant validation in the browser, but you can also just count them! it's generally not hard to find them and it helps to use the card counting principle, count them up and subtract as you pass closing ones, you should end up back at zero. Comment your closing tags so that you know what they are closing this also helps catch tags that don't have a match.

I gave the total validator a try and I see where I'm using p tags and br tags incorrectly for XHTML. But it looks fine and in some cases using a br tag is what I want to make it look that way. I know you are all perfectionists, but I'm not that anal about it. Maybe I should just change the doc type to HTML 4.0 trans instead of XHTML? Would that make a difference? Would that make it more correct?

I just ran the total validator on this forum page and it came up with 23 errors, I guess nobodys perfect.

Starting page: http://www.csscreator.com/node/19401#comment-84715
Started at: 15:17:03 GMT, January 11, 2007
Time taken: 33 seconds
Validator Version: v3.7.0
Total links checked: 47
Total errors found: 23 (HTML: 23)
DOCTYPE used for this page: -//W3C//DTD XHTML 1.0 Transitional//EN

Sorry are you calling us ANAL! :? that's not very nice

And it's not about being 'Perfectionists'

Oh and picking holes in the forum! again not very nice any idea how difficult it is to control a CMS like this especially when you didn't write the core files ?

You seem very defensive

No changing the DTD is not how you overcome problems it isn't hard writing valid pages to a strict DTD you just have to apply a little effort.

BR tags are not what are used to achieve styling, ever, they have their uses but not in this manner, you must use margins for spacing.

What is the total validator? is that the new Unicorn W3C multi-purpose validator?

All this needs correcting where are your closing paragragh tags, loose the br tags replace with paragraphs which space natuarally I would retink this whole section for semantic reasons, it may be better suited to a DL list

#

A bit of background: <<
# Patchwork evokes the "quilting heritage" of the American farming community. Quilts were often made as a local community event. When a barn raising was organized, the women would typically make a quilt for the family. Today many quilts are still put together in this collaborative manner and utilize patchwork styles.
# Additionally, the descriptor used for how farmland looks from high vantage point or an aerial perspective is "a patchwork of shapes", another farming connection.
#

Lastly, the Fox family and friends, our community, worked together to make these wines. Patchwork represents what our family and friends have labored to make like a community quilt. It is still about farming a crop and applying a craft - simple to the roots.
# Winemaking: The last few vintages I have had the opportunity to work with a most skilled of winemakers: Ray Walsh. New Zealand?'s loss is our gain, as his mastery of the craft and skills are EXCELLENT and very sensitive to the delicate grape types ideal for Oregon.
#

While I constantly inquire of alternative methods and techniques, and generally test his patience, we work well together to bring about results of high quality. He is the master craftsman and I am "the mind behind".

# Cheers - Christian Fox, winemaker
#

and line 59 you still have a closing div tag which needs removing

You have a apostrophe that need escaping (New Zealand's)

and the extra closing div tag I mentioned about three or four posts back. If your not interested in our help then just say so and we shan't waste our time

I'm sorry Hugo if I upset you. I know you are telling me what I need to know about css to do it right. and I appreciate it very much.

... but this old portlandwinegroup.com page is a mess. I know that. I just don't want to spend time on it now to redo it.

The Patchworkcellars page I'll work on. A DL list may be better, I have never used them before as you can see.

Thank you.

Total Validator is an extension in Firefox: https://addons.mozilla.org/firefox/2318/

Not upset, just making a point which you take with good grace

The page isn't a mess You only need a few tweaks to get things settled, a dl list might be best and isn't difficult to do.

Try this and see how you get on, you will need to style the dt and dd elements but you dont need br tags have a go styling ti and show us and we can guide.

What is Patchwork Cellars?

Lastly, the Fox family and friends, our community, worked together to make these wines. Patchwork represents what our family and friends have labored to make like a community quilt. It is still about farming a crop and applying a craft - simple to the roots.

Thanks, I'll work on it. What is DL? I can find it in my css book.

The page that's a mess is: www.portlandwinegroup.com
That was done with table and no css. That's the one that would take some time to fix. It probably needs to be on a couple more pages so it doesn't scroll so far down.

DL = definition list

try the one above but move the 'thanks' paragraph inside the last DD after the second paragraph then you can put a bottom margin on the DL container to get that space you wanted without resorting to two empty paragraphs.

Thanks again Hugo. Look at it now: http://www.patchworkcellars.com/index.html
I'll work on the other pages later.

That looks better, but you must pay attention to well formdness and semantics, and the specs. The dt tag does not allow elements of a block nature which means h# tags also p tags; you have both a paragraph tag wrapping a heading tag within a dt.

The dt is semantic in itself and is the term for the description that follows if you want it to look styled as a heading just set font size and font-weight.

and PLEASE LOOSE those two paragraph tags as requested above!

OK, I'm starting to understand what you mean. I took out the p tags, but how do I add space at the top of the text? With a margin?

How do I add the h3 style? Sorry I'm so slow at learning.

Your options are: within the DD to add space top and bottom to the paragraphs contained within it you can add a bit of padding then set the margins for the paragraphs and you could just then set bottom margin to the paragraphs or not pad the dd but set top and bottom margins for the paragraphs, if you want space above and below the actual block that represents this set of dt dd paragraphs then add top/bottom margins to the parent dl container.

yo may want better distinction between the blocks of paragraphs and their dt title in which case you could place a bottom margin on the dt element pushing the DD down or margins on the dd to provide more space between groups of paragraphs.

Styling the the dt is simple enough to represent the look of a heading just apply styles to the dt as you would any other element font-size, font-weight, perhaps an underline, different font-family etc.

Essentially all you want/need to do is provided for by the use of padding and or margins.

Hugo.

Thank you, but how do I add the style in the style sheet for adding margins and padding to the DL? and adding the effect of

to the style? I can't visualize it.

I just need to add the space at the top that the p tag did before.

You could name the dl with an id to ensure rules are specific to that dl list only (in case you have dl elsewhere that doesn't need these styles), so:

dl#info {
  margin:2em 0;
  }
dl#info dt {
  margin-bottom:.6em;
  font-size:1.3em;
  font-weight:bold;
  }
dl#info dd {
  margin-bottom:1em;
  }
dl#info dd p {
  margin:1em .5em;
  }

This is only to demonstrate one way
of writing your rules. The margins 
you need/want you will need to decide on. 
These values give you an idea but are not 
real as such, nor may you need/want them all.

Thanks again, I'll work on it.

How do I get the h3 to reflect in the dt tags. So the h3 is only in the style sheet?
Is that what the:
dl#info dt {
margin-bottom:.6em;
font-size:1.3em;
font-weight:bold;
}

is for instead of a h3 tag?

Hugo, what did I do to change the page? Look: www.patchworkcellars.com

I just fixed the style sheet. All of a sudden the whole page was completely different. Now its back to normal. I know I used a br tag to space the top for now. I'll change it later.

How do I get the h3 to reflect in the dt tags. So the h3 is only in the style sheet?
Is that what the:
dl#info dt {
margin-bottom:.6em;
font-size:1.3em;
font-weight:bold;
}

is for instead of a h3 tag?

Yes as I said earlier the DT replaces the h3 as such.

What link is current looking at the main index shows the errors in the markup that were there before that I mentioned, can you provide an updated link to reflect your current stage of work.

Haven't done that yet.

How do I add the style to the html to replace the h3 tags.Is it something like:

dt#info
What is Patchwork Cellars?
/dt

Remove the h3 tags (they weren't in my original re-working ) the #info (you could think up a better name here if you wanted) goes on the dl tag like so:

<dl id="info">

That is all you have to do in the markup the styles are applied as I wrote them and they target by using descendent selector selection i.e dl#info dt {} means "apply styles to any dt that has a parent or ancestor called #info that belongs to a dl tag" (you could leave off the dl and just have #info)

It would help if you could keep the link and that page current and updated with changes .

Looking at the layout it strikes me that it perhaps might be better styled slightly differently, when you have a moment make a copy of the page and styles and drop these in replacing the current ones and see what you think

#left{
  text-align:center;
  margin-bottom:1em;
  border-bottom:1px solid #999;
  }
#left p{display:inline;}
#left p a{
  padding:0 .5em;
  font-weight:bold;
  font-size:.9em
  }

#right{
  color:#000;
  margin:2em auto 1em;
  width:650px;
  }

The link list should really be a ul list rather than P tags but that can wait till later

I made one small change, but it didn't bold the heading. What did I do wrong?

www.patchworkcellars.com/index.html

You have the ID on the wrong tag You must read carefully what I wrute and make the changes.

I think it will be easier if you just cut and paste this code into your page I have made the changes necessary then we can style from there you will also need to remove these three lines that appear right after the dl tag closes:
p>Cheers - Christian Fox, winemaker/p>
p align="center"> /p>
p align="center"> /p>

What is Patchwork Cellars?

Lastly, the Fox family and friends, our community, worked together to make these wines. Patchwork represents what our family and friends have labored to make like a community quilt. It is still about farming a crop and applying a craft - simple to the roots.

Thank you so much Hugo. Check it now: www.patchworkcellars.com/index.html

One thing that I can't figure out is the last two closing dl tags. If I delete one the whole page changes. Why are there two closing tags?

I'll work on the ul for the nav bar later. I'm starting to see that lists are very useful in css/html page structure.

One thing that I can't figure out is the last two closing dl tags. If I delete one the whole page changes. Why are there two closing tags?

I'll work on the ul for the nav bar later. I'm starting to see that lists are very useful in css/html page structure.

There aren't two closing dl tags, check the code I posted above, one will need to be removed.

You have left the two original dl tags in there so both will need removing. You must cut and paste with care and check your markup carefully

Why do those tags have to be taken out? It seems when I do that the whole page changes. If I don't have two dl tags the page breaks up. I can't see how to change it.

Maybe my eyesight isn't that good.

Here's another page: http://www.patchworkcellars.com/find2.html

I did part with dl and part with br. How do I get the list single spaced with dl?

Davek you must start validating your code, you have errors that it is your job to pick up on it's pointless me telling you have errors all the time.

I would hazard a guess that if you are checking/developing in Firefox first and foremost that you don't have the html-Tidy extension installed, if that's the case then you must download it and make use of it as it flags up markup errors in real time as you view the page in your browser.

If errors like these are caught before posting then we can concentrate on actually helping with the styling

Fix up those errors then we can move foreword and see how things stand.

Hugo.

Will do.

Hugo, I have installed tidy html, but it still doesn't show me the errors you have mentioned. I'm trying very hard to understand this language but it doesn't go as smoothly as you or I would like.

I have tried for the last two hours to format the ul list in this test page:
www.patchworkcellars.com/find2.html . Trying to add a border or something, I haven't got it down yet. Some things work and some don't.

The dl is set at one indentation, is there a way to adjust that? And why are br so bad? They do work when you can't find a better way.

You'll probably scold me for not doing things correctly, but you have been very helpful and I appreciate it very much. I am learning in spite of my shortcomings. Please don't give up on me. I am determine to get it right.

sorry just wrote you a lengthy reply and the forum went and lost it cant re-write it, too tired. please look carefully back at my posts for the correct manner in constructing dl lists The code I wrote for you will guide you. and scan your markup and remove all br tags and any extra tags that dont belong all text description should be in dd tags use margins to control the spacing of any or all of these elements , which I also demonstrated.

Hugo.

With dl tags is there a default margin for dd tag if there is no style to it. Without making at style, what is the indentation of the index page, www.patchworkcellars.com/index.html ?

Do you have a recommendation for css styles in general?
http://www.w3schools.com/css/default.asp seems to be as good as any I've found. Do you know if any others that are fairly easy to understand?

What happens is I think if got the right style syntax in the style sheet, but then I go to the page and I don't see that style I added. I'm close but not close enough. This is where I need to study more.

As a rule of thumb, any tag that has a specific purpose i.e ul,ol,dl,h# have to have some built in default styling otherwise they wouldn't make sense e.g bullets in a ul/ol being indented.

So if you wanted the margin of the dd and paragraph tags to be flush on the left with the dt then you would need to do dl#info dd {margin-left:0;} and then look for the rules that apply margin to the paragraph within the dd and remove it.

Getting used to working with CSS selectors just takes a little bit of time and practise you'll get used to things, but plenty of study is also called for htmldog and yourhtmlsource are good sites, I find w3 schools over simplified and lacking in sufficient detail even at a beginners level.

Hugo.