I've done custom image uploader for ckeditor 3.6.4. I insert an image and button "center" for paragraphs dont work for image. In fckeditor I could align image with this button. How to make that work either in cekdtior.
http://imageshack.us/photo/my-images/17/66892061.jpg/
This is because the image must be wrapped in a (psuedo)block element with text-align: center; to be centered. There's no other (valid) way to center the image so the Center button is disabled for images. I fact, what you see in FCK was totally wrong, as for such case:
<p>Foo<img src="path" />Bar</p>
The entire paragraph was centered:
<p style="text-align: center;">Foo<img src="path" />Bar</p>
To sum up: you have to do this manually.
Related
I created a demo tour for my product, so I used an image as a background and on top of it lightbox.
So when I used Chrome, it looks great but on other browsers, the pointer does not point on the right object, the location is not the same.
Please open this URL on chrome, click "start tour" and then do the same on Edge
https://www.analytics-model.com/tutorial
How to deal with this issue?
Your approach to this is bad.
The problem is also browser independent as the window size of the browser is what misaligns the overlay-elements of your tour.
It's simply bad responsive design to other window sizes.
First, don't use an backdrop-image, also not for a demo.
Reason is, the overlay element needs to be relative to the actual HTML element it's revering to and this can't (easily) be done with an image.
To anchor an element to another one, in this case, a toolbar symbol to the overlay explainer element, you can use the css position property in conjunction with top, bottom, left and right properties.
The anchor element should have the css property "position: relative" and this anchor element has the explainer overlay in it's inner HTML.
The overlay has "position: absolute;" as it's css property and with top, bottom, left and right you then can position it however you please, relative to the anchor element.
In simplified code this looks like this:
html:
<div class="anchor" >
Account
<div class="explainer">
This explains everything about your account.
</div>
</div>
css:
.anchor {
position: relative
}
.explainer {
z-index: 99;
position: absolute;
top: 100%;
left: 0;
}
Working example demo:
https://jsfiddle.net/Krischna_Gabriel/uwzxqfer/191/
In CKEditor, when I select text and set it's alignment to 'center' by clicking button in the toolbar, it appears in the center but when I check its source there is no alignment text.
There should be inline style added in the source like
<p style="text-align: right;">Testing data</p>
Can you try to inspect and check some other css styles overriding text alignment with (text-align:left !important.) applied for your center aligned element.
I'm quite new to CSS and web programming. What I'm trying to do is add a hovering effect for a button. I'm doing this by using 2 images.
There is a button called download and in hover code I add:
.button:hover{
background-image:url(images/button2.png);
}
The problem is the button takes time to load ie: on hover there is a delay to show the button. How can i solve this?
EDIT: I tried using preloading,but there is also a kind of delay
div#preloadedImages
{
width: 0px;
height: 0px;
background-image: url(images/button2.png);
}
You should use an image sprite to get rid of the delay. A sprite is one larger file that contains multiple images. Your button will have it's background set to sprite.png file. You can then change the background-position property to shift the positioning of your sprite.
On the other note - why do you use images for buttons? Most buttons can be done in pure CSS with some fallbacks for older browsers.
Create a single image out of the two images (which is called a sprite)
Here is a working example with an animation as well to show you how it works.
Click here >>> FIDDLE
Then set your background position to to show the normal state of the background image
.button {
width: 150px;
height: 50px;
background-image: url('image-sprite.jpg');
background-position: left top;
}
Then on your hover css, just move the background image to show the lower part of it
.button:hover {
background-position: left bottom;
}
Keep your current css and other stuff as they are and add an <img> component at anywhere of your page and make it hidden to load the image initially.
<img src="images/button2.png" style="display:none;"/>
I have a div width lets say width:900px; height:300px; overflow:hidden;
Into the div there are some images with height:300px and different widths and a small right margin/padding of 10px;
So there will be 2 or more images visible in the holder.
I need 2 buttons which slides the images to the 0 point (left:0;).
So when I press on the next arrow the next image (which can be already be visible for a small part) slides to the left at the 0 point.
I can't find any sliders which works like that :(
EDIT FOUND IT!
http://jquery.lemmonjuice.com/plugins/slider-variable-widths.php
I have a menu made up of images and on a:hover I want to add a background image rather than simply doing image replacements (all in CSS, no JavaScript).
However, if I simply change the background image, while transparency and horizontal alignment are fine, it's just at the wrong vertical placement. No matter what I try the background image goes to the very bottom of the image and you see about a text height of background image below the main menu image.
Any ideas on how to fix this?
In it's simplest form it can be repeated as follows:
<html>
<head>
<style>a:hover{background:url('over.png');}</style>
</head>
<body>
<img src="item.png" style="border:0; " />
</body>
</html>
item.png is showing about 10 pixels of the top of its image at the bottom of over.png
Thanks.
Adding background-position: x y; still only shows the over.png at the bottom of the image and crops it to the height of one character.
Below shows the two images and what comes out on the right
It'd be easier to debug if you gave us a screenshot and some code. But it sounds like you might just need to position the background image within the element using background-position. You can use pixels, percentages or just top,bottom,left,right to place a background image wherever you want it within an element. http://www.w3schools.com/css/pr_background-position.asp. You might also want to look into image sprites for rollover effects. You would place the original and rollover images onto one file and simple change the background-position on hover.