I am facing a problem in css alignment.
The problem is, i have a single image which is like collage with multiple images in it.
I want to postion on particular image in that collage using css.
I need to set that in my div background.
I checked in internet, i am unable to find a proper solution.
Thanks,
Karthikeyan J
If you download a chrome addon called "SelectorGadget" you may be able to get the exact CSS selector for what you are trying to edit. Then just apply styling to this element. If you post your code, might be able to help more though.
Related
I get strange behavior when I try to insert icons to my elementor page design in SVG format.
This is the original design (supplied with zeplin.io) which im trying to implement with elementor
before I add the last icon, the result in elementor is:
You can see that only the first icon display as expected
Which is strange, but even more strange is that when I had the last I con I get this:
Now non of the icon display as expected, although some of then are more similar to the expected result.
The heart icon got flipped, and the colors changed for the other icons,
Why would adding a new icon effect other icons in such a way?
Why the color and the icon direction doesn't display as set by the SVG design?
NOTE, the direction might be RTL related, but why only the heart got flipped?
I know that I could easily solve this issue by changing the format to PNG, but I could like to understand the reason behind this behavior.
This is happens because the icons have duplicate class values, i.e. the svg is added as-is to the dom tree, along with the <style> definitions.
Therefore any class or id that is duplicated in two SVGs will collide, and the solution is
open the svg with any text editor
search/replace all id/class defined in <style> to have unique name
NOTE: the reason it doesn't happen in the orginial design is that there, the SVGs are added with img tag.
Woprdpress doesn't allow uploading SVGs as images for security reason (I have no idea what kind of security issue it can create, but this is a question by itself)
EDIT: I just noticed that once you add an SVG as an icon, it also become available as an image, so it might be a better solution to upload the SVG as icon and then use them as images. but I didn't try it.
I', new to dreamweaver and building websites period, but one thing that has got me baffled is positioning multiple images.
Example: I add an image to the website and position it using the position tool/code. It works out well. Then I go to add another image and when I go to position it the image I placed first will move with it, as if they are linked some how.
So the question is how can I position them separately so they don't move together when I use the position tool?
Sounds like you need to use FrontPage or something similar. Dreamweaver is in some respects what photoshop is for graphics. It is more for advanced users who will position images correctly using custom CSS and HTML.
If you have access to the source code I'd recommend getting to grips with CSS. Images require position, if this be adding the 'display' or 'position' attributes or even using 'floats'.
Visual editors like the one you're describing are normally pretty limited in the way you can position images like you require. I suppose you could always create the website using tables. Most visual editors such as Dreamweaver will give you full control over these and you can position them correctly into the correct table rows/cells.
I am currently working on a project that involves a background image that needs to be linked specifically to an element within a container div.
The link is: http://idearevolution.ca/clients/jab/
The challenge I am running into is that as I resize my screen the green circle doesn't stay behind the guy. I've run into issues with responsive background images having to work with elements within a contained area in the past, but I've never been happy with my solutions.
The last thing I tried was using Sass to run a loop, adding a media query to update the position every 10 - 20 pixels. I don't like this solution however because of the code bloat it generates.
I am wondering if anyone has run into this issue before and if so, how do you go about resolving it? I've tried a few things but I'm just not happy with any of the solutions.
Any help would be great.
Thanks,
Andrew
Semantics would fix this problem best.
The semantics of using an image is this:
If the Image does not add to the content and explanation of the site,
do not use the image.
So, in truth, this image looks like it should only be part of the design.
Therefore, use the CSS3 Feature of Multiple Backgrounds.
Is there a way to display an image on a webpage such that it won't be copied if the surrounding text is copied?
For instance, I'd like to be able to put a diagonal up arrow after hyperlinks opening in a new window, but I'd like users to be able to copy the link with its surrounding content without copying the up arrow image.
Possible without extravagant CSS?
EDIT: I don't care if the user has access to the image, I just want a streamlined copy-paste experience.
You could use a background image in the CSS of an element like a <div>, but if they want a copy of the image there are still ways of getting it.
If you use a CSS background-image on a div for example, it will not get copied.
Use div and background image for that div, if you can.
Hi I have been trying to trying to hide a portion of image for my blog. Basically what I would like to do is to have images of different sizes (or same width but different heights) on my blog's single post page. But on the main page of the it should show only a portion of it, the size of the visible image should be same for all the images.
I hope the above is clear, just in case I the above explanation is not clear here is a site that works on similar way http://www.creativeapplications.net/
Now I could not get if it's done using CSS or some sort of Javascript.
Could you guys help me to understand it and achieve similar image effect.
Thank you
Takias
You want CSS' clip property: http://www.seifi.org/css/creating-thumbnails-using-the-css-clip-property.html