I have simple html:
<div class="other-album">
<img src="https://pravdamuzika.lasil.ru/media/files/covers/2021_8_13__Panimonica_Offline_Oblozhka.jpg" />
</div>
with css:
.other-album img{
width: 332px;
height: 332px;
border: #156196 solid 5px;
margin-bottom: 30px;
}
It looks perfect. But if I zoom it in browser I see strange margin between image and its border. And place of that margin depends on zoom degree
https://jsfiddle.net/ishayahu/d51zjrkp/1/
You need to set the box-sizing property to your image.
.other-album img{
width: 332px;
height: 332px;
border: #156196 solid 5px;
margin-bottom: 30px;
box-sizing: border-box; // solves your issue
}
Or if the anchor is already a display inline-block you may need to add font-size: 0;
To be frank, I have no idea why that happens or how to stop it from happening in this case. But I found a workaround (at least for chrome) - Don't use <img>, set background to the <a> instead!
<div class="other-album">
</div>
.other-album a {
width: 332px;
height: 332px;
border: #156196 solid 5px;
margin-bottom: 30px;
display: block;
background-image: url("https://pravdamuzika.lasil.ru/media/files/covers/2021_8_13__Panimonica_Offline_Oblozhka.jpg");
background-size: 100% 100%;
}
Fiddle: https://jsfiddle.net/oj7cf021/4/
Related
I have run into a problem that seems rather dull but I can't seem to solve it. I have the following HTML which I cannot change:
<a href="#" class="aligncenter">
<img src="http://placehold.it/240x150" alt="">
</a>
The width of the image is not known in advance. The CSS I initially used was
a {
display: block;
margin: 20px auto;
border: 1px solid #D5D5D5;
padding: 2px;
display: block;
}
img {
display: block;
}
Note that I can't set text-align: center on the parent of a!
Sometimes the image is as large as the wrapper (in the fiddle below that's body) and then there's no problem. However, sometimes the image is smaller than the wrapping element in which case there'll be white space that fills up the empty space. See this fiddle.
A possible solution is positioning the link right-from-center with a margin-left (using percentual values from the parent) and then reprositioning it with translate(using percentual values of the element). See this fiddle. However, this can't be used in IE8.
margin-left: 50%;
transform: translateX(-50%);
Is there an easier/better solution that I am overlooking that should be able to handle this behaviour cross-browser? I am also interested in hearing ideas that are not restricted to IE8-compatibility. (For instance flex boxes, with which I am not experienced.)
Try like this: Demo
img {
display: block;
margin: 0px auto;
}
Edit: Updated Demo
So according to your requirement i changed like this:
css:
a img {
display: block;
margin:0 auto;
}
If you move the border to the img tag, set the a width to 100% and then set automatic margins on the img, the image should align in the middle.
body {
width: 320px;
margin: 0 auto;
border: 1px solid red;
text-align: center;
}
a {
display: inline;
margin: 20px auto;
display: inline-block;
}
img {
display: block;
border: 1px solid #D5D5D5;
padding: 2px;
margin: 0 auto;
}
<a href="#" class="aligncenter">
<img src="http://placehold.it/240x150" alt="">
</a>
Can I achieve this with css only?
50% does not work on rectangle
1 more thing: no fixed height.
One option is to set a fixed value for horizontal border-radius as follows:
div {
display: inline-block;
border-radius: 50px / 50%;
padding: 1em 2em;
border: 2px solid #000;
background-color: #009EE0;
text-align: center;
}
<div>
Stuff goes <br>
here... <br>
& here... <br>
Setting a fixed value of horizontal border-radius does the trick!
</div>
You may also want to use a different percentage value instead:
div {
display: inline-block;
border-radius: 12% / 50%;
padding: 1em 2em;
border: 2px solid #000;
background-color: #009EE0;
text-align: center;
}
<div>
Stuff goes <br>
here... <br>
& here... <br>
Or set a different percentage value for horizontal border-radius
</div>
Try this
div{
width:200px;
height:100px;
background:lightblue;
border-radius:50px;
border:2px solid black
}
<div></div>
Edit: use 50vw for making it responsive any height will be okay
div{
width:500px;
height:300px;
background:orange;
border-radius:50vw;
}
<div></div>
There is a trick for that
Just us a very large border-radius value!
e.g. {border-radius:10000px;}
Here is link to demo (Try changing width/height to see working) : http://jsfiddle.net/890z699p/
.rect {
width: 300px;
height: 200px;
background: #000;
border-radius: 10000px;
}
<div class="rect"></div>
It works on me, below is my code snippet
div {
display: block;
border-radius: 50%;
width: 200px;
height: 100px;
border: 2px solid #000;
background-color: #009EE0;
}
<div>
</div>
The project is to create a micro-blogging website similar to Twitter. I chose to name the site Chirper (how clever of me). Each post is structured by a parent div, an avatar div and a content div. The avatar and content divs are displayed inline, but they are not aligned properly. Any help is appreciated.
HTML:
<div class="chirp">
<div class="chirp_avatar_region">
<img src="img/avatar/default.png" alt="Avatar" width="64" height="64">
</div>
<div class="chirp_content">
<p>
USER
<span class="timeStamp">2013-11-22 16:43:59</span>
</p>
<p>
COMMENT
</p>
<p>
ReChirp!
</p>
</div>
The div's aren't aligned how I want them to be (level and 100% of the parent).
I can't post images, so here is a link to an imgur page: http://imgur.com/Mn9mE5q
Relevant CSS:
body {
font-family: Verdana, Geneva, sans-serif;
color: #000;
background-color: #666;
font-size: 1em;
}
/* Containers */
div {
margin-top: auto;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
border-style: solid;
border-width: 3px;
border-color: #000;
padding: 10px;
}
div.pane {
width: 70%;
background-color: 0099FF;
}
div.chirp {
border-width: 1px;
margin-bottom: -1px;
width: 80%;
padding: 5px;
}
div.chirp_avatar_region {
display: inline-block;
width: 10%;
height: 100%;
text-align: center;
/*border-style: none;*/
}
div.chirp_content {
display: inline-block;
width: 80%;
height: 100%;
/*border-style: none;*/
}
div.chirp_avatar_region > img, div.chirp_content > p {
margin-top: 0;
vertical-align: middle;
}
You can either float your inner divs then clear the float following the container
or
use vertical-align:top to position your divs at the top of the container
Not entirely sure, but what I think is happening is that by defining position:inline-block, it's putting them on the same line, and making the line-height the height of the chirp_content container. In a sense anyway.
Set to vertical-align:top; and it should solve it.
Ex.
.chirp_content, .chirp_avatar_region{ vertical-align:top; }
JS Fiddle
Give to the avatar_region a float: left, and remove its width: and height: setting. Remove the chirp_content div, it circumvents the inlining.
I have some problem with displaying a sprite in a div that is in a li class.
So the structure is:
<li id="aa">
<div>one</div>
</li>
And the CSS:
li{
width: 120px;
height: 18px;
margin-top: 5px;
}
li div{
width: 20px;
height: 10px;
background-image:url(../images/sprite.png);
background-repeat: no-repeat;
margin-left: 0px;
font-weight:bolder;
border: 1px solid #fff;
}
When I use this I can see the sprite even outside the div. So I tried adding this to li:
background-image: none;
That makes the image in the div not visible too.
So if there is someone who know about that I really would appreciate.
It seems you are missing a ; after background-image please see below
background-image:url(../images/sprite.png);
I'm having a problem with making one div overlap the rest of the page.
I just need one image to overlap one section. I have kinda got it to work but once you resize the window or look at it on a different resolution the image doesn't appear where it should.
I'm using an position:absolute; and z-index. It is working to some extent. but it won't stay in that position, for example, if you resize your browser window (it moves from where I'd like it to stay).
Here is this website
I need it to overlap the yellow box like this.
Edit: Just a quick follow up: I think your solution has put me a bit of bother. I am unable to place another div directly under it as can be seen here
Move
<div id="medal"><img src="images/star2012medal.png" width="220" height="277"></div>
inside
<div id="box"><img src="images/boxheading.png"></div>
just before the image.
Change the CSS to
#medal {
position: relative;
top: -240px;
right: -80px;
z-index: 50;
}
and apply the following to the boxheading.png image
{
position: relative;
top: -280px;
}
EDIT:
From what I feel you are trying to achieve, you should be looking at a 2-column layout. There's too many good-practice resources online to learn how to do it.
To add another box below the first one, you will need to do the following changes to html:
<div id="box-container">
<div id="box">
<div id="medal">
<img src="images/star2012medal.png" width="220" height="277">
</div>
<img src="images/boxheading.png" width="291px" height="240px" style="position: relative; top: -280px; ">
</div>
<div id="box2">testing</div>
</div>
then add the following css:
#box-container {
float: right;
}
#box {
float: left;
color: #333;
background: #fff;
height: 240px;
width: 291px;
display: inline;
border-style: solid;
border-color: #fff100;
-moz-border-radius: 10px;
border-radius: 10px;
clear: both;
}
#box2 {
float: left;
color: #333;
background: #fff;
height: 240px;
width: 291px;
display: inline-block;
border-style: solid;
border-color: #fff100;
-moz-border-radius: 10px;
border-radius: 10px;
clear: both;
margin-top: 10px;
}
tested only in Chrome. Remember to test it in other browsers!