I want to create a div as Facebook's chat bar. I want to see that div however scroll the window up or down. Do you have any sugesstions about this?
Note: I have Devexpress aspx tools licence.
Çağın
use css:
position: fixed
simple as that
Use the position:fixed style on your div. E.g.
<div class="swimming">Content</div>
Css:
.swimming { position:fixed; left:0px; top:0px; }
The correct answer is with CSS position:fixed;.
However, be aware that IE6 doesn't support position:fixed;. This may not matter to you (the few remaining IE6 users are used to sites being broken by now).
More importantly, many mobile browsers don't support position:fixed; either. This is more of an issue for a modern site. The reason they don't support it is because an element that has a fixed position could cause major layout issues on a smaller screen. Most of them treat 'fixed' as 'absolute' so that it is still outside the page flow, but can be scrolled.
See here for more info: http://www.quirksmode.org/m/css.html - it's got a table which shows support for this feature (and others) in the various mobile browsers. (but note that the mobile market is changing rapidly and this table may not be bang up to date)
I believe postion: fixed is the CSS style you want.
<div style="position: fixed; top: 10px; left: 20px; right: 20px; height: 50px">
content
</div>
Related
Hello how can I make a div that is a banner on the top of the page. This banner should push other content down (any content) so that the current html page is rendered under the banner. But it should also stick to the top of the window if user scrolls down.
How can I make this CSS?
I tried with
position: relative;
no luck please help
EDIT:
position fixed works. My problem is that the content of the page may vary a lot since this is a chrome extension for several web pages. So with position fixed, the content of the page is not necesarilly pushed down. With position relative the content gets pushed down but then it dosen't stick to the top like it does with fixed.
.myMenu{
position: relative;
width: 100% !important;
height: 100px !important;
background-color: #40E0D0 !important
min-width: 990px !important;
left: 0 !important;
color: #757575;
z-index: 10;
}
This is my very simple code, I'm playing around with the editor of Chrome but like I said without any luck
EDIT 2:
I need the banner to push all the web page's content down no matter what the content is. Here are some examples of how it dosen't work with one of the web pages:
Original web page:
Inserted banner with position fixed: (it sticks to the top as expected but content is not pushed down) Ohh and FYI I'm prepending the content to the html tag like this:
$("html").prepend(myMenu);
So as you can see the banner is hidding the web page's content.
This one is with position relative:
in this case it works better but still no luck, since the search is still hidden and the web page's logo. Also the menu fails to stick to the top when user scrolls down.
Like I said this is just an example, I need my banner to stick to the top regardless of the web page's content. Any thoughts? Remember this is a chrome extension for several web pages
again thank you
EDIT 3:
So thank you all I got it working almost as expected. My situation is with the elements inside the body tag that have a
position:fixed;
These elements come into conflict with my menu. Is there some way to "wrap" the whole body so that all fixed positioned elements inside it are only fixed relative to the body and not to the window?
thanks
you can use position:fixed; for banner and set padding-top of body to the height of your banner.
/* here 84px is the height of banner */
body {padding-top: 84px; margin-top:0}
.banner {position:fixed; margin-top:-84px; width:100%; background:white;}
.banner img {height:84px; }
<div class="banner">
<img src="https://www.easa.europa.eu/sites/all/themes/easa_foundation/logo.png">
</div>
<div>
<p> The work of the Agency centres on ensuring the highest levels of civil aviation safety, through certification of aviation products, approval of organisations to provide aviation services, development and implementation of a standardised European regulatory framework. We further engender a culture of safety through our work in the fields of accident investigation, Safety Analysis and our research programme.</p>
<p>The Agency acts as the focal point for coordination of aviation accident investigation safety recommendations and is responsible for the follow-up of occurrences where aviation safety has been endangered, as well as the internal coordination of the corrective actions that need to be undertaken, including actions proposed in safety recommendations.</p>
<p>The Agency also conducts studies and provides reports concerning the safety of European and world-wide aviation. Data on the aviation system and accidents, incidents and occurrences is collected, categorized and stored and forms the base for its studies.</p>
<p>Furthermore, safety research projects needed to support the Agency's tasks are specified, commissioned and managed. Working with partners we aim to
leverage safety knowledge gains through joint funding schemes.</p>
<p style="height:1000px;">...</p>
<p>end.</p>
</div>
hope this helps
add invisible blank space, same height with your banner/menu
[HTML]
<div class="myMenu">
a
</div>
<div class="blank_space"></div>
<div class="content">
<p>
content1<br>
content2<br>
content3<br>
content4<br>
content5<br>
content6<br>
content7<br>
content8<br>
content9<br>
content10<br>
<br><br><br><br><br><br><br><br><br><br>
content1<br>
content2<br>
content3<br>
content4<br>
content5<br>
content6<br>
content7<br>
content8<br>
content9<br>
content10<br>
</p>
</div>
[CSS]
body {
margin: 0;
}
.myMenu{
position: fixed;
width: 100% !important;
height: 100px !important;
background-color: #40E0D0 !important;
min-width: 990px !important;
left: 0 !important;
color: #757575;
z-index: 10;
}
.blank_space {
width: 100%;
height: 100px;
}
https://jsfiddle.net/hv9zrx8q/1/
You can use position: fixed; for your menu and for your content that you want to stay under it, you can simply put an margin-top equal to your menu height.
You can use position: fixed on your menu div.
Check this: JSFIDDLE
EDIT: You can even use jquery to find the height of the banner div and give the same height as the margin top of the content div.
Both position fixed and absolute are out-of-flow and thus don't push other elements.
You want "position relative so that it moves other elements but also fixed so that it sticks to the top"
This exists. It's called position: sticky.
It's a new thing so it won't work on old browsers.
I'm trying to implement a "spider diagram" or "mind map" in CSS.
Essentially, what I'd like, is a ring of boxes around a central box.
Ideally, these would all just be DIVs that I could add more/less content to as I saw fit (and, hopefully, manipulate using JS). They don't need to be draggable or anything like that.
Unlike the diagram, they don't need to have the grey lines etc. from the outer topics to the name of the mind map - I'm really not bothered about that.
Firstly, I really don't know where to start. I guess I'd have to use absolute positioning for each box? That probably wouldn't be too bad if my audience were using the same resolution and browser but that won't always be the case.
So, my real question is, how do I set up DIVs like these that will stay in the same place on different resolutions and in different browsers? Can I use absolute positioning within a relatively-aligned DIV or something?
The browsers I need to support primarily are IE10, Chrome and Safari. So I guess I should be designing for IE10 as a base?
Thanks in advance,
Create fixed width / height div and place other divs there.
<div style='width: 1000px; height: 1000px; position: relative;'>
<div class='note' style='position: absolute; left: 50px; top: 50px;'></div>
<div class='note' style='position: absolute; left: 150px; top: 150px;'></div>
<div class='note' style='position: absolute; left: 350px; top: 350px;'></div>
</div>
Since wrapper is constant width, so inner elements will stay in same position, no matter of browser window size.
I just came across something
#element {
left: 50%;
margin-left: -(elemntwidth/2)px;
}
being (elemntwidth/2) already a number like 30px, for ex.
I would like to know if this is a safe way of crossbrowsing the responsive elements positioning so I can abandon the way Im doing right now with .jQuery
$('#element').css(left: (screenwidth - element / 2) + 'px');
More than everything Im interested in a cross mobile device browsers efective solution and this css only I found it clean and simple, so simple that I need to ask if this could be true. Thanks
CSS Frameworks have this functionaility baked in.
Checkout: Foundation 3
Otherwise, you will need to rely heavily on Javascript and Media Queries to achieve pixel perfection.
Not to mention this is the first of many problems you will encounter to acheive cross devices / browser stable elements. All of these things have been carefully thought out for you alreacdy.
This is a way. For some elements it works, resposive, centered and no jQuery.
HTML
<div class="element ver1">TESTE</div>
<div class="element ver2">TESTE</div>
<div class="element ver3">TESTE</div>
<div class="element ver4">TESTE</div>
CSS
.element {
position: relative;
width: 90%;
background: black;
margin: 0 auto 10px;
text-align: center;
color: white;
padding: 20px 0;
}
.ver1{width: 80%;}
.ver2{width: 70%;}
.ver3{width: 60%;}
.ver4{width: 40%;}
Wroking Demo | Final result full screen
AFAIK this solution is browser compatible. it's even better than {margin-left:auto; margin-right:auto;} in some cases. but there is an other interesting point by centering DOM-elements this way:
e.g. if your whole page-wrapper is centered with {left:50%,...} and the browser window width is smaller than the wrapper you cannot see the whole content by scrolling to left and right. the browser cuts the content. try it...
Try to scroll left and right to see the white left- and right-border...
The other known solution is to set {margin-left:auto; margin-right:auto;} but afaik this just works together with {position:relative;}- not with {position:absolute;}-elements
It's been a long time when I started up with this unconventionally solution...
use this code snippet:
.centered {
position: fixed;
top: 50%;
left: 50%;
margin-top: -(height/2);
margin-left: -(width/2);
}
this works even if the parent dimensions change.
The code you have will work - I've used the same approach many times - so long as you know the dimensions of the element you are centering.
Note that you can use the same approach using percentage based widths to work better with responsive layouts.
You're on the right track.
I hope this helps explain the issue I am having
I have recently designed a horizontal scrolling portfolio for a client, the rights and wrongs of horizontal web design, is a sligtly seperate topic but alas the client wanted something different.
Im having a real issue with the bottom div though As the monitor size is reduced its creating the browser scroll bar down the side as the div image is overlapping the monitor size.
Wouldnt be such a huge issue but because of the nature of the horizontal site its producing a diagional scrolling effect.
Is there away to prevent the screen expanding from the actual monitor size using css or anyother solution? I'm probably staring at the answer as I type but brain doesnt seem to be working unfortunately.
Assuming the content area is flexible in height and the background div is a fixed height, then this should solve it (prevents content area from ever being bigger than browser height). For purposes here I'll assume you have some way of targeting those div's:
html {height: 100%;}
body {height: 100%; position: relative;}
#content {position: absolute; top: 0; bottom: (whatever the height is of your bottomBkg);}
#bottomBkg {position: absolute; bottom: 0; left: 0;}
The combined top/bottom on the #content won't work in older browsers if that is a concern for you.
You can use css3:
html{overflow-y:hidden;}
That will prevent the vertical scrolling
I am trying to center page on IE. If I force quirk-mode by adding <!-- some comment --> before DOCTYPE declaration margin: auto; doesn't work properly and page is adjusted to the left. If I remove the comment page is centered, but some other elements are in mess. Could you give me some hints how to solve this?
Setting margin-left: auto and margin-right: auto for the body using CSS usually does the trick.
Forcing quirks mode probably isn't a great idea, though.
Of course, being in quirks mode is not where you want to be so quit doing that. The problem will lie with the rest of the markup but, unless you give us a link or a jsfiddle with the complete markup, anything we say will just be a wild guess.
Does the page work in a modern browser (anything but IE)?
You can use a 50% margin, and a negative left position with half of your element size:
position: relative;
width: 600px;
margin-left: 50%;
left: -300px;