How to position a image with CSS

For my site I have layed out DIV tags using CSS and use the box model for positioning
(im not using absolute positioning but I am using absolute widths and sometimes absolute heights but only for DIV containers which I intend to hold images in)
My CSS comes from an external sheet for things which is the same on all pages and are in the headder for things that only appear on 1 page.
Since certain images appear in the same place on all pages i want to put an image in one of the DIV tags using the external CSS file.
(and not using HTML tags which would require me to re-insert the same image for every single page)
How do I do this?

You could do it by setting it as the background for the div, you would also need to set the height and width of the div as well, in the example below I didn't set the width because it was already set in the outer div.
.PanelBottom {
background-image: url(../Images/bottom.png);
background-repeat: no-repeat;
margin: 0px;
padding: 0px;
height:20px;
Regards,
Richard

Similar Messages

In iPhoto, how can I export images with the metadata - including the title and caption information - intact as part of the image?

In iPhoto, how can I export images with the metadata — including the title and caption information — intact as part of the image?

Check those boxes in the export dialogue - Exporting From iPhoto
LN

HELP!!!! I have spent hours trying to find out how to embed an image with a link or a Microsoft Word document with a hyperlink built within the document -- not as an attachment! Does ANYONE know the secret? Can it be done, or not! My PC clients do it.

HELP!!!! I have spent hours trying to find out how to embed an image with a link, or embed a Microsoft Word document with a hyperlink built within the document -- not as an attachment into my email -- but where it shows as the email content when opened! Does ANYONE know the secret? Can it be done, or not? My PC clients do it all the time easily. Then I want to be able to send the embedded image/document (not as an attachment, but visable within the email when opened) to many email contacts at once, BUT the individuals receiveing them DO NOT SEE the other email contacts. Cannot seem to be able to find anything on being able to do these 2 tasks.PLEASE, SOMEONE, HELP!!!

Don't know if this applies to Lion, but read here:
http://www.makeuseof.com/tag/create-html-announcement-mail-iweb-mac/

How to make slide images with Dreamweaver CS6?

How to make slide images with Dreamweaver CS6? Please teach me.

Hello
in addition to Jon's hint, I'll send you some links to nice sliders (have fun with the different representations ):
http://sandbox.scriptiny.com/javascript-slideshow/
http://jquery.malsup.com/cycle/
http://wowslider.com/best-jquery-slider-crystal-linear-demo.html
http://www.jcoverflip.com/demo
http://www.jacksasylum.eu/ContentFlow/
http://addyosmani.com/blog/jqueryuicoverflow/
You only need to use the source code to implant these shows there where you want. In my eyes it would be the best that you use first a very new and blank DW file to perform (maybe in LiveView) the one or the other.
Hans-Günter

Positioning images with css

Hello everybody,
thanx in advance for your help.
Needless 2 say that my question would sound stupid to most of
you, but if it sounded smart I would probably be the one to answer
it and not to make it... It sounds logic, doesn't it?...I apologize
for my reflection and I go straight to the point:
PRESUPPOSAL:
I created a pretty complex web-page design with Photoshop.
It's not just about a logo in the 0% 0% position and some colored
bar on the viewport border but a 800X600 image with lots of
particulars.
ISSUE:
I'd like 2 put it on the html page with CSS.
QUESTIONS:
a)Shall I put the image as a whole?
b)Or shall I sLice it as I'd do if I wanted to use a table to
position it?
If the a) is the correct option, won't the page be to heavy
in terms of kbytes? (As far as I know a sliced image is overally
lighter than an entire one)
If the b) is the correct option, how can I position more than
one picture with css in a html document? (I studied css from a
short Molly Holzshlag's book and she only explains how to position
1 single image)
c)Is it ok to use CSS image-positioning to such an extreme
extent? Should I prefer table-positioning considering my 800X600px
goal? I mean, is there any technical problem I ignore? Is it a
inapropriate use of CSS?
Thank you so very much and enjoy the week!
bye,
Giuseppe, Rome

Let's start by seeing your page, please.
> I created a pretty complex web-page design with
Photoshop. It's not just
> about
> a logo in the 0% 0% position and some colored bar on the
viewport border
> but a
> 800X600 image with lots of particulars.
I'm already worried. This sounds massively heavy....
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
==================
"giuseppe craparotta" <[email protected]>
wrote in message
news:[email protected]...
> Hello everybody,
> thanx in advance for your help.
> Needless 2 say that my question would sound stupid to
most of you, but if
> it
> sounded smart I would probably be the one to answer it
and not to make
> it... It
> sounds logic, doesn't it?...I apologize for my
reflection and I go
> straight to
> the point:
>
> PRESUPPOSAL:
> I created a pretty complex web-page design with
Photoshop. It's not just
> about
> a logo in the 0% 0% position and some colored bar on the
viewport border
> but a
> 800X600 image with lots of particulars.
> ISSUE:
> I'd like 2 put it on the html page with CSS.
> QUESTIONS:
> a)Shall I put the image as a whole?
> b)Or shall I sLice it as I'd do if I wanted to use a
table to position it?
> If the a) is the correct option, won't the page be to
heavy in terms of
> kbytes? (As far as I know a sliced image is overally
lighter than an
> entire one)
> If the b) is the correct option, how can I position more
than one picture
> with
> css in a html document? (I studied css from a short
Molly Holzshlag's book
> and
> she only explains how to position 1 single image)
> c)Is it ok to use CSS image-positioning to such an
extreme extent? Should
> I
> prefer table-positioning considering my 800X600px goal?
I mean, is there
> any
> technical problem I ignore? Is it a inapropriate use of
CSS?
>
> Thank you so very much and enjoy the week!
> bye,
> Giuseppe, Rome
>

How can i Display images with may own table

Hi
I want display images with my own table. How can I use in this query.
SELECT    '<a href="#" onclick="javascript:'
       || 'getImageHeight(''my_img'
       || '#ROWNUM#'');javascript:redirect'
       || '(''f?p=&APP_ID.:212'
       || ':&SESSION.:DISPLAY:NO::P212_IMAGE_ID:'
       || ID
       || ''');">'
       || '<img src="#IMAGE_PREFIX#edit.gif" '
       || 'alt="Edit"></a>' ID,
          '<img id="my_img'
       || '#ROWNUM#" src="#WORKSPACE_IMAGES#'
       || filename
       || '"/>' image
FROM wwv_flow_filesThanks
Nr
Edited by: user10966033 on Sep 28, 2009 1:41 PM

You don't use #workspace_images# since that is for STATIC files, not images in a table..
see this thread for help: Re: Display image from blob
Thank you,
Tony Miller
Webster, TX

Flex charts: How to hide axis lines with CSS?

Hello!
How do I hide my axis lines with CSS? Shouldn't this work?
<mx:Style>
@namespace mx "library://ns.adobe.com/flex/mx";
mx|ColumnChart {
    horizontalAxisStyleName: myAxisStyles;
    verticalAxisStyleName: myAxisStyles;
.myAxisStyles { showLine: false; }
</mx:Style>
I also tried display: none.
Prior to this I used:
<mx:horizontalAxisRenderers>
<mx:AxisRenderer showLine="false" axis="{someName.horizontalAxis}" />
</mx:horizontalAxisRenderers>
<mx:verticalAxisRenderers>
<mx:AxisRenderer showLine="false" axis="{someName.verticalAxis}" />
</mx:verticalAxisRenderers>
But it produced some annoying warnings:
Data binding will not be able to detect assignments to "horizontalAxis".
Data binding will not be able to detect assignments to "verticalAxis".
Thanks!
--Dwayne

Regarding the data binding warnings, see if you can get away without specifying the axis. Not sure if that will work. Otherwise, give the axis an id like the example at the bottom of http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/charts/AxisRenderer. html#axis.
The doco for showLine says "Specifies whether to display the axis. The default value is true." I think it's referring to the line at the bottom of the axis, next to the numbers. It's nothing to do with the grid lines. Which explains why your code doesn't work.
If you are not using gridlines at all (= not using the lines, not using horizontal-fill and horizontal-alternate-fill etc), then I think you can just get rid of them by specifying an empty array. Either in actionscript or in your chart tag (<mx:ColumnChart id="highlights" dataProvider="{results.result}" showDataTips="true">) add the argument: backgroundElements = "[]".
If this is not desireable, go to plan b:
You can control gridlines via css like this:
mx|GridLines {
    gridDirection: both; // horizontal or vertical also accepted, but not "none".
If you want none... well I've got some code where I do this:
(backgroundElements[0] as GridLines).setStyle("gridDirection", "horizontal");
// One of the arguments is the alpha, i.e. alpha=0 (translucent)
var stroke:SolidColorStroke = new SolidColorStroke(0, 0, 0);
(backgroundElements[0] as GridLines).setStyle("horizontalStroke", stroke);
... and that definitely works.

How to capturing scrolling images with no java controls?

Can somebody help me? I am trying to capture the image of the browser, using the followed code to do it, but I can not take it scrolling the screen. I do not use any control of java in the browser. Does anybody have an idea?
Robot r = new Robot();
image1 = r.createScreenCapture(clippedScreen);
File file = new File("c:\\Csa\\3.9\\Fimages\\"+counter+".jpg");
javax.imageio.ImageIO.createImageOutputStream(file);
ImageIO.write(image1,"jpg",file);
//Scroll the screen
scrollTheScreen ();
//Takes scrolled area
image2 = r.createScreenCapture(new Rectangle(0,666,1280,80));
File file2 = new File("c:\\Csa\\3.9\\Fimages\\"+counter+1+".jpg");
javax.imageio.ImageIO.createImageOutputStream(file2);
ImageIO.write(image2,"jpg",file2);
As you can see I take two parts of the screen but I am having troubles adding the images, I do not know if there is an easier way to do this.
Thank you in advance.

Thanks to anybody, but i found the way on how to capture the image.
1. Take a snapshot of the screen.
2. Scroll the screen pushing the button down.
3. Take the snapshot of the scrolled part of the screen.
4. Scroll the screen pushing the button down.
5. Take the snapshot of the scrolled part of the screen.
6. Compare the 2 last images, if they are equals, stop scrolling, else scroll again.
7. Join the images first, second and third images, to get a single one corresponding to the hole info of the browser.
8. Save the resulting image.
The thing in this problem is to manage the images as RGB components for that you must use the getPixel(col, row, color); method to manipulate the components in matrix and added to a bigger matrix where you join the complete components. Be sure that you manage the 3D matrix correctly, [width of the screen] [height of the screen] [RGB components], i.e.
* This saves just the red component, the green and blue must be saved too.
public int[][] imreadRed(BufferedImage bi)
          Raster r = null;     // * Raster
          int [][] image;     // * Image array
          int imageWidth = bi.getWidth();     // * Image Width
          int imageHeight = bi.getHeight();     // * Image Height
          int[] color = new int[3];     // * array to colors RGB (r -> 0, g -> 1, b -> 2)
          r = bi.getData();
          image = new int[imageHeight][imageWidth];
          for(int row = 0; row < imageHeight; row++)
               for(int col = 0; col < imageWidth; col++)
                    r.getPixel(col, row, color);
                    image[row][col] = color[0];          //Saves the red color to the array image on the first coordinate
          return image;     //Return the array with the red component
     }* This merge the matrix into a bigger one.
public int [][] mergeMatrix (int [][] mat1, int [][] mat2){
         int rowsMat1 = (mat1.length-53), colsMat1 = mat1[0].length,     //mat1.length da los renglones de la matriz height
         rowsMat2 = mat2.length, colsMat2 = mat2[0].length;          //mat1[0].length da las columnas de la matriz width
         int [][] addedMatrix = new int [rowsMat1+rowsMat2][colsMat1];
         for (int row = 0; row < rowsMat1; row++) {
              for (int col = 0; col < colsMat1; col++) {
                   addedMatrix [row] [col] = mat1 [row] [col];
          for (int row=0; row < rowsMat2; row++) {
               for (int col = 0; col < colsMat2; col++) {
                    addedMatrix [rowsMat1+row] [col] = mat2 [row] [col];
         return addedMatrix;
    }* This convert the matrix into an image.
public BufferedImage imwriteComponents (int [][] arrRedImg, int [][] arrGreenImg, int [][] arrBlueImg) {
          int arrayWidth = arrRedImg[0].length;     // * Image Width
          int arrayHeight = arrRedImg.length;     // * Image Height
          BufferedImage completeImage = new BufferedImage(arrayWidth, arrayHeight, BufferedImage.TYPE_INT_RGB);     // Create a BufferedImage with RGB pixels
          WritableRaster wRaster = completeImage.getRaster();     // Create a raster so we can access the BufferedImage pixels
          int [] color = new int [3];     //color variable to save all the components
          //join the 3 matrix in one color type
          for(int row = 0; row < arrayHeight; row++)
               for(int col = 0; col < arrayWidth; col++) {
                    color [0] = arrRedImg [row][col];
                    color [1] = arrGreenImg [row][col];
                    color [2] = arrBlueImg [row][col];
                    wRaster.setPixel(col, row, color);
          return completeImage;     //Return the Buffered image with the red array component
    }That is a solution that I found to this problem, if someone has an easy way to do it please tell us.
Thank you.

How to make mask image with free contour points

I use CVI and VDM8.6, how can I create a mask image with free contour points like the sample image?
This example is made with vision assistant,

Hi,
If you look at the tutorials in fireworks such as changing images/rolover images you will start to get an understanding.
Cheers

How to mark (psd) Images with the Circle Symbol without duplicating them

I would like to import my layered images in Aperture.
The problem is i would like to further adjust them in photoshop cs3 without creating a duplicate.
Is there a possibility to mark this images with the Circle Symbol (for edited with external editor) or do I really have to open each image than close again, delete the master and then the remaining image with the circle can be opened and further enhanced in Photoshop without duplicating the image.
Another example:
I like to open a psd file within aperture with: edit with Adobe Photoshop CS3.
The Image should open without being duplicated. Then I could drag the layer into another PSD document and close it again.
Right now I would end up with a Master Duplicate which I have to delete afterwards.
I know I could use referenced files and say show in finder but I like managed better,
also:
Show in finder does show you only one image (I like to do that to 5 or 10 images at once).
bc

Like I said if you want to get into the programming business you can modify the aperture database directly but I don't know of an easier way with managed masters. You can always just do your workaround to files that you are actually working on and you only need to do it once.
Sorry there is no answer to easier answer to deal with all of them at the same time. At least none I can think of off the top of my head.
RB
Ps. Lightroom can just open your PSD files but that is an apples and oranges thing. Lightroom is not trying to manage your masters for you in a managed library an ensure that nothing modifies them, if you are ok with that method than referenced files should be ok with you as well, you can always use referenced for your legacy PSDs and use a managed methodology for your new images going forward starting with the source image.

How to superpose two image with transparency color

Hi,
I like to superpose two image with a transparency color. I know it is possible but i do not know on which API i can find it.
thanks

http://developer.java.sun.com/developer/JDCTechTips/2002/tt0618.html
http://java.sun.com/products/jfc/tsc/articles/swing2d/
Try these they discuss transparent images.
rykk

How to save/export image with 3D grid

I am in CS6 with the 3D workspace selected. I need to export/save the image with the grid viewable. I know this is possible as I have seen it on a few other images. The catch is I need it 300 dpi so I cannot just screen shot as png.

I don't understand what's the problem? Can you please elaborate? Show some code snippets and tell where you stucks on.

How to overlap an image using css in my .cfm

Hi, I know this is a little off-topic, but in my gallery.cfm,
I have a couple of rows that have an image in it, I was wondering
how I can use css to put some text over the image? Like for
example, how can I put some red text "Sold out" over toy1.jpg? I
have tried using z-index but that requires some positioning but in
this case there is no positions ? Can someone please help me on
this?
Sample code:
<table align="center">
<tr>
<td>
<img src="images/toy1.jpg" width="128" height="180"
border="0">
</td>
</tr>
<tr>
<td>
<img src="images/toy1.jpg" width="128" height="180"
border="0">
</td>
Thank you,
C

Hope this helps.
<style type="text/css">
.cell {position:relative;}
.productImage {top:0px; left:0px; width:128px; height:180px;}
.soldText {position:absolute; top:30px; left:0px;
font-size:2.0em; color:red; width:100%;
text-align:center;
font-family:impact,lucida console,verdana;
opacity:.8}
</style>
<table align="center" border="2">
<tr>
<td>
<div class="cell">
<div class="productImage"><img src="images/toy1.jpg"
width="128" height="180" border="0"></div>
<div class="soldText">Sold!</div>
</div>
</td>
</tr>
<tr>
<td><div class="cell">
<div class="productImage"><img src="images/toy1.jpg"
width="128" height="180" border="0"></div>
<div class="soldText">Sold!</div>
</div>
</td>
</tr>
</table>

How to create an image with a transparent shape

Hi
This should be easy -
The end result I want is this:
a png which is mostly black (or any colour) but with a defined shape in it which is transparent.
I have the shape. I select it. I seem to be able to make a mask from this (a selection which I can copy and move about). But what I can't figure out how
is how to create a new image which is filled except for this masked area which is transparent
Any help gratefully received.
Thanks
--Justin Wyllie

Open a blank, new file with foreground color green
Type text
Open effects palette, and in the drop-down go to bevels, then select "Simple Emboss" - it is the second one in my program. Apply
Still in he effects palette, in the drop-down, go to visibility, select "Hide". Apply
Double click the f icon on the text layer in the layers palette to bring up the Style settings dialog, and add a small stroke to better define the letters.

In Safari How to open an Image with PhotoShop

Hi everyone.
I need your help, advise...
I have a html page with this tag:
Image
CFD is a Share
If I use Explorer when I click the link (using the File Helpers) the image is open with PhotoShop. I need the same functionality in Safari, is there a way to do that...?
Or how can I accomplish this task?
Thank you for your help.
jhpe.

Thanks for your response. I've just started with Javascript scripting in Photoshop so I'm still just a bit confused though .
The code you've provided will return the location on my computer of where the script resides, am I right? And since the script and the images are in the same folder, this should mean a relative address is obtainable?
How could I use this in connection with:
var fileRef = new File("image01.jpg");
var docRef = app.open(fileRef);
where image01,jpg is the image I'd like to open in the same folder as the script?
Thanks again for your help.

How to position a image with CSS

Similar Messages

Maybe you are looking for