What is the best way to get a 100% width on a
background image in a banner?
I believe in fluid sites that look good in all
resolutions, img tag works easy at 100% width, but even searching for hours on
google didn't help for css background sizing in %.
Anyone can help?
Thanks in advance.
Can you give an example of what you mean?
From: Bruce [mailto:[EMAIL PROTECTED]
Sent: Monday, 1 August 2005 8:12 PM
To: wsg@webstandardsgroup.org
Subject: [WSG] background images fluid
What is the best
Bitmap grpahic is not intended to be rescaled/stretched. You can tile
it, or combine it (like on mozillazine), but no stretching, please...
--
Jan Brasna aka JohnyB :: www.alphanumeric.cz | www.janbrasna.com
**
The discussion list for
Jan Brasna wrote:
Bitmap grpahic is not intended to be rescaled/stretched. You can tile
it, or combine it (like on mozillazine), but no stretching, please...
That's right. What I'd probably do (not having seen your banner) is -
if the image doesn't stretch forever and isn't suitable to be
Hi Bruce, Try http://www.edgedesigns.com.au/resourcedw.htm. Not sure
just how relevant this is, but it's a Dreamweaver extension (free)
which you may be able to adapt to use in a div? (Not checked!)
Bob
Bruce wrote:
What is the best way to get a 100% width on a background image in a
Andreas Boehmer wrote:
Can you give an example of what you mean?
A header or banner at the top. I can put an image in there:
div id=banner
img src=anything.jpg width=100% height=120px alt=mynicebanner /
/div
It will size according to the resolution. Stretch and shrink.
But I cannot make it do
Hi Bruce
I've come up against this myself when going for a liquid 3 column layout with a
header graphic that I want to span all three columns at the top. You could
'sniff' the browser width/screen res, but I don't like doing that myself. The
solutuion I came up with is pretty much the solution
Bruce schrieb:
It will size according to the resolution. Stretch and shrink.
Not stretching, not static, though:
http://www.satzansatz.de/cssd/wide.html
Ingo
--
http://www.satzansatz.de/css.html
**
The discussion list for
Vicki Berry wrote:
if the image doesn't stretch forever
[***I can't get it to stretch at all, thats the problem***]
and isn't suitable to be repeated
- to have a fluid section of the banner with a background image set
to repeat in the CSS, and with the un-repeatable image on one side,
Ingo Chao wrote:
Bruce schrieb:
It will size according to the resolution. Stretch and shrink.
Not stretching, not static, though:
http://www.satzansatz.de/cssd/wide.html
Ingo
That's it!! Thank you Ingo
Awesome
Bruce Prochnau
BKDesign Solutions - just got a solution.
Hi Guys,
Im looking for a an easy to maintain calendar that
will list events in a list format, rather than in a calendar
format.
It has to be able to be used by people who have no real
interest in computers, so I was wondering if you could somehow use Wordpress
with one of the
Hi Bruce,
I had a quick look at your current header and see what you are trying to do.
At the end of the day I think you need to just be a bit more clever with
your image. I *borrowed* your current image and did a very crude editing job
to it so it will look good at the avg resolution, but
I guess I cannot communicate what I mean.
I have an image on my own website of a sunset.
I put it in the banner div as an image and set the width to 100%.
I am perfectly happy with it, it looks good and stretches to fit all
resolutions. There is nothing wrong with it at all.
At 1024 it fills the
Bruce schrieb:
That's it!!
Bruce, I didn't expect that this attempt works for you. You need a very
big image, resulting in 25k.
---
You can choose a focus of the picture, which determines the
percentage-value for the background-position. This makes the image look
fixed (here: x=30%),
Another alternative would be to produce the image for a largish
resolution (e.g. 1024), set max-width to 1024 and set width to 100%. I
believe readability begins to decrease above 1280 - surely there's some
research on maximum widths and readability somewhere.
- Chris
www.semioticpixels.com
Bruce schrieb:
I guess I cannot communicate what I mean.
... I was wondering if an image would stretch as a background image in the
stylesheet as a background. That's all.
Ingo did a demo as a background image of a h1 tag. I thought that would
work.
Using the EXACT same code that he used, in
Bruce,
I guess I cannot communicate what I mean.
I have an image on my own website of a sunset.
I put it in the banner div as an image and set the width to 100%.
I am perfectly happy with it, it looks good and stretches to fit all
resolutions. There is nothing wrong with it at all.
At 1024
Bruce wrote:
I guess I cannot communicate what I mean.
I was wondering if an image would stretch as a background image in the
stylesheet as a background. That's all.
Short answer: No, you cannot, with CSS and HTML as it is today, resize a
background image.
The only properties
Thank you to all who responded.
I see that it is a problem with CSS at present. Partial solution seems to be
making the image wide (I had it at 720px or thereabouts)
I made the image itself 1026w, and 11k, now it sscales nicely, and for
larger res the fade or framed with another image seems the
Result:
http://peoriaaz.nexcess.net/index.php
Anyways, that's what all the fuss was about.
Site was just started this morning. Done in Expression Engine. Redoing
everything yet.
Thanks again
Bruce Prochnau
BKDesign Solutions
**
The
On Jul 31, 2005, at 3:19 PM, Justin Carter wrote:
IE7 will be far from a disappointment. Sure Beta 1 doesn't seem to
give us anything much new and the UI is a bit topsy-turvey but I think
it's mostly due to the fact that it has come straight out of Longhorn
(Vista).
From the IMPRESSIVE list
Hi Bruce
Instead of stretching an image, try the sliding doors approach. This may
seem odd in a photograph, but could work in situations where the image has a
repeatable section. #wrap gets the left corner with generic content.
#innerwrap gets the right side with the juicy part of the image.
Probablyaddress this to Wordpress' community
or to http://www.codex.org/ which also has a
forum
- Original Message -
From:
Craig Rippon
To: wsg@webstandardsgroup.org
Sent: Monday, August 01, 2005 8:07
AM
Subject: [WSG] CMS - Can you use
Wordpress to act as your
Bruce wrote:
Looks like a perfect solution. At least as perfect as can be had.
Thanks to all who ansered. Funny how it can be easily done as an image IN
the banner , but not in staylesheet.
wait 'til css3 and you can use an svg image in the background, that will
do exactly what you want.
On Jul 29, 2005, at 5:53 PM, Andrew Krespanis wrote:
On 7/30/05, Thierry Koblentz [EMAIL PROTECTED] wrote:
I think you ought to check specifically that 'http://' is at the
beginning of the string.
Good point, I'll change this.
A more reusable approach would be to check for '://', as
I've read that we should avoid using implicit labels because, while it
shouldn't be any different, in testing it would appear screen readers
can struggle and output misleading info, etc.
/me goes off to find link
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On
Can anyone tell me what the differences are between a Java based blogging
tool and a php/mysql perl based one?
The company I work for is looking into Jroller, because some of our apps are
Java based and we might want to integrate down the road, but I'm not sure
Jroller is all that well
Hi Anthony
This list is not the best place to ask for software reviews. Their
implementation and use of web standards is, though :)
Replies/Reviews to Anthony off list, please.
Cheers
James
On 8/2/05, Anthony Zeoli [EMAIL PROTECTED] wrote:
Can anyone tell me what the differences are between a
Hi,
An example of this structure would prove enlightening.
C
On Aug 1, 2005, at 3:16 PM, Terrence Wood wrote:
you score more points with Cynthia with explicit labels.
Explicit relationships means you can have more than one label for a
form control... and yes, you are allowed to do that.
Great work Tathan!
The markup is very tight indeed! there is very small thing - that is
you've left out the type attribute on the link tag at the top of the
document.
link rel=stylesheet href=../Skins/Vision.css type=text/css
media=screen /
Otherwise its great. It looks good and behaves well!
Do you mean for using more than one label for a form? Note the explicit
and implicit relationship of the second label.
How about an an error message
!-- top of page --
pSorry, we were unable to process this form. Please check your value
for label for=foofoo/label./p
!-- snip, later in
v. nice. Nothing really needs changing but you might consider:
1. Maybe use search instead of query as a label for the search form.
2. Your CSS issues may come form the use of multiple classes, which
some browsers don't handle very well (I'll leave the css-d folks to
look into this)
3. You
Terrence Wood wrote:
!-- top of page --
pSorry, we were unable to process this form. Please check your value
for label for=foofoo/label./p
!-- snip, later in the page --
label for=fooFoo input type=text id=foo name=foo //input
clicking the label in the error message focuses the form
On Aug 1, 2005, at 7:02 PM, Terrence Wood wrote:
Do you mean for using more than one label for a form? Note the
explicit and implicit relationship of the second label.
!-- snip, later in the page --
This would be explicit?
label for=fooFoo
And this implied?
input type=text id=foo
Chris Kennon wrote:
This would be explicit?
label for=fooFoo
And this implied?
input type=text id=foo name=foo /
It can be a tad confusing, as the spec itself
http://www.w3.org/TR/html4/interact/forms.html#h-17.9 uses implicit in
two different ways:
1) a form control such as a
G'day
http://testdrive.fueladvance.com/vve/
http://testdrive.fueladvance.com/vve/Dashboard/Default.ashx
Pretty good (looks clean, code and layout wise). I don't like using as
many classes as you do, but that's personal preference.
The only real problem I see is accessibility
Patrick H. Lauke wrote:
The belt and braces approach when using labels is to make the label
both explicit (via for) *and* implicit (by wrapping the control in the
label)
label for=fooexplicit and implicit label input type=text id=foo
name=foo //label
By including the element being
Hi,
Thanks, the belt and brace approach being most secure?
C
On Aug 1, 2005, at 7:43 PM, Patrick H. Lauke wrote:
The belt and braces approach when using labels is to make the
label both explicit (via for) *and* implicit (by wrapping the
control in the label)
label for=fooexplicit and
1. Maybe use search instead of query as a label for the search form.
Maybe use Find instead of search or query (then again, your target
audience is developers, so query is part of their vocab). 'Search'
suggests that a 'hunt and peck/ hit and miss activity will follow.
More important than that
Whooa nelly!
!important -- not adding a 'for' attribute kills half the purpose of
using a label 0_o
Without a for attrib, clicking the label will not affect
(focus/activate) the input element nested within. This is especially
important in the case of checkboxes and radio buttons as the
40 matches
Mail list logo
