I have really weird problem. I want to do rectangle in rectangle, but dont know why, i cant set padding-top of inside-rectangle. Can somebody tell my why?
#outsideRect{
width: 260px;
height: 440px;
background-color: #4084dd;
border-radius: 10px;
}
#insideRect{
width: 200px;
height: 60px;
background-color: ghostwhite;
border-radius: 10px;
margin: 50px auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Calculator</title>
<link rel="stylesheet" href="css/style.css">
<script src="scripts/jquery-3.1.0.js"></script>
<script src="scripts/script.js"></script>
</head>
<body>
<div id="page">
<div id="outsideRect">
<div id="insideRect">
as
</div>
</div>
</div>
</body>
</html>
#outsideRect{
width: 160px;
height: 440px;
background-color: #4084dd;
border-radius: 10px;
}
#insideRect{
width: 100px;
height: 60px;
background-color: ghostwhite;
border-radius: 10px;
margin: 50px auto;
}
.page { display: inline-block; }
#outsideRect2{
width: 160px;
height: 440px;
background-color: #4084dd;
border-radius: 10px;
padding-top: 20px;
}
#insideRect2{
width: 100px;
height: 60px;
background-color: ghostwhite;
border-radius: 10px;
margin: 0 auto;
}
#outsideRect3{
width: 160px;
height: 440px;
background-color: #4084dd;
border-radius: 10px;
}
#insideRect3{
width: 100px;
height: 60px;
background-color: ghostwhite;
border-radius: 10px;
margin: 0 auto;
padding-top: 20px;
}
#insideRect4{
width: 100px;
height: 60px;
background-color: ghostwhite;
border-radius: 10px;
margin: 50px auto;
}
#insideRect5{
width: 100px;
height: 60px;
background-color: ghostwhite;
border-radius: 10px;
margin: 0 auto;
}
<div class="page">
<div id="outsideRect">
<div id="insideRect">
margin on inner rect
</div>
</div>
</div>
<div class="page">
<div id="outsideRect2">
<div id="insideRect2">
padding on outer rect
</div>
</div>
</div>
<div class="page">
<div id="outsideRect3">
<div id="insideRect3">
padding on inner rect
</div>
</div>
</div>
<div class="page">
<div id="outsideRect">
<div id="insideRect4">
margin on inner rect
</div>
<div id="insideRect5">
no margin or padding on inner rect
</div>
</div>
</div>
Padding is always inside the element. Margin is outside the element.
You want to add padding to the outer rectangle if you want the inner rectangle to move down.
Or do you mean to ask why your margin on the inner rectangle isn't working? It's applied outside... between block level elements. Since the inner rectangle is a child of the Outer rectangle, the margin doesn't get allied between parent/child. It get applied between parents. Note how in the 4th example in the snippet the margin is applied to other elements at the same level, but it does not get applied between the parent/child.
#outsideRect{
width: 260px;
height: 440px;
background-color: #4084dd;
border-radius: 10px;
}
#insideRect{
width: 200px;
height: 60px;
background-color: ghostwhite;
border-radius: 10px;
margin: 50px auto;
padding-top: 30px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Calculator</title>
<link rel="stylesheet" href="css/style.css">
<script src="scripts/jquery-3.1.0.js"></script>
<script src="scripts/script.js"></script>
</head>
<body>
<div id="page">
<div id="outsideRect">
<div id="insideRect">
as
</div>
</div>
</div>
</body>
</html>
The padding in the solution can be added without any problem in your solution.
As Scott has mentioned, margin is outside of the element, and padding is inside of the element.
If you want to use the margin in the solution, you will need to add position.
For example:
#outsideRect{
width: 260px;
height: 440px;
background-color: #4084dd;
border-radius: 10px;
}
#insideRect{
position: absolute;
width: 200px;
height: 60px;
background-color: ghostwhite;
border-radius: 10px;
margin: 50px auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Calculator</title>
<link rel="stylesheet" href="css/style.css">
<script src="scripts/jquery-3.1.0.js"></script>
<script src="scripts/script.js"></script>
</head>
<body>
<div id="page">
<div id="outsideRect">
<div id="insideRect">
as
</div>
</div>
</div>
</body>
</html>
Related
In my app I have image and text under the pic - in media queries. I want to display the text after the pic, but somehow it overlaps:
jsFiddle: https://jsfiddle.net/orbwthma/
#media only screen and (max-width: 614px) {
#page-content {
position: absolute;
top: 0;
right: 0;
margin-top: 0 !important;
padding: 0 !important;
}
#main-pic {
position: absolute;
top: 0;
background-size: contain;
background-image: url('../assets/feev-cropped.png');
background-repeat: no-repeat;
margin-bottom: 0 !important;
}
#info {
position: relative;
font-weight: 500;
line-height: 1.29;
}
#lower-text {
font-size: 21px;
width: 305px;
height: 178px;
margin-top: 0 !important;
line-height: 1.29;
margin-bottom: 10px;
}
#page-start {
height: 60vh;
}
}
body {
background-color: #ff0000 !important;
padding: 0px;
margin: 0px;
overflow-x: hidden;
}
#page-start {
height: 100vh;
}
#page-content {
padding-top: 68px !important;
}
#lower-text {
color: #fff;
font-size: 68px;
font-weight: 500;
float: right;
margin: 20px 0px 120px 0;
}
#main-pic {
background-image: url('https://images.pexels.com/photos/736230/pexels-photo-736230.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500');
width: 100%;
height: 920px;
background-size: cover;
background-repeat: no-repeat;
margin-right: auto;
margin-bottom: 50px;
float: right;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
<title>FEEV</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="css/queries.css">
</head>
<body>
<div class="container-fluid" style="margin: 0">
<div id="lower-text">
<div class="row" style='float:right;'>
<div class="col-xs-2 col-md-2"></div>
<div class="col-xs-10 col-md-10" id="page-content" style="margin: 0px; padding: 0px">
<span id="info">
some text1 some text2 some text3 some text4 some text5 some tex6 some text7 some text8 some text9 some text10 some text11 some text12 some text13
</span>
<div id="main-pic"></div>
</div>
</div>
</div>
</div>
</body>
</html>
I tried many things but nothing helped. I think this might have some connections to the position: abolute of the image, but after a while I can't see anything that could help this and prevent overlaping.
EDIT: Try to resize window of the snipped to see overlapping
Please do not use float for layout purposes. There are other solutions for that ( grid or flexbox )
Use flexbox by adding display:flex on #page-content and make use of the flex-direction property. On > 414px use flex-direction: column and then in the media query reverse the order of the text/image by adding flex-direction: column-reverse .
Check below or jsFiddle
body {
background-color: #ff0000 !important;
padding: 0px;
margin: 0px;
overflow-x: hidden;
}
#page-start {
height: 100vh;
}
#page-content {
padding-top: 68px !important;
}
#lower-text {
color: #fff;
font-size: 68px;
font-weight: 500;
margin: 20px 0px 120px 0;
}
#page-content {
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
#main-pic {
background-image: url('https://images.pexels.com/photos/736230/pexels-photo-736230.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500');
width: 100%;
height: 920px;
background-size: cover;
background-repeat: no-repeat;
margin-right: auto;
margin-bottom: 50px;
}
#media only screen and (max-width: 414px) {
#info {
position: relative;
font-weight: 500;
line-height: 1.29;
}
#lower-text {
font-size: 21px;
width: 305px;
height: 178px;
margin-top: 0 !important;
line-height: 1.29;
margin-bottom: 10px;
}
#page-start {
height: 60vh;
}
#page-content {
flex-direction: column-reverse;
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
<title>FEEV</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="css/queries.css">
</head>
<body>
<div class="container-fluid" style="margin: 0">
<div id="lower-text">
<div class="row">
<div class="col-xs-2 col-md-2"></div>
<div class="col-xs-10 col-md-10" id="page-content" style="margin: 0px; padding: 0px">
<span id="info">
some text1 some text2 some text3 some text4 some text5 some tex6 some text7 some text8 some text9 some text10 some text11 some text12 some text13
</span>
<div id="main-pic"></div>
</div>
</div>
</div>
</div>
</body>
</html>
I have a couple of issues with this code:
1. The fourth div is being seemingly squished. Its height is smaller than the other divs.
2. The height of the container div doesn't change to 50%. I used wv, but I'm not sure why % doesn't work.
https://codepen.io/anon/pen/drERNr
.container {
background: blue;
width: 75%;
height: 50vw;
}
.box {
width: 20%;
background: #333;
color: white;
font-size: 25px;
font-family: 'helvetica';
border: 1px solid blue;
margin: 2px;
float: left;
text-align: center;
}
#box4 {
width: 20%;
background: #333;
color: white;
font-size: 25px;
font-family: 'helvetica';
border: 1px solid blue;
margin-top: 2px;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="index.css">
<title>prac</title>
</head>
<body>
<div class="container">
<div id="one" class="box">
<p>One</p>
</div>
<div id="two" class="box">
<p>Two</p>
</div>
<div id="three" class="box">
<p>Three</p>
</div>
<div id="box4">
<p>four</p>
</div>
</div>
</body>
</html>
Your fourth element is being squashed because you float the first three elements to the left, but don't 'reset' the float. This can be achieved with a clearfix:
#box4:before {
content: "";
display: table;
clear: both;
}
.container {
background: blue;
width: 75%;
height: 50vw;
}
.box {
width: 20%;
background: #333;
color: white;
font-size: 25px;
font-family: 'helvetica';
border: 1px solid blue;
margin: 2px;
float: left;
text-align: center;
}
#box4:before {
content: "";
display: table;
clear: both;
}
#box4 {
width: 20%;
background: #333;
color: white;
font-size: 25px;
font-family: 'helvetica';
border: 1px solid blue;
margin-top: 2px;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="index.css">
<title>prac</title>
</head>
<body>
<div class="container">
<div id="one" class="box">
<p>One</p>
</div>
<div id="two" class="box">
<p>Two</p>
</div>
<div id="three" class="box">
<p>Three</p>
</div>
<div id="box4">
<p>four</p>
</div>
</div>
</body>
</html>
As for why you can't use % on the .container, it's because percentage-based units inherit their value from the immediate parent (and chain upwards), yet <body> has no fixed height defined. You need a calculated height on the parent in order for the child to be able to calculate its own height as a percentage.
I'm currently creating a single page video playing for store advertisement.
My problem is how can i set the video tag to full height relative to its parent div? I used vh dimension but still no luck to solve that.
As you can see on the image the video portion has gaps on both its top and bottom. already set the padding and margin to 0.
Code:
<!DOCTYPE html>
<!-- http://www.101computing.net/html-website-layout/ -->
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style>
BODY {
background-color: #FFF;
overflow: hidden;
width: 100%;
margin: 0px;
}
.page {
display: block;
width: 100%;
min-height: 800px;
overflow: auto;
margin: 0px auto 0px auto;
box-sizing: border-box;
}
.pageClockPanel {
background-color: #333;
position: fixed;
top: 0px;
left: 0px;
clear: none;
width: 60%;
height: 10%;
padding: 10px;
}
.pageRightPanel {
background-color: #1A237E;
position: fixed;
top: 0px;
right: 0px;
clear: none;
width: 40%;
height: 87%;
box-sizing: border-box;
padding: 10px;
}
.pageLeftPanel {
background-color: #E64A19;
position: fixed;
top: 10%;
left: 0px;
clear: none;
width: 60%;
height: 77%;
box-sizing: border-box;
padding: 0px;
}
.pageBottomPanel {
background-color: #333;
position: fixed;
bottom: 0px;
right: 0px;
clear: none;
height: 13%;
width: 100%;
box-sizing: border-box;
padding: 10px;
}
.item img {
width: 100%;
min-height: 77vh
}
.item video,
source {
width: 100%;
min-height: 77vh;
}
</style>
<title>Page Title</title>
<!-- https://www.bootply.com/59900 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="page">
<div class="pageClockPanel">
</div>
<div class="pageRightPanel">
</div>
<div class="pageLeftPanel">
<div class="row">
<div class="col-md-12">
<div class="item">
<video video autobuffer autoplay>
<source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm>
</video>
</div>
</div>
</div>
</div>
<div class="pageBottomPanel">
</div>
</div>
</body>
</html>
I solved my problem by adding this css
.item{
position:absolute;
height:100%;
width:100%;
overflow: hidden;
}
.item video {
min-width: 100%;
min-height: 100%;
height:auto;
}
css explanation here
The video tag get always the same ratios (width/height) as the video file.
It would looks like stretched if you want to fit the width and the height - if this is just possible.You can try to set the height attribute of the video tag
Simple code.jsfiddle
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/normalize.css"/>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div class="header">
<div class="nav">
<div class="navTitle">1</div>
<div class="subNav subNav1">test1</div>
<div class="subNav subNav2">test2</div>
<div class="subNav subNav3">test3</div>
<div class="subNav subNav4">test4</div>
</div>
</div>
<div class="container">
</div>
<div class="left">
<div class="leftEles leftEle1"></div>
<div class="leftEles leftEle2"></div>
<div class="leftEles leftEle3"></div>
<div class="leftEles leftEle4"></div>
<div class="leftEles leftEle5"></div>
</div>
<div class="footer">
</div>
<script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/script.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
And CSS.
body{
overflow: hidden;
font-size: 20px;
padding: 0;
margin: 0;
}
.header{
width: 100%;
height: 50px;
background-color: #0092C7;
position: relative;
}
.left{
position: absolute;
left: 0;
top: 50px;
width: 200px;
bottom: 0;
border-right: 1px solid #C0C0C0;
}
.container{
position: absolute;
left: 200px;
top: 50px;
bottom: 0;
right: 0;
}
.leftEles{
width: 100%;
height: 50px;
background-color: #F4F3DE;
border-bottom: 1px solid #C0C0C0;
cursor: pointer;
}
.leftEles:hover{
opacity: 0.7;
}
.nav{
width: 200px;
height: 250px;
line-height: 50px;
float: right;
text-align: center;
}
.navTitle{
border-left: 1px solid #C0C0C0;
}
.subNav{
border-bottom: 1px solid #C0C0C0;
background-color: rgba(0,146,199,0.7);
cursor: pointer;
}
.subNav:hover{
color: #FFFFFF;
}
I'm curious why the hover and cursor effect on .subNav won't work!
Simple and silly question. Help me, many thx!
Your effect was not working because of .container is overlapping .header
Use z-index css on .header:
z-index: 2;
Complete css of .header
.header{
width: 100%;
height: 50px;
z-index:2;
background-color: #0092C7;
position: relative;
}
UPDATED DEMO
.container is positioned over navigation, has higher natural z-index (in code is after navigation).
To place navigation over container, set to navigation position: relative (only positioned elements (excluding position: static;) works with z-index) and higher z-index than 1.
.nav{
width: 200px;
height: 250px;
line-height: 50px;
float: right;
text-align: center;
position: relative;
z-index: 2
}
http://jsfiddle.net/4b2d0fyv/3/
I have to do a project in school using HTML and CSS and so far all am trying to do is the page layout and for whatever reason when I put the footer for my webpage it pops up on the top of the page instead of the bottom and I'm also having a bit of trouble trying to resize it to fix the whole page.
#wrapper {
width: 1024px;
height: 768px;
background-color: #E1E0E0;
}
#banner {
width: 1024px;
height: 220px;
background-color: #6E6A6A;
}
#menuTop {
width: 1024px;
height: 35px;
background-color: #ACAAAA;
}
#columnLeft {
width: 220px;
height: 438px;
background-color: #CBCACA;
float: left;
}
#columnRight {
width: 220px;
height: 438px;
background-color: #CBCACA;
float: right;
}
#content {
width: 584;
height: 438;
background-color: #E1E0E0;
margin-left: 220px;
}
#footer {
width: 1024px;
height: 75px;
background-color: #6E6A6A;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="FinalHTML.css">
<title></title>
</head>
<body>
<div id="wrapper">
<div id="banner">
</div>
<div id="menuTop">
</div>
<div id="columnLeft">
</div>
<div id="columnRight">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</div>
</body>
</html>
The height and width must have a unit, like px, dpi, etc.
#wrapper {
width: 1024px;
height: 768px;
background-color: #E1E0E0;
}
#banner {
width: 1024px;
height: 220px;
background-color: #6E6A6A;
}
#menuTop {
width: 1024px;
height: 35px;
background-color: #ACAAAA;
}
#columnLeft {
width: 220px;
height: 438px;
background-color: #CBCACA;
float: left;
}
#columnRight {
width: 220px;
height: 438px;
background-color: #CBCACA;
float: right;
}
#content {
width: 584px; // here you frogot the unit (px in this case)
height: 438px;
background-color: #E1E0E0;
margin-left: 220px;
}
#footer {
width: 1024px;
height: 75px;
background-color: #6E6A6A;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="FinalHTML.css">
<title></title>
</head>
<body>
<div id="wrapper">
<div id="banner">
</div>
<div id="menuTop">
</div>
<div id="columnLeft">
</div>
<div id="columnRight">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</div>
</body>
</html>
You forgot to type px after your height and width on the content div.
width: 584;
height: 438;
should be
width: 584px;
height: 438px;
#content {
width: 584;
height: 438;
background-color: #E1E0E0;
margin-left: 220px;
}
You forgot the "px"