I am designing a dashboard interface for myself. I am having some problems with inner divs, my leftpane div is set to 100% height inside the parent but it is overflowing parent div by the amount of 50px which is the height of topbar. Please suggest me why it is overflowing, 100% should mean whatever available space there is, isn't it?
here is my css and html
html, body {
height:100%;
margin: 0px;
}
.wrapper {
width: 100%;
height: 700px;
margin: auto;
border: 1px solid black;
display: table;
}
.topbar {
height: 50px;
background: #353535;
background-color: #353535;
clear:both;
color: white;
width: 100%;
position:relative;
}
.leftpane {
width: 20%;
height: 100%;
background-color: #eee;
float: left;
border-right: 2px solid #353535;
}
.content {
width: 79%;
height: 100%;
float:right;
border: 2px solid red;
}
.content-header {
height: 50px;
background-color: #353535;
width: 100%;
}
.content-area {
height:100%;
width: 100%;
border: 2px solid green;
}
<html>
<head>
<title>GUYACOM - Suivi de la connectivité</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/style2.css" />
<!-- <link rel="stylesheet" href="css/bootstrap.css" /> -->
<!--<link rel="stylesheet" href="css/colorbox.css" /> -->
<!-- <script type="text/javascript" src="js/tinybox.js"></script> -->
</head>
<body>
<div class="wrapper">
<div class="topbar"><h1>
</h1></div>
<div class="content-area">
<div class="leftpane">
</div>
<div class="content">
<div class="content-header">
</div>
</div>
</div>
</div>
</body>
</html>
Try this it may help you...
<html>
<head>
<title>GUYACOM - Suivi de la connectivité</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/style2.css" />
<style>
html, body {
height:100%;
margin: 0px;
}
.wrapper {
width: 100%;
height: 100%;
margin: auto;
border: 1px solid black;
display: table;
}
.topbar {
height: 50px;
background: #353535;
background-color: #353535;
clear:both;
color: white;
width: 100%;
position:absolute;
}
.leftpane {
width: 20%;
height: 100%;
background-color: #eee;
float: left;
border-right: 2px solid #353535;
}
.content {
width: 79.5%;
height: 100%;
float: left;
border: 2px solid red;
}
.content-header {
height: 50px;
background-color: #353535;
width: 100%;
}
.content-area {
height:100%;
width: 100%;
border: 2px solid green;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="topbar"><h1>
</h1></div>
<div class="content-area">
<div class="leftpane">
</div>
<div class="content">
<div class="content-header">
</div>
</div>
</div>
</div>
</body>
</html>
Related
I have a bootstrap container-fluid wrapped up in a div, and now i want the container-fluid to have height of 100% regardless of it's content but it seems it only take up the height of it content below is my code
Html
<div class="wrap">
<div class="container-fluid h-100 test">this is container-fluid
<div>hello my brother</div>
</div>
</div>
My css
html,
body {
height: 100%;
}
.wrap {
min-height: 100%;
height: auto;
margin: 0 auto -60px;
padding: 0 0 60px;
background: blue;
}
.test {
height: 100%;
background-color: yellow;
border: 1px solid red;
text-align:center;
}
.footer {
height: 60px;
background-color: #f5f5f5;
border-top: 1px solid #ddd;
padding-top: 20px;
}
now i want the yellow div to take up 100% height but it doesn't work as expected.. here is my fiddle
You are giving wrap a height:auto just remove that height:auto means that it will maintain it's own height to it childrens, If their are more childs then it will increase it's own height.Just remove that and add height:100%
html,
body {
height: 100%;
}
.wrap {
height: 100%;
margin: 0 auto -60px;
padding: 0 0 60px;
background: blue;
}
.test {
height: 100%;
background-color: yellow;
border: 1px solid red;
text-align:center;
}
.footer {
height: 60px;
background-color: #f5f5f5;
border-top: 1px solid #ddd;
padding-top: 20px;
}
<!DOCTYPE HTML>
<html>
<head>
<title>Welcome </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
</head>
<body>
<div class="wrap">
<div class="container-fluid h-100 test">this is container-fluid
<div>hello my brother</div>
</div>
</div>
</body>
<footer class="footer">
<div class="container">
<p class="pull-left">my site</p>
<p class="pull-right">2019</p>
</div>
</footer>
</html>
I'm trying to align two div's vertically, I know how to do this. But another issue is coming up, the div above ("top-bar") is being cut in half when I place the second div below it and I have no reason why. Should I use position:absolute to solve this? I try to avoid using this however whenever I can. Thanks!
body {
margin: 0;
padding: 0;
background-color: #EFEFEF;
font-family: sans-serif;
}
.homepage-window {
height: 100vh;
display: flex;
}
.nav-bar {
width: 18%;
background-color: #2E3E4E;
}
.top-bar {
height: 8%;
width: 100%;
background-color: white;
border-bottom: 0.5px solid lightgrey;
}
.bottom-bar {
margin-top: 20%;
height: 8%;
width: 100%;
background-color: white;
border-bottom: 0.5px solid lightgrey;
}
/*border-top: 0.5px solid lightgrey;*/
<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="CSS/Homepage.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<head>
<title>Cold-Ops Homepage</title>
</head>
<body>
<div class="homepage-window">
<div class="nav-bar">
</div>
<div class="top-bar">
</div>
<div class="bottom-bar">
</div>
</div>
</body>
</html>
Wrap your top-bar and bottom-bar div in another wrapper div with width :100%;
<div style="width: 100%;">
<div class="top-bar">
</div>
<div class="bottom-bar">
</div>
</div>
In your case all 3 divs are placed in a flex container, its aligning them in the same row. Thats why You need to keep the top-bar and bottom-bar div in another div container.
body {
margin: 0;
padding: 0;
background-color: #EFEFEF;
font-family: sans-serif;
}
.homepage-window {
height: 100vh;
display: flex;
}
.nav-bar {
width: 18%;
background-color: #2E3E4E;
}
.top-bar {
height: 8%;
width: 100%;
background-color: white;
border-bottom: 0.5px solid lightgrey;
}
.bottom-bar {
margin-top: 20%;
height: 8%;
width: 100%;
background-color: white;
border-bottom: 0.5px solid lightgrey;
}
<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="CSS/Homepage.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<head>
<title>Cold-Ops Homepage</title>
</head>
<body>
<div class="homepage-window">
<div class="nav-bar">
</div>
<div style="width: 100%;">
<div class="top-bar">
</div>
<div class="bottom-bar">
</div>
</div>
</div>
</body>
</html>
I've created my jquery slider, and now I'm having issues trying to make it responsive. the navigation dots and navigation buttons can be positioned at fixed height. But I want to position next button to the center right of the carousel and wanted to do it in %. so, I give height:100% to its parent body, #container, #carousel. and it worked but the page scaled as you can see in the demo I provided. any suggestion how to position the #next,#prev in percentages?
Here is my work: http://codepen.io/anon/pen/ZpXmQj
html,
body {
position: relative;
background-color: #ccc;
}
Css html,
body {
height: 100%;
position: relative;
background-color: #ccc;
}
* {
box-sizing: border-box;
}
#container {
width: 90%;
margin: 0 auto;
height: 100%;
background-color: white;
}
header {
background: black;
height: 20px;
padding: 1.5em;
color: white;
}
#carousel {
position: relative;
margin: 0 auto;
width: 45%;
margin-top: 15px;
height: 100%;
background-color: pink
}
.slide {
position: absolute;
max-width: 100%;
z-index: 0;
}
.sliderbuttons {} #prev,
#next {
position: absolute;
background-color: rgba(255, 148, 41, 0.68);
box-shadow: 2px white;
border: none;
font-size: 2em;
padding: 1%;
color: white;
font-weight: bold;
font-family: 'Baloo Tamma', cursive;
height: 100%;
width: 10%;
/*making the prev,next on top of content*/
z-index: 2;
}
#prev {
left: 0;
}
#next {
right: 0;
}
.active {
z-index: 1;
}
.indicators {
z-index: 2;
position: absolute;
bottom: 49%;
left: 45%;
}
.circle {
border-radius: 10px;
width: 10px;
height: 5px;
border: 2px solid black;
}
.indicators div {
padding: 8px;
margin: 2px;
display: inline-block;
}
.blip {
background-color: orange;
}
div.indicators:hover {
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
<title>Image carousel</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="carouselcss.css">
<!-- <link href="https://fonts.googleapis.com/css?family=Baloo+Tamma" rel="stylesheet"> -->
</head>
<body>
<div id="container">
<header>
header is here
</header>
<div id="carousel">
<div class="sliderbuttons">
<input type="button" name="next" id="next" value=">">
<input type="button" name="next" id="prev" value="<">
</div>
<div class="slides">
<img src="http://www.planwallpaper.com/static/images/4-Nature-Wallpapers-2014-1_ukaavUI.jpg" alt="image1" class="slide active">
<img src="http://www.mrwallpaper.com/wallpapers/green-Rice-1600x900.jpg" alt="image2" class="slide">
<img src="http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/nature-wallpapers-10.jpg" alt="image3" class="slide">
</div>
<div class="indicators">
<div class="circle blip"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
</div>
</body>
</html>
Check this out. I believe what was happening was that your next and prev were adjusting to the height of the screen and not the height of the images like you were hoping.
So to customize this, first set the height and width of your images to whatever you want, match that same height for your buttons, and as long as they're in the same parent div it should match
<html>
<head>
<title>Image carousel</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="carouselcss.css">
<!-- <link href="https://fonts.googleapis.com/css?family=Baloo+Tamma" rel="stylesheet"> -->
</head>
<body>
<header>
header is here
</header>
<div id="carousel">
<div class="sliderbuttons">
<input type="button" name="next" id="next" value=">">
<input type="button" name="prev" id="prev" value="<">
</div>
<div class="slides">
<img src="http://www.planwallpaper.com/static/images/4-Nature-Wallpapers-2014-1_ukaavUI.jpg" alt="image1" class="slide active">
<img src="http://www.mrwallpaper.com/wallpapers/green-Rice-1600x900.jpg" alt="image2" class="slide">
<img src="http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/nature-wallpapers-10.jpg" alt="image3" class="slide">
</div>
<div class="indicators">
<div class="circle blip"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
</div>
</body>
</html>
html,body {
height: 100%;
position: relative;
background-color: #ccc;
}
*{
box-sizing: border-box;
}
#container {
width: 90%;
margin: 0 auto;
height: 100%;
background-color: white;
}
header {
background: black;
height: 20px;
padding: 1.5em;
color: white;
}
#carousel {
position: relative;
margin: 0 auto;
width: 45%;
margin-top: 15px;
height: 100%;
background-color: pink
}
.slide {
position: absolute;
width: 100%;
z-index: 0;
height: 100%;
}
.sliderbuttons {
}
#prev,#next {
position: absolute;
background-color: rgba(255, 148, 41, 0.68);
box-shadow: 2px white;
border:none;
font-size: 2em;
padding: 1%;
color: white;
font-weight: bold;
font-family: 'Baloo Tamma', cursive;
height: 100%;
width: 10%;
/*making the prev,next on top of content*/
z-index: 2;
}
#prev {
left:0;
}
#next {
right:0;
}
.active {
z-index: 1;
}
.indicators {
z-index: 2;
position: absolute;
bottom:49%;
left: 45%;
}
.circle {
border-radius: 10px;
width: 10px;
height: 5px;
border:2px solid black;
}
.indicators div {
padding: 8px;
margin: 2px;
display: inline-block;
}
.blip {
background-color: orange;
}
div.indicators:hover {
cursor: pointer;
}
I've been working on a webpage but due to some problems I don't know why my drop list is not working. However when placed outside the div it does work. I would be grateful if someone can help me please. The html and the css files are attached below.
below is the html codes:
#charset "utf-8";
/* CSS Document */
body {
padding: 0;
margin: 0;
background-image: url("background.jpg");
background-repeat: no-repeat;
}
canvas {
border: 1px dashed rgb(200, 200, 200);
}
.outer {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.middle {
display: table-cell;
vertical-align: middle;
}
#div_canvas {
float: left;
width: 900px;
height: 600px;
background-color: #FFF;
margin-left: 50px;
padding: 0;
}
#div_menu {
background-color: rgba(255, 255, 255, 0.4);
border-radius: 10px;
border: 1px solid gray;
float: right;
width: 300px;
height: 600px;
word-wrap: break-word;
margin-right: 50px;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="mycss.css">
</head>
<body>
<!--Menu-->
<div class="outer">
<div class="middle">
<div id="div_menu">
<br/>
<center>
<select id="action">
<option value="1">Line</option>
<option value="2">Freehand</option>
</select>
</center>
</div>
</div>
</div>
<!--Canvas-->
<div class="outer">
<div class="middle">
<center>
<div id="div_canvas">
<canvas id="canvas" width="899" height="599"></canvas>
</div>
</center>
</div>
</div>
</body>
</html>
Your second .outer Is in front of your selectbox.
Give the first .outer a z-index: 1;
They are overlapping, don't open new divs for the canvas like this:
#charset "utf-8";
/* CSS Document */
body {
padding: 0;
margin: 0;
background-image: url("background.jpg");
background-repeat: no-repeat;
}
canvas {
border: 1px dashed rgb(200, 200, 200);
}
.outer {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.middle {
display: table-cell;
vertical-align: middle;
}
#div_canvas {
float: left;
width: 900px;
height: 600px;
background-color: #FFF;
margin-left: 50px;
padding: 0;
}
#div_menu {
background-color: rgba(255, 255, 255, 0.4);
border-radius: 10px;
border: 1px solid gray;
float: right;
width: 300px;
height: 600px;
word-wrap: break-word;
margin-right: 50px;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="mycss.css">
</head>
<body>
<!--Menu-->
<div class="outer">
<div class="middle">
<div id="div_menu">
<br/>
<center>
<select id="action">
<option value="1">Line</option>
<option value="2">Freehand</option>
</select>
</center>
</div>
</div>
</div>
<!--Canvas-->
<center>
<div id="div_canvas">
<canvas id="canvas" width="899" height="599"></canvas>
</div>
</center>
</div>
</div>
</body>
</html>
I have a problem with 5 floating divs, here is a picture:
You will see.. the green div should be on the left side from the red div(instead of the empty place) and the violet div on the place from the green div.
The html order from the divs is: blue, red, orange, green and violet, I think this is the reason for this white, empty space, because the green and the violet div comes in the html after! the red div, is this right?
What can i do, to fix this problem, anyone have an idea? I set the margin-top of the violet to -300px but I think this not a clean solution and than would be the order(html structure) false.
Here is my full html:
<!DOCTYPE html>
<html>
<head>
<title>ResponsiveExample</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="layout.css">
<script src="js/libs/jquery/jquery.js"></script>
</head>
<body>
<div class="page-wrapper">
<header>
<div class="header">
</div>
<div class="below-header"></div>
</header>
<div class="main-content">
<div class="blue-box"></div>
<div class="red-box"></div>
<div class="orange-box"></div>
<div class="green-box"></div>
<div class="violet-box"></div>
</div>
<footer>
</footer>
</div>
</body>
</html>
And here is my CSS:
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body
{
margin: 0;
padding: 0;
}
.header{
position: fixed;
height: 50px;
width: 100%;
background-color: grey;
}
.below-header{
height: 50px;
width: 100%;
}
.blue-box{
height: 300px;
background-color: blue;
}
.red-box{
height: 600px;
background-color: red;
}
.orange-box{
height: 300px;
background-color: orange;
}
.green-box{
height: 300px;
background-color: greenyellow;
}
.violet-box{
height: 300px;
background-color: violet;
}
#media only screen and (min-width: 28.125em) {
.blue-box{
float: left;
width: 50%;
}
.red-box
{
float: left;
width: 100%;
}
.orange-box{
float: left;
width: 50%;
}
.green-box{
float: left;
width: 50%;
}
#media only screen and (min-width: 71.875em){
.blue-box{
width: 33%;
border: 5px solid black;
}
.red-box{
width: 33%;
border: 5px solid black;
}
.orange-box{
width: 33%;
border: 5px solid black;
clear: right;
}
.green-box{
width: 33%;
border: 5px solid black;
clear: right;
}
.violet-box{
width: 33%;
//margin-top: -300px;
border: 5px solid black;
float: left;
}
}
}
I would be very grateful for every help that I get!
Try this:
<div class="main-content">
<div id="left">
<div class="blue-box"></div>
<div class="green-box"></div>
</div>
<div id="center">
<div class="red-box"></div>
</div>
<div id="right">
<div class="orange-box"></div>
<div class="purple-box"></div>
</div>
</div>
Then apply CSS styles to your liking.