This question already has answers here:
Keeping an floated image inside the div with CSS
(5 answers)
Closed 4 years ago.
I'm not good in html, css, i want to apply boarder to dev, which contains image in right
.amount-2 {
border: 3px solid #4CAF50;
padding: 5px;
width: 70%;
float:left;
}
.sample {
float: right;
width: 30%;
margin-top: -100px;
}
<div class="amount-2">
Files must be less than 2 MB.
Allowed file types: png gif jpg jpeg.
Images must be between 200x200 and 800x1400 pixels.
Web page addresses and e-mail addresses turn into links automatically.
Lines and paragraphs break automatically.
<img class="sample" src="https://gallery.yopriceville.com/var/albums/Free-Clipart-Pictures/Cartoons-PNG/Cute_Bunny_Cartoon_Transparent_Clip_Art_Image.png?m=1478318101" alt="Pineapple" width="150" height="200">
</div>
I dont want to fix the heights
<style type="text/css">
.main{
border: 3px solid #4CAF50;
width:auto;
margin: 0;
}
.amount-2 {
padding: 5px;
width: 70%;
float:left;
}
.sample {
float: right;
width: 30%;
margin-top: -100px;
}
</style>
<div class="main">
<div class="amount-2">
Files must be less than 2 MB.
Allowed file types: png gif jpg jpeg.
Images must be between 200x200 and 800x1400 pixels.
Web page addresses and e-mail addresses turn into links automatically.
Lines and paragraphs break automatically.
</div>
<div class="sample">
<img src="https://gallery.yopriceville.com/var/albums/Free-Clipart-Pictures/Cartoons-PNG/Cute_Bunny_Cartoon_Transparent_Clip_Art_Image.png?m=1478318101" alt="Pineapple" width="150" height="200">
</div>
<div style="clear:both"></div>
</div>
try this.
The image is now not overflowing parent div and not bad scaled:
.amount-2 {
border: 3px solid #4CAF50;
padding: 5px;
width: 70%;
float:left;
overflow: hidden;
}
.sample {
float: right;
width: 30%;
height: auto;
margin-top: -100px;
}
<div class="amount-2">
Files must be less than 2 MB.
Allowed file types: png gif jpg jpeg.
Images must be between 200x200 and 800x1400 pixels.
Web page addresses and e-mail addresses turn into links automatically.
Lines and paragraphs break automatically.
<img class="sample" src="https://gallery.yopriceville.com/var/albums/Free-Clipart-Pictures/Cartoons-PNG/Cute_Bunny_Cartoon_Transparent_Clip_Art_Image.png?m=1478318101" alt="Pineapple" width="150" height="200">
</div>
Text need to have a width.
.amount-2 {
border: 3px solid #4CAF50;
padding: 5px;
width: 70%;
float:left;
}
.amount-2 p {
display: inline-block;
vertical-align: top;
width: 69%;
}
.sample {
display: inline-block;
vertical-align: top;
width: 30%;
}
<div class="amount-2">
<p>
Files must be less than 2 MB.
Allowed file types: png gif jpg jpeg.
Images must be between 200x200 and 800x1400 pixels.
Web page addresses and e-mail addresses turn into links automatically.
Lines and paragraphs break automatically.
</p>
<img class="sample" src="https://gallery.yopriceville.com/var/albums/Free-Clipart-Pictures/Cartoons-PNG/Cute_Bunny_Cartoon_Transparent_Clip_Art_Image.png?m=1478318101" alt="Pineapple" width="150" height="200">
</div>
Related
I have different images on my website, and some of them (PNG images) have a strange grey border around the text part of image, like this:
https://imgur.com/a/yDtM4
The text is inside the image, not separated.
The css/html code of the image is:
#bor_panel {
border-radius: 12px;
border: 2px solid #287396;
padding: 20px;
width: 170px;
height: 170px;
display: flex;
}
<div id="bor_panel">
<img src="images/raro_page/Ampia_Connettivita_B.jpg" id="raro_panel_connettivita" alt="raro robot connettivita" />
</div>
Any idea? It seems a normal img tag...
------EDIT------
This is the original image:
https://imgur.com/a/P9LVm
It seems ok
There is an issue in your image. I opened your original image in the photoshop and found this after zooming the image. There is an gray space in your image around the text.
I have edited your image in photoshop and make a snippet below. Now there is no border.
#bor_panel {
border-radius: 12px;
border: 2px solid #287396;
padding: 20px;
width: 170px;
height: 170px;
display: flex;
}
img{
width:126px;
height: 126px;
margin: auto;
}
<div id="bor_panel">
<img src="https://i.stack.imgur.com/NdgFO.jpg" id="raro_panel_connettivita" alt="raro robot connettivita" />
</div>
It is strange. It is a part of the image you are using. Try using some image editing application to remove that border. It doesn't seem like its due to CSS or HTML
Okay, so I have a webpage that has a 'gallery' of images that are all of different sizes (all the same width, though), and they're all fit into image containers with borders, and padding for a little title underneath them. I want them all to fit together snugly so that there's no awkward large space between pictures of different sizes, because right now as you can see in the picture, the webpage seems to want to keep all the images in horizontal rows and not fill up the empty space that's left.
For example, I want two of the images that are not tall to fit into a row next to one that is tall so that all space is being used up.
This is what it looks like: screenshot of the page
This is what the CSS for the gallery looks like: `
.galleryHolder{
text-align: center;
margin-left: 55px;
top: 20px;
}
div.gallery {
margin: 30px;
border: 2px solid darkgrey;
float: left;
width: 400px;
display: block;
}
div.gallery:hover {
border: 2px solid crimson;
border-radius: 2%;
opacity: .4;
}
div.gallery img {
width: 100%;
height: auto;
}
div.title {
padding: 5px;
text-align: center;
Font-family: Century Gothic;
Color: crimson;
}`
and here is what a sample of the HTML for each image looks like:
<div class = "galleryHolder">
<div class="gallery">
<img src="images/ForPurchase/purchase11.jpg" alt="Snowy Owl Landing" width="320" height="400">
<div class="title">"Snowy Angel"</div>
</div>
</div>
Is there a possible way to make all these images fit into all possible gaps to make everything look snugly put together? Answer would be greatly appreciated, this is for a project that is due in a few hours.
<div class = "column2_SS">
<img class = "weather_widget" src = "images/weather.png" alt = "Smiley face">
</div>
CSS code:
.column2_SS{
background-color: #f2f7fc;
float: right;
height: 171px;
width: 300px;
background-color: black; /*#444444*/
margin-top: 20px;
margin-right: 100px;
border-radius: 7px;
vertical-align: bottom;}
.weather_widget{
vertical-align: bottom;}
vertical-align: bottom; doesn't work.
I need to align the weather widget image to the bottom. Any solution?
Find the attached image.
Edit:
I have set the background color of column2_SS to black. If the image is bottom aligned the background color should not be black. See the attached image. There is a black row under the image which means that image is not bottom aligned.
You can position an element in relation to its parent using position: absolute and playing with the top/bottom/left/right values. vertical-align works for inline elements or table cells mostly (read more on MDN).
.column2_SS {
background-color: #f2f7fc;
float: right;
height: 271px;
width: 300px;
background-color: black;
margin-top: 20px;
margin-right: 100px;
border-radius: 7px;
position: relative;
}
.weather_widget {
position: absolute;
bottom:0;
}
<div class="column2_SS">
<img class="weather_widget" src="http://i.stack.imgur.com/iU1rX.png" alt="Smiley face">
</div>
Well, there is one of the classic fixes for this on the web, creating table-look markup...
<div class="table">
<div class="table-cell">
<img src="path/to/your/img.jpg">
</div>
</div>
.table {
display: table;
}
.table-cell {
display: table-cell;
vertical-align: bottom;
}
Also, absolute positioning will work fine, but I always use it as a last option, because of "jumping" behavior on some devices.
I'm new to the frontend and work out of the backend. I found a layout I am interested in using however noticed that when typing in these boxes if the text length isn't equal the sizing of the box changes for one of the boxes in the row and not all.
I want them all the be sized equally so if one box is using one line of text and the others two lines, the one line provide white space to match the size.
E.g.
I'd like all the boxes on that row to add in the whitespace so the boxes are equal in size so I don't get the layout issues since in the pic above.
Like this:
How do I change the css for the boxes to automatically resize all the boxes and not just one?
This is the layout I am using: http://adapt-trackers.blogspot.in/
It seems as though right now their spacing is determined by the margin/padding/border values. Try setting a height and width so that they are all the same.
For example:
#selectable li { margin: 3px; padding: 1px; float: left; width: 165px; height: 160px; font-size: 1.5em; text-align: center; }
try this (courtesy of CSS the Missing Manual):
<div id="gallery">
<div class="figure">
<div class="photo">
<img src="../images/carpet.jpg" alt="Carpet Grass" width="200" height="200" /> </div>
<p>Figure 1: Even the carpet-like <em>Carpetorium Pratensis</em> requires mowing. </p>
</div>
In this example, the gallery div wraps all the images together; the photo class wraps each image and caption together. Here's the CSS:
.figure {
float: left;
width: 210px;
margin: 0 10px 10px 10px;
}
.photo {
background: url(drop_shadow.gif) no-repeat right bottom;
}
.photo img {
border: 1px solid #666;
background-color: #FFF;
padding: 4px;
position: relative;
top: -5px;
left:-5px;
}
.figure p {
font: 1.1em/normal Arial, Helvetica, sans-serif;
text-align: center;
margin: 10px 0 0 0;
height: 5em;
}
Also, there's several gallery frameworks that you could use instead. Or stag some code from dynamicdrive.com
I'd give your tag for ... a minimum height.
add class to your anchor tags:
Link:
...
css:
.link-title{
min-height: 150px;
}
I'm building a portion of a portfolio site that displays a 4-column grid with images and their titles using relative units of measurement so that it scales with the browser window's size. Right now it works fine with each .item assigned a property of float:left and max-widths defined as a percentage of the overall #container's width (in this case 1100px or 68.75em). It works fine with the exception of the titles, which go below each image in a span. When one of the titles is longer than the 220px (or 20% of the container) the height increases and the items in the next row will get "stuck" on it.
I can fix this easily using PHP to insert a clear:both div after every 4th div (to effectively make a new "row" in the html) but I plan on using media queries or some other device to reduce the amount of columns to 3, 2 and 1 as the browser window shrinks. It would be easier if I could simply have the rows defined by floating the items. Possible solutions?
Styles:
body {
font-size: 100%;
line-height: 100%; /* Neat */
font-family: Helvetica, Arial, sans-serif;
}
#container {
max-width: 68.75em; /* 1100px */
margin: 40px auto;
border: 1px solid #000;
}
.item {
float: left;
width: 20%;
max-width: 20%;
height: auto;
padding: 2.5%;
background-color: #eee;
}
.item img {
display: block;
width: 100%;
max-width: 100%;
height: auto;
}
.item span {
width: 100%;
max-width: 100%;
margin-top: 1em;
display: block;
text-transform: uppercase;
line-height: 1.5em;
}
HTML:
<div id="container" class="cf"> <!-- "cf" comes from my reset, it's a clear-fix -->
<div class="item">
<img src="images/placeholder.png" height="220" width="220" alt="" title="" />
<span>A Title that is Slightly Longer than the Others</span>
</div>
<div class="item">
<img src="images/placeholder.png" height="220" width="220" alt="" title="" />
<span>A Title</span>
</div>
... (repeat those divs)
</div>
Possible options:
Set the height sufficient to cover two line cases
.grid-item { display: inline-block; vertical-align: top; }
Change the title span to a div, set height and overflow: hidden
I would suggest giving it a short title. If that's not possible, you could try
.item > span{
height: 0;
position: relative;
}
The images will display appropriately, but the too-long titles will display over the image beneath said title. I don't know if this is acceptable for your needs or not, but you may find it useful.