How do I line up these three rows of objects?

[midori0x]

http://www.cpart.co.cc/calendars/index.html

Basicly, I have a series of images and text that are separated by a
graphic divider that's part of the design. I've been doing all kinds
of stuff with floats and margins, but I just can't figure out how I
should go about this. I'm trying to go container-less for this part
because after reading an article I realized I could try and be a
little more semantic, a div for each three layer part seems kind of
crazy. As always, I'd appreciate and am dying for any asisstance.

 

[dorayme]

http://www.cpart.co.cc/calendars/index.html

Basicly, I have a series of images and text that are separated by a
graphic divider that's part of the design. I've been doing all kinds
of stuff with floats and margins, but I just can't figure out how I
should go about this. I'm trying to go container-less for this part
because after reading an article I realized I could try and be a
little more semantic, a div for each three layer part seems kind of
crazy. As always, I'd appreciate and am dying for any asisstance.

First job, validate the HTML.

You need to set your character encoding, your page is showing white
diamond shaped backed black question marks on my browsers... More info
when you take a look at

<http://validator.w3.org/>

I suspect you also need a plain text editor, set plainly, to write your
source code. Don't use curly quotes and funny dashes, uses simple plain
ones. Korpela will explain all this to you if he is in a good mood.

Anyway, here is a float layout that you could adapt to your needs. Just
be careful and generous in styling the dimensions:

<http://tinyurl.com/2jcs5r>

Get the feeling you need to understand centring better too.

I wrote a little piece on this once, but there are better (but, hey, why
should I find them now?):

<http://netweaver.com.au/centring/>

 

[midori0x]

First job, validate the HTML.

You need to set your character encoding, your page is showing white
diamond shaped backed black question marks on my browsers... More info
when you take a look at

<http://validator.w3.org/>

I suspect you also need a plain text editor, set plainly, to write your
source code. Don't use curly quotes and funny dashes, uses simple plain
ones. Korpela will explain all this to you if he is in a good mood.

Anyway, here is a float layout that you could adapt to your needs. Just
be careful and generous in styling the dimensions:

<http://tinyurl.com/2jcs5r>

Get the feeling you need to understand centring better too.

I wrote a little piece on this once, but there are better (but, hey, why
should I find them now?):

<http://netweaver.com.au/centring/>

Thanks alot for links, I was indeed having another issue with
centering objects too. I'm coding the css and html in notepad ++
and I had the curly brackets in their because the person I'm making
the site for insisted on them to emphasize "inches" for the
product descriptions. What encoding type would you recommend, UTF-8 is
the one I see often and when I used it I indeed did
get the boxes and question marks.

 

[dorayme]

....

... I'm coding the css and html in notepad ++
and I had the curly brackets in their because the person I'm making
the site for insisted on them to emphasize "inches" for the
product descriptions. What encoding type would you recommend, UTF-8 is
the one I see often and when I used it I indeed did
get the boxes and question marks.

How your server is set up is an important factor in this. To learn about
this you need to follow up, for example, the link I gave you before on
validation. If you have no control of your server, you should ask server
admin to set things up to deliver UTF-8 (if that is what you want, it
sounds reasonable to me). At least stick this in the head of your docs,
(Use 4.01 Strict Doctype declaration at the top of your HTML):

<meta http-equiv="content-type" content="text/html; charset=utf-8">

as well.

The other factor is how you have your text editor set up. I know nothing
about Notepad except that it is something plainish and wholesome (I hear
my editors talking to each other after work and they seem to like
Notebook). In my editor I have set it to save docs in UTF-8.

Perhaps you might also read about referencing characters (including
curly quotes by character encoding names) like &ldquo; and &rdquo:

<http://en.wikipedia.org/wiki/Quotation_mark_glyphs>

Also scan archives of this group.

You could profit from reading my favourite Finnish writer:

<http://www.cs.tut.fi/~jkorpela/chars.html>

 

[midori0x]

How your server is set up is an important factor in this. To learn about
this you need to follow up, for example, the link I gave you before on
validation. If you have no control of your server, you should ask server
admin to set things up to deliver UTF-8 (if that is what you want, it
sounds reasonable to me). At least stick this in the head of your docs,
(Use 4.01 Strict Doctype declaration at the top of your HTML):

<meta http-equiv="content-type" content="text/html; charset=utf-8">

as well.

The other factor is how you have your text editor set up. I know nothing
about Notepad except that it is something plainish and wholesome (I hear
my editors talking to each other after work and they seem to like
Notebook). In my editor I have set it to save docs in UTF-8.

Perhaps you might also read about referencing characters (including
curly quotes by character encoding names) like &ldquo; and &rdquo:

<http://en.wikipedia.org/wiki/Quotation_mark_glyphs>

Also scan archives of this group.

You could profit from reading my favourite Finnish writer:

<http://www.cs.tut.fi/~jkorpela/chars.html>

I just went ahead and fixed all the errors, the validator is now
saying everything is good for the most part, but what about the style
sheet?
I should use this type of bracket [] instead of {} with css documents?

 

[rf]

I just went ahead and fixed all the errors, the validator is now
saying everything is good for the most part, but what about the style
sheet?

Use the CSS validator.

I should use this type of bracket [] instead of {} with css documents?

Er, what possibly gave you idea that you should, or even could?

Quite seriously, if somebody told you you could use [ and ] then don't
believe any more they say. If you read it in a book then throw the book away

 

[midori0x]

I just went ahead and fixed all the errors, the validator is now
saying everything is good for the most part, but what about the style
sheet?

Use the CSS validator.

I should use this type of bracket [] instead of {} with css documents?

Er, what possibly gave you idea that you should, or even could?

Quite seriously, if somebody told you you could use [ and ] then don't
believe any more they say. If you read it in a book then throw the book away

Yeah, I read a page about using curly braces for css, but that was
referring to inline styles
that might cause problems for some browsers, my bad.

 

[dorayme]

....


I just went ahead and fixed all the errors, the validator is now
saying everything is good for the most part, but what about the style
sheet?[/QUOTE]

What about the style sheet? We should really be talking about your HTML
first. Did you look at the url I gave you that floats and centres blocks
of pics with their captions?

I should use this type of bracket [] instead of {} with css documents?

Why would you do that? Did you write the sheet for the above URL? What
even made you suppose you should use curly brackets in the first place?
I mean, it is not exactly some obvious choice! And why were you not more
surprised that the validator gave you a sort of thumbs up with the curly
ones? <g>

Yes, the curly ones are correct!

But you are puzzling me. My minders have communicated some recent
intelligence about a strange spaceship that has left Alpha_657 (a
jokster planet that plays the equivalent of April Fools jokes on
Martians - but in November.)

 

[rf]

http://www.cpart.co.cc/calendars/index.html

Basicly, I have a series of images and text that are separated by a
graphic divider that's part of the design. I've been doing all kinds
of stuff with floats and margins, but I just can't figure out how I
should go about this. I'm trying to go container-less for this part
because after reading an article I realized I could try and be a
little more semantic, a div for each three layer part seems kind of
crazy. As always, I'd appreciate and am dying for any asisstance.

You have not said what you want this to look like. At the moment I see a
bunch of calendars and a bunch of yellow things, with no apparent logic to
their placement. Are those five blocks of text supposed to relate to the
five rectangular images? And the yellow things. Where to you want them to
go?

What are you trying to do? What to you *want* it to look like? You could
upload a jpeg of your hand drawn sketch, for example.

And what does "container-less" mean? What is a "layer part"? How do you want
to be more "semantic"?

 

[Sitedude]

http://www.cpart.co.cc/calendars/index.html

Basicly, I have a series of images and text that are separated by a
graphic divider that's part of the design. I've been doing all kinds
of stuff with floats and margins, but I just can't figure out how I
should go about this. I'm trying to go container-less for this part
because after reading an article I realized I could try and be a
little more semantic, a div for each three layer part seems kind of
crazy. As always, I'd appreciate and am dying for any asisstance.

a quick note on using special characters in html, it is best to use
the decimal, octal, or the html codes for these. For example "
will print to the screen the double qoute character. You can find
these at http://www.asciitable.com/

 

[midori0x]

What about the style sheet? We should really be talking about your HTML
first. Did you look at the url I gave you that floats and centres blocks
of pics with their captions?

I was so busy correcting all the errors and warnings I'm only just now
getting
to the fun part. I'm reading the centering article now.

I should use this type of bracket [] instead of {} with css documents?

Why would you do that? Did you write the sheet for the above URL? What
even made you suppose you should use curly brackets in the first place?
I mean, it is not exactly some obvious choice! And why were you not more
surprised that the validator gave you a sort of thumbs up with the curly
ones? <g>

Yes, the curly ones are correct!

My fault for misreading you earlier:

>Don't use curly quotes and funny dashes, uses simple plain
ones. Korpela will explain all this to you if he is in a good mood.

I don't know why, but I thought you were talking about the curly
brackets in the css code, sorry about the confusion.

But you are puzzling me. My minders have communicated some recent
intelligence about a strange spaceship that has left Alpha_657 (a
jokster planet that plays the equivalent of April Fools jokes on
Martians - but in November.)

No comment...

 

[midori0x]

a quick note on using special characters in html, it is best to use
the decimal, octal, or the html codes for these. For example "
will print to the screen the double qoute character. You can find
these athttp://www.asciitable.com/

Thanks, bookmarked!

 

[dorayme]

What about the style sheet? We should really be talking about your HTML
first. Did you look at the url I gave you that floats and centres blocks
of pics with their captions?

I was so busy correcting all the errors and warnings I'm only just now
getting
to the fun part. I'm reading the centering article now.
[/QUOTE]

I think I saw what you wanted, at first I was as puzzled as rf.

See my previous comments on a possible solution, ask if they puzzle you.

I should use this type of bracket [] instead of {} with css documents?

Why would you do that? Did you write the sheet for the above URL? What
even made you suppose you should use curly brackets in the first place?
I mean, it is not exactly some obvious choice! And why were you not more
surprised that the validator gave you a sort of thumbs up with the curly
ones? <g>

Yes, the curly ones are correct!

My fault for misreading you earlier:

Don't use curly quotes and funny dashes, uses simple plain
ones.

Ah! Now I see. No, I was just urging my fondness for plain typewritery
things rather than fancy...

(btw, well done getting so many errors out before...)

 

[Chris F.A. Johnson]

a quick note on using special characters in html, it is best to use
the decimal, octal, or the html codes for these. For example "
will print to the screen the double qoute character. You can find
these at http://www.asciitable.com/

There's no point to doing that for ASCII characters; they are the
same in all codings used on the Web. For typewriter-style double
quotes, just use ".

 

[Jukka K. Korpela]

On 2008-11-02, Sitedude wrote: - -

There's no point to doing that for ASCII characters; they are the
same in all codings used on the Web.

Well, maybe they are (though there is no law against using, say, EBCDIC on
the Web), but the point is really that any encoding used has codes for all
printable ASCII characters, so they can be entered as such.

Sitedude's pointless advice was also incorrect: octal codes cannot be used
in character references in HTML.

For typewriter-style double
quotes, just use ".

They can indeed be typed as such, in any context except within an attribute
value written between such quotes. On the other hand, these days there's not
much need for using typewriter-style quotes on the Web, except when
discussing computer languages that contain them as defined part of the
syntax.

 

[Bergamot]

I should use this type of bracket [] instead of {} with css documents?

I read a page about using curly braces for css, but that was
referring to inline styles

Seems you have misunderstood more than you thought - curly braces are
*not* used for inline styles. An inline style uses the HTML style
attribute, e.g.
<div style="clear:both">

Inline styles should be used sparingly, if at all, because they make
both debugging rendering issues and ongoing maintenance a PITA.

Curly braces are used in a stylesheet, which may be in an external CSS
file or embedded in the document <head>.

 

[midori0x]

I was so busy correcting all the errors and warnings I'm only just now
getting
to the fun part. I'm reading the centering article now.

I think I saw what you wanted, at first I was as puzzled as rf.

See my previous comments on a possible solution, ask if they puzzle you.

I should use this type of bracket [] instead of {} with css documents?
Why would you do that? Did you write the sheet for the above URL? What
even made you suppose you should use curly brackets in the first place?
I mean, it is not exactly some obvious choice! And why were you not more
surprised that the validator gave you a sort of thumbs up with the curly
ones? <g>
Yes, the curly ones are correct!

My fault for misreading you earlier:

Don't use curly quotes and funny dashes, uses simple plain
ones.

Ah! Now I see. No, I was just urging my fondness for plain typewritery
things rather than fancy...

(btw, well done getting so many errors out before...)

Heh, thanks! I learned a whole lot fixing them and even simplified
some of my code on another page based on what I learned.


Bergamot
View profile
(e-mail address removed) wrote: >> > I should use this type of bracket []
instead of {} with css documents? > I read a page about using curly
braces for css, but that was > referring to inline styles Seems you
have misunderstood more than you thought - curly braces are *not* used
for inline styles. An inline style uses the HTML style attribute, e.g.
<div style="clear:both"> Inline styles should be used sparingly, if at
all, because they make both debugging rendering issues and ongoing
maintenance a PITA. Curly braces are used in a stylesheet, which may
be in an external CSS file or embedded in the document <head>. -- Berg
More options Nov 2, 10:00 am
Newsgroups: alt.html
From: Bergamot <[email protected]>
Date: Sun, 02 Nov 2008 12:00:58 -0600
Local: Sun, Nov 2 2008 10:00 am
Subject: Re: How do I line up these three rows of objects?
Reply | Reply to author | Forward | Print | Individual message | Show
original | Report this message | Find messages by this author

I should use this type of bracket [] instead of {} with css documents?

I read a page about using curly braces for css, but that was
referring to inline styles

Seems you have misunderstood more than you thought - curly braces are
*not* used for inline styles. An inline style uses the HTML style
attribute, e.g.
<div style="clear:both">

Yes, the article I read was *warning* people about using curly
brackets
for inline styles. I was never asking if I could use curly brackets
inline,
I misread an earlier post and thought something was wrong with using
curly brackets period for css, that's why that discussion came up.

Inline styles should be used sparingly, if at all, because they make
both debugging rendering issues and ongoing maintenance a PITA.

Indeed, I have all my css in an external file.

 

[Bergamot]

In an older CSS specification somewhere you could use selectors in the
style attribute

I couldn't find any reference to such a thing at W3C, just a mention
that the syntax in the style attribute is dependent on the default
stylesheet language, which doesn't necessarily have to be CSS. That's
all there really is, though.

 

[midori0x]

You have not said what you want this to look like. At the moment I see a
bunch of calendars and a bunch of yellow things, with no apparent logic to
their placement. Are those five blocks of text supposed to relate to the
five rectangular images? And the yellow things. Where to you want them to
go?

What are you trying to do? What to you *want* it to look like? You could
upload a jpeg of your hand drawn sketch, for example.

And what does "container-less" mean? What is a "layer part"? How do you want
to be more "semantic"?

I should have just said less reliant on divs. I guess I got a little
carried away
with the general idea of tutorials I've read that suggest using more
css based
positioning to avoid "divitus" but dorayme's method is working out
nice for me.

So does anyone have any ideas on what could be forcing the top menu
and
the calendar containing divs towards the bottom out of their
respective parent
divs? Everything is fine in IE, but in FF and Opera too I recall, I
have content
spilling out of the div.

Get the feeling you need to understand centring better too.
I wrote a little piece on this once, but there are better (but, hey, why
should I find them now?):
http://netweaver.com.au/centring/>

I've been reading the tutorial and looking at the sample page code and
can't figure
out for the life of me how to get the content centered properly. I
used fixed div width
with margin auto for now, when I try to set the holder div width to
percent the images
start to break way too soon. It's like there's some margining or
padding from the right
I can't see. Sorry if this sounds crazy, it's really hard for me to
explain.

X X X | | A diagram of what it does when I use
percent, the gap in between
X the two lines represents the invisble
space that's forcing my line of
divs to break far too soon when I resize
the window for lower resolution
testing.

 

[dorayme]

dorayme's method is working out
nice for me.

OK, please show the url of your efforts using this and we will go on
from there to solve your other problems.

So does anyone have any ideas on what could be forcing the top menu
and
the calendar containing divs towards the bottom out of their
respective parent
divs? Everything is fine in IE, but in FF and Opera too I recall, I
have content
spilling out of the div.

This sounds to me like a case of floats spilling out of their parent
container. in which case, the following might help you:

<http://netweaver.com.au/floatHouse/>

I've been reading the tutorial and looking at the sample page code and
can't figure

You have been looking at *which* sample page code? in this business, you
need to be pretty specific.

out for the life of me how to get the content centered properly. I
used fixed div width
with margin auto for now, when I try to set the holder div width to
percent the images
start to break way too soon. It's like there's some margining or
padding from the right
I can't see. Sorry if this sounds crazy, it's really hard for me to
explain.

Make up an HTML doc (a URL to us if you want too) with the essential
things to see what is happening.

X X X | | A diagram of what it does when I use
percent, the gap in between
X the two lines represents the invisble
space that's forcing my line of
divs to break far too soon when I resize
the window for lower resolution
testing.

Diagrams in newsgroup posts do not always come out how you expect! The
expert diagrammer around here is Jonathan Little. Ask him for a tute on
diagramming for ngs... <g>