I'm looking to make div.box and button.navBtn responsive.
Currently when the page is resized to 871px width, the buttons instantly stack on top of each other and the long div.box is squished until it clashes into the buttons. The "final look" (around 500px wide) doesn't even look that bad honestly and is the ideal way this window would look on smaller screens. I'm just trying to make the transition to that size nicer.
Preferably I'd like the buttons to resize themselves gradually with div.box until they hit a certain width and then stack on top of each other however I can't figure out how to apply the correct media query to do this. I feel as if my divider is causing some type of issue a well with spacing but I'm not entirely sure. It does have some whitespace I can't get rid of and is set to 2em width.
I'm also not sure why div.main stops resizing once you hit around 495px width. I'm gonna make sure I use Bootstrap or something next time to avoid this...
Any help would be appreciated. Here's a big snippet of code:
html {
min-height: 100%;
}
body {
display: flex;
justify-content: center;
font-family: 'Lora', serif;
margin: .8em;
background-color: #151b20;
background-size: cover;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
overflow-y: scroll;
}
h1 {
color: rgb(250, 250, 250);
display: flex;
justify-content: center;
font-size: 3.5em;
margin-top: 0px;
margin-bottom: 10px;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
h2 {
color: rgb(250, 250, 250);
display: flex;
font-size: 1.7em;
justify-content: center;
padding-top: 5px;
margin-bottom: 16px;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
a {
color: rgb(250, 250, 250);
}
ul {
padding-left: 0px;
}
li {
color: rgb(250, 250, 250);
display: flex;
justify-content: center;
list-style: none;
font-size: 1.5em;
margin-bottom: 5px;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
button {
background: rgba(0, 0, 0, 0);
background-image: url(Pictures/blank.png);
color: #a5afaa;
border: 3.5px solid transparent;
border-radius: .6em;
padding: 2.8em;
/* transition: all 0.2s; */
background-repeat: no-repeat;
}
button:hover {
border-color: #fff8cc;
box-shadow: 0em 0em 1em 0em #fff8cc;
cursor: url('Pictures/glove-lg.png'), auto;
}
.main {
border: solid 2px #939388;
border-radius: 10px;
background-image: url(Pictures/texture.png);
background-color: #0f0f3de8;
box-shadow: 0 0.1em 0.3em 0.1em rgba(0, 0, 0, 0.6);
margin-top: 20px;
}
.inner {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
margin: 20px;
}
.decoration {
outline: 2px solid rgba(128, 128, 128, 0.4);
outline-offset: -5px;
border-radius: 10px;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
}
.box {
background-color: #080824;
box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.6);
border-radius: 3px;
margin: 30px;
padding: 1px;
}
.wrapper {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
.navHome {
display: inline-block;
position: relative;
margin-top: 15px;
}
.navBtn {
border: solid 2px #939388;
background-image: none;
background-color: #0f0f3d;
width: 25em;
box-shadow: 0 0.1em 0.3em 0.1em rgba(0, 0, 0, 0.6);
}
.navText {
color: white;
font-family: 'Lora', serif;
font-size: 2em;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
line-height: 0em;
}
.divider {
display: inline-block;
width: 2em;
height: auto;
}
.aboutText {
color: white;
font-family: 'Lora', serif;
font-size: 1.5em;
text-align: center;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
line-height: 1.5em;
}
#about {
padding-top: 25px;
}
#homeList {
margin-bottom: 0px;
}
#homeBox {
padding: 30px;
padding-top: 20px;
}
#media screen and (max-width: 992px) {
h1 {
text-align: center;
padding: 3px;
}
}
<body>
<div class="wrapper">
<div class="main">
<div class="decoration">
<div id="about">
<h1>I mean, it kinda works...</h1>
<ul id="homeList">
<li>Long List Item #1</li>
<li>Long List Item #2</li>
</ul>
<div id="innerHome" class="inner">
<div id="homeBox" class="box">
<a href="" class="navHome">
<button class="navBtn">
<div class="navText">About</div>
</button>
</a>
<div class="divider"></div>
<a href="" class="navHome">
<button class="navBtn">
<div class="navText">Items</div>
</button>
</a>
</div>
</div>
</div>
</div>
</div>
For the buttons to resize themselves you can't give them an explicit width like you do in .navBtn. You need to make them have a certain percentage of the parent and when they hit their minimal witdh they wrap.
Without that change the best that can be done is making the parent smaller when the elements wrap like so:
#homeBox {
width: min-content;
}
#media (min-width: 992px) {
#homeBox {
width: auto;
}
}
html {
min-height: 100%;
}
body {
display: flex;
justify-content: center;
font-family: 'Lora', serif;
margin: .8em;
background-color: #151b20;
background-size: cover;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
overflow-y: scroll;
}
h1 {
color: rgb(250, 250, 250);
display: flex;
justify-content: center;
font-size: 3.5em;
margin-top: 0px;
margin-bottom: 10px;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
h2 {
color: rgb(250, 250, 250);
display: flex;
font-size: 1.7em;
justify-content: center;
padding-top: 5px;
margin-bottom: 16px;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
a {
color: rgb(250, 250, 250);
}
ul {
padding-left: 0px;
}
li {
color: rgb(250, 250, 250);
display: flex;
justify-content: center;
list-style: none;
font-size: 1.5em;
margin-bottom: 5px;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
button {
background: rgba(0, 0, 0, 0);
background-image: url(Pictures/blank.png);
color: #a5afaa;
border: 3.5px solid transparent;
border-radius: .6em;
padding: 2.8em;
/* transition: all 0.2s; */
background-repeat: no-repeat;
}
button:hover {
border-color: #fff8cc;
box-shadow: 0em 0em 1em 0em #fff8cc;
cursor: url('Pictures/glove-lg.png'), auto;
}
.main {
border: solid 2px #939388;
border-radius: 10px;
background-image: url(Pictures/texture.png);
background-color: #0f0f3de8;
box-shadow: 0 0.1em 0.3em 0.1em rgba(0, 0, 0, 0.6);
margin-top: 20px;
}
.inner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 20px;
}
.decoration {
outline: 2px solid rgba(128, 128, 128, 0.4);
outline-offset: -5px;
border-radius: 10px;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
}
.box {
background-color: #080824;
box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.6);
border-radius: 3px;
margin: 30px;
padding: 1px;
}
.wrapper {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
.navHome {
margin-top: 15px;
display: inline-block;
position: relative;
}
.navBtn {
border: solid 2px #939388;
background-image: none;
background-color: #0f0f3d;
box-shadow: 0 0.1em 0.3em 0.1em rgba(0, 0, 0, 0.6);
/* max-width: 25em; */
width: 25em;
}
.navText {
color: white;
font-family: 'Lora', serif;
font-size: 2em;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
line-height: 0em;
}
.divider {
display: inline-block;
width: 2em;
height: auto;
}
.aboutText {
color: white;
font-family: 'Lora', serif;
font-size: 1.5em;
text-align: center;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
line-height: 1.5em;
}
#about {
padding-top: 25px;
}
#homeList {
margin-bottom: 0px;
}
#homeBox {
padding: 30px;
padding-top: 20px;
}
#homeBox {
width: min-content;
}
#media (min-width: 992px) {
#homeBox {
width: auto;
}
}
#media screen and (max-width: 992px) {
h1 {
text-align: center;
padding: 3px;
}
}
<body>
<div class="wrapper">
<div class="main">
<div class="decoration">
<div id="about">
<h1>I mean, it kinda works...</h1>
<ul id="homeList">
<li>Long List Item #1</li>
<li>Long List Item #2</li>
</ul>
<div id="innerHome" class="inner">
<div id="homeBox" class="box">
<a href="" class="navHome">
<button class="navBtn">
<div class="navText">About</div>
</button>
</a>
<div class="divider"></div>
<a href="" class="navHome">
<button class="navBtn">
<div class="navText">Items</div>
</button>
</a>
</div>
</div>
</div>
</div>
</div>
Why wont my css styling of background color ,width, and height work on my last div >gameover ?
this first part is my html code:
<head>
<title>Maths Game</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-
scalable=yes">
<link rel="stylesheet" href="styling.css">
</head>
<body>
<div id="container">
<div id="score">Score: <span id="scoreValue">0</span></div>
<div id="correct">Correct</div>
<div id="wrong">Try Again</div>
<div id="question">7x7</div>
<div id="instructionBox">Click on the correct answer</div>
<div id="choices">
<div id="box1" class="box">1</div>
<div id="box2" class="box">2</div>
<div id="box3" class="box">3</div>
<div id="box4" class="box">4</div>
</div>
<div id="startReset">start Game</div>
Im guessing right here below is where it started getting messed up:
<div id="timeremaining">Time remaining:<span id="timeRemainingValue">
60</span> sec</div>
<div id="gameOver">
<p>Game Over!</p>
<p>Your score is __</p>
</div>
</div>
this second part is my css code and only the last style "game over" isn't working;
html {
height: 100%;
background: radial-gradient(circle, white, grey);
}
#container {
height: 440px;
width: 550px;
background-color: #9DD2EA;
margin: 100px auto;
/* this line directly above centers the container top and bottom 100px and left and
right to auto so that margin keeps getting
bigger and bigger on both sides till the element is center */
padding: 10px;
border-radius: 20px;
/* above line curves corners of element */
box-shadow: 4px 4px 6px 6px purple;
-webkit-box-shadow: 4px 4px 6px 6px purple;
-moz-box-shadow: 4px 4px 6px 6px purple;
/* [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color]
*/
position: relative;
}
#score {
background-color: yellow;
padding: 10px;
position: absolute;
left: 475px;
box-shadow: 0px 4px purple;
-moz-box-shadow: 0px 4px purple;
-webkit-box-shadow: 0px 4px purple;
}
#correct {
position: absolute;
left: 240px;
background-color: green;
color: white;
padding: 10px;
display: none;
}
#wrong {
/* line 45 makes it to where this element does not interact with other elements and
other elements behave as if it doesent exist*/
position: absolute;
left: 240px;
background-color: red;
color: white;
padding: 10px;
display: none;
}
#question {
margin: 55px auto 10px auto;
height: 150px;
width: 420px;
background-color: rgb(184, 53, 240);
box-shadow: 0px 4px purple;
font-size: 100px;
text-align: center;
font-family: Arial, Helvetica, sans-serif, sans-serif;
line-height: 150px;
color: black;
border-radius: 5px;
position: relative;
}
#question:active {
box-shadow: 0px 0px purple;
-moz-box-shadow: 0px 0px purple;
-webkit-box-shadow: 0px 0px purple;
top: 4px
}
#instructionBox {
height: 60px;
width: 420px;
background-color: blue;
margin: 1px auto 1px auto;
text-align: center;
line-height: 55px;
box-shadow: 0px 4px purple;
-moz-box-shadow: 0px 4px purple;
-webkit-box-shadow: 0px 4px purple;
border-radius: 5px;
position: relative;
/* transition: all 0.2s; line 71 & 72 with line 77 make the transition happen on click
*/
}
#instructionBox:active {
box-shadow: 0px 0px purple;
-moz-box-shadow: 0px 0px purple;
-webkit-box-shadow: 0px 0px purple;
top: 4px;
}
#choices {
/* background-color: sandybrown; */
height: 100px;
width: 420px;
margin: 10px auto;
color: black;
text-align: center;
line-height: -50px;
margin: 10px auto;
border-radius: 5px;
}
.box {
/*these boxes are within a choices div to help them size together*/
margin-right: 26px;
width: 85px;
height: 85px;
background-color: white;
float: left;
border-radius: 5px;
cursor: pointer;
box-shadow: 0px 4px grey;
-moz-box-shadow: 0px 4px grey;
-webkit-box-shadow: 0px 4px grey;
line-height: 80px;
position: relative;
/* with position relative and .box:active { top: 4px; the box moves down 4px}*/
/* transition: all 0.2s;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
-ms-transition: all 0.2s; */
}
.box:hover,
#startReset:hover {
background-color: grey;
color: white;
box-shadow: 0px 4px purple;
-webkit-box-shadow: 0px 4px purple;
-moz-box-shadow: 0px 4px purple;
}
.box:active,
#startReset:active {
box-shadow: 0px 0px purple;
-webkit-box-shadow: 0px 0px purple;
-moz-box-shadow: 0px 0px purple;
top: 4px;
}
/* #box1{
margin: 10px 10px;
background-color: red;
width: 30px;
height: 30px;
}
#box2{
margin: 10px 10px;
background-color: white;
width: 30px;
height: 30px;
}
#box3{
margin: 10px 10px;
background-color: blue;
width: 30px;
height: 30px;
}*/
#box4 {
margin-right: 0;
}
#startReset {
/*these boxes are within a choices div to help them size together*/
margin-left: 230px;
width: 100px;
height: 45px;
background-color: rgb(255, 255, 255, 0.5);
float: left;
border-radius: 5px;
cursor: pointer;
box-shadow: 0px 4px grey;
-moz-box-shadow: 0px 4px grey;
-webkit-box-shadow: 0px 4px grey;
line-height: 45px;
text-align: center;
position: relative;
}
/* instead of writing these same pargraphs of code just at the element id to the similar
code alrady made like above */
/* #startReset:hover{
background-color: grey;
color: white;
box-shadow: 0px 4px purple;
-webkit-box-shadow: 0px 4px purple;
-moz-box-shadow: 0px 4px purple;
}
#startReset:active{
box-shadow: 0px 0px purple;
-webkit-box-shadow: 0px 0px purple;
-moz-box-shadow: 0px 0px purple;
top: 4px;
} */
#timeremaining {
/*these boxes are within a choices div to help them size together*/
visibility: hidden;
/* display: none; */
margin-left: 10px;
width: 200px;
height: 45px;
background-color: greenyellow;
float: left;
border-radius: 5px;
cursor: pointer;
box-shadow: 0px 4px grey;
-moz-box-shadow: 0px 4px grey;
-webkit-box-shadow: 0px 4px grey;
line-height: 45px;
text-align: center;
position: relative;
}
this below is the broken part with the >gameover style or gameOver div:
#gameOver {
height: 200px;
width: 500px;
background-color: linear-gradient(blue, green);
font-size: 1.0em;
}
I have implemented this calendar on mozilla firefox satisfactorily and when I try to view it on chrome, table doesn't fill all the parent section. The table height is the same as the parent section but it have moved a little bit to the bottom generating a white space between the section and the table.
Chrome:
Firefox:
In firefox works.
This is the code, you can try it on the demo and see the differences between chrome and firefox:
.right{
float:right !important;
}
.wz-ui-input[type="checkbox"] {
display: none;
}
.wz-ui-input {
background-color: #fcfeff;
border: 1px solid #dcdcdc;
border-radius: 3px;
box-shadow: 0 1px rgba(0, 0, 0, 0.05) inset;
color: #464646;
cursor: text;
font-size: 13px;
height: 28px;
padding: 0 10px;
width: 204px;
}
.wz-ui-input[type="checkbox"] + label i {
background: url("#static/checkbox_white.png") no-repeat scroll -17px 0 / 51px 17px rgba(0, 0, 0, 0);
display: inline-block;
height: 17px;
margin: -1px 4px 0 0;
vertical-align: middle;
width: 17px;
}
/* Shadow */
.hide {display:none;}
.abs {position:absolute; z-index: 3;}
.fullHeight{height:100%;}
.fullWidth{width:100%;}
.top{top:0;}
.dark{background-color:#999; background-color: rgba(123,123,123,0.7); opacity: 0.7;}
.center {text-align: center}
/* Calendar Top Bar */
.wz-ui-header{
width:100%;
height: 39px;
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
background-color: #f1f1f1;
-webkit-box-shadow: 0 2px 4px rgba(0,1,1,.1), inset 0 1px rgba(255,255,255,.1);
-moz-box-shadow: 0 2px 4px rgba(0,1,1,.1), inset 0 1px rgba(255,255,255,.1);
box-shadow: 0 2px 4px rgba(0,1,1,.1), inset 0 1px rgba(255,255,255,.1);
background-image: -webkit-linear-gradient(bottom, #b83e38, #da605b);
background-image: -moz-linear-gradient(bottom, #b83e38, #da605b);
background-image: -o-linear-gradient(bottom, #b83e38, #da605b);
background-image: -ms-linear-gradient(bottom, #b83e38, #da605b);
background-image: linear-gradient(to top, #b83e38, #da605b);
}
.shadow-border{
height: 38px;
width:100%;
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
background-color: #fdfeff;
border: solid 1px rgba(0,0,0,.15);
}
.calendar-menu{
display:block;
float:left;
width:85%;
}
.calendar-menu li {
border-bottom: 2px solid transparent;
color: #e9b9b7;
display: inline-block;
font-size: 15px;
height: 28px;
margin: 0 11px;
padding: 8px 1px 0;
}
.calendar-menu li.active-type {
border-bottom: 3px solid #7ebe30;
color: #ffffff;
}
.calendar-menu li:hover {
border-bottom: 3px solid #fff;
}
.calendar-menu-nav{
width:auto;
float:left;
}
.calendar-menu-event-finder {
width:auto;
height: 21px;
padding: 5px 10px;
}
.calendar-menu-event-finder input{
width: 137px;
height: 25px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color: #fcfeff;
-webkit-box-shadow: inset 0 2px rgba(0,0,0,.05);
-moz-box-shadow: inset 0 2px rgba(0,0,0,.05);
box-shadow: inset 0 2px rgba(0,0,0,.05);
border: solid 1px #a64440;
}
.calendar-buttons{
border-left: 1px solid #9f3e3a;
height: 100%;
width: 135px;
}
.wz-view-minimize, .wz-view-maximize, .wz-view-close, .close-image {
border: 1px solid transparent;
border-radius: 2px;
float: left;
height: 9px;
padding: 6px;
width: 10px;
margin: 9px 10px 10px;
}
.wz-view-minimize i{
background: url("#static/minimize.png") no-repeat scroll center bottom / 10px auto rgba(0, 0, 0, 0);
display: block;
height: 9px;
width: 10px;
}
.wz-view-maximize i{
background: url("#static/enlarge.png") no-repeat scroll center bottom / 10px auto rgba(0, 0, 0, 0);
display: block;
height: 9px;
width: 10px;
}
.wz-view-close i {
background: url("#static/close.png") no-repeat scroll center bottom / 10px auto rgba(0, 0, 0, 0);
display: block;
height: 9px;
width: 10px;
}
.close-image i{
background: url("#static/close.png") no-repeat scroll center bottom / 10px auto rgba(0, 0, 0, 0);
display: block;
height: 9px;
width: 10px;
}
/* Calendar general */
.calendar-head {
background: none repeat scroll 0 0 #fff;
height: 35px;
}
#day-calendar, #week-calendar, #month-calendar{
display: none;
}
.calendar-active{
width: 100%;
height: 85%;
background-color: #fff;
border: solid 1px rgba(0,0,0,.15);
display:block !important;
}
/* Calendar Modals */
#my-calendars-modal{
width: 210px;
height: 122px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color: #fff;
border: solid 1px rgba(0,0,0,.15);
position: absolute;
display: none;
margin-left: 12px;
margin-top: 31px;
z-index: 2;
}
#my-calendars-modal .my-calendars-list {
margin-left: 11px;
margin-top: 11px;
}
#my-calendars-modal .my-calendars-list articles {
margin-bottom: 11px;
font-size: 13px;
}
#my-calendars-modal .calendar {
display: block;
width: 100% !important;
}
#my-calendars-modal .calendar i{
float: left;
}
#my-calendars-modal .calendar span figure {
border-radius: 4px;
float: left;
height: 8px;
margin-right: 5px;
position: relative;
top: 4px;
width: 8px;
}
#my-calendars-modal .deleteCalendar{
margin-right: 10px;
font-size: 12px;
color:#dc513a;
}
#work span figure{
background-color: #34aadc;
}
#office span figure{
background-color: #5856d6;
}
#home span figure{
background-color: #f79a03;
}
#my-calendars-modal .add-new-calendar{
text-align: center;
border-top: 1px solid #dadada;
width: 100%;
padding: 11px 0;
font-size: 13px;
}
#create-event-modal{
width: 289px;
height: 289px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color: #f1f1f1;
-webkit-box-shadow: 0 1px 5px rgba(0,0,0,.3);
-moz-box-shadow: 0 1px 5px rgba(0,0,0,.3);
box-shadow: 0 1px 5px rgba(0,0,0,.3);
display: none;
z-index: 4;
position: absolute;
margin-left: 34%;
margin-top: 11.5%;
font-size:13px;
}
#create-calendar-modal{
width: 289px;
height: 198px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color: #f1f1f1;
-webkit-box-shadow: 0 1px 5px rgba(0,0,0,.3);
-moz-box-shadow: 0 1px 5px rgba(0,0,0,.3);
box-shadow: 0 1px 5px rgba(0,0,0,.3);
display: none;
z-index: 4;
position: absolute;
margin-left: 34%;
margin-top: 17%;
font-size:13px;
}
#create-calendar-modal .calendar-name input{
width: 161px;
height: 26px;
background-color: #fcfeff;
-webkit-box-shadow: inset 0 1px rgba(0,0,0,.05);
-moz-box-shadow: inset 0 1px rgba(0,0,0,.05);
box-shadow: inset 0 1px rgba(0,0,0,.05);
border: solid 1px rgba(0,0,0,.2);
border-radius: 3px;
}
#create-calendar-modal .calendar-name {
margin-left: 6%;
position: relative;
top: 32px;
float: left;
}
#create-calendar-modal .calendar-color {
margin-left: 9%;
position: relative;
top: 39px;
float: left;
}
#create-calendar-modal .calendar-color input{
width: 16px;
height: 12px;
}
#create-calendar-modal .calendar-description {
margin-left: 6%;
position: relative;
top: 49px;
float: left;
}
#create-calendar-modal .calendar-description textarea{
width: 260px;
height: 49px;
background-color: #fcfeff;
-webkit-box-shadow: inset 0 1px rgba(0,0,0,.05);
-moz-box-shadow: inset 0 1px rgba(0,0,0,.05);
box-shadow: inset 0 1px rgba(0,0,0,.05);
border: solid 1px rgba(0,0,0,.2);
margin-top: 6px;
border-radius: 3px;
}
#create-calendar-modal .create-calendar-button{
width: 71px;
height: 23px;
background-color: #75d142;
-webkit-box-shadow: inset 0 1px rgba(255,255,255,.3);
-moz-box-shadow: inset 0 1px rgba(255,255,255,.3);
box-shadow: inset 0 1px rgba(255,255,255,.3);
border: solid 1px #1b961b;
background-image: -webkit-linear-gradient(bottom, #4e9c21, #7ebe30);
background-image: -moz-linear-gradient(bottom, #4e9c21, #7ebe30);
background-image: -o-linear-gradient(bottom, #4e9c21, #7ebe30);
background-image: -ms-linear-gradient(bottom, #4e9c21, #7ebe30);
background-image: linear-gradient(to top, #4e9c21, #7ebe30);
margin-right: 10px;
margin-top: 68px;
color: #fff;
border-radius: 4px;
}
#create-calendar-modal .close-image {
float: right;
left: 250px;
position: absolute;
top: -4px;
cursor: pointer;
}
#create-calendar-modal .close-image i{
cursor: pointer;
}
.my-calendars, .current-month, .create-event {
float: left;
font-size: 14px;
margin-left: 12px;
padding: 11px 0;
width: auto;
}
.my-calendars, .my-calendars span, .create-event, .my-calendars img, .current-month img, .create-event span, .create-event img, .add-new-calendar, .add-new-calendar img, .add-new-calendar span, .deleteCalendar{
cursor:pointer;
}
.current-month{
margin-left:29%;
}
.current-month span{
margin: 0 20px;
}
.create-event{
margin-right: 20px;
}
.calendar-body{
height: 481px;
}
.calendar-body table{
width:100%;
height: 100%;
background: white;
}
td.other-month-cell{
background: #f1f1f1;
}
.calendar-days th{
font-size: 14px;
}
thead{
height: 33px;
background-color: #f1f1f1;
border-bottom: solid 2px #cacaca;
}
tbody{
height: 443px;
}
/* Month calendar */
#month-calendar td, #month-calendar th {
border: 1px solid #dadada;
text-align: left;
width: 14.2857%;
}
#month-calendar td span {
top: 6px;
margin-left: 6px;
position: relative;
}
#month-calendar .calendar-day-bar th {
vertical-align: middle;
font-size: 13px;
padding: 0px;
text-align: center;
}
#month-calendar .day-selected{
background-color: rgba(126,190,48,.1);
border: solid 1px #7ebe30 !important;
}
#month-calendar .event {
color: #4a4a4a;
font-size: 12px;
font-weight: bold;
height: 18px;
margin-left: 2px;
padding-left: 4px;
padding-top: 4px;
position: absolute;
width: 125px;
}
#month-calendar .office{
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color: #d1c4e9;
}
#month-calendar .event:nth-child(2){
margin-top: 10px;
display: block;
}
#month-calendar .event:nth-child(3){
margin-top: 32px;
display: block;
}
#month-calendar .event:nth-child(3)::after {
font-weight: 100;
content: '\A \A 5 more...';
white-space: pre;
color: #828282;
}
/* Week calendar */
#week-calendar td, #week-calendar th {
border: 1px solid #dadada;
text-align: left;
padding-left: 6px;
padding-top: 6px;
width: 12.5%;
}
#week-calendar .calendar-day-bar th, #week-calendar .calendar-day-bar td {
vertical-align: middle;
font-size: 13px;
padding: 0px;
text-align: center;
}
#week-calendar .hour-cell{
height: 41px;
}
/* Day calendar */
/* Images transformation */
.right-arrow{
transform: rotateY(180deg);
}
.wz-selectable, input, textarea, [contentEditable], [contentEditable] * {
cursor: text;
outline: medium none;
}
.wz-unselectable {
cursor: default;
}
[contentEditable] * {
color: inherit;
font-family: inherit;
}
link {
display: none;
height: 0;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
b {
font-weight: bold;
}
ol, ul {
list-style: outside none none;
}
hr {
margin: 0;
padding: 0;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
textarea {
resize: none;
}
audio {
display: none;
height: 0;
}
<section class="calendar-head">
<section class="my-calendars">
<span>My calendars</span>
<img src="https://static.inevio.com/app/207/flechita.png" alt="">
</section>
<section class="current-month">
<img class="left-arrow" src="https://static.inevio.com/app/207/arrow_back.png" alt="">
<span>September 2013</span>
<img class="right-arrow" src="https://static.inevio.com/app/207/arrow_back.png" alt="">
</section>
<section class="create-event right" id="create-event">
<img src="" alt="+">
<span>Create new event</span>
</section>
<section id="my-calendars-modal">
<section class="my-calendars-list">
<articles id="work" class="calendar">
<input type="checkbox" checked="checked" class="wz-ui-input"><label><i></i><span><figure></figure>Work</span></label>
<span class="right deleteCalendar">Eliminar</span>
</articles>
<articles id="office" class="calendar">
<input type="checkbox" checked="checked" class="wz-ui-input"><label><i></i><span><figure></figure>Office</span></label>
<span class="right deleteCalendar">Eliminar</span>
</articles>
<articles id="home" class="calendar">
<input type="checkbox" checked="checked" class="wz-ui-input"><label><i></i><span><figure></figure>Home</span></label>
<span class="right deleteCalendar">Eliminar</span>
</articles>
</section>
<section class="add-new-calendar" id="add-new-calendar">
<img src="" alt="+">
<span>Add new calendar</span>
</section>
</section>
<section id="create-event-modal">
<figure class="close-image create-event-modal-close">
<i></i>
</figure>
<!-- Falta implementar -->
</section>
<section id="create-calendar-modal">
<figure class="close-image create-calendar-modal-close">
<i></i>
</figure>
<form>
<artricle class="calendar-name">
<input type="text" placeholder=" Name of calendar">
</artricle>
<artricle class="calendar-color">
<span>Color</span>
<input type="color">
</artricle>
<artricle class="calendar-description">
<span>Description</span><br>
<textarea></textarea>
</artricle>
<button type="submit" class="create-calendar-button right">Create</button>
</form>
</section>
</section>
<section id="month-calendar" class="calendar-body calendar-active">
<table>
<thead class="calendar-day-bar">
<tr class="title-row">
<th class="title-cell">Sunday</th>
<th class="title-cell">Monday</th>
<th class="title-cell">Thusday</th>
<th class="title-cell">Wednesday</th>
<th class="title-cell">Thursday</th>
<th class="title-cell">Friday</th>
<th class="title-cell">Saturday</th>
</tr>
</thead>
<tbody class="calendar-days">
<tr class="week-row">
<td class="other-month-cell"></td>
<td class="other-month-cell"></td>
<td class="other-month-cell"></td>
<td class="other-month-cell"></td>
<td class="day-cell"><span>1</span></td>
<td class="day-cell"><span>2</span></td>
<td class="day-cell"><span>3</span></td>
</tr>
<tr class="week-row">
<td class="day-cell"><span>4</span></td>
<td class="day-cell"><span>5</span></td>
<td class="day-cell"><span>6</span></td>
<td class="day-cell"><span>7</span></td>
<td class="day-cell"><span>8</span></td>
<td class="day-cell"><span>9</span></td>
<td class="day-cell"><span>10</span></td>
</tr>
<tr class="week-row">
<td class="day-cell"><span>11</span></td>
<td class="day-cell"><span>12</span></td>
<td class="day-cell"><span>13</span></td>
<td class="day-cell"><span>14</span></td>
<td class="day-cell">
<span>15</span>
<article class="event office"> Me voy a casar</article>
<article class="event"> Reunion con el jefe</article>
</td>
<td class="day-cell"><span>16</span></td>
<td class="day-cell"><span>17</span></td>
</tr>
<tr class="week-row">
<td class="day-cell"><span>18</span></td>
<td class="day-cell"><span>19</span></td>
<td class="day-cell"><span>20</span></td>
<td class="day-cell"><span>21</span></td>
<td class="day-cell day-selected"><span>22</span></td>
<td class="day-cell"><span>23</span></td>
<td class="day-cell"><span>24</span></td>
</tr>
<tr class="week-row">
<td class="day-cell"><span>25</span></td>
<td class="day-cell"><span>26</span></td>
<td class="day-cell"><span>27</span></td>
<td class="day-cell"><span>28</span></td>
<td class="day-cell"><span>29</span></td>
<td class="day-cell"><span>30</span></td>
<td class="day-cell"><span>31</span></td>
</tr>
</tbody>
</table>
</section>
I'm having trouble finding out why the right section of the header goes under the left section when you zoom out in Safari, Chrome and Opera.
Here is the demo of the header.
If you open the demo in safari, chrome or opera you'll see that the right section of the header goes beneath the left section of the header.
I want to make the header stay in one line when you zoom out in different browsers.
Here is the code I have.
HTML:
<body class="body">
<div id="white-background">
<div class='top-head'>
<div class='left'>
<a class="logo"></a>
<div id="search">
<form id="searchbox">
<input type="text" id="search-bar" required placeholder="What are you looking for?">
<input type="submit" id="submit" value="Search">
</form> <!-- end of form id -->
</div> <!-- end of search id -->
</div> <!-- end of left class -->
<div class='right'>
<a class="login" href="#" alt="Login">Login</a>
<a class="create-account" href="#" alt="create-account">Create Account</a>
<div class="language-wrapper">
<a class="language-icon" href="#" alt="choose-your-language">Language
<div class="arrow-up"></div>
<div class="arrow-down"></div>
</a>
<a class="delivery-country-icon" href="#" alt="choose-your-delivery-country">Delivery Country
<div class="arrow-up"></div>
<div class="arrow-down"></div>
</a>
</div> <!-- end of right class -->
</div> <!-- end of top-head -->
</div><!-- end of white-background class -->
</div> <!-- end of body class -->
CSS:
#white-background {
width: 1024px;
height: 1400px;
background: white;
position: relative;
z-index: 0;
margin: 0 auto 30px auto;
}
.top-head{ height: 45px; }
.left{ padding-left: 15px; padding-top: 14px; float:left; }
.right{ line-height: 24px; padding-top: 7px; padding-right: 15px; float:right; }
.logo {
background:url(http://placehold.it/140x20);
background-position: left top;
background-repeat: no-repeat;
width: 140px;
height: 20px;
display: block;
margin: 0px 0px 0px 0px;
cursor: pointer;
}
#search {
position: relative;
margin-left: 150px;
bottom: 25px;
}
#search-bar {
display: inline-block;
box-shadow: 0px 1px 0px #f2f2f2;
background: #fff;
border: 1px solid #d3d3d3;
height: 26px;
padding-right: 80px;
padding-left: 5px;
color: #202020;
font-size: 12px;
font-family: 'Open Sans', Verdana, Arial;
}
#search-bar:hover { border: 1px solid #c6c6c6; box-shadow: 0px 1px 0px #e5e5e5; }
#search-bar:active { border: 1px solid #d13030; }
#submit {
box-shadow: 0px 1px 0px #f2f2f2;
background: #f8f8f8;
border: 1px solid #d3d3d3;
width: 80px;
height: 26px;
font-size: 12px;
font-weight: bold;
font-family: 'Open Sans', Verdana, Arial;
color: #656565;
}
#submit:hover { border: 1px solid #c6c6c6; box-shadow: 0px 1px 0px #e5e5e5; color: #000; }
#submit:active { background: #dcdcdc; color: #242424; }
.login {
font-weight: bold;
border: 1px solid #d3d3d3;
color: #202020;
padding-right: 15px;
padding-left: 15px;
display: inline-block;
font-size: 11px;
text-align: right;
box-shadow: 0px 1px 0px #f2f2f2;
text-decoration: none;
background: #f8f8f8;
}
.login:hover {
background: #f4f4f4;
box-shadow: 0px 1px 0px #e5e5e5;
}
.create-account {
font-weight: bold;
border: 1px solid #d13030;
color: #fff;
padding-right: 15px;
padding-left: 15px;
display: inline-block;
font-size: 11px;
text-align: right;
text-decoration: none;
background: #d13030 ;
}
.create-account:hover {
background: #c42d2d;
box-shadow: 0px 1px 0px #e5e5e5;
}
.arrow-down {
width: 0;
height: 0;
position: absolute;
right: 5px;
top: 40%;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #202020;
}
.language-icon:hover .arrow-down:hover {
border-top: 5px solid #d13030;
}
.language-icon:hover .arrow-up {
width: 0;
height: 0;
position: absolute;
right: 5px;
top: 40%;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}
.language-wrapper:hover .language-dropdown {
opacity: 1;
display: block;
}
.language-wrapper {
display: inline-block;
}
.language-icon {
border: 1px solid #d3d3d3;
color: #202020;
padding-right: 20px;
padding-left: 27px;
display: inline-block;
font-size: 11px;
width: auto;
text-align: right;
text-decoration: none;
box-shadow: 0px 1px 0px #f2f2f2;
background: #f8f8f8 url("http://placehold.it/25x25") no-repeat 0 0 ;
position: relative;
left: 0; top: 0;
}
.language-icon:hover {
background: #fff url("http://placehold.it/25x25") no-repeat 0 -20px ;
color: #d13030;
border: 1px solid #c6c6c6;
box-shadow: 0px 1px 0px #e5e5e5;
}
.delivery-country-icon {
position: relative;
left: 0; top: 0;
border: 1px solid #d3d3d3;
color: #202020;
padding-right: 20px;
padding-left: 27px;
display: inline-block;
font-size: 11px;
text-align: right;
text-decoration: none;
box-shadow: 0px 1px 0px #f2f2f2;
background: #f8f8f8 url("http://placehold.it/25x25") no-repeat top left ;
}
.delivery-country-icon:hover {
background: #fff url("http://placehold.it/25x25") no-repeat 0 -20px ;
color: #d13030;
border: 1px solid #c6c6c6;
box-shadow: 0px 1px 0px #e5e5e5;
}
You can fix this by setting fixed widths for the child elements (inputs, etc..).
But why would you zoom to 25%?
I tried to look at the code but am unable to determine how this gets placed above the divs. Also, googling "tabs on div", "nested tabs on div" didn't seem to show anything relevant so my terminology is off.
I imagine they used an absolutely positioned <div>.
Demo:
Output:
CSS:
#container {
border: 1px solid lightgrey;
border-radius: 5px;
height: 100px;
position: relative;
width: 200px;
}
.tab {
background-color: rgb( 242, 242, 242 );
border-right: 1px solid lightgrey;
border-bottom: 1px solid lightgrey;
border-radius: 0 0 5px 0;
color: grey;
display: inline-block;
font: 12px Arial;
left: 0;
padding: 5px;
position: absolute;
top: 0;
}
HTML:
<div id="container"><div class="tab">Example</div></div>
Just use this:
CSS
.bs-docs-example {
position: relative;
margin: 15px 5px;
padding: 39px 19px 14px;
*padding-top: 19px;
background-color: #fff;
border: 1px solid #ddd;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.bs-docs-example:after {
content: "Condiciones de uso";
position: absolute;
top: -1px;
left: -1px;
padding: 3px 7px;
font-size: 12px;
font-weight: bold;
background-color: #f5f5f5;
border: 1px solid #ddd;
color: #9da0a4;
-webkit-border-radius: 4px 0 4px 0;
-moz-border-radius: 4px 0 4px 0;
border-radius: 4px 0 4px 0;
}
HTML
<div id="content">
<div class="container">
<div class="bs-docs-example" style="text-align: justify;">
<h2>Header</h2>
<p>Paragraph</p>
</div>
</div>
</div>
DEMO