Search Results

Search found 35485 results on 1420 pages for 'css background image'.

Page 83/1420 | < Previous Page | 79 80 81 82 83 84 85 86 87 88 89 90  | Next Page >

  • jQuery, drop image on overlaping target

    - by Cinaird
    I am using jQuery to detect drop on target, the target in question is a image. If i drag one image upon another, and then drop it, it shall replace the target source with the dropped source. This works fine until two images lies upon each other. Some of the images lies next to each other and some times the target images overlap. if i drop, both the visible image and the image beneath is replaced with the dragged image. I hope the problem is clear and their is any good solution

    Read the article

  • WPF Custom Control with Image problem

    - by user311883
    Hi all, I am quite new to WPF/XAML and I am currently facing a problem. I have a solution with two projects in it, the first project is a Custom Control Library with a custom Window form control inside. The second project is a WPF application using my custom window form. All work fine except for the form Icon. In the WPF application project I set my window icon property to "/ProjectTwoNameSpace;component/Resources/Images/Film.ico", and in the WPF custom control I try to show that image that way : <Image Grid.Column="0" Margin="3" Width="27" Height="27"> <Image.Source> <BitmapImage UriSource="{Binding Path=Icon}" /> </Image.Source> </Image> But it doesn't work, I get a error at runtime saying that the property UriSource or StreamSource must be set for my tag. Anyone can help me ? I think it's jsut a WPF newbie problem ^^

    Read the article

  • Free (as in beer) Reverse Image Search API/Library/Service

    - by Bauer
    TinEye provides a great way to "reverse" search by image (i.e. upload/transload an image and have multiple possible sources of that image returned as results.) Since screen-scraping is messy and unreliable, I'm looking for a free API/library/web-service that could offer the same (or similar) reverse-image search function. At present, TinEye offers a commercial API, but since I'll only be using the service for small personal projects, it's hard to justify the cost of the service (the lowest being 1,000 searches for $70 USD). Is anyone aware of such a free service? Or is there a simpler way to approach this (programmatic solution; any language)? I understand that this is a tall order, and submitting the question is really only a last resort in the hope that there is some solution. Example image search is 99designs' StackOverflow logo competition entry by wolv

    Read the article

  • Java: Line appears when using AffineTransform to scale image

    - by Malakim
    Hi, I'm having a problem with image scaling. When I use the following code to scale an image it ends up with a line either at the bottom or on the right side of the image. double scale = 1; if (scaleHeight >= scaleWidth) { scale = scaleWidth; } else { scale = scaleHeight; } AffineTransform af = new AffineTransform(); af.scale(scale, scale); AffineTransformOp operation = new AffineTransformOp(af, AffineTransformOp.TYPE_NEAREST_NEIGHBOR); BufferedImage bufferedThumb = operation.filter(img, null); The original image is here: http://tinyurl.com/yzv6r7h The scaled image: http://tinyurl.com/yk6e8ga Does anyone know why the line appears? Thanks!

    Read the article

  • Cocoa : Scale Image dragged into an ImageWell

    - by Holli
    I am working on application to keep a comic book collection in order. The user should be able to drag an image of the cover artwork into the program via an ImageWell. Since it is not possible to drag the image out of the application again I don't need to save the picture in it's original size. An image at the size of the ImageWell would be just fine. The question is how do I rescale the image with my application? To make things even more complicated the ImageWell is bound with Core Data. So I need to rescale the image before Core Data will save the picture in its original size.

    Read the article

  • Scaling up an image

    - by codefail
    How do I fulfill the condition "returns the entire scaled up image" If I am coding this correctly, scaleColor handles individual colors, getRed handles the red, etc. I am multiplying this by the input, numTimes, which will create a new image that is scaled up it. This scaled up (increase size) is to be returned. This is what I have. Image Image::scaleUp(int numTimes) const { for (int x = 0; x < width; x++) { for (int y = 0; y < height; y++) { pixelData[x][y].scaleColor(pixelData[x][y].scaleRed(pixelData[x][y].getRed()*numTimes)); pixelData[x][y].scaleColor(pixelData[x][y].scaleGreen(pixelData[x][y].getGreen()*numTimes)); pixelData[x][y].scaleColor(pixelData[x][y].scaleBlue(pixelData[x][y].getBlue()*numTimes)); } } //return Image(); }

    Read the article

  • How to place text on top of image in ReportViewer

    - by Christoffer
    I feel very silly asking this, since it seems like it just should work, but I cannot make it work and cannot find anything in the documentation about this. The problem: I'm developing an application in Visual Studio 2010 that is utilizing ReportViewer, rendering the report locally. In the report designer, I place a textbox on top of an image. This looks fine in the designer, but when rendering the report, the textbox is rendered below the image. Now, before you suggest it, I have tried placing a textbox on top of a rectangle (or other control) with the BackgroundImage property set. This works. But: I cannot find a way to rescale the background image to fit the control. Setting a different dpi for the background image does nothing. Simply rescaling the image to a different resolution is not an option, since I eventually want to print the report. Does anybody have a solution to this?

    Read the article

  • Headless HTML rendering to image on CentOS 5.4

    - by Jim Tough
    Hello, I have a project requirement to render HTML and capture the rendered image as a file on a headless CentOS 5.4 server. My specific requirements are: 1) Input will be a URL to the page to render, output will be an image file containing the rendered image of the page 2) CSS must be supported by the renderer up to CSS level-1 3) Static images in the page must be displayed properly in the rendered image, including any transparent color in .GIF files 4) Must be able to run on a headless CentOS 5.4 server. 5) Solution must not depend on any product or component that is not free for commercial use I do not need to do anything with the page other than get the screen capture and save it to an image. The hard part seems to be doing this in a headless environment. Some of the solutions that I've seen discussed need a display in order to work. Any suggestions? Thanks in advance, Jim

    Read the article

  • Chrome starts to load image then show broken link icon

    - by Clare A Keith Ward
    Chrome (21.0.1180.79 m) On several random pages it has started to load an image and then suddenly the image disappears and there's only the broken image icon. If I right click the icon and choose to open the image in another window then the image opens, so it seems to me that it isn't a problem with the page? Here's one of the pages that it does it on; http://welshjournals.llgc.org.uk/browse/viewpage/llgc-id:1048090/llgc-id:1048951/llgc-id:1048969/get650 I'm running Kaspersky Internet Security 2012 Any help would be appreciated. Thanks Clare

    Read the article

  • Get the image file path

    - by Googler
    HI, I am trying to retrive the filname of the image file from a file path in my code. My filepath: c:\mydocuments\pictures\image.jpg which method can i use in c# to get he filename of the above mentioned path. Like String file = image.jpg I have used the system.drawing to get he path, but it returns null. my code: string file = System.drawing.image.fromfile(filepath,true); Is this the right way to get the image file name or is there any other inbuilt method in c#. Pls help me on this?

    Read the article

  • Why I cannot see an image if I do not use the full name of an image?

    - by Roman
    I try to add an image to JPanel. It works if I specify the full name of the image (including name of all folders). But I want my software to be machine independent (another machine does not have the same folder structure as my machine has). So, I put my image to the same place where the source is and in my code I use just name of the image (no folders' names). It does not work. I put my image into the folder where my executables are. It does not work again. So, why it does not work and what can I do with that?

    Read the article

  • DMG image containing Mac OS X 10.6.5 update not recognized

    - by Lawliet
    Hello, I want to update my Mac OS X 10.6.3 and want to use the manual package update (not Software Update) and I am having this problem for two days now. First I downloaded Mac OS X 10.6.5 Combo update and on the first opening it popped up a message saying "Unable to mount: disk image not recognized". I thought that somehow the image became corrupt during the download, so I downloaded it again. Same result. And I downloaded again. And again... No use, it still states that the .dmg is not recognized. Then I tried to update my system from 10.6.3 to 10.6.4 using the same method (package installer). It worked. And of course I downloaded the 10.6.5 update (not the combo package, but the 10.6.4 10.6.5 update package)... guess what. Not recognized. I don't understand how is this possible. Did anyone has the same problem? Please don't advice me to use software update, as I need to do that on multiple Macs Thanks in advance.

    Read the article

  • mapping rect in small image to larger image (in order to do a copyPixels operation)

    - by skinnyTOD
    Hi all - this is (I think) a relatively simple math question but I've spent a day banging my head against it and have only the dents and no solution... I'm coding in actionscript 3 - the functionality is: large image loaded at runtime. The bitmapData is stored and a smaller version is created to display on the available screen area (I may end up just scaling the large image since it is in memory anyway). The user can create a rectangle hotspot on the smaller image (the functionality will be more complex: multiple rects with transparency: example a donut shape with hole, etc) 3 When the user clicks on the hotspot, the rect of the hotspot is mapped to the larger image and a new bitmap "callout" is created, using the larger bitmap data. The reason for this is so the "callout" will be better quality than just scaling up the area of the hotspot. The image below shows where I am at so far- the blue rect is the clicked hotspot. In the upper left is the "callout" - copied from the larger image. I have the aspect ratio right but I am not mapping to the larger image correctly. Ugly code below... Sorry this post is so long - I just figured I ought to provide as much info as possible. Thanks for any tips! --trace of my data values *source BitmapDada 1152 864 scaled to rect 800 600 scaled BitmapData 800 600 selection BitmapData 58 56 scaled selection 83 80 ratio 1.44 before (x=544, y=237, w=58, h=56) (x=544, y=237, w=225.04, h=217.28) * Image here: http://i795.photobucket.com/albums/yy237/skinnyTOD/exampleST.jpg public function onExpandCallout(event:MouseEvent):void{ if (maskBitmapData.getPixel32(event.localX, event.localY) != 0){ var maskClone:BitmapData = maskBitmapData.clone(); //amount to scale callout - this will vary/can be changed by user var scale:Number =150 //scale percentage var normalizedScale :Number = scale/=100; var w:Number = maskBitmapData.width*normalizedScale; var h:Number = maskBitmapData.height*normalizedScale; var ratio:Number = (sourceBD.width /targetRect.width); //creat bmpd of the scaled size to copy source into var scaledBitmapData:BitmapData = new BitmapData(maskBitmapData.width * ratio, maskBitmapData.height * ratio, true, 0xFFFFFFFF); trace("source BitmapDada " + sourceBD.width, sourceBD.height); trace("scaled to rect " + targetRect.width, targetRect.height); trace("scaled BitmapData", bkgnImageSprite.width, bkgnImageSprite.height); trace("selection BitmapData", maskBitmapData.width, maskBitmapData.height); trace("scaled selection", scaledBitmapData.width, scaledBitmapData.height); trace("ratio", ratio); var scaledBitmap:Bitmap = new Bitmap(scaledBitmapData); var scaleW:Number = sourceBD.width / scaledBitmapData.width; var scaleH:Number = sourceBD.height / scaledBitmapData.height; var scaleMatrix:Matrix = new Matrix(); scaleMatrix.scale(ratio,ratio); var sRect:Rectangle = maskSprite.getBounds(bkgnImageSprite); var sR:Rectangle = sRect.clone(); var ss:Sprite = new Sprite(); ss.graphics.lineStyle(8, 0x0000FF); //ss.graphics.beginFill(0x000000, 1); ss.graphics.drawRect(sRect.x, sRect.y, sRect.width, sRect.height); //ss.graphics.endFill(); this.addChild(ss); trace("before " + sRect); w = uint(sRect.width * scaleW); h = uint(sRect.height * scaleH); sRect.inflate(maskBitmapData.width * ratio, maskBitmapData.height * ratio); sRect.offset(maskBitmapData.width * ratio, maskBitmapData.height * ratio); trace(sRect); scaledBitmapData.copyPixels(sourceBD, sRect, new Point()); addChild(scaledBitmap); scaledBitmap.x = offsetPt.x; scaledBitmap.y = offsetPt.y; } }

    Read the article

  • how this scaling down for css code is worked?

    - by harris
    this is a code for scaling down for css. i was wondering, how this worked. please someone explain to me part by part. thank you very much. /* ======================================================================== / / Copyright (C) 2000 - 2009 ND-Tech. Co., Ltd. / / All Rights Reserved. / / ======================================================================== / / Project : ScaleDown Created : 31-AUG-2009 / / File : main.c Contact : [email protected] / / ======================================================================== / / You are free to use or modify this code to the following restrictions: / / Acknowledge ND Tech. Co. Ltd. / / Or, put "Parts of code by ND Tech. Co., Ltd." / / Or, leave this header as it is. / / in somewhere in your code. / / ======================================================================== */ include "vm3224k.h" define CE0CTL *(volatile int *)(0x01800008) define CE2CTL *(volatile int *)(0x01800010) define SDCTL *(volatile int *)(0x01800018) define LED *(volatile short *)(0x90080000) // Definitions for async access(change as you wish) define WSU (2<<28) // Write Setup : 0-15 define WST (8<<22) // Write Strobe: 0-63 define WHD (2<<20) // Write Hold : 0-3 define RSU (2<<16) // Read Setup : 0-15 define TA (3<<14) // Turn Around : 0-3 define RST (8<<8) // Read Strobe : 0-63 define RHD (2<<0) // Read Hold : 0-3 define MTYPE (2<<4) /* EDMA Registers */ define PaRAM_OPT 0 // Options define PaRAM_SRC 1 // Source Address define PaRAM_CNT 2 // Frame count, Element count define PaRAM_DST 3 // Destination Address define PaRAM_IDX 4 // Frame index, Element index define PaRAM_RDL 5 // Element count reload, Link address define EDMA_CIPR *(volatile int *)0x01A0FFE4 // EDMA Channel interrupt pending low register define EDMA_CIER *(volatile int *)0x01A0FFE8 // EDMA Channel interrupt enable low register define EDMA_CCER *(volatile int *)0x01A0FFEC // EDMA Channel chain enable register define EDMA_ER *(volatile int *)0x01A0FFF0 // EDMA Event low register define EDMA_EER *(volatile int *)0x01A0FFF4 // EDMA Event enable low register define EDMA_ECR *(volatile int *)0x01A0FFF8 // EDMA Event clear low register define EDMA_ESR *(volatile int *)0x01A0FFFC // EDMA Event set low register define PRI (2<<29) // 1:High priority, 2:Low priority define ESIZE (1<<27) // 0:32bit, 1:16bit, 2:8bit, 3:reserved define DS2 (0<<26) // 1:2-Dimensional define SUM (0<<24) // 0:no update, 1:increment, 2:decrement, 3:by index define DD2 (0<<23) // 1:2-Dimensional define DUM (0<<21) // 0:no update, 1:increment, 2:decrement, 3:by index define TCINT (1<<20) // 0:disable, 1:enable define TCC (8<<16) // 4 bit code define LINK (0<<1) // 0:disable, 1:enable define FS (1<<0) // 0:element, 1:frame define OptionField_0 (PRI|ESIZE|DS2|SUM|DD2|DUM|TCINT|TCC|LINK|FS) define DD2_1 (1<<23) // 1:2-Dimensional define DUM_1 (1<<21) // 0:no update, 1:increment, 2:decrement, 3:by index define TCC_1 (9<<16) // 4 bit code define OptionField_1 (PRI|ESIZE|DS2|SUM|DD2_1|DUM_1|TCINT|TCC_1|LINK|FS) define TCC_2 (10<<16)// 4 bit code define OptionField_2 (PRI|ESIZE|DS2|SUM|DD2|DUM|TCINT|TCC_2|LINK|FS) define DS2_3 (1<<26) // 1:2-Dimensional define SUM_3 (1<<24) // 0:no update, 1:increment, 2:decrement, 3:by index define TCC_3 (11<<16)// 4 bit code define OptionField_3 (PRI|ESIZE|DS2_3|SUM_3|DD2|DUM|TCINT|TCC_3|LINK|FS) pragma DATA_SECTION ( lcd,".sdram" ) pragma DATA_SECTION ( cam,".sdram" ) pragma DATA_SECTION ( rgb,".sdram" ) pragma DATA_SECTION ( u,".sdram" ) extern cregister volatile unsigned int IER; extern cregister volatile unsigned int CSR; short camcode = 0x08000; short lcdcode = 0x00000; short lcd[2][240][320]; short cam[2][240][320]; short rgb[64][32][32]; short bufsel; int *Cevent,*Levent,*CLink,flag=1; unsigned char v[240][160],out_y[120][160]; unsigned char y[240][320],out_u[120][80]; unsigned char u[240][160],out_v[120][80]; void PLL6713() { int i; // CPU Clock Input : 50MHz *(volatile int *)(0x01b7c100) = *(volatile int *)(0x01b7c100) & 0xfffffffe; for(i=0;i<4;i++); *(volatile int *)(0x01b7c100) = *(volatile int *)(0x01b7c100) | 0x08; *(volatile int *)(0x01b7c114) = 0x08001; // 50MHz/2 = 25MHz *(volatile int *)(0x01b7c110) = 0x0c; // 25MHz * 12 = 300MHz *(volatile int *)(0x01b7c118) = 0x08000; // SYSCLK1 = 300MHz/1 = 300MHz *(volatile int *)(0x01b7c11c) = 0x08001; // SYSCLK2 = 300MHz/2 = 150MHz // Peripheral Clock *(volatile int *)(0x01b7c120) = 0x08003; // SYSCLK3 = 300MHz/4 = 75MHz // SDRAM Clock for(i=0;i<4;i++); *(volatile int *)(0x01b7c100) = *(volatile int *)(0x01b7c100) & 0xfffffff7; for(i=0;i<4;i++); *(volatile int *)(0x01b7c100) = *(volatile int *)(0x01b7c100) | 0x01; } unsigned short ybr_565(short y,short u,short v) { int r,g,b; b = y + 1772*(u-128)/1000; if (b<0) b=0; if (b>255) b=255; g = y - (344*(u-128) + 714*(v-128))/1000; if (g<0) g=0; if (g>255) g=255; r = y + 1402*(v-128)/1000; if (r<0) r=0; if (r>255) r=255; return ((r&0x0f8)<<8)|((g&0x0fc)<<3)|((b&0x0f8)>>3); } void yuyv2yuv(char *yuyv,char *y,char *u,char *v) { int i,j,dy,dy1,dy2,s; for (j=s=dy=dy1=dy2=0;j<240;j++) { for (i=0;i<320;i+=2) { u[dy1++] = yuyv[s++]; y[dy++] = yuyv[s++]; v[dy2++] = yuyv[s++]; y[dy++] = yuyv[s++]; } } } interrupt void c_int06(void) { if(EDMA_CIPR&0x800){ EDMA_CIPR = 0xffff; bufsel=(++bufsel&0x01); Cevent[PaRAM_DST] = (int)cam[(bufsel+1)&0x01]; Levent[PaRAM_SRC] = (int)lcd[(bufsel+1)&0x01]; EDMA_ESR = 0x80; flag=1; } } void main() { int i,j,k,y0,y1,v0,u0; bufsel = 0; CSR &= (~0x1); PLL6713(); // Initialize C6713 PLL CE0CTL = 0xffffbf33;// SDRAM Space CE2CTL = (WSU|WST|WHD|RSU|RST|RHD|MTYPE); SDCTL = 0x57115000; vm3224init(); // Initialize vm3224k2 vm3224rate(1); // Set frame rate vm3224bl(15); // Set backlight VM3224CNTL = VM3224CNTL&0xffff | 0x2; // vm3224 interrupt enable for (k=0;k<64;k++) // Create RGB565 lookup table for (i=0;i<32;i++) for (j=0;j<32;j++) rgb[k][i][j] = ybr_565(k<<2,i<<3,j<<3); Cevent = (int *)(0x01a00000 + 24 * 7); Cevent[PaRAM_OPT] = OptionField_0; Cevent[PaRAM_SRC] = (int)&camcode; Cevent[PaRAM_CNT] = 1; Cevent[PaRAM_DST] = (int)&VM3224ADDH; Cevent = (int *)(0x01a00000 + 24 * 8); Cevent[PaRAM_OPT] = OptionField_1; Cevent[PaRAM_SRC] = (int)&VM3224DATA; Cevent[PaRAM_CNT] = (239<<16)|320; Cevent[PaRAM_DST] = (int)cam[bufsel]; Cevent[PaRAM_IDX] = 0; Levent = (int *)(0x01a00000 + 24 * 9); Levent[PaRAM_OPT] = OptionField_2; Levent[PaRAM_SRC] = (int)&lcdcode; Levent[PaRAM_CNT] = 1; Levent[PaRAM_DST] = (int)&VM3224ADDH; Levent = (int *)(0x01a00000 + 24 * 10); Levent[PaRAM_OPT] = OptionField_3; Levent[PaRAM_SRC] = (int)lcd[bufsel]; Levent[PaRAM_CNT] = (239<<16)|320; Levent[PaRAM_DST] = (int)&VM3224DATA; Levent[PaRAM_IDX] = 0; IER = IER | (1<<6)|3; CSR = CSR | 0x1; EDMA_CCER = (1<<8)|(1<<9)|(1<<10); EDMA_CIER = (1<<11); EDMA_CIPR = 0xffff; EDMA_ESR = 0x80; while (1) { if(flag) { // LED = 0; yuyv2yuv((char *)cam[bufsel],(char *)y,(char *)u,(char *)v); for(j=0;j<240;j++) for(i=0;i<320;i++) lcd[bufsel][j][i]=0; for(j=0;j<240;j+=2) for(i=0;i<320;i+=2) out_y[j>>1][i>>1]=(y[j][i]+y[j][i+1]+y[j+1][i]+y[j+1][i+1])>>2; for(j=0;j<240;j+=2) for(i=0;i<160;i+=2) { out_u[j>>1][i>>1]=(u[j][i]+u[j][i+1]+u[j+1][i]+u[j+1][i+1])>>2; out_v[j>>1][i>>1]=(v[j][i]+v[j][i+1]+v[j+1][i]+v[j+1][i+1])>>2; } for (j=0;j<120;j++) for (i=0;i<160;i+=2) { y0 = out_y[j][i]>>2; u0 = out_u[j][i>>1]>>3; v0 = out_v[j][i>>1]>>3; y1 = out_y[j][i+1]>>2; lcd[bufsel][j+60][i+80]=rgb[y0][u0][v0]; lcd[bufsel][j+60][i+81]=rgb[y1][u0][v0]; } flag=0; // LED = 1; } } }

    Read the article

  • CSS IE Hover Effect - Overlapping Elements, Display:Block, and Crashes

    - by Emtucifor
    In a fairly simple page, I have some text appear on hover over some links, like a tooltip. To start with here's my test page I'm working with: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Tooltip Test Page</title> <style type="text/css"> html, body, form, table, tr, td, div, p, h1, h2, h3, h4, h5 { border:0; margin:0; padding:0; } body { margin:10px; } html, body, table { font-family:Arial, Helvetica, sans-serif; font-size:12px; } h1 { font-weight:bold; font-size:16px; } table {border-collapse:collapse;} td {padding:0 8px 0 0;} a.tooltip { z-index:24; text-decoration:none; cursor:default; position:relative; color:#000; display:block; width:100px; } a.tooltip span {display:none;} a.tooltip:hover, a.tooltip:active { z-index:25; color:; background:; /* the color and background actually don't matter for their values, it's just that these have to change for IE to apply this style properly. Leaving out the color or the background makes this fail in different ways. */ } a.tooltip:hover span, a.tooltip:active span { display:block; position:absolute; color:black; background-color:#FFFFCC; border:1px solid black; padding:1px; text-align:left; top:0; left:0; margin-top:-1px; } td span.s5 {color:#ff0000} td span.s6 {color:#0000ff} </style> <script type="text/javascript"> function labelSubmit(label) { document.getElementById('o').value=label; document.BackAt.submit(); } </script> </head> <body> <h1>tooltip Test Page</h1> <table> <tbody> <tr> <td><span class="s6">&#x25a0;</span> Name 3</td> <td class="status"><a class="tooltip" href="" onclick="return false;">Status 6<span>Some very long tooltip text to demonstrate the problem by overlapping the cells below.</span></a></td> </tr> <tr> <td><span class="s6">&#x25a0;</span> Name 1</td> <td class="status"><a class="tooltip" href="" onclick="return false;">Status 6</a></td> </tr> <tr> <td><span class="s6">&#x25a0;</span> Name 2</td> <td class="status"><a class="tooltip" href="" onclick="return false;">Status 6<span>Some tooltip text</span></a></td> </tr> <tr> <td><span class="s6">&#x25a0;</span> Name 4</td> <td class="status"><a class="tooltip" href="" onclick="return false;">Status 6</a></td> </tr> <tr> <td><span class="s5">&#x25a0;</span> Name 5</td> <td class="status"><a class="tooltip" href="" onclick="return false;">Status 5<span>More Notes</span></a></td> </tr> <tr> <td><span class="s6">&#x25a0;</span> Name 6</td> <td class="status"><a class="tooltip" href="" onclick="return false;">Status 6<span>Yet more notes</span></a></td> </tr> </tbody> </table> </body> </html> The problem I'm experiencing is that text from other values shows through the tooltip text. Hover over the first row, second column to see the effect. There are a couple of things I'm trying to accomplish: Make the activation area for the hover wider, so hovering over some space to the right of "Status 6" calls up the tooltip (say, 100-150px total width of target). At first, when I was adding "display:block" to a.tooltip, IE was terminating on hover. I resolved that by removing width:14em from a.tooltip:hover. Styling the width of the hover event + display.block on the a element does BAD things. Change the width of the tooltip without changing the width of the column/parent element (so the tooltip can be wider than itso it takes up less vertical space). Options for making the tooltips change width with its contents up to a max width, at which point the lines wrap would be awesome, but probably impossible in IE. As soon as I put a width in place on a.tooltip, the portion of the tooltip that is above other rows than the hover source let text show through from those cells. Remove the width and you'll see that the text doesn't show through any more. The hover effect applies to the entire tooltip, so if the tooltip covers 3 rows, while moving the mouse downward, the next 2 rows won't activate because the cursor hasn't left the tooltip. Can the hover effect apply only to the initial element hovered over and not the tooltip itself so moving the mouse downward will show each tooltip in each row? It would be nice if the links could never be activated (they can't take the focus). I don't know if that's possible. Too bad IE doesn't support hover on any elements but links. Note: soon IE6 will be abandoned in favor of IE8. If it makes a big difference, then IE8 can be the target browser instead. Thanks for your help.

    Read the article

  • css: problems with floating a sidebar

    - by user239831
    hey guys, i can't seem to get it working. i have a div.post with #comments and a #respond form underneath it. the div.post contains the #comments and the #respond form. i simply want to float the sidebar to the right of the entire div.post and i cannot seem to get it work. here is an example. any idea how to solve that - its probably quite simple. :) <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>layout</title> <style type="text/css"> body { margin:0; padding:0; } #main { width:100%; background:#cfcfcf; } .inner { margin: 0 auto; padding: 96px 72px 0; width: 1068px; border-color: #000; border-style: solid; border-width: 0 1px; color: #3C3C3C; } .post { width: 705px; background:#999; } #comments, #respond { width: 705px; background:#999; } #sidebar { width:338px; background:#777; margin-left:730px; } </style> </head> <body> <div id="main"> <div class="inner"> <div id="post" class="post"> <h2>Lorem Ipsum Test Page</h2> <div class="entry"> <p>Lorem ipsum sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> </div> <!-- entry --> <div id="comments"> <h2>One Response</h2> <ol class="commentlist"> <li id="comment" class="comment"> <div class="comment-body"> <div class="comment-author vcard"> Tom says: </div> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea found. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> </div> </li> </ol> </div> <!-- comments --> <div id="respond"> <h2>Leave a Reply</h2> <form id="commentform" method="post" action=""> <input type="text" aria-required="true" tabindex="1" size="22" value="" id="author" name="author" gtbfieldid="230"> <label for="author">Name (required)</label> <input type="text" aria-required="true" tabindex="2" size="22" value="" id="email" name="email" gtbfieldid="231"> <label for="email">Mail (will not be published) (required)</label> <input type="text" tabindex="3" size="22" value="" id="url" name="url" gtbfieldid="232"> <label for="url">Website</label> </div> <textarea tabindex="4" rows="10" cols="58" id="comment" name="comment"></textarea> <input type="submit" value="Submit Comment" tabindex="5" id="submit" name="submit"> <input type="hidden" id="comment_post_ID" value="36" name="comment_post_ID"> <input type="hidden" value="0" id="comment_parent" name="comment_parent"> </form> </div> <!-- respond --> </div> <!-- post --> <div id="sidebar"> <h2>Meta</h2> <ul> <li>Login</li> <li>Anything</li> </ul> <h2>Subscribe</h2> <ul> <li>Entries (RSS)</li> <li>Comments (RSS)</li> </ul> </div> <!-- sidebar --> </div> <!-- inner --> </div> <!-- main --> </body> </html> edit: can you see any errors in my html. firebug says that the sidebar div is actually outside the .inner div. however if i look at the code it's inside.

    Read the article

  • Adapting a HTML/CSS dropdown menu to multi-level

    - by Adam Nygate
    Ive been trying to make the original dropdown into multi level for a site im working on. All of my attempts have failed (. For some reason i can only do "margin-right" to align the elements, and this causes some problems. I think it has something to do with the position attribute. Here is my HTML: <ol id="nav"> <li><a href="index.php">Home</a></li> <li class="dropdown_alignedLeft"> <a href="">Products</a> <ul><li class="dropdown_alignedRight"> <a href="">iPoP</a> <ul style="margin-right:-400px; top:0px;-webkit-border-top-right-radius: 5px;border-top-right-radius: 5px;-moz-border-radius-topright: 5px;"><li><a href="customers.php?category=ipop">iPoP - Network Solutions for Vessels</a></li></ul><li class="dropdown_alignedRight"> <a href="">Cameras</a> <ul style="margin-right:-400px; top:0px;-webkit-border-top-right-radius: 5px;border-top-right-radius: 5px;-moz-border-radius-topright: 5px;"><li><a href="customers.php?category=icam">iCam 501 Ultra - Intrinsically Safe Digital Camera with Flash</a></li></ul><li class="dropdown_alignedRight"> <a href="">BNWAS</a> <ul style="margin-right:-400px; top:0px;-webkit-border-top-right-radius: 5px;border-top-right-radius: 5px;-moz-border-radius-topright: 5px;"><li><a href="customers.php?category=bnwas">BNWAS - Bridge Navigation Watch Alarm System</a></li></ul><li class="dropdown_alignedRight"> <a href="">Lighting</a> <ul style="margin-right:-400px; top:0px;-webkit-border-top-right-radius: 5px;border-top-right-radius: 5px;-moz-border-radius-topright: 5px;"><li><a href="customers.php?category=peli">Peli 2690 - Intrinsically Safe LED Head Lamp</a></li></ul><li class="dropdown_alignedRight"> <a href="">Communication</a> <ul style="margin-right:-400px; top:0px;-webkit-border-top-right-radius: 5px;border-top-right-radius: 5px;-moz-border-radius-topright: 5px;"><li><a href="customers.php?category=handy">Ex-Handy 06 - Intrinsically Safe Cell Phone</a></li></ul> </ul> <li class="dropdown_alignedLeft"> <a href="">Customers</a> <ul> <li><a href="customers.php?category=maritime">Maritime</a></li> <li><a href="customers.php?category=non">Non-Maritime</a></li> <li class="dropdown_lastItem"><a href="customers.php?category=organizations">Regulatory Organizations</a></li> </ul> <li><a href="order.php">Product Enquiry</a></li> <li><a href="contact.php">Contact Us</a></li> <li class="dropdown_alignedLeft"> <a href="">Company</a> <ul> <!-- <li><a href="">About Us</a></li> --> <li><a href="newsandpr.php?category=News">News</a></li> <li class="dropdown_lastItem"><a href="newsandpr.php?category=Press Release">Press Releases</a></li> </ul> </ol> And my CSS: #nav { float:right; margin:15px 0 0; } #nav li { float:left; } #nav li a { display:block; font-family:"PT Sans","Helvetica Neue",Arial,sans-serif; font-size:16px; text-decoration:none; color:#2B95C8; padding:10px 20px 20px; } .dropdown_alignedLeft,.dropdown_alignedRight { position:relative; } #nav .dropdown_alignedLeft>a,#nav .dropdown_alignedRight>a { background:url(../images/dropdown_arrow_blue.png) no-repeat top right; padding:10px 30px 20px 20px; } #nav .dropdown_alignedLeft:hover>a,#nav .dropdown_alignedRight:hover>a { -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px; -moz-border-radius-bottomright:0; -moz-border-radius-bottomleft:0; -webkit-border-top-left-radius:5px; -webkit-border-top-right-radius:5px; -webkit-border-bottom-right-radius:0; -webkit-border-bottom-left-radius:0; border-top-left-radius:5px; border-top-right-radius:5px; border-bottom-right-radius:0; border-bottom-left-radius:0; color:#FFF; background:#2378A1 url(../images/dropdown_arrow_blue.png) no-repeat bottom right; } .dropdown_alignedLeft ul,.dropdown_alignedRight ul { display:none; } #nav .dropdown_alignedLeft:hover>ul,#nav .dropdown_alignedRight:hover>ul { display:block; z-index:100; position:absolute; top:50px; -moz-border-radius-topleft:0; -moz-border-radius-topright:0; -moz-border-radius-bottomright:5px; -moz-border-radius-bottomleft:5px; -webkit-border-top-left-radius:0; -webkit-border-top-right-radius:0; -webkit-border-bottom-right-radius:5px; -webkit-border-bottom-left-radius:5px; border-top-left-radius:0; border-top-right-radius:0; border-bottom-right-radius:5px; border-bottom-left-radius:5px; background:#2378A1; padding:0 0 6px; } #nav .dropdown_alignedRight:hover>ul { top:50px; right:0; text-align:right; } #nav li ul li { float:none; border-bottom:1px dashed #2B95C8; margin:0 20px; } #nav li ul li.dropdown_innerTitle { border:none; font-family:"Helvetica Neue",Arial,sans-serif; font-size:15px; white-space:nowrap; color:#C8DDE7; margin:10px 20px 0; padding:10px 0; } #nav li ul li.dropdown_lastItem { border:none; } #nav li ul li a { font-family:"Helvetica Neue",Arial,sans-serif; font-size:13px; color:#FFF; white-space:nowrap; padding:10px 0 9px; } #nav>li:hover>a,#nav li .current_page { color:#2378A1; background:url(../images/current_page_arrow_blue.png) no-repeat center bottom; } #nav li ul li a:hover { color: #C8DDE7; } For a live version of the menu, please go here: JSFiddle - Live Menu

    Read the article

  • Zooming options terminology

    - by Mark
    I've come up with 4 different ways to fit an image inside a viewing region, but I'm trouble coming up with names for them. Perhaps someone can suggest some? Fit image in viewing region, do not enlarge if image is smaller Size image so it fits snuggly inside the viewing region (enlarge if necessary) -- the image is as large as possible while still fitting within the viewing region Size image so that it fills the entire viewing region -- the image will be the same size or bigger than the viewing region 1:1 ratio; 1 pixel in the image corresponds to 1 pixel on screen All zooming options maintain aspect ratio. Stretching is just ugly, so it's not an option :)

    Read the article

  • Which is the best image hosting site for hosting images for the website? [closed]

    - by rahul dagli
    Possible Duplicate: How to find web hosting that meets my requirements? I currently have a website and blog and using a limited web hosting plan. When I upload images on my hosting server it consumes a lot of bandwidth and space. So I was thinking of hosting images on some-other image hosting site and direct linking it to my site. I found out few sites like imageshack, photobucket, tinypic, imgur. However, I see all have certain restrictions. The features i am looking for are as follows: 1. At least 10gb space 2. At least 500gb bandwidth (bec I hav very high traffic) 3. Very high speed even during heavy load like 1000 visitors accessing every hour. 4. Ultra reliable servers (99.9% uptime) 5. Privacy control 6. Must not ever delete image if inactive 7. Create and manage albums 8. Company that will last long in business atleast for next 10 years. 9. Free of cost 10. Hotlinking/ Directlinking image.

    Read the article

  • Tackling thin content on an images gallery

    - by Ted Wilmont
    We run an images gallery as part of our site, however we have over 8,000 images and every image has a separate HTML page of its own to display the image caption, related image and comments from users of the site. This seems to be a problem especially with the Google Panda update because these pages are technically "thin content". What would be the best way to tackle this? We'd love some feedback and advice regarding this scenario. We have a few options we thought of already but can't decide: We could noindex the separate image pages and loose any image search listings we have for the image in favour of removing these thin pages from the index. We could 301 all of the individual image pages back to the image category listing and anchor each image (e.g. #img2122) and include all of the comments and description on the category listing page itself. If we was to simply list all of the images and content on the category pages themself; what's the best method? We could add all of the content in the anchor tags and use jQuery to display them in a box when a user clicks on the image or we could use Ajax to retrieve the information. However, what's the best Ajax method for SEO? Any ideas, suggestions, tips or advice is greatly appreciated and thank you in advance for any given.

    Read the article

  • Which is the best image hosting site for hosting images for website? [closed]

    - by rahul dagli
    I currently have a website and blog and using a limited web hosting plan. When I upload images on my hosting server it consumes a lot of bandwidth and space. So I was thinking of hosting images on some-other image hosting site and direct linking it to my site. I found out few sites like imageshack, photobucket, tinypic, imgur. However, I see all have certain restrictions. The features i am looking for are as follows: 1. At least 10gb space 2. At least 500gb bandwidth (bec I hav very high traffic) 3. Very high speed even during heavy load like 1000 visitors accessing every hour. 4. Ultra reliable servers (99.9% uptime) 5. Privacy control 6. Must not ever delete image if inactive 7. Create and manage albums 8. Company that will last long in business atleast for next 10 years. 9. Free of cost 10. Hotlinking/ Directlinking image.

    Read the article

  • Storing images in file system and returning URLs or virtually resizing and returning byte arrays?

    - by ismaelf
    I need to create a REST web service to manage user submitted images and displaying them all in a website. There are multiple websites that are going to use this service to manage and display images. The requirements are to have 5 pre-defined image sizes available. The 2 options I see are the following: The web service will create the 5 images, store them in the file system and and store the URL's in the database when the user submits the image. When the image is requested, the web service will return an array of URLs. I see this option to be a little hard on the hard drive. The estimates are 10,000 users per site, and lets say, 100 sites. The heavy processing will be done when the user submits the image and each image is going to be pulled from the File System. The web service will store just the image that the user submits in the file system and it's URL in the database. When the user request images, the web service will get the info from the DB, load the image on memory, create its 5 instances and return an object with 5 image arrays (I will probably cache the arrays). This option is harder on the processor and memory. The heavy processing will be done when the images get requested. A plus I see for option 2 is that it will give me the option to rewrite the URL of the image and make them site dependent (prettier) than having a image repository for all websites. But this is not a big deal. What do you think of these options? Do you have any other suggestions?

    Read the article

  • adv. styling list with css

    - by Ayrton
    Hi I need to style a regular html list like the following picture: as you see each each list item has a padding on the sides and a top&bottom border. When hovered the border has a width of 100% of the <ul> item. Now the problem actually is: when you give each <li> element a top & bottom border I have a border of 2 px between each element (bottom border from the first element and the top border from the second element), I don't want that however I do not know any solution for this. my html: <div id="tab_top" class="tab"> <div class="bottom"> <div class="cont"> <ul> <li><a href="#">Here’s a Sample Post <span class="ct">32</span></a></li> <li><a href="#">Here’s a Sample Post <span class="ct">32</span></a></li> <li><a href="#">Here’s a Sample Post <span class="ct">32</span></a></li> <li><a href="#">Here’s a Sample Post <span class="ct">32</span></a></li> <li><a href="#">Here’s a Sample Post <span class="ct">32</span></a></li> <li><a href="#">Here’s a Sample Post <span class="ct">32</span></a></li> <li><a href="#">Here’s a Sample Post <span class="ct">32</span></a></li> </ul> </div> </div> </div> my css: #tabs .tab div.cont ul li a{line-height:30px; height:30px; color:#3ca097; display:block; padding-left:11px; padding-right:13px; width:259px;} #tabs .tab div.cont ul li a span.ct{float:right;background:url(images/count_comments.gif) no-repeat left top; height:13px; padding-left:16px; margin-top:10px; line-height:12px;} #tabs .tab div.cont ul li a:hover{color:#fff; background-color:#6fd2c8; border-top:1px solid #7db9b2; border-bottom:1px solid #7db9b2; height:28px; line-height:28px;} #tabs .tab div.cont ul li a:hover span.ct{background-position:left bottom; color:#23665f; margin-top:9px;} I would be pleased if you can help me Yours truthfully

    Read the article

  • css & horizontal scrolling

    - by zen
    One of my most favorite websites is that of the Oxford Hotel in Romania. I like the simplicity of the site and how it flows. I am trying to create a similar scrolling effect using jquery and I've been somewhat successful to a point. My trouble is with css... I am not a wizard in that department. Anyway,...my questions! 1. How can I first make sure that the ".box" class will be in the center of the page when the corresponding link is clicked? Right now it positions itself on the left. 2. Then, how can I tweak this code so that the user only can see the width of the screen and not the browser scroller/the rest of my ".box" divs? Refer to the oxford link if you need to see an example of what I'd like to achieve. This is a portion of my current CSS. body { background: #f2f2f2; text-align:left; color:#666; font-size:14px; font-family:georgia, 'time new romans', serif; margin:0 auto; padding:0; } #menu { background: #333333; position: fixed; top: 0px; left: 0; border: 1px solid #000; clear: both; float: left; font-family: helvetica, sans-serif; font-size: 18px; text-transform: uppercase; margin: 0; padding: 18px; z-index: 500; filter: alpha(opacity=75); opacity: .75; } #menu ul{ list-style-type: none; margin: 0; padding: 0; } #menu ul li{ list-style-type: none; color: #777; display: inline; margin: 0; padding: 0 10px 0 10px; } #menu ul li a{ text-decoration: none; list-style-type: none; color: #777; display: inline; margin: 0; padding: 0; } #menu ul li a:hover{ text-decoration: none; list-style-type: none; color: #fff; display: inline; margin: 0; padding: 0; } #container { position: absolute; top: 120px; width: 70000px; margin: 0; padding: 0; } .box { background: white; border: 3px dashed #f2f2f2; width: 600px; float: left; font-size: 10px; line-height: 15px; margin: 0; padding: 5px 30px 30px 30px; }

    Read the article

  • ie9/CSS: Flyout menu not working in ie9, but looks great in Firefox/Chrome

    - by Brandon
    Please see this flyout menu: http://www.caseen.com/store.html. It looks amazing in both Firefox and Chrome, but not in IE9! Trying to see what is going on =(. It looks like ie9 is completing ignoring the stylesheet, but in error checking and clicking ie9 direct mode, it shows up however VERY ugly with huge nasty white borders around the links! Please see my code: <div class="flyout"> <ul> <!--START: CATEGORIES--> <!--START: CATEGORY_FORMAT--> <li><a href="view_category.asp?cat=CATID">&nbsp;CATEGORY</a> <!--END: CATEGORY_FORMAT--> <ul><!--START: SUB_CATEGORY_FORMAT--> <li><a href="view_category.asp?cat=CATID">&nbsp;CATEGORY</a></li> <!--END: SUB_CATEGORY_FORMAT--></ul> <!--END: CATEGORIES--> </li> </ul> </div> AND CSS .flyout { width: 130px; height: auto; position:relative; margin: -10 0; padding: 0; z-index:10000; } .flyout ul li a { display:block; text-decoration:none; color: #fff; width: 130px; border: solid; border-color: #000; border-width: 0 0 0 5px; text-align:left; font-size:12px; line-height: 25px; } .flyout ul { padding:0px; list-style-type: none; } .flyout ul li { float:left; margin-right:1px; position:relative; } .flyout ul li ul { display: none; } .flyout ul li:hover a { border: solid; border-color: #fff; border-width: 0 2 0 5px; color: #60dfe5; } .flyout ul li:hover ul { display:block; position:absolute; top:0; left:130px; width:10px; } .flyout ul li:hover ul li a.hide { background:#000; color:#fff; } .flyout ul li:hover ul li:hover a.hide {width:180px;} .flyout ul li:hover ul li ul {display: none;} .flyout ul li:hover ul li a { display:block; background:#000; color:#60dfe5; width:200px; } .flyout ul li:hover ul li a:hover { background:#000; color:#fff; } Thanks, Brandon

    Read the article

< Previous Page | 79 80 81 82 83 84 85 86 87 88 89 90  | Next Page >