I'm using jQuery to create a "dialog" that should pop up on top of the page and in the center of the page (vertically and horizontally). How should I go about making it stay in the center of the page (even when the user resizes or scrolls?)
I would use
position: fixed;
top: 50%;
left: 50%;
margin-left: -(dialogwidth/2);
margin-top: -(dialogheight/2);
but with this solution and a browsers viewport-size of less than your dialog is, parts of the dialog will be unreachable on top and left sides because they are outside the viewport.
So you have to decide if it's suitable for your dialogs size.
(CSS doesn't know how to calculate, yet. So the little math over there has to be done by you, right now. Therefore your dialog has to be a fixed size which you have to know.)
Edit:
Oh yes, if you want to serve your dialog for the IE6 too, you should do something like this:
#dialog { position: absolute; }
#dialog[id] { position: fixed; }
Since IE6 is not capable of fixed positions and also not capable of attribute-selectors, the IE6 will be the only one who has the position set to absolute. (This will only affect with scrolling behaviour. absolute stays on its place in page and fixed stays on its place in the browser. The rest is similar.)
Check out Infinity Web Design's piece on this.
#mydiv {
background-color:#F3F3F3;
border:1px solid #CCCCCC;
height:18em;
left:50%;
margin-left:-15em;
margin-top:-9em;
position:absolute;
top:50%;
width:30em;
}
This is the CSS they use, and I've tested it out in multiple browsers.
You'll note that the left margin is negative half the width and the top margin is negative half the height. This takes care of the centering, more or less, with absolutely positioning it at 50% top and left.
To put a div horizontally in the middle I always put margin: 0 auto. But it cannot be a floating element and in IE I always needed to put a div around and then give it the property text-align: center, so that the inside div is centered horizontally.
If you know the element's offset dimensions (width/height + padding), you can use this CSS:
elementContainerSelector {
position: fixed; /* You'll of course need to handle browsers that don't support fixed positioning */
top: 0;
left: 0;
width: 100%;
height: 100%;
}
elementSelector {
position: absolute;
top: 50%;
left: 50%;
margin: -[half of offset height]px 0 0 -[half of offset width]px;
}
Hurix's answer works too, and bear in mind the caveats in that answer as well.
Keep margin-left:auto and margin-right:auto
Related
I am trying to achieve this "stupid" thing, but I can't find a solution.
I have a certain number of images one above the other, I would try to put background-color which is aligned vertically in the middle of the first and last image.
more difficult to explain than to understand, I made an image explanatory so I think it is more easy to understand
I tried to make a codepen, but without success http://codepen.io/mp1985/pen/BoEMPN
.bg {
background: red;
top: 25%;
position: absolute;
width: 100%;
height: 100%;
bottom:0;
left: 0;
right: 0;
z-index: 100;
backgrund-position: center center;
z-index: 1;
}
do you have any advice or suggestion?
You can't set the parent's height according to an absolutely positioned element. So you have to use fixed lengths rather than percentages.
.container {
height: 900px; // img-height * 4
}
Then, for the background color to align to the center of the first image, add this:
.bg {
top: 150px; // img-height / 2
}
As for horizontally centering the imgs, use
.box-images {
left: 50%;
margin-left: -300px; // img-width / 2
}
Well, I'm not sure I've understood but how you started isn't correct: you want your images at the center of the page, right? Well, to do that they must be positionated with
position: relative;
left:50%;
Then, you created a div as a background. There you can choose: you can create a dinamic background with JS, or add only a certain number of images with a certain known height. I guess you are creating a static page, so set the div with
position: relative;
min-height: 900px; //(imgNum-1)*imgHeight
top: 150px; //imgHeight/2
and with what you have already set.
If you have width problems, min-width and max-width are useful attributes.
In my mind it works. Please comment for issues and rate positive if useful
I've written some code where when I click on an image it fades out and fades in a new div which should be vertically aligned. I use the same code as my logo which is originally vertical-align: middle, so I don't see the issue.
The code I'm using currently is this:
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
margin: auto;
Here is the JSFiddle of a section of my code: http://jsfiddle.net/L79kte39/
Vertical alignments in CSS can be tricky. Here's a good article I go back to when I haven't done it for a while:
http://phrogz.net/css/vertical-align/
Apparently (read: supposedly), CSS has been adopted enough for the following to work fairly universally:
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
Source
Here's my version. It uses vertical-align...with a lot of twists. It does not use transform, or any exact pixel widths. It does use one extra container.
The key is this:
.cod-valign:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
which creates an empty inline-block that fakes vertical-align (meant for text-row character placement) into thinking the current line of text contains a 0-character, 100%-tall string, at the center of the div. Then, the next element aligns next to it by also setting vertical-align. (I applied the image the same way)
It's tricky, but probably easier to understand if you remember that vertical-align was first intended for things like aligning large characters in a line of text in the correct way. (ie, if the first letter of a book chapter is large, does the rest of the text go at its top, or its bottom?)
http://jsfiddle.net/7qtLLakq/
#cod-options would need a height to have it centered the way the logo is centered. Try height:200px
I'm having some issues with a webpage of mine, mainly on mobile devices but it also affects desktop devices too, I would be willing to award a bounty (as and when stackoverflow allows me) to whomever can help with these problems
HTML: http://pastebin.com/raw.php?i=bbFsMcwT
CSS: http://pastebin.com/raw.php?i=SGMwt3cs
JSFiddle: http://jsfiddle.net/D8SJD/
Issue 1 - Left/Right Scroll Image Buttons
Currently my left and right scroll image buttons are done in html using onmouseover and onmouseout I want to be able to convert them into css based "buttons"
Issue 2 - Dynamic Resolution(s)
The header and footers aren't dynamic with different resolutions for example, I created the page designed on a 1680x1050 monitor which looks like: Desktop 1680x1050 however making the window smaller it looks like: Desktop Small Window
On a Nexus 4 mobile phone on default zoom it looks like: Mobile Original Zoom
On a Nexus 4 mobile phone zoomed out to as far as it can go it looks like: Mobile Max Distance
On a Nexus 4 zoomed out and scrolled to the bottom (so that the browsers URL bar disappears) it looks like: Zoomed out without URL bar (the footer of the actual webpage vanishes)
On a Nexus 4 zoomed out and scrolled just off from the bottom (so that the browsers URL bar is visible) it looks like: Zoomed out with URL bar (the footer returns)
.
The placeholder image and arrows are supposed to be in the center of the footer and headers and should shrink in accordance to the screen resolution.
Mobile device default zoom (if possible) needs to be decreased so they can see more and on getting smaller (if possible) if it gets close to Mobile Original Zoom then the Up to Top, Down to Key, placeholder logos should vanish...
Please see images at bottom of this post
For the mobile devices I tried things like below just for testing but none of them worked...
#media (max-width: 640px) {
#header > a img {
display: none;
}
}
EDIT 14/11/2013 # 01:58GMT
On a 1920x1080 screen it looks kind of okay although there is a big gap between the text and the placeholder image as seen below:
On a 1680x1050 screen it looks roughly how it should take note of where "Semi" is located and compare to the 1920x1080 image from above.
On a 600x600 screen it appears as follows, which as you can see there is a big gap between the placeholder and the left arrow but on the right arrow there is no gap and infact it overflows, as for the text it too is too far to the right.
Type
#media screen and (max-width:640px) {
/* Your specific styles go here */
}
and dont forget to add
<meta name="viewport" content="width=device-width,initial-scale=1.0">
Hope that helps :-)
I see a border around your links, remove from your links:
a{
border:none ;
}
for first issue you can do it with CSS, just remove <img> tag inside <a> tag like this:
<div class="footleft">
<a class="def" href="javascript: void(0);">
</a>
</div>
create image buttons like this:
then set background to <a> tag like this:
#footer .footleft a {
width: 100px;
height: 47px;
display: block;
background: url(path/to/leftarrow.png);
background-position: 0 0;
}
#footer .footright a{
width: 100px;
height: 47px;
display: block;
background: url(path/to/rightarrow.png);
background-position: 0 0;
}
#footer .footleft a:hover , #footer .footright a:hover{
background-position: 0 100%;
}
second issue, I think if you remove position:absolute; from #header .headimage and #footer .footimage it will be okay.
and if your want to centerize headmid and footmid and footmidtwo you have two choices,
First: set fixed width to them and use CSS like this:
#footer .footmid {
top: 50%;
left: 50%;
position: absolute;
font-size: 15px;
width: 292px;
margin-left: -146px;
}
#footer .footmidtwo {
top: 70%;
left: 50%;
position: absolute;
font-size: 15px;
width: 126px;
margin-left: -63px;
}
#header .headmid {
top: 60%;
left: 50%;
position: absolute;
font-size: 15px;
width: 302px;
margin-left: -151px;
}
Second: if you need to have dynamic width you can use this CSS and JQuery:
CSS:
#header .headmid {
top: 60%;
left: 50%;
position: absolute;
font-size: 15px;
}
#footer .footmid {
top: 50%;
left: 50%;
position: absolute;
font-size: 15px;
}
#footer .footmidtwo {
top: 70%;
left: 50%;
position: absolute;
font-size: 15px;
}
JQuery:
var $widthhead = $(".headmid").width();
var $widthfoot = $(".footmid").width();
var $widthfoot2 = $(".footmidtwo").width();
$(".headmid").css("margin-left",$widthhead/2*(-1));
$(".footmid").css("margin-left",$widthfoot/2*(-1));
$(".footmidtwo").css("margin-left",$widthfoot2/2*(-1));
jsFiddle is here
Okay I've tried to filter out all of the irrelevant code for this solution.
See the solution here.
Most of the time, it is best to use relative positioning to fit elements absolutely inside of another element. In your case, with three different strings to fit in a 300x80 window, it's a bit crowded. I tried to place things in a logical position to demonstrate.
By placing a container in the footimage div with relative position, you can then place every element inside the footimage div absolutely relavtive to the footimage div, rather than to the entire page.
For example, what you had:
#footer .footmid
{
position: absolute;
top: 50%;
left: 50%;
}
Will place the div of class footmid at a position 50% of the page height from the top of the page and 50% of the page width from the left of the page:
This will work if every user that visits your page has the exact same resolution, however it causes problems when the don't. Obviously, this isn't a perfect world, so different resolutions will visit your page.
What you can do is use relative positioning!
Basically I tell CSS that instead of moving 50% from the top and left of the window, move 50% from the top and left of the nearest parent element with relative positioning:
You can modify the bottom, left, and right attributes of my fiddle to move the footmid elements within the relative element .footimageContainer that is the same size and in the same position as the .footimage.
As far as your arrows, I wasn't quite sure what you were trying to accomplish; your question was pretty vague, so I simply made them fade out slightly when you mouseover them. Any mouseover/out events can be handled using CSS psuedo-elements.
.element //Native and mouseout
{}
.element:hover //onmouseover
{}
Remember that if you use pseudo-elements, you have to specify the attribute that will be changing in both the native and :hover rules.
.element
{color:red;}
.element
{color:black;}
If you have any additional questions on the arrows, let me know and I'll revise my answer.
http://jsfiddle.net/D8SJD/4/
Instead of using absolute positioning, you can just take advantage of the text-align center and images and text will center automatically.
If you want offset from center, try position:relative, and top, left, right etc and it will move relative to it's central position.
Elements that are display:inline; or display:inline-block; will align according to parents text-align property, in this case text-align:center.
#footer .footimage {
display:inline;
position:relative;
top:-10px;
}
#footer .footmid {
top: 50%;
width:100%;
position: absolute;
font-size: 15px;
}
#footer .footmidtwo {
top: 70%;
width:100%;
position: absolute;
font-size: 15px;
}
As per issue 2, i could be wrong but when targeting the image through the structure of the site
i.e.
headImg a img{...}
The style wouldn't work. But if you add classes to the images the style will work; the case could be that there are some unclosed divs or elements messing with the architecture.
<div class="headimage">
<img class="placeholder" src="http://placehold.it/300x80"/>
</div>
#media screen and (max-width: 640px) {
.placeholder {
display: none;
}
}
JsFiddle here - http://jsfiddle.net/Q5bEb/
I have this template and it works fine, but I need to fix that floating menu to the left side of page (not to the left side of browser window). I need to have it stitched when I change resolution or reduce browser window.
I have one idea with two columns with float: left, but there must be a better solution.
Thank you.
You could do the following:
#content {
width: 960px;
margin: 0 230px; //change from auto to a set margin
}
#floatMenu {
position: absolute;
top: 150px;
left: 0%;
margin-left: 200px; //REMOVE this margin altogether
width: 200px;
}
The simplest solution is to move the #floatmenu div inside the #content div. Also you need to manually change the margin-left in the floatingmenu css file to -220px etc. And in addition you would need to change the position attribute on #content div to relative, to make sure the absolutely positioned menu is positioned relative to the #content div's left side.
All in all, drop the floating menu, using JS to add annoying widgets to your website is so 90s. And, well, annoying.
I've seen so many times that some websites use a kind of button or a kind of bar which always float to a specific position like left edge of screen or at the bottom of the screen and whenever we scroll down a page it remains constant in terms of position..
How to apply this either by CSS or javascript or jquery.
Thanks in advance,
Guru
The simplest way to achieve that effect is position: fixed
<div style="position: fixed; left: 64px; top: 64px">Hey, I'm fixed!</div>
From quirksmode.org:
An element with position: fixed is taken out of the normal flow of the page and positioned at the desired coordinates relative to the browser window. It remains at that position regardless of scrolling.
only downside: Doesn't work with IE6.
.someclass {
position: fixed;
top: 33px;
right: 55px;
}
JQuery:
You may find this useful for that.
CSS:
You just set position to fixed and give it top, left, bottom and right depending on where you want to make it appear, example:
<style>
#some_id
{
position:fixed;
top:100px;
left:100px;
}
</style>
Now you assign that style id to the element you want to make fixed:
<div id="some_id">So, I'm FIXED :)</div>
.
Resources:
More info about CSS fixed property.
Also you can add the z-index property for displaying the content over other contents , it helps to display the div as a separate object displayed irrespective of the page content..
ex:
<div style="position: fixed; z-index:1000; left: 64px; top: 64px">Hey, I'm fixed!</div>
value 1000 is given to override any z-index properties of any other elements