How do i align two pictures with different heights HTML - html

[I am working on a website as school project and i want to align these two pictures. One of them the Öppettider is way to low.]
This is what the website looks like.
Here is the code for the pictures
<p> </p>
<img src="../oppettider.gif" width="" height="500" alt=""/>
<img src="la-carte-förrätter.gif" width="680" height="2608" alt=""/>

you can use flexbox:
<div class="images-flex">
<img src="../oppettider.gif" width="" height="500" alt=""/>
<img src="la-carte-förrätter.gif" width="680" height="2608" alt=""/>
</div>
then in css:
.images-flex {
display: flex;
align-items: flex-start;
}

align means one after another ?
the best way is using bootstrap u can easily do it
according to me the best way of doing is using grid system use this link and try to implement ...
https://getbootstrap.com/docs/4.4/layout/grid/

Related

How to add padding/margin to images so that text is not abutting them?

I'm creating a personal website using Github. In this markdown file, I'm trying to align a photo to the left then have a brief intro of myself right next to the photo. This is my current code.
<img align="left" width="300" height="440" src="image/photo.JPG">
my introduction text goes here
What do I need to do to add some margin to the image so that the text is not bumping into the image? Thank you so much!
You can try this:
<img style="margin-right: 1.5rem" align="left" height="auto" width="300" src="https://thumbs.dreamstime.com/b/introduction-concept-word-cork-board-77226561.jpg" />
<p>Hi, this is the introduction...</p>
Or you can opt to use a multi-column layout and specify a column gap to your liking:
<section id="introWrapper" style="column-count: 2; column-gap: 50px">
<img>
<p></p>
<section>

Multiple images fill screen width using CSS

I have multiple images to show in a row that filled screen width:
<img src="1.jpg" style="max-width:25%">
<img src="2.jpg" style="max-width:25%">
<img src="3.jpg" style="max-width:25%">
<img src="4.jpg" style="max-width:25%">
In some pages I have 4 images but some have 5, 6, etc.
I don't want to change max-width for every pages so is that a way in CSS to take care of it?
p.s. I don't want to use table and background-image since a js plugin need find them as img, also img tag is google-friendly too...
I'd suggest you to use flexbox. It's really useful and can be mastered to make almost any kind of grid you want. Wrap all images in container class with display:flex and for each img element set flex:1. This is the simplest way. If you need to adjust it, read about it, it's great! Example here
.flexContainer {
display:flex;
max-height:200px;
}
.flexContainer > img {
flex:1;
border:1px solid;
margin:1px;
}
<div class="flexContainer">
<img src="http://lorempixel.com/image_output/food-q-c-640-480-5.jpg"/>
<img src="http://lorempixel.com/image_output/technics-q-c-640-480-10.jpg" />
<img src="http://lorempixel.com/image_output/food-q-c-640-480-3.jpg" />
<img src="http://lorempixel.com/image_output/food-q-c-640-480-5.jpg"/>
</div>
<br/>
<div class="flexContainer">
<img src="http://lorempixel.com/image_output/food-q-c-640-480-5.jpg"/>
<img src="http://lorempixel.com/image_output/technics-q-c-640-480-10.jpg" />
<img src="http://lorempixel.com/image_output/food-q-c-640-480-3.jpg" />
<img src="http://lorempixel.com/image_output/food-q-c-640-480-5.jpg"/>
<img src="http://lorempixel.com/image_output/technics-q-c-640-480-10.jpg" />
<img src="http://lorempixel.com/image_output/food-q-c-640-480-3.jpg" />
</div>
There is no pure CSS way to solve it. Little jQuery can do it for you:
$(parentElem).each(function() {
var itemsCount = $(this).children().length;
var childrenWidth = 100 / itemsCount + '%';
$(this).children().css('width', childrenWidth);
});
where parentElem is container for your images. jQuery each loop here in case you have multiple rows with images on your page.

CSS Placement on Web Page

+-------------------------------------------------------------------------------+
|*************** HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH|
|*************** HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH|
|*************** PPPPPPPPPPPPPPPPPPPPPPPPPPP |
|*************** |
|TTTTTTTTTTTTTTTTTTTTTTTT |
| |
|-------------------------------------------------------------------------------+
Sorry for the sketch here. I tried to attach a screen shot, but I couldn't get it to show up. (I'll try to fix it later on another computer if this doesn't explain enough)
EDIT: This might help visualize it... http://jsfiddle.net/T3y6E/embedded/result/
I have a <div> on a personal web page I am working on. The * represent an image placement. The "H" represent a title placement. The "T" represent a slogan placement. I am trying to move the slogan over so that it is directly below the Title (wanted placement represented by "P")
Here is my HTML for this portion of the page:
<div class="logo-image">
<img src="~/Images/Atlas.png" height="125" width="150" alt="Atlas Logo" />
<img style="vertical-align:top" src="~/Images/WebPageLogo.png" height="85" width="820" alt="Atlas Logo" />
<div style="color:#FFF">*A southpaw's approach to bowling*</div>
</div>
Here is css that affects it:
.logo-image {
float: left;
margin: 0px 20px 0px 0px;
}
The effect you're looking for is float. It must be applied to the element you want to be floating, in this case the first image. And the element (with float) must be placed before the element you want it to float from, in your case the title and slogan.
I've created a fiddle with your code to show the concept: http://jsfiddle.net/3xV5Z/1/
Just a reminder: Your slogan is too big. Float won't work well with it if you don't manage your images width.
My answer is very similar to LcSalazar's. It uses your css.
<div>
<span class="logo-image">
<img src="http://placekitten.com/150/125" height="125" width="150" alt="Atlas Logo" />
</span>
<img style="vertical-align:top" src="http://placekitten.com/820/85" height="85" width="820" alt="Atlas Logo" />
<div>*A southpaw's approach to bowling*</div>
</div>

Horizontal Align Two Images in a DIV

I have two images that I'm trying to center align horizontally. Currently they look like this...
But, I would like the "APPLY NOW" button to be horizontally aligned like so...
My current code for the two images is this...
<img class="alignright" src="image1.png" alt="" />
<img src="image2.png" align="right">
I've attempted to center align them without CSS, and I'd prefer not to use CSS if there is a way I can do it without it. If I have to use CSS, then I'd appreciate any help that is provided!
Thanks!
With CSS just use the vertical-align property with the value middle
More about vertical-align: http://www.w3schools.com/cssref/pr_pos_vertical-align.asp
Without css... I've no idea.
add the following css to the parent box or element which the images are in:
style="display:table-cell; vertical-align:middle;"
hth
Just apply two rules to the second image .
<img class="alignright" src="image1.png" alt="" />
<img class="center" src="image2.png" align="right">
css code:
.center{
positon:relative;
top:50%;
bottom:50%;
}

Why are my images not stuck together?

I have this simple HTML / CSS
<div class="image-group">
<img src="http://placehold.it/80x80" />
<img src="http://placehold.it/120x120" />
<img src="http://placehold.it/80x80" />
</div>
.image-group img {
margin: 0;
padding: 0;
}
JSFiddle
Why are the images not stuck together? I inspect the elements using Chrome's Inspector and it shows me nothing in between the images, yet they are spaced out.
I can get them to stick together by applying negative margins, but according to me, they should be sticking together anyways.
There's space in your html code. Try below
<div class="image-group">
<img src="http://placehold.it/80x80" /><img src="http://placehold.it/120x120" /><img src="http://placehold.it/80x80" />
</div>
Check out this blog post about dealing with spaces with consecutive inline-block elements such as images.
http://css-tricks.com/fighting-the-space-between-inline-block-elements/