I have a number of images of items on a white background.. Some images are wider than others. I would like to add a border around the images, but want the border to be fixed width (say 100px)
Basically I want to have a variable amount of padding (between image and border) so that image width + padding (left and right) = 100px
Here is the code I'm working with:
<td style = "vertical-align: middle; border-left:">
<div style="border: 1px solid #DDDDDD; width:200px; text-align:center">
<img alt="blah" class="thumbnail" src="blah" style="vertical-align: middle; border:none; height:65x; text-align:center" />
</div>
</td>
First Please avoid inline style
see the demo
Use CSS as :
.imageBox {border: 1px solid #DDDDDD; width:200px; text-align:center}
.image {vertical-align: middle; border:none; height:65x; text-align:center}
and HTML as :
<td class="imageBox">
<div >
<img alt="blah" class="thumbnail" src="http://upload.wikimedia.org/wikipedia/commons/1/17/MetroLigeroMad_logo_1.png" />
</div>
</td>
Hi now define this css
img{vertical-align:top;}
Live demo
You can do it like this:
<div class="imageholder">
<img src="images/yourpic.jpg">
</div>
What you do next is to put the border on the div. The next thing you have to do is to make the div 100px wide.
Related
Ι want to have 5px space between the image and its description.
I tried margin-left or padding-left but it doesn't do what I want to achieve, it creates the space from the begging of the container. Any idea how I can do that?
#portofolio-element-image{
width: 128px;
height: 128px;
margin-bottom: 5px;
float:left;
}
#portofolio-element-description{
color: white;
text-align:justify;
margin-left: 5px;
}
Why not use:
#portofolio-element-image{
margin-right:5px;
}
Adding a margin to the text will have no effect on the distance between it and the floated image, because the image falls within the text element.
<div class="col-sm-6">
<div class="clearfix">
<img src="people_image/test.jpg" alt="" class="pull-left" height="150px" width="150px" hspace="20">
<div style="text-align:left;">
<p><strong>Name:</strong> TEST Name</p>
<p><strong>Role:</strong> Tester</p>
<p><strong>Program Name:</strong> PHP MYSQK </p>
<p><strong>Time:</strong> 5 to 6 </p>
</div>
</div>
</div>
Before using margin-left element, you should put your image and the text to a DIV element in html , the it work perfectly.
CSS question: I'm wanting a container with 3 inline images with a border around them (not each image). Under the image row and inside the container border I want a sentence or two of text. Without the text the container border is about the same width and height as the image row using display:inline-block, once I add the text the container width is 100%. I want the text to wrap under the image row and not expand beyond the left/right sides of the image row. I would like to know how this can be done and if it can be done using float:left and/or display:inline, display:inline-block. If it can be done both ways what are the pros and cons.
HTML:
<div class="container">
<img src="image1">
<img src="image2">
<img src="image3">
some text
</div>
CSS:
.container {
display: inline-block;
border: 1px solid black;
}
The following will create a div, with inner blocks for images and a block for text. They should both stay 500px. If the images are > 500px they will be clipped. The text won't cause it to overflow unless its a very long uninterrupted string.
If this doesn't help, use jsFiddle to put up an example.
CSS
.container {
width: 500px;
overflow: hidden;
background:red;
display: inline-block;
border: 1px solid black;
}
HTML
<div class="container">
<div class="images">
<img src="image1">
<img src="image2">
<img src="image3">
</div>
<div class="caption">
some text
</div>
</div>
This is a good example of what I'm wanting but with the text below the images. I would also like it to be HTML 5 compatible.
<div class="container">
<table>
<tr>
<td><img src="image1.jpg" height="200"></td>
<td><img src="image2.jpg" height=200"></td>
</tr>
<caption>a paragraph of text here...</caption>
</table>
</div>
.container {
display: inline-block;
border: 1px solid;
}
table {
margin: 0 auto;
}
I'm trying to create a parent div inside a list element that contains two children div for the left and right. The left will contain an image and the right will contain two additional divs that contain some text and a timestamp.
I can't get the left and right divs to display without overlapping.
My HTML Looks like this:
<ul class="activity-comments">
<li>
<div style="border: solid 1px #ff0000;">
<div style="float:left;border: solid 1px #0000ff;">
<img src="http://localhost/new/img/sampleimg.png" class="thumb-small">
</div>
<div>
<small>Some sample text here 1</small>
</div>
<div>
<small>Posted 1 day ago</small>
</div>
</div>
</li>
<li>
<div style="border: solid 1px #ff0000;">
<div style="float:left;border: solid 1px #0000ff;">
<img src="http://localhost/new/img/sampleimg.png" class="thumb-small">
</div>
<div>
<small>Some sample text here 2</small>
</div>
<div>
<small>Posted 2 days ago</small>
</div>
</div>
</li>
</ul>
Take a look at this jsfiddle
What am I missing?
They are overlapping because you are floating a div, but aren't clearing the float.
Use the clearfix method to clear the float. Add a class container to your container divs and use this CSS:
http://jsfiddle.net/57PQm/7/
.container {
border: solid 1px #ff0000;
zoom: 1; /* IE6&7 */
}
.container:before,
.container:after {
content: "";
display: table;
}
.container:after {
clear: both;
}
You'll also notice that I've removed your inline CSS. This makes your code easier to maintain.
your thumbnail is setting the picture to a specific height of 41px. Either change the picture size, or change the div size or set the overflow of the outer div.
I'm working on css layout where the first div should contain text, the div's width and height should be flexible according to content. On the right there should be 4 (in future maybe more) images with the same dimensions, at the best adaptable to the first div, but they have to be squares. For now I have just something like this. Any ideas? Thank you!
What about using floats? You would have two container divs one float right. The images could easily be held in a table since they are all the same size. If you know the width of the images ahead of time you could have the first div predefined to that width and height so that if the layout gets too small it won't break apart the images.
<div style="float:right;">
<table>
<tr>
<td><img src="" /></td>
<td><img src="" /></td>
</tr>
<tr>
<td><img src="" /></td>
<td><img src="" /></td>
</tr>
</table>
</div>
<div>
<p>some text here</p>
</div>
You can use the following HTML:
<div id="wrapper">
<div id="display">Some text</div>
<div id="rightBar">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
Along with the following CSS:
#wrapper {
overflow: auto;
background-color: yellow;
display: inline-block
}
#display {
width: 100px;
height: 100%;
float: left;
border: 1px solid black;
}
#rightBar {
width: 100px;
background-color:red;
float: left;
}
#rightBar div {
border: 1px solid black;
width: 40px;
height: 40px;
display: inline-block;
}
See a live example here
I'm wondering how to make a div to grow bottom-up and not like it does normally.
I've here a example at jsFiddle. As u can see the right div will grow with more content but I want both div to stay fixed at the same level. (The left-div will never grow)
How can i make the right-div to grow bottom-up?
<div id="wrapper">
<div id="div_1">
læskdfsædlfksæ
</div>
<div id="div_2">
<tr>
<td>AUTHENTIQUE</td>
<td class="field_2">1.6 16V</td>
<td class="field_3">239 </td>
</tr>
<tr>
<td>AUTHENTIQUE</td>
<td class="field_2">1.6 16V</td>
<td class="field_3">239 </td>
</tr>
</div>
<div class="clearing"></div>
<div id="base"></div>
</div>
The css:
#wrapper{ overflow: hidden;}
#div_1{
border: 1px solid red;
width: 100px;
height: 50px;
float: left;
}
#div_2{
border: 1px solid black;
width: 200px;
float: left;
}
.clearing{ clear: both;}
#base{ border-top: 2px solid #666;}
No luck with float:left, because they are always aligned top. Change to display:inline-block;
http://jsfiddle.net/HerrSerker/ZEYvk/15/
Note: No whitespace between </div> and <div ...>
Changing float to inline is probably what you are after - but you could also absolutely position your div relative to another div it's inside and use bottom: 0 to keep the div stuck down.
This could be fixed by Javascript.. I used jQuery as shown in the example: jsfiddle
I just added the code:
$(document).ready(function (){
$("#div_1").height($("#wrapper").height());
});