OK, so I know that there has been a lot of discussion on this topic,
but none of the answers have been satisfactory. Therefore there
seems to be only one thing to do: issue a challenge to all of the CSS
gurus of the world to prove that CSS really can do what it claims to
do.
The challenge seems simple as first blush. We take a simple case of
table-based layout:
<table align="center" cellpadding="4" >
<td bgcolor="yellow ">
Some stuff
</td>
</table>
This simply prints "Some stuff" centered, with a yellow background.
All we want to do is recreate this example using CSS.
No problem, right?
Just to be clear, there are a few requirements:
* The text area (and its background) must automatically resize to fit
the size of the text. In other words, no div's of predefined width.
* It must be possible to put this inside another div and have the text
centered within the space of the parent div. Any surrounding content
should flow in a normal and predictable fashion, just like the
original table-based layout. In other words, no floating divs.
* The background must extend a few pixels beyond the text. In other
words no embedding a span inside a div.
* The contained text ("Some stuff") might be multiple lines or contain
additional markup. The solution must be able to accommodate this.
Like I said, a span inside a div ain't gonna cut it.
* The solution must work on all mainstream modern browsers. At a
minimum this means FireFox 1.0+, Opera 8+ and Safari. Oh and that
other one... what was it... oh yeah, IE 6.0+ (5.0+ would be nice, I'd
live with 6.0). There go some more possible solutions, like display:
table-cell.
* The solution should validate to W3C standard xhtml and CSS. Note
that I said "should" and not "must." I'm purist until purity fails to
get the job done.
So, are you up to the challenge?
I'm pretty close to convinced that it can't be done. Someone please
prove me wrong. 2 4699
On 17 Apr 2007 20:50:26 -0700
donovan <dp*******@gmai l.comwrote:
[....]
Therefore there
seems to be only one thing to do: issue a challenge to all of the
CSS gurus of the world to prove that CSS really can do what it
claims to do.
The challenge seems simple as first blush.
[....]
>
So, are you up to the challenge?
Hmmmmm.... is there a prize for this amazing test of skill?
Andrew
--
Andrew's Corner http://people.aapt.net.au/~adjlstrong/
On 2007-04-18, donovan <dp*******@gmai l.comwrote:
OK, so I know that there has been a lot of discussion on this topic,
but none of the answers have been satisfactory. Therefore there
seems to be only one thing to do: issue a challenge to all of the CSS
gurus of the world to prove that CSS really can do what it claims to
do.
The challenge seems simple as first blush. We take a simple case of
table-based layout:
<table align="center" cellpadding="4" > <td bgcolor="yellow ">
Some stuff </td> </table>
This simply prints "Some stuff" centered, with a yellow background.
All we want to do is recreate this example using CSS.
No problem, right?
Just to be clear, there are a few requirements:
* The text area (and its background) must automatically resize to fit
the size of the text. In other words, no div's of predefined width.
* It must be possible to put this inside another div and have the text
centered within the space of the parent div. Any surrounding content
should flow in a normal and predictable fashion, just like the
original table-based layout. In other words, no floating divs.
* The background must extend a few pixels beyond the text. In other
words no embedding a span inside a div.
* The contained text ("Some stuff") might be multiple lines or contain
additional markup. The solution must be able to accommodate this.
Like I said, a span inside a div ain't gonna cut it.
* The solution must work on all mainstream modern browsers. At a
minimum this means FireFox 1.0+, Opera 8+ and Safari. Oh and that
other one... what was it... oh yeah, IE 6.0+ (5.0+ would be nice, I'd
live with 6.0). There go some more possible solutions, like display:
table-cell.
* The solution should validate to W3C standard xhtml and CSS. Note
that I said "should" and not "must." I'm purist until purity fails to
get the job done.
So, are you up to the challenge?
I'm pretty close to convinced that it can't be done. Someone please
prove me wrong.
Can't be done in a way that works in all those browsers you mentioned.
In an ideal world, the preferred solution would be display: inline-block
with text-align: center on the container. This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics |
by: Frank Buss |
last post by:
I've setup a challenge, mainly for C++, Java and Lisp, but every other
language is welcome:
http://www.frank-buss.de/challenge/index.html
There is nothing to win, but I hope there will be some interesting
solutions at the end, so the win are the results :-)
--
Frank Buß, fb@frank-buss.de
|
by: Chris Beall |
last post by:
Objective: Using an HTML list, create a horizontal nav menu with these
characteristics:
- All menu items have the same width at all times.
- When the window width is reduced, the menu items stack, rather than
creating a horizontal scroll bar.
- The menu cluster is always centered on the window.
See
http://pages.prodigy.net/chris_beall/Demo/centered%20horizontal%20list.html
|
by: LazyLarry |
last post by:
Hi there, I need serious help. Ive got a project that needs some unique select box function.
OK THERE IS A LOT OF Code but If you Crack it youll get the credit.
just mail me at info@malachite.de with your Info you wold like posted
My issue:
1. I've got two select boxes, of wich one gets filled with MYSQL Data.. Works great...
|
by: joeriatscripts |
last post by:
Hey there,
Everytime I am trying to create something in CSS, it gives me a headache. This time no different, as FF and IE seem to have their own rules!
Anyway, before I continue, have a look at the following page:
www.lamberang.info/test/final_layout.html
I am trying to create a flexible page layout, where as the screen is larger, I can resize (not important I how do this right now) the outer div (container) and all boxes will resize...
|
by: orbitrobert |
last post by:
hi there,
i'm having a difficult time inserting a scrolling div into a table. i'm a graphic designer and want to use the scrolling div on the portfolio page of my site.
i find that everything i've tried breaks up the table?! can anyone help! i'm starting to lose my marbles.
the scrolling div needs to go into the large white area (to the right of the nav bar).
here's the code.
| |
by: yangtono |
last post by:
Hi,
I am creating a table to list some data. The table is using a sorting and highlight function that I found from the net.
I can't attach image here, basically html will wrap the heading, therefore I notice the second line of the header is left align instead of centering. I believe it's because of the sort.htc script that will output an arrow when user click on the header to sort.
The code is as below:
<TABLE width="100%">
|
by: gaijinco |
last post by:
I was a hobbist web coder for years but I had to sidestep for a while.
Now I'm trying to return to it and I'm trying to clarify how am I
supposed to do somethings with CSS v.s. HTML and I'm specially having
difficulties with center alignment of elements like images and tables.
How is the "right" way to do it? (books that I have checked seemed to
dodge the issue)
I also have a doubt. html-atributes width and height are preferred
over...
|
by: Stevo |
last post by:
I've found that for IE6+, if you add the property text-align:center to a
DIV, then *anything* inside it gets centered. That can be a table, an
object/embed, another DIV, an image, or some text.
Firefox and Safari on the other hand don't treat text-align in that way.
In my tests on those browsers, they only centers images and text. Any
DIVs, object/embeds or tables remain default unaligned and generally
appear on the left.
Considering...
|
by: Bob Altman |
last post by:
Hi all,
This has got to be a dumb question, but... What is the CSS property that I
would use to center a table on the web page?
If I set the table's Align property in the VS 2008 property window it
inserts align="center" into the <tabletag, and I get a validation warning
that attribute 'align' is considered outdated. Ok, so I probably need to
use a CSS style to do the same thing. But I've dug through all of the
categories in the...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it.
First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed.
This is as boiled down as I can make it.
Here is my compilation command:
g++-12 -std=c++20 -Wnarrowing bit_field.cpp
Here is the code in...
| |
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth.
The Art of Business Website Design
Your website is...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own....
Now, this would greatly impact the work of software developers. The idea...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules.
He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms.
Adolph will...
|
by: conductexam |
last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one.
At the time of converting from word file to html my equations which are in the word document file was convert into image.
Globals.ThisAddIn.Application.ActiveDocument.Select();...
|
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
| |
by: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...
| |