just practicing with css dropdown. In the following code, the .container div (blue colored one) contains the child dropdown div .dropdown (green colored one, I have disabled this color to avoid confusion). The container div is perfectly horizontally aligned to its above div .content-small (red colored one). Since I want the position and margins of all the div's to be mantained whenever I scale down the browser window, I used left: 41.66%; in percentage so that the container div should stay aligned to its top red div.
The container div stays aligned, but whenever the window is scaled down to lowest size, the container div shifts slightly to the right. PLEASE see the attached screenshot. Why is that?
*{
box-sizing:border-box;
}
html,body {
margin: 0px;
height: 100%;
width: 100%;
left: 0px;
top: 0px;
background-color: rgba(0,0,0,1);
padding: 0px;
}
a {
color: rgba(0,0,0,1);
text-decoration: none;
}
a:hover {
color: rgba(0,0,255,1);
}
.wrapper {
height: 600px;
max-width: 960px;
margin-left: auto;
left: 0px;
top: 0px;
background-color: rgba(204,204,204,1);
margin-right: auto;
position: relative;
padding: 0px;
margin-top: 0px;
}
.content {
position: relative;
box-sizing: border-box;
height: 100%;
max-height: 200px;
max-width: 600px;
background-color: #FFF;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
left: 0px;
right: 0px;
font-size: 32px;
text-align: center;
border: 3px solid rgba(0,0,0,1);
border-radius: 15px 15px 0px 0px;
width: 100%;
}
.content-small {
max-width: 100px;
height: 100%;
max-height: 50px;
background-color: rgba(255,0,0,1);
position: relative;
margin-right: auto;
margin-left: auto;
border: 3px solid rgba(0,0,0,1);
top: 5px;
margin-top: 10px;
}
.content-small:hover + .container, .container:hover{
visibility: visible;
}
.container{
visibility: visible;
height: 100px;
max-width: 100px;
background-color: rgba(204,102,255,1);
position: absolute;
left: 41.66%;
}
.dropdown {
/* [disabled]background-color: rgba(0,255,0,1); */
/* [disabled]border: 3px solid rgba(255,0,0,1); */
width: 100px;
height: 100%;
max-height: 50px;
position: relative;
margin-right: auto;
margin-left: auto;
top: 3px;
}
<div class="wrapper">
<div class="content">
<div class="content-small">Home</div>
<div class="container">
<div class="dropdown"></div>
</div>
</div>
</div>
That's because you're saying left: 41.66%;, which is not an accurate way to center. Instead, use this:
CSS
.container {
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
*{
box-sizing:border-box;
}
html,body {
margin: 0px;
height: 100%;
width: 100%;
left: 0px;
top: 0px;
background-color: rgba(0,0,0,1);
padding: 0px;
}
a {
color: rgba(0,0,0,1);
text-decoration: none;
}
a:hover {
color: rgba(0,0,255,1);
}
.wrapper {
height: 600px;
max-width: 960px;
margin-left: auto;
left: 0px;
top: 0px;
background-color: rgba(204,204,204,1);
margin-right: auto;
position: relative;
padding: 0px;
margin-top: 0px;
}
.content {
position: relative;
box-sizing: border-box;
height: 100%;
max-height: 200px;
max-width: 600px;
background-color: #FFF;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
left: 0px;
right: 0px;
font-size: 32px;
text-align: center;
border: 3px solid rgba(0,0,0,1);
border-radius: 15px 15px 0px 0px;
width: 100%;
}
.content-small {
max-width: 100px;
height: 100%;
max-height: 50px;
background-color: rgba(255,0,0,1);
position: relative;
margin-right: auto;
margin-left: auto;
border: 3px solid rgba(0,0,0,1);
top: 5px;
margin-top: 10px;
}
.content-small:hover + .container, .container:hover{
visibility: visible;
}
.container{
visibility: visible;
height: 100px;
max-width: 100px;
background-color: rgba(204,102,255,1);
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
.dropdown {
/* [disabled]background-color: rgba(0,255,0,1); */
/* [disabled]border: 3px solid rgba(255,0,0,1); */
width: 100px;
height: 100%;
max-height: 50px;
position: relative;
margin-right: auto;
margin-left: auto;
top: 3px;
}
<div class="wrapper">
<div class="content">
<div class="content-small">Home</div>
<div class="container">
<div class="dropdown"></div>
</div>
</div>
</div>
JSFiddle
this site has been giving me some issues with the width of some elements with cross-browser compatibility for the tablet and phone styling.
The class is .p_phoneand .p_phone a
.p_phone {
font-size: 20px;
width: 145px;
left: 40%;
margin: 0 !important;
height: 30px;
opacity: 1;
top: -4px;
text-align: center;
color: #fff;
position: relative;
}
.p_phone a {
color: #fff;
background-color: #1968a1;
font-weight: 800;
padding: 5px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
Basically, It needs to match the width of this class, which is a image, which it does on chrome and opera, but on safari, firefox, and edge, it does not match, and breaks to the next line.
.p_call {
font-size: 20px !important;
top: -13px;
left: 40%;
width: 145px;
margin: 0;
background-image: url(http://dchna4xuxekpx.cloudfront.net/wp-content/uploads/2016/06/15142416/call-us.png);
vertical-align: middle;
height: 40px;
line-height: 40px;
text-align: center;
position: relative;
float: left;
padding: 0;
}
Increasing the width to 150px fixes it, but it is then too wide for the image.
How it needs to be:
Try Changing these class's (have checked them on this link provided by you)
.textwidget {
font-size: 18px;
position: relative;
width: 160px;
margin: auto;
}
.p_call {
font-size: 20px !important;
top: -13px;
left: 40%;
margin: 0px;
background-image: url('http://dchna4xuxekpx.cloudfront.net/wp-content/uploads/2016/06/15142416/call-us.png');
vertical-align: middle;
height: 40px;
line-height: 40px;
text-align: center;
position: absolute;
float: left;
padding: 0px;
width: 100%;
background-size: 100%;
}
.p_phone {
font-size: 20px;
margin: 0px !important;
height: 30px;
opacity: 1;
top: 27px;
text-align: center;
color: #FFF;
position: absolute;
width: 100%;
left: 40%;
}
.p_phone a {
color: #FFF;
background-color: #1968A1;
font-weight: 800;
padding: 5px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
display: inline-block;
width: 100%;
}
The divs belonging to p_call class and p_phone were not wrapped properly by textwidget class. Hence we have to give two different width's, now since textwidget is wrapping both the class's, they will have same width. Hope it helps. Tested on both chrome and firefox.
Try to add this to your styling block for .p_phone a:
white-space: nowrap;
i have some CSS styling issues. first thing i have a from with 2 inputs and a button. the button is perfect positiond when i resize the window but the inputs dance around, why?
and het h2 this is appended when the button is pushed, the little arrow has to be always in the middle. Also the text needs to be always in the middle of the pop up, horizontal and vertical. Is this posible? and how?
here is the form:
#lname, #fname {
width: 90%;
height: 50px;
margin-top: 6%;
border-radius: 5px;
background-color: #1e2228;
color: #ddd;
border: 0px;
font-size: 2em;
position: absolute;
text-align: center;
}
#fname {
left: 40px;
top: 18px;
}
#lname {
left: 40px;
top: 84px;
}
#btn {
width: 100%;
height: 50px;
margin-top: 72px;
border-radius: 0 0 5px 5px;
background-color: #1e2228;
color: #ddd;
border: 0px;
font-size: 2em;
position: absolute;
left: 0px;
top: 128px;
}
here is the pop up window:
h2 {
margin: auto;
margin-top: 100px;
position: relative;
width: 50%;
height: 205px;
padding: 0px;
background: #2F3742;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-align: center;
font-size: 2em;
color: #8092AA;
margin: 100px auto 0 auto;
padding-top: 6%;
}
h2:after {
content: '';
position: absolute;
border-style: solid;
border-width: 0 20px 20px;
border-color: #2F3742 transparent;
display: block;
width: 0;
z-index: 1;
top: -20px;
left: 355px;
}
ofcourse you have to see this in action! here you go! http://codepen.io/shiva112/pen/dGMrWB
Why do you use absolute positioning? It's a really mess, but just add for your input elements margin-left:5%. For your heading arrow: h2:after{left:50%; margin-left:-20px; }And if you want to center the text vertical and horizontal, you need to wrap your h2 text content in span or any other element you like. Then set your h2 element style to: { display:table; width:100%; } and his child element to: { displat:table-cell; vertical-align:middle; }
the problem is div, called 'dragger_container' doen't behave as i expect, and gets out from the parent div. it is not acceptable, cause it's an element that shows user scroll progress (it's a jquery plugin mCustomScrollBar) and interacts with user.
ask anyone for help.
thanks in advance
ps
cannot attach screen cause of reputation, uploaded it here:
screen_url
.mcs_my_container
{
width: 100%;
height: 100%;
}
.mcs_my_container .customScrollBox
{
margin-top: 10px;
position: relative;
height: 80%;
width: 100%;
overflow:hidden;
border: 1px solid green;
display: block;
}
.mcs_my_container .customScrollBox .container
{
position: absolute;
width: 70%;
top: 0;
float: left;
margin-left: 20px;
}
.mcs_my_container .customScrollBox .content
{
clear: both;
}
.mcs_my_container .dragger_container
{
position: absolute;
/*top: 10px !important;*/
width: 2px;
/*height: 50px;50px
height: 100%;*/
height: 110px;
top: 0px;
right: 20px;
float: right;
background: #000;
cursor: s-resize;
-moz-border-radius: 2px;
-khtml-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
cursor: s-resize;
}
.mcs_my_container .dragger
{
position: absolute;
width: 4px;
/*height: 100%;*/
height: 10px;/* !important;*/
background: #999;
text-align: center;
line-height: 10px;
color: #666;
overflow: hidden;
cursor: pointer;
-moz-border-radius: 2px;
-khtml-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
margin-left: -1px;
}
.mcs_my_container .dragger_pressed
{
position: absolute;
width: 6px;
margin-left: -2px;
height: 10px;
background: #999;
text-align: center;
line-height: 10px;
color: #666;
overflow: hidden;
-moz-border-radius: 4px;
-khtml-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
cursor: s-resize;
}
.divNoteText
{
position: static;
border: 1px solid red;
word-wrap: break-word;
}
You need to add position: relative to the parent container of dragger_container that you want it to be positioned within.
If you don't do this then dragger_container will be positioned absolutely to the nearest parent element that is relatively positioned, or if there isnt one then it will be positioned within body.
Hi i have the big problem is that all browsers positioning differently.
Each template in the center of the other shows do not represent correctly.
Say When a person opens the site instead of the template.
One side shows less over another.
I did some work at my computer it all works in all browsers.
I do not understand what I was doing wrong the first time for me after all this is so.
I tried the other browsers and fonts and change the screen size.
Does not fix the problem.
Why is this happening for all browsers ?
Also tried to use position: absolute, but nothing works, too.
Maybe you can look at my website and see what you see it correctly or in bad what I am doing wrong and why it works for me correctly using a different position: absolute or relative or all browsers ?
just on the other computers browsers do not show correctly positions
Here is my code can you fix it cuz i didn't understand what where to create div container inside wrap or where ?
html,body{
background-color: #181818;
color: #fff;
height: 100%;
width: 100%;
overflow-x: hidden;
overflow-y: auto;
}
*{
padding: 0;
margin: 0;
}
.wrap{
position:absolute; bottom: -1px; top: 10px;
margin-left: 4%; *margin-left: 5%;
margin-right: 4%; *margin-right: 5%;
}
.time{
color: #fff;
font-size: 8pt;
font-weight:bold;
position:absolute; top: -2px; left: 943px; width: 150px;
position:absolute; *top: 3px; *left: 930px; width: 150px;
}
.top{
width: 1024px;
height: 30px;
padding-left: 20px;
line-height: 25px;
background: #444;
background:transparent url('top.png'); background-repeat: repeat-x;
-webkit-border-top-right-radius: 10px;
-khtml-border-radius-topright: 10px;
-moz-border-radius-topright: 10px;
border-top-right-radius: 10px;
-webkit-border-top-left-radius: 10px;
-khtml-border-radius-topleft: 10px;
-moz-border-radius-topleft: 10px;
border-top-left-radius: 10px;
}
.header{
width: 1044px;
*width: 1024px;
height: 150px;
background: #333;
position:relative; bottom: 10px;
background:transparent url('head.png'); background-repeat: repeat-x;
}
.menu{
width: 1024px;
height: 45px;
background: #474747;
padding-left: 20px;
position:relative; bottom: 11px;
background:transparent url('menu.png'); background-repeat: repeat-x;
}
.list {
position:absolute; left: 20px; top: 1px;
}
.content{
width: 1024px;
height: 1200px;
background: #000;
padding-left: 20px;
background: #111;
position:relative; bottom: 10px;
}
.aprasymas{
position:absolute; top: 10px; width: 350px;
}
.forma{
position:absolute; top: -3px; left: 720px;
position:absolute; *top: 1px; *left: 700px;
background:transparent url('forma.png'); background-repeat: no-repeat;
width: 312px; height: 157px;
}
.imgbox{
position:absolute; top: 10px;
}
.photo{
position:absolute; top: 150px; left: 590px; width: 441px; height:141 *top: 60px; *left: 570px;
background:transparent url('photo.png'); background-repeat: no-repeat;
}
.photo2{
position:absolute; top: 280px; left: 590px; width: 441px; height:141 *top: 60px; *left: 570px;
background:transparent url('photo.png'); background-repeat: no-repeat
}
.photo3{
position:absolute; top: 410px; left: 590px; width: 441px; height:141 *top: 60px; *left: 570px;
background:transparent url('photo.png'); background-repeat: no-repeat;
}
.phototekstas{
position:relative; top: -15px; left: 90px; width: 300px;
position:relative; *top: -16px; *left: 85px; *width: 380px;
color: #fff;
font-size: 10pt;
font-size: *8pt;
padding: 3em;
}
.footer{
width: 1024px;
height: 35px;
background: #333;
padding-left: 20px;
position:relative; bottom: 10px;
background:transparent url('footer.png'); background-repeat: repeat-x;
-webkit-border-bottom-right-radius: 10px;
-khtml-border-radius-bottomright: 10px;
-moz-border-radius-bottomright: 10px;
border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-khtml-border-radius-bottomleft: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-left-radius: 10px;
}
.copyright{
color: #aaa;
position:absolute; width: 310px; left: 835px; bottom: 12px;
position:absolute; width: 310px; *left: 820px; *bottom: 13px;
font-size: 8pt;
}
#-moz-document url-prefix() {
.copyright {
position:absolute; width: 310px; left: 810px; bottom: 12px;
}
}
#-moz-document url-prefix() {
.phototekstas {
position:relative; top: -18px; left: 90px; width: 300px;
}
}
#-moz-document url-prefix() {
.time {
position:absolute; top: 1px; left: 945px; width: 150px;
}
}
#-moz-document url-prefix() {
.forma {
position:absolute; top: 1px; left: 720px;
}
}
/* will be red only in google chrome */
#media screen and (-webkit-min-device-pixel-ratio:0) {
.time{position:absolute; top: 3px; left: 950px; width: 150px;}
}
/* Opera */
#media not screen and (1) {
.time {
position:absolute; top: -2px; left: 950px; width: 150px;
} /* OP 11 */
}
This is the main what i'm positioning all template without hard work.
.wrap{
position:absolute; bottom: -1px; top: 10px;
margin-left: 4%; *margin-left: 5%;
margin-right: 4%; *margin-right: 5%;
}
Here's my link: http://mrblackscripts.3owl.com/
Create a relatively-positioned "container" div, then set absolutely positioned objects inside of that div.
That will absolutely position the elements on the page. However, it is probably not best-practice.