I did try using position:fixed; (I saw another topic with similar problem)
Here is the page I am working on
The Problem: click on the "*Click to view acute conditions" which is under Same Day Appointments. This opens up a div that is position:fixed 50% top & left of the page but not when scrolled down.
Here is a Jfiddle (only the preview frame: http://jsfiddle.net/u5cXv/2/embedded/result/)
The Code: Below is the parent div
#ubookwhite_content {
Background-color:#fff;
display:none;
position: fixed;
outline:solid 10px #cccccc;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -400px;
width: 800px;
padding: 25px;
z-index:1002;
overflow: auto;
}
The Javascript is a simple open close function. Can you please help me understand why this doesn't position when scrolled down.
You are defining the styles for that element in two places. Here is the other one:
#ubookwhite_content {
Background-color: #fff;
display: none;
position: absolute;
border: solid 5px #cccccc;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -400px;
width: 800px;
padding: 25px;
z-index: 1002;
overflow: auto;
}
That second is after the first and uses position:absolute
The width of your #ubookwhite_content is 800px, but once the padding is added in, the actual element width is 850px. This is setting your element off by 50px when you use margin-left: 400px.
You can either make the width: 750px or make the offset margin-left: 425px. Either way takes into account the additional width of the padding: 25px.
http://jsfiddle.net/u5cXv/4/
Your website doesn't match what you copy and pasted onto the website. The position on the website isn't fixed: it's absolute, which is completely different. If your code says fixed, you may need to re-upload to your server.
This is apparently located on index: line 860.
I would also recommend using google's "inspect" command in order to investigate later issues.
Try removing the margins or playing around withit. Keep the position: absolute
margin-top: -150px;
Related
I was having problems with positioning my language option at the top of my blog. It was always on a different position on a Windows and a Mac. So I thought about making an inner and outer div. But I'm having troubles with the position of my inner div.
This is the result I want:
This is what I have now
This is the code I have in my CSS on wordpress:
EDITED
.outer {
margin: auto;
overflow: visible;
background: white;
margin-left: 925px;
margin-top: -8px;
margin-bottom:-30px;
font-size: 11pt;
color: #E1BDC3;
border: 1px dotted #999999;
border-radius:8px;
width: 255px;
height: 48px;
padding-top: 15px;
padding-left: 10px;
z-index: 1000;
}
.inner {
position: relative;
left: 160px;
top: -336px;
background: transparent;
width: 150px;
z-index: 10001;
}
The block with the border just has <div class="outer"...
And the inner div, the dropdown, is a widget that I'm trying to position at the top of the page, I gave the widget "inner" class.
QUESTION --> If I put marging-right: 4px, it starts counting from the right of the screen, how do I position (for example 4px) from the right of the Outer div?
So that it starts counting from the dotted border on the right (or the left, doesn't matter)
(I'm a beginner in HTML so if you know how to help me, could you please tell me what code I need, and where?
You should use % to refer to positions on the screen. But your problem can be fix using position: relative to refer to the poition inside the parent object, and moving it with top and left
.outer {
margin: auto;
overflow: visible;
background: white;
margin-left: 925px;
margin-top: -8px;
margin-bottom:-30px;
font-size: 11pt;
color: #E1BDC3;
border: 1px dotted #999999;
border-radius:8px;
width: 255px;
height: 48px;
padding-top: 15px;
padding-left: 10px;
z-index: 1000;
}
.inner {
position: relative;
left: 159px;
top: -17px;
background: transparent;
width: 100px;
}
<div class="outer">
OUTER
<div class="inner"><select><option>INNER</option></select></div>
</div>
To answer your question "how do I position (for example 4px) from the right of the Outer div?" you would do that by first determining how the elements relate to each other. This is determined by the position and display CSS properties. Depending on which position and display values your two elements have, the answer will vary.
The HTML markup you provide for your "outer" element shows that it is a div. Your CSS does not define a position for this element, so the browser default is static, i.e. position:static.
Your "inner" element is a mystery to us. If it is another div then it is another static position which we can help with. If it is a ul then it is an inline element, which will require a different answer.
Your markup is important here.
EDIT
First thing, your 'outer' div is not actually containing your inner div. This is the outer div markup:
<div class="hide_on_mobile outer">Choose language</div>
You'll see it doesn't contain the element in question that we want to position. Therefore, like my first sentence states, we need to understand how our element in question relates to those around it.
In your situation, you are not in a good spot because the element you want to position is contained by elements that don't relate to your target element. Therefore the only way to position them in the same spot on all screen sizes is to position them absolutely and use percentages.
Or the easy way, if you want to stick to one screen width:
.inner {
position: relative; //override by .widget_polylang element
left: 27px;
top: -17px; //override by .widget_polylang element
background: transparent;
width: 100px; //override by .widget_polylang element
}
You'll see some of your key/value parameters are being outclassed by the .widget_polylang element. The only way to change those is to edit the styles of .widget_polylang or add increased CSS specificity to .inner.
I want a HTML-table to show the scrollbars (both horizontal and vertical), as soon as the browser window becomes too small to fully show the table.
Please see the following example: JSFiddle example
I suspect the main-div to be the faulty one:
.myMain {
background-color: #e9edf1;
overflow: auto;
width: 100%;
top: 130px;
left: 20px;
bottom: 1px;
position: absolute;
}
The problem with the example code is the following: the horizontal scrollbar appears, if the window becomes too small, but it appears only after a few pixels of the tables are already cut/ invisible when resizing the browser window with the mouse. And it is shown at the bottom of the page, but I want it to be shown directly at the bottom of the table.
And the vertical scrollbar doesn't appear at all. I don't want to change the page layout visible for the user, so that's not an option.
There were a couple things that threw it off for me, mainly the absolute positioning and left that was pushing the div across. Because you set it as absolute it will ignore other elements and react in it's own desired way.
Also disabling scroll via overflow:hidden on html/body will cut off part of the div coupled with it being absolutely positioned.
I've made a few changes, see below. But check the link and let me know if the desired behavior has been achieved now.
https://jsfiddle.net/0ksb8s8x/1/
html, body {
font-family: Segoe UI, Tahoma, Arial;
font-size: 11px;
margin: 0;
padding: 0;
background-color: #e9edf1;
overflow:auto;
width:100%;
height:100%;
}
.myMain {
background-color: #e9edf1;
overflow: auto;
width: 105%;
padding: 20px;
top: 0px;
left: 0px;
bottom: 1px;
position: relative;
}
I've finally found a solution which is not perfect but it works:
I used Joe Corby's Fiddle and changed only the following part in the CSS:
.myMain {
background-color: #e9edf1;
overflow: auto;
padding-left: 30px;
padding-top: 20px;
position: absolute;
top: 120px;
bottom: 0px;
left: 0px;
right: 0px;
width: auto;
height: auto;
}
The scrollbars are shown at the bottom and at the right-hand-side of the browser-window (not of the table) but at least it works.
After my website was completed, everyday I am trying to modify things that would make it more responsive. It's made in Muse so don't expect much of "responsiveness".
I have an element with this class:
#labelstrong
{
z-index: 17;
width: 633px;
background-color: transparent;
color: #FFFFFF;
text-align: justify;
position: fixed;
top: 1542px;
left: 164px;
}
Normally, the element is in the middle of the screen. But when I zoom out, the element maintains the same distance to the top of the screen (because of the top attribute of course). How can I define its position in a way that even if I zoom in or out it will still be in the middle of the screen.
UPDATE:
The problem is (and I forgot to mention it) that the position must be fixed as there is an horizontal scrolling feature for all elements ( they come from the right of the screen) and so they have to be on a fixed position.
UPDATE 2: Here is a live example. Imagine that the class is applied on each TAG (not the menu of course).
http://2323029s8s8s8.businesscatalyst.com/index.html
You can add for those big tags the following css:
.fixed-big-tag{
top: 50%;
transform: translateY(-50%);
}
Also as a counter measure, make sure the <body> and the <html> have 100% heights
Another idea would be to use the !important rule for the top property to overwrite what Muse outputs.(or any rule that needs to be overwritten)
If it works, you could probably add a new class on all these tags that need to be centered and overwrite it via css
Check it out, and let me know how it goes.
See this resource for techniques to centering elements using CSS: Centering in CSS: A Complete Guide
If you create a relatively-positioned parent container element, you can center your child element easily:
.parent {
position: relative;
}
#labelstrong {
z-index: 17;
background-color: transparent;
color: #FFFFFF;
text-align: justify;
position: absolute;
width: 634px;
height: 40px;
top: 50%;
left: 50%;
margin: -20px 0 0 -317px;
}
Note that the margin offsets are half of the width and height.
Try using percentages instead of pixels, like:
top: 10%;
If you want to horizontally center, try setting the margin to auto:
margin: 0 auto;
Your code would look like this:
#labelstrong {
z-index: 17;
width: 633px;
background-color: transparent;
color: #FFFFFF;
text-align: justify;
position: relative;
top: 10%;
margin: 0 auto;
}
Take a look at this example: http://jsfiddle.net/5a6fyb21/
jQuery would be your best bet.
I would just set your class to a fixed position then try using the following.
$(window).resize(function() {
var middle = $(window).height();
$('.middle').css('top', hello / 2);
});
The resize function is used so that it will remain in position if the window is resized.
Centered label over horisontally scrollable content:
http://jsfiddle.net/cqztf9kc/
.fixed {
margin: 50%;
position: fixed;
z-index: 1;
}
.content {
x-overflow: scroll;
height: 100%;
}
Set up a website at www.fleetwoodlifecoaching.co.nz and everything looks great when viewed from a desktop computer, however when I view the website from my iPad an odd white space appears between two fixed position divs that make up the nav bar and heading areas (see screenshot). They've been positioned pretty precisely and clearly the way iPad decodes this breaks it - what's the best way to get around this?
Thanks in advance for your help
Apparently I don't have enough reputation to post an image so here's an imgur link. http://imgur.com/0PEn41r
EDIT: So basically I have two divs that are right up against one another, one called nav that runs down the left side and another called header that runs along the top. Below is the CSS for each:
#nav {
position: fixed;
margin-left: -8px;
margin-top: -17.5px;
padding-left: 40px;
width: 140px;
height: 100%;
background: #8E8074;
list-style: none;
z-index: 7;
}
#header {
position: fixed;
width: calc(100% + 16px);
height: 100px;
background-color: #8E8074;
margin-left: -8px;
margin-top: -120px;
padding-bottom: 3px;
z-index: 6;
}
Maybe try to make the margin on the bottom of the first block negative by a few pixels. If that pulls the second block up a bit that might cover up the white line. If that doesn't work than its clearly a coding problem and not that there actually is a gap or strip that is white in your design. Something to try maybe before you really dive into it.
The .5px is likely being rounded up to -17px by mobile safari leaving the 1px gap between the two divs, try changing the margin-top of the #nav to -18px instead of -17.5px.
The #nav style would then become:
CSS
#nav {
position: fixed;
margin-left: -8px;
margin-top: -18px;
padding-left: 40px;
width: 140px;
height: 100%;
background: #8E8074;
list-style: none;
z-index: 7;
}
I'm trying to create this design for a WP template:
http://minus.com/lbi1iH25EcKsu7
Right now I'm like this: http://www.uncensuredftw.es/plantilla-blueftw/boilerplate/index.html
I think you can get the general idea ;)
I know...it's my fault: The browser calculate the size of the window from left to right, so if I put a margin it will move the div with the 100% size to de right.
But the thing is: I don't know how to make it work :(.
I wanted to make the "black bars" with divs (I painted the ones than don't work in red and orange) and the trick worked...but only the left ones works like I want.
I'm getting out of ideas. I tried like everything I could think off, and nothing works.
Maybe you can help me? ;)
This is the html code:
<div class="barraUL"></div><div class="barraDL"></div>
<div class="presentacionbg"></div>
<div class="presentacion">
<div class="barraUR"></div><div class="barraDR"></div>
And this the css:
.barraUL {
position: absolute;
width: 50%;
height: 27px;
background-color: black;
right: 50%;
margin-right: 500px;
margin-top: -20px;
}
.barraDL {
position: absolute;
width: 50%;
height: 27px;
background-color: black;
right: 50%;
margin-right: 500px;
margin-top: 309px;
}
/* This next two are the ones than "doesn't work" */
.barraUR {
position: absolute;
width: 50%;
height: 27px;
background-color: red;
left: 50%;
margin-left: 500px;
margin-top: -4px;
}
.barraDR {
position: absolute;
width: 50%;
height: 27px;
background-color: orange;
left: 50%;
margin-left: 500px;
margin-top: 325px;
}
The right divs are expanding to 50% the window width. For a liquid layout where the bars extend to the length of the window and then cut off, you'd usually make an underlaying div (in this case the bars and the black patterned background) and then expand it to 100% of the window. You can't make an additive layout using relative lengths like percent (left div + fixed middle image + right div) with just CSS (especially not with absolute positioning). If you insist on using this, you'll have to overflow: hidden; the html {} or body {} tag after centering your content and that's just bad practice. I recommend just having two long divs go all the way across the screen under your sprite image.