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/
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;
}
Here is the HTML doc with a carousel :
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="CSS/flickity.css"> // it Could be a CDN
</head>
<body>
<div class="main-carousel" data-flickity='{ "wrapAround": true,"pageDots": false,"autoPlay": 1500,"imagesLoaded": false}'>
<div class="carousel-cell">
<div class="desp">HELLOW WORLD</div>
</div>
<div class="carousel-cell">
</div>
</div>
<script src="lib/jquery-3.5.1.js"></script> // it could be a CDN
<script src="lib/flickity.js" charset="utf-8"></script> // it could be a CDN
</body>
</html>
INFO ABOUT FLICKITY is HERE
HERE IS THE CSS
.main-carousel .carousel-cell{
width:100%;
height:400px;
display:block;
}
.main-carousel .carousel-cell:nth-child(1){
background : black;
}
.main-carousel .carousel-cell:nth-child(2){
background : blue;
}
.main-carousel .carousel-cell .desp{
font-size:25px;
margin; 50px;
background: yellow;
padding: 20px;
}
The text is inside the carousel-cell. But I want to know , if there is any way to include the text inside the carousel and not move on autoplay.
INNER BANNER: You can make the position of the .main-carousel element relative.
OUTER BANNER: You can take the .desp element out of the .main-carousel element and make the position absolute.
.main-carousel .carousel-cell {
width: 100%;
height: 400px;
display: block;
position: relative;
}
.main-carousel .carousel-cell:nth-child(1) {
background: black;
}
.main-carousel .carousel-cell:nth-child(2) {
background: blue;
}
/*.outer-banner {
position: absolute;
background: yellow;
z-index: 1;
padding: 20px;
font-size: 25px;
margin: 50px;
width: -webkit-fill-available;
}*/
.inner-banner {
position: absolute;
background: red;
z-index: 1;
padding: 20px;
font-size: 25px;
margin: 50px;
width: -webkit-fill-available;
}
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="https://unpkg.com/flickity#2/dist/flickity.min.css">
</head>
<body>
<!--<div class="outer-banner">OUTER BANNER</div>-->
<div class="carousel main-carousel" data-flickity='{ "cellSelector": ".carousel-cell", "wrapAround": true,"pageDots": false,"autoPlay": 1500,"imagesLoaded": false}'>
<div class="inner-banner">INNER BANNER</div>
<div class="carousel-cell">
</div>
<div class="carousel-cell">
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://unpkg.com/flickity#2/dist/flickity.pkgd.min.js"></script>
</body>
</html>
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>
<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 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...