Please Help me to center the message box on fit on any screen resolution..
can you show what css or style, margins, left, right,that I can use?
Center Horizontally
To center a div horizontally you can use margin: auto auto; width: 500px where the width is any width you want it to be.
JS Fiddle
HTML:
<div id="content">
Some content
</div>
CSS:
#content {
width: 200px;
margin: auto auto;
background-color: #CCC;
}
Center screen with fixed dimensions
If you can fix the content height and width then it's possible to center the div both horizontally and vertically using just css. This is achieved by wrapping your content in another div, then positioning your content div's top: 50% and then subtracting half the height of it's margin from it: margin-top: -100px, assuming the height was 200px. See example below:
JS Fiddle.
HTML:
<div id="wrapper">
<div id="content">
Some content
</div>
</div>
CSS:
#wrapper {
position: relative;
background-color: #EEE;
width: 200px;
height: 200px;
font-size: 10px;
}
#content {
position: absolute;
top: 50%;
left: 50%;
width: 80px;
height: 80px;
margin-top: -40px;
margin-left: -40px;
background-color: #DDD;
}
Pretend it's vertically centered
Also you can give a fixed margin-top (or top with position: absolute) to make it seem vertically centered in most desktop and laptop screens.
JS Fiddle
HTML:
<div id="content">
Some content
</div>
CSS:
#content {
width: 200px;
margin: 100px auto;
background-color: #CCC;
}
Use Javascript
It is not possible to vertically center content with arbitrary height using just css. In this case you will need to use Javascript to position the div.:
The basic idea is:
you calculate the height of the content at the time you need to show the content, or when the content is loaded.
Then change any of the many css properties to position the div at the vertical center.
My personal preference is you to use position: absolute with top property. You can also use margin-top but you probably don't want this div to take up space in the box model if you have other content on the page.
JS Fiddle
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function() {
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var el = $('#content');
var elWidth = el.width();
var elHeight = el.height();
el.css({
position: 'absolute',
top: (windowHeight / 2) - (elHeight / 2),
left: (windowWidth / 2) - (elWidth / 2),
});
});
</script>
<style>
#content {
width: 200px;
height: 200px;
background-color: #CCC;
}
</style>
</head>
<body>
<div id="content">
Some content
</div>
</body>
</html>
Use any of the many Javascript "plugins" available
There is a multitude of CSS frameworks around the web that provide boilerplate CSS that we use on most websites. And some of these also help with these kind of common presentation issues with small Javascript plugins. Personally I know that Twitter Bootstrap provides a Modal plugin which you can use for this purpose. There is also many jQuery plugins for the sole purpose of centering content in a page.
Conclusion
Although there is a multitude of options to achieve this, I it sad to see that CSS still does not support doing this. Maybe it's a hard thing to do across different scenarios, I don't know. From the options that I mention above, I think the Javascript option is the most versatile, and with todays browser speeds, and the likeliness that nobody would have Javascript disabled on their browser, this would be the best way to go.
I just saw this after reading about how to do one on a CSS Techniques page.
Basically, define a little CSS:
.Absolute-Center {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
ADVANTAGES:
Cross-browser (including IE8-10)
No special markup, minimal styles
Responsive with percentages and min-/max-
Use one class to center any content
I have not had time to test it out, but I wanted to post it up here in the hope that it helps others.
Here is what you are searching for http://tutorialzine.com/2010/03/centering-div-vertically-and-horizontally/
You can easily make it with jquery! Or with an css solution given on this site!
You should give us your code that you have tried. Assume that you have HTML code like below:
<div id="message">
Hello World!
</div>
CSS code:
#message {
width: 100px;
height: 100px;
margin: 50px auto;
}
Then your message box will be 100x100 and 50px from the top of the screen and automatically aligns to the center of the screen.
Related
I am creating a landing page with HTML/CSS and using a little bit of bootstrap. I am having trouble resizing my main page to fit 100% height and width when the page is opened.
I want it to look like google docs' main page: https://www.google.com/docs/about/. If you go there, you'll see:
the nav is in fixed position and follows you everywhere. I got that part down.
The main image automatically resizes depending on your screen size. The icon-arrow-hint (the arrow on mid-bottom of page) can always be seen on the bottom of the image.
Two problems that I have:
Got this weird gap on the right side even though I set right: 0.
After page load, it looks like it fits about 90% of the height and I still need to scroll down. I placed this text on the bottom - theoretically, this should be shown on the bottom of the screen without scrolling, but I have to always scroll slightly down.
This is the JSfiddle: https://jsfiddle.net/iggyfiddle/DTcHh/35435/
I am using position: absolute and I 0-ed all 4 sides.
How can I fit the yellow div 100% height and 100% width like the google page nicely?
If you give an element height: 100%, but there's another element above or below in the same container, you need to adjust for the height of the other element, otherwise there will be an overflow.
Also, adjust for the -15px horizontal margins applied by Bootstrap.
Try this:
.primary-content {
position: absolute;
top: 10%;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 90%; /* ADJUSTMENT */
background: yellow;
margin: 0; /* NEW */
}
https://jsfiddle.net/DTcHh/35437/
Your .primary-content div has the bootstrap .row class on it which declares negative horizontal margins. A solution would be to remove the .row class from your div or to override the margins in css.
These are the default bootstrap .row styles:
.row {
margin-right: -15px;
margin-left: -15px;
}
Using the class of .row adds a margin of 15px. A quick fix is to remove the class from primary-content div like so.
<div class="primary-content">
<div class="col-md-12">
<h1>This is a super awesome product</h1>
<h4>Help me stackoverflow, you are my only hope!</h4>
</div>
or add a class and remove the margins.
The reason that your yellow div is going too far is that you need to set the height to 90%.
To fix the weird padding on the right side, add margin: 0 !important;.
.primary-content {
position: absolute;
top: 10%;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 90%; // change this
background: yellow;
margin: 0 !important; // add this
}
See this JSFiddle or run the snippet below
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
.universal-header {
background: red;
border-radius: none;
height: 10%;
width: 100%;
position: fixed;
}
.color-brown {
color: #58482C;
text-decoration: none;
}
.primary-content {
position: absolute;
top: 10%;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 90%;
background: yellow;
margin: 0 !important;
}
.bottom {
position: absolute;
bottom: 0;
right: 0;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<nav class="navbar universal-header navbar-static-top">
<a class="navbar-brand navigation-title color-brown">
</a>
<span class="color-brown navbar-brand navigation-title">HELLO</span>
<span class="navbar-brand navigation-title pull-right color-brown">Login</span>
<span class="navbar-brand navigation-title pull-right color-brown">Features</span>
<span class="navbar-brand navigation-title pull-right color-brown">About</span>
</nav>
<div class="row primary-content">
<div class="col-md-12">
<h1>This is a super awesome product</h1>
<h4>Help me stackoverflow, you are my only hope!</h4>
</div>
<div class="bottom">
You should be able to see me without scrolling
</div>
</div>
Problem 1:
Got this weird gap on the right side
When using bootstrap's row class it will add a margin of -15px to the left and right of your div, see the second answer to this question if you want to understand better why.
Solution: don't use the row class for your primary-content div.
Problem 2:
this should be shown on the bottom of the screen without scrolling,
but I have to always scroll slightly down
you are using absolute positioning, remember that needs a relative positioned parent container, in your case, since you don't have any, everything is relative to the initial containing block, hence your viewport/window.
Quick fix: delete the height: 100%; css from .primary-content
Warning: using absolute positioning the way you are right now will bring you trouble if you want to add more content below your yellow container
I have a HTML5 audio player in a div. I have set its width to 100%. I wanted to fix the player at the top when scrolled so I fixed it's position. The problem is when I do that, the player width overflows the container.
Below is my code.
HTML
<div id="container">
<audio arc="#" controls></audio>
</div>
CSS
#container {
width : 350px;
height: 300px;
background: #BADA55;
}
audio {
width: 100%;
/*position: fixed;*/
}
I created a fiddle to demonstrate the issue. Its currently in the state which I want it to look like. Un-comment the position: fixed; to see the problem.
Can anyone please tell me what I should do to make it stay fixed with the correct width?
Thanks
You can try with
width:inherit;
http://jsfiddle.net/vfQ5K/2/
Need to wrap the audio element and apply the css to the wrapper. I updated your jsfiddle.
<div id="container">
<div class="audioWrap">
<audio arc="#" controls></audio>
</div>
</div>
Then CSS:
#container {
width : 350px;
height: 300px;
background: #BADA55;
position: relative;
}
.audioWrap {
width: 100%;
position: fixed;
}
Note, if you are fixing it's position inside the container, you may want to add 'position: relative' to the container. I went ahead and added that to the jsfiddle.
I want to use three <div> areas on my web page: Header, Content and Footer.
The Footer <div> is supposed to stick to the bottom of the web page.
The Header <div> is supposed to stick to the top of the page.
The Content <div> is supposed to fill the whole area in the middle of the page.
So this is the basic layout:
<body>
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</body>
For the Footer to stay down the page I added
#footer
{
position: fixed;
bottom: 0;
}
For the Content <div> I'm using a background image, scaling exactly to the div element's dimensions:
#content
{
background: url("Bilder/Bild.png") center contain no-repeat black;
}
Now I want the Content <div> to be exactly the remaining height of the ViewPort between Header and Footer without adding any JavaScript, no matter what content is later added to the Content <div>.
How can I do that in CSS3?
If the size of footer and header is known, you can use calc(). So assuming both take 100px together, this should work:
html, body { height: 100%; }
#content {
height: calc( 100% - 100px );
}
Be aware, though, that old browsers do not support this. Also have a look at the compatibility table for the prefixes that might be needed.
Example Fiddle
you could use something like this. it will allow you to keep your positions in a range of resolutions.
#header {
position: fixed;
height: 10%;
}
#content {
position: fixed;
height: 80%;
top: 10%;
}
#footer {
position: fixed;
bottom: 0px;
height: 10%;
}
check it out here
So I have a fluid layout with a fixed nav. I have: the fixed nav itself, and a div containing four other divs that Im looking to fill the space beneath the fixed nav completely. I cant seem to make this happen without having some kind of scrolling of either the nav or the divs.
The nav is set to position:fixed
The div containing the content div is set to position:absolute height:100% width:100%
The four content divs themselves are set to float:left height:50% width:50%
Im not even certain this can be handled with css alone, if it can that would be awesome, if not, ill entertain other possibilities. Any help, as always, is greatly appreciated.
Development area:
http://riverhousegolf.icwebdev.com
Maybe there is solution with CSS only, but here is jQuery solution. Content below menu will fill rest of space, without scroll bars.
HTML markup will be:
<div id="menu">SOMETHING IN MENU</div>
<div class="content">
<div class="part1"></div>
<div class="part2"></div>
<div class="part3"></div>
<div class="part4"></div>
</div>
CSS:
body,html{padding:0; margin:0;height:100%;width:100%;}
#menu {
position: fixed;
top: 0;
background: blue;
height: 50px;
width: 100%;
}
.part1 {
width:50%;
height: 50%;
float: left;
background: purple;
}
.part2 {
width:50%;
height: 50%;
float: left;
background: red;
}
.part3 {
width:50%;
height: 50%;
float: left;
background: green;
}
.part4 {
width:50%;
height: 50%;
float: left;
background: silver;
}
.content{
width: 100%;
position: relative;
}
jQuery:
var height = $(document).height();
var menu_height = $("#menu").height();
var content_height = height - menu_height;
$(".content").css("height", content_height);
$(".content").css("top", menu_height);
DEMO
Most important part is jQuery. First, we need to get height of document (html), then height of menu. Then, we substract menu height from document height, and result is content height. Same result we will apply to top position of content, to avoid overlaping.
Remove the "overflow-y: scroll;" attribute from your "html" selector in your style sheet.
edit:
I think if you are to use pure CSS you are going to have a scroll bar. I made a fiddle to show how to at least stop the nav from cutting off th top of the other divs. I used a
<div class="spaceTaker" >
that bumps the rest of the page down.
http://jsfiddle.net/Dtwigs/XRJ8n/
Edit2:
Try keeping all of the widths the same. But remove all of the heights where they are set to a percentage. The html element should have height: 100% but your tiles, etc. should not. Now put this jquery on your page.
$( function () {
var pHeight = $("html").height() - $("nav").height();
$(".tile").height(pHeight / 2);
});
Also make your nav position relative.
http://jsfiddle.net/Dtwigs/XRJ8n/
I am trying to get my right sidebar to fill to extend the full length of the content within my #wrapper on this site: http://www.starmedianetwork.com/
I put a red border around it to try to see where my #right is on my page. I have tried working with:
height:100% on that #right and others. Also searched on google about clear fixes but I couldn't get that too work, also came across some solutions on experts-exchange, but those didnt work.
Any ideas how I can get my sidebar to extend with the background-color to fit the length?
You could try this approach: http://www.alistapart.com/articles/multicolumnlayouts/
You can achieve this with a faux sidebar:
<div class="sidebar_back"><.div>
<div class="sidebar">
<p>The sidebar content</p>
</div>
With this css:
.sidebar_back {
top: 0;
left: 0;
bottom: 0;
z-index: -1;
width: 200px;
background: #444; // the color you want the sidebar to be
position: absolute;
}
.sidebar {
float: left;
width: 180px;
padding: 10px;
}
The .sidebar_back will extend all the way to the bottom of the page, so just give that the color that you'd like the sidebar to be, and the actual sidebar div will appear to be full-height. You can use a percentage-based width instead of pixels too. Here's a codepen showing an example:
http://codepen.io/poopsplat/full/jquBv
You cannot get a div to fill the height of it's parent. It may work in one browser, but I've had this problem and it is not simply solved by a height:100%.
You can simulate the background by creating a background that tiles all the way down the side. This isn't the most elegant solution.
The only other solution I have found is to use javascript. After the page loads, you can set the height of the div to precisely what it needs to be based upon the height of the div that you want it to expand within.
There may be some javascript libraries out there to assist you with positioning of this troublesome div, but I can't conjure up one at the moment.
I haven't tried this, but...it feels like it should work (which of course is likely the kiss of death to the attempt):
#wrapper
{position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
display: block;
width: 100%;
background-color: #ffa;
}
#right {position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 15%; /* this has to be fixed-size so you can account
for it in the next bit; but can still be kinda
fluid-ish... */
display: block;
background-color: #ccc;
overflow: auto;
}
#left {width: 83%; /* 100 - (15% + 2% (for a gutter)) */
margin-left: 1%;
margin-right: 16%; /* less than 100 - 83, to allow for rounding of % or px */
display: block;
background-color: #0ff;
overflow: auto;
}
p {display: block;
margin: 0.5em;
padding: 0.2em 0.5em;
}
...
<body>
<div id="wrapper">
<div id="left">
<p>The left-hand content</p>
</div>
<div id="right">
<p>The right-hand content</p>
</div>
</div>
</body>
It's not terribly pretty, but it does work. Though I'm not a fan of using position: absolute (or fixed) so if anyone's got a better suggestion I'd go for it =)
Incidentally, there's working demo of the implementation (with added 'lorem ipsum' goodness) over at: http://www.davidrhysthomas.co.uk/so/cols.html.
(Okay, I lied: I clearly have tried it now...)
Here is the way I have found to solve this issue:
You have to use four div tags - one main container which contains the sidebar, the main content, and a footer.
First, add and style the elements in your stylesheet:
#container {
width: 100%;
background: #FFFAF0;
}
.content {
width: 950px;
float: right;
padding: 10px;
background: #FFFAF0;
}
.sidebar {
width: 220px;
float: left;
padding: 5px;
background: #FFFAF0;
}
#footer {
clear:both;
background:#FFFAF0;
}
You can edit the different elements however you want to, just be sure you dont change the footer property "clear:both" - this is very important to leave in.
Then, simply set up your web page like this:
<div id=”container”>
<div class=”sidebar”></div>
<div class=”content”></div>
<div id=”footer”></div>
</div>
I wrote a more in-depth blog post about this at [http://blog.thelibzter.com/how-to-make-a-sidebar-extend-the-entire-height-of-its-container][1]. Please let me know if you have any questions. Hope this helps!
I solved my sidebar problem for my admin page using jQuery with just a couple of lines of code
$('aside').height($(window).height()-($('#header').height()+$('#secondary_bar').height())-2); // Extend sidebar to bottom of viewport
$(window).resize(function(){
$('aside').height($(window).height()-($('#header').height()+$('#secondary_bar').height())-2); //change size of bar when viewport height changes
$('#main').height($(window).height()-($('#header').height()+$('#secondary_bar').height())-2); //change size of main content when size of viewport changes
});
It seems to work in all browsers, however, when the content on the right is larger then the viewport and issue will occur when you scroll down. It can be fixed with some content height checks but for me it doesn't matter. Hope that helps someone out there =)