I'm new at coding and I've managed to figure out some things, but this one is bugging me deeply as I can't seem to find a solution.
I have an horizontal & vertically centered div on a page. I want to place a header on top of it, without decentering the main div.
How it looks like now (both are centered as a whole):
How I want it to look (yellow is centered, blue header on top):
..
Basic code:
.outer {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.middle {
display: table-cell;
vertical-align: middle;
}
.header {
width: 1000px;
height: 100px;
background-color: blue;
margin-left: auto;
margin-right: auto;
}
.main {
width: 1000px;
height: 500px;
background-color: yellow;
margin-left: auto;
margin-right: auto;
}
<div class="outer">
<div class="middle">
<div class="header"></div>
<div class="main">
</div>
</div>
</div>
This is most likely not the best answer, but it's a start.
Baisically I centered the container using this method. Then I added the -50px to the top attribute of the container (half of the header height), moving the container 50px upwards, making the content div totally centered again. This solution should work on most newer browsers, but has some "limits" more here.
HTML
<div class="centered-container">
<div class="header">
header stuff
</div>
<div class="content">
Content stuff here.
</div>
</div>
CSS
body {
background: #600;
}
.centered-container {
position: absolute;
left: 50%;
top: 50%;
top: calc(50% - 50px);
transform: translate(-50%, -50%);
width: 600px;
background: red;
color: white;
text-align: center;
}
.header {
height:100px;
background:blue;
}
.content {
height:300px;
background:teal;
}
fiddle here.
I made the content 600px wide and 300px high and header 100px high, just so it is easier to see.
The negative margin
<!DOCTYPE html>
<html>
<!-- Handles the init code(javascript,css,links) and style references -->
<!-- Also, use body and head tags (THEY ARE IMPORTANT) -->
<head>
<style>
/** Web browsers load whatever is in the <head> tag FIRST
*/
.outer {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.middle {
display: table-cell;
vertical-align: middle;
}
/* You can use "margin: 0 auto;" to center this object.
* No need for left and right margin centering.
*
* Also, set the position to be relative then try adding your heading object
*/
.header {
width: 1000px;
height: 100px;
background-color: blue;
margin: 0 auto;
position: relative;
}
/* You don't need the margin to be 0 auto on both right and left
* if you have the width 100%
*/
.main {
width: 100%;
height: 500px;
background-color: yellow;
margin: 0;
}
</style>
</head>
<!-- Everything In Body Tag is style elements or skeletal HTML (div's, span's, format)-->
<!-- Place the heading OUTSIDE of the header element (in the outer div) this shouldn't alter the position of the
header. -->
<body>
<div class="outer">
<div class="middle">
<div class="header"></div>
<div class="main">
</div>
</div>
</div>
</body>
Related
I have pure CSS image slider which I want to have positioned (margin:auto) with text underneath. Slider images are absolutely positioned as they are stacked. I can't figure out how to position divs around it all. I have content and wrapper divs with relative position. Image size should be responsive (therefore max-width:100%) but wrapper or content divs can be exact size. Or maybe they don't need to either?
This is what I am after:
And this is what I managed so far: www.jsfiddle.net/1qxxnxbf/1/
If your image slider is a carousel, you can't make it responsive without js. If you give your slider a height in the css, you can adjust it in the js to make it responsive.
The only other thing you can do is maintain an aspect ratio. So in your example you have 350x220 images. so If you get your padding-bottom on your .slider class to 62.857% (roughly 220/350) you get a variable height based on the width. If your width grows/shrinks, the height will grow/shrink as well.
http://jsfiddle.net/1qxxnxbf/2/
Edit: I just noticed that none of your code around the slider is responsive. Why are you trying to make the slider responsive?
Checkout this design
https://jsfiddle.net/jalayoza/zvy87dcv/9/
HTML code
<div class="content">content
<div class="wrapper">wrapper
<div class="slider">
<img src="https://placeimg.com/350/220/any" class="slide" alt="slide1">
<img src="https://placeimg.com/350/220/nature" class="slide" alt="slide2">
<img src="https://placeimg.com/350/220/abstract" class="slide" alt="slide3">
</div>
<!-- text should go underneath the image -->
<div class="text">
<div class="text_left">
left text
</div>
<div class="text_right">
right text
</div>
</div>
</div>
</div>
CSS code
.content {
width: 500px;
background: #fff;
margin: auto;
}
.wrapper {
max-width: 400px;
position: relative;
background: purple;
margin: auto;
padding:10px;
}
.slider {
margin: auto;
left: 0;
right: 0;
max-width: 100%;
position: relative;
padding-bottom: 62.857%;
}
.slide {
max-width: 400px;
margin: auto;
position: absolute;
opacity: 0.5;
width: 100%;
}
.text {
max-width: 100%;
position: absolute;
background: transperant;
opacity: 0.9;
bottom:10px;
width: 95%;
}
.text_left {
max-width: 50%;
background: #fff;
float: left;
text-align: left;
padding:5px;
}
.text_right {
max-width: 50%;
background: #fff;
float: right;
text-align: right;
padding:5px;
}
Hope you will like this design
This is the code: https://jsfiddle.net/twy161er/6/
HTML:
<div id="top">
Logo. Menu
</div>
<div id="content">
Text Text Text
</div>
<div id="bottom">
Text in the bottom
</div>
CSS:
#top {
width: 100%;
height: 100px;
background-color: red;
}
#bottom {
width: 100%;
height: 100px;
background-color: blue;
margin: 0;
bottom: 0;
left: 0;
overflow: hidden;
position: absolute;
}
#content {
}
I want the "content" div to be in the center and in the middle of the page.
How should I do it?
Create a parent div .main for the three DIV and add a wrap DIV tag for content text and use display table table-row table-cell.
html, body {
height: 100%;
margin: 0;
}
.main {
display: table;
width: 100%;
height: 100%;
}
.top {
height: 0; /* make it dynamic */
background-color: red;
display: table-row;
}
.bottom {
height: 0; /* make it dynamic */
background-color: lime;
display: table-row;
}
.content {
display: table-row;
vertical-align: middle;
background: yellow;
}
.content div {
text-align: center;
vertical-align: middle;
display: table-cell;
}
<div class="main">
<div class="top">
Logo. Menu<br />
Dynamic content
</div>
<div class="content">
<div>Text Text Text</div>
</div>
<div class="bottom">
Text in the bottom<br />
Dynamic content
</div>
</div>
Jsfiddle demo : https://jsfiddle.net/twy161er/15/
Why use display:table? Because the content text always show even if the window height less than 200px; and you get IE8/9 support.
That is pretty simple!
You can make the contents of the #content like this:
<div id="content">
<div>Text Text Text</div>
</div>
Then, all you need to do is add this CSS:
#content {}
#content div {
position: absolute;
padding: 0;
margin: 0;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Explanation
You firstly absolute your text. Then, you reset the margin and padding of the element <div>. What you do then is, push the inner <div> down by 50% of the page height and push left by 50% of the page width. Then, you have to move it towards the left, 50% of its width, and move it towards the top, 50% of it's height. That way, you can get the exact center of the <div>.
Working example: JSFiddle.
CSS rule "margin: auto" to the #content div should put it on the middle horizontally.
In order to put it in the middle of the screen, try:
#content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
taken from here How to position a div in the middle of the screen when the page is bigger than the screen
Notice that your top and bottom divs are in absolute position, so no way to tell the #content div to position itself relatively to them.
Your content is missing reference to id "#".
And i hope this is solution to your problem.
#content {
display: table;
margin: 0 auto;
}
I'm trying to center a div at the bottom of the page and having no luck. I've scoured the web, but keep turning up nothing when attempting to apply their solutions.
Any chance anyone out there might have a solution? See code below:
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script></script>
<style type="text/css">
body {
background-color: aqua;
height:100%;
min-height:100%;
}
.centerDiv {
display: table;
width:90%;
margin:0 auto;
height:100%;
min-height:100%;
text-align: center;
}
.box {
display: inline-block;
width: 100px;
height:100px;
border: 3px solid #fff;
}
</style>
</head>
<body>
<div class="centerDiv">
<div class="box box1" style="background-color:#585858;"> </div>
<div class="box box2" style="background-color:#118C4E;"> </div>
<div class="box box3" style="background-color:#C1E1A6;"> </div>
<div class="box box4" style="background-color:#FF9009;"> </div>
</div>
</body>
</html>
I think you mean, that your div will be at the bottom of page. This would help you:
.centerDiv {
display: block;
width: 100%;
margin: 0 auto;
height: auto;
text-align: center;
position: fixed;
bottom: 0;
}
Setting position to fixed and div will stay at a place anytime (also when you scroll down).
The problem you're having is that the box is technically already at the bottom of the page -- the page expands to fit the content, not the window. If you want the box to always be at the bottom of the window, then you need to use position: fixed, and it will be at the bottom of the window no matter how much you scroll or how short/tall the page is.
See the demo here for the result with the fixed position.
.centerDiv {
width:100%;
text-align: center;
position: fixed;
bottom: 0;
}
.box {
display: inline-block;
width: 100px;
height:100px;
}
Now, if you want the box to always be at the bottom of the page, except when the page height is less than the window height (in which case it would be at the bottom of the window), you're going to have trouble. That's a bit tougher to do with CSS. However, it's easy with jQuery, if you don't mind using scripting:
See the demo here for the result using jQuery.
var minheight = $(window).height();
$("body").css("min-height", minheight);
and
body {
position: relative;
padding: 0;
margin: 0;
height: 100%;
}
.centerDiv {
width:100%;
text-align: center;
position: absolute;
bottom: 0;
}
.box {
display: inline-block;
width: 100px;
height:100px;
border: 3px solid #fff;
}
div element has an align attribute so it can help:
<div align="center"></div>
I want that my footer is on the bottom of the page, but it won't work. There is always a scrollbar, why is that?
http://www.yannickluijten.be/luc/website/
#top {
position: relative;
width: 100%;
height: 50px;
background: #00aeef;
}
#wrapper {
position: relative;
width: 960px;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -20px;
}
#footerbg {
width: 100%;
height: 20px;
background: #d7d7d7;
}
.push {
height: 20px;
}
<div id="top"></div>
<div id="wrapper">
<div class="push"></div>
</div>
<div id="footerbg"></div>
the wrapper should be a container for the content
Have a look here: http://jsfiddle.net/F577v/
<div id="top"></div>
<div id="wrapper">
<div id="content"><p>content here</p></div>
</div>
<div id="footerbg"></div>
I made the footer snap to the bottom outside of the wrapper, if you want to move the top outside that is also fine but remember you will have to adjust the bottom padding to compensate for its height too.
view the updated code here: http://jsfiddle.net/F577v/2/
Try the updated version: http://jsfiddle.net/F577v/8/
First of all, your containers don't need to be relative position.
Second of all, footer should be centered by setting a width and left/right margins to auto:
#footerbg {
width: 960px;
....
margin-left: auto;
margin-right: auto;
}
You have 2 options:
1) put the footerbg inside the wrapper
2) put in the footerbg the same style as in wrapper (same width & margin values)
I am tryingg to design and simple css template for my dashboard. Like to have top section to display the logo and the title, left section for the menu, center to display info based on the menu, right to display some info, bottom to display some contact info. I like left/center/right side of the page to be vertically and horizontally scorllable. When scrolled, I need the header to be always showing on the browser.
can anybody help me with this?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Dashboard Layout</title>
<STYLE type="text/css">
#top {
height: 100px;
widht: auto;
border-bottom: 5px solid;
}
#left {
height: auto;
width: 350px;
border: 1px solid;
float: left;
overflow: scroll;
}
#content {
width: auto;
height: auto;
float: left;
overflow: scroll;
}
#right {
height: auto;
width: 350px;
float: right;
overflow: auto;
}
#bottom {
height: 50px;
width: auto;
}
</STYLE>
</head>
<body>
<div id="top">
<h3><b>Dashboard</b></h3>
</div>
<div id="middle">
<div id="left">
<h3><b>Menu</b></h3>
</div>
<div id="content">
<div id="div1" </div>
</div>
<div id="right">
<h3><b>Definitions</b></h3>
</div>
</div>
<div id="bottom">
<p>This dasboard prodides info about systems.</p>
</div>
</body>
</html>
To have a div that is always visible whether or not your scroll, use:
.visibleDiv
{
position: fixed;
}
Yes, as Karan said, you have to fix the position of your header (#top). A fixed element is positioned relative to the browser window.
#top {
position: fixed;
width: 100%
top: 0;
height: 100px;
border-bottom: 5px solid;
}
Then you would see your content div (#middle) starting to overlap with the header, so you should set aside a top margin.
#middle {
margin-top: 100px /* the same height as your header */
}
And because you are floating several divs, I suggest that you clearfix after them to adjust the height of the parent div.
There are many great tutorials for css menus and headers on the web, so Google them! :]