Re: [WSG] To stretch an image within a div ??
I completely understand everyone's comments on image enlargement using professional graphic applications vs. browsers using their cheesy routines. What I didn't know was if I had missed any use of proper techniques within CSS to achieve what I needed. My first post exposes the approaches I am familiar with, but with ample hesitations. I did consider slicing a section of the image in say, Photoshop, and using it to repeat the background within a different element. I felt then, it was an unclean approach, at least with the way I presented it. If so, I would still like your (or anyone's) opinion on the right way to do it. If you don't mind, please peek at my initial post while offering your valuable opinions. Regarding the use of CSS 3: So, if the image is smaller in width (like in my case), should I guess there's no way to stretch it without CSS 3 support ? Nope, not that I know of -- at least not as a background image. You can clip them, you can repeat them, you can offset them... but you can't stretch them. From what I've read so far, I believe you can. Please refer to the following link: http://webdesign.about.com/od/examples/l/blbgsizeexample.htm Regards, Mathew *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] To stretch an image within a div ??
Unfortunately, the link is intranet. I could perhaps attempt to post the
skeletal code of the test version, if it's really required.
From your earlier email I'm starting to gather that if an image is wider
than the width of the div (or even browser window), auto-fitting isn't going
to be a problem. So, if the image is smaller in width (like in my case),
should I guess there's no way to stretch it without CSS 3 support ?
Thanks,
Mathew
On 7/6/08, Kepler Gelotte [EMAIL PROTECTED] wrote:
I can't help you without a link. Please reply to the list and not this
email.
Best regards,
*Kepler Gelotte*
Neighbor Webmaster, Inc.
156 Normandy Dr., Piscataway, NJ 08854
www.neighborwebmaster.com
phone/fax: (732) 302-0904
--
*From:* Matt [mailto:[EMAIL PROTECTED]
*Sent:* Sunday, July 06, 2008 12:37 AM
*To:* Kepler Gelotte
*Cc:* wsg@webstandardsgroup.org
*Subject:* Re: [WSG] To stretch an image within a div ??
Kepler,
Thanks for the quick reply.
I'm using a 3 column elastic design with a min-width of 54 em. The
content div stretches like a hybrid does, but the left and right sidebars
don't. The header and footer will stretch without a problem as well. The
content is embedded between the sidebars and the header doesn't quite reach
the window edges because of a dliberate 10px margin. Adding the CSS for
clarity:
div.leftSidebar {
width: 10em;
float: left;
}
div.rightSidebar {
width: 10em;
float: right;
}
div.content {
min-width: 30em;
margin-left: 10em;
margin-right: 10em;
}
div.footer {
clear: both;
}
I had tried chaning the width and overflow. No visible effects were
observed.
Have I logically omitted or overlooked something here ?
Thanks again,
Mathew
On 7/5/08, *Kepler Gelotte* [EMAIL PROTECTED] wrote:
Hi Matt,
If you stretch the img (you can't stretch a background-image as far as I
know), you will definitely not be happy with the results.
I am assuming you have a flexible design where the content expands to fit
the width of the browser's window? If that is the case, create a very wide
image and then use:
div.header {
background-image: url(images/large_logo.gif);
background-repeat: no-repeat;
height: 200px;
width: 100%;
overflow: hidden;
}
You can see an example of this technique I used on a web site I created a
while back: http://www.freightturntables.com
Best regards,
*Kepler Gelotte*
Neighbor Webmaster, Inc.
156 Normandy Dr., Piscataway, NJ 08854
www.neighborwebmaster.com
phone/fax: (732) 302-0904
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
[WSG] To stretch an image within a div ??
My web page is divided into 5 parts: Header, Left Sidebar, Content, Right
Sidebar Footer. Within the header, I wish to place a large logo, a mini
logo and a site name or company name in large text. Currently, the CSS I'm
using for the header is:
:
:
div {
margin: 0;
padding: 0;
border: 1px dashed #00; //This is for visual testing purposes only
}
div.page {
min-width: 54em;
padding: 10px;
}
div.header {
background-image: url(images/large_logo.gif);
background-repeat: no-repeat; // This image is not repeat worthy !
height:200px;
}
:
:
And the HTML is:
:
:
div class=page
div class=header
h1Title/h1
/div
:
:
/div
However the image does not stretch to fill the right portion of the 'header'
div. Tiling this image spoils things. I've thought about slicing the
rightmost portion of the large_logo. I could then, perhaps, introduce a
parent div to 'header', say 'headerBackground' with the following CSS:
div.headerBackground {
background-image: url(images/large_logo_filler.gif);
background-repeat: repeat-x;
height:200px;
}
This sounds like a nasty way to solve this, with minimal guarantee of making
the repeated slice look good. I'm not familiar with the technique used to
stretch an image within a DIV, and am not confident that it won't visually
skew the logo. A very simple table based technique seems to *visually*
solve this problem quite well without having to fool around with the logo.
But I wouldn't be here asking for help if I was in favor of tables.
What is the standards compliant way to handle this ?
Thanks,
Matt
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] To stretch an image within a div ??
Kepler,
Thanks for the quick reply.
I'm using a 3 column elastic design with a min-width of 54 em. The
content div stretches like a hybrid does, but the left and right sidebars
don't. The header and footer will stretch without a problem as well. The
content is embedded between the sidebars and the header doesn't quite reach
the window edges because of a dliberate 10px margin. Adding the CSS for
clarity:
div.leftSidebar {
width: 10em;
float: left;
}
div.rightSidebar {
width: 10em;
float: right;
}
div.content {
min-width: 30em;
margin-left: 10em;
margin-right: 10em;
}
div.footer {
clear: both;
}
I had tried chaning the width and overflow. No visible effects were
observed.
Have I logically omitted or overlooked something here ?
Thanks again,
Mathew
On 7/5/08, Kepler Gelotte [EMAIL PROTECTED] wrote:
Hi Matt,
If you stretch the img (you can't stretch a background-image as far as I
know), you will definitely not be happy with the results.
I am assuming you have a flexible design where the content expands to fit
the width of the browser's window? If that is the case, create a very wide
image and then use:
div.header {
background-image: url(images/large_logo.gif);
background-repeat: no-repeat;
height: 200px;
width: 100%;
overflow: hidden;
}
You can see an example of this technique I used on a web site I created a
while back: http://www.freightturntables.com
Best regards,
*Kepler Gelotte*
Neighbor Webmaster, Inc.
156 Normandy Dr., Piscataway, NJ 08854
www.neighborwebmaster.com
phone/fax: (732) 302-0904
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
[WSG] To autostretch a page border
I have a 2 pixel wide page border that needs to maintain its autostretched
limit to the browser window, as it gets filled with content. The code I've
supplied below *apparently* does what's needed in IE6. It doesn't work
the same with Firefox 2.0. Resizing the browser window behaves expectedly in
both browsers. Scrolling doesn't.
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN
http://www.w3.org/TR/html4/loose.dtd;
html
head
meta http-equiv=Content-Type content=text/html; charset=utf-8
titlePage Border/title
style
html, body {
height: 100%;
}
body {
background: #fff;
margin: 0;
padding: 0;
border: 2px solid #000;
color: #000;
}
.content {
min-height: 100%;
padding: 10px;
text-align: center;
}
/style
/head
body
div class=content
h2Paragraph Heading/h2
p
This is a test paragraph. This is a test paragraph. This is a test
paragraph. This is a test paragraph.
This is a test paragraph. This is a test paragraph. This is a test
paragraph. This is a test paragraph.
This is a test paragraph. This is a test paragraph. This is a test
paragraph. This is a test paragraph.
This is a test paragraph. This is a test paragraph. This is a test
paragraph. This is a test paragraph.
This is a test paragraph. This is a test paragraph. This is a test
paragraph. This is a test paragraph.
/p
h2Paragraph Heading/h2
p
This is a test paragraph. This is a test paragraph. This is a test
paragraph. This is a test paragraph.
This is a test paragraph. This is a test paragraph. This is a test
paragraph. This is a test paragraph.
This is a test paragraph. This is a test paragraph. This is a test
paragraph. This is a test paragraph.
This is a test paragraph. This is a test paragraph. This is a test
paragraph. This is a test paragraph.
This is a test paragraph. This is a test paragraph. This is a test
paragraph. This is a test paragraph.
/p
h2Paragraph Heading/h2
p
This is a test paragraph. This is a test paragraph. This is a test
paragraph. This is a test paragraph.
This is a test paragraph. This is a test paragraph. This is a test
paragraph. This is a test paragraph.
This is a test paragraph. This is a test paragraph. This is a test
paragraph. This is a test paragraph.
This is a test paragraph. This is a test paragraph. This is a test
paragraph. This is a test paragraph.
This is a test paragraph. This is a test paragraph. This is a test
paragraph. This is a test paragraph.
/p
h2Paragraph Heading/h2
p
This is a test paragraph. This is a test paragraph. This is a test
paragraph. This is a test paragraph.
This is a test paragraph. This is a test paragraph. This is a test
paragraph. This is a test paragraph.
This is a test paragraph. This is a test paragraph. This is a test
paragraph. This is a test paragraph.
This is a test paragraph. This is a test paragraph. This is a test
paragraph. This is a test paragraph.
This is a test paragraph. This is a test paragraph. This is a test
paragraph. This is a test paragraph.
/p
h2Paragraph Heading/h2
p
This is a test paragraph. This is a test paragraph. This is a test
paragraph. This is a test paragraph.
This is a test paragraph. This is a test paragraph. This is a test
paragraph. This is a test paragraph.
This is a test paragraph. This is a test paragraph. This is a test
paragraph. This is a test paragraph.
This is a test paragraph. This is a test paragraph. This is a test
paragraph. This is a test paragraph.
This is a test paragraph. This is a test paragraph. This is a test
paragraph. This is a test paragraph.
/p
h2Paragraph Heading/h2
p
This is a test paragraph. This is a test paragraph. This is a test
paragraph. This is a test paragraph.
This is a test paragraph. This is a test paragraph. This is a test
paragraph. This is a test paragraph.
This is a test paragraph. This is a test paragraph. This is a test
paragraph. This is a test paragraph.
This is a test paragraph. This is a test paragraph. This is a test
paragraph. This is a test paragraph.
This is a test paragraph. This is a test paragraph. This is a test
paragraph. This is a test paragraph.
/p
/div
/body
/html
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] Auto scaling within a table's background image
Kepler,
Looks like you got right down to the nuts and bolts. Honestly, you
may have inadvertently isolated the nerve of my problem. I was lost in
attempting the use of z-index with absolute positioning. After a few
vain attempts at adjusting the top and left to bring the imageoverlay
within the portion marked CONTENT GOES HERE, I figured I'd have
better luck finding a way to scale an image within a table. Hence the
misleading initial posts !
I'd have to agree on the thumbnailing during ingestion vs.
post-asset-fetch being the better approach. It reduces transfer load
on the response objects and several other inherent delays. However,
the current approach is more for prototyping purposes as well as
settling an off-topic pending point.
Could you show me how to correctly position the image overlay in
the content-reserved portion in my example.
Thanks,
Matt
On 8/1/07, Kepler Gelotte [EMAIL PROTECTED] wrote:
My dilemna was and still is to autofit an image of any size (entire image
should be viewable) within the table's background image property using the
style attribute. This table is currently no more than roughly 100 pixels
on either side.
Hi Matt,
Here is a sample mockup I created using an overlay technique. Substitute the
table for the div in your case. A better approach may be to resize the image
on the server when the user uploads it using the GD2 library. I used the
image resizing and cropping facilities for my home grown CMS.
html
head
style
img.stretch {
width:
500px;
height: 300px;
z-index: -1;
position: absolute;
top:
50;
left:
50;
}
div.overlay {
width:
500px;
height: 300px;
z-index: 1;
position: absolute;
top:
50;
left:
50;
}
/style
/head
body
div
class=overlayHere is some text/div
img
src=logo.jpg class=stretch /
/body
/html
Best of luck,
Kepler Gelotte
***
List Guidelines:
http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe:
http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] Auto scaling within a table's background image
Hassan, The specific portion of the code I'm having a problem with was inlcuded on my first post. The code that was not included is just regular table based border wrapping. I bet most if not all the members here are of the been there, done that experience level, which is why I didn't bother illustrating it. I'm going to write an example here for your convenience: table id=outer_layout width=100 border=0 cellpadding=0 cellspacing=0 !-- 1st row begins here -- tr td width=10 height=10 img src=top_left.gif width=10 height=10 /td td width=80 height=10 img src=top.gif width=80 height=10 /td td width=10 height=10 img src=top_right.gif width=10 height=10 /td /tr !-- 1st row ends here -- !-- 2nd row begins here -- td width=10 height=80 img src=left.gif width=10 height=80 /td !-- CONTENT GOES HERE -- td width=10 height=80 img src=right.gif width=10 height=80 /td !-- 2nd row ends here -- !-- 3rd row begins here -- tr td width=10 height=10 img src=bottom_left.gif width=10 height=10 /td td width=80 height=10 img src=bottom.gif width=80 height=10 /td td width=10 height=10 img src=bottom_right.gif width=10 height=10 /td /tr !-- 3rd row ends here -- The portion commented as CONTENT GOES HERE is a placeholder for how an image needs to be displayed. A simple img embedded in a td will work. For another notch, a table element that allows it cells to act as overlays is possible too. This is the approach I've taken. A rough example was included on my first post. If you follow the responses to it, there were suggestions to get most of what I intended it for, done in CSS, as it was considered standard. So the quote below was meant to be a response to individuals who knew how. I'm still waiting on someone to post a newer standardized approach to acheive the same effect. Matt On 8/1/07, Hassan Schroeder [EMAIL PROTECTED] wrote: Matt wrote: I guess there were a couple of concerns raised. One of them was the justification of the table's use. I chose it only because it is currently the only way I know to put pretty borders (outer and inner) around and within an image. / I'm still waiting on someone to post a newer standardized approach to acheive the same effect. I think you'd have a better chance of getting specific help if you posted a complete example (or two) of your current approach. :-) -- Hassan Schroeder - [EMAIL PROTECTED] Webtuitive Design === (+1) 408-938-0567 === http://webtuitive.com dream. code. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
[WSG] Auto scaling within a table's background image
My goal is to set the background image of a table and add individual cells (text or images) that can be opaque or transparent. The height and width of the table is fixed. The image that needs to be set in the table background however, is not under my control, and can be larger or smaller than the table's viewing area. Tagging the code as shown below does not automatically up/down-scale the image to fit within the desired viewing area: table width=100 height=50 cellpadding=0 cellspacing=0 border=0 style=background-image:url(images/image1.gif);background-position: center; background-repeat: no-repeat; background-attachment: fixed; tr td img src=... /td td width=30/td td some text here... /td /tr /table Is there a standardized way to present this without resolving to a Javascript or CSS hack ? Matt *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Auto scaling within a table's background image
Mark, It was my impression that tables provide a very flexible way to define boundaries and sub sections within those, regardless of content type - video, image, text... I kept my question short for the sake of brevity. However, I'll eventually need a structure that has several images that forms a border with shadow around the particular table background image in question. The sizes and scaling for these secondary images are easily computed with the help of a table. Further more, some parts of this table will provide constrained texts (think text within an image slide). On top of this, several such tables will form part of a bigger table (this concept is quite similar to a thumbnail view of a slide show) If you perceive the general idea, perhaps you might have examples that illustrate this using CSS ? Matt On 7/31/07, Mark L Hedley [EMAIL PROTECTED] wrote: Just use CSS and DIVS? Tables are not so good for this type of thing. Cheers. *Regards,* Mark Hedley *Voxia Web Development Solutions * *Mobile: +44 07894 009 932* *Office: +44 01670 840 752** **Web:**http://www.voxia.co.uk*** * * Proud Members of: GAWDS (Guild of Accessible Web Designers) | Web Standards Group | Independent Web Developers Portal | HTML Writers Guild *From:* [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] *On Behalf Of *Matt *Sent:* 31 July 2007 17:03 *To:* wsg@webstandardsgroup.org *Subject:* [WSG] Auto scaling within a table's background image My goal is to set the background image of a table and add individual cells (text or images) that can be opaque or transparent. The height and width of the table is fixed. The image that needs to be set in the table background however, is not under my control, and can be larger or smaller than the table's viewing area. Tagging the code as shown below does not automatically up/down-scale the image to fit within the desired viewing area: table width=100 height=50 cellpadding=0 cellspacing=0 border=0 style=background-image:url(images/image1.gif);background-position: center; background-repeat: no-repeat; background-attachment: fixed; tr td img src=... /td td width=30/td td some text here... /td /tr /table Is there a standardized way to present this without resolving to a Javascript or CSS hack ? Matt *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Auto scaling within a table's background image
Daniel, Consider an online photo album. Once you're on the page, the thumbnails for any content (video/images) only consumes a certain portion of a page, say about 60-75%, much like the content area for an online email service. In order to make the thumbnails look presentable and informative, one could surround these with borders that represent the type of content. The sky's the limit on the aesthetics. Without CSS3, well rounded corner images with shadow effects often end up being segmented into a fair amount of files, especially if the user has some say in how these borders look. The user would be presented with different border colors, edges, shadows, etc., to finally decide how these thumbnails become usable. Some part of these thumnails might reserve space to present the name of the image, or perhaps the date they were created, and so on... Now, should these scale flexibly as the browser goes full screen, or if the desktop resolution changes ? Probably not today, for most needs. However, it would help to keep the approach open enough for such requirements in the future. What is certain is that images come in all sizes. Short of pre-scaling the image with Javascript or other server side tools prior to presenting in the above discussed format, I would be interested to see it done using a simpler HTML/CSS approach. I have tried a couple of methods inlcuding tagging the img between a td element with the appropriate width and height. It works. However, I lose the ability to set other partial images or CSS colored lines on top of this. With an image set as a table background, any TD cell can contain an image or text style even, that can be used to overlay the background. Doing it dynamically through DIVs won't be a problem as well. This approach suits almost all of my needs, except for the fact that the image won't fit completely within the table background defined space. Matt On 7/31/07, Daniel Kendrick [EMAIL PROTECTED] wrote: Matt, Give me more details. What type of border is this around your page content? like if you had a square you have a series of images surrounding this square creating a border? So that if the square scales the border scales with it? I am no purist however i do believe tables should be used for tabular data and the extra time should be taken to find a suitable solution using CSS. I have done several things using the parent child relationship CSS has to offer. --DK On 7/31/07, Matt [EMAIL PROTECTED] wrote: Mark, It was my impression that tables provide a very flexible way to define boundaries and sub sections within those, regardless of content type - video, image, text... I kept my question short for the sake of brevity. However, I'll eventually need a structure that has several images that forms a border with shadow around the particular table background image in question. The sizes and scaling for these secondary images are easily computed with the help of a table. Further more, some parts of this table will provide constrained texts (think text within an image slide). On top of this, several such tables will form part of a bigger table (this concept is quite similar to a thumbnail view of a slide show) If you perceive the general idea, perhaps you might have examples that illustrate this using CSS ? Matt On 7/31/07, Mark L Hedley [EMAIL PROTECTED] wrote: Just use CSS and DIVS? Tables are not so good for this type of thing. Cheers. *Regards,* Mark Hedley *Voxia Web Development Solutions * *Mobile: +44 07894 009 932* *Office: +44 01670 840 752** **Web:**http://www.voxia.co.uk *** * * Proud Members of: GAWDS (Guild of Accessible Web Designers) | Web Standards Group | Independent Web Developers Portal | HTML Writers Guild *From:* [EMAIL PROTECTED] [mailto: [EMAIL PROTECTED] *On Behalf Of *Matt *Sent:* 31 July 2007 17:03 *To:* wsg@webstandardsgroup.org *Subject:* [WSG] Auto scaling within a table's background image My goal is to set the background image of a table and add individual cells (text or images) that can be opaque or transparent. The height and width of the table is fixed. The image that needs to be set in the table background however, is not under my control, and can be larger or smaller than the table's viewing area. Tagging the code as shown below does not automatically up/down-scale the image to fit within the desired viewing area: table width=100 height=50 cellpadding=0 cellspacing=0 border=0 style=background-image:url(images/image1.gif);background-position: center; background-repeat: no-repeat; background-attachment: fixed; tr td img src=... /td td width=30/td
