I am new to website design and need help in centering a div that has 100% page height but 70% width, the width can be set and centered but the height is only as heigh as the content itself. For example like http://www.thelounge.fi/ however the scrolling part of this is on the left side while I would like it in the centre.
Thank You.
okey. In this case we have two solutions:
You can set the div display property to inline or inline-block. And then set the text-align property to center for the div parent, as you could see here https://jsfiddle.net/ivan0013/7q9Lp45q/
Or you can give a margin to the child, if it has acertain width and the display property set to block, which is the default, like here https://jsfiddle.net/ivan0013/wwu5ttxt/
Further explanation:
In the first solution, you change the div default value for the displayproperty. When you set displayto inline you are creating a line element, which does not take all the space to its side. Then you change the tex-align property for the parent, that means that all childs that are line elments will be centered.
For the second one, we use the block value for display. Using this, the element, in our case, the div, is taking all the width available. For that reason, we need to set a width, for instance 25%. Now, the div takes only the 25% of the parent. The last step is adding a margin, which is the distance to the parent's bounds. In the fiddle we set margin: 0 auto which means that div will have 0 for margin top and bottom, and will take an auto margin for each side.
A good reference: W3schools
if you dont want to set content of hello div in separate div with overflow scroll, and you want to keep your HTML as it is you can margin-top to hello with same hieght of navbar and set navbar left (100-70)/2=15
body {
/*background-color: #f0f0f2;*/
background-color:green;
background-attachment:fixed;
margin: 0;
padding: 0;
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
overflow-y:scroll;
}
.hello {
width:70%;
background-color:white;
text-align:center;
margin:auto;
position:relative;
background-position:center;
/*margin-top:60px;*/
margin-bottom:20px;
height:100%;
margin-top:60px;
}
.navbar {
align:center;
background-color:gray;
background-attachment:fixed;
height:40px;
padding-top:20px;
box-shadow: inset 0 -3px 3px rgba(0,0,0,0.5), inset 0 3px 3px rgba(255, 255, 255,1);
position:fixed;
width:70%;
top:0;
left:15%;
}
.navbar2 {
align:center;
background-color:gray;
height:20px;
width:100%;
bottom:0;
}
<body>
<div class="hello">
<div class="navbar">NAVAGATION BAR
</div>
<p>test1</p>
<p>test2</p>
<p>test3</p>
<p>test4</p>
<p>test5</p>
<p>test</p>
<p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
<p>test</p>
<p>test</p><p>test</p>
<p>test</p><p>test</p>
<p>test</p><p>test</p>
<p>test</p>
<div class="navbar2">Bottom Bar
</div>
</div>
</body>
Related
I want my logo div down further, not exactly center, but about there. When I add a margin to the top it pushed my menu-bar div down too. I tried adding a padding instead by that didn't move the div. I'm guessing because there isn't actually anything in it right? Is there a way to move that div down and over a little without affecting the menu-bar div?
<div id="Container">
<div id="logo"></div>
<div id="menu-bar">
<ul>
<li><a>start</a></li>
<li><a>end</a></li>
<li><a>info</a></li>
<li><a>score</a></li>
<li><a>reload</a></li>
</ul>
</div>
</div>
</div>
-
#charset "utf-8";
/* CSS Document */
*{
padding:0;
margin:0;
}
html{
background:url(../images/water-316625_1280.jpg);
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
#menu-bar{
height:30px;
float:right;
text-align:right;
background-color:rgba(173,172,172,.9);
border-radius:10px;
border:solid rgba(109,186,235,1.00)
margin-top:0;
}
#menu-bar li{
float:right;
padding: 0 10px;
font-family:Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
font-size:110%;
cursor:pointer
}
#logo{
height:100px;
background-image:url(../images/logo.png);
background-repeat:no-repeat;
}
All CSS properties have a default of "position: static;". This means that all elements are rendered in order that they appear in your html file.
So when you add a "margin-top" to a div (i.e. logo) it will add height to that div while all other divs that follow will have to re-position to accommodate that change.
So margins adds to the height or width of your element. Your logo is "height:100px;" when you add a "margin-top: 15px;" your element has a total height 115px. That is why #menu-bar has moved.
A solution to this would be to set the #logo div to "position: relative;" Then you can use the properties top, left, right, down. To move that element based on it's current position but will not affect other divs in the document. So for example:
#logo {
position: relative;
top: 20px;}
Will move #logo down 20px from its current location.
Hope that helps.
why you are included the menu items inside the logo container?. It would be a good practice that to allow the logo element to independent. Please see the updated code.
Give the float property left for the #logo id
put ; after the border property for #menu-bar id (missing in your code)- border:solid rgba(109,186,235,1.00); and cursor:pointer in #menu-bar li
Please give a margin-top:0 for the <ul> elements as well.
Here are the JSfilddle
I am trying to place an image in my body, using a div id with a background image. I don't understand why the image isn't showing up when i preview in google chrome?
I am using almost the same code on my index page and it's working fine there.
HTML:
<body>
<div id="body">
<div id="rainforestimage"></div>
</div>
</body>
CSS:
#body {
width:1024px;
height:auto;
background-image:url(../images/background2.png);
margin:0 auto;
background-repeat:no-repeat;
overflow:hidden;
}
#rainforestimage {
background-image:url(../images/exhibits/rainforest.png);
width:1024px;
margin:0 auto;
margin-top:74px;
height:364px;
position:absolute;
z-index:1;
box-shadow: 0px 8px 12px -4px rgba(0,0,0,0.46);
}
Your div#body needs to have a height set, try setting a height and you will see your background image.
Also your HTML page and the folder images should be siblings (same level) in the same directory.
EDIT:
If you still don't see background2.png, it's because rainforest.png is covering it(on top of it) because of the other styles you have set:
position:absolute;
z-index:1;
Div with position absolute ideally takes 0 height. you need to set height either 100%, or top:0 & bottom:0 .
Try using following CSS code.
#rainforestimage {
background-image:url(../images/exhibits/rainforest.png);
width:1024px;
margin:0 auto;
margin-top:74px;
height:364px;
position:absolute;
z-index:1;
box-shadow: 0px 8px 12px -4px rgba(0,0,0,0.46);
height:100%;
top:0;
bottom:0;
}
You were not able to see it because the height wasn't set.
Added in CSS
#body {
width:1024px;
height:200px;
}
https://jsfiddle.net/neerajsonar/72wr5n7u/
The image overlaps, you can set the margin according to your image.
You are keeping same width for #body and #rainforestimage,and for #body you are having height:auto,if you have only one div #rainforestimage under #body then ideally body width will be same as of #rainforestimage div,so no point you can see the background image.
so if you need increese the height of the div #body and reduce the width of your #rainforestimage,so that you can see the background image.
this will work for sure.
If you are facing any layering issues,Use z-index,make sure that the element is having position property.
Try adding min-height to div #body. actually #body won't have height because the element #rainforestimage you placed inside is positioned absolute.
#body {
min-height:364px;
}
I want to have yellow div be centered in the blue div always (taking up only as much space as the text inside it), and then have the purple div float right into the yellow div, so it would basically be right aligned to the yellow div.
I think this is possible through CSS and maybe flex layout but I haven't nailed it yet
Here is the basic fiddle http://jsfiddle.net/AFzpp/
Here is the result I'm hoping for http://www.screencast.com/t/RFw7xMPy8
<div id="body">
<div id="column">
<div id="chicken">fun</div>
<div id="text"><p>test</p></div>
</div>
</div>
You can do this pretty simply.
Just get rid of your #text's width attribute and add text-align:center; to your #column.
http://jsfiddle.net/TannerJohnson/ypnrA/
http://jsfiddle.net/AFzpp/2/
text-align :center;
to make div yellow and blue center. and use
display:inline-block
to fit your div with text content
you may use inline-block display, text-align to center your containers and add a negative margin to the one you want to be aside. Negative margin virtually reduces width or space needed.
example : http://codepen.io/gc-nomade/pen/qeCGh
(this is a fork of http://codepen.io/gc-nomade/details/wqbjl )
<div>
<div>
</div>
<div>
</div>
</div>
div {
width:80%;
min-width:750px;
margin:auto;
background-color:green;
background-image:linear-gradient(to left, rgba(0,0,0,0.2) 50%, rgba(255,255,255,0.2) 50%);/* this to show where middle stands */
}
div div {
display:inline-block;
min-width:1%;/* reset */
vertical-align:top;
width:30%;
min-height:200px;/* cause example has no content */
padding:5px;
background:#0871B2;
margin: 1%;
font-size:14px;
font-size:1.6vw;
text-align:left;
color:white;
text-shadow:0 0 1px black;
font-weight:bold;
}
div {
text-align:center;
}
div div:first-of-type {
margin-left:-11%;/* reduce virtually width or horizontal space needed close to zero */
width:10%;
min-height:50px;/* reset */
background:purple;
}
div div:first-of-type:before {
content:'on left middle side';
}
I made this:
HTML:
<body>
<div id="header" >
</div>
<div id="main" >
</div>
<div id="footer" >
</div>
</body>
CSS:
body
{
margin:0px;
}
#header
{
width:100%;
background-color:black;
height:60px;
}
#main
{
width:300px;
border:1px dotted black;
margin:0 auto;
}
#footer
{
width:100%;
background-color:black;
height:40px;
position:absolute;
bottom:0px;
}
http://jsfiddle.net/VpwQQ/2/
But as you can see, the main div doesn't have a height.
Then I replaced my css by that:
body
{
margin:0px;
}
#header
{
width:100%;
background-color:black;
height:60px;
}
#main
{
width:300px;
border:1px dotted black;
position:absolute;
margin:0 auto;
bottom:60px;
top:80px;
}
#footer
{
width:100%;
background-color:black;
height:40px;
position:absolute;
bottom:0px;
}
http://jsfiddle.net/VpwQQ/1/
But then, the horizontal center doesn't work.
How can I do this design (div centered and that takes all the page in height between the header and footer with a 20 px magin) ?
I'm not sure what you're trying to do, but I'll give my explaination of what's going to happen with your code:
Your #main div doesn't have a height because it doesn't have a height CSS property, nor does it have any content.
You should add either a height: 100px or just add some content and you will see it gets a height.
The reason why I ask what you want to do is because you're not very clear as to what you want your final product to look like.
You're going to have another problem with the footer. If you use position absolute it sticks to the bottom at the moment. Set the height of the #main div to something ridiculously high and you'll see that when you have to scroll down the page the footer stays where it is. See http://jsfiddle.net/VpwQQ/3/
You should use position: fixed but this will keep it on the bottom of the WINDOW and not the DOCUMENT. So then you get into the problem of having to use Javascript in order to measure the document height and setting positions appropriately. Not sure what you're trying to do, but if you're just trying to lay out a website then use standard relative positioning to push the footer down naturally below the #main div.
Edit:
See http://jsfiddle.net/VpwQQ/4/ if you're just trying to set up a normal website layout.
If you want the footer to "stick" to the bottom of the page all the time then you will need to use position: fixed but I don't think this works across all browsers. See http://jsfiddle.net/VpwQQ/6/
Lastly, to get both footer and header to "stick" see http://jsfiddle.net/VpwQQ/8/
I added a div inside #main.
Main now has a 100% width.
Inside, put a div of 300px, with no absolute position.
I forked your fiddle: http://jsfiddle.net/8U9P6/
Personnally I prefer the javascript solution and not using the absolute position. But this solution seems to work.
Add and overflow to contain the content in the inside div: http://jsfiddle.net/M2nZc/
Note that the page will not grow as it is absolute position.
You can't use automatic margins on an absolutely positioned element, as it's not in the document flow any more.
Use width: 100% on the #main div, then put another element inside it that you center using automatic margins.
Demo: http://jsfiddle.net/Guffa/VpwQQ/9/
Note: You may need to use height: 100% on the body and html elements for the bottom sizing to work on the #main element.
Once you fill your #main div with content, it will automatically gain height according to the content. You can simply fill it with a few paragraphs of lorem ispum to simulate content. You can now remove the absolute position and positioning CSS.
Centering a div using the "0 auto" shorthand only works when the parent element (which, for the #main div, is the body element) has a defined width. To do this, try giving your body element a width of 100%. Doing this is something that you might want to make a habit of in you CSS.
To have your #main div always be 20px below the #header div, simply add 20px of margin-bottom to your #header div. Do the same below the #main div to space the footer.
Summed up (without the footer at the bottom, for now) your CSS might read something like this:
body {
width: 100%
margin: 0px;
}
#header {
width: 100%;
height: 60px;
margin-bottom: 20px; /*here we space the header 20px from the next element*/
background-color: black;
}
#main {
width: 300px;
margin: 0 auto 20px auto; /*we append the margin to include 20px of spacing at the bottom*/
border:1px dotted black;
}
#footer {
width:100%;
height:40px;
background-color:black;
}
Example: http://jsfiddle.net/WEx3j/
If you want the footer to be 'sticky' (always be at the very bottom of your website), I advise you to employ this method.
I hope this clarified a few things.
So I tried to experiment with CSS pseudo class before and after. I tried to use those pseudo to create header element.This is to reduce using div to hold left and right images. This is code for HTML
<header id="mastHead">
<h1>Branding</h1>
</header>
So I have 3 images to create traditional header element which is 20px width for left and right side with 100px height and for the middle, 1px width and 100px height which will repeat horizontal. And here my CSS
#mastHead {
background:url(images/headMiddle.jpg) repeat-x top left;
width:1000px;
height:100px;
overflow:hidden;
}
#mastHead:before {
content:"";
display:block;
background:url(images/headLeft.jpg) no-repeat top left;
width:20px;
height:100px;
float:left;
}
#mastHead:after {
content:"";
display:block;
background:url(images/headRight.jpg) no-repeat top left;
width:20px;
height:100px;
float:right;
}
#mastHead h1 a {
display:block;
width:200px;
height:41px;
background:url(images/logo.png) no-repeat;
}
So the problem is if I remove h1 element, it will align perfectly but if I put these element, it will push the ::after pseudo-class down and it will take leftover space according to it height.How can I make this h1 element to take just middle space without affecting the ::after space?
I made a fiddle with your example: http://jsfiddle.net/3Dcw3/ (only set width to 500 to fit in a fiddle and set background to visualize them)
And here is a fixed version: http://jsfiddle.net/3Dcw3/1/
The points are:
Add position:relative; to the header.
Use absolute positioning instead of floating.
Add paddings so the blocks would position over them.