Fill rectangle similar to using CSS

I have a sliced graphic from one of my websites that I'd like
to use in
a new FW CS4 design to fill in a rectangular area. I know how
to use a
custom pattern as an object fill, and this worked well for a
rectangle
that needed to be filled with a simple texture that could
start anywhere
and tile in both X and Y directions.
In this case, however, I want the pattern to be tiled as if
this were
the background of a CSS DIV, tiling starting at the upper
left corner
and going just in the Y direction. But FW seems to always
tile starting
in the center and going outward in both directions. For the
graphic I'm
working with (not a texture, but actually a section of a
column), this
doesn't work at all.
Are there some hidden options for controlling this, or is
there some
other way for me to get the equivalent effect? That is, to
repeatedly
tile a bitmap in a particular direction on the FW canvas?
It'd be ugly
if I have to make a few dozen copies and manually stack them!
Doug G

Doug Gordon wrote:
> I have a sliced graphic from one of my websites that I'd
like to use in
> a new FW CS4 design to fill in a rectangular area. I
know how to use a
> custom pattern as an object fill, and this worked well
for a rectangle
> that needed to be filled with a simple texture that
could start anywhere
> and tile in both X and Y directions.
>
> In this case, however, I want the pattern to be tiled as
if this were
> the background of a CSS DIV, tiling starting at the
upper left corner
> and going just in the Y direction. But FW seems to
always tile starting
> in the center and going outward in both directions. For
the graphic I'm
> working with (not a texture, but actually a section of a
column), this
> doesn't work at all.
>
> Are there some hidden options for controlling this, or
is there some
> other way for me to get the equivalent effect? That is,
to repeatedly
> tile a bitmap in a particular direction on the FW
canvas? It'd be ugly
> if I have to make a few dozen copies and manually stack
them!
>
> Doug G
Have your tried adding another rectangle, the width of your
background
image, and the height of your main rectangle?
Jim Babbage - .:Community MX:. & .:Adobe Community
Expert:.
http://www.communityMX.com/
.:Adobe Community Expert for Fireworks:.
http://www.adobe.com/communities/experts/members/206.html

Similar Messages

How do I scale a lot of images using CSS in HTML5 and CSS3

I have a CSS image gallery that displays a larger photo with descriptive text below it, when a thumbnail image is hovered on.
Each photo has code like that following:
<a class="thumbnail" >
<img src="thumbs1/paradethumbs/DSC_0073.jpg" alt="thumbnail picture" />
<span><img src="pics1/paradepics/DSC_0073.jpg" alt=" " /><br /> 19 - a black faced sheep.</span>
</a>
The first source is a thumbnail, image stored at a size of 72 by 48.
The second source is an image stored at 600 x 400.
When the thunbnail is hovered on, the larger photo is displayed at its full size using css.
There are 20 or so thumbnails in this gallery, and different numbers in other galleries that use the same code.
The example above is number 19 from 20.
This works fine on tablets and larger displays.
When I wish to show it on an Iphone or similar, with a display that is 480 or less wide, I need to scale the larger photo down to 300 wide.
As the Iphone will have a lower quality of image than a larger display, it will not matter too much if the 600x400 photo is scaled down, and having tried it by giving it an ID with CSS like
#imagescale{ width:300px; } it looks acceptable. However, as IDs are supposed to be unique, then thats a no go area for the remaining photos.
My problem is how do I select the second image source shown in bold above, and scale it and the span text by 50%.
The text is not too important as it can be changed to fit - the image is the main problem.
I need someting like "if the display is less than 600 and the image is in the pics directory, display it at 300 wide".
The browser will hopefully take care of the height.
Any suggestiosn would be appreciated.
Howard Walker

Thanks Nancy. The general idea and the link to the article helped a lot.
However, the css using using a percentage had unpredictable results when selecting repeated images.
The first one scales to 50% and then the next scales to 50% of the last one (25%) and so on ad infinitum, unless you click on another object that is not an image.
Using a pixel size like 280px rather than a percentage did the trick, but it also involved changing lots of other items before I could get everything to fit.
Now I have a better knowledge of media queries and how to set them up.
Best of all, all my image galleries work fine just using css and html. Never thought that would happen.
Take five stars!
And the same to David Powers for his great article.
Howard Walker

Centering Images using CSS but having links on the Images

Hi all,
I have a problem on centering an image using CSS. I read on many forums that you have to use margin-left , margin-right and set to auto. and also set the display:block which I had done.
The problem is if I want to have a link from the image. Because I have set the display to block, the link will span the entire container containing it! How do I resolve that? I only want the image to be linkable and not the entire container!
Thanks for reading!

Murray *ACP* wrote:
Because I have set the display to block, the link will span the entire container containing it!
That's incorrect. If the display:block is applied to only the IMAGE, the anchor tag will be exactly the same dimensions as the image and will not fill the container.
Hi Murray,
Weirdly it does in my experiments. (code below). Even if I set the 'a' tag to the width of the image it still makes the whole <div> container clickable:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
#imgWrapper {
    width: 900px;
    margin: 0 auto;
    border: 1px solid #000;
#imgWrapper img {
    margin: 0 auto;
    display: block;
</style>
</head>
<body>
<div id="imgWrapper">
<a href="http://www.bbc.co.uk"><img src="slice_2.jpg" width="595" height="130" /></a></div>
</body>
</html>

Site examples of using css to design for smartphone, tablet, projection

Hi,
Can anyone recommend a site that uses css to design for different platform using css. Not a standalone mobile site, but one where the existing site uses jquery to show the sites differntly.
I saw a video of it using cs5.5 and it seems to be the way forward, but would love to see how others designed/structured their sites to use this technology.
Cheers
Dave

Hi
The best place to view demo's regarding the jQuery mobile framework is the official site at - http://jquerymobile.com/. But remember designing and building a site specifically for mobiles, (tablet/mobile/cell devices) is no longer a completely different process to a normal site and all smart-phones can now display a normal desktop web site as good as a desktop pc, (and when it comes to html5/css3 even better).
The use of redirects for mobile devices is now an old outdated recommendation, and is the equivalent of saying to any tablet/smart-phone user, "Use IE7 or go-away", so unless you are mainly targeting pre-2008 devices do not bother, (Google and similar do this because they are covering 'all' devices and present a very simple page design which convert to mobiles without much difficulty). It is now a more widely accepted method to use media-queries to display a link to a mobile specific site, that is hidden on larger displays.
Do not get hung-up as some do on this site with the iPhone, it is only one of the devices that must be targeted, and is not even the most popular having a smaller market share than Android powered devices, (I personally use the iTouch, (which has the same web capabilities as the iPhone) and the Samsung Galaxy S2 for my personal testing, then SDK's and 3rd party testing services for other devices) a popular blog with many links that is specific to mobile development is - http://www.visionmobile.com/blog/.
With regards to testing on mobiles, you do not require a iPhone specifically, and if you are on the mac you can download the SDK for accurate testing, (but then what does one do for all the other devices?) and the true mark of a professional, (which I do not claim to be, my clients may, but I do not, and anyone saying they are whilst 'insulting' others must be viewed with suspicion, as inter-personal skills are also part of any designers/developers necessary skills) is knowing that you must test on all popular OS's and devices, (similar to browsers, and just testing on the iPhone is like just testing your site in IE8 and ignoring everything else) so for setting up a local testing suite see - http://www.mikebrittain.com/blog/2010/01/31/browser-testing-for-mobile-web-applications/, and/or you can also use a 3rd party service such as - http://www.deviceanywhere.com/.
For a number of tutorials on using CS5/5.5 for developing mobile site see, - http://www.adobe.com/devnet/devices/mobile-web.html.
PZ

How to set dreamweaver to not use CSS?

I know it is frowned upon to not use CSS, but, the reason why
I want everything done in HTML is because I want to list my page on
ebay, and ebay does not support the use of css, or at least it
seems that way, everything has to be purely done in HTML, is there
a way to set dreamweaver so that it does not automatically make my
formating turn to CSS?
Thanks,
Bill.

.oO(BKolos)
>I know it is frowned upon to not use CSS, but, the reason
why I want everything
>done in HTML is because I want to list my page on an
auction, and this auction
>does not support the use of css, everything has to be
purely done in HTML
If it's about eBay or a similar platform, then in fact you
can use CSS.
You just have to add a 'style' element to the page body(!) to
link to an
external stylesheet. It's completely invalid HTML, because
the 'style'
element belongs to the document's head, but it should work in
almost
every browser. And since usually the rest of the auction page
is invalid
HTML anyway, it doesn't really hurt either.
See if this helps.
Micha

Using css but having these browser issues

Hello
Wondered if you might have any fix for the following...I've
tried several forums and a couple of css people but no one seems to
have an answer other than bugs in the browser. But surely there is
a way...
If you go to
http://www.enhancedwireless.net/Company/TEST.shtml
and rollover the first "(ODMA)" you should get a gif css pop up
which works great in FF, IE6/7 and Netscape (PC and MAC). But in
Safari (any version) and latest Opera (PC and MAC) the pop up is
fragmented and won't go away, breaks up. Would love a suggestion on
a fix...
And I have a swf file css pop up which again works great in
FF and Netscape, even Safari, but not in IE 6 where the pop up
won't go away (and even multiplies when you scroll) and IE 7 where
a strange white "flash" appears over the entire page each time you
mouseover the "(71 countries)".
Just rollover "(71 countries)" -
http://www.enhancedwireless.net/Technology/patentPortfolio.shtml
So my two questions are:
1.) how to fix the image css pop up for Safari and Opera
2.) how to fix the swf css pop up for IE 6/7
I know I could adapt a javascript code out there but was
hoping to do this with simplicity using css - any way?
Thanks very much for your time
KB

I think you have just chosen a hinky way to implement that
CSS 'rollover'.
And you have so much unecessary/redundant CSS in your rules,
it's a little
difficult to sort out what's happening.
Take a look at this page -
http://66.165.80.209/page2test.php
where I have
done something similar, and see if you can understand what's
going on.
The menu links contain an absolutely positioned <span>
containing a
transparent GIF image. The background image of that span is
the door. The
CSS rollover produces the swap. Positoining your rollover
image on the page
you linked should work when applied in the same way, don't
you think?
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"iwics2" <[email protected]> wrote in
message
news:[email protected]...
> Hello
>
> Wondered if you might have any fix for the
following...I've tried several
> forums and a couple of css people but no one seems to
have an answer other
> than
> bugs in the browser. But surely there is a way...
>
> If you go to
http://www.enhancedwireless.net/Company/TEST.shtml
and
> rollover
> the first "(ODMA)" you should get a gif css pop up which
works great in
> FF,
> IE6/7 and Netscape (PC and MAC). But in Safari (any
version) and latest
> Opera
> (PC and MAC) the pop up is fragmented and won't go away,
breaks up. Would
> love
> a suggestion on a fix...
>
> And I have a swf file css pop up which again works great
in FF and
> Netscape,
> even Safari, but not in IE 6 where the pop up won't go
away (and even
> multiplies when you scroll) and IE 7 where a strange
white "flash" appears
> over
> the entire page each time you mouseover the "(71
countries)".
>
> Just rollover "(71 countries)" -
>
>
http://www.enhancedwireless.net/Technology/patentPortfolio.shtml
>
> So my two questions are:
>
> 1.) how to fix the image css pop up for Safari and Opera
> 2.) how to fix the swf css pop up for IE 6/7
>
> I know I could adapt a javascript code out there but was
hoping to do this
> with simplicity using css - any way?
>
> Thanks very much for your time
>
> KB
>

Defining a component width using CSS

Hi,
I am using CSS to completely define the layout of my applications. I was able to remove all layout coding from the MXML/AS files (which is great!!), except one minor thing - which, unfortunately, is very important -: component size (width and height).
I can define positioning and "some" sizing using constraint layout (left="10", right="10"). But there are some cases where I need to explicitely say: "I want this component 10 pixels far from the right border, and I want it to have 100 pixels of width, no matter what happens with it's container size". In those cases I am forced to put "skinning" code in the middle of my MXML, which sucks.
Isn't there an easy way to set component dimensions using CSS? I find this a major problem with skinning applications using CSS. Or is there another proposed solution?
Thanks,
João Saleiro

I normally post my ER's & bugs in Jira. I just wanted to make sure that there weren't other solutions before filling an ER.
Thank you.
For other people looking for this subject, my ER can be found here: https://bugs.adobe.com/jira/browse/SDK-21805

Using CSS to customize POJO

It is rather simple to customize any Node using CSS. But how can one use CSS with POJOs (explicity: non-Nodes)? I implemented Styleable on a POJO, but certainly this is only one side of the medal. The second side is: How to tell the JavaFX runtime that a POJO (explicitly an instance that is not part of the GUI) is to be customized by CSS? My aim is to use CSS to customize properties of the model, which obviously can change while no scene is visible. I noticed that Style Manager seems to do that, but that class is not part of the public API, unfortunately.

Thank you for the reply, but I'm not really looking to go from Photoshop >to> Web/HTML/CSS) in this instance. I'm looking to have an external CSS effect >>> PSDs. It's a mobile app so I will end up manually organizing and optimizing all of my assets to be passed to a dev who, depending on what platform they are on, will most likely program it in C++ or Java.
Specifically, I am looking for a way to use Cascading Style Sheets >to effect> Photoshop elements, similar to how InDesign does : http://desktoppub.about.com/od/indesign/ss/id_css.htm. It's more about saving time when a client request an edit. Like changing a single color that will affect 5 elements in 100 different PSDs equalling 500 changes. If that color is defined in one place similar to CSS I only need to change it once.
Is there a feature (Besides Placed Linked) in PhotoShop that allows for this?
Thanks.

Adding drop shadow using CSS

I am fairly new to CSS and am designing a website where I
would like to use a drop shadow using CSS.
Currently I have a container div that is centred horizontally
in the browser window and want to add a drop shadow to this div, so
all content stays central in the browser window when it is resized.
(similar to
http://www.thegraphicmac.com/).
Any help/advice would be appreciated...
Thanks

CSS doesn't make drop shadows exactly. You could configure
one division on
top of another division with an offset but that's complicated
when used on
an entire page. This basic tutorial shows how to bring 3
image slices into
a CSS layout. (Use your own images and play around with it.)
http://alt-web.com/Image-slices-in-a-CSS-based-layout.html
--Nancy O.
Alt-Web Design & Publishing
www.alt-web.com
"richardellis" <[email protected]> wrote in
message
news:g62m8c$qj8$[email protected]..
> I am fairly new to CSS and am designing a website where
I would like to
use a
> drop shadow using CSS.
>
> Currently I have a container div that is centred
horizontally in the
browser
> window and want to add a drop shadow to this div, so all
content stays
central
> in the browser window when it is resized. (similar to
>
http://www.thegraphicmac.com/).
>
> Any help/advice would be appreciated...
>
> Thanks
>
>
>

Can't figure out how to enclose text in a rectangle, as I used to do in Word... any ideas?!

Can't figure out how to enclose text in a rectangle, as I used to do in Word... any ideas?!
thanks!
Gary Eskow

Pages doesn't let you separately set border offsets, Indesign is the only application I know that can do that.
You can get the effect with margin insets inside a Text box or offsets inside a Border.
Inside both the Textbox and Border move the margins of the Text inside to have the Text where you want it relative to the border/stroke.
When looking for a solution there is usually more than one way to look at the problem itself.
Peter

How can i send an e-mail to several mail adress typing a group name, similar procedure used un gmail

IN IPAD AIR How can i send an e-mail to several mail adress typing a group name, similar procedure used un gmail wich is very frendly

Before all these updates, one used to be able to create a Group (such as Buddy List), then send emails by clicking on that Group Name. Has not worked for a long time now, though. I wish they would bring it back.

Use css file in oracle 10g report builder

hi every one
i am using oracle 10g report buidler. i want control paramform by usign css file.
any body have idea how can i use css file in oracle report builder 10g and how can i modify it's path and i how can i manage any css class on a perticular field.

Thanks Billy.
Yes you are right.
Here why I discarded that option is,
I may get the source files with changing layouts.
My Actual scenario is as follows.
Initially we developped all the things using PL/SQL packages. Its working fine.
But as per the inputs we received from requirements group, the file structure changes dynamically. and we would able to consider those new columns also. We should be able to changes the rules dynamically.
Lets say, we doing fullouter join on Src_A and Src_B. on columns col1_A and col1_B.
Now the requirement changes in a way that, the join should be done on Src_A and Src_C. on columns col1_A and col_C.
For this I need to define a new package.
Instead of that, I would like to do everything dynamically based on configuration parameters given as input.
Thank you,
Regards,
Gowtham Sen

Problem regarding the creation of Table using CSS.

Hi ,
Here I have a Problem regarding the creation of Table using CSS.
In My Application i have a table with multiple rows(Rows are Dynamically added to the table).First i am setting the table with the following properties:
width:900px;
height : auto,
Overflow : visible,
Max-height: : 200px.
If I use above properties,I'm getting a table with 5 or 6 rows(height upto 200px).After that i am getting the Vertical ScrollBar.
The problem is when a table has many columns, Vertical and Horizontal Scrolls are coming at the time of setting the table. The table height is not Increasing dynamically.
How can i use "height" property in CSS? (I want the table height to be increased when the columns are more.)
Thanks & Regards
Madhavi

Hey humble user. Errr I'm trying to understand what ur trying to do. U want to create a section of a region destructively from an existing region right? If so select the option convert to new region (opt-comm-R or selecting it by right clicking). Check your audio bin to make sure. Whats the "merge" function? Are u refering to the glue tool?

Displaying linked pages in an area of the screen, using CSS?

Imagine that I have a column on the left of the page that has a list of links to other pages. When you click on any of those links, then to the right the linked page is shown.
I know how to do this with frames, but I'm trying to figure this one out using CSS.
Can anyone point me in the right direction?
Below is a code sample that if your save and then view in a browser will show you (hopefully) what I am trying to achieve.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Test site</title>
<style type="text/css">

div.header {
height:4em;
width:auto;
border:0;
padding:0;
text-align:center;
background-color:#6CF;
div.sidebar {
width: 15em;
float:left;
text-align: left;
border-bottom:0px;
padding-top: 1em;
padding-right: 1em;
padding-bottom: 1em;
padding-left: 0em;
    background-color:#390
div.footer {
width:auto;
border:0;
padding:0;
text-align:center;
background-color:#6CF
-->
</style>
</head>
<body>
<div class="header">
   header goes here
</div>
<div class="sidebar">

   Link to page 1<br />
   Link to page 2<br />
   Link to page 3<br />
   etc...<br />
</div>

This is the area where the pages linked to should be displayed.<br />
So, if you click on the "Link to page 1" link, to the left, the contents of page 1 will be shown here.<br />
If you click on the link to the left that says "Link to page 2" then the contents of page 2 will be shown here, etc.<br clear="left" />
<div class="footer">
footer goes here
</div>
</body>
</html>

Thank you Nancy! Your solution is (I believe) 99% of the way to being exactly what I want.
The code fragment below:
<div class="sidebar">

   <a href="../Test/About.html" target="Frame1"> About</a><p>
   <a href="../Test/FAQ.html" target="Frame1"> FAQ</a><p>
   <a href="../Test/Contact.html" target="Frame1"> Contact us</a><p>
</div>
<iframe name="Frame1" id="Frame1" src="../Test/About.html" height="auto" width="auto" allowtransparency="true" border="0" margin="0" scrolling="auto" > </iframe>
but I want the window that contains the 'imported' code to expand to be the same height as the sidebar and wide enough to stretch to the rightmost side of the visible screen.
I was guessing that
height="auto" width="auto"
would have done the trick, but it would seem not. Any ideas?

Using CSS and Javascript to display a div with flash in it, mozilla reloads the flash file!

I am using CSS and Javascript to display a div with an
embedded flash object in it. Mozilla Firefox reloads the flash file
when the div is displayed! (I dont want this to happen, as it's
unexpected functionality, my expectation would be that the flash
file would not change it's state at all, and would remain in
whatever state it was left in.)
I was wondering if anyone has come across this issue and is
there something I can do to prevent this from occurring?
To be more specific, I have a single HTML page with 8 flash
files embedded in it (yeah I know, it's a bit much). I am then
using CSS and Javascript to display (via a numbered link (with an
id)) an equivalent numbered div tag containing the flash file.
Mozilla Firefox reloads the flash object that is in the div.
Internet Explorer will not do this and will instead, load the flash
object only upon initial view of the flash object. All subsequent
links (in IE) will NOT reload the flash object on the page. I'm
guessing this is some kind of difference in the flash player as an
Active X object and the plugin, or is it just IE being clever? Or
am I way off?
Anyway, here is the code...

I am using CSS and Javascript to display a div with an
embedded flash object in it. Mozilla Firefox reloads the flash file
when the div is displayed! (I dont want this to happen, as it's
unexpected functionality, my expectation would be that the flash
file would not change it's state at all, and would remain in
whatever state it was left in.)
I was wondering if anyone has come across this issue and is
there something I can do to prevent this from occurring?
To be more specific, I have a single HTML page with 8 flash
files embedded in it (yeah I know, it's a bit much). I am then
using CSS and Javascript to display (via a numbered link (with an
id)) an equivalent numbered div tag containing the flash file.
Mozilla Firefox reloads the flash object that is in the div.
Internet Explorer will not do this and will instead, load the flash
object only upon initial view of the flash object. All subsequent
links (in IE) will NOT reload the flash object on the page. I'm
guessing this is some kind of difference in the flash player as an
Active X object and the plugin, or is it just IE being clever? Or
am I way off?
Anyway, here is the code...

Fill rectangle similar to using CSS

Similar Messages

Maybe you are looking for