There is a white space before the image in the second row. I don’t know why this is happening.
Margin and padding are fine.
All images are of the same size, but there is white space on the second row before the image. 2 more images can fit in there.
Upon inspecting it's just showing white space from the body.
No excess margin or padding is there from any of the images.
Used – "float: left;"
The images on the third row and further are fine.
Can someone figure out the issue, why is this happening?
Click to see image
HTML File:
<!DOCTYPE html>
<html>
<head>
<title>Photo Gallery</title>
<link rel="stylesheet" type="text/css" href="gallery.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:400,800&display=swap" rel="stylesheet">
</head>
<body>
<p>Photo Gallery</p>
<img src="a (1).jpg">
<img src="a (2).jpg">
<img src="a (3).jpg">
<img src="a (4).jpg">
<img src="a (5).jpg">
<img src="a (6).jpg">
<img src="a (7).jpg">
<img src="a (8).jpg">
<img src="a (9).jpg">
</body>
</html>
CSS File:
img{
width: 30%;
float: left;
margin: 1.66%;
padding: 0;
}
p{
font-family: Raleway;
margin-left: 1.66%;
font-size: 30px;
font-weight: 800;
border-bottom: 3px solid #f1f1f1;
width:30%;
padding-bottom: 30px;
}
This is happening because the images are of different height. The best solution with display block layout will be using a width to the image and setting the display: inline-block
img{
width: 30%;
/* margin: 1.66%; */
padding: 0;
display: inline-block;
vertical-align: middle;
}
p{
font-family: Raleway;
margin-left: 1.66%;
font-size: 30px;
font-weight: 800;
border-bottom: 3px solid #f1f1f1;
width:30%;
padding-bottom: 30px;
}
<p>Photo Gallery</p>
<div class="image-container">
<img src="https://www.w3schools.com/html/img_girl.jpg">
<img src="https://www.w3schools.com/html/pic_trulli.jpg">
<img src="https://www.w3schools.com/html/pic_trulli.jpg">
<img src="https://www.w3schools.com/html/pic_trulli.jpg">
<img src="https://www.w3schools.com/html/pic_trulli.jpg">
<img src="https://www.w3schools.com/html/pic_trulli.jpg">
<img src="https://www.w3schools.com/html/pic_trulli.jpg">
<img src="https://www.w3schools.com/html/pic_trulli.jpg">
<img src="https://www.w3schools.com/html/pic_trulli.jpg">
</div
Or else you can go for flex display. This will ensure that the child elemets are of same height, without explicitly mentioning the height.
.image-item {
display: flex;
flex-direction: column;
width: 30%;
margin: 1.66%;
padding: 0;
justify-content: center;
}
img{
width: 100%;
}
.image-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
p {
font-family: Raleway;
margin-left: 1.66%;
font-size: 30px;
font-weight: 800;
border-bottom: 3px solid #f1f1f1;
width: 30%;
padding-bottom: 30px;
}
<p>Photo Gallery</p>
<div class="image-container">
<div class="image-item">
<img src="https://www.w3schools.com/html/img_girl.jpg" />
</div>
<div class="image-item">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" />
</div>
<div class="image-item">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" />
</div>
<div class="image-item">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" />
</div>
<div class="image-item">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" />
</div>
<div class="image-item">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" />
</div>
<div class="image-item">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" />
</div>
<div class="image-item">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" />
</div>
</div>
It's the margin property.
img{
width: 30%;
float: left;
margin: 0 1.66%;
padding: 0;
}
p{
font-family: Raleway;
margin-left: 1.66%;
font-size: 30px;
font-weight: 800;
border-bottom: 3px solid #f1f1f1;
width:30%;
padding-bottom: 30px;
}
<p>Photo Gallery</p>
<img src="https://www.w3schools.com/html/pic_trulli.jpg">
<img src="https://www.w3schools.com/html/pic_trulli.jpg">
<img src="https://www.w3schools.com/html/pic_trulli.jpg">
<img src="https://www.w3schools.com/html/pic_trulli.jpg">
<img src="https://www.w3schools.com/html/pic_trulli.jpg">
<img src="https://www.w3schools.com/html/pic_trulli.jpg">
<img src="https://www.w3schools.com/html/pic_trulli.jpg">
<img src="https://www.w3schools.com/html/pic_trulli.jpg">
<img src="https://www.w3schools.com/html/pic_trulli.jpg">
Related
I am trying to implement a contact us page. the heading here takes only the intended space but the div takes up extra vertical space. Where did I go wrong?
section {
display: flex;
flex-wrap: wrap;
width: 99vw;
height: 96vh;
padding-top: 4vh;
}
#heading {
width: 100%;
line-height: 0.7em;
}
h1 {
display: inline;
height: 100%;
font-size: 1rem;
}
<section>
<div id="heading">
<h1>Contact Us</h1>
</div>
<div id="media_container">
<img class="soc_med" src="fb.png" alt="fb">
<img class="soc_med" src="instagram.png" alt="insta">
<img class="soc_med" src="linkedin.png" alt="LinkedIn">
<img class="soc_med" src="email.png" alt="email">
</div>
</section>
Just remove the height from the section
section{
display: flex;
flex-wrap: wrap;
width: 99vw;
padding-top: 4vh;
}
#heading{
width: 100%;
line-height: 0.7em;
}
h1{
display: inline;
height: 100%;
font-size: 1rem;
}
<section>
<div id = "heading">
<h1>Contact Us</h1>
</div>
<div id = "media_container">
<img class="soc_med" src="fb.png" alt="fb">
<img class="soc_med" src="instagram.png" alt="insta">
<img class="soc_med" src="linkedin.png" alt="LinkedIn">
<img class="soc_med" src="email.png" alt="email">
</div>
</section>
Just add margin: 0; to html, body to avoid the default margins on these elements which are the cause for your problem:
html,
body {
margin: 0;
}
section {
display: flex;
flex-wrap: wrap;
width: 99vw;
height: 96vh;
padding-top: 4vh;
}
#heading {
width: 100%;
line-height: 0.7em;
}
h1 {
display: inline;
height: 100%;
font-size: 1rem;
}
<section>
<div id="heading">
<h1>Contact Us</h1>
</div>
<div id="media_container">
<img class="soc_med" src="fb.png" alt="fb">
<img class="soc_med" src="instagram.png" alt="insta">
<img class="soc_med" src="linkedin.png" alt="LinkedIn">
<img class="soc_med" src="email.png" alt="email">
</div>
</section>
I using backend language php (laravel) and front end html + css;
I make reaction box. Bottom have image for reaction. Top the upper part increases according to the ratio.
I want like this;
https://i.hizliresim.com/YdbYqz.png
But actual;
https://i.hizliresim.com/JV20ao.png
My codes;
https://jsfiddle.net/63yusufsari63/wfh5zexm/
.reaction-box {
text-align: center;
padding: 10px;
}
.reaction-box a {
text-decoration: none;
font-weight: bold;
color: #fc5bb6;
}
.reaction-box a:hover {
opacity: 0.6;
}
.reaction-in-box {
float: left;
width: auto;
}
.reaction-range {
margin: 1px 4px;
background-color: #fc5bb6;
}
.reaction-description {
background-color: #f4f6f6;
padding: 5px;
}
.reaction-description img {
display: block;
width: 50px !important;
height: 50px !important;
margin: 0 auto 5px auto;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha256-YLGeXaapI0/5IgZopewRJcFXomhRMlYYjugPLSyNjTY=" crossorigin="anonymous" />
<a href="#" title="name" class="reaction-in-box text-center">
<span>Rate</span>
<div class="reaction-range" style="height: 50px; bottom: 0;"></div>
<div class="reaction-description">
<img src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="img-fluid" alt="Name">
Name
</div>
</a>
<a href="#" title="name" class="reaction-in-box text-center">
<span>Rate</span>
<div class="reaction-range" style="height: 20px; bottom: 0;"></div>
<div class="reaction-description">
<img src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="img-fluid" alt="Name">
Name
</div>
</a>
<a href="#" title="name" class="reaction-in-box text-center">
<span>Rate</span>
<div class="reaction-range" style="height: 40px; bottom: 0;"></div>
<div class="reaction-description">
<img src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="img-fluid" alt="Name">
Name
</div>
</a>
I would like to know how can I move the text next to the little images. As you can see it in the image, the text and icons are not completely in-line with each other.
h1.titu{
margin-left: 370px;
margin-top: 20px;
padding-top: 1px
color: #fff;
font-family: arial;
font-size: 7vw;
text-transform: uppercase;
background: url(../images/lines.jpg);
background-size: cover;
-webkit-text-fill-color:
transparent;
-webkit-background-clip: text;
}
.socialmedia {
margin-left: 400px;
}
img.eye{
float: right;
padding-right: 240px;
}
img.instagram{
padding-left: 190px;
}
img.twitter{
}
<html>
<head>
<meta charset="UTF-8" />
<title>About me</title>
<link href="../CSS/main.css" rel="stylesheet" type="text/css">
</head>
<body id ="contact">
<h1 class="titu">contact</h1>
</body>
<div class="socialmedia">
<p >
<img class="insta" src="../images/insta.png" width="60">
Juliancmr
</p>
<p>
<img class="twitter"src="../images/twitter.png" width="60">
Julian Mancera
</p>
<p>
<img class="twitter"src="../images/in.png" width="60">
Julian.mr mancera
</p>
<p>
<img class="mail" src="../images/mail.png" width="60">
Julian.mr#hotmail.com
</p>
</div>
</html>
Using vertical-align on images you can tweek it's position like this
.socialmedia img{
vertical-align:-10px;
}
Tweak the -10px up or down to your liking
If you put the images and text in a div that has display: flex on it, it will align things center. Something like:
<div class="flex-row">
<img src="image-src.jpg">
<p>caption<p>
<img src="image-src.jpg">
<p>caption<p>
</div>
Working fiddle:
https://jsfiddle.net/02sgLq1n/2/
Firstly, your body tag in the given html is prematurely closed (it's before the div, it should be at the end of the body content, i.e. before the </html> tag). Also, as mentioned in a previous answer, the body tag does not take an id, it is a native tag and can be referred to as body{} in css.
As for the matter of positioning the icons, I too would recommend flex, although given that you are a beginner, it may be running before you can walk. I have linked to an article that is a good read if you want to use this.
You are using quite a few classes as-is to style your icons. If you want your icons to have similar height/width/position, I would recommend using one icon class, and setting the img src in the HTML.
Sample snippet using flex:
#container {
display: flex;
flex-direction: column;
}
.flex-row {
display: flex;
align-items: center;
margin-left: 200px;
}
.icon {
margin: 10px;
height: 50px;
width: 50px;
background-color: lightgrey;
border: 1px solid grey;
}
<div id="container">
<div class='flex-row'>
<img class='icon' src=" " alt="Insta icon">
<p>Instagram</p>
</div>
<div class='flex-row'>
<img class='icon' src="https://image.flaticon.com/icons/svg/1051/1051280.svg" alt="Twitter icon">
<p>Julian.mr mancera</p>
</div>
<div class='flex-row'>
<img class='icon' src=" " alt="LkedIn icon">
<p>LinkedIn</p>
</div>
<div class='flex-row'>
<img class='icon' src=" " alt="Email icon">
<p>E-mail</p>
</div>
</div>
OR you could use display:inline-block with vertical-align:middle to align your img/paragraphs as follows: (jsfiddle)
#container {
display: inline-block;
}
.socialmed {
display: inline-block;
margin: 0 0 0 200px;
}
.smtext {
color: red;
font-family: "Verdana", sans-serif;
font-size:10pt;
}
.icon {
margin: 10px;
height: 50px;
width: 50px;
background-color: lightgrey;
border: 1px solid grey;
}
.icon, .smtext {
display: inline-block;
vertical-align: middle;
}
<div id="container">
<div class='socialmed'>
<img class='icon' src=" " alt="Insta icon">
<p class='smtext'>Instagram</p>
</div>
<div class='socialmed'>
<img class='icon' src="https://image.flaticon.com/icons/svg/1051/1051280.svg" alt="Twitter icon">
<p class='smtext'>Julian.mr mancera</p>
</div>
<div class='socialmed'>
<img class='icon' src=" " alt="LkedIn icon">
<p class='smtext'>LinkedIn</p>
</div>
<div class='socialmed'>
<img class='icon' src=" " alt="Email icon">
<p class='smtext'>E-mail</p>
</div>
</div>
Hope this helps!
I am trying to align logos horizontally with the respective text underneath them so they look nice and in order. Currently, they are just vertical. I have searched this site and many others, and tried different solutions but nothing seems to work. Here is my code.
.intro-text {
color: #000000;
display: block;
width: 100%;
margin: 50px 0 0 0;
text-align: justify;
line-height: 1.8em;
}
.intro-text-3d {
color: #000000;
display: block;
width: 100%;
text-align: center;
line-height: 1.8em;
}
.intro-text-process {
color: #000000;
display: block;
width: 100%;
text-align: center;
line-height: 1.8em;
}
.intro-text-toolset {
color: #000000;
display: block;
width: 100%;
text-align: center;
line-height: 1.8em;
}
/** Logos **/
.logos-all {
display: block;
text-align: center;
margin: 0 auto;
}
img {
display: inline-block;
margin: 0 auto;
vertical-align: middle;
border: 0;
line-height: 50px;
max-width: 100%;
width: 5%;
height: auto;
margin-bottom: .95em;
}
strong {
display: block;
font-weight: 700;
text-align: center;
}
section h4 {
text-align: center;
}
<article>
<section>
<p class="intro-text">
Some text goes here.
</p></div>
<div>
<img src="http://lorempixel.com/80/79" alt="CSS3" height="80" width="79"/>
<strong>CSS3</strong>
</div>
<div>
<img src="http://lorempixel.com/80/79" alt="Javascript" height="80" width="79"/>
<strong>Javascript</strong>
</div>
<div>
<img src="http://lorempixel.com/80/79" alt="Wordpress" height="80" width="79"/>
<strong>Wordpress</strong>
</div>
<div>
<img src="http://lorempixel.com/80/79" alt="PhP" height="80" width="79"/>
<strong>PhP</strong>
</div>
</div>
</section>
<section>
<p class="intro-text-3d">
Some text goes here
</p>
<div class="logos-all">
<div>
<img src="img/3ds max-logo.png" alt="3ds Max" height="80" width="79"/>
<strong>3DS MAX</strong>
</div>
<div>
<img src="img/c4d-logo.png" alt="Cinema 4D" height="80" width="79"/>
<strong>Cinema 4D</strong>
</div>
<div>
<img src="img/blender-logo.png" alt="Blender 3D" height="80" width="79"/>
<strong>Blender</strong>
</div>
</div>
</section>
<section>
<h4>How the process works</h4>
<p class="intro-text-process">Some text goes here </p>
</section>
<section>
<h4>Design Toolset</h4>
<p class="intro-text-toolset">Some text goes here.</p>
<div class="logos-all">
<div>
<img src="img/photoshop-logo.png" alt="Photoshop" height="80" width="79"/>
<strong>Photoshop</strong>
</div>
<div>
<img src="img/illustrator-logo.png" alt="Illustrator" height="80" width="79"/>
<strong>Illustrator</strong>
</div>
<div>
<img src="img/gimp-logo.png" alt="Gimp" height="80" width="79"/>
<strong>Gimp</strong>
</div>
<div>
<img src="img/inkscape-logo.png" alt="Inkscape"/>
<strong>Inkscape</strong>
</div>
</div>
</article>
</section>
Because your images are inline-block, you need to put text-align: center on the parent (the <div>).
Alternatively:
You could also make your images display: block
Or using flexbox:
Make your <div> display: flex; flex-direction: column and your image width: auto;
You can use floats to align blocks with images and text horizontally and text-align to align images and text inside them.
Overflow hidden inside section clears floats inside them, in case you'd want to have background on it and it wouldn't display properly.
.intro-text {
color: #000000;
display: block;
width: 100%;
margin: 50px 0 0 0;
text-align: justify;
line-height: 1.8em;
}
.intro-text-3d {
color: #000000;
display: block;
width: 100%;
text-align: center;
line-height: 1.8em;
}
.intro-text-process {
color: #000000;
display: block;
width: 100%;
text-align: center;
line-height: 1.8em;
}
.intro-text-toolset {
color: #000000;
display: block;
width: 100%;
text-align: center;
line-height: 1.8em;
}
/** Logos **/
.logos-all {
display: block;
text-align: center;
margin: 0 auto;
}
img {
display: inline-block;
margin: 0 auto;
vertical-align: middle;
border: 0;
line-height: 50px;
max-width: 100%;
width: 5%;
height: auto;
margin-bottom: .95em;
}
strong {
display: block;
font-weight: 700;
text-align: center;
}
section h4 {
text-align: center;
}
section {
overflow: hidden;
}
section > div {
text-align: center;
float: left;
width: 25%; /* 1/logos in row */
}
<article>
<section>
<p class="intro-text">
Some text goes here.
</p></div>
<div>
<img src="http://lorempixel.com/80/79" alt="CSS3" height="80" width="79"/>
<strong>CSS3</strong>
</div>
<div>
<img src="http://lorempixel.com/80/79" alt="Javascript" height="80" width="79"/>
<strong>Javascript</strong>
</div>
<div>
<img src="http://lorempixel.com/80/79" alt="Wordpress" height="80" width="79"/>
<strong>Wordpress</strong>
</div>
<div>
<img src="http://lorempixel.com/80/79" alt="PhP" height="80" width="79"/>
<strong>PhP</strong>
</div>
</div>
</section>
<section>
<p class="intro-text-3d">
Some text goes here
</p>
<div class="logos-all">
<div>
<img src="img/3ds max-logo.png" alt="3ds Max" height="80" width="79"/>
<strong>3DS MAX</strong>
</div>
<div>
<img src="img/c4d-logo.png" alt="Cinema 4D" height="80" width="79"/>
<strong>Cinema 4D</strong>
</div>
<div>
<img src="img/blender-logo.png" alt="Blender 3D" height="80" width="79"/>
<strong>Blender</strong>
</div>
</div>
</section>
<section>
<h4>How the process works</h4>
<p class="intro-text-process">Some text goes here </p>
</section>
If you wish to use Bootstrap you can use bootstrap panel .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-body">
<img src="https://www.pushpraj.com/images/cool-scenery.jpg" class="img-rounded" alt="error" width="384" height="236">
</div>
<div class="panel-footer">Title 1</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-body">
<img src="https://www.pushpraj.com/images/cool-scenery.jpg" class="img-rounded" alt="error" width="384" height="236">
</div>
<div class="panel-footer">Title 2</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-body">
<img src="https://www.pushpraj.com/images/cool-scenery.jpg" class="img-rounded" alt="error" width="384" height="236">
</div>
<div class="panel-footer">Title 3</div>
</div>
</div>
</body>
</html>
I can't seem to get my Div container with my images to center. I tried margin 0 auto; and adding a width.
body{
margin: 0px;
}
.main{
height: 950px;
background: url(../Images/Mountain.jpg) center center/cover no-repeat;
}
#media screen and (min-width: 1000px;){
#container{
height: 1000px;
width: 1000px;
margin: 0 auto;
}
}
.header{
margin-top: 0px;
width: 100%;
}
.logo{
float: left;
margin-top: 10px;
margin-left: 50px;
}
nav{
float: right;
margin-top: 26px;
margin-right: 50px;
}
.navBar{
color: #fff;
font-size: 20px;
margin-left: 25px;
text-decoration: none;
}
.navBar:hover{
text-decoration: underline;
}
span{
width: 100%;
}
h1{
font-size: 80px;
color: #fff;
text-align: center;
clear: both;
padding-top: 200px;
}
h2{
font-size: 36px;
color: #fff;
text-align: center;
clear: both;
margin-top: 50px;
}
/*Header Section*/
#head{
width: 100%;
height: 400px;
background: url(https://static.pexels.com/photos/6934/beach-vacation-water-summer.jpg) center center/cover no-repeat;
}
.port{
padding-top: 75px;
}
.portfolio{
width: 300px;
height: 250px;
}
.padding{
margin-left: 50px;
}
.container_port{
width: 1000px;
margin-left: auto;
margin-right: auto;
}
<!DOCTYPE html>
<html>
<head>
<title>-------</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link rel="shortcut icon" type="text/css" href="http://placehold.it/50x50">
<link rel="stylesheet" href="CSS/Style.css">
</head>
<body>
<div id="head">
<div class="header">
<img class="logo" src=http://placehold.it/100x100>
<nav>
<a class="navBar" href="#">Home</a>
<a class="navBar" href="#">Portfolio</a>
<a class="navBar" href="#">Blog</a>
<a class="navBar" href="#">Testimonials</a>
</nav>
</div>
<span>
<h1 class="port">Portfolio</h1>
</span>
</div>
<div id="container_port">
<div class="one">
<img class="portfolio" src="http://placehold.it/300x300">
<img class="portfolio padding" src="http://placehold.it/300x300">
<img class="portfolio padding" src="http://placehold.it/300x300">
</div>
<div class="two">
<img class="portfolio" src="http://placehold.it/300x300">
<img class="portfolio padding" src="http://placehold.it/300x300">
<img class="portfolio padding" src="http://placehold.it/300x300">
</div>
<div class="three">
<img class="portfolio" src="http://placehold.it/300x300">
<img class="portfolio padding" src="http://placehold.it/300x300">
<img class="portfolio padding" src="http://placehold.it/300x300">
</div>
<div class="four">
<img class="portfolio" src="http://placehold.it/300x300">
<img class="portfolio padding" src="http://placehold.it/300x300">
<img class="portfolio padding" src="http://placehold.it/300x300">
</div>
</div>
</body>
</html>
This should get you close:
#container_port {
text-align: center;
}
EDIT: I also just noticed that you have .container_port in your CSS above while it's clearly an ID and not a CLASS.
the image element is an inline-block element. You could change it to a block-level element or you could use margin: 0 50%;