I want to put an HTML element in the middle of the page, horizontally and vertically, but I'm having a hard time making it align even horizontally. I want to center the div "content". Here is my css:
#background
{
position:absolute;
width:100%;
height:100%;
margin:0px;
padding:0px;
left:0px;
right:0px;
z-index:1;
text-align: center;
}
#content
{
margin-left: auto;
margin-right: auto;
width: 200px;
z-index: 2;
position: absolute;
}
And here is my HTML:
<html>
<head>
<link REL="STYLESHEET" TYPE="text/css" HREF="style/myStyle.css">
</head>
<body style="padding:0px; margin:0px; overflow:hidden;">
<div id="background"><img src="images/backgroundimage.png" width="100%" height="100%">
</div>
<div id="content">
<p>Here is some content</p>
</div>
</body>
</html>
Since the div has to be positioned as absolute, doing this:
margin: 0 auto;
Won't work. I'm not sure what to do. Also, I want it in the center of the page vertically. Help is appreciated, thanks.
Edit: I need the background to be in a separate div so that it's re-sizable, and the content doesn't show if the position is relative.
<html>
<body>
<div id="background">
<div id="content">
<p>Here is some content</p>
</div>
</div>
</body>
</html>
A better structure for put contents on the middle,without use JQuery:
#background{
background: url(images/backgroundimage.png) top no-repeat;
width:100%;
height:100%;
position:relative;
}
#content{
position:absolute;
top:50%;
left:50%;
width :200px;
height:200px;
margin-left:-100px;
margin-top:-100px;
}
If you are using the div id background for a background image you can style the div using css, more info at the w3schools site.
Ideally i would use a background image for the body tag rather than creating a new div with an image.
For centring content try and play around from my example.
Matt
Try to make the padding a higher number, padding is how many pixels in between the side of the screen and the text/table/picture/object. So padding should be like, say 20-40. Also, try deleting position absolute; it makes the text/table/picture/object always on the left instead of the middle.
Related
I am very new to HTML and CSS and want to move my logo further up the page instead of it being further down towards the centre.
<body>
<img id="derrick-ogole-logo" src="images/derrick-ogole-logo.png" alt="Derrick Ogole Official Logo">
</body>
</html>
#derrick-ogole-logo{
display:block;
margin-left:auto;
margin-right:auto;
width:60%;
height:60%;
}
How can I move my logo further up so I can add a navigation bar etc.
One of the ways is simply using margin-top: and desired percentage. You can use here pixels if you want. You already positioned it vertically by margin-left and right, you can do the same with top and bottom for horizontal position.
I recommend you reading this, everything you need is here, start with basic positioning. w3schools.com/w3css Also: Examples and How To. I learned a lot there at start.
#derrick-ogole-logo{
display:block;
margin-left:auto;
margin-right:auto;
margin-top:20%;
width:60%;
height:60%;
}
<body>
<img id="derrick-ogole-logo" src="images/derrick-ogole-logo.png" alt="Derrick Ogole Official Logo">
</body>
</html>
You could also set the absolute positions (top/left), then transform based on the image size (kinda based off of this)
<html>
<head>
<style>
#derrick-ogole-logo {
position: absolute;
top: 0%;
left: 50%;
transform: translate(-50%, 0%);
width:60%;
height:60%;
}
</style>
</head>
<body>
<img id="derrick-ogole-logo" src="https://derrickogole.com/wp-content/uploads/2019/08/cropped-32248_-DERRICK-OGOLE-Logo_-MJ_01.png" alt="Derrick Ogole Official Logo">
</body>
</html>
Simple, set the top margin to a desired value. To do this you can use the shorthand margin property:
img {
display: block;
margin: 20px auto;
width: 400px;
height: 200px;
}
<img src="https://via.placeholder.com/400x200" alt="placeholder">
This will set the top and bottom margin, and the side margins will be automatically calculated for you (which will effectively center the image).
i have a fixed div position which has a margin from top of page,when i scroll my page the content of my relative position div (which has page content) is visible under a fixed div ( i can see the scrolling content because my fixed div has margin from top of page). i have searched a lot in stack overflow and try every solutions like give padding to body and Html or give margin or padding to my relative positioned div but none of them work for me.and still the content is visible.I don't want to use java scripts and also don't want to use padding for body or Html.
i see these questions for example but don't work for me:
link1,link2 ,link3 and link4. my html code is look like:
<section class="all-result">
<div class="nav">
...
</div>
<div class="results">
.....
</div>
</section>
and css look like :
.all-result{
position:absolute;
background: #fff;
overflow-y: scroll;
overflow-x: hidden;
z-index: 4;
right: 0;
}
.nav{
position:fixed;
margin-top:40px;
z-index:1000;
}
.results{
width:100%;
height:100%;
position:relative;
}
Here i added an example,somewhat i think you looking for.
body{ overflow-y: scroll;}
.all-result
{
position:absolute;
width:100%;
height:3000px;
overflow: hidden;
z-index: 4;
background:#759A97;
}
.nav{
width:100%;
height:40px;
position:fixed;
margin-top:40px;
z-index:1000;
background:#B9B9B9;
}
.results
{
top:100px;
height:300px;
position:relative;
background:#9A8975;
}
<!DOCTYPE html>
<html>
<body>
<section class="all-result">
<div class="nav">
</div>
<div class="results">
Page Content
</div>
</section>
</body>
</html>
I want that my image(near-logo.png) be in header-content div, which is in header div. Image at the moment is in the left side, but it has to be in the left side of header-content div.
header div is 100% width, header-content div is 946px width.
<!DOCTYPE html>
<html>
<head>
<title>Webpage</title>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
</head>
<body>
<div id="header">
<div class="header_content">
<img src="img/near-logo.png"/>
</div>
</div>
</body>
</html>
body {
margin:0;
padding:0;
}
#header {
background-color:#353C3E;
height:80px;
width:100%;
position:relative;
}
.header-content {
width:946px;
position:absolute;
margin:0 auto;
}
I see two problems:
First thing, you have a mistake in your CSS, your class in your div is <div class="header_content">but in your CSS it's .header-content.
Second thing, delete the position: absolute attribute if you want your header content centered.
The image is aligned to the left of the div header_content. The problem is the div class name in your html is header_content and the name you have used is header-content in your css.
The other thing is you have used position:absolute for header_content, so that the margin:0 auto won't get applied, so remove the absolute position. Use the below code
.header_content {
width:946px;
position:absolute; // Remove this line
margin:0 auto;
}
add
.header_content {
position:absolute;
left: 0; top: 0;
}
I'm making some mobile HTML & would like to have a div that uses up 100% of the space it has, but not use up its container and in it have 3 divs that split it up into 3 parts and have the following layout:
How can I do this using divs, I've tried to but having percentage and fixed height divs is confusing. I can do it with horizontally aligned ones, but vertically it confuses me. I don't want it to overlap by making the bottom one absolute.
Edit
The remaining space is essentially just one big div that has an overscroll-y that uses up the whole space
I have to place the layout in the section underneath the titlebar which is why I cant use position: fixed because it will interfere with the parent container.
First of all, the image in your edited question probably came from JQuery Mobile. Consider using jQuery mobile. It could be an option too.
<style type="text/css">
#container{position: relative; width: 100%; height: 100%; background-color:#ddd; z-index:1;}
#header{position: fixed; top:0; left:0; width:100%; height: 80px; background-color:#f30;z-index:3;}
#footer{position: fixed; bottom:0; left:0; width:100%; height: 80px; background-color:#f30;z-index:4;}
#content{width:100%; z-index:5; padding-top: 90px; padding-bottom: 80px;}
</style>
<div id="container">
<div id="header">
</div>
<div id="content">
Put body content here...
</div>
<div id="footer">
</div>
</div>
You might need jQuery to spice it all up. This should give you the basic idea.
http://jsfiddle.net/wy6rS/1/
<div id="toolbar">This is fixed toolbar.</div>
<div id="wrap">
<div id="header">This is the header</div>
<div id="content">Content will Expand with scripting. Notice the push.</div>
<div id="push"></div>
<div> <!--wrap ends here-->
<div id="footer">This is the footer</div>
The push makes room for the sticky footer. Notice equal negative margin on #wrap.
#wrap { width:100%; min-height:100%; height:100% !important; margin-bottom:-80px; margin-top:50px; }
#toolbar { position:fixed; top:0; width:100%; height:50px; }
#header { height: 140px; }
#content { min-height:300px; height:100%; }
#push, #footer { height:80px; } /* Must be same height as footer */
Then you'll need script to expand the content. Check the jsfiddle. It will work in a real page.
I have a single page website that is using multiple divs inside a container div. The height of each of these is set to a min-height of 100%. This works fine until content inside one of the divs is larger than the browser resolution - the content overlaps the border divs. I've tried to add position:relative to the container, and position:absolute to the children, but this causes all but the bottom div to disappear.
I've put the following together to demonstrate what I'm talking about:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div id="container">
<!-- Content -->
<div id="content">
<h1>content</h1>
</div>
<!-- About -->
<div id="about">
<h1>about</h1>
<!-- Contact -->
<div id="contact">
</div>
</div>
</body>
</html>
CSS
html, body{height:100%;min-height:100%;min-width:60.000em;font-size:30px;}
#container{
width:100%;
min-height:100%;
margin:auto;
padding:auto;
height:100%;
position:relative;
}
#content, #about, #contact {
position: absolute;
}
#content{
min-height: 100%;
height:100%;
background-color:red;
}
#about{
min-height: 100%;
background-color:blue;
}
#contact {
min-height: 100%;
background-color:yellow;
}
Here it is in action: http://jsfiddle.net/s62nr/1/
If I remove the relative/absolute positioning, the size is fine, but the content overlaps: http://jsfiddle.net/s62nr/2/
What am I missing?
Found the issue (seems this always happen when I ask a question ^^).
The problem was with the fact I was setting the child div height to 100%. This needs to be removed:
From:
#content{
min-height: 100%;
height:100%;
background-color:red;
}
To:
#content{
min-height: 100%;
background-color:red;
}
I was forcing the content to take up 100% of the browser height. This stopped the div from expanding automatically like it should.