Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
I have a basic question, but not basic for me. I am facing an issue to align div and removing some extra spacing. I have attached to screen shots. One shows how design looks right now and another shows to remove the extra space that is marked in red box and also to align right most div to the bottom and top of the left div.
Or if some one can explain what is the best way to achieve this
Any help is highly appreciated.
HTML
<!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">
<title>Document</title>
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<div class="mainContainer">
<div class="topSection pd-10">
<div class="pd-10">
<div class="topBar">
<input type="text" value="36 pt">
<input type="text" value="Auto">
<div class="box">
<div class="leftAlign"></div>
</div>
<div class="box">
<div class="centerAlign"></div>
</div>
<div class="box">
<div class="rightAlign"></div>
</div>
<div>
<div class="circle"></div>
</div>
</div>
<div>
<textarea name="" id="" cols="30" rows="6" placeholder="Type logo text here"></textarea>
</div>
</div>
<div>
<div class="flexContainer">
<div class="iconBox mg-5">
<div>
<div class="plus"></div>
</div>
</div>
<div class="iconBox mg-5 ">
<div>
<div class="plus"></div>
</div>
</div>
</div>
<div class="flexContainer">
<div class="iconBox mg-5">
<div>
<div class="plus"></div>
</div>
</div>
<div class="iconBox mg-5">
<div>
<div class="plus"></div>
</div>
</div>
</div>
</div>
<div>
<div class="mg-10 box">
<div class="logoUp"></div>
</div>
<div class="mg-10 box">
<div class="logoLeft"></div>
</div>
<div class="mg-10 box">
<div class="logoRight"></div>
</div>
<div class="mg-10 box">
<div class="logoDown"></div>
</div>
</div>
</div>
</div>
</body>
CSS
body {
background-color: #262626;
color: #c7c7c7;
font-family: lucidagrande;
/* font-size: 11px; */
font-weight: 400;
}
input[type=text] {
background-color: #262626;
border-color: #525252;
color: #c7c7c7;
border-style: solid;
border-radius: 5px;
padding: 5px;
width: 10%;
text-align: center;
}
textarea {
background-color: #262626;
border-color: #525252;
color: #c7c7c7;
border-style: solid;
border-radius: 5px;
padding: 5px;
text-align: center;
/* width: 95%; */
}
/* .topSection {
padding: 10px;
} */
.topSection>div,
.leftSection {
display: inline-block;
background-color: #323232;
}
.flexContainer {
display: flex;
flex-wrap: nowrap;
margin: 10px;
}
.box {
background-color: #262626;
border-color: #525252;
border-radius: 5px;
padding: 5px;
width: 16px;
text-align: center;
border-style: solid;
border-width: 2px;
}
.topBar {
margin-bottom: 15px;
margin-top: 5px;
}
.topBar>div {
display: inline-block;
vertical-align: bottom;
}
.leftAlign {
background: url(../images/leftAlign.png) no-repeat center center;
background-size: contain;
height: 14px;
width: 14px;
}
.centerAlign {
background: url(../images/centerAlign.png) no-repeat center center;
background-size: contain;
height: 14px;
width: 14px;
}
.rightAlign {
background: url(../images/rightAlign.png) no-repeat center center;
background-size: contain;
height: 14px;
width: 14px;
}
.circle {
border: solid 2px #525252;
background-color: black;
border-radius: 50px;
height: 25px;
width: 25px;
}
.plus {
background: url(../images/plus.png) no-repeat center center;
background-size: auto;
height: 100%;
}
.iconBox {
background-color: #262626;
border-color: #525252;
border-radius: 5px;
padding: 5px;
width: 50px;
height: 50px;
border-style: solid;
border-width: 2px
}
.iconBox>div {
background-color: #262626;
border-color: #525252;
border-radius: 5px;
padding: 5px;
text-align: center;
border-style: dotted;
height: 65%;
}
.logoUp {
background: url(../images/logoUp.png) no-repeat center center;
background-size: contain;
height: 14px;
width: 14px;
}
.logoLeft {
background: url(../images/logoLeft.png) no-repeat center center;
background-size: contain;
height: 14px;
width: 14px;
}
.logoRight {
background: url(../images/logoRight.png) no-repeat center center;
background-size: contain;
height: 14px;
width: 14px;
}
.logoDown {
background: url(../images/logoCenter.png) no-repeat center center;
background-size: contain;
height: 14px;
width: 14px;
}
.mg-5 {
margin: 5px;
}
.pd-10 {
padding: 10px;
}
.pd-5 {
padding: 5px;
}
.pd-b-5 {
padding-bottom: 5px;
}
.mg-10 {
margin: 10px;
}
Attached required designed. I don't need a code but approach to start this design in a best way. An explanation will be helpful.
[![enter image description here][3]][3]
sorry if it's a quick solution but it fix the problem of the space between the two elements. it's the simplest solution I didn't touch any of your elements.
i just add this properties to the pd10 class. check code :
*you can delete the margin if you want but I add it for style reasons:
body {
background-color: #262626;
color: #c7c7c7;
font-family: lucidagrande;
/* font-size: 11px; */
font-weight: 400;
}
input[type=text] {
background-color: #262626;
border-color: #525252;
color: #c7c7c7;
border-style: solid;
border-radius: 5px;
padding: 5px;
width: 10%;
text-align: center;
}
textarea {
background-color: #262626;
border-color: #525252;
color: #c7c7c7;
border-style: solid;
border-radius: 5px;
padding: 5px;
text-align: center;
width: 95%;
}
/* .topSection {
padding: 10px;
} */
.topSection>div,
.leftSection {
display: inline-block;
background-color: #323232;
}
.flexContainer {
display: flex;
flex-wrap: nowrap;
margin: 10px;
}
.box {
background-color: #262626;
border-color: #525252;
border-radius: 5px;
padding: 5px;
width: 16px;
text-align: center;
border-style: solid;
border-width: 2px;
}
.topBar {
margin-bottom: 15px;
margin-top: 5px;
}
.topBar>div {
display: inline-block;
vertical-align: bottom;
}
.leftAlign {
background: url(../images/leftAlign.png) no-repeat center center;
background-size: contain;
height: 14px;
width: 14px;
}
.centerAlign {
background: url(../images/centerAlign.png) no-repeat center center;
background-size: contain;
height: 14px;
width: 14px;
}
.rightAlign {
background: url(../images/rightAlign.png) no-repeat center center;
background-size: contain;
height: 14px;
width: 14px;
}
.circle {
border: solid 2px #525252;
background-color: black;
border-radius: 50px;
height: 25px;
width: 25px;
}
.plus {
background: url(../images/plus.png) no-repeat center center;
background-size: auto;
height: 100%;
}
.iconBox {
background-color: #262626;
border-color: #525252;
border-radius: 5px;
padding: 5px;
width: 50px;
height: 50px;
border-style: solid;
border-width: 2px
}
.iconBox>div {
background-color: #262626;
border-color: #525252;
border-radius: 5px;
padding: 5px;
text-align: center;
border-style: dotted;
height: 65%;
}
.logoUp {
background: url(../images/logoUp.png) no-repeat center center;
background-size: contain;
height: 14px;
width: 14px;
}
.logoLeft {
background: url(../images/logoLeft.png) no-repeat center center;
background-size: contain;
height: 14px;
width: 14px;
}
.logoRight {
background: url(../images/logoRight.png) no-repeat center center;
background-size: contain;
height: 14px;
width: 14px;
}
.logoDown {
background: url(../images/logoCenter.png) no-repeat center center;
background-size: contain;
height: 14px;
width: 14px;
}
.mg-5 {
margin: 5px;
}
.pd-10 {
padding: 10px;
display:flex;
text-align-last: justify;
margin:10px;
}
.pd-5 {
padding: 5px;
}
.pd-b-5 {
padding-bottom: 5px;
}
.mg-10 {
margin: 10px;
}
<!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">
<title>Document</title>
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<div class="mainContainer">
<div class="topSection pd-10">
<div class="pd-10">
<div class="topBar">
<input type="text" value="36 pt">
<input type="text" value="Auto">
<div class="box">
<div class="leftAlign"></div>
</div>
<div class="box">
<div class="centerAlign"></div>
</div>
<div class="box">
<div class="rightAlign"></div>
</div>
<div>
<div class="circle"></div>
</div>
</div>
<div>
<textarea name="" id="" cols="30" rows="6" placeholder="Type logo text here"></textarea>
</div>
</div>
<div>
<div class="flexContainer">
<div class="iconBox mg-5">
<div>
<div class="plus"></div>
</div>
</div>
<div class="iconBox mg-5 ">
<div>
<div class="plus"></div>
</div>
</div>
</div>
<div class="flexContainer">
<div class="iconBox mg-5">
<div>
<div class="plus"></div>
</div>
</div>
<div class="iconBox mg-5">
<div>
<div class="plus"></div>
</div>
</div>
</div>
</div>
<div>
<div class="mg-10 box">
<div class="logoUp"></div>
</div>
<div class="mg-10 box">
<div class="logoLeft"></div>
</div>
<div class="mg-10 box">
<div class="logoRight"></div>
</div>
<div class="mg-10 box">
<div class="logoDown"></div>
</div>
</div>
</div>
</div>
</body>
</html>
I refactored a few classes. You can check working example here: https://jsfiddle.net/1924ovfp/78/.
And here is the snippet:
body {
background-color: #262626;
color: #c7c7c7;
font-family: lucidagrande;
/* font-size: 11px; */
font-weight: 400;
}
input[type=text] {
background-color: #262626;
border-color: #525252;
color: #c7c7c7;
border-style: solid;
border-radius: 5px;
padding: 5px;
width: 10%;
text-align: center;
}
textarea {
background-color: #262626;
border-color: #525252;
color: #c7c7c7;
border-style: solid;
border-radius: 5px;
padding: 5px;
text-align: center;
/* width: 95%; */
}
/* .topSection {
padding: 10px;
} */
.flexContainer {
display: flex;
flex-wrap: nowrap;
margin: 10px;
}
.box {
background-color: #262626;
border-color: #525252;
border-radius: 5px;
padding: 5px;
width: 16px;
text-align: center;
border-style: solid;
border-width: 2px;
}
.topBar {
margin-bottom: 15px;
margin-top: 5px;
width: 100%;
}
.bottomBar{
width: 100%;
padding-right:15px;
}
.bottomBar textarea{
width: 98%;
}
.topBar>div {
display: inline-block;
vertical-align: bottom;
}
.leftAlign {
background: url(../images/leftAlign.png) no-repeat center center;
background-size: contain;
height: 14px;
width: 14px;
}
.centerAlign {
background: url(../images/centerAlign.png) no-repeat center center;
background-size: contain;
height: 14px;
width: 14px;
}
.rightAlign {
background: url(../images/rightAlign.png) no-repeat center center;
background-size: contain;
height: 14px;
width: 14px;
}
.circle {
border: solid 2px #525252;
background-color: black;
border-radius: 50px;
height: 25px;
width: 25px;
}
.plus {
background: url(../images/plus.png) no-repeat center center;
background-size: auto;
height: 100%;
}
.iconBox {
background-color: #262626;
border-color: #525252;
border-radius: 5px;
padding: 5px;
width: 50px;
height: 50px;
border-style: solid;
border-width: 2px
}
.iconBox>div {
background-color: #262626;
border-color: #525252;
border-radius: 5px;
padding: 5px;
text-align: center;
border-style: dotted;
height: 65%;
}
.logoUp {
background: url(../images/logoUp.png) no-repeat center center;
background-size: contain;
height: 14px;
width: 14px;
}
.logoLeft {
background: url(../images/logoLeft.png) no-repeat center center;
background-size: contain;
height: 14px;
width: 14px;
}
.logoRight {
background: url(../images/logoRight.png) no-repeat center center;
background-size: contain;
height: 14px;
width: 14px;
}
.logoDown {
background: url(../images/logoCenter.png) no-repeat center center;
background-size: contain;
height: 14px;
width: 14px;
}
.mg-5 {
margin: 5px;
}
.pd-10 {
padding: 10px;
}
.pd-5 {
padding: 5px;
}
.pd-b-5 {
padding-bottom: 5px;
}
.mg-10 {
margin: 10px;
}
.mainContainer {
width: 100%;
display: flex;
flex-direction: row;
gap:5px;
}
.mainContainer>div {
display: inline-block;
background-color: #323232;
}
<!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">
<title>Document</title>
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<div class="mainContainer">
<div class="pd-10 container_1">
<div class="topBar">
<input type="text" value="36 pt">
<input type="text" value="Auto">
<div class="box">
<div class="leftAlign"></div>
</div>
<div class="box">
<div class="centerAlign"></div>
</div>
<div class="box">
<div class="rightAlign"></div>
</div>
<div>
<div class="circle"></div>
</div>
</div>
<div class="bottomBar">
<textarea name="" id="" cols="30" rows="6" placeholder="Type logo text here"></textarea>
</div>
</div>
<div class="container_2">
<div class="flexContainer">
<div class="iconBox mg-5">
<div>
<div class="plus"></div>
</div>
</div>
<div class="iconBox mg-5 ">
<div>
<div class="plus"></div>
</div>
</div>
</div>
<div class="flexContainer">
<div class="iconBox mg-5">
<div>
<div class="plus"></div>
</div>
</div>
<div class="iconBox mg-5">
<div>
<div class="plus"></div>
</div>
</div>
</div>
</div>
<div class="container_3">
<div class="mg-10 box">
<div class="logoUp"></div>
</div>
<div class="mg-10 box">
<div class="logoLeft"></div>
</div>
<div class="mg-10 box">
<div class="logoRight"></div>
</div>
<div class="mg-10 box">
<div class="logoDown"></div>
</div>
</div>
</div>
</body>
In your CSS file, add width to 40%.
I think it will correct your problem.
.pd-10 {
padding: 10px;
width: 40%;
}
Related
I am trying to place the top right of the div element friend_info to the top left of the button friend_button.
I have tried to use the code from https://javascript.info/coordinates#element-coordinates-getboundingclientrect but to no avail and I also tried to use this code:
var friend_button = document.getElementById("friend-button");
var friend_info = document.getElementById("friend_info");
friend_button.addEventListener("mouseover", function(){
var coords = friend_button.getBoundingClientRect();
var coordsOfInfo = $('.friend_info').width();
var subtractWidth = coords.left-coordsOfInfo;
friend_info.style.left = subtractWidth+"px";
friend_info.style.top = coords.top + "px";
friend_info.style.display = "block";
> });
friend_button.addEventListener("mouseout", function(){
friend_info.style.display = "none";
> });
but the div element disdplays in the middle of the button instead of the left hand side. Here is the html and css for the code I am working on.
HTML:
<html>
<head>
<title>Home</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" href="test.css">
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
</head>
<body>
<div class="header">
<h1 class="Search_Media">Search Media</h1>
<div class="navigationbar">
<form>
<input type="text" placeholder="Search...">
<input type="submit" value="Search">
</form>
</div>
</div>
<br />
<div class="middle">
<div class="headings">
<a class="active" href="Main_Page.html">Home</a>
Messages
Friends
User page
</div>
<div class="friends">
<h2>Friends</h2>
<button type="button" class="friend-button" id="friend-button">
<div class="media">
<img src="default-pic.png" class="mr-3" alt="Default Picture" width="50" height="50">
</div>
<div class="media-body">
<h5 class="mt-0">Friend1</h5>
<p>status: active</p>
</div>
</button>
<div class="friend_info" id="friend_info">
<video autoplay muted loop class="backgroundInfo">
<source src="Background.mp4" type="video/mp4">
</video>
<div class="d-flex">
<img src="default-pic.png" class="profile-picture" alt="Default Picture" width="200" height="200">
<div class="d-flex flex-column">
<div class="p-2">
<h1 class="Friend_Name">Friend1</h1>
</div>
<div class="p-1">
<h5>status: active</h5>
</div>
<div class="p-5">
<p class="info">Phone Number: 07914836605</p>
<p class="info">Name: Joe</p>
<p class="info">Surname: Smith</p>
<p class="info">Gender: Male</p>
<p class="info">Date of birth: 14/02/2003</p>
</div>
</div>
</div>
</div>
</div>
<div class="middle-grid">
<div class="user-post">
Create post:<br>
<form>
<textarea id="create_post" rows="10" cols = "50"></textarea><br>
<input type="submit" class="post-button" value="Post">
</form>
</div>
<div class="posts">
<div class="post">
<h3 id="existing_posts"><img src="default-pic.png" class="profile-pic" alt="Default Picture" width="50" height="50">Posts</h3>
<p>This is an example of a post. It will need to be boxed and made so that the name of the user goes above
the name of the likes and dislikes of the posts are to the left of the post and that the reply and report
functionalities are at the bottom right of the posts. It will also need a box around it to show where the post starts and ends.</p>
<div class="options">
Like
Comment
Report
</div>
</div>
</div>
</div>
</div>
<div class="bottom">
<button onclick="topFunction()" id="myBtn" title="Go To Top">Top</button>
</div>
<script src="Main_Page.js"></script>
</body>
</html>
CSS:
body{
background-color: black;
color: white;
}
.Search_Media{
position: fixed;
top: 0px;
left: 0%;
padding: 10px;
width: 100%;
background-color: aqua;
z-index: 0;
color: black;
margin-top: 0px;
}
.Search-media{
text-decoration: none;
color: black;
}
.Search-media:hover{
text-decoration: none;
color: black;
}
.navigationbar{
background-color: aqua;
width: auto;
position: fixed;
padding-top:15px;
left: 50%;
margin-left: -88.5px;
color: black;
}
.headings{
left:20.17%;
height: 100;
width: 200;
position: fixed;
margin-top: 40px;
background-color: black;
}
.headings a{
padding: 6px 0px 6px 0px;
text-decoration: none;
font-size: 20px;
color: white;
display: block;
}
.headings a:hover{
color: black;
background-color: aqua;
}
.headings a.active{
background-color: aqua;
color: black;
}
.friend-button{
width: 90%;
margin-bottom: 1px;
background-color: black;
color: white;
cursor: pointer;
border-radius: 5px;
}
.friend-button:hover{
background-color: aqua;
color: black;
}
.middle{
display: flex;
flex-direction: row;
justify-content: space-evenly;
padding: 10px;
margin: 0% auto;
width: 75%;
height: auto;
text-align: center;
}
.middle-grid{
border-right: 1px solid white;
border-left: 1px solid white;
padding-top: 37px;
width: 50%;
}
.user-post{
width: auto;
margin: 0% auto;
}
.post-button{
margin: 0% auto;
color: black;
padding-right: 50;
padding-left: 50;
padding-top: 5;
padding-bottom: 5;
}
textarea{
resize: none;
color: black;
}
h3{
margin-top: 5px;
margin-bottom: 1px;
}
.posts{
width:75%;
text-align: left;
padding:10px;
margin-left: auto;
margin-right:auto;
}
.post{
padding-bottom: 20px;
}
.post:nth-child(odd){
color: black;
background-color: lightblue;
z-index: 2;
}
.post p{
margin-top: 5px;
}
.options{
float: right;
}
.options .report{
color: red;
}
h2{
margin-top: auto;
margin-bottom: auto;
}
.friends{
position: fixed;
right: 10%;
margin-top: 70px;
padding: 0px;
margin-bottom: auto;
border: 1px solid white;
width: 15%;
overflow-y: scroll;
top: 0;
bottom: 0;
}
.media-body{
text-align: left;
}
h5{
font-size: 20;
margin-bottom: 2px;
}
#myBtn {
display: none;
position: fixed;
top: 95%;
left: 50%;
margin: 0% auto;
transform: translate(-50%, -50%);
z-index: 99;
border: none;
outline: none;
background-color: red;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 10px;
font-size: 18px;
}
#myBtn:hover {
background-color: darkred;
}
.friend_info{
display: none;
position: fixed;
width: 20vw;
height: 20vh;
text-align: center;
left: 0px;
right:0px;
top: 0px;
}
.backgroundInfo{
position: inherit;
z-index: -99;
max-width: 800px;
max-height: 600px;
left: inherit;
top: inherit;
}
.d-flex{
color: white;
}
.Friend_Name{
padding: 0px;
margin: 0px;
font-size: 60px;
}
h5{
font-size: 30px;
}
.info{
font-size: 20px;
}
.p-5{
border: 0%;
width: auto;
height: 0px;
bottom: 0px;
left: 0px;
top: 0px;
border-width: 0px;
padding: 2rem !important;
}
I had the correct idea, but wrong execution. The correct javascript is the following:
var friend_button = document.getElementById("friend-button");
var friend_info = document.getElementById("friend_info");
friend_button.addEventListener("mouseover", function(){
var coords = friend_button.getBoundingClientRect();
var coordsOfInfo = $('.backgroundInfo').width();
var subtractWidth = coords.left-coordsOfInfo;
friend_info.style.left = subtractWidth+"px";
friend_info.style.top = coords.top + "px";
friend_info.style.display = "block";
});
friend_button.addEventListener("mouseout", function(){
friend_info.style.display = "none";
});
Notice how I changed which element I got the width off. I changed it to the backgroud width and now displays just how I want.
So I have been following this youtube tutorial on how to create a login/sign up form and I've run into a problem. Whilst coding the JS, I tried testing out the continue button without any values submitted into the input groups, and nothing happened. So I went to check the console and I was met with this error message, "Uncaught TypeError: Cannot set property 'textContent' of null". The error occurs around the 'messageElement.textContent = message;' area. Any help would be greatly appreciated.
function setFormMessage(formElement, type, message) {
const messageElement = formElement.querySelector(".form__message");
messageElement.textContent = message;
messageElement.classList.remove("form__message--success", "form__message--error");
messageElement.classList.add(`form__message--${type}`);
}
function setInputError(inputElement, message) {
inputElement.classList.add("form__input--error");
inputElement.parentElement.querySelector(".form__input-error-message").textContent = message;
}
function clearInputError(inputElement) {
inputElement.classList.remove("form__input--error");
inputElement.parentElement.querySelector(".form__input-error-message").textContent = "";
}
document.addEventListener("DOMContentLoaded", () => {
const loginForm = document.querySelector("#login");
const createAccountForm = document.querySelector("#createAccount");
document.querySelector("#linkCreateAccount").addEventListener("click", e => {
e.preventDefault();
loginForm.classList.add("form--hidden");
createAccountForm.classList.remove("form--hidden");
});
document.querySelector("#linkLogin").addEventListener("click", e => {
e.preventDefault();
loginForm.classList.remove("form--hidden");
createAccountForm.classList.add("form--hidden");
});
loginForm.addEventListener("submit", e => {
e.preventDefault();
// Perform your AJAX/Fetch login
setFormMessage(loginForm, "error", "Invalid username/password combination");
});
document.querySelectorAll(".form__input").forEach(inputElement => {
inputElement.addEventListener("blur", e => {
if (e.target.id === "signupUsername" && e.target.value.length > 0 && e.target.value.length < 10) {
setInputError(inputElement, "Username must be at least 10 characters in length");
}
});
inputElement.addEventListener("input", () => {
clearInputError(inputElement);
});
});
});
#import url('https://fonts.googleapis.com/css2?family=Belleza&display=swap') * {
box-sizing: border-box;
}
/*Navugation Bar*/
nav {
z-index: 1;
height: 120px;
background: black;
box-shadow: grey;
overflow: hidden;
background-color: black;
position: sticky;
top: 0;
width: 100%;
}
nav ul {
float: centre;
text-align: center;
}
nav ul li {
display: inline-block;
line-height: 0px;
margin: 0px 15px;
padding: 30px;
}
nav ul li a {
position: sticky;
color: grey;
font-size: 20px;
text-transform: uppercase;
padding: 50px;
text-decoration: none;
width: 100px;
}
nav ul li a:hover {
color: white;
font-size: 30px
}
/*Home Page*/
.header-image {
padding: 0px;
position: sticky;
text-align: center;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
margin-top: auto;
width: 100%;
background-color: black;
height: 290px
}
#Home-page {
font-size: 2em;
margin: 0;
margin-bottom: 250px;
background: url(About\ Page\ Background.png)no-repeat;
background-position: center;
background-size: cover;
}
.first-container {
height: 75hv;
background: rgb(0, 0, 0, .7);
border: white 10px solid;
color: grey;
padding: 50px;
margin-top: 20%;
margin-bottom: 30%;
}
.first-container-h1 {
color: white;
text-align: center;
font-size: 4em;
border-bottom: 20px solid white;
}
.first-container-h2 {
color: white;
text-align: center;
font-size: 4em;
}
#second-container-main {
width: 80%;
margin: auto;
min-width: 460px;
margin-top: 5%;
margin-bottom: 10%;
}
.second-container-title {
background: white;
text-align: center;
font-size: 40px;
height: 6pc;
line-height: 90px;
}
.second-container {
height: 75hv;
background: rgb(0, 0, 0, .7);
border: white 2px solid;
color: grey;
padding: 50px;
font-size: 20px;
}
.second-container:hover {
font-size: 1em;
color: white;
}
.logo {
float: center;
width: 20%;
float: center;
text-align: center;
color: white;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
background-color: black;
height: 100px;
border: none
}
/* Footer*/
.footer-wrapper {
width: 100%;
margin: 0 auto;
display: block;
}
footer {
width: 100%;
height: 300px;
float: right;
text-align: center;
position: relative;
bottom: 0;
background-color: black;
}
/*About Page*/
.About-me-page-header {
font-size: 1em;
margin: 0;
background-position: center;
background-size: cover;
background-color: grey;
position: relative;
text-align: left;
padding-top: 50px;
padding-left: 50px;
height: 400px;
border: white 10px solid;
background-color: rgb(0, 0, 0, .7);
color: white;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
}
#About-page {
font-size: 1em;
margin: 0;
margin-bottom: 250px;
background: url(About\ Page\ Background.png)no-repeat;
background-position: center;
background-size: cover;
}
#About-page-main {
width: 80%;
margin: auto;
min-width: 460px;
margin-top: 5%;
margin-bottom: 10%;
}
.About-page-container {
height: 75hv;
background: rgb(0, 0, 0, .7);
border: white 2px solid;
color: grey;
padding: 50px;
font-size: 1em;
}
.About-page-container:hover {
font-size: 30px;
color: white;
}
.about-page-title {
background: white;
text-align: center;
font-size: 40px;
height: 6pc;
line-height: 90px;
}
.AB-container-h {
color: white;
text-align: center;
}
/* Resources*/
.R-first-container {
height: 75hv;
background: rgb(0, 0, 0, .7);
border: white 10px solid;
color: grey;
padding: 50px;
margin-top: 20%;
margin-bottom: 30%;
}
.R-first-container-h1 {
color: white;
text-align: center;
font-size: 4em;
}
/*Login Page*/
.About-me-page-header {
font-size: 1em;
margin: 0;
background-position: center;
background-size: cover;
background-color: grey;
position: relative;
text-align: left;
padding-top: 50px;
padding-left: 50px;
height: 400px;
border: white 10px solid;
background-color: rgb(0, 0, 0, .7);
color: white
}
#About-page {
font-size: 1em;
margin: 0;
margin-bottom: 250px;
background: url(About\ Page\ Background.png)no-repeat;
background-position: center;
background-size: cover;
}
#About-page-main {
margin: auto;
min-width: 460px;
margin-top: 5%;
margin-bottom: 10%;
}
/* Login in and Sign Up Form*/
#Login-page {
font-size: 2em;
margin: 0;
margin-bottom: 250px;
background: url(About\ Page\ Background.png)no-repeat;
background-position: center;
background-size: cover;
}
#Login-page-main {
--color-primary-dark: #009579;
--color-primary-dark: #007f67;
--color-secondary: #252c6a;
--color-primary-dark: #cc3333;
--color-success: #4bb544;
--color-error: red;
border-radius: 4px;
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.container {
max-width: 400px;
margin: 2rem;
padding: 5rem;
box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);
border-radius: var(--border-radius);
background-color: rgba(0, 0, 0, .7);
color: white;
border: 3px solid white;
width: 1000px
}
.form--hidden {
display: none
}
.form>*:firstchild {
margin-top: 0;
}
.form>*:lastchild {
margin-bottom: 0;
}
.form__title {
margin-bottom: 2rem;
text-align: center;
font-size: 3rem;
}
.form__message {
margin-bottom: 1rem;
}
.form__message--success {
color: var(--color-success);
}
.form__message--error {
text-align: center;
color: var(--color-error);
}
.form__input-group {
margin-bottom: 2rem;
}
input,
select,
textarea {
color: white;
}
.form__input-error-message {
color: var(--color-error);
border-bottom: var(--color-error)
}
.form__input-error-message {
margin-top: 2rem;
font-size: 1.5rem;
color: var(--color-error);
}
.form__button {
width: 100%;
padding: 1rem 2rem;
font-weight: bold;
font-size: 1.1rem;
color: white;
background-color: rgb(0, 0, 0, .7);
outline: none;
cursor: pointer;
border: none;
border-radius: 20px
}
.form__button:hover {
background-color: white;
color: black
}
.form__button:active {
transform: scale(0.98)
}
.form__text {
font-size: 20px;
text-align: center;
cursor: pointer;
}
.form-text,
.form-textarea {
border-style: none;
}
.form__link {
text-decoration: none;
color: white
}
.form__link:hover {
text-decoration: underline;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Clarte Mentale - Login</title>
<link rel="stylesheet" href="Style.css" />
</head>
<body id="Login-page">
<div class="header-image">
<a href="Home.html">
<img src="Website Header.png">
</a>
</div>
<nav>
<ul>
<li>Welcome</li>
<li>About</li>
<li>Resources</li>
<li>Login</li>
</ul>
</nav>
<div class="About-me-page-header">
<h1 style="font-size:48px">Login Page</h1>
<p style="font-size:35px">
Contents:
</p>
<ul style="font-size:25px">
<li>Login</li>
<li>Sign Up</li>
</ul>
</div>
<main id="Login-page-main">
<div class="container">
<div class="form-container">
<!-- Login FormUp Form-->
<form class="form" id="login">
<h1 class="form__title">Login</h1>
<div class="form__messsage form__message--error"></div>
<div class="form__input-group">
<input type="text" class="form__input" autofocus placeholder="Username or Email" input style="height:30px;font-size:14pt; border:none; border-bottom: 4px solid black; background-color: rgba(0,0,0,0); width:100%;">
<div class="form__input-error-message"></div>
</div>
<div class="form__input-group">
<input type="password" class="form__input" autofocus placeholder="Password" style="height:30px;font-size:14pt; border:none; border-bottom: 4px solid black; background-color: rgba(0,0,0,0); width: 100%">
<div class="form__input-error-message"></div>
</div>
<button class="form__button" type="submit">Continue</button>
<p class="form__text" style="margin-top: 35px;">
<a class="form__link" id="linkCreateAccount">Don't have an account? Create account</a>
</p>
</form>
<!-- Sign Up Form-->
<form class="form form--hidden" id="createAccount">
<h1 class="form__title">Create Account</h1>
<div class="form__messsage form__message--error"></div>
<div class="form__input-group">
<input type="text" class="form__input" autofocus placeholder="Username" input style="height:30px;font-size:14pt; border:none; border-bottom: 4px solid black; background-color: rgba(0,0,0,0); width:100%;">
<div class="form__input-error-message"></div>
</div>
<div class="form__input-group">
<input type="text" class="form__input" autofocus placeholder="Email" input style="height:30px;font-size:14pt; border:none; border-bottom: 4px solid black; background-color: rgba(0,0,0,0); width:100%;">
<div class="form__input-error-message"></div>
</div>
<div class="form__input-group">
<input type="password" class="form__input" autofocus placeholder="Password" style="height:30px;font-size:14pt; border:none; border-bottom: 4px solid black; background-color: rgba(0,0,0,0); width: 100%">
<div class="form__input-error-message"></div>
</div>
<div class="form__input-group">
<input type="password" class="form__input" autofocus placeholder="Confirm password" style="height:30px;font-size:14pt; border:none; border-bottom: 4px solid black; background-color: rgba(0,0,0,0); width: 100%">
<div class="form__input-error-message"></div>
</div>
<button class="form__button" type="submit">Continue</button>
<p class="form__text" style="margin-top: 35px;">
<a class="form__link" id="linkLogin">Already have an account? Sign</a>
</p>
</form>
</main>
<footer>
<button class="logo" class="footer-wrapper" onclick="topFunction()" id="myBtn" title="Go to top">
<img src="Logo.png">
</button>
</footer>
<script src="Javascript.js"></script>
<script src="Login.js"></script>
</body>
</html>
You have <div class="form__messsage ... "> instead of <div class="form__message ... ">. Fixing that should work. GL.
Try and replace DomContentLoaded with load
HTML
I need help, so I have this button (has no text yet) and when its hovered, a css zoom happens with transitions, however the text below it has to move. When this happens it leaves behind this weird trail. Surprisingly it does not show in the code snippet insert tool.
Video:
https://youtu.be/-gh7mJxFz8o
//Game List
console.log(document.getElementById('close3').style.display);
function showGameList(){
document.getElementById("gameList").style.display= "block";
document.getElementById("close1").style.display = "none";
document.getElementById("close2").style.display = "none";
document.getElementById("close3").style.display = "none";
}
function closeGameList(){
document.getElementById("gameList").style.display= "none";
document.getElementById("close1").style.display = "block";
document.getElementById("close2").style.display = "block";
document.getElementById("close3").style.display = "inline";
}
/*fonts*/
#import url('https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap');
/*general*/
html{
max-width: 100vw;
min-width: 100vw;
width: 100vw;
overflow-x: hidden;
height: auto;
}
body{
width: 100%;
min-height: 100vh;
height: auto;
background-color: black;
color: white;
text-decoration: none;
padding: 0;
font-family: 'Josefin Sans', sans-serif;
margin: 0;
}
/*Navbar*/
#nav{
width: 100%;
background-color: black;
position: fixed;
border-bottom: 5px solid gold;
top: 0%;
padding: none;
}
#navLink{
text-decoration: none;
display: inline-block;
width: 22%;
padding: 1%;
transition: 0.5s;
text-align: center;
color: white;
}
#navLink:hover{
background-color: gold;
color: black;
}
#navLinkActive{
text-decoration: none;
display: inline-block;
width: 22.5%;
padding: 1%;
transition: 0.5s;
text-align: center;
color: black;
background-color: gold;
}
/*Home page*/
#page{
height: auto;
width: auto;
text-align: center;
}
.joinButton{
background-color: rgba(0,0,0,0.5);
border: 5px solid gold;
color: white;
padding: 20px;
text-align: center;
border-radius: 15px;
transition: 0.5s;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
}
.joinButton:hover{
background-color: rgba(255,215,0,0.5);
zoom: 1.25;
}
#homePageBody{
height: 40vh;
padding-top: 15vh;
padding-bottom: 15vh;
}
#homePageBodySpecial{
height: auto;
padding-top: 15vh;
padding-bottom: 15vh;
}
#homePageBody p{
font-size: 20px;
}
.homePageBody1{
padding-top: 15vh;
margin-top: 5vh;
background-repeat: none;
background-size: cover;
background-position: center;
background: linear-gradient( rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) ), url('assets/images/backgrounds/background1.png');
}
.homePageBody2{
margin-top: 1vh;
height: auto;
min-height: 40vh;
background-repeat: none;
background-position: center;
background-size: cover;
background: linear-gradient( rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) ), url('assets/images/backgrounds/background2.png');
}
/* Game List */
#gameList{
display: none;
border: 5px solid gold;
border-radius: 5%;
width: 40vw;
padding:2.5vw;
margin-left: auto;
margin-right: auto;
background-color: rgba(0,0,0,0.5);
transition: 1s;
margin-bottom: 40px;
}
#gameListItem{
width: 30%;
display: inline-block;
height: auto;
}
#gameListItemImg{
width: 30%;
}
#closeButtonSmall{
width: 30px;
border-radius: 50%;
border:none;
text-align: center;
top: 2.5%;
right: 2.5%;
position: relative;
background-color: transparent;
color: white;
}
#gameListItemFullWidth{
width: 100%;
}
#counter1{
}
/*Animations*/
<!DOCTYPE html>
<html>
<head>
<title>AUG</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<!-- Navbar -->
<div id="nav">
<div id="navItemActive">Home</div>
<div id="navItem">About</div>
<div id="navItem">Join</div>
<div id="navItem">User Center</div>
</div>
<!-- Main Body -->
<div id="page">
<div id="homePageBody" class="homePageBody1">
<h1>Aussie Games</h1><br>
<p>Description</p>
<button class="joinButton"></button><br>
<h2>Current Member Count</h2>
<h3>28</h3>
</div>
<div id="homePageBodySpecial" class="homePageBody2">
<h2 id="close1">What we offer</h2><br>
<p id="close2">We offer great, inclusive communities, and competent staff for many of the games you know.</p>
<button id="close3" class="joinButton" onclick="showGameList()">What do we offer</button>
<div id="gameList" onclick="closeGameList()">
<div id="gameListItemFullWidth"><p>Click window to close</p></div>
<div id="gameListItem">
<img id="gameListItemImg" src="assets/images/gameIcons/FL.png">
<p>Flashing Lights</p>
</div>
<div id="gameListItem">
<img id="gameListItemImg" src="assets/images/gameIcons/GM.png">
<p>Garry's Mod</p>
</div>
<div id="gameListItem">
<img id="gameListItemImg" src="assets/images/gameIcons/IF.png">
<p>Infinite Flight</p>
</div>
<div id="gameListItem">
<img id="gameListItemImg" src="assets/images/gameIcons/KSP.png">
<p>Kerbal Space Program</p>
</div>
<div id="gameListItem">
<img id="gameListItemImg" src="assets/images/gameIcons/MC.png">
<p>Minecraft</p>
</div>
<div id="gameListItem">
<img id="gameListItemImg" src="assets/images/gameIcons/P2.png">
<p>Payday 2</p>
</div>
<div id="gameListItem">
<img id="gameListItemImg" src="assets/images/gameIcons/RB.png">
<p>Roblox</p>
</div>
<div id="gameListItem">
<img id="gameListItemImg" src="assets/images/gameIcons/SM.png">
<p>Surving Mars</p>
</div>
<div id="gameListItem">
<img id="gameListItemImg" src="assets/images/gameIcons/TF.png">
<p>Team Fortress</p>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
I have a static page with 1 HTML and 1 CSS file.
When I test the page and type into the multiline textarea (last one on the page) until the page should overflow, it doesn't. The div with the id of 'centered' has a height of 'fit-content' and inspecting it shows that it does correcty fit the content and does overflow, but the browser doesn't show me a scrollbar. Also scrollBy doesn't work. And it isn't only one browser (Chrome desktop, android; Firefox desktop, android).
Here is index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formr.io</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght#400;600&display=swap" rel="stylesheet">
<!-- Stylesheets -->
<link rel="stylesheet" type="text/css" href="index.css">
<script defer>
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll(".long-answer").forEach((el) => {
let offset = el.offsetHeight - el.clientHeight;
el.addEventListener('input', function (event) {
event.target.style.height = 'auto';
event.target.style.height = event.target.scrollHeight + offset + 'px';
});
});
});
</script>
</head>
<body>
<div id="centered">
<!-- Header -->
<div class="question-container">
<div class="form-header-color-bar"></div>
<div class="form-header-title">Тест върху "Неразделни"</div>
<div class="form-header-desc">Упражнителен тест върху "Неразделни"</div>
</div>
<br>
<!-- Questions -->
<div class="question-container">
<div class="question-title">Име и клас <span style="color: red;">*</span></div>
<br>
<div class="text-answer-container">
<input placeholder="Вашия отговор." class="short-answer" type="text" />
</div>
</div>
<br>
<div class="question-container">
<div class="question-title">Какво мислите за решението на Иво? Прекалил ли е? <span style="color: red;">*</span></div>
<br>
<div class="text-answer-container">
<input placeholder="Вашия отговор." class="short-answer" type="text" />
</div>
</div>
<br>
<div class="question-container">
<div class="question-title">Теза: "Той ме прегърнал с клони, аз съм в него вейки свряла." <span style="color: red;">*</span></div>
<br>
<div class="text-answer-container">
<textarea placeholder="Вашия отговор." class="long-answer"></textarea>
</div>
</div>
</div>
</body>
</html>
And here is index.css:
:root {
--main-color: #d08aff;
/*--background-color: #f8edff;*/
--background-color: rgb(240, 235, 248);
}
body {
background-color: var(--background-color);
margin: 0px;
}
#centered {
margin-top: 15px;
position: fixed;
transform: translate(-50%, 0%);
left: 50%;
width: 90%;
height: fit-content;
min-width: 100px;
max-width: 600px;
}
.question-container {
background-color: white;
padding: 0px 0px 15px 0px;
border-radius: 13px;
border: 1px solid #e6e3e8;
width: 100%;
height: fit-content;
}
.question-container .form-header-title {
font-family: 'Source Sans Pro', sans-serif;
word-break: break-all;
font-size: 24pt;
text-align: left;
margin-left: 15px;
margin-top: 10px;
margin-bottom: 0px;
}
.question-container .form-header-desc {
font-family: 'Source Sans Pro', sans-serif;
font-size: 10.5pt;
text-align: left;
margin-left: 15px;
margin-top: 10px;
margin-bottom: 0px;
word-break: break-all;
}
.question-container .form-header-color-bar {
margin: 0px;
width: 100%;
height: 15px;
background-color: var(--main-color);
border-radius: 13px 13px 0px 0px;
}
.question-container .question-title {
font-family: 'Source Sans Pro', sans-serif;
font-size: 14pt;
text-align: left;
margin-left: 15px;
margin-top: 10px;
margin-bottom: 0px;
word-break: break-all;
}
.question-container .text-answer-container .short-answer {
font-family: 'Source Sans Pro', sans-serif;
padding-left: 7px;
padding-right: 7px;
border: 1px solid var(--main-color);
border-radius: 7px;
height: 25px;
min-width: 91px;
max-width: 300px;
width: calc(100% - 14px);
}
.question-container .text-answer-container .short-answer:focus {
transition: 0.2s;
outline: none;
box-shadow: 0px 0px 5px 1px var(--main-color);
}
.text-answer-container {
margin-left: 15px;
margin-right: 15px;
}
.question-container .text-answer-container .long-answer {
font-family: 'Source Sans Pro', sans-serif;
padding-left: 7px;
padding-right: 7px;
border: 1px solid var(--main-color);
border-radius: 7px;
min-width: 91px;
max-width: 300px;
width: calc(100% - 14px);
resize: none;
overflow: hidden;
}
.question-container .text-answer-container .long-answer:focus {
transition: 0.2s;
outline: none;
box-shadow: 0px 0px 5px 1px var(--main-color);
}
Thanks for your time.
If the div is fixed it can't scroll.
Try this:
#centered {
position: absolute;
}
instead of
#centered {
position: fixed;
}
I am trying to place a div(id="testDiv") inside of a div that slides down from the top using jQuery .slideToggle(). Presently, the div inside the sliding div does not appear at all. Here are some pictures to explain what I mean:
You can run this here, but this is a link to a Plunker with my code just in case:
https://plnkr.co/edit/fxulzV76HJ0APP0wqZkD?p=info
Here is the code:
(function($){
$(document).ready(function(){
$('.selector').click(function () {
$('.dropDown').slideToggle(300);
});
$("#infoButton").click(function(){
$('#infoDiv').slideToggle(300);
});
$("#searchButton").click(function(){
$('#searchDiv').slideToggle(300);
});
});
})(jQuery);
body{
margin:0;
padding: 0;
}
.dropDown{
padding: 10px;
background: black;
display: none;
position: relative;
width: 70%;
height: 70px;
margin: 0 auto;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
color: white;
box-shadow: 2px 2px 10px rgb(51, 51, 51);
clear: both;
z-index: 100;
}
.selector{
text-align: center;
position: absolute;
transform: scaleX(1.5);
padding: 4px;
left: 49%;
background-image: -moz-linear-gradient(center top , rgb(219, 79, 0), rgb(255, 185, 95));
box-shadow: 2px 2px 10px rgb(51, 51, 51);
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
cursor: pointer;
width: 24px;
height: 24px;
color: white;
z-index: 100;
}
#leftDrop {
float: left;
text-align: center;
width: 33%;
margin-top: 20px;
}
#rightDrop {
float: right;
text-align: center;
width: 33%;
margin-top: 20px;
}
#centerDrop {
margin: 0 auto;
text-align: center;
width: 33%;
}
.dropButtonLeft {
transform: scale(1.6,1.6);
padding: 8px;
margin-left: 25px;
margin-top: -6px;
float: left;
cursor: pointer;
}
.dropButtonRight {
transform: scale(1.6,1.6);
padding: 8px;
margin-right: 25px;
margin-top: -6px;
float: right;
cursor: pointer;
}
.dropdowns div {
display: inline-block;
padding: 10px;
background-color: rgba(34, 34, 34, 0.8);
display: none;
position: relative;
width: 20%;
height: 18%;
margin-left: 16%;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
color: white;
box-shadow: 2px 2px 10px rgb(51, 51, 51);
z-index: 100;
text-align: center;
padding-left: 1%;
}
#infoDiv {
float: left;
margin-left: 17%;
}
#searchDiv {
float: right;
margin-right: 17%;
height: 200px;
}
#testDiv {
width: 100px;
height: 100px;
background: yellow;
color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class = 'dropDown'>
<div id = 'leftDrop'>
<button type="button" id="infoButton">Click Me!</button>
</div>
<div id = 'rightDrop'>
<button type="button" id="searchButton">Click Me!</button>
</div>
<div id = 'centerDrop'>
</div>
</div>
<div class='selector'>
<span id="dropArrow" class="glyphicon glyphicon-arrow-down" aria-hidden="true"></span>
</div>
<div class="dropdowns">
<div id="infoDiv">
</div>
<div id="searchDiv">
<div id="testDiv">
<br>
<p>testDiv</p>
</div>
</div>
</div>
<script src="jquery-1.11.0.min.js"></script>
<script src="jquery-ui.js"></script>
<script src="script.js"></script>
</body>
</html>
Set display: block or display:inherit; on your #test div CSS
(function($){
$(document).ready(function(){
$('.selector').click(function () {
$('.dropDown').slideToggle(300);
});
$("#infoButton").click(function(){
$('#infoDiv').slideToggle(300);
});
$("#searchButton").click(function(){
$('#searchDiv').slideToggle(300);
});
});
})(jQuery);
body{
margin:0;
padding: 0;
}
.dropDown{
padding: 10px;
background: black;
display: none;
position: relative;
width: 70%;
height: 70px;
margin: 0 auto;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
color: white;
box-shadow: 2px 2px 10px rgb(51, 51, 51);
clear: both;
z-index: 100;
}
.selector{
text-align: center;
position: absolute;
transform: scaleX(1.5);
padding: 4px;
left: 49%;
background-image: -moz-linear-gradient(center top , rgb(219, 79, 0), rgb(255, 185, 95));
box-shadow: 2px 2px 10px rgb(51, 51, 51);
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
cursor: pointer;
width: 24px;
height: 24px;
color: white;
z-index: 100;
}
#leftDrop {
float: left;
text-align: center;
width: 33%;
margin-top: 20px;
}
#rightDrop {
float: right;
text-align: center;
width: 33%;
margin-top: 20px;
}
#centerDrop {
margin: 0 auto;
text-align: center;
width: 33%;
}
.dropButtonLeft {
transform: scale(1.6,1.6);
padding: 8px;
margin-left: 25px;
margin-top: -6px;
float: left;
cursor: pointer;
}
.dropButtonRight {
transform: scale(1.6,1.6);
padding: 8px;
margin-right: 25px;
margin-top: -6px;
float: right;
cursor: pointer;
}
.dropdowns div {
display: inline-block;
padding: 10px;
background-color: rgba(34, 34, 34, 0.8);
display: none;
position: relative;
width: 20%;
height: 18%;
margin-left: 16%;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
color: white;
box-shadow: 2px 2px 10px rgb(51, 51, 51);
z-index: 100;
text-align: center;
padding-left: 1%;
}
#infoDiv {
float: left;
margin-left: 17%;
}
#searchDiv {
float: right;
margin-right: 17%;
height: 200px;
}
#testDiv {
width: 100px;
height: 100px;
background: yellow;
color: black;
display:inherit;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class = 'dropDown'>
<div id = 'leftDrop'>
<button type="button" id="infoButton">Click Me!</button>
</div>
<div id = 'rightDrop'>
<button type="button" id="searchButton">Click Me!</button>
</div>
<div id = 'centerDrop'>
</div>
</div>
<div class='selector'>
<span id="dropArrow" class="glyphicon glyphicon-arrow-down" aria-hidden="true"></span>
</div>
<div class="dropdowns">
<div id="infoDiv">
</div>
<div id="searchDiv">
<div id="testDiv">
<br>
<p>testDiv</p>
</div>
</div>
</div>
<script src="jquery-1.11.0.min.js"></script>
<script src="jquery-ui.js"></script>
<script src="script.js"></script>
</body>
</html>
Set display: block; for #testDiv
Your .dropdowns div are hidden
#testDiv is set to display: none;
Update the styles for that div
#testDiv {
display: block;
}