I'm new to both HTML and CSS. As a course module I have to align the three following cat pictures as stated below. Yet, I do have trouble to get them in the proper positioning. The pictures are in line right now but the second picture has to be a little "underneath" a horizontal line.
Can someone give me a hint how to do this? Below you find the outcome I'm aiming for as well as my code.
body {
background-color: white;
}
.box-wrap {
display: flex;
}
#cat1 {
border: 3px solid blue;
position: relative;
display: inline-block;
}
#cat2 {
border: 3px solid grey;
position: relative;
display: inline-block;
}
#cat3 {
border: 3px solid orange;
position: relative;
display: inline-block;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>Cats</title>
</head>
<body>
<div class="box wrap">
<div id="cat1"><img src="images/kitty1_150x150.jpg">
</div>
<div id="cat2"><img src="images/kitty3_150x150.jpg">
</div>
<div id="cat3"><img src="images/kitty2_150x150.jpg">
</div>
</div>
</body>
</html>
Using CSS Grid, this layout becomes straightforward and maintainable:
.grid {
display: grid;
justify-content: space-between;
}
#cat2 {
grid-row-start: 2;
grid-column-start: 2;
}
#cat3 {
grid-column-start: 3;
}
<div class="grid">
<div id="cat1">
<img src="https://placekitten.com/120/120" alt="" />
</div>
<div id="cat2">
<img src="https://placekitten.com/120/120" alt="" />
</div>
<div id="cat3">
<img src="https://placekitten.com/120/120" alt="" />
</div>
</div>
remove flex and then align and center images
body {
background-color: white;
}
#cat1 {
border: 3px solid blue;
position: relative;
display: inline-block;
}
#cat2 {
border: 3px solid grey;
position: relative;
display: inline-block;
float:right;
}
#cat3 {
border: 3px solid orange;
position: absolute;
display: inline-block;
top: 25%;
left: 45%;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>Cats</title>
</head>
<body>
<div class="box wrap">
<div id="cat1"><img src="images/kitty1_150x150.jpg">
</div>
<div id="cat2"><img src="images/kitty3_150x150.jpg">
</div>
<div id="cat3"><img src="images/kitty2_150x150.jpg">
</div>
</div>
</body>
</html>
hi you can try below code : https://jsfiddle.net/fh86hejs/
body {
background-color: white;
}
.box-wrap {
display: flex;
justify-content:space-between;
}
#cat1 {
border: 3px solid blue;
position: relative;
display: inline-block;
}
#cat2 {
border: 3px solid grey;
position: relative;
display: inline-block;
}
#cat3 {
border: 3px solid orange;
position: relative;
display: inline-block;
}
.text-center{
text-align:center;
}
HTML code as below
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>Cats</title>
</head>
<body>
<div class="box-wrap">
<div id="cat1"><img src="https://imaginicupisici.ro/wp-content/uploads/2016/04/Pisicuta-mica-de-tot.jpg">
</div>
<div id="cat3"><img src="https://imaginicupisici.ro/wp-content/uploads/2016/04/Pisicuta-mica-de-tot.jpg">
</div>
</div>
<div class="text-center">
<div id="cat2"><img src="https://imaginicupisici.ro/wp-content/uploads/2016/04/Pisicuta-mica-de-tot.jpg">
</div>
</div>
</body>
</html>
Add justify-content:space-between; for the box-wrap class, to add space between the the children.
Also u named the class wrongly. Change "box wrap" to "box-wrap"
For getting the second image underneath, there are multiple answers depending on what type layout u want.
I have simply put the middle image on next line and centered it by wrapping it in a div
Another way is to make the position of center image absolute.
Using this method the dom structure will not change.
body {
background-color: white;
}
.box-wrap {
display: flex;
justify-content: space-between;
}
#cat1 {
border: 3px solid blue;
position: relative;
display: inline-block;
}
#cat2 {
border: 3px solid grey;
position: relative;
display: inline-block;
}
#cat3 {
border: 3px solid orange;
position: relative;
display: inline-block;
}
.text-center {
text-align: center;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>Cats</title>
</head>
<body>
<div class="box-wrap">
<div id="cat1"><img src="http://via.placeholder.com/150x150">
</div>
<div id="cat3"><img src="http://via.placeholder.com/150x150">
</div>
</div>
<div class="text-center">
<div id="cat2"><img src="http://via.placeholder.com/150x150">
</div>
</div>
</body>
</html>
Using Grid
*{
box-sizing:border-box;
}
body {
background-color: white;
}
.box-wrap {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 150px 150px;
}
#cat1 {
border: 3px solid blue;
}
#cat2 {
border: 3px solid grey;
grid-column-start: 2;
grid-row-start: 2;
}
#cat3 {
border: 3px solid orange;
grid-column-start: 3;
}
.text-center {
text-align: center;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>Cats</title>
</head>
<body>
<div class="box-wrap">
<div id="cat1" class="text-center"><img src="http://via.placeholder.com/150x150">
</div>
<div id="cat2" class="text-center"><img src="http://via.placeholder.com/150x150">
</div>
<div id="cat3" class="text-center"><img src="http://via.placeholder.com/150x150">
</div>
</div>
</body>
</html>
Related
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 1 year ago.
The webpage has two divs (Box1 and Box2), and Box2 contains two nested divs, Box2-1 and Box2-2.
I expect Box1 and Box2 to align side-by-side, but Box1 moves downwards and aligns with the sub-div at the bottom, Box2-2.
Please teach me why this occurs and how to fix this. Any help would be much appreciated.
#box1{
width: 200px;
height: 845px;
}
#box1, #box2{
border: 1px solid black;
display: inline-block;
margin: 0px 20px;
}
#box2-1, #box2-2{
height : 400px;
width: 200px;
border : 1px solid black;
box-sizing: border-box;
margin: 15px;
display: block
}
<!DOCTYPE html>
<html>
<head>
<title</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div id="box1">
<p>Box1</p>
</div>
<div id="box2">
<div class="box2" id="box2-1">
<p>Box2</p>
</div>
<div class="box2" id="box2-2">
<p>Box3</p>
</div>
</div>
</body>
</html>
add vertical-align:top; on #box1, #box2
#box1, #box2{
border: 1px solid black;
display: inline-block;
margin: 0px 20px;
vertical-align:top;
}
#box1{
width: 200px;
height: 845px;
}
#box1, #box2{
border: 1px solid black;
display: inline-block;
margin: 0px 20px;
vertical-align:top;
}
#box2-1, #box2-2{
height : 400px;
width: 200px;
border : 1px solid black;
box-sizing: border-box;
margin: 15px;
display: block
}
<!DOCTYPE html>
<html>
<head>
<title</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div id="box1">
<p>Box1</p>
</div>
<div id="box2">
<div class="box2" id="box2-1">
<p>Box2</p>
</div>
<div class="box2" id="box2-2">
<p>Box3</p>
</div>
</div>
</body>
</html>
I think this is what you want;
#main-div {
display: flex;
justify-content: space-evenly;
}
#box1 {
border: 1px solid black;
}
#box2 {
border: 1px solid black;
}
<!DOCTYPE html>
<html>
<head>
<title</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div id="main-div">
<div id="box1">
<p>Box1</p>
</div>
<div id="box2">
<div class="box2" id="box2-1">
<p>Box2</p>
</div>
<div class="box2" id="box2-2">
<p>Box3</p>
</div>
</div>
</div>
</body>
</html>
Please comment if you need explanation on this.
You can use css flexbox to easily achieve this.
Wrap box1 and box2 in a div with class of wrapper and in your css set the display property to flex;
You can read more about css flexbox here, it is used for arranging boxes in a html page.
.wrapper {
display: flex;
}
#box1{
width: 200px;
height: 845px;
}
#box1, #box2{
border: 1px solid black;
display: inline-block;
margin: 0px 20px;
}
#box2-1, #box2-2{
height : 400px;
width: 200px;
border : 1px solid black;
box-sizing: border-box;
margin: 15px;
display: block;
}
<!DOCTYPE html>
<html>
<head>
<title</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<div id="box1">
<p>Box1</p>
</div>
<div id="box2">
<div class="box2" id="box2-1">
<p>Box2</p>
</div>
<div class="box2" id="box2-2">
<p>Box3</p>
</div>
</div>
</div>
</body>
</html>
It's because you have block level elements inside inline elements. You can read about it here.
One way around this would be to use
position: relative;
float: left;
instead of display: inline-block for divs box1 and box2.
Try it out:
#box1 {
width: 200px;
height: 845px;
}
#box1, #box2 {
position: relative;
float: left;
border: 1px solid black;
margin: 0px 20px;
}
#box2-1, #box2-2 {
height : 400px;
width: 200px;
border : 1px solid black;
box-sizing: border-box;
margin: 15px;
display: block;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="box1">
<p>Box1</p>
</div>
<div id="box2">
<div class="box2" id="box2-1">
<p>Box2</p>
</div>
<div class="box2" id="box2-2">
<p>Box3</p>
</div>
</div>
</body>
</html>
While the other answers have done a brilliant job of fixing the properties and values in CSS. I think we can achieve something similar using the table tag of HTML:
<!DOCTYPE html>
<html>
<head>
<title</title>
<!-- <link href="style.css" rel="stylesheet"> -->
</head>
<body id="body">
<table>
<tr>
<td rowspan="2">Box1</td>
<td>Box2</td>
</tr>
<tr><td>Box3</td></tr>
</table>
</body>
</html>
Your current output looks like this :
Note : Your Box-1 is shifted below because your Box2-1 and Box2-2 are marked as display: block. Please refer Image-2 (below) with display: inline-block.
Image-1 :
Image-2
Updated style for box2-1 and box2-2 :
#box2-1, #box2-2{
height : 400px;
width: 200px;
border : 1px solid black;
box-sizing: border-box;
margin: 15px;
display: inline-block;
}
I have a page (a catalogue of books), where the books should be displayed in rows in a flexbox container. Each book is an individual block, which contains a heading (name of the book) and the image of the book cover directly below it. I would like for all images to be equal height and fill up the whole block, but this does not seem to be working for me. Here is what the blocks look like right now:
Some research on Stack pointed to similar questions, but the proposed solutions did not seem to work, also. Why are the images different heights in the first place, even though I pass 100% height to the image element inside the container? And how can I resolve this?
Full HTML/CSS can be seen in the fiddle.
HTML:
<div class="flexbox">
<div class="item">
<h2 class="catalogue">
<a href="items/pyramid_texts.html" target="_blank">
Тексты пирамид
</a>
</h2>
<img class="catalogue"
src="images/pyramid_texts.png" alt="Тексты пирамид">
</div>
<div class="item">
<h2 class="catalogue">
<a href="items/coffin_texts.html" target="_blank">
Тексты саркофагов
</a>
</h2>
<img class="catalogue"
src="images/coffin_texts.jpg" alt="Тексты саркофагов">
</div>
<div class="item">
<h2 class="catalogue">
<a href="items/book_of_the_dead.html" target="_blank">
Египетская книга мертвых
</a>
</h2>
<img class="catalogue"
src="images/book_of_the_dead.png" alt="Книга мертвых">
</div>
</div>
CSS:
a
{
color: black;
text-decoration: none;
}
a:hover
{
color: red;
}
div.flexbox
{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
div.item
{
height: 20%;
width: 20%;
}
h2
{
background-color: #FFF3D9;
color: black;
font-size: 18px;
font-weight: 400px;
style: block;
text-align: center;
}
img
{
height: 20%;
outline: 2px solid red;
width: 20%;
}
img.catalogue
{
height: 100%;
object-fit: contain;
width: 100%;
}
UPDATE: Tried experimenting with background-size: cover and other CSS elements, but to no avail. Could it be that my HTML structure is ill suited for this task? Right now I have a parent flexbox block and each "item" block (for each book) contains a header element with the title of the book and an <img> element. Should I change the structure and take the header out of the item block, for example?
You can use this code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Demo</title>
<style type="text/css">
body {
padding: 0;
margin: 0;
}
a {
color: black;
text-decoration: none;
}
a:hover {
color: red;
}
h2 {
background-color: #FFF3D9;
color: black;
font-size: 18px;
font-weight: 400;
style: block;
text-align: center;
}
img {
height: 20%;
outline: 2px solid red;
width: 100%;
}
img.catalogue {
height: 100%;
object-fit: contain;
width: 100%;
display: block;
margin: 0 auto;
text-align: center;
}
.flexbox {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
overflow: hidden;
}
.flexbox .col {
flex: 1;
padding: 7px;
}
.flexbox .col:nth-child(1) {
background: #ccc;
-webkit-order: 1;
-ms-flex-order: 1;
order: 1;
}
.flexbox .col:nth-child(2) {
background: #eee;
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
}
.flexbox .col:nth-child(3) {
background: #eee;
-webkit-order: 2;
-ms-flex-order: 2;
order: 2;
}
</style>
</head>
<body>
<div class="flexbox">
<div class="col">
<div class="item">
<h2 class="catalogue">
<a href="items/pyramid_texts.html" target="_blank">
Тексты пирамид
</a>
</h2>
<img class="catalogue" src="https://www.w3schools.com/images/picture.jpg" alt="Тексты пирамид">
</div>
</div>
<div class="col">
<div class="item">
<h2 class="catalogue">
<a href="items/coffin_texts.html" target="_blank">
Тексты саркофагов
</a>
</h2>
<img class="catalogue" src="https://www.w3schools.com/images/picture.jpg" alt="Тексты саркофагов">
</div>
</div>
<div class="col">
<div class="item">
<h2 class="catalogue">
<a href="items/book_of_the_dead.html" target="_blank">
Египетская книга мертвых
</a>
</h2>
<img class="catalogue" src="https://www.w3schools.com/images/picture.jpg" alt="Книга мертвых">
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.bluebox {
float: left;
width: 200px;
height: 200px;
margin: 1em;
border: solid black 1px;
background-color: blue;
}
.greenbox {
float: left;
width: 200px;
height: 200px;
margin: 1em;
border: solid black 1px;
background-color: green;
}
.yellowbox {
float: left;
width: 200px;
height: 200px;
margin: 1em;
border: solid black 1px;
background-color: yellow;
}
.orangebox {
float: left;
width: 200px;
height: 800px;
margin: 1em;
border: solid black 1px;
background-color: orange;
}
p {
display: inline-block;
text-align: center;
width: 600px;
border: solid 1px red;
margin-top: -50px;
padding-left: 20px;
padding-top: 5px;
padding-bottom: 5px;
padding-right: 20px;
}
</style>
<body>
<section>
<section>
<section>
<div class="bluebox"></div>
<div class="greenbox"></div>
</section>
<section>
</section>
</section>
<div class="yellowbox"></div>
</section>
<section>
<div class="orangebox"></div>
</section>
<p>Hello World! how r <strong>u?</strong></p>
</body>
</html>
enter code here
I have started working on creating this image and hit a bump on the middle portion. I can recreate in bootstrap but am trying to go at it the old fashion way. any help would be appreciated.
Try this code. Hope you want like this.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<style>
.outerdiv{
background-color:white;
height:450px;width:450px;
display:block;
border:1px solid black;
}
.outerdiv div{position:relative;margin:3px;padding:1px;}
.blue, .green, .yellow, .black{height:100px;width:100px;display:inline-block;}
.blue{background-color:blue;}
.green{background-color:green;}
.yellow{background-color:yellow;}
.orange{background-color:orange;height:430px;width:100px;display:inline-block;vertical-align:top;float:right;}
.cyan, .green1, .green2{width:100px;}
.cyan{background-color:cyan;height:50px;}
.green1{background-color:lightgreen;height:50px;}
.green2{background-color:green;height:100px;}
.black{background-color:black;border:54px solid red;}
.inner_container1{display:inline-block;padding:0;}
.white{border:1px solid brown;height:85px;width:320px;}
</style>
</head>
<body>
<div class="outerdiv">
<div class="blue"></div>
<div class="green"></div>
<div class="yellow"></div>
<div class="orange"></div>
<div class="black"></div>
<div class="inner_container1">
<div class="cyan"></div>
<div class="green1"></div>
<div class="green2"></div>
</div>
<div class="white"></div>
</div>
</body>
</html>
I learn 960 Grid CSS Framework, and I have a HTML code and CSS below:
- HTML code:
#import url( 'css/reset.css' );
#import url( 'css/text.css' );
#import url( 'css/960.css' );
#wrapper {
width: 100%;
}
#wp_head,
#wp_foot {
background-color: #e8e8e8;
}
#header,
#footer {
border:1px dotted #333;
min-height: 100px;
}
#content {
border: 1px dotted #333;
min-height: 500px;
}
#row-1 {
}
.row-1-left{
border: 1px dotted #333;
background-color: pink;
min-height: 50px;
}
.row-1-center {
border: 1px dotted #333;
background-color: yellow;
min-height: 50px;
}
.row-1-right{
border: 1px dotted #333;
background-color: lime;
min-height: 50px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Learn 960 grid</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="wrapper">
<div id="wp_head">
<div id="header" class="container_12">Header</div>
</div>
<div id="row-1" class="container_12 clearfix">
<div class="row-1-left grid_4">Left - 4</div>
<div class="row-1-center grid_4">Center - 4</div>
<div class="row-1-right grid_4">Right - 4</div>
</div>
<div id="wp_foot">
<div id="footer" class="container_12">Footer</div>
</div>
</div>
</body>
</html>
And then, show result below (See image attachment):
Question: I want remove margin-left and margin-right. Please help me!
You can do that with:
body {margin: 0;}
Here is a fiddle: https://jsfiddle.net/cpu5syg1/
I am making myself a homepage for my browser, and I'm trying to put 3 images with captions evenly spaced in a divider. It seems to work but the border for the outmost divider does not cover the images. What do I do? Here is the code.
/* Body: */
body {
background-color: #CCCCCC;
}
/* Title: */
#title {
color: #00FFFD;
text-align: center;
font-size: 1000%;
}
/* Main Border: */
#outer_div {
width: 100%;
}
#inner_div {
width: 80%;
margin: auto;
border: 10px groove #000;
}
#main {
border: 40px solid transparent;
}
/* Link Dividers */
.link {
width: 33%;
float: left;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title>Hub</title>
<link rel="stylesheet" type="text/css" href="css/hub.css" />
</head>
<body>
<div id="title"><u>Website Hub</u></div>
<div id="outer_div">
<div id="inner_div">
<div id="main">
<div id="row1">
<div class="link">
<a><img src="img/one.png" border="2px"></a>
<caption>One</caption>
</div>
<div class="link">
<a><img src="img/two.jpg" border="2px"></a>
<caption>Two</caption>
</div>
<div class="link">
<a><img src="img/three.jpg" border="2px"></a>
<caption>Three</caption>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
You could always put the border declaration in the CSS instead...
.link {
width: 33%;
float: left;
text-align: center;
border: 2px solid #1f1f1f;
}
Or extend the declaration:
.link a img { border: 2px solid #1f1f1f; }
.link a { width: 100%; } // Will be inherited by the child element...