I need to have all my IDs not move when zooming in and out of the page without using the relative, absolute, or fixed positioning. I got the outer, letters and numbers box to stay when I zoom in and out but not the IDs
.outer {
margin: auto;
border: 20px outset orange;
width: 80%;
overflow: auto;
}
.letters {
border: 10px solid red;
float: left;
width: 50%;
box-sizing: border-box;
}
.numbers {
border: 10px solid blue;
float: right;
width: 50%;
box-sizing: border-box;
clear: auto
}
#one {
width: 100px;
height: 100px;
border: 10px dashed aqua;
background-color: palegoldenrod;
text-align: center;
}
#two {
width: 100px;
height: 100px;
border: 10px dashed aqua;
background-color: salmon;
text-align: center;
margin-left: 120px;
}
#three {
width: 100px;
height: 100px;
border: 10px dashed aqua;
background-color: greenyellow;
text-align: center;
margin-left: 240px;
}
#four {
width: 100px;
height: 100px;
border: 10px dashed aqua;
background-color: plum;
text-align: center;
margin-left: 120px;
}
#five {
width: 100px;
height: 100px;
border: 10px dashed aqua;
background-color: thistle;
text-align: center;
}
#oneA {
width: 100px;
height: 100px;
border: 10px dashed aqua;
background-color: palegoldenrod;
text-align: center;
float: right;
}
#twoA {
width: 100px;
height: 100px;
border: 10px dashed aqua;
background-color: salmon;
text-align: center;
float: right;
margin-top: 120px;
}
#threeA {
width: 100px;
height: 100px;
border: 10px dashed aqua;
background-color: greenyellow;
text-align: center;
float: right;
margin-top: 240px;
}
#fourA {
width: 100px;
height: 100px;
border: 10px dashed aqua;
background-color: plum;
text-align: center;
margin-left: 502px;
margin-right: 120px;
float: right;
}
#fiveA {
width: 100px;
height: 100px;
border: 10px dashed aqua;
background-color: thistle;
text-align: center;
margin-left: 622px;
float: right;
}
Are there any elements that should move? If not i would recommend disabling zoom:
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
Related
My paper-input is extending outside of the parent div, and I don't know why. I've tried setting the bottom margin but it does nothing. Here's what I have, the borders are for testing and will be removed later.
#main {
width: 100%;
height: 100%;
border: 2px solid transparent;
}
.sliderContainer {
width: 100%;
height: 60px;
border: 2px solid transparent;
}
.label {
width: 100%;
margin-left: 6px;
}
.labelValue {
margin-left: 10px;
color: #A6A6A6;
}
.sliderDiv {
width: 100%;
height: 40px;
display: inline-block;
border: 2px solid transparent;
}
.button {
width: 1px;
height: 30px;
float: left;
display: inline-block;
border: 2px solid transparent;
}
.slider {
width: 50%;
height: 30px;
margin-top: 3px;
margin-right: 34px;
display: inline-block;
border: 2px solid transparent;
}
.syncOffset { /* This is the issue. */
width: 16%;
height: 40px;
display: inline-block;
border: 2px solid transparent;
}
.syncOffsetDiv {
width: 5%;
display: inline-block;
}
example
Figured it out, it was the label that was causing an issue. I added no-label-float to remove the floating label and vertical-align: top to the class and that made it work.
any idea how to do something like this?
i know they're just boxes with modifications to css but Im new to css so any kind of help would be useful. thank you
im doing this by doing the following below. But there is a space in between the boxes. I wanted to achieve the arrow covering the space between each box
.box {
display: block;
width: 100%;
margin: 0 auto;
padding: 50px 20px;
text-align: center;
overflow: hidden;
}
.box-item {
display: block;
position: relative;
float: left;
width: calc(100% / 3 - 7px);
height: 40px;
line-height: 40px;
margin-right: 10px;
padding: 0 10px;
background-color: #3a7cca;
border-radius: 4px;
color: #ffffff;
}
.box-item:before {
content: "";
position: absolute;
right: -9px;
height: 0;
width: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 10px solid #3a7cca;
border-radius: 4px;
}
.box-item:after {
content: "";
position: absolute;
left: -1px;
height: 0;
width: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 10px solid #fff;
border-radius: 4px;
}
.box-item:first-child:after {
display: none;
}
.box-item:last-child {
margin-right: 0;
}
.box-item:last-child:before {
display: none;
}
Try to use display: flex and flex-direction: row-reverse for the parent block. So each next .box-item will be placed "under" the previous, and you will be able to adjust space between items by changing margin-right.
.box {
display: flex;
flex-direction: row-reverse;
padding: 50px 20px;
}
.box-item {
align-items: center;
background: #3a7cca;
border-radius: 4px;
color: white;
display: flex;
flex-grow: 1;
height: 40px;
justify-content: center;
margin-right: 2px;
position: relative;
}
.box-item:before,
.box-item:after {
border-color: transparent;
border-style: solid;
border-width: 20px 0 20px 10px;
border-radius: 4px;
content: "";
height: 0;
position: absolute;
top: 0;
width: 0;
}
.box-item:before {
left: -1px;
border-left-color: white;
}
.box-item:after {
right: -9px;
border-left-color: #3a7cca;
}
.box-item:first-child {
margin-right: 0;
}
.box-item:last-child:before,
.box-item:first-child:after {
display: none;
}
<div class="box">
<div class="box-item">3</div>
<div class="box-item">2</div>
<div class="box-item">1</div>
</div>
I can't get my css to center the content dive in IE. It works in all other browsers. Please help. I have tried align = center as well and even that didn't help. If there is something that I have done in and around the content div to make it not center I would like to know. Thank you.
BODY {
background-color: #eee;
margin: 0;
font-family: Helvetica, Arial, sans-serif;
}
.wqlogin .fullwrap {
width: 100%;
margin: 0 auto;
background-color: #f7f7f7;
}
.wqlogin .topp {
width: 100%;
height: 110px;
background-color: #fff;
border-bottom: solid 1px #ddd;
}
.wqlogin .topp .wq_logowrap {
width: 910px;
margin: auto;
}
.wqlogin .topp .wq_logowrap .logo {
float: left;
/*margin-left: 10px;*/
display: block;
width: 115px;
height: 105px;
}
.wqlogin .content {
width: 910px;
background-color: #fff;
border: solid 1px #ccc;
margin: auto;
margin-top: 10px;
margin-bottom: 10px;
overflow: hidden;
}
.wqlogin .left {
display: block;
float: left;
width: 620px;
overflow: hidden;
}
.wqlogin .left .wrap {
margin: 5px 0 15px 5px;
}
.wqlogin .left .imgholder {
float: left;
margin: 8px 8px 15px 8px;
width: 288px;
height: 186px;
}
.wqlogin .rgt_login {
display: block;
float: left;
width: 280px;
height: 320px;
overflow: hidden;
}
.wqlogin .rgt_login .logwrap {
padding: 10px;
}
.wqlogin .footer {
width: 100%;
float: left;
overflow: hidden;
background-color: #fff;
}
.wqlogin .toptxt {
padding: 10px 10px 0 10px;
font-size: 24px;
/*font-weight: bold;*/
color: #666;
}
.wqlogin .toptxt .sml {
font-size: 20px;
padding-top: 0;
}
.wqlogin .error_txt {
float: left;
width: 100%;
overflow: hidden;
color: #8d0000;
}
.wqlogin .error_txt .message {
float: left;
overflow: hidden;
}
.wqlogin .username, .wqlogin .password {
width: 100%;
margin: 0 0 5px;
padding: 5px 5%;
display: block;
}
.wqlogin .login_link1 {
font-size: 12px;
text-decoration: none;
}
.wqlogin .vzw_header {
border-bottom: solid 1px #ddd;
}
.wqlogin .vzw_button {
margin: 10px 0 10px 0;
}
/*TABLE { border-spacing: 0px; border-collapse: collapse; }*/
For older versions of IE, use a text-align: center in the surrounding container.
Also, make sure the surrounding container is centered itself.
My picture #minecraftLogo is also my nav is being pushed off the page. I'm not too sure why that is. What am I doing wrong here? I am also getting this weird colour formation around my nav links and Im not too sure why that is.
body{
border: 0px ;
}
section{
border: 1px solid black;
margin-bottom: 5px;
background: #0000FF;
}
#Title{
margin-left: 180px;
margin-top: 30px;
}
#SubtitleOne{
position: relative;
border: 1px solid black;
width: 500px;
height: 130px;
margin-left: 100px;
margin-top: 120px;
font-size: 8;
}
#SubtitleTwo{
position: relative;
border: 1px solid black;
width: 500px;
height: 130px;
margin-left: 100px;
margin-top: 10px;
}
#SubtitleThree{
position: relative;
border: 1px solid black;
width: 500px;
height: 130px;
margin-left: 100px;
margin-top: 20px;
}
#Links{
position: relative;
border: 1px solid black;
width: 550px;
height: 50px;
margin-left: 25px;
margin-top: 100px;
}
nav{
position: absolute;
left: 100px;
margin-bottom: 100px;
}
#P1{
position: relative;
left: 10px;
top: -10px;
}
#MinecraftLogo{
position: absolute;
}
#YoutubeVideo{
position: fixed;
bottom: 0px;
left: 500px;
}
header{
position relative
padding: 20px;
left: 90px;
margin-top: -10px;
}
footer{
border: 3px dotted;
border-radius: 25px;
box-shadow: 0 0 15px 10px #fd38ab;
width: 400px;
height: 50px;
left: 300px;
bottom: 500px;
}
Look at this picture of it...
http://www.flickr.com/photos/91733140#N06/8329388242/in/photostream
How can i make this div go to the left and not the right?
it keeps messing up and i really need it to be fixed any ideas how i can make it work?
<style type="text/css">
#body {
height: 100%;
margin: 0;
padding: 0;
}
#html, body {
height: 100%;
margin: 0;
padding: 0;
background: #E0E0E0;
}
#header {
background: #FFFFFF;
height: 33px;
width: 100%;
padding: 5px 30px 5px 30px;
font-family: arial;
font-size: 30px;
border-bottom: 1px #737373 solid;
position: fixed;
top: 0;
}
#container {
width: 1205px;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
}
#box {
width: 228px;
height: auto;
background: #FFFFFF;
border: 1px #5E5E5E solid;
margin: 5px;
float: left;
font-family: arial;
}
#box_title {
width: 218px;
height: auto;
padding: 5px;
background: #5E5E5E;
color: white;
border-bottom: 1px #FFFFFF solid;
float: left;
font-family: arial;
}
#box_img {
width: 210px;
height: auto;
float: left;
margin-left: auto;
margin-right: auto;
}
#box_options {
width: 228px;
height: 40px;
background: #FFFFFF;
color: #000000;
border-top: 1px #5E5E5E solid;
float: left;
font-family: arial;
Not to judge you by your open tabs but you seem to want a "Pinterestish" wall. This is not easy via vanilla css, may I suggest looking into jquery masonry?
http://masonry.desandro.com/
It does all the heavy lifting for you