I'm trying to build a regular calculator but the layout doesn't behave. The "div.row div" css selector is being overlapped by its containing content to the right side. I tried checking chrome dev tools, but margin, padding and border are set to 0, so it doesn't give me a reason why it's happening.
Any help will be greatly appreciated!
body {
font-family: sans-serif;
width: 40%;
height: 1000px;
max-width: 1000px;
min-width: 250px;
margin: 0 auto;
}
main {
padding: 3%;
background-color: #753471;
}
div.row div {
display: inline-block;
width: 16.25%;
height: 30px;
padding: 2%;
background-color: #f2d8f0;
text-align: center;
margin: 0.3%;
font-size: 85%;
}
div.row {
display: inline-block;
width: 100%;
margin: 0%;
padding: 0;
}
div#output {
display: block;
width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Calculator</title>
</head>
<body>
<header></header>
<main>
<!-- output -->
<div id="output"></div>
<div class="row">
<div id="clear">C</div>
<div id="mudulu">%</div>
<div id="division">÷</div>
<div id="times">x</div>
</div>
<div class="row">
<div id="one">1</div>
<div id="two">2</div>
<div id="three">3</div>
<div id="minus">-</div>
</div>
<div class="row">
<div id="four">4</div>
<div id="five">5</div>
<div id="six">6</div>
<div id="plus">+</div>
</div>
<div class="row">
<div id="seven">7</div>
<div id="eight">8</div>
<div id="nine">9</div>
<div id="equals">=</div>
</div>
<div class="row">
<div id="decimal">.</div>
<div id="zero">0</div>
<div id="delete">backspace</div>
</div>
</main>
</body>
</html>
Related
enter image description here
I would like to list items A and B side by side in CSS. What should I do?
HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="ex1.css">
<link rel="stylesheet" href="grid.min.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12 logo-title">
<div class="logo">
<a class="title" href="">
</a>
</div>
<div class="category">
이야기하다
금융하다
함께하다
</div>
</div>
</div>
</div>
</body>
</html>
CSS code
.logo {
height: 78px;
}
body {
font-family: Noto Sans KR,system-ui,AppleSDGothicNeo,sans-serif;
}
a {
text-decoration: none;
color: #000;
}
/* head title */
.category {
font-size-adjust: 18px;
font-weight: 700;
}
.title {
position: absolute;
top: 50%;
transform: translateY(-50%);
display: block;
width: 118px;
height: 30px;
background: url(https://t1.daumcdn.net/kakaopay/homepage/production/v1.0.0_1599023671711/img/pc/sp-icon.png) no-repeat 0 0;
background-position: 0% 43%;
}
I hope a tags are arranged in a horizontal line.
I want the A and B in the picture in a row, and I've adjusted the width of the parent element, but it didn't work.
Just change the HTML structure to use the propper bootstrap classes.
<div class="container">
<div class="row align-items-center">
<div class="col logo">
<a class="title" href="">
</a>
</div>
<div class="col-auto category">
이야기하다
금융하다
함께하다
</div>
</div>
</div>
jsFiddle
.logo {
height: 78px;
float:left
}
body {
font-family: Noto Sans KR,system-ui,AppleSDGothicNeo,sans-serif;
}
a {
text-decoration: none;
color: #000;
margin-top:5px;
float:left
}
/* head title */
.category {
font-size-adjust: 18px;
font-weight: 700;
}
.title {
float:left;
display: inline-block;
width: 118px;
height: 30px;
margin:0px;
background: url(https://t1.daumcdn.net/kakaopay/homepage/production/v1.0.0_1599023671711/img/pc/sp-icon.png) no-repeat 0 0;
background-position: 0% 43%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="ex1.css">
<link rel="stylesheet" href="grid.min.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12 logo-title">
<div class="logo">
<a class="title" href="">
</a>
</div>
<div class="category">
이야기하다
금융하다
함께하다
</div>
</div>
</div>
</div>
</body>
</html>
MODIFY THE CSS
.logo {
height: 78px;
float:left
}
body {
font-family: Noto Sans KR,system-ui,AppleSDGothicNeo,sans-serif;
}
a {
text-decoration: none;
color: #000;
margin-top:5px;
float:left
}
/* head title */
.category {
font-size-adjust: 18px;
font-weight: 700;
}
.title {
float:left;
display: inline-block;
width: 118px;
height: 30px;
margin:0px;
background: url(https://t1.daumcdn.net/kakaopay/homepage/production/v1.0.0_1599023671711/img/pc/sp-icon.png) no-repeat 0 0;
background-position: 0% 43%;
}
Use bootstrap grid system.
<div class="container">
<div class="row">
<div class="col-6 logo-title">
<div class="logo">
<a class="title" href="">
</a>
</div>
</div>
<div class="col-6">
<div class="category d-flex align-items-center justify-content-center">
이야기하다
금융하다
함께하다
</div>
</div>
</div>
</div>
.logo {
height: 78px;
}
body {
font-family: Noto Sans KR,system-ui,AppleSDGothicNeo,sans-serif;
}
a {
text-decoration: none;
color: #000;
}
/* head title */
.category {
font-size-adjust: 18px;
font-weight: 700;
height: 78px;
}
.title {
position: absolute;
top: 50%;
transform: translateY(-50%);
display: block;
width: 118px;
height: 30px;
background: url(https://t1.daumcdn.net/kakaopay/homepage/production/v1.0.0_1599023671711/img/pc/sp-icon.png) no-repeat 0 0;
background-position: 0% 43%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="ex1.css">
<link rel="stylesheet" href="grid.min.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-6 logo-title">
<div class="logo">
<a class="title" href="">
</a>
</div>
</div>
<div class="col-6">
<div class="category d-flex align-items-center justify-content-center">
이야기하다
금융하다
함께하다
</div>
</div>
</div>
</div>
</body>
</html>
This question already has answers here:
Why does height 100% work when DOCTYPE is removed?
(5 answers)
Closed 2 years ago.
Adding <!DOCTYPE html> is breaking my CSS only sticky footer meaning that as soon as I add it, the footer does not stick to the bottom of a web page anymore.
Following is a working example without the <!DOCTYPE html>.
Doing further tests I've noticed that when not declaring the page as HTML5 by adding the DOCTYPE statement, the div with CSS class wrapper is able to be stretched to take the full document height thus pushing the footer to the bottom. This is not happening when declaring the document as HTML5.
https://jsfiddle.net/muvwh4zn/
body {
background-color: #f0f0f0;
}
.navbar {
background-color: #444;
width: 100%;
}
.footer {
background-color: #444;
width: 100%;
height: 50px;
}
html,
body {
height: 100%;
margin: 0;
}
.wrapper {
min-height: 100%;
margin-bottom: -50px;
padding: 0px 0px 80px 0px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
</head>
<body>
<div class="container">
<div class="wrapper">
<header>
<div class="row">
<div class="text-white-50 text-center navbar">
HEADER
</div>
</div>
</header>
<br />
<main>
<div class="row">
BODY
</div>
</main>
</div>
<footer>
<div class="row">
<div class="align-middle py-3 text-white-50 text-center footer">
FOOTER
</div>
</div>
</footer>
</div>
</body>
</html>
Please also see my own comment just below for a possible solution to this issue.
Add flexibility to the container class. Your footer will always be pinned to the bottom.
https://www.w3.org/QA/2002/04/valid-dtd-list.html
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
body {
background-color: #f0f0f0;
}
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
.navbar {
background-color: #444;
width: 100%;
}
.footer {
background-color: #444;
width: 100%;
height: 50px;
}
html,
body {
height: 100%;
margin: 0;
}
.wrapper {
min-height: 100%;
margin-bottom: -50px;
padding: 0px 0px 80px 0px;
}
.push {
height: 50px;
z-index: -1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
</head>
<body>
<div class="container">
<div class="wrapper">
<header>
<div class="row">
<div class="align-middle py-3 text-white-50 text-center navbar">
header
</div>
</div>
</header>
<br />
<main>
<div class="row">
BODY
</div>
</main>
</div>
<footer>
<div class="row">
<div class="align-middle py-3 text-white-50 text-center footer">
FOOTER
</div>
</div>
</footer>
</div>
</body>
</html>
I got my bootstrap grid to work. But I'm having trouble trying to figure out how to get it to collapse at 750px.
This is what it's suppose to look like this when larger than 750px:
Full-Size
and this is what it's suppose to look like when between 550px-750px:
Mid-Size
anything smaller than 550 the Aside and Section parts disappear (which I was able to do using #media in my CSS file)
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="mystyle-A.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="header">Header</div>
</div>
<div class="row">
<div class="navigation-bar">Nav</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm mbody">
<div class="article">Article</div>
</div>
<div class="col-sm mbody">
<div class="row">
<div class="aside">Aside</div>
</div>
<div class="row">
<div class="section">Section</div>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="footer">Footer</div>
</div>
</div>
</body>
</html>
CSS:
body {
background-color: black;
font-size: 2em;
text-align: center;
}
.mbody {
margin: 0;
padding: 0;
}
.header {
background-color: cornflowerblue;
height: 60px;
text-align: center;
width: 100%;
}
.navigation-bar {
background-color: khaki;
height: 50px;
text-align: center;
width: 100%;
}
.article {
background-color: darkseagreen;
height: 180px;
text-align: center;
width: 100%;
}
.aside {
background-color: goldenrod;
height: 90px;
text-align: center;
width: 100%;
}
.section {
background-color: lightsteelblue;
height: 90px;
text-align: center;
width: 100%;
}
.footer {
background-color: lemonchiffon;
height: 40px;
text-align: center;
width: 100%;
}
#media only screen and (max-width: 550px) {
.aside {
display: none;
}
.section {
display: none;
}
}
It was easy to figure out the 550 using '#media' since I just have to not display it, but how could I use #media only screen and (max-width: 750px)to collapse it like the second picture?
550 and 750 isn't one of the standard breakpoint sizes.
https://getbootstrap.com/docs/4.0/layout/grid/#grid-options
the following would be similar to what you are looking for, but would break between the full view at smaller than 768, and then would hide the aside and section at under 576
<div class="row">
<div class="col-12">Header</div>
</div>
<div class="row">
<div class="col-12">Nav</div>
</div>
<div class="row">
<div class="col-12 col-md-9">Article</div>
<div class="col-12 col-md-3">
<div class="row">
<div class="d-none d-sm-block col-12">Aside</div>
<div class="d-none d-sm-block col-12">Section</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">footer</div>
</div>
If you really want to break at 750, and 550, you can override the breakpoints. See How to extend/modify (customize) Bootstrap 4 with SASS
the layout I'm trying to make
Can anyone help me how to put the div below the carousel? I'm kinda new to this
Give the carrousel a z-index: 5; and position: relative; and give the div you want under it a position: relative; and top: -value where value is the pixels you want it to go up.
Instead of the <div class="carousel"> use your own carrousel div. and same with the header.
For more info on how z-index works visit https://www.w3schools.com/cssref/pr_pos_z-index.asp
header {
height: 80px;
width: 100vw;
background-color: yellow;
position: relative;
}
nav {
height: 40px;
width: 100vw;
background-color: pink;
position: absolute;
bottom: 0;
}
.carousel {
width: 100vw;
height: 100px;
background-color: RGBA(0,255,0,0.4);
z-index: 5;
position: relative;
}
.classname {
width: 80vw;
height: 200px;
background-color: lightblue;
display: block;
margin: 0 auto;
position: relative;
top: -40px;
}
header,
nav{
text-align: center;
line-height: 40px;
}
.carousel{
text-align: center;
line-height: 100px;
}
.classname{
text-align: center;
line-height: 200px;
}
<header>
Header
<nav>
Nav
</nav>
</header>
<div class="carousel">
Carousel
</div>
<div class="classname"> DIV below carousel</div>
You can try this solution. Using margin top.
JSFiddel Link: https://jsfiddle.net/VrtuosArs/9h8djmy2/1/
body {
color: #000;
}
header {
background: yellow;
padding: 0.1rem;
}
.headertext {
text-align: center;
color: #000;
}
nav {
background: #FF9EC5;
padding: 0.1rem;
}
#carousel {
background: #9BFF00;
padding: 1rem;
}
#bcarousel {
background: #95D6ED;
}
.dac {
height: 240px;
margin-top: -2rem;
}
footer {
background: #C2C2C2;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Div carousel</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/4.0.0/cerulean/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
<header>
<div class="container">
<div class="row">
<div class="col-12 mx-auto">
<h1 class="text-center headertext">Header</h1>
</div>
</div>
</div>
</header>
<nav>
<div class="container">
<div class="row">
<div class="col-12 mx-auto">
<h1 class="text-center headertext">Navbar</h1>
</div>
</div>
</div>
</nav>
<div class="container-fluid" id="carousel">
<div class="row">
<div class="col-12 mx-auto">
<h1 class="text-center headertext">Carousel</h1>
</div>
</div>
</div>
<div class="container" id="bcarousel">
<div class="row dac">
<div class="col-6 offset-md-3 mx-auto">
<h3 class="text-center headertext">Div below carousel</h3>
</div>
</div>
</div>
<footer>
<div class="container">
<div class="row">
<div class="col-12 mx-auto">
<h1 class="text-center headertext">Footer</h1>
</div>
</div>
</div>
</footer>
</body>
</html>
I am in a bit of a pickle trying to vertically align a div. What I aim to achieve is to have 3 divs with height: 100% and width:33% to have a centered content div. Can anyone help? Here is the code:
.wrapper {
height: 100%;
width: 100%;
}
.window {
width: 33%;
float: left;
background-color: #666;
}
.windowContent {
background-color: #000;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="wrapper">
<div class="window">
<div class="windowContent">
</div>
</div>
<div class="window">
<div class="windowContent">
</div>
</div>
<div class="window">
<div class="windowContent">
</div>
</div>
</div>
</body>
</html>
Try this example
<div class="wrapper">
<div class="window">
<div class="windowContent">
1
</div>
</div>
<div class="window">
<div class="windowContent">
2
</div>
</div>
<div class="window">
<div class="windowContent">
3
</div>
</div>
</div>
CSS
.wrapper
{
height: 100%;
width: 100%;
display: flex;
}
.window
{
width: 100%;
min-height: 200px;
background-color: #666;
display: flex;
align-items: center;
justify-content: center;
}
.windowContent
{
background-color: #000;
color: #fff;
}
Demo - https://jsfiddle.net/xa3v1c3o/