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>
Related
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 have a header with an image and an "hamburger" icon for a mobile navigation menu. What I am simply trying to do it display my logo at approx 75% of the available screen with the menu icon to the far right.
I have a master div container and then within it i have 2 divs which has the logo in the left div and menu icon in the right. For some reason I cannot get the menu to stay on the right in the same div container. Any suggestions?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
#container {
width: 100%;
max-width: 100%;
border: 0px;
margin: 0px;
padding: 10px;
background-color: blue;
}
#logoContainer {
width: 75%;
max-width: 75%;
border: 0px;
margin: 0px;
background-color: blue;
}
#logo {
width: auto;
max-width: 90%;
min-width: 90%;
}
#menu {
float: right;
}
#mobileMenu {
width: 100%;
background-color: green;
color: white;
display: none;
}
</style>
</head>
<body>
<div id="container">
<div id="logoContainer">
<img id="logo" src="content/logo.png"/>
</div>
<div id="menu">
<button type="button"><span>Menu</span></button>
</div>
</div>
<div id="mobileMenu">some content</div>
</body>
</html>
give specific width to both #logoContainer and #menu with display:inline-block;
#logoContainer{
width:75%;
display:inline-block;
}
#menu{
width:25%;
display:inline-block;
text-align: right;
}
#menu button{
margin-right:10px
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
#container {
width: 100%;
max-width: 100%;
border: 0px;
margin: 0px;
padding: 10px;
background-color: blue;
}
#logoContainer {
width: 75%;
max-width: 75%;
border: 0px;
margin: 0px;
background-color: blue;
}
#logo {
width: auto;
max-width: 90%;
min-width: 90%;
}
#menu{
float: right;
}
#mobileMenu {
width: 100%;
background-color: green;
color: white;
display: none;
}
</style>
</head>
<body>
<div id="container">
<div id="logoContainer">
<img id="logo" src="content/logo.png" />
</div>
<div id="menu">
<button type="button">
<span>
Menu
</span>
</button>
</div>
</div>
<div id="mobileMenu">
some content
</div>
</body>
</html>
How about using media queries to make the logo appear. With my example, I've set the display on #logo to "none" . With my media query, whenever the page reaches a min-width of 800px it will display the #logo element.
<div id="container">
<div id="logoContainer">
<img id="logo" src="content/logo.png" />
</div>
<div id="menu">
<button type="button">
<span>
Menu
</span>
</button>
</div>
</div>
<div id="mobileMenu">
some content
#container {
width: 100%;
max-width: 100%;
border: 0px;
margin: 0px;
padding: 10px;
background-color: blue;
}
#logoContainer {
width: 75%;
max-width: 75%;
border: 0px;
margin: 0px;
background-color: blue;
}
#logo {
display:none;
width: auto;
max-width: 90%;
}
#menu{
float: right;
}
#mobileMenu {
width: 100%;
background-color: green;
color: black;
display: none;
}
#media (min-width:800px){
#logo{display:block;}
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body{
margin: 0px;
}
#container {
box-sizing: border-box;
width: 100%;
max-width: 100%;
border: 0px;
margin: 0px;
padding: 10px;
background-color: red;
}
#logoContainer {
float: left;
width: 75%;
max-width: 75%;
border: 0px;
margin: 0px;
background-color: blue;
}
#logo{
max-width: 75%;
border: 0px;
margin: 0px;
}
#menu{
height: 10px;
width: 25%;
float: right;
background: yellow;
}
#mybtn{
float: right;
}
#mobileMenu {
display: inline;
background-color: green;
color: white;
}
</style>
</head>
<body>
<div id="container">
<div id="menu">
<button type="button" id="mybtn">
<span>
Menu
</span>
</button>
<div id="mobileMenu">
some content
</div>
</div>
<div id="logoContainer">
<img id="logo" src="content/logo.png" />
</div>
</div>
</body>
</html>
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>
i was trying to add multiple box inside another but i am not getting as i want please help!why i am getting line only?i added display and overflow attributes still i am getting so
style.css
#charset "utf-8";
body {
margin:0;
padding:0;
background:url(../images/back1.png);
background-repeat:repeat;
}
.logomainbox {
width: 100%;
height: 50px;
margin: 10px;
background: linear-gradient(#FC8E03, #FF9801);
}
.menubar {
width: 100%;
height: 50px;
margin: 10px;
background: linear-gradient(#DADADA,#C8C6C6);
}
.imageslide {
width: 100%;
height: 275px;
margin: 10px;
background: linear-gradient(#FC8E03, #FF9801);
}
.textdiscription {
width: 60%;
height: 400px;
margin-left:20%;
margin-right:20%;
border:3px solid red;
}
.textare {
width: 100%;
height: 100px;
border: 1px solid blue;
}
.box {
height: 250px;
wedith: 30%;
border: 1px solid green;
display:inline-block;
overflow:auto;
}
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="css/style.css">
<title>Home</title>
</head>
<body>
<div class="logomainbox">
</div>
<div class="menubar">
</div>
<div class="imageslide">
</div>
<div class="textdiscription">
<div class="textare">
</div>
<center>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</center>
</div>
</body>
</html>
what i want
what i am getting
The problem is that you have wedith instead of width. Change your code to:
.box {
height:250px;
width:30%;
border: 1px solid green;
display:inline-block;
overflow:auto;
}
You have a spelling issue,
.box
wedith:30%
I need the #infoBar div and the #actualCover div to sit to the right of (next to) the #covers div, but for some reason, the covers div is acting like it's not even there and floats on top of the other divs.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
#chooserContainer
{
border: solid 1px orange;
}
#coverArea
{
border: solid 1px red;
width: 760px;
}
#covers
{
width: 150px;
float: left;
height: 600px;
overflow-y: auto;
overflow-x: hidden;
border: solid 2px #BFDEFF;
padding: 10px;
background-color: #F0F7FF;
margin-right: 30px;
}
#infoBar
{
height: 30px;
border: solid 1px green;
width: 600px;
}
#actualCover
{
width: 794px;
height: 1123px;
background-position: top left;
}
</style>
</head>
<body>
<div id="chooserContainer">
<div id="covers">
</div>
<div id="infoBar">
</div>
<div id="coverArea">
<div id="actualCover">
</div>
</div>
<div style="clear: both;"></div>
</div>
</body>
</html>
Here you go.
As a good practice, get your layout correct first before you set padding and margins.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
#chooserContainer
{
background: #ccc;
width: 911px;
}
#covers
{
width: 150px;
float: left;
height: 600px;
overflow-y: auto;
overflow-x: hidden;
background-color: #0ff;
}
#infoBar
{
height: 30px;
width: 600px;
float: right;
background: yellow;
}
#coverArea
{
width: 760px;
float: right;
background: #f60;
}
#actualCover
{
width: 794px;
height: 600px;
}
</style>
</head>
<body>
<div id="chooserContainer">
<div id="covers">Coveres
</div>
<div id="infoBar">InfoBar
</div>
<div id="coverArea">CoverArea
<div id="actualCover">ActualCover
</div>
</div>
<div style="clear: both;"></div>
</div>
</body>
</html>
In this case, it sounds like you want #infoBar and #coverArea to float to the right of #covers instead of #covers floating to the left of the other two.
Try taking the float off of #covers and adding float: right; to #infoBar and #coverArea