#container {
width: 250px;
margin: 0 auto;
}
.group {
border: 1px solid grey;
margin-bottom: 20px;
}
.group p {
text-align: center;
font-family: Helvetica sans-serif;
font-size: 25px;
color: #2e3d49;
}
.group img{
width: 100%;
}
<div id="container">
<div class="group">
<p>Hello World</p>
<img src="https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg">
</div>
</div>
Please click the "Run code snippet" button to see the result. You can see at the bottom of the image, there is a blank part. Where does this come from?
it is the img being an inline element, so set is as display:block or because it is by default vertical-align:baseline, you can set set vertical-align:bottom
#container {
width: 250px;
margin: 0 auto;
}
.group {
border: 1px solid grey;
margin-bottom: 20px;
}
.group p {
text-align: center;
font-family: Helvetica sans-serif;
font-size: 25px;
color: #2e3d49;
}
.group img {
width: 100%;
display: block;
/* vertical-align: bottom - would work as well */
}
<div id="container">
<div class="group">
<p>Hello World</p>
<img src="https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg">
</div>
</div>
Related
How to make this div starts after the picture.
It starts from the beginning of the container.
I have added /float: left;/ in profile image.
enter image description here
HTML and CSS Code:
.profile{
border: 1px solid #ddd;
padding: 22px;
min-height: 150px;
}
.profile img{
max-width: 150px;
width: 100%;
float: left;
}
.profile #details{
margin-left: 50px;
}
<section class="profile">
<img src="https://www.sonypark360.net/wp-content/uploads/2017/08/profile-pictures.png" alt="profile">
<div id="details">
<h1>Name</h1>
<h2>Age</h2>
<h3>City, Country</h3>
</div>
</section>
This code should work for you
.my-profiles {
border: 1px solid #b2cbe3;
padding: 22px;
font-family: arial;
display: inline-block;
}
.my-profiles img{
max-width: 100px;
width: 100%;
border-radius: 50%;
float: left;
}
.my-profiles .details {
overflow-x: hidden;
padding-top: 10px;
padding-left: 8px;
display: inline-block;
}
.my-profiles .details * {
margin: 0px;
font-size: 22px;
font-weight: 200;
}
<div class="my-profiles">
<img src="https://cdn.pixabay.com/photo/2016/08/08/09/17/avatar-1577909_960_720.png">
<div class="details">
<h2>Name</h2>
<h2>Age</h2>
<h2>City, Country</h2>
</div>
</div>
My 2 secondary div don't want to be at the center of the primary.
I have this code :
HTML:
<div id="body">
<div id="content">
<div id="contact">
<div class="contact">
<img id="contact_photo" src="images/contact_photo.png">
</div>
<div class ="contact" id="contact-text">
some text<br>
some text<br>
some text
</div>
</div>
</div>
</div>
CSS :
#body{
background-image: url("../images/background_body.png");
height : 100%;
width:101%;
margin : 10px -10px;
overflow: hidden;
}
#content{
color: white;
padding: 0 0 0 395px;
height: 100%;
overflow: hidden;
font-family: "Lato";
font-size: 26px;
}
#contact{
font-size: 26px;
font-family: "Lato";
color: white;
width: 1035px;
/* background-color: green;*/
display: flex;
padding: 35px 80px 0 80px;
float:left;
text-align: center;
}
.contact{
float: none;
display: inline-block;
text-align:left;
}
#contact-text{
width: 385px;
height: 145px;
}
#contact_photo{
margin-right: 40px;
}
If someone can help me, I saw everywhere that they centered the div only with :
text-align: center;
and
float: none;
display: inline-block;
I don't find what's the matter.
Thank you
Try this:
.contact {
margin: 0 auto;
}
This makes the margins on right and left sides set to the same so that the item will be displayed in the center;
Hello all I am trying to make a full-width bar of images, and when one image is hovered, I want text about that image to appear below the bar. So far I have the following html and css:
<div class="everything-container">
<div class="pic-container">
<img class="pic one" src="http://homeinspectioncarync.com/wp-content/uploads/2016/05/glenn-e1464714419457.jpg">
</div>
<div class="info-container">
<div class="name">
<p class="glenn name">Glenn</p>
</div>
<div class="title">
<p class="glenn title">Part Owner/ Senior Inspector</p>
</div>
<div class="bio">
<p class="glenn bio">My name is Glenn and I am amazing.</p>
</div>
</div>
</div>
.everything-container {
height: 500px;
width: 100%;
border: 2px solid black;
}
.pic-container {
width: 100%;
height: 100px;
border: 2px solid green;
}
.info-container {
width: 100%;
height: 400px;
border: 2px solid red;
}
.name {
height: 400px;
width: 25%;
border: 2px solid yellow;
float: left;
text-align: center;
font-size: 120%;
font-family: "Open Sans";
font-weight: bold;
color: black;
}
.title {
height: 400px;
width: 20%;
border: 2px solid blue;
float: left;
text-align: center;
font-size: 90%;
text-decoration: italic;
color: grey;
font-family: "Open Sans";
}
.bio {
height: 400px;
width: 55%;
border: 2px solid orange;
float: left;
font-size: 100%;
text-align: center;
color: black;
font-family: "Open Sans";
}
.pic {
height: 100px;
width: 100px;
float: left;
}
I gave one of my images the class of "one" and when i hover it i want anything with a class of "glenn" to appear. Using .one:hover .glenn { stuff } did not work. Is this possible to do? Thank you!
I'm afraid this is the closest you can get without javascript:
<div class="everything one">
<div class="image">
<img src="..." />
</div>
<div class="info">
Name
Title
Details
</div>
</div>
CSS:
.everything .info {
opacity: 0;
}
.everything:hover .info {
opacity: 1;
}
In order to make ".one:hover .glenn" work you need that everything with class 'glenn' to be inside of element with class 'one'.
If you are not able to achieve this you probably have to go with javascript.
.info-container {
display: none;
}
.pic-container:hover + .info-container {
display: block;
}
This is the easiest way:
Because you don't need JavaScript
Because it works with your HTML, no configuration needed.
I just started learning CSS, now stuck at this part. what makes the brand class to move down when information class is inline-block-ed? Doesn't information comes after brand so it shouldn't affect the brand class?
body {
margin: 0;
padding: 0;
}
.header {
height: 34px;
background-color: #ACDACD;
}
.brand {
border: 2px solid red;
height: 34px;
display: inline-block;
}
.information {
border: 2px solid blue;
height: 34px;
display: inline-block;
}
<div class="header">
<div class="brand">AKKJKJKJKJKJFKJDKFJDKJF
</div>
<div class="information">
</div>
</div>
<div class="mainbody">
</div>
By default the vertical-alignment of text is baseline. The difference in the height is what makes it. If you have this CSS rule:
vertical-align: top;
Or whatever it is perfect, it looks alright. See below:
body {
margin: 0;
padding: 0;
}
.header {
height: 34px;
background-color: #ACDACD;
}
.brand {
border: 2px solid red;
height: 34px;
display: inline-block;
}
.information {
border: 2px solid blue;
height: 34px;
display: inline-block;
vertical-align: top;
}
<div class="header">
<div class="brand">AKKJKJKJKJKJFKJDKFJDKJF</div>
<div class="information"></div>
</div>
<div class="mainbody">
</div>
And now the difference or the white line is because of the border, which can be made by using box-sizing: border-box.
* {
box-sizing: border-box
}
body {
margin: 0;
padding: 0;
}
.header {
height: 34px;
background-color: #ACDACD;
}
.brand {
border: 2px solid red;
height: 34px;
display: inline-block;
}
.information {
border: 2px solid blue;
height: 34px;
display: inline-block;
vertical-align: top;
}
<div class="header">
<div class="brand">AKKJKJKJKJKJFKJDKFJDKJF</div>
<div class="information"></div>
</div>
<div class="mainbody">
</div>
I am trying to make a grid of pictures with padding in between inside the main_block div. I cant get the images to aline next to eachother and then break it with a becouse they go inline. inline block does not work. I tried making a new div for these images but i cant resize the pictures nor give them padding. I tried to make the pictures resizable but without results. iut is as if something is overriding the size of the pictures. The pictures stack upon eachother and im trying to maaake a grid.
Thanks in advance for any help!
This would be the optimal solution.
Here is the fiddle
https://jsfiddle.net/q2cr9ttL/1/
<style>
body {
margin: 0;
padding: 0;
}
#header {
background-color: #ff6600;
color: white;
text-align: left;
padding: 2px;
}
#nav {
line-height: 30px;
background-color: #fff000;
height: 350px;
width: 125px;
float: left;
padding: 5px;
}
#section {
width: 350px;
float: left;
padding: 10px;
}
#footer {
background-color: #737373;
color: white;
clear: both;
text-align: center;
}
#container {
margin: auto;
width: 900px;
text-align: left;
overflow: hidden;
}
.inner_block {
display: inline-block;
text-align: center;
width: 350px;
height: 200px;
}
.main_block {
text-align: center;
width: 750px;
}
.grid_block {
display: inline-block;
text-align: center;
width: 29%px;
height:100px;
}
</style>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<body>
<div id="container">
<!---container--->
<div id="header">
<h1>JORDAS</h1>
</div>
<!--header-->
<div id="nav">
Etusivu
<br>
Teltat
<br>
Palvelut
<br>
Yhteistiedot
<br>
</div>
<div id="section">
<div class="main_block">
<div class="grid_block">
<img src=Grafik/basictalt.png>
</div>
<div class="grid_block">
<img src=Grafik/basictalt.png >
</div>
<div class="grid_block">
<img src=Grafik/basictalt.png>
</div>
</div><!--mainblock-->
</div>
<div id="footer">
<h3>POP-UP TELTTOJEN YKKÖNEN </h3>
</div>
<!--footer-->
</div>
<!--container-->
</body>
You could use the flex display property.
You will need to include some prefixes for cross browser compatibility.
* {
box-sizing: border-box;
}
.main_block {
display: flex;
flex-wrap: wrap;
}
.grid_block {
width: 33%;
padding: 1.4em
}
.grid_block img {
max-width: 100%
}
/* ORIGINAL STYLES */
body {
margin: 0;
padding: 0;
}
#header {
background-color: #ff6600;
color: white;
text-align: left;
padding: 2px;
}
#nav {
line-height: 30px;
background-color: #fff000;
height: 350px;
width: 125px;
float: left;
padding: 5px;
}
#section {
width: 350px;
float: left;
padding: 10px;
}
#footer {
background-color: #737373;
color: white;
clear: both;
text-align: center;
}
#container {
margin: auto;
width: 900px;
text-align: left;
overflow: hidden;
}
.inner_block {
display: inline-block;
text-align: center;
width: 350px;
height: 200px;
}
.main_block {
text-align: center;
width: 750px;
}
.grid_block {
display: inline-block;
text-align: center;
width: 29%px;
height: 100px;
}
<div id="container">
<!---container--->
<div id="header">
<h1>JORDAS</h1>
</div>
<!--header-->
<div id="nav">
Etusivu
<br>
Teltat
<br>
Palvelut
<br>
Yhteistiedot
<br>
</div>
<div id="section">
<div class="main_block">
<div class="grid_block">
<img src=http://lorempixel.com/image_output/city-q-c-640-480-9.jpg>
</div>
<div class="grid_block">
<img src=http://lorempixel.com/image_output/city-q-c-640-480-9.jpg >
</div>
<div class="grid_block">
<img src=http://lorempixel.com/image_output/city-q-c-640-480-9.jpg>
</div>
</div><!--mainblock-->
</div>
<div id="footer">
<h3>POP-UP TELTTOJEN YKKÖNEN </h3>
</div>
<!--footer-->
</div>
<!--container-->