I'm trying to cut off the bottom of a image so the next row of images an fit. I've tried to trim the bottom but it hasn't worked. I want to bottom edge to be in line with the image next to it.
Here is the current page: My Page
img.left {
padding: 0 12px 0 0;
height: auto;
float: left;
width: 33.33%;
}`
What it currently looks like
You could put the images into a div and control the size of that div with height, width and overflow attributes in css. A bit like this;
<div class="control" style="height: 600px;overflow: hidden; width: 100%;">
<img class="big" src="images/35473299826_50c6ced1ec_k.jpg" alt="boy
with ferry">
<img class="right" src="images/34628953174_408fac96c3_z.jpg"
alt="flowers">
<img class="left" src="images/34702862403_ddf655f873_z.jpg" alt="One of
my pictures">
</div>
The output looks like this for me; enter image description here
Related
In order to get some preferred formatting I split 1 image into 10x10 smaller images and I am inputting them onto a page in sharepoint to recreate the image, then will assign links to some of the images to match the overall shape. (Trying to make buttons in the shape of hexagons, trapezoids).
Anyways, problem is ocurring when I go from one line down to the next, I have a small white gap in between that breaks up the larger image. I have removed the horizontal and vertical spacing in the image editing ribbon, tried shift + enter, running the line onto the next with no enter. I also have added padding: 0px and border: 0px to the source code for each image. Both times it actually makes the problem worse, by adding horizontal spacing and including the vertical spacing?
I just need my images to directly stack on top of each other with no spacing.
<p dir="ltr" style="text-align: left;">
<img alt="13.png" src="..." style="margin: 0px; width: 80px; height: 71px;"/>
<img alt="23.png" src="..." style="margin: 0px; width: 80px; height: 71px;"/>
<br/>
<img alt="14.png" src="..." style="margin: 0px; width: 80px; height: 71px;"/>
<img alt="24.png" src="..." style="margin: 0px; width: 80px; height: 71px;"/>
<br/>
<br/> </p>
As far as I understand, this is your result now:
And you want to achieve this:
If that's the case, all you need to do is add display: flex; and flex-wrap: wrap; to the div parent of your images, like this:
<style>
.container {
display: flex;
flex-wrap: wrap;
}
.container img {
width: 10%;
}
</style>
<body>
<div class="container">
<img src="..." />
<img src="..." />
.
.
.
<img src="..." />
</div>
</body>
I made this simple pen to explain my problem
https://codepen.io/yonatanmk/pen/VdwGvG
When I place 2 images next to each other with width 50% of the parent they always wind up too wide to be placed side by side and end up stacked on top of each other like block elements.
Why does this happen?
How can I place the 2 images side by side while occupying the full width of the parent div without any space in between them. Having a width of 49% allows the images to be placed side by side but now there's a space between them.
display : inline-block does not seem to help.
Thank you
My code
html
<div>
<img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
<img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
<div>
css
div {
width: 500px;
}
img {
width: 50%;
}
This results in
With the code sample you provided, you can float the images and this will place them side by side with no margin.
img {
width: 50%;
float: left;
}
This is possible with the Classattribute which will specify the class name for the HTML element.
Your HTML code will look like this
<div class="row">
<div class="column">
<img src=http://www.planwallpaper.com/static/images/kitty-cat.jpg alt="planwallpaper" style="width:100%">
</div>
<div class="column">
<img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg"alt="Forest" style="width:100%">
</div>
And use the following code for the CSS
.column {
float: left;
width: 33.33%;
padding: 5px;
}
This will clear floats after image containers
.row::after {
content: "";
clear: both;
display: table;
}
I'm stuck on a piece of code pretty basic and I think I must not know the correct syntax.
I want to display 2 images side by side (horizontally so X | X) and that it is automatically resizes depending on the width of the screen ...
My problem is that the second image when the screen is reduced in width falls below the first. I tried to fix the height of my DIV Contener but the second image comes out of it ... would you know how to fix that please? Enclosed my current piece of code.
<div style="width:100%;max-height:150px;border:1px solid black;" >
<img src="http://chezsilvia.c.h.pic.centerblog.net/o/3963dc3b.jpg" style="max-width:100%;"/>
<img src="http://chezsilvia.c.h.pic.centerblog.net/o/3963dc3b.jpg" style="max-width:100%;"/>
</div>
Use position: relative; on your wrapper and width: 50%; float: left; on your images
<div style="position: relative; float: left; width: 100%; border: solid 1px #000">
<img src="yourPath.jpg" style="float: left; width:50%;">
<img src="yourPath.jpg" style="float: left; width:50%;">
</div>
Needs width: 50%; and float:left; for the left image
Heres a jsFiddle for it: http://jsfiddle.net/vwMWn/18/
Your Code:
<div style="width:100%;max-height:150px;border:1px solid black;" >
<img src="http://chezsilvia.c.h.pic.centerblog.net/o/3963dc3b.jpg" style="max-width:50%; float:left"/>
<img src="http://chezsilvia.c.h.pic.centerblog.net/o/3963dc3b.jpg" style="max-width:50%;"/>
</div>
Basically I have two pieces of text and an image.
<div class="container">
<span class="title">Text</span>
<img src="an_image.png" />
<span class="note">Other Text</span>
</div>
I want all the elements to be at the bottom of the container div, the title to aligned to the left, and the note all the way to the right. The image will be right next to the title and aligned to the bottom of the title text. So far the only way I have gotten this to work is by using relative/absolute position. Is there a way to do this with CSS?
Here is an image of what I am trying to accomplish. I can change the width and height of the container and the title, image, and notes will align properly to the bottom, left, and right just like so:
Try this
<style type="text/css">
.container { vertical-align: baseline; position: relative; border: solid 1px Gray; }
.note { position: absolute; right: 0; bottom: 0; }
</style>
<div class="container">
<span class="title">Text</span>
<img src="an_image.png" height="100" width="100" />
<span class="note">Other Text</span>
</div>
Sorry, Updated solution... Here's the working link
You can try to play around with the vertical-align, but it's kinda evil..i usually use the absolute position. You can test by yourself on the W3C Tryit Editor
i have three divs outside my contentplaceholder
masterpage code:
<div id="content-outer" class="clear">
<div id="content-wrapper">
<div id="content">
<asp:ContentPlaceHolder ID = "ContentPlaceHolder1" runat="server" >
</asp:ContentPlaceHolder>
</div>
</div>
</div>
the width of content outer div is 1400px,it works well in the screen whose width is 1400 or more but when i run it in the scree of width 1024, the whole page starts from left,,,i want to center align my page when open in the browser,i have given some css properties like
content-outer:
margin-left:auto;
margin-right:auto;(not working)
but i m not able to center align my whole page,,,plz tell me how can i do that,,i have also given the same properties for body but again no luck
Firstly, the use of the center tag has been deprecated, so you shouldn't use it.
<center>
Your content here
</center>
Your solution of (I've put the css inline for clarity)
<div style="width: 1400px; margin: 0 auto;">
Your content here
</div>
Is the correct method of centering content on a page.
As you have noticed, if the screen is smaller than your content width, it doesn't appear to be centered. This is because there is no space for a margin on the left or right of the page and it would be inconsistent to start the browser scrollbar in the middle of the page.
Your options are:
Live with it - it's how all center-aligned websites work
Reduce the width of your website to work on smaller screens (it will then have a larger margin on larger screens)
Make your design more fluid - like the example below
Hope this helps.
<div style="width: auto; margin: 0 10%;">
Your content here
</div>
just playaround with following styles
<body>
<div id="divMain">
...
</div>
</body>
body
{
margin: 0;
padding: 0;
text-align: center;
}
#divMain
{
margin: 0 auto;
padding: 0;
width: 1024px;
text-align: left;
}
or
.divMain
{
position: absolute;
left: 10%;
width: 80%;
}