I have a div in which there is an image and text everything is working fine but when it is zoomed out the text gets longer and jumps out of the div currently i am using overflow-x:hidden; to hide it but why does this happen? This is my code http://jsfiddle.net/z19n1jjg/
<div id="test"><img src="http://placekitten.com/300/301"/>
<p>content</p>
</div>
CSS
#test{
border:1px solid black;
width:300px;
height:320px;
overflow-x:auto;
}
#test img{
float:left;
width:150px;
height:150px;
}
You are using pixels. They will change on different display sizes.
If you want to code relatively, use em's instead of pixels.
View updated fiddle: http://jsfiddle.net/z19n1jjg/1/
#test{
border:1px solid black;
width:18em;
height:22em;
padding:1em;
}
#test img{
float:left;
width:5em;
height:5em;
margin:0 .5em 0 .5em;
}
Is this what you were looking for?
Related
So I'm developing a website for someone and the layout works perfectly in Firefox, with the image inheriting height for the table-cell it's in but in Chrome it's setting it's height to 100% of the actual image size.
Here's some sample images:
http://imgur.com/a/BEOvk
The first one is chrome, the second Firefox. I'm currently only applying the CSS to the first image.
Here is the relevant CSS:
On the image:
vertical-align:bottom;width:100%;height:100%
On the table cell:
#navbar-image{
border-right-style:solid;
border-bottom-style:solid;
border-width:5px;
border-color:#FF8B08;
padding:0px;
margin:0px;
width:17.5%;
height:10%;
max-height:10%;
}
The row CSS:
#nav-bar{
height:10%;
max-height:10%;
padding:0px;
margin:0px;
box-shadow: 1px 1px 30px #060606;
border-left-style:solid;
border-right-style:solid;
border-bottom-style:solid;
border-width:5px;
border-color:#FF8B08;
background-color:#252525;
border-spacing: 0px;
position:relative;
left:25%;
top:0%;
z-index:2;
}
Here's a JSFiddle version: https://jsfiddle.net/yrzccn3j/
Any ideas?
If I understand, you have this code in the <img> tag:
img {
vertical-align:bottom;
width:100%;
height:100%;
}
You should to change height property like this:
img {
vertical-align:bottom;
width:100%;
height:auto;
}
This works in all browsers, and preserve proportions of the images.
I'm having some trouble styling my news articles. This is preview of what I'd like to have:
On the left you always have an image (width is always the same, height isn't). On the right you have some information and a button on bottom aligned with the image.
<div id="newsItemImage">
<img src="" alt="" />
</div>
<div id="newsItemOther">
<p></p>
<button></button>
</div>
Float left on both of the divs. But the height of the two div's isn't the same. How can I make them equal?
This is what I have now:
.newsItemPic
{
width:333px;
border:1px solid black;
float:left;
height:100%;
}
.newsItemOther{
width:860px;
border:1px solid red;
float:left;
height:100%;
}
They are next to each other but the right content is not the same height as the image. So the image that's supposed to be under comes up under the content.
JSFIDDLE: http://jsfiddle.net/ZhD9Z/
Fiddle
as image is not responsive and it has 200px absolute width, i created one container width:500px;
then righttext must contain button itself but button must be aligned width image bottom, so righttext height equals with image height and button positioned at bottom:0
.eachNewsBox
{
padding:10px;
width:500px;
background-color:gray;
display:block;
float:left;
margin-top:20px;
}
.imgbox
{
display:block;
float:left;
height:100%;
position: relative;
}
.imgbox img
{
max-width:200px;
border:1px solid #000;
float: left;
}
.button
{
width:100px;
height:20px;
line-height:20px;
background-color:#FFF;
text-align:center;
margin-bottom:0px;
color:#000;
position:absolute;
bottom:0;
}
.rightText
{
float:right;
font-size:10px;
max-width:242px;
padding-left:10px;
color:#FFF;
height: 100%;
left:210px;
}
I have a small div with overflow:auto; but when the the scroll bar appears it covers up a great deal of the div. This can be avoided by using overflow:scroll;, but then you get the unsightly faded scroll bar when there is no overflow. Is there a way of putting the scroll bar outside of the div without using overflow:scroll;? Thanks.
here is a demonstration jsfiddle
.alphabet{ display:inline-block;
overflow-y:auto;
overflow-x:hidden;
border:1px solid;
height:50;
}
<div class = "alphabet">abcdefgh<br>
ijklmnop<br>
qrstuvwx
</div>
If it's an option to use a container element around .alphabet, you can set the vertical scroll on that. I've added the <hr> to fake an always-visible bottom border that won't also go under the scrollbar.
HTML:
<div class="container">
<div class="alphabet">
abcdefgh<br />
abcdefgh<br />
abcdefgh<br />
abcdefgh<br />
</div>
</div>
<hr>
CSS:
.container{
overflow-y:auto;
overflow-x:hidden;
height:50px;
width:100px;
}
.alphabet{
width:100%;
overflow:visible;
box-sizing:border-box;
border:1px solid;
border-bottom:0;
}
hr{
margin:0;
height:0;
width:85px;
border:0;
border-bottom:1px solid;
}
With inner border: http://jsfiddle.net/Q32gG/1/
If you don't actually care about the scrollbar showing inside the border, you can drop the <hr> and add a full border to .container instead (http://jsfiddle.net/V3MbV/3/).
Instead of using and outside-scrollbar, why not to use some right padding as so
.alphabet{ display:inline-block;
overflow-y:auto;
overflow-x:hidden;
border:1px solid;
height:50;
padding-right:15px;
}
Or if you prefer, using em units to match a character whatever size you are using
padding-right:1em;
PD: By the way there is a typo in your example. The period should be previous it should be .alphabet {
You can also use a combination of padding right and setting the width to 100% + 10px. Works like a charm.
.alphabet {
width: 100%;
box-sizing: border-box;
border: 1px solid;
border-bottom: 0;
// for outside scrollbar
width: calc(100% + 10px);
overflow-y: auto;
padding-right: 10px;
}
I'm using the following style, on an Ajax modal popup. The Width is set correctly, but it is aligned on the left side of the screen. If I set the width to a fixed number, eg 600px, it becomes centered. Is there a way to do both centered and based on a percentage?
.modalPopup {
background-color:#ffffff;
border-width:3px;
border-style:solid;
border-color:Gray;
padding:3px;
position:relative;
width:80%;
}
Try
.modalPopup {
background:#fff;
border:3px solid gray;
padding:3px;
position:relative;
width:80%;
margin: 0 10%; /* percent based margins will do the trick */
}
This is what I ended up using, but Zoltan showed me the way. This has allows me to have a scrollbar if needed.
.modalPopup {
background:#fff;
border:3px solid gray;
padding:3px;
position:relative;
width: 80%;
height: 400px;
margin:0 10%;
overflow:auto;
}
I'm attempting to create thumbnails out of some images, each of which isn't necessarily the same size at the others.
Here is a Fiddle with my current code. I've read on some other sites, and even on here that I just need to set the width and height of the image class, then apply the overflow:hidden property, but that doesn't seem to be working. It's still changing the aspect ratio of the image. I know I could just simply remove either the height or width property, but I really just want to make a 100x100 crop of the image. I tried clip:rect() but couldn't figure out how to make it work. Ideally, I'd want to crop 100x100 from the center of the full-size image, but using clip, I don't think I can do this if the dimensions of my images aren't all the same.
.thumbnail {
overflow:hidden;
width:100px;
height:100px;
padding:10px;
margin-left:10px;
margin-right:10px;
margin-top:10px;
margin-bottom:10px;
border:10px solid #EEEEEE;
}
using css and html:
First solution:
html:
<div class="imageFrame">
<img src="your_path" alt="thumb" />
</div>
css:
.imageFrame {
overflow:hidden;
width:100px;
height:100px;
padding:10px;
margin-left:10px;
margin-right:10px;
margin-top:10px;
margin-bottom:10px;
border:10px solid #EEEEEE;
position:relative;
}
.imageFrame img{
position: absolute;
top:50%;
left:50%;
margin-left: -50px;
margin-top: -50px;
display: block;
}
Second solution:
here you will have to use some JS to add dynamically the image url path to the <div class="imageFrame".
html:
<div class="imageFrame" style="background-image: url('your_path');"></div>
css:
.imageFrame {
overflow:hidden;
width:100px;
height:100px;
padding:10px;
margin-left:10px;
margin-right:10px;
margin-top:10px;
margin-bottom:10px;
border:10px solid #EEEEEE;
position:relative;
background-repeat: no-repeat;
background-position: center center;
}