473,326 Members | 2,175 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,326 software developers and data experts.

Re: DIV Alignment problem

On 10/12/08 07:41 am, Daniel Kaplan wrote:
Am making a picture class/container and running into a small problem. I
can't seem to align the image and/or text in the frame. [...]
Align the text and image with what?
The markup (which is invalid) you provided told me very little,
especially since there was no text in the example. An URL to a test case
would be far more helpful.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)
Oct 12 '08 #1
14 1451
"Jim Moe" <jm***************@sohnen-moe.comwrote in message
news:5O******************************@giganews.com ...
On 10/12/08 07:41 am, Daniel Kaplan wrote:
>Am making a picture class/container and running into a small problem. I
can't seem to align the image and/or text in the frame. [...]
Align the text and image with what?
To the container. I simply would like to be able to put the image in the
container however I like. Maybe at the top, maybe centered, etc. I know I
can position the image in the container in an absolute fashion, so for
individual unique images I can set them (and the container borders) wherever
I wish .

Perhaps my question should have been... Are there "relative" alignment
properties so I can place an image in a container easily and with many
varieties?
Oct 12 '08 #2
On 2008-10-12, Daniel Kaplan <No****@NoSpam.comwrote:
"Jim Moe" <jm***************@sohnen-moe.comwrote in message
news:5O******************************@giganews.com ...
>On 10/12/08 07:41 am, Daniel Kaplan wrote:
>>Am making a picture class/container and running into a small problem. I
can't seem to align the image and/or text in the frame. [...]
Align the text and image with what?

To the container. I simply would like to be able to put the image in the
container however I like. Maybe at the top, maybe centered, etc. I know I
can position the image in the container in an absolute fashion, so for
individual unique images I can set them (and the container borders) wherever
I wish .

Perhaps my question should have been... Are there "relative" alignment
properties so I can place an image in a container easily and with many
varieties?
Yes, but they might not be the varieties you want...

Vertical-align on inline elements is very difficult to understand, does
a lot of weird things, and not very many helpful things. It's not even a
very good way to do <suband <supbecause of the way that vertical
alignment affects line box height.

If you want a box with contents at the top, in the middle, or at the
bottom, you can make the box a table-cell and then use vertical-align on
the table-cell (not on the things inside it). That works in a fairly
intuitive way-- aligns the contents to the top, middle or bottom of the
box.
Oct 12 '08 #3

"Ben C" <sp******@spam.eggswrote in message
news:sl*********************@bowser.marioworld...
Vertical-align on inline elements is very difficult to understand, does
a lot of weird things, and not very many helpful things. It's not even a
very good way to do <suband <supbecause of the way that vertical
alignment affects line box height.

If you want a box with contents at the top, in the middle, or at the
bottom, you can make the box a table-cell and then use vertical-align on
the table-cell (not on the things inside it). That works in a fairly
intuitive way-- aligns the contents to the top, middle or bottom of the
box.

Thanks for the help...eventually I got close enough to what I wanted. Of
course I wanted horizontal centering too. The closest I got was placing
three containers in one centered container. Although they were flush left
to it...they wouldn't center within it.

Am guessing there times when you should use tables?

Thanks again.,,,
Oct 13 '08 #4
On 2008-10-13, Daniel Kaplan <No****@NoSpam.comwrote:
>
"Ben C" <sp******@spam.eggswrote in message
news:sl*********************@bowser.marioworld...
>Vertical-align on inline elements is very difficult to understand, does
a lot of weird things, and not very many helpful things. It's not even a
very good way to do <suband <supbecause of the way that vertical
alignment affects line box height.

If you want a box with contents at the top, in the middle, or at the
bottom, you can make the box a table-cell and then use vertical-align on
the table-cell (not on the things inside it). That works in a fairly
intuitive way-- aligns the contents to the top, middle or bottom of the
box.


Thanks for the help...eventually I got close enough to what I wanted. Of
course I wanted horizontal centering too. The closest I got was placing
three containers in one centered container. Although they were flush left
to it...they wouldn't center within it.

Am guessing there times when you should use tables?
Yes. Use tables for:

1. tables
2. vertical centering of auto height blocks
3. equal-height "columns"
4. centered shrink-to-fit blocks

and probably some other things.

You should use display: table-cell etc. instead of <TABLEif you just
want the layout effects of tables for data that isn't actually a table.
It won't work in IE but I can't cure a rainy day.

Plan B is compromise and stop wanting to centre everything, which it
sounds like you've done.
Oct 13 '08 #5

Ben C wrote:
>
Use tables for:

3. equal-height "columns"
I wouldn't make such a blanket statement. There are multiple ways to
accomplish this without tables.

--
Berg
Oct 13 '08 #6
On 2008-10-13, Bergamot <be******@visi.comwrote:
>
Ben C wrote:
>>
Use tables for:

3. equal-height "columns"

I wouldn't make such a blanket statement.
It wasn't a statement but a suggestion.
There are multiple ways to accomplish this without tables.
Yes and though they are ingenious I don't much like them.

There are lots of ways to do anything-- you can do vertical centering of
blocks without tables too (big line-heights and inline-blocks).

Tables are a useful part of CSS and the obvious and intuitive way to do
equal height columns.
Oct 13 '08 #7
Ben C wrote:
Tables are a useful part of CSS
Tables are not part of CSS. They are part of HTML.
Oct 13 '08 #8
On 2008-10-13, Scott Bryce <sb****@scottbryce.comwrote:
Ben C wrote:
>Tables are a useful part of CSS

Tables are not part of CSS. They are part of HTML.
They're part of CSS too. See http://www.w3.org/TR/CSS21/tables.html.

And there's no shame whatsoever in using CSS tables for layout.
Oct 14 '08 #9
In article <sl*********************@bowser.marioworld>,
Ben C <sp******@spam.eggswrote:
On 2008-10-13, Scott Bryce <sb****@scottbryce.comwrote:
Ben C wrote:
Tables are a useful part of CSS
Tables are not part of CSS. They are part of HTML.

They're part of CSS too. See http://www.w3.org/TR/CSS21/tables.html.

And there's no shame whatsoever in using CSS tables for layout.
And when the browsers that do not support these are just a memory, we
can feel relieved that there will no longer be a need for people to mark
up with HTML tables "meaninglessly". Until then, perhaps a little
tolerance is required.

--
dorayme
Oct 14 '08 #10
Ben C wrote:
On 2008-10-13, Scott Bryce <sb****@scottbryce.comwrote:
>Ben C wrote:
>>Tables are a useful part of CSS
Tables are not part of CSS. They are part of HTML.

They're part of CSS too. See http://www.w3.org/TR/CSS21/tables.html.

And there's no shame whatsoever in using CSS tables for layout.
The URL you gives shows how to apply CSS to HTML tables, not how they
are created using CSS.
Oct 14 '08 #11
On 2008-10-14, Scott Bryce <sb****@scottbryce.comwrote:
Ben C wrote:
>On 2008-10-13, Scott Bryce <sb****@scottbryce.comwrote:
>>Ben C wrote:
Tables are a useful part of CSS
Tables are not part of CSS. They are part of HTML.

They're part of CSS too. See http://www.w3.org/TR/CSS21/tables.html.

And there's no shame whatsoever in using CSS tables for layout.

The URL you gives shows how to apply CSS to HTML tables, not how they
are created using CSS.
You can apply that CSS to anything you want. Typically a UA's default
stylesheet contains rules like this:

table { display: table }
tr { display: table-row }
td { display: table-cell }

which is how it gets applied to HTML. But you can just as well use:

div { display: table-row }
span { display: table-cell }

etc. if you want.
Oct 14 '08 #12
Ben C wrote:
You can apply that CSS to anything you want. Typically a UA's default
stylesheet contains rules like this:
Well, yes, but my point is that a table is HTML, you apply CSS to the
table. That does not make then CSS tables. That makes them HTML tables
with styles applied to them using CSS.

I think at this point we are arguing semantics.
Oct 14 '08 #13

Ben C wrote:
>
You can apply that CSS to anything you want. Typically a UA's default
stylesheet contains rules like this:

table { display: table }
tr { display: table-row }
td { display: table-cell }
Except for IE, of course, which doesn't support CSS tables at all. Most
web authors aren't willing to let the IE chips fall where they may and I
can't say I blame them. That means CSS tables are not really a viable
solution, at least not for commercial sites.

--
Berg
Oct 14 '08 #14
On 2008-10-14, Bergamot <be******@visi.comwrote:
>
Ben C wrote:
>>
You can apply that CSS to anything you want. Typically a UA's default
stylesheet contains rules like this:

table { display: table }
tr { display: table-row }
td { display: table-cell }

Except for IE, of course, which doesn't support CSS tables at all. Most
web authors aren't willing to let the IE chips fall where they may and I
can't say I blame them. That means CSS tables are not really a viable
solution, at least not for commercial sites.
Indeed, which is why tolerance is recommended.

IE8 may support display: table-cell since they claim it passes Acid2,
and you need display: table-cell for Acid2.
Oct 14 '08 #15

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

67
by: S.Tobias | last post by:
I would like to check if I understand the following excerpt correctly: 6.2.5#26 (Types): All pointers to structure types shall have the same representation and alignment requirements as each...
13
by: sachin_mzn | last post by:
Hi, What is the concept of memory alignment? Is memory alignment differs, If a data type is local to a function or if it is a member of structure or union? How 32 to 64 bit processor afftects the...
5
by: Hendrik Schober | last post by:
Hi, we just run into the problem, that "default" alignment in the project properies dialog seem to be different. We have a project that's a DLL, which is linked with a couple of LIBs. All are...
8
by: Cardman | last post by:
I am hopeful that someone can quickly solve my image alignment issue when things are just not going right and where my attempts to solve this alignment issue have all failed. First of all take a...
3
by: Bill Pursell | last post by:
I have a program that does most of its work traversing a bunch of lists. The lists contain a void *, and I spent some time today replacing the void *'s with a copy of the data at the end of the...
12
by: Yevgen Muntyan | last post by:
Hey, Consider the following code: #include <stdlib.h> #define MAGIC_NUMBER 64 void *my_malloc (size_t n) { char *result = malloc (n + MAGIC_NUMBER);
0
by: VorTechS | last post by:
I'm having a problem with an inherited label, applying text rotation to aligned text. If text rotation is applied to the aligned text, the alignment goes 'nuts'. I can find no logic to what is...
10
by: haomiao | last post by:
I want to implement a common list that can cantain any type of data, so I declare the list as (briefly) --------------------------------------- struct list { int data_size; int node_num;...
4
by: myfavdepo | last post by:
Hi friends, i am having some trouble in my prog. with struct member alignment. I have two different static libraries that i use, each with "struct member alignment" set to 8 bytes. In my...
8
by: Stephen Horne | last post by:
I understand that the next C++ standard will have features to handle the alignment of data types. This is good, but a bit late for me! I've been using some template trickery to handle alignment...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.