hi there,
I used css for a page, it worked but only in IE not in firefox.
What DOCTYPE whould I use for firefox.
the external stylesheet contains the following:
body {
background-color: AEB4C0;
border-width:thin;
text-align:left;
}
#container {
margin-left: 0px;
margin-top:30px;
text-align:center;
width: 95%;
}
#work{
height:400 px
}
..overlap {
float:right;
width: 450px;
height: 350px;
background-image:url(../images/background2.gif);
}
..sw {
position: relative;
top: -315; left: 0; z-index: 2;
}
..center {
margin-top: 37.5px;
margin-left:0px;
text-align:center;
}
..box2 {
float: right;
width: 450 px;
height: 170 px;
background-image:url(../images/background3.gif);
background-repeat:no-repeat;
text-align:center;
margin-left:0px;
margin-top:0px;
margin-right:0 px;
margin-bottom:10px;
}
..box {
display:inline;
width: 390 px;
height: 170 px;
background-image:url(../images/background.gif);
background-repeat:no-repeat;
text-align:center;
margin-left:0px;
margin-top:0px;
margin-right:0 px;
margin-bottom:10px;
}
..box, p {
padding:10px;
text-align:justify;
}
..send {
position:relative;
top:15px;
left:7px;
display:inline;
Thanks 23 2720
dangerd schrieb:
I used css for a page, it worked but only in IE not in firefox.
Validate your CSS!
--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)
On 26 Mar, 11:16, Johannes Koch <k...@w3development.dewrote:
dangerd schrieb:
I used css for a page, it worked but only in IE not in firefox.
Validate your CSS!
--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)
Thanks for your reply Johannes, can you explain what you mean by
'validate your css'.
thanks
dangerd schrieb:
Thanks for your reply Johannes, can you explain what you mean by
'validate your css'.
Use the W3C's validation tool for CSS
(<http://jigsaw.w3.org/css-validator/>) to find errors in your code.
Errors in code are one of the main reasons why code is not rendered
similarly in browsers.
--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)
On 26 Mar, 11:29, "dangerd" <duncanell...@breathe.comwrote:
I used css for a page, it worked but only in IE not in firefox.
IE silently corrects errors (HTML and CSS) that better browsers
correctly reject. Fix these errors first.
What DOCTYPE whould I use for firefox.
You don't, you use a doctype for web authoring in general. Start to
think about "coding for a particular browser" and you're already lost.
So use the right doctype declaration, but do it because it's the right
one, not just because FF wants you to.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
TR/html4/strict.dtd" >
Also you'll get better results by posting URLs, not snippets.
On Mar 26, 2:47 pm, "Andy Dingley" <ding...@codesmiths.comwrote:
On 26 Mar, 11:29, "dangerd" <duncanell...@breathe.comwrote:
I used css for a page, it worked but only in IE not in firefox.
IE silently corrects errors (HTML and CSS) that better browsers
correctly reject. Fix these errors first.
What DOCTYPE whould I use for firefox.
You don't, you use a doctype for web authoring in general. Start to
think about "coding for a particular browser" and you're already lost.
So use the right doctype declaration, but do it because it's the right
one, not just because FF wants you to.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
TR/html4/strict.dtd" >
Also you'll get better results by posting URLs, not snippets.
thanks for ur input, much appreciated. I could not post URL for
security reasons but I take your point.
"dangerd" <du**********@breathe.comwrites:
On Mar 26, 2:47 pm, "Andy Dingley" <ding...@codesmiths.comwrote:
>> Also you'll get better results by posting URLs, not snippets.
thanks for ur input, much appreciated. I could not post URL for
security reasons but I take your point.
Security might prevent you from pointing to the actual page you're working
on. But *nothing* prevents you from creating a publicly-visible page with
the minimum code necessary to illustrate the problem you're having, and
posting the URL for that page.
Creating such a "problem page" is a useful debugging technique in any case,
even if it's for your own use only. In my experience, narrowing down a
problem so as to recreate it often leads to the solution. It's easy to lose
the forest in the trees, and creating the "problem page" helps bring the
problem into focus.
sherm--
--
Web Hosting by West Virginians, for West Virginians: http://wv-www.net
Cocoa programming in Perl: http://camelbones.sourceforge.net
On Mar 26, 8:48 pm, Sherm Pendley <spamt...@dot-app.orgwrote:
"dangerd" <duncanell...@breathe.comwrites:
On Mar 26, 2:47 pm, "Andy Dingley" <ding...@codesmiths.comwrote:
Also you'll get better results by posting URLs, not snippets.
thanks for ur input, much appreciated. I could not post URL for
security reasons but I take your point.
Security might prevent you from pointing to the actual page you're working
on. But *nothing* prevents you from creating a publicly-visible page with
the minimum code necessary to illustrate the problem you're having, and
posting the URL for that page.
Creating such a "problem page" is a useful debugging technique in any case,
even if it's for your own use only. In my experience, narrowing down a
problem so as to recreate it often leads to the solution. It's easy to lose
the forest in the trees, and creating the "problem page" helps bring the
problem into focus.
sherm--
--
Web Hosting by West Virginians, for West Virginians:http://wv-www.net
Cocoa programming in Perl:http://camelbones.sourceforge.net
Ok guys,
my eyes are bloodshot and I am slowly rendering myself bold, there is
the URL: http://multidome.co.uk/test/gallery.php
Does anybody know why this works with IE but not with Firefox.
Incidently the boxes align correctly on Firefox when the width of the
window is narrowed.
I would really appreciate if someone cracks this.
Duncs
In article
<11**********************@y80g2000hsf.googlegroups .com>,
"dangerd" <du**********@breathe.comwrote:
On Mar 26, 8:48 pm, Sherm Pendley <spamt...@dot-app.orgwrote:
"dangerd" <duncanell...@breathe.comwrites:
On Mar 26, 2:47 pm, "Andy Dingley" <ding...@codesmiths.comwrote:
>Also you'll get better results by posting URLs, not snippets.
Ok guys,
my eyes are bloodshot and I am slowly rendering myself bold, there is
the URL:
http://multidome.co.uk/test/gallery.php
Does anybody know why this works with IE but not with Firefox.
Incidently the boxes align correctly on Firefox when the width of the
window is narrowed.
I would really appreciate if someone cracks this.
Perhaps you could look the 13 errors showing at:
< http://validator.w3.org/check?verbos...%2F%2Fmultidom
e.co.uk%2Ftest%2Fgallery.php>
for the html.
BTW, when the width of the window is narrowed in FF, all hell
breaks loose.
Why have you got:
<body>
</body>
</html>
immediately after the head element ends?
Why are your eyes so bloodshot, you should know by now how to
live a good, clean, wholesome life.
--
dorayme
dangerd wrote:
> http://multidome.co.uk/test/gallery.php
Does anybody know why this works with IE but not with Firefox.
It will never "work" as long as you set the dimensions of text elements
in px units. All it takes is for the visitor to use a different font
than you to make it fall apart. A larger font size makes matters worse.
When an explicit height is set, IE6 erroneously treats it as min-height
and expands the element to fit whatever text there is. Other browsers,
including IE7 in standards mode, limit the height as you set it so the
contents overflow. Your DOCTYPE is triggering quirks mode, though, so
IE7 does the same bad things IE6 does. http://www.hut.fi/u/hsivonen/doctype.html
If you are trying to keep the same vertical height of the text boxes and
the image, I suggest giving it up now. Accept the fact that you have no
control over the visitor's display and just let text boxes size
themselves as needed. You'll get more consistent (and usable) results
across browsers and save yourself a load of frustration.
Incidently the boxes align correctly on Firefox when the width of the
window is narrowed.
Not really. http://www.bergamotus.ws/screenshots...dome.co.uk.png
BTW, that is my default font and font size you see there, as well as my
usual window width.
--
Berg
On 27 Mar, 01:04, Bergamot <berga...@visi.comwrote:
dangerd wrote: http://multidome.co.uk/test/gallery.php
Does anybody know why this works with IE but not with Firefox.
It will never "work" as long as you set the dimensions of text elements
in px units. All it takes is for the visitor to use a different font
than you to make it fall apart. A larger font size makes matters worse.
When an explicit height is set, IE6 erroneously treats it as min-height
and expands the element to fit whatever text there is. Other browsers,
including IE7 in standards mode, limit the height as you set it so the
contents overflow. Your DOCTYPE is triggering quirks mode, though, so
IE7 does the same bad things IE6 does.http://www.hut.fi/u/hsivonen/doctype.html
If you are trying to keep the same vertical height of the text boxes and
the image, I suggest giving it up now. Accept the fact that you have no
control over the visitor's display and just let text boxes size
themselves as needed. You'll get more consistent (and usable) results
across browsers and save yourself a load of frustration.
Incidently the boxes align correctly on Firefox when the width of the
window is narrowed.
Not really.http://www.bergamotus.ws/screenshots...dome.co.uk.png
BTW, that is my default font and font size you see there, as well as my
usual window width.
--
Berg
Berg,
Thanks for your input, I have a questions:
>"it will never "work" as long as you set the dimensions of text elements in px units"
How else am i supposed to make sure that the text and forms do not
spill out of the background image(the light grey boxes)?
by the way, the stylesheet is here: http://multidome.co.uk/css/gallery2.css
Thanks
On 27 Mar, 10:02, "dangerd" <duncanell...@breathe.comwrote:
"it will never "work" as long as you set the dimensions of text elements in px units"
How else am i supposed to make sure that the text and forms do not
spill out of the background image(the light grey boxes)?
Test is always sized relative to em units, because that's pretty much
their definition. Text has a varying size relationship to the size of
a pixel. This text/pixel ratio varies widely between different users,
or for a user changing default text sizes.
So if you size the "things that are connected with text" (i.e. your
text container boxes) using ems, then they will re-size themselves to
always contain that amount of text. As text / pixel ratio varies, the
box changes in (pixel-) size to keep up.
If you have a box that's more intimately connected with an image, then
you might want to size it in pixels, as that tracks the image size. If
there's text in there too, expect it to grow and expand downwards.
Placing pixel-sized and em-sized units side-by-side under the same
parent can get awkward.
In general, don't size things at all. Try to avoid sizing things you
don't care that much about. Size things you _do_ care about (such as
narrow margins) and let the browser's renderer sort the rest out for
you upon display. If you set the image container size and the spacing
between the boxes, then you can probably just let thee other boxes
expand to fill the remaining space.
Read http://brainjar.com/css/positioning/ before using float:,
position: or negative units.
On 27 Mar, 10:20, "Andy Dingley" <ding...@codesmiths.comwrote:
On 27 Mar, 10:02, "dangerd" <duncanell...@breathe.comwrote:
>"it will never "work" as long as you set the dimensions of text elements in px units"
How else am i supposed to make sure that the text and forms do not
spill out of the background image(the light grey boxes)?
Test is always sized relative to em units, because that's pretty much
their definition. Text has a varying size relationship to the size of
a pixel. This text/pixel ratio varies widely between different users,
or for a user changing default text sizes.
So if you size the "things that are connected with text" (i.e. your
text container boxes) using ems, then they will re-size themselves to
always contain that amount of text. As text / pixel ratio varies, the
box changes in (pixel-) size to keep up.
If you have a box that's more intimately connected with an image, then
you might want to size it in pixels, as that tracks the image size. If
there's text in there too, expect it to grow and expand downwards.
Placing pixel-sized and em-sized units side-by-side under the same
parent can get awkward.
In general, don't size things at all. Try to avoid sizing things you
don't care that much about. Size things you _do_ care about (such as
narrow margins) and let the browser's renderer sort the rest out for
you upon display. If you set the image container size and the spacing
between the boxes, then you can probably just let thee other boxes
expand to fill the remaining space.
Readhttp://brainjar.com/css/positioning/before using float:,
position: or negative units.
Thanks for your insight,
you mentioned that:
"So if you size the "things that are connected with text" (i.e. your
text container boxes) using ems, then they will re-size themselves to
always contain that amount of text."
How am I supposed to make sure that text never flows out of a 450px
width by 170 px height box containing a background image which is just
that size?
Thanks
On 27 Mar, 11:57, "dangerd" <duncanell...@breathe.comwrote:
First of all, fix the invalid markup, especially the spurious </body></
html>
You can't expect to make efficient progress with layout without
clearing this sort of issue out of the way first. It _might_ work, but
you lose the ability to expect it to work reliably.
Use meaningful class names too, not just "box"
"So if you size the "things that are connected with text" (i.e. your
text container boxes) using ems, then they will re-size themselves to
always contain that amount of text."
How am I supposed to make sure that text never flows out of a 450px
width by 170 px height box containing a background image which is just
that size?
There are several questions hiding in here:
* To stop text flowing out, just don't set the height of the box. Let
the browser work it out for itself and it will expand the box
vertically as necesary. Don't mess with this until you're
knowledgeable about CSS! It'll work better if you just leave it alone.
Browsers set box heights better than any author can. They know how big
the local text size is today, you don't (and can't).
The _results_ of "text flowing out" are controlled by the overflow
property. For images this might have an effect sideways, for text it's
usually wrapped and so only appears on the bottom edge. This is some
sort of trimming though, so it's best avoided by letting the box
expand.
* Don't set images as backgrounds. If it's an important image (i.e.
it's worth printing) then use an <imgtag instead. Leave the CSS
background-image property for "wallpaper", not "content".
* Don't use "dumbnails". Your image is 400px wide and ought to be
about 30k in size. It's actually 2/3rd of a MB and you're resizing it
in the browser. This looks ugly and takes an age to download.
* If the box is intended to contain an image (your class "overlap"),
then set it to a width in pixels (as you're doing). Then throw text
into it, sized in ems, and let the browser work out the best height.
* If the box is intended to contain text (classes "box" and "box2"),
then set the width in ems. Let the browser work out the height.
On Mar 27, 3:14 pm, "Andy Dingley" <ding...@codesmiths.comwrote:
On 27 Mar, 11:57, "dangerd" <duncanell...@breathe.comwrote:
First of all, fix the invalid markup, especially the spurious </body></
html>
You can't expect to make efficient progress with layout without
clearing this sort of issue out of the way first. It _might_ work, but
you lose the ability to expect it to work reliably.
Use meaningful class names too, not just "box"
"So if you size the "things that are connected with text" (i.e. your
text container boxes) using ems, then they will re-size themselves to
always contain that amount of text."
How am I supposed to make sure that text never flows out of a 450px
width by 170 px height box containing a background image which is just
that size?
There are several questions hiding in here:
* To stop text flowing out, just don't set the height of the box. Let
the browser work it out for itself and it will expand the box
vertically as necesary. Don't mess with this until you're
knowledgeable about CSS! It'll work better if you just leave it alone.
Browsers set box heights better than any author can. They know how big
the local text size is today, you don't (and can't).
The _results_ of "text flowing out" are controlled by the overflow
property. For images this might have an effect sideways, for text it's
usually wrapped and so only appears on the bottom edge. This is some
sort of trimming though, so it's best avoided by letting the box
expand.
* Don't set images as backgrounds. If it's an important image (i.e.
it's worth printing) then use an <imgtag instead. Leave the CSS
background-image property for "wallpaper", not "content".
* Don't use "dumbnails". Your image is 400px wide and ought to be
about 30k in size. It's actually 2/3rd of a MB and you're resizing it
in the browser. This looks ugly and takes an age to download.
* If the box is intended to contain an image (your class "overlap"),
then set it to a width in pixels (as you're doing). Then throw text
into it, sized in ems, and let the browser work out the best height.
* If the box is intended to contain text (classes "box" and "box2"),
then set the width in ems. Let the browser work out the height.
Thanks Andy,
If I am not to use pictures for the boxes' background, how am i
supposed to overlay the text onto <imelements?
Duncs
On Mar 27, 9:24 pm, "dangerd" <duncanell...@breathe.comwrote:
On Mar 27, 3:14 pm, "Andy Dingley" <ding...@codesmiths.comwrote:
On 27 Mar, 11:57, "dangerd" <duncanell...@breathe.comwrote:
First of all, fix the invalid markup, especially the spurious </body></
html>
You can't expect to make efficient progress with layout without
clearing this sort of issue out of the way first. It _might_ work, but
you lose the ability to expect it to work reliably.
Use meaningful class names too, not just "box"
"So if you size the "things that are connected with text" (i.e. your
text container boxes) using ems, then they will re-size themselves to
always contain that amount of text."
How am I supposed to make sure that text never flows out of a 450px
width by 170 px height box containing a background image which is just
that size?
There are several questions hiding in here:
* To stop text flowing out, just don't set the height of the box. Let
the browser work it out for itself and it will expand the box
vertically as necesary. Don't mess with this until you're
knowledgeable about CSS! It'll work better if you just leave it alone.
Browsers set box heights better than any author can. They know how big
the local text size is today, you don't (and can't).
The _results_ of "text flowing out" are controlled by the overflow
property. For images this might have an effect sideways, for text it's
usually wrapped and so only appears on the bottom edge. This is some
sort of trimming though, so it's best avoided by letting the box
expand.
* Don't set images as backgrounds. If it's an important image (i.e.
it's worth printing) then use an <imgtag instead. Leave the CSS
background-image property for "wallpaper", not "content".
* Don't use "dumbnails". Your image is 400px wide and ought to be
about 30k in size. It's actually 2/3rd of a MB and you're resizing it
in the browser. This looks ugly and takes an age to download.
* If the box is intended to contain an image (your class "overlap"),
then set it to a width in pixels (as you're doing). Then throw text
into it, sized in ems, and let the browser work out the best height.
* If the box is intended to contain text (classes "box" and "box2"),
then set the width in ems. Let the browser work out the height.
Thanks Andy,
If I am not to use pictures for the boxes' background, how am i
supposed to overlay the text onto <imelements?
Duncs
I am beginning to lose faith in CSS;
I simplified it massively and it I still does not work.
Can anyone point out why the two bottom boxes don't align properly in
FF?
url: www.multidome.co.uk/test/gallery.php
css: www.multidome.co.uk/css/gallery2.css
Many thanks.
dangerd wrote:
>
I am beginning to lose faith in CSS;
Understanding CSS doesn't happen overnight. It takes study, practice and
patience to become proficient. You have to work at it, though. Don't
give up when you're just getting started.
Can anyone point out why the two bottom boxes don't align properly in
FF?
url: www.multidome.co.uk/test/gallery.php
Please define "align properly". It doesn't adapt so well to smaller
windows, but I don't know if that's what you mean.
--
Berg
On 28 Mar, 05:16, Bergamot <berga...@visi.comwrote:
dangerd wrote:
I am beginning to lose faith in CSS;
Understanding CSS doesn't happen overnight. It takes study, practice and
patience to become proficient. You have to work at it, though. Don't
give up when you're just getting started.
Can anyone point out why the two bottom boxes don't align properly in
FF?
url:www.multidome.co.uk/test/gallery.php
Please define "align properly". It doesn't adapt so well to smaller
windows, but I don't know if that's what you mean.
--
Berg
Thanks for the moral support Berg! I am resigned to the fact that CSS
is not as easy as I thought (I now view it as equally challenging as
PHP, never would have thought so a week ago). I bought myself the Eric
Meyer book and will be giving it some time.
Please define "align properly". It doesn't adapt so well to smaller
windows, but I don't know if that's what you mean.
What I am looking for is two small boxes on top of each other to the
left of the page with a large image box floated to the right the two
smaller boxes. Underneath all of three of these items, there should be
two small boxes aligned horizontally (that is where the problem is).
Duncs
Like this:
o oooo o oooooooooooo
o box1 o oooooooooooo
o oooo o ooo box3 ooo
oooooooooooo
o oooo o oooooooooooo
o box2 o oooooooooooo
o oooo o oooooooooooo
o oooo o oooooooooooo
o box4 o ooo box 5oooo
o oooo o oooooooooooo
On 27 Mar, 21:24, "dangerd" <duncanell...@breathe.comwrote:
If I am not to use pictures for the boxes' background, how am i
supposed to overlay the text onto <imelements?
Excuse my foul mood. I wrote you a beatifully detailed reply, then
Google ate it.
You don't do this.
If you want to caption a picture then you have an <img>, then you
stick text over it in a <por <divand use CSS to control the z-
index to place it over the image. position:relative; is likely to be
useful too.
If you want a box background, then you might use the CSS background-
image property. This is just for "eye candy" images and they usually
won't get printed.
If you're trying to achieve borders, then don't use a single image
overlay. That's equivalent to setting the box size in pixels, with all
the limitations we've already discussed. If you must, I think Eric
Meyer's website has the best example code to look at (using border
images sliced into strips and corners).
If you're trying to do the "rounded corners" effect, then re-design
things. It doesn't look _that_ good, it looks very dated in web design
terms, and it's famously a right pain in the arse to code. CSS 3
(manyana) will do it easily, but anything in the present day is a
painful hack and just not worth the trouble.
On 27 Mar, 22:20, "dangerd" <duncanell...@breathe.comwrote:
Can anyone point out why the two bottom boxes don't align properly in
FF?
Hard to say without knowing what you're expecting them to do. I assume
that you mean they look correct for windows between 900 and 960 px
wide (with my settings), but badly broken otherwise.
You're trying to control something in 2 dimensions simultaneously.
Don't do that, it's too hard. It's inherently hard, because it doesn't
cope easily with resizing windows. In particular, it leads to
implementations based around position:absolute and pixel positioning.
This is easy to do, but inflexible (and thus bad).
If you want 2d control of positioning, then this is a "grid" layout
and is best done using a <table>. You can use CSS simultaneously with
it, the two aren't mutually exclusive.
Grid layouts are fashionable with graphic designers, particularly the
more pretentious. The popular book is Tim Samsara's "Making and
Breaking the Grid"
<http://www.amazon.com/exec/obidos/ASIN/1564968936/codesmiths-20>
(aka "Pointy-bearded Twattery for Fun and Profit")
Really this whole bunch of worthless Nathans should go and read the
'20s and '30s German texts that are the original source material for
the whole style, particularly Jan Tschichold, or even the medieval
canons of page layout.
In web design, we care a great deal about resizing behaviour. It's
easiest to manage this if we split a 2d problem into two stages with
one dimension each.
Structure your page as 2 columns, as 2 <div>s with float.
Embed 5 <div>s inside these, 3 on the left and 2 on the right.
Your alignment problems are now handled easily and reliably by
containment alone.
Use appropriate margins and you've probably got most of the widths
under control too.
In <11**********************@d57g2000hsg.googlegroups .comon 27
Mar 2007 14:20:17 -0700, "dangerd" <du**********@breathe.com>
wrote:
>I am beginning to lose faith in CSS;
Don't.
I don't know if it'll help at all but the biggest problem I had -
and most problems I've seen other people have - with learning to
use CSS are based, not on the difficulties of learning/writing CSS
in itself (which is no more difficult than learning anything else)
but on the mindsets of the person learning/writing. Most people
start out by thinking "how can I reproduce my tables-based layout
using CSS?" Short answer - don't even try, it'll break your heart.
Trying to port across static page layout concepts to CSS-based
dynamic presentation just doesn't work. Been there, tried it,
learned through harsh painful experience :)
The first thing anyone has to get permanently lodged into their
brain is that trying to achieve absolutely uniform pixel-perfect
layout across the huge variety of platforms that visitors may be
using is a futile task guaranteed to end in tears. If you have a
reason why it must look absolutely identical to every visitor,
turn it into a .pdf; it simply doesn't work on a page for the www.
Once people learn to let go of old static concepts about
layout/presentation, they begin to realise the quite astonishing
power and flexibility of CSS.
Persevere. It's worth it, and the satisfaction you'll gain once it
all finally starts falling into place is immense.
--
DG
--
DG
mail to us****@gaelweb.co.uk goes to a black hole
news@ is valid for the time being but may not remain so
On 28 Mar, 14:14, "Andy Dingley" <ding...@codesmiths.comwrote:
On 27 Mar, 22:20, "dangerd" <duncanell...@breathe.comwrote:
Can anyone point out why the two bottom boxes don't align properly in
FF?
Hard to say without knowing what you're expecting them to do. I assume
that you mean they look correct for windows between 900 and 960 px
wide (with my settings), but badly broken otherwise.
You're trying to control something in 2 dimensions simultaneously.
Don't do that, it's too hard. It's inherently hard, because it doesn't
cope easily with resizing windows. In particular, it leads to
implementations based around position:absolute and pixel positioning.
This is easy to do, but inflexible (and thus bad).
If you want 2d control of positioning, then this is a "grid" layout
and is best done using a <table>. You can use CSS simultaneously with
it, the two aren't mutually exclusive.
Grid layouts are fashionable with graphic designers, particularly the
more pretentious. The popular book is Tim Samsara's "Making and
Breaking the Grid"
<http://www.amazon.com/exec/obidos/ASIN/1564968936/codesmiths-20>
(aka "Pointy-bearded Twattery for Fun and Profit")
Really this whole bunch of worthless Nathans should go and read the
'20s and '30s German texts that are the original source material for
the whole style, particularly Jan Tschichold, or even the medieval
canons of page layout.
In web design, we care a great deal about resizing behaviour. It's
easiest to manage this if we split a 2d problem into two stages with
one dimension each.
Structure your page as 2 columns, as 2 <div>s with float.
Embed 5 <div>s inside these, 3 on the left and 2 on the right.
Your alignment problems are now handled easily and reliably by
containment alone.
Use appropriate margins and you've probably got most of the widths
under control too.
Andy,
You are a King amongst men, thank you for taking the time to share
your knowledge. I will let you know how I get on.
Duncs
dangerd wrote:
On 28 Mar, 05:16, Bergamot <berga...@visi.comwrote:
>>dangerd wrote:
>>Please define "align properly". It doesn't adapt so well to smaller windows, but I don't know if that's what you mean.
-- Berg
If Google Groups doesn't trim signatures automatically, please get in
the habit of doing it manually.
>>Please define "align properly". It doesn't adapt so well to smaller windows, but I don't know if that's what you mean.
You don't have to quote twice; just insert your comments on a line
following what your talking about. Delete the rest
What I am looking for is two small boxes on top of each other to the
left of the page with a large image box floated to the right the two
smaller boxes. Underneath all of three of these items, there should be
two small boxes aligned horizontally (that is where the problem is).
Like this:
o oooo o oooooooooooo
o box1 o oooooooooooo
o oooo o ooo box3 ooo
oooooooooooo
o oooo o oooooooooooo
o box2 o oooooooooooo
o oooo o oooooooooooo
o oooo o oooooooooooo
o box4 o ooo box 5oooo
o oooo o oooooooooooo
Ah! Finally, a description of the problem! (Although I will snidely
remark that if you can't even get the diagram right with little o's, you
probably won't be immediately successful with CSS.)
So, from your written description you really want three elements (for
some still-unknown reason), which I will name arbitrarily (since I don't
know what your reasons for the design are). One element is a Sidebar,
containing Box 1 and Box 2, positioned upper left. A second element is
the Picture box, your Box 3, positioned upper right. Lastly you have a
Command Bar (which I could have called a Footer, but you might
eventually have a real footer somewhere below). The Command Bar contains
your Box 4 and Box 5, "underneath all of these items."
So try this basic form:
<div class="sidebar">My sidebar: Boxes 1 and 2</div>
<div class="picture">My picture: Box 3</div>
<div class="commandBar">My command bar: Boxes 4 and 5</div>
..picture, .sidebar, .commandBar {background-color:#ECEDEE; margin:2em;}
..picture { float:right; }
..sidebar { float:left; }
..commandBar { clear:both; }
The clear on .commandBar keeps Boxes 4 & 5 together, always beneath the
other two elements. That's probably enough to solve your problem right
there. (But I'm too stupid to stop.) So: just fill in the elements you
already have, something like this:
<div class="sidebar">
<div>Box 1 test text
<form action="../admin/storealt.php etc.></form>
</div>
<div>Box 2 test text
<form action="../admin/storealt.php etc.></form>
</div>
</div>
<div class="picture"><img src="../admin/getpicture.php?id=16"
alt="Longdome model 17" width="400" height="275"></div>
<div class="commandBar">
<div class="addNewPic">
<a href="yadda">
<img src="../button/delete.gif" alt="Deletes the current picture
from the database">
</a>
</div>
<div class="deletePic">
Add new picture to the database.
<form method="post" action="" etc.>yadda</form>
</div>
</div>
with CSS like:
..picture, .commandBar { background-color:#ECEDEE; margin:2em;}
..picture { float:right; padding:20px; -moz-border-radius:2em; }
..picture img { width:400px; height:275px; }
..sidebar { float:left; padding:0 2em;}
..sidebar div { margin:0 0 1em 0; background-color:#ECEDEE; margin:2em;}
..commandBar { clear:both; }
..addNewPic { float:left; background-color:#ECEDEE; }
..deletePic { float:right; background-color:#ECEDEE; }
Note that -moz-border-radius is invalid, and used only for mozilla
browsers, ignored by others. Square corners in IE isn't so bad, though,
as Andy says.
Note also that I used <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">, not XHTML transitional. If
you insist on staying with XHTML, you'll have to tweak the closing tags.
--
John
On Mar 28, 4:54 pm, John Hosking <J...@DELETE.Hosking.name.INVALID>
wrote:
dangerd wrote:
On 28 Mar, 05:16, Bergamot <berga...@visi.comwrote:
>dangerd wrote:
>Please define "align properly". It doesn't adapt so well to smaller windows, but I don't know if that's what you mean.
>-- Berg
If Google Groups doesn't trim signatures automatically, please get in
the habit of doing it manually.
>Please define "align properly". It doesn't adapt so well to smaller windows, but I don't know if that's what you mean.
You don't have to quote twice; just insert your comments on a line
following what your talking about. Delete the rest
What I am looking for is two small boxes on top of each other to the
left of the page with a large image box floated to the right the two
smaller boxes. Underneath all of three of these items, there should be
two small boxes aligned horizontally (that is where the problem is).
Like this:
o oooo o oooooooooooo
o box1 o oooooooooooo
o oooo o ooo box3 ooo
oooooooooooo
o oooo o oooooooooooo
o box2 o oooooooooooo
o oooo o oooooooooooo
o oooo o oooooooooooo
o box4 o ooo box 5oooo
o oooo o oooooooooooo
Ah! Finally, a description of the problem! (Although I will snidely
remark that if you can't even get the diagram right with little o's, you
probably won't be immediately successful with CSS.)
So, from your written description you really want three elements (for
some still-unknown reason), which I will name arbitrarily (since I don't
know what your reasons for the design are). One element is a Sidebar,
containing Box 1 and Box 2, positioned upper left. A second element is
the Picture box, your Box 3, positioned upper right. Lastly you have a
Command Bar (which I could have called a Footer, but you might
eventually have a real footer somewhere below). The Command Bar contains
your Box 4 and Box 5, "underneath all of these items."
So try this basic form:
<div class="sidebar">My sidebar: Boxes 1 and 2</div>
<div class="picture">My picture: Box 3</div>
<div class="commandBar">My command bar: Boxes 4 and 5</div>
.picture, .sidebar, .commandBar {background-color:#ECEDEE; margin:2em;}
.picture { float:right; }
.sidebar { float:left; }
.commandBar { clear:both; }
The clear on .commandBar keeps Boxes 4 & 5 together, always beneath the
other two elements. That's probably enough to solve your problem right
there. (But I'm too stupid to stop.) So: just fill in the elements you
already have, something like this:
<div class="sidebar">
<div>Box 1 test text
<form action="../admin/storealt.php etc.></form>
</div>
<div>Box 2 test text
<form action="../admin/storealt.php etc.></form>
</div>
</div>
<div class="picture"><img src="../admin/getpicture.php?id=16"
alt="Longdome model 17" width="400" height="275"></div>
<div class="commandBar">
<div class="addNewPic">
<a href="yadda">
<img src="../button/delete.gif" alt="Deletes the current picture
from the database">
</a>
</div>
<div class="deletePic">
Add new picture to the database.
<form method="post" action="" etc.>yadda</form>
</div>
</div>
with CSS like:
.picture, .commandBar { background-color:#ECEDEE; margin:2em;}
.picture { float:right; padding:20px; -moz-border-radius:2em; }
.picture img { width:400px; height:275px; }
.sidebar { float:left; padding:0 2em;}
.sidebar div { margin:0 0 1em 0; background-color:#ECEDEE; margin:2em;}
.commandBar { clear:both; }
.addNewPic { float:left; background-color:#ECEDEE; }
.deletePic { float:right; background-color:#ECEDEE; }
Note that -moz-border-radius is invalid, and used only for mozilla
browsers, ignored by others. Square corners in IE isn't so bad, though,
as Andy says.
Note also that I used <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">, not XHTML transitional. If
you insist on staying with XHTML, you'll have to tweak the closing tags.
--
John
Thanks John, I really appreciate all your effort and am amazed by the
time people have spent replying.
>Although I will snidely
remark that if you can't even get the diagram right with little o's, you
probably won't be immediately successful with CSS.)
I had 2 min to do it at the end of my lunch break.
So, from your written description you really want three elements (for
some still-unknown reason), which I will name arbitrarily (since I don't
I am doing this for training purposes, this page will not even be
accessible to members of the public.
I am a new to programming and am just trying to get my head round
CSS.
I will try and implement your solution now.
Duncs This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
by: tshad |
last post by:
I posted this on the asp.net group, also. I wasn't sure whether this was an
asp.net problem or a javascript problem.
I have a page that was originally created from a program I found on the net...
|
by: Derek Erb |
last post by:
I am banging my head against the wall with this one. The following
code snippets work perfectly fine in MSIE6. But produce an error in
Firefox and do not work at all.
BROWSER.HTM
<HTML>
.......
|
by: lkrubner |
last post by:
We are working on a website that is here:
http://www.lauradenyes.com/
The site was working till I put up an .htaccess file that was suppose
to redirect all html files to the PHP parser. The...
|
by: David Blickstein |
last post by:
I have some XML documents that I want to open in a web browser and be
automatically translated to HTML via XSLT. I'm using an xml-stylesheet
processing command in a file called "girml.xml".
...
|
by: KBuser |
last post by:
I recently developed an internal website with various queries against
our SQL server. I added buttons with Response.Redirect. These buttons
do not work with Internet Explorer, however when using...
|
by: puja |
last post by:
hi all,
I have an asp.net website where am including .css file dynamically on page
load event. For diff users, there is diff CSS file. So after user logs in, I
am setting CSS href on page load....
|
by: entfred |
last post by:
I have the following line of html:
 1234  abc  yow
In Internet Explorer 6.0, the columns look ok using the above html:
1234 abcd ...
|
by: Arodicus |
last post by:
I have a static class method, MyObject.MySub.MyMethod(), which points to a handler in a Flash SWF (but I think that's inconsequential). In reality, the path is a lot longer, so I'd like to make a...
|
by: Stever1975 |
last post by:
I'm working on something similiar to a shopping cart item page. There
is a table of items. Each item has an image, a textbox for the qty
and an image for the add button.
When the add image is...
|
by: MeoLessi9 |
last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....
|
by: DolphinDB |
last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation.
Take...
|
by: Aftab Ahmad |
last post by:
Hello Experts!
I have written a code in MS Access for a cmd called "WhatsApp Message" to open WhatsApp using that very code but the problem is that it gives a popup message everytime I clicked on...
|
by: Aftab Ahmad |
last post by:
So, I have written a code for a cmd called "Send WhatsApp Message" to open and send WhatsApp messaage. The code is given below.
Dim IE As Object
Set IE =...
|
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...
|
by: marcoviolo |
last post by:
Dear all,
I would like to implement on my worksheet an vlookup dynamic , that consider a change of pivot excel via win32com, from an external excel (without open it) and save the new file into a...
|
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...
|
by: Vimpel783 |
last post by:
Hello!
Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
|
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)...
| |