How do i add a text caption to the image border example mention at http://notions.okuda.ca/2007/02/06/cool-css-image-border-style/
I would like to use the code in the same place that the image path is specified(not in the style sheet), so somewhere in
<img src="SOMETHING.jpg" style="display: block; margin-left: auto; margin-right: auto; padding:8px; border:solid; border-color: #dddddd #aaaaaa #aaaaaa #dddddd; border-width: 1px 2px 2px 1px;" />
You do know that a lot has changed since 2007? CSS3 introduced the box-shadow property that does just this, but more realistically.
Without HTML or JavaScript, you can't do the caption, though. CSS can't read properties from HTML.
Here's a demo: http://jsfiddle.net/2DuyU/3/
I don't see how you can do this without making a p tag like so at the very least:
<p><img src="location/of/my_image" alt=""/><br/>Caption</p>
adding the styling to the p tag instead.
Example: http://jsbin.com/ewazir
I think you should write following
<img>your caption</img>
Related
I used an [hr] tag but instead of just a single line it shows what seems to be the border of something. It has a teeny tiny little edge just on the left of it. The following link should explain what I mean.
Image is here
My code is as follows:
<hr align="center">
Any thoughts?
That is the default browser style. If you don't use any CSS that's what appears as the horizontal rule (<hr />) tag. For example this can be your markup:
<hr class="footer-hr" />
To style it you can use the following CSS code:
.footer-hr {
/* These are browser hacks so the horizontal line looks the same in all browsers
(cross-browser) */
border-color: #000000;
background-color: #000000;
color: #000000;
border: 1px solid #000000;
/* So keep them as they are - you can change the values of course */
}
Also why would you align it to the center, the browser does it by default as I know. Also if you add something like margin: 0px; in CSS you can have the <hr /> wrap the whole line of the page, from the farest left to the farest right corner.
EDIT:
To make the line not to look fat you could use this:
Add to the above CSS code the following rule:
height: 1px; /* Or change the value to whatever other number */
EDIT 2:
As you asked for a bordered div, I don't know what did you want a top-border or a bottom-border or both? Anyway here's the code you need:
MARKUP:
<div class="bordered-div"><!-- Some content here --></div>
CSS:
.bordered-div {
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}
When we have multiple images in the blog and if we click any of those images, blogger enlarges that image. When we click the enlarged image, it shows next enlarged image, and so on.
Is there any way to customize appearance of the enlarged image? At the moment, my image in blog is shadowed (I am using 'box-shadow' style) but when it enlarges its without shadow.
I tried putting 'box-shadow' style in 'href' but no luck.
Well, I found the answer on my own. Just putting here in hope it will help someone coming here.
The images in blog enlarged after clicking, and displayed one by one is done by Blogger's Lightbox feature. We can customize the enlarged images (e.g. we can make them round cornered, put shadow to them etc.) by doing this:
Go in bloggers HTML editor of template
Search using CTRL + F the tag < /head> (No space between '<' and '/')
Just above the tag, add the following code:
<style>
.CSS_LIGHTBOX_SCALED_IMAGE_IMG {
outline: 0px solid #fff !important;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 11px;
-webkit-box-shadow: 0px 0px 5px #000000;
-moz-box-shadow: 0px 0px 5px #000000;
box-shadow: 3px 3px 7px #888;
}
</style>
For more details please refer this:
http://helplogger.blogspot.in/2013/03/how-to-customize-bloggers-lightbox.html
I need to find the border color of a button the HTML properties of the button is like follow
<input class="BUTTON" type="button" title="Add Link" value="Add Link" name="ADD_LINK"/>
and CSS properties are as follow
background-color: transparent;
border: 0 solid #EACCAE;
border-radius: 2px 2px 2px 2px;
height: auto;
padding-bottom: 1px;
vertical-align: text-top;
I am using following code for getting border property
String sColor = driver.findElement(By.xpath("//input[#value='Add Link' and #type='button']")).getCssValue("border");
but its not returning any value. At the same place when I am trying to get the background-color property with code
String sColor = driver.findElement(By.xpath("//input[#value='Add Link' and #type='button']")).getCssValue("background-color");
it's returning transparent.
Can anyone will please suggest me why I am not getting border property or provide me solution for this.
Thanks
The CSS border attribute is actually shorthand for border-width, border-style, and border-color all together. (See the W3 doc.)
If you query each of those styles individually, you should get back the information you're looking for from Selenium.
Im struggling with this for the past 3 months!! - how to adapt css3 to IE7,8 and 9??
this is my page
I am using buttons there, I want to make rounded corners (basic, no?)
so I have used this css
body .main_title {
font-size: 16px;
padding: 0.3em 1.5em;
display: inline-block;
cursor: pointer;
line-height: 1.5;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
background-color: #222222;
color: white;
behavior: url(PIE.htc);
}
and the button is
<button type="submit" id="1" class="main_title">מאפיינים</button>
as you noticed, I also used an "extention" called css3pie to make it work but nothing!!
any suggestion?
any suggestion?
Sit back. Relax. Don't worry about minor cosmetic details in old browsers with falling marketshare.
CSS3 pie is kind of buggy. Try putting a position:relative; on it. Also make sure that's the correct path to PIE.htc — if I remember correctly, it may help to link to it absolutely.
I think you can probably use jquery for this http://jquery.malsup.com/corner/ in your javascript.
Anything from IE9 onwards will be ok with this in the css
border-radius:10px
http://caniuse.com/#search=border-radius
Quick question. Please see the example at http://www.urbanelementz.ca/ ...
The Image & Border I'm referring to is located on the top left of the main content area and has white text wrapping beside and below it.
Here's the URL to the image I'm talking about:
http://www.urbanelementz.ca/css/images/uelementz-index-colorefx1.png
I made the dotted border thicker and white so you can see what I'm talking about. I have a top margin and right margin set on the image so the text isn't right up against the image. How can I make the border go right up against (sit flush) with the image instead of around the image + the set margins. Without using padding as well if possible. I want to keep my margins set. Is there a way to fix this?
Thanks very much!
Add/edit CSS with:
img#colorfx1 {
padding: 0px;
margin-right: 10px;
}
img#colorfx1 {
border-collapse: collapse;
border-color: #FFFFFF;
border-style: dotted;
border-width: 3px;
float: left;
padding: 2px 5px 0 1px;
vertical-align: top;
}
Change padding to margin, and it looks good.
I think you intended to write margin in the first place.
I see this style applied:
img#colorfx1 {
border-collapse: collapse;
border-color: #FFFFFF;
border-style: dotted;
border-width: 3px;
float: left;
padding: 2px 5px 0 1px;
vertical-align: top;
}
Removing the padding fixed it for me...
Get rid of the padding on the image. Set padding to 0:
img#colorfx1 { padding: 0; }
From what I see you don't have margin set to that image. You do have padding set to it though.
Once you remove padding and use margin instead it should be fine.
I think if you set your css like this
img#colorfx1 {
padding: 0px;
margin: 0px 5px 0px 5px;
border: #FFFFFF dotted 3px;
float: left;
}
you can use pandding such as :
<img src="test.png" width="80" height="74" border="2" style="border-style:dotted; padding-left:5px">
this will appear same as what u want, here is some stuff also :
link
regards...
I have a meta-answer: yes, padding was your problem. You might be able to avoid asking this sort of question in the future if you start using a) Chrome's "Inspect Element" context menu command, or b) Firebug for Firefox, which is more or less the same thing. Look at the element's calculated style and you can see exactly what property makes your element behave the way it does.