I am trying to align multiple inline images, five to the left, and one to the right (the signature), preferably without the use of floats. All images should be vertically aligned (from the top). I hear flex-box is an option, but am having difficulty implementing it correctly.
https://jsfiddle.net/z5h1tfnt/5/
<html>
<style>
/* Social Media Buttons */
.social_media_logos {
display: inline-block;
margin: 0 5px;
}
#signature{
vertical-align: top;
}
</style>
<div class="social_media_logos">
<!-- LinkedIn -->
<img src="https://c1.staticflickr.com/5/4292/35304750524_b7a7b46958_o.png" alt="" width= "50" height= "50" />
<!-- Instagram -->
<img src="https://c1.staticflickr.com/5/4296/36011295361_36583c28fb_o.png" alt="" width="50" height="50" />
<!-- GitHub -->
<img src="https://c1.staticflickr.com/5/4425/36376344962_247a7a8266_o.png" alt="" width="50" height="50" />
<!-- News Columns -->
<img src="https://c1.staticflickr.com/5/4335/36124335440_ba8c32d082_o.png" alt="" width="50" height="50" />
<!-- Resume -->
<img id="Img1" src="https://c1.staticflickr.com/5/4299/36105742616_d3fe406198_o.png" alt="" width="50" height="50" />
<!-- Signature -->
<img id = "signature" src="https://c1.staticflickr.com/5/4350/36527270485_2b7a1d8506_o.png" alt="" width="150" height="150" />
</div>
</html>
So here's a solution using flexbox:
Add display: flex to the social_media_logos and give it align-items: center for vertical alignment.
Add margin-left: auto to push the signature to the right and the other icons to the left.
See demo below:
/* Social Media Buttons */
.social_media_logos {
display:flex;
align-items: center;
margin: 0 5px;
}
#signature{
margin-left:auto;
}
<div class="social_media_logos">
<!-- LinkedIn -->
<img src="https://c1.staticflickr.com/5/4292/35304750524_b7a7b46958_o.png" alt="" width= "50" height= "50" />
<!-- Instagram -->
<img src="https://c1.staticflickr.com/5/4296/36011295361_36583c28fb_o.png" alt="" width="50" height="50" />
<!-- GitHub -->
<img src="https://c1.staticflickr.com/5/4425/36376344962_247a7a8266_o.png" alt="" width="50" height="50" />
<!-- News Columns -->
<img src="https://c1.staticflickr.com/5/4335/36124335440_ba8c32d082_o.png" alt="" width="50" height="50" />
<!-- Resume -->
<img id="Img1" src="https://c1.staticflickr.com/5/4299/36105742616_d3fe406198_o.png" alt="" width="50" height="50" />
<!-- Signature -->
<img id = "signature" src="https://c1.staticflickr.com/5/4350/36527270485_2b7a1d8506_o.png" alt="" width="150" height="150" />
</div>
Is this what you mean?
<html>
<head>
<style>
.social_media_logos {
display: flex;
margin: 0 5px;
width: 100%;
align-items: center;
justify-content: space-between
}
</style>
</head>
<body>
<div class="social_media_logos">
<div>
<!-- LinkedIn -->
<a href="https://www.linkedin.com/in/mahdi-al-husseini-0aa98678/">
<img src="https://c1.staticflickr.com/5/4292/35304750524_b7a7b46958_o.png" alt="" width="50" height="50" />
</a>
<!-- Instagram -->
<a href="https://www.instagram.com/alhusseinimahdi/">
<img src="https://c1.staticflickr.com/5/4296/36011295361_36583c28fb_o.png" alt="" width="50" height="50" />
</a>
<!-- GitHub -->
<a href="https://github.com/csapidus">
<img src="https://c1.staticflickr.com/5/4425/36376344962_247a7a8266_o.png" alt="" width="50" height="50" />
</a>
<!-- News Columns -->
<a href="columns.html">
<img src="https://c1.staticflickr.com/5/4335/36124335440_ba8c32d082_o.png" alt="" width="50" height="50" />
</a>
<!-- Resume -->
<img id="Img1" src="https://c1.staticflickr.com/5/4299/36105742616_d3fe406198_o.png" alt="" width="50" height="50" />
</div>
<!-- Signature -->
<img id="signature" src="https://c1.staticflickr.com/5/4350/36527270485_2b7a1d8506_o.png" alt="" width="150" height="150" />
</div>
</body>
</html>
I wrapped all the icons on the left in a container and pushed the signature and the icon container to the inner outside of the main container with flex box.
Related
so i have a table and i want the buttons side by side instead of stacked
Css or HTML is fine but not js sorry if the question isnt very clear im still new to this :/
i tried
display: flex;
align-items: center;
justify-content: center;
but that just does this
ive included the CSS and html code snippett bellow thanks to everyone who can help i kept the alts instead of the actual image because this is for my photography website
#charset "UTF-8";
button{
display:inline-block;
padding:0.5em 3em;
border:0.16em solid #FFFFFF;
margin:0 0.3em 0.3em 0;
box-sizing: border-box;
text-decoration:none;
text-transform:uppercase;
font-family:'Roboto',sans-serif;
font-weight:400;
color:#FFFFFF;
text-align:center;
transition: all 0.15s;
}
button:hover{
color:#DDDDDD;
border-color:#DDDDDD;
}
button:active{
color:#BBBBBB;
border-color:#BBBBBB;
}
#media all and (max-width:30em){
button{
display:block;
margin:0.4em auto;
}
}
<div style="text-align:center">
<button id="wildlife">EG </button><br>
<button id="landscape">EG </button><br>
<button id="ocean">EG </button>
</div>
<div class="wildlife">
<img src="Images/animals/DSC04758.jpg" eight="150" width="200" alt="rocks" />
<img src="Images/animals/bird.png" eight="150" width="200" alt="rocks" />
<img src="Images/animals/birds1.png" eight="150" width="200" alt="rocks" />
<img src="Images/animals/birds2.png" eight="150" width="200" alt="rocks" />
<img src="Images/animals/birds3.png" eight="150" width="200" alt="rocks" />
<img src="Images/animals/birds4.png" eight="150" width="200" alt="rocks" />
</div>
<div class="landscape">
<img src="" height="150" width="200" alt="rocks" />
<img src="" height="150" width="200" alt="rocks" />
<img src="" height="150" width="200" alt="rocks" />
<img src="" height="150" width="200" alt="rocks" />
<img src="" height="150" width="200" alt="rocks" />
<img src="" height="150" width="200" alt="rocks" />
</div>
<div class="ocean">
<img src="" height="150" width="200" alt="rocks" />
<img src="" height="150" width="200" alt="rocks" />
<img src="" height="150" width="200" alt="rocks" />
<img src="" height="150" width="200" alt="rocks" />
<img src="" height="150" width="200" alt="rocks" />
<img src="" height="150" width="200" alt="rocks" />
</div>
<font face="sans-serif" color="#017bf5" size="5" align="center">
<h1>### </h1>
</font>
<font face="sans-serif" color="#444" size="3" align="center">
<h1>###</h1>
</font>
</body>
In Your HTML Code, you used <br> tag after each button. Which pushes your button to the next line.
Solution: Remove <br> tags after button elements.
A div box around the buttons with display: flex; and flex-direction: row; Should work
I have a bunch of images that are right next to each other to form a navigation bar. There are no gaps so it looks like one image while being able to make certain areas of it clickable and others not. How do I make it so if the navigation bar is too long for the window it gets smaller instead of some of the images going on a new line?
HTML/CSS:
.navbar-button {
margin: 0;
padding: 0;
display: inline block;
text-align: center;
margin-left: auto;
margin-right: auto;
height: 10%;
}
<center>
<img src="Images/NavBar1.png" alt="" class="navbar-button" />
<a href="Home.html">
<img src="Images/NavBar2.png" alt="" class="navbar-button" />
</a>
<img src="Images/NavBar3.png" alt="" class="navbar-button" />
<a href="Information.html">
<img src="Images/NavBar4.png" alt="" class="navbar-button" />
</a>
<img src="Images/NavBar5.png" alt="" class="navbar-button" />
<img src="Images/NavBar6.png" alt="" class="navbar-button" />
<img src="Images/NavBar7.png" alt="" class="navbar-button" />
<a href="Schedule.html">
<img src="Images/NavBar8.png" alt="" class="navbar-button" />
</a>
<img src="Images/NavBar9.png" alt="" class="navbar-button" />
<a href="#" onClick="document.getElementById('id01').style.display='block'">
<img src="Images/NavBar10.png" alt="" class="navbar-button" />
</a>
<img src="Images/NavBar11.png" alt="" class="navbar-button" />
</center>
Instead of trying to prevent the linebreak with multiple images, you may want to take a look at the possibility to define clickable areas on a single image. You can define a map with different clickable areas. Take a look at the example below, where only the area around the text is actually clickable:
<img src="https://dummyimage.com/600x400/000/fff" usemap="#map">
<map name="map">
<area shape="rect" coords="100,150,500,250" href="#">
</map>
You can also define different shapes and sizes, for a better understanding, just take a look at the documentation
Please also note
If you define coordinates as pixels, this can lead to different clickable areas, if you resize the image. There is another question at StackOverflow, with a helpful discussion on how to create responsive image maps
I don't know if i got what you are trying to do but check this and let me if it works for you
jsfiddle link
<div class="my-navbar">
<center>
<img src="https://cdn.pixabay.com/photo/2015/07/25/08/03/the-button-859350_1280.png" alt="" class="navbar-button" />
<a href="Home.html">
<img src="https://cdn.pixabay.com/photo/2015/07/25/08/03/the-button-859350_1280.png" alt="" class="navbar-button" />
</a>
<img src="https://cdn.pixabay.com/photo/2015/07/25/08/03/the-button-859350_1280.png" alt="" class="navbar-button" />
<a href="Information.html">
<img src="https://cdn.pixabay.com/photo/2015/07/25/08/03/the-button-859350_1280.png" alt="" class="navbar-button" />
</a>
<img src="https://cdn.pixabay.com/photo/2015/07/25/08/03/the-button-859350_1280.png" alt="" class="navbar-button" />
<img src="https://cdn.pixabay.com/photo/2015/07/25/08/03/the-button-859350_1280.png" alt="" class="navbar-button" />
<img src="https://cdn.pixabay.com/photo/2015/07/25/08/03/the-button-859350_1280.png" alt="" class="navbar-button" />
<a href="Schedule.html">
<img src="https://cdn.pixabay.com/photo/2015/07/25/08/03/the-button-859350_1280.png" alt="" class="navbar-button" />
</a>
<img src="https://cdn.pixabay.com/photo/2015/07/25/08/03/the-button-859350_1280.png" alt="" class="navbar-button" />
<a href="#" onClick="document.getElementById('id01').style.display='block'">
<img src="https://cdn.pixabay.com/photo/2015/07/25/08/03/the-button-859350_1280.png" alt="" class="navbar-button" />
</a>
<img src="https://cdn.pixabay.com/photo/2015/07/25/08/03/the-button-859350_1280.png" alt="" class="navbar-button" />
</center>
</div>
.navbar-button {
margin: 0;
padding: 0;
display: block;
text-align: center;
margin-left: auto;
margin-right: auto;
height: 10%;
float:left;
width:200px;
}
Try this
.navbar-button {
margin: 0 10px !important;
padding: 0;
display: inline block;
text-align: center;
margin-left: auto;
margin-right: auto;
height: 10%;
}
I am working on a website, and I would like to align 4 circles in the center of the content area. The example can be found at invisionbilling.com/stackoverflow. I have something right now that does the job, but I know there will be issues with different window sizes, different picture sizes, etc. How do I set the height of the div container to automatically wrap around the 4 circles/images? Is there a way to automatically center it using margin-left and margin-right? I tried "auto" for all of these and it wasn't doing the job. Thanks!
HTML
<div class="wrapper">
<div class="circles">
<img src="http://invisionbilling.com/wp-content/uploads/2018/08/Benefits-
Circles-Lower-Costs-300x300.png" alt="" width="150" height="150"
class="alignnone size-medium wp-image-358" />
</div>
<div class="circles">
<img src="http://invisionbilling.com/wp-content/uploads/2018/08/Benefits-
Circles-Greater-Cash-Flow-300x300.png" alt="" width="150" height="150"
class="alignnone size-medium wp-image-363" />
</div>
<div class="circles">
<img src="http://invisionbilling.com/wp-content/uploads/2018/08/Benefits-
Circles-Increased-Revenue-300x300.png" alt="" width="150" height="150"
class="alignnone size-medium wp-image-364" />
</div>
<div class="circles">
<img src="http://invisionbilling.com/wp-content/uploads/2018/08/Benefits-
Circles-Emphasis-on-Patient-Care-300x300.png" alt="" width="150"
height="150" class="alignnone size-medium wp-image-361" />
</div>
</div>
CSS
.circles {
display: block !important;
float: left !important;
margin: 10px !important;
}
.wrapper {
height: 175px;
width: 100%;
margin-left: 225px;
}
Try flexbox instead of floating, and try never to use !important:
<!DOCTYPE html>
<html>
<head>
<style>
.circles {
margin: 10px;
}
.wrapper {
height: 175px;
width: 100%;
margin: auto;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="circles">
<img src="http://invisionbilling.com/wp-content/uploads/2018/08/Benefits-Circles-Lower-Costs-300x300.png" alt="" width="150" height="150"
class="alignnone size-medium wp-image-358" />
</div>
<div class="circles">
<img src="http://invisionbilling.com/wp-content/uploads/2018/08/Benefits-Circles-Greater-Cash-Flow-300x300.png" alt="" width="150" height="150"
class="alignnone size-medium wp-image-363" />
</div>
<div class="circles">
<img src="http://invisionbilling.com/wp-content/uploads/2018/08/Benefits-Circles-Increased-Revenue-300x300.png" alt="" width="150" height="150"
class="alignnone size-medium wp-image-364" />
</div>
<div class="circles">
<img src="http://invisionbilling.com/wp-content/uploads/2018/08/Benefits-Circles-Emphasis-on-Patient-Care-300x300.png" alt="" width="150"
height="150" class="alignnone size-medium wp-image-361" />
</div>
</div>
</body>
</html>
I have a header on my screen that contains 7 images.
I want the header to cover width: 100% site. The header is 1920*50px. I want the right side of the header to cut out if the screen resolution is less than 1920*1080 and not the left side.
Here's the header in html:
<div id="apDiv1">
<img src="Bilder/navbar/images/navbar-rambech_01.jpg" width="53" height="50" />
<img src="Bilder/navbar/images/navbar-rambech_02.jpg" width="236" height="50" alt="Rambech" />
<img src="Bilder/navbar/images/navbar-rambech_03.jpg" width="202" height="50" alt="Sourcebans" />
<img src="Bilder/navbar/images/navbar-rambech_04.jpg" width="135" height="50" alt="Forum" />
<img src="Bilder/navbar/images/navbar-rambech_05.jpg" width="199" height="50" alt="Søke Admin" /><img src="Bilder/navbar/images/navbar-rambech_06.jpg" width="116" height="50" alt="VIP" />
<img src="Bilder/navbar/images/navbar-rambech_07.jpg" width="979" height="50" max-width="100%" />
</div>
Here you go.
Add the below code to your CSS. This will cut images on the right side.
#apDiv1 {
width:100%;
white-space:nowrap;
overflow:hidden;
}
I want to make a navigation bar, with each item having its own image with the name of the item written on top of that. So there should be a few images in a row, and each one has some text written on it. This is the row of images I got:
<div class="navigation" align="center">
<img src="images/bn_blue.png" width="120" height="70" alt="" />
<img src="images/bn_blue.png" width="120" height="70" alt="" />
<img src="images/bn_blue.png" width="120" height="70" alt="" />
<img src="images/bn_blue.png" width="120" height="70" alt="" />
<img src="images/bn_blue.png" width="120" height="70" alt="" />
<img src="images/bn_blue.png" width="120" height="70" alt="" />
</div>
<div class="navigation" align="center">
<ul><li><div style="background-image:url(images/bn_blue.png);width:120px;height:70px">xyz</div></li>
<li><div style="background-image:url(images/bn_blue.png);width:120px;height:70px">xyz</div></li>
<li><div style="background-image:url(images/bn_blue.png);width:120px;height:70px">xyz</div></li>
<li><div style="background-image:url(images/bn_blue.png);width:120px;height:70px">xyz</div></li>
<li><div style="background-image:url(images/bn_blue.png);width:120px;height:70px">xyz</div><li>
</ul>
</div>
<style>
li
{
display:inline-block;
}
</style>
Give each a href a class ie .home_bg etc.
Then in css add a
.home_bg {
background-image: url(/example/example.png)
}
do this for each image if they are different. Then in the html remove img tags