first question here so please be kind! I am designing a website and I've been asked to frame pictures in sine-like borders. So far I've gotten around to it by creating a container div with 3 divs: the first for the downward bend, the second is just straight (I'm considering the idea of removing it later on) and the third one does the upward bend.
Here's a screenshot of the current state
So this is the the current code:
.border {
overflow: hidden;
align-items: center;
height: auto;
width: 100%;
display: flex;
}
.bord1 {
margin-top: 4vh;
height: 4vh;
flex: 1;
border-top: solid 5px;
border-color: #e4ae03 rgba(0, 0, 0, 0) transparent transparent;
border-radius: 100% 0 0 0;
z-index: 999;
}
.bord2 {
margin-top: 4vh;
flex: 1;
display: inline;
height: 4vh;
border-top: 5px solid #e4ae03;
}
.bord3 {
margin-top: -4vh;
flex: 1;
height: 4vh;
display: block;
border-bottom: 5px solid;
border-color: transparent transparent #e4ae03 transparent;
border-radius: 0 0 100% 0;
}
<div class="border">
<div class="bord1 top top-bord"></div>
<div class="bord2 top top-bord"></div>
<div class="bord3 bottom"></div>
</div>
I'm really trying to figure out how to get the last segment white, as it's created by rounding the bottom right corner, so the white background would have to be "outside" the div.
I know this might be a stupid question, but here it is! Thanks!
*Edit: Sorry everyone, here is an image of what I'm trying to do]2
It would need minor adjustments to the spacing, but something along these lines? (I used black/white backgrounds to show the sections, but these could be swapped or even made transparent.
body{background-color:black;}
.border{
overflow: hidden;
align-items: center;
height: auto;
width: 100%;
display: flex;
background-color:white;
}
.bord1{
margin-top: 4vh;
height: 4vh;
flex:1;
border-top: solid 5px;
border-color:#e4ae03 rgba(0,0,0,0) transparent transparent;
border-radius: 100% 0 0 0;
z-index: 999;
background-color:black;
}
.bord2 {
margin-top: 4vh;
flex: 1;
display: inline;
height: 4vh;
border-top: 5px solid #e4ae03;
background-color:black;
}
.bord3{
border-bottom: 5px solid;
border-color: transparent transparent #e4ae03 transparent;
border-radius: 0 0 100% 0;
background-color:white;
height:4vh;
}
.bord3-layer{
flex: 1;
height: 9vh;
display: block;
background-color:black;
}
<!DOCTYPE html>
<HTML>
<head>
<style>
</style>
</head>
<body>
<div class="border">
<div class="bord1 top top-bord"></div>
<div class="bord2 top top-bord"></div>
<div class="bord3-layer">
<div class="bord3 bottom"></div>
</div>
</div>
</body>
</HTML>
Ok, in the end I was able to fix the layout using a system of inner divs, here is how I handled it:
.container {
line-height: 1.5rem;
margin-top: -5vh;
padding: 0px 0px 0px;
padding-top: 5vh;
padding-bottom: 0px;
z-index: 0;
color: #b3b5b3;
background: -webkit-linear-gradient(left, #1b2716, #000000 80%);
background: -o-linear-gradient(left, #1b2716, #000000 80%);
background: -moz-linear-gradient(left, #1b2716, #000000 80%);
background: linear-gradient(left, #1b2716, #000000 80%);
min-height: 75vh;
}
.top {
box-shadow: inset 0 6px 0 0px #243c51;
}
.bottom {
box-shadow: 0 6px 0 0px #243c51;
}
.border{
overflow: hidden;
align-items: center;
height: auto;
width: 100%;
display: flex;
}
.bord1{
margin-top: 4vh;
height: 4vh;
flex:1;
border-top: solid 5px;
border-color:#e4ae03 rgba(0,0,0,0) transparent transparent;
border-radius: 100% 0 0 0;
z-index: 999;
}
.bord1-bot{
background: white;
}
.bord2 {
margin-top: 4vh;
flex: 1;
display: inline;
height: 4vh;
border-top: 5px solid #e4ae03;
}
.bord2-bot {
background: white;
margin-bottom: 4vh;
flex: 1;
display: inline;
height: 4vh;
border-bottom: 5px solid #e4ae03;
}
.bord3{
flex: 1;
height: 4vh;
display: block;
border-bottom: 5px solid;
border-color: transparent transparent #e4ae03 transparent;
border-radius: 0 0 100% 0;
}
.bord3-top {
margin-top: 0vh;
background: black;
}
.bord3-bot {
margin-top: 0vh;
background: white;
}
.bord3-bottom {
background: white;
}
.bord3-layer-top{
flex:1;
height: 8.5vh;
display: block;
background-color: white;
}
.bord3-layer-bot{
flex:1;
height: 8.5vh;
display: block;
}
.bord1-layer-top{
flex:1;
height: 8.5vh;
display: block;
background-color: white;
}
.bot-bord {
background: -webkit-linear-gradient(left, #1b2716, #000000 240%);
}
.text-con {
padding: 2vw;
z-index: 2;
}
.image-within {
display: block;
background: yellow;
height: 200px;
z-index: 10;
}
.top-bord {
background: white;
}
<div class="container">
<div class="border">
<div class="bord1 top top-bord"></div>
<div class="bord2 top top-bord"></div>
<div class="bord3-layer-top">
<div class="bord3 bottom bord3-top"></div>
</div>
</div>
<div class="image-within">
</div>
<div class="border">
<div class="bord1-layer-top"><div class="bord1 top bot-bord"></div></div>
<div class="bord2-bot bottom"></div>
<div class="bord3-layer-bot">
<div class="bord3 bottom bord3-bot"></div>
</div>
</div>
</div>
The CSS is really messy at the moment, so I'll have to clean it up a bit and work on keeping all the items constantly aligned, but it's looking pretty good right now! Thanks LegendaryJLD!
Related
I've a DIV, with a button inside. Under this DIV, I've a hr, but the hr isn't under the button. I could make the DIV height bigger, but I don't know how high the button is (it depends on the browser). Can I style the DIV, that all things, which are in the code under the DIV, on the website also under the DIV are? I show below my HTML and the CSS code, and a screenshot from the result.
body {
min-height: 100vh;
}
/* centering the div that is supposed to take all content */
#center {
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
#wrapper {
background: rgba(255, 255, 255, 0.1);
border-radius: 50px;
box-shadow: -1px 0px 20px 0px rgba(0, 0, 0, 1);
height: 75vh;
padding: 50px;
width: 75vh;
}
hr {
border-style: none;
border-top: 1px solid black;
}
#output {
display: inline-block;
}
/* make button sit on the right side */
#copy {
float: right;
}
<div id="center">
<div id="wrapper">
<div id="top">
<div id="output"></div>
<div id="copy"><button>kopieren</button></div>
</div>
<hr>
</div>
</div>
Is your problem that you want the hr to be placed under the button? Then, applying a width: 100% to it could be a solution. But it depends on the final result you're looking for.
* {
font-family: sans-serif;
color: white;
}
/* Schriftart (Sansserif), Weiss */
body {
background-image: url(img.jpg);
background-position: center;
background-size: cover;
min-height: 100vh;
}
/* positioning background image */
#center {
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
/* centering the div that is supposed to take all content */
#wrapper {
backdrop-filter: blur(10px);
background: rgba(255, 255, 255, 0.1);
border-radius: 50px;
box-shadow: -1px 0px 20px 0px rgba(0, 0, 0, 1);
height: 75vh;
padding: 50px;
width: 75vh;
}
hr {
border-style: none;
border-top: 1px solid black;
width: 100%;
}
#output {
display: inline-block;
}
#copy {
float: right;
}
/* make button sit on the right side */
button {
background-color: rgb(132, 60, 116);
border: none;
padding: 8px;
border-radius: 10px;
}
<div id="center">
<div id="wrapper">
<div id="top">
<div id="output"></div>
<div id="copy"><button>kopieren</button></div>
</div>
<hr>
</div>
</div>
Just add
#top {
display: flex;
flex-direction: column;
}
Here is the result
* {
font-family: sans-serif;
color: white;
}
/* Schriftart (Sansserif), Weiss */
body {
background-image: url(img.jpg);
background-position: center;
background-size: cover;
min-height: 100vh;
}
/* positioning background image */
#center {
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
/* centering the div that is supposed to take all content */
#wrapper {
backdrop-filter: blur(10px);
background: rgba(255, 255, 255, 0.1);
border-radius: 50px;
box-shadow: -1px 0px 20px 0px rgba(0, 0, 0, 1);
height: 75vh;
padding: 50px;
width: 75vh;
}
hr {
border-style: none;
border-top: 1px solid black;
}
#output {
display: inline-block;
}
#copy {
float: right;
}
/* make button sit on the right side */
button {
background-color: rgb(132, 60, 116);
border: none;
padding: 8px;
border-radius: 10px;
}
#top {
display: flex;
flex-direction: column;
}
<div id="center">
<div id="wrapper">
<div id="top">
<div id="output"></div>
<div id="copy"><button>kopieren</button></div>
</div>
<hr>
</div>
</div>
I'm struggling with a CSS placement problem.
For a project I use clipboard.js to copy the content of a p tag.
In a div, I have my text on the left and a button on the right with an icon to copy the text. The size of the text is dynamic and I cut the text if it exceeds the length of the div.
I'm looking for a :
1 - Align the text vertically (on several lines if the text is too long)
2 - Put the button on the right with a margin on the left.
3 - center the button vertically
I managed to put the text and the button on one line with the display: inline-block property but both the button and the text are not vertically centered.
Here is my code: https://jsfiddle.net/n70jrymp/
See if this is what you looking for, i changed the display: inline-block for flex and centered the content.
#container {
width: 80% !important;
margin-left: 10%;
}
#result{
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.resultItem {
display: flex;
border: 1px solid black;
background: white;
max-width: 100%;
width: 100%;
color: black;
line-height: 100%;
align-items: center;
justify-content: center;
}
.resultItem>p {
display: inline-block;
width: calc(100% - 60px);
overflow-wrap: anywhere;
margin: 0;
}
.resultItem>.clippy {
display: inline-block;
margin-bottom: 0;
width: 40px;
height: 40px;
cursor: pointer;
background-color: #fff;
background-image: url("https://abs.twimg.com/emoji/v1/72x72/1f4cb.png");
/* Twitter clipboard emoji */
background-size: 60% auto;
background-position: center center;
background-repeat: no-repeat;
border: 1px solid rgba(0, 0, 0, 0.29);
border-bottom-color: rgba(0, 0, 0, 0.36);
border-radius: 3px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
}
.clippy:before {
content: '';
display: none;
position: absolute;
z-index: 9998;
top: 35px;
left: 15px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid rgba(0, 0, 0, 0.72);
}
.clippy:after {
content: 'Copy to Clipboard';
display: none;
position: absolute;
z-index: 9999;
top: 40px;
left: -37px;
width: 124px;
height: 36px;
color: #fff;
font-size: 10px;
line-height: 36px;
text-align: center;
background: rgba(0, 0, 0, 0.72);
border-radius: 3px;
}
.clippy:hover {
background-color: #eee;
}
.clippy:hover:before,
.clippy:hover:after {
display: block;
}
.clippy:active,
.clippy:focus {
outline: none;
}
.clippy:active:after,
.clippy:focus:after {
content: 'Copied!';
}
<link rel="stylesheet" href="test.css">
<link rel="stylesheet" href="https://unpkg.com/mustard-ui#latest/dist/css/mustard-ui.min.css">
<div id="container">
<div id="result">
<div class="resultItem" id="test">
<p>My wonderful strzfddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddstrzfddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddstrzfddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddstrzfddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddstrzfddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddstrzfdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</p>
<button class="clippy" data-clipboard-target="#test"></button>
</div>
</div>
</div>
I have the following div box:
<div class="requests-container">
<div class="request-box">
<div class="request-details">
<h1>Table 6, 1:00PM</h1>
<h2>
Request made 10 min ago.
</h2>
<div class="status-button">
<button type="button" class="request-button">Assistance Requested</button>
</div>
</div>
</div>
</div>
.status-button {
padding-bottom: 25px;
}
.requests-container {
display: grid;
justify-items: center;
align-items: center;
grid-row-gap: 30px;
}
.request-box {
border: 1px solid #999;
height: 200px;
width: 66%;
border-radius: 5px;
border-color: #a2e8dc;
position: relative;
background-color: white;
font-family: Helvetica;
box-shadow: 0 10px 6px -6px #ededed;
-webkit-box-shadow: 0 10px 6px -6px #ededed;
-moz-box-shadow: 0 10px 6px -6px #ededed;
}
.request-details {
margin: 0;
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
padding-left: 40px;
}
.request-button {
height: 50px;
font-size: 20px;
font-weight: 600;
border: none;
border-radius: 5px;
padding: 10px 25px;
background-size: 150% auto;
background: linear-gradient(to right, rgba(141,227,227,1) 0%, rgba(114,240,218,1) 100%);
cursor: pointer;
}
.request-details h1 {
font-size: 30px;
color: #28bfa6;
}
.request-details h2 {
font-size: 22px;
}
When the screen width is at least 1000px, I want the position of the button in the div to be like the following:
With the button centred vertically in the div and positioned to the right of the box.
I have tried to achieve this through the following CSS:
#media (min-width: 1000px) {
.status-button {
margin: 0;
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
padding-left: 700px;
}
}
The above code gives me the following:
When I use padding-left to position the button to the right, the size of the button gets compressed. Not only that, when I make the screen size smaller, the button escapes the div box:
What is the best way to position my button to the right such that the size of the button does not shrink and the button remains contained in the div box?
Instead of position: absolute, padding and transform. You can use a flex layout to solve it.
Use displat: flex, flex-wrap: wrap, align-items: center and justify-content: space-between in the button element.
So, for status-button element, you use width: 100% and in media query, you set width: auto.
.status-button {
padding-bottom: 25px;
width: 100%;
}
.requests-container {
display: grid;
justify-items: center;
align-items: center;
grid-row-gap: 30px;
}
.request-box {
border: 1px solid #999;
height: 200px;
width: 66%;
border-radius: 5px;
border-color: #a2e8dc;
position: relative;
background-color: white;
font-family: Helvetica;
box-shadow: 0 10px 6px -6px #ededed;
-webkit-box-shadow: 0 10px 6px -6px #ededed;
-moz-box-shadow: 0 10px 6px -6px #ededed;
}
.request-details {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
padding: 0 30px;
height: 100%;
}
.request-button {
height: 50px;
font-size: 20px;
font-weight: 600;
border: none;
border-radius: 5px;
padding: 10px 25px;
background-size: 150% auto;
background: linear-gradient(to right, rgba(141,227,227,1) 0%, rgba(114,240,218,1) 100%);
cursor: pointer;
}
.request-details h1 {
font-size: 30px;
color: #28bfa6;
}
.request-details h2 {
font-size: 22px;
}
#media (min-width: 1000px) {
.status-button {
width: auto;
}
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Requests Page</title>
<link rel="stylesheet" type="text/css" href="requests.css">
</head>
<body>
<div class="requests-container">
<div class="request-box">
<div class="request-details">
<div>
<h1>Table 6, 1:00PM</h1>
<h2>Request made 10 min ago.</h2>
</div>
<div class="status-button">
<button type="button" class="request-button">Assistance Requested</button>
</div>
</div>
</div>
</div>
</body>
</html>
Here is a simple example at codepen
https://codepen.io/themustafaomar/pen/poJOLqE?editors=1100
.requests-container {
border: 1px solid #999;
width: 66%;
border-radius: 5px;
border-color: #a2e8dc;
position: relative;
background-color: white;
font-family: Helvetica;
box-shadow: 0 10px 6px -6px #ededed;
-webkit-box-shadow: 0 10px 6px -6px #ededed;
-moz-box-shadow: 0 10px 6px -6px #ededed;
padding: 30px;
margin: auto;
}
.request-button {
height: 50px;
font-size: 20px;
font-weight: 600;
border: none;
border-radius: 5px;
padding: 10px 25px;
background-size: 150% auto;
background: linear-gradient(
to right,
rgba(141, 227, 227, 1) 0%,
rgba(114, 240, 218, 1) 100%
);
cursor: pointer;
}
.request-details h1 {
font-size: 30px;
color: #28bfa6;
}
.request-details h2 {
font-size: 22px;
}
#media (min-width: 1000px) {
.requests-container {
display: flex;
justify-content: space-between;
align-items: center;
}
}
HTML
<div class="requests-container">
<div class="request-details">
<h1>Table 6, 1:00PM</h1>
<h2>Request made 10 min ago.</h2>
</div>
<div class="status-button">
<button type="button" class="request-button">Assistance Requested</button>
</div>
</div>
Just replace in your css file the following to achive your goal:
.status-button {
margin-left: 25rem;
margin-top: -5rem;
}
and
.request-button {
height:0;
}
I have the following flex item (#globalSearchContLi) inside a flex-container. The container is an unordered list.
My problem is that I'm creating a fun looking search bar with a half-sphere submit button. The button is pretty much attached to the search bar with inline-block and margin properties.
This bundle (the search bar and button) won't center in the div any way I try to.
I tried setting #globalSearchCont with a specific width and auto side margins, but the whole flexbox presentation won't display correctly on mobile.
Any suggestions/advice? Thanks in advance.
#globalSearchContLi {
flex-grow: 7;
margin: 0px 15px;
flex-basis: 100px;
}
#globalSearchContLi {
flex-grow: 7;
margin: 0px 15px;
flex-basis: 100px;
}
#munchGlobalSearchbar {
width: 240px;
height: 50px;
/* box-shadow: 0 0 0 1px#000,0 0 0 3px #FFF, 0 0 0 5px #333; */
font-weight: 300;
font-size: 1.6rem;
border-radius: 10px;
display: inline-block;
margin-top: 20px;
text-align: center;
background-color: #edad0c;
border-bottom: 2px solid #333;
border-top: 2px solid #333;
border-left: 2px solid #333;
}
#munchGlobalSearchbar::placeholder {
color: #000;
}
#globalSearchBtn {
background-image: url(../imgs/addOn/panEmoji.png);
width: 50px;
height: 51px;
margin: 0px 0px -17px -12px !important;
border-bottom-right-radius: 50%;
border-top-right-radius: 50%;
display: inline-block;
border: 2px solid #333;
background-color: #38b32b;
transition: .2s all ease;
}
.backImageCon {
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
<li id="globalSearchContLi">
<div id="globalSearchCont">
<input placeholder="Search..." type="textbox" name="globalSearch" id="munchGlobalSearchbar">
<div id="globalSearchBtn" class="backImageCon"></div>
</div>
</li>
Use justify-content: center on the parent to horizontally center the button elements.
#globalSearchContLi {
list-style-type: none;
margin-left: 0;
}
#globalSearchCont {
display: flex;
justify-content: center;
height: 50px;
}
#munchGlobalSearchbar {
width: 240px;
font-weight: 300;
font-size: 1.6rem;
border-radius: 10px;
text-align: center;
background-color: #edad0c;
border-bottom: 2px solid #333;
border-top: 2px solid #333;
border-left: 2px solid #333;
}
#munchGlobalSearchbar::placeholder {
color: #000;
}
#globalSearchBtn {
background-image: url(../imgs/addOn/panEmoji.png);
width: 50px;
border-bottom-right-radius: 50%;
border-top-right-radius: 50%;
border: 2px solid #333;
background-color: #38b32b;
transition: .2s all ease;
margin-left: -10px;
}
.backImageCon {
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
ul {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
<ul>
<li id="globalSearchContLi">
<div id="globalSearchCont">
<input placeholder="Search..." type="textbox" name="globalSearch" id="munchGlobalSearchbar">
<div id="globalSearchBtn" class="backImageCon"></div>
</div>
</li>
</ul>
So I've run into a CSS formatting question that I'm hoping I can get some help with. In general, I've got my setup working, having the position of the menu shift based on the size of the screen so that it is always centered vertically and horizontally, etc.
However, I've run into an issue where if you make the viewing window too small, elements begin to overlap, which is not desired.
Here is a fiddle to display what I am talking about. I would prefer that the green box force everything else below it, so it no longer overlaps the red one (Everything within the "buttonContainerBase" div):
Fiddle
Here's the HTML Div setup and relevant CSS:
#buttonContainerBase {
position: absolute;
left: 0px;
width: 100%;
height: 100%;
}
.hCenterDiv {
width: 370px;
margin-left: auto;
margin-right: auto;
}
.backgroundBoxDiv {
position: absolute;
top: 50%;
height: 244px;
margin-top: -112px;
margin-left: 0px;
width: 370px;
overflow: auto;
display: inline-block;
text-align: center;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
opacity: 0.95;
filter: alpha(opacity=95);
background: -moz-linear-gradient(top, #FFFFFF 45%, #F5F5F5 75%);
background: -webkit-gradient(linear, top, bottom, color-stop(45%, #FFFFFF), color-stop(75%, #F5F5F5));
background: linear-gradient(180deg, #FFFFFF 45%, #F5F5F5 75%);
box-shadow: 2px 2px 4px #244260;
}
.logoContainerDiv {
width: 344px;
height: 76px;
margin-top: 5px;
display: inline-block;
background-color: red;
}
.dividingLineDiv {
height: 2px;
width: 370px;
background-color: #335B84;
}
#myLogo {
position: absolute;
top: 5px;
left: 5px;
width: 257px;
height: 73px;
background-color: green;
}
#contentWrapper {
min-height: 300px;
}
.buttonContainerDiv {
/*padding: 5px;*/
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
}
#studentLoginDiv {
margin-bottom: 10px;
}
.customButton {
padding: 0px;
width: 225px;
height: 34px;
border: solid 2px #FFFFFF;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
border-style: outset;
background-color: #f5f5f5;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
cursor: pointer;
}
.customButton:hover {
border: solid 2px #F5F5F5;
border-style: inset;
background-color: #f2f2f2;
}
.customButton:active {
border: solid 4px #F5F5F5;
border-style: inset;
background-color: #D1D1D1;
}
<div id="contentWrapper">
<div id="buttonContainerBase">
<div class="hCenterDiv">
<div class="backgroundBoxDiv">
<div class="elementContainerDiv">
<div class="logoContainerDiv"></div>
<div class="dividingLineDiv"></div>
<div class="buttonContainerDiv">
<input class="customButton" id="instructorLogin" type="button" value="Instructor Login" onclick="window.open('http://www.google.com');" />
</div>
<div class="buttonContainerDiv" id="studentLoginDiv">
<input class="customButton" id="studentLogin" type="button" value="Student Login" onclick="window.open('http://www.google.com/');" />
</div>
<div class="dividingLineDiv"></div>
<div class="buttonContainerDiv">
<input class="customButton" id="instructionalVids" type="button" value="Instructional Videos" onclick="window.open('https://www.youtube.com/');" />
</div>
</div>
</div>
</div>
</div>
<div id="myLogo"></div>
</div>
Still kind of new to the CSS game, so I apologize in advance if things look funky/awkward.
This is happening because #myLogo has position:absolute, so :
change to position:relative in CSS
move the div in the DOM to be on the top
remove all CSS for #buttonContainerBase
In backgroundBoxDiv
remove margin-top: -112px, that would be somehow a hack.
add this code:
top: 0;
bottom:0;
right:0;
left:0;
margin:auto;
NOTE This will overlap in 320px view, so you might need media queries for that.
.hCenterDiv {
width: 370px;
margin-left: auto;
margin-right: auto;
}
.backgroundBoxDiv {
position: absolute;
top: 0;
bottom:0;
right:0;
left:0;
margin:auto;
height: 244px;
width: 370px;
overflow: auto;
display: inline-block;
text-align: center;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
/*
border: solid 2px #004586;
background-color: #FFFFFF;
*/
opacity: 0.95;
filter: alpha(opacity=95);
background: -moz-linear-gradient(top, #FFFFFF 45%, #F5F5F5 75%);
background: -webkit-gradient(linear, top, bottom, color-stop(45%, #FFFFFF), color-stop(75%, #F5F5F5));
background: linear-gradient(180deg, #FFFFFF 45%, #F5F5F5 75%);
box-shadow: 2px 2px 4px #244260;
}
.logoContainerDiv {
width: 344px;
height: 76px;
margin-top: 5px;
display: inline-block;
background-color: red;
/* border: solid 2px #004586; */
}
.dividingLineDiv {
height: 2px;
width: 370px;
background-color: #335B84;
}
#myLogo {
position: relative;
top: 5px;
left: 5px;
width: 257px;
height: 73px;
background-color: green;
}
#contentWrapper {
/*
column-count: 2;
column-gap: 40px;
*/
min-height: 300px;
}
/******** BUTTONS *********/
.buttonContainerDiv {
/*padding: 5px;*/
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
}
#studentLoginDiv {
margin-bottom: 10px;
}
.customButton {
padding: 0px;
width: 225px;
height: 34px;
border: solid 2px #FFFFFF;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
border-style: outset;
background-color: #f5f5f5;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
cursor: pointer;
}
.customButton:hover {
border: solid 2px #F5F5F5;
border-style: inset;
background-color: #f2f2f2;
}
.customButton:active {
border: solid 4px #F5F5F5;
border-style: inset;
background-color: #D1D1D1;
}
/****** END BUTTONS *******/
<div id="contentWrapper">
<div id="myLogo"></div>
<div id="buttonContainerBase">
<div class="hCenterDiv">
<div class="backgroundBoxDiv">
<div class="elementContainerDiv">
<div class="logoContainerDiv"></div>
<div class="dividingLineDiv"></div>
<div class="buttonContainerDiv">
<input class="customButton" id="instructorLogin" type="button" value="Instructor Login" onclick="window.open('http://www.google.com');" />
</div>
<div class="buttonContainerDiv" id="studentLoginDiv">
<input class="customButton" id="studentLogin" type="button" value="Student Login" onclick="window.open('http://www.google.com/');" />
</div>
<div class="dividingLineDiv"></div>
<div class="buttonContainerDiv">
<input class="customButton" id="instructionalVids" type="button" value="Instructional Videos" onclick="window.open('https://www.youtube.com/');" />
</div>
</div>
</div>
</div>
</div>
</div>