I have the following CSS :
<style type="text/css">
body {background-color:#b32501;}
.roundcorner {
position:absolute;
background-color: #000;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border: 0px solid #000;
padding: 10px;
width: 350px;
bottom:35%;
right:500px;
}
input
{
-webkit-border-radius: 5px; //For Safari, etc.
-moz-border-radius: 5px; //For Mozilla, etc.
border-radius: 5px;
}
.centeredSplash {
position:relative;
width:100%;
height:100%;
background:url(coming-soon.png) center center no-repeat;
}
</style>
Following HTML:
<div class="centeredSplash">
<div class="roundcorner">
<input type="text" style="width:80%"></input>
</div>
</div>
My basic requirement is that I have a 800x600 splash background with an empty space for HTML text box.
I need to have the splash background centered (no matter what resolution) and then I need to place my text box relative to the image so that it always display at that particular location.
With the above code I am able to achieve that but as soon as I reduce the size of my browser I notice that my text box starts to move away and lose its position, can anyone please help me out with this?
You should add
body {min-width: 800px;}
Working demo:
JSFIddle
Related
Below is the code
HTML
<div class="fgimg">
</div>
CSS
.fgimg {
width: 200px;
height: 200px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
background: url('https://c1.staticflickr.com/3/2669/5830411257_b21bf9e931_b.jpg') no-repeat;
margin-left:30%;
margin-top:10px;
background-position: center center;
}
.fgimg:hover {
cursor:pointer;
border-radius: 210px;
border-color:#226fa3;
border:outset;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
}
Here is the demo :
http://jsfiddle.net/sathish_opr/03kkqywy/1/
When we hover on the image, image position changes.
I would like to see the border color of the image when hovered on, but image position changes automatically :(
what could be the problem ?
You either set an invisible border on the image in the normal state:
border: 3px outset transparent;
Or you could apply:
box-sizing: border-box;
This way, the border is calculated to the inside of the width and height. (the 200px width for example)
DEMO TIME:
http://jsfiddle.net/03kkqywy/4/
BTW:
you don't need any prefixing on border-radius anymore.
But if you do, allways put the non prefix property as the last one of those.
Now Define your
.fgimg{
border: solid 3px transparent;
}
Demo Link
This happens because you haven't set a border to the image initially. When you hover, the border is added to the overall width of the image and hence you can see it move.
Set a transparent border to the image initially. This way the border is already added o the width of the image and the image won't be moving when you hover over it.
.fgimg{
border:outset;
border-color: transparent;
}
http://jsfiddle.net/sathish_opr/03kkqywy/1/
css code
.fgimg {
width: 200px;
height: 200px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
background: url('https://c1.staticflickr.com/3/2669/5830411257_b21bf9e931_b.jpg') no-repeat;
margin-left:30%;
margin-top:10px;
background-position: center center;
border: solid 3px transparent;
}
.fgimg:hover {
cursor:pointer;
border-radius: 210px;
border-color:#226fa3;
border:outset;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
}
url http://jsfiddle.net/03kkqywy/3/demo
This question already has answers here:
Border-radius and padding not playing nice
(5 answers)
Closed 7 years ago.
I run my website on Tumblr. I just added the CSS Border-Radius property and set it to 20px for all images with a specific ID. However, as you can see, the corners on the right side of the image are not properly rounded, but the left side corners are.
The CSS code looks like this:
#articleimage {
float:left;
padding-right: 10px;
padding-bottom: 1px;
width: 400px;
border-radius:20px;
}
I've determined that the issue is caused by the padding to the right, but I require that CSS property. How can I stop this conflict?
View screenshot: http://i.stack.imgur.com/es0aa.png
try changing your padding for margin:
#articleimage {
float:left;
margin-right: 10px;
margin-bottom: 1px;
width: 400px;
border-radius:20px;
}
The problem may be due to the use of an <img> tag. The corners may be not fully rounded at the right because the image is prone to be distorted with width and the border-radius (i.e. the image may not fill the entire <img> element, therefore it seems that right border-radius is being "less rounded").
Margins or paddings do not affect, as you can see in the example below:
.cnt {
background-color: green; height: 700px; width: 600px
}
#articleimage,#articleimage2,#articleimage3,#articleimageAsBG {
display: block;
float: left;
width: 400px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
}
#articleimage {
padding-right: 10px;
padding-bottom: 1px;
}
#articleimage2 {
margin-right: 10px;
margin-bottom: 1px;
}
#articleimage3 {
padding-right: 10px;
padding-bottom: 1px;
width: 100px;
}
#articleimageAsBG {
height: 192px;
background: url('http://i.stack.imgur.com/es0aa.png') no-repeat center black;
background-size: 98%;
}
<div class="cnt">
<img id="articleimage" src="http://i.stack.imgur.com/es0aa.png" />
<img id="articleimage2" src="http://i.stack.imgur.com/es0aa.png" />
<img id="articleimage3" src="http://i.stack.imgur.com/es0aa.png" />
<div id="articleimageAsBG">
</div>
</div>
You notice:
#articleimage is using padding and the right border-radius are slightly smaller.
#articleimage2 is using margin and the right border-radius are equally smaller.
#articleimage3 has reduced width (tiny image) so you can notice the difference.
The alternative, and solution I am suggesting to you, is to use another element (like a div) where you set that image to the background like the last one in the example (scroll down to see #articleimageAsBG), you just need to adjust its background-size property.
I also suggest that you add:
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
For better browser compatibility. And maybe consider using display: inline-block instead of float. Hope it helps!
I did a quick search on stackoverflow and found some ways to solve it but none works.
I have my HTML code like below:
<div id="product_box">
<div id="pro_img"><img src="images.jpg'" width="140px"/></div>
<div id="pro_text">
</div>
</div>
and my CSS:
<style>
#product_box {
border: 1px solid;
border-color: #8dd5f6;
margin-top: 8px;
margin-left: 4px;
margin-right: 4px;
width: 330px;
height: 196px;
float:left;
}
#pro_text{
float:left;
width:189px;
height: 196px;
background-color: #CCC;
}
#pro_img {
float:left;
border-right:1px solid #8dd5f6;
width:140px;
height: 196px;
}
</style>
The #pro_img is to the left and #pro_text is to the right, it works fine at default zoom and large zoom in but the problem is that when I zoom out the pro_text (right div) falls off the container box.
I found someone says that I need box-sizing: border-box; inside of my CSS. I tried it and put it like this:
<style>
#pro_img {
float:left;
border-right:1px solid #8dd5f6;
box-sizing: border-box;
width:140px;
height: 196px;
}
</style>
It won't fall off anymore but the border is invisible as it border the image from inside.
I disable the border-right from #pro_img, the problem's gone but I want a border-right that would separate the image and the text.
Total width needed: 140(img)+1(border)+189(text) = 330px just fit the container box. I tried increase box width to 332px but it won't help.
Thank you.
That is because you are using float:left I cleared that used margin instead see this http://jsfiddle.net/3pmmjLx8/
UPDATED CSS CODE
#pro_text{
margin-left:141px;
width:189px;
height: 196px;
background-color: #CCC;
}
Is possible to create a big circle around a hyperlink using CSS?
I'm trying to achieve it but my circle is very small. I would like that circle size were similar to hyperlink size. If i put the hyperlink inside a div, it's not being centralized inside the circle.
Here is what i'm doing:
<html>
<head>
<style>
.circle {
border-radius: 1000%;
width: 40px;
height: 40px;
background: green;
}
</style>
</head>
<body>
Test test test test
</body>
</html>
The problem with your code is that the a element is an inline element and thus accepts no height. Change it to a block level element to give it a specified height:
.circle {
border-radius: 100%;
background: green;
display:inline-block;
line-height:100px;
}
To have the text appear in the middle, use line-height instead of height.
Working sample:
http://jsfiddle.net/7qfbopqj/
by using padding you can make the circle just bigger than the link
#circle {
border-radius: 1000%;
padding:50px;/* this instead of a set width and height just change this to change how much bigger the circle is than the link*/
background:black;
text-align:center;
vertical-align:center;
}
This is possible but you have to set the box size to match you text length, try this:
.circle {
border-radius: 1000%;
width: 40px;
height: 40px;
background: green;
display:inline-block;
line-height:40px;
vertical-align:center;
text-align:center;
color:#ffffff;
}
<body>
Test
</body>
try on jsfiddle: http://jsfiddle.net/prt4y7b2/
You could put a div around the link and center the link within.
<div class="circle">
<center>[link name]</center>
</div>
.circle {
border: 2px solid red;
border-radius: 25px;
width: 10%;
height: auto;
margin-left: auto;
margin-right: auto;
}
http://jsfiddle.net/yg25us3k/
How can I achieve a layout like this?
Right now I'm using this HTML:
<div class="image">
<img>
<div class="caption">
Caption Text
</div>
</div>
And this CSS:
.image {
background-color: #2A2A2A;
}
img {
max-width: 590px;
}
But the .image box is too big (since it expands to fit its parent):
The key is to not set a width for the img element, or the parent container. If the parent, .image is simply floated or in any other way adapted so that it shrinks to the size of its contents, this should work.
I used float to achieve the shrink-wrap aspect, but position: absolute; would do the same, as would display: inline-block;.
There's a demo over at JS Bin, which uses some jQuery to swap the images around, but it does nothing to the width of any elements. The CSS is reproduced below:
.image {
float: left; // for the shrink wrap
padding: 1em; // To achieve the bordered effect
background-color: #666; // just for contrast
-moz-border-radius: 2em; // for that web 2.0 goodness...
-webkit-border-radius: 2em;
border-radius: 2em;
}
.image img {
-moz-border-radius: 2em; // no width, anywhere. Presumably width: auto, would
-webkit-border-radius: 2em; // work, but that's redundant, since it's the default
border-radius: 2em;
}
.image img + .caption {
width: 100%; // forcing the .caption to take up 100% of the width
background-color: #ffa; // of its parent, except for the padding, so that it's
} // the same width as the image above.
As #Kyle said, block elements adjust their width to fit their parent's.
Setting a block element as inline though, is not the correct approach: what you need to do, is to set the .image div as a floating element, thus achieving a similar result, while keeping the features of a block element. The css to do the trick should be:
.image {
float: left;
display: inline; /* needed to fix the (IE <= 6) "3 pixels out of nowhere bug" */
/* whatever code you may find appropriate in order to render the rounded border */
}
.image .caption {
clear: left;
}
I left to you any further style improvement you may feel needed.
If you set the width of the .image box to the same width as the image, then apply padding to the .image box, you will get the border you are looking for because when you specify width, padding gets added to it.
So basically, you would need the following CSS:
.image {
padding: 10px;
width: 300px; /* assuming the picture is 300px */
}
Try the following:
.image {
position: relative;
width: 250px;
}
img {
border: 15px solid #777777;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
width: 100%;
}
.caption {
border-left: 15px solid #777777;
border-right: 15px solid #777777;
border-bottom: 15px solid #777777;
position: absolute;
width: 100%;
bottom: 0px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
<div class="image">
<img src="yourImage" height="150px" />
<div class="caption">
Caption TextCaption TextCaption TextCaption TextCaption Text
</div>
</div>
Now the reason I have applied 3 borders to the caption div is because you do not know the width of the image without the border, but you do know the width of the border for the image. Applying the same border to the caption will give the caption the same width. Of course you will need to adjust the width of .image and the height of the img tag (this can be done through css), but the rest will be done for you. Also the caption div will resize for larger captions.
Regards,
Richard
PS this code has been tried and tested in Chrome - it works fine.
Since divs are block-level elements, they expand to fit their parent.
It may not be the best solution, but if you don't know the size of the image ahead of time, you could do the below:
.image
{
padding: 10px;
max-width: 590px;
disply: inline;
}
.caption
{
background-color: #2A2A2A;
disply: inline;
}
The above will cause the img div to be rendered as an inline element which will shrink it to fit the content rather than its parent, and the padding will add the border.
I have come up with another solution. I dont believe David Thomas' answer makes the caption appear within the image (by all means correct me if I am wrong), so try the code below (I have used a combination of my code and Davids).
.image {
position: relative;
float: left;
border: 15px solid #777777;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.caption {
position: absolute;
bottom: 5px;
left: 5px;
}
.image-container {
position: relative;
}
<div class="image">
<img src="/Images/header1.png" />
<div class="caption">
Caption Text Caption Text Caption Text Caption Text Caption Text Caption Text Caption Text Caption Text Caption Text Caption Text
</div>
</div>