I know that it's a newbie question, but if you could give me a hand and tell me what I'm doing wrong I'd really appreciate that:
While I was experimenting with HTML and CSS I decided to create a page with a fixed size that should be centered on the screen. To do so I decided to place the [body] tag by making its position relative and move it by writing:
position: absolute;
padding: 1em;
width: 960px;
height: 600px;
left: 50%;
top: 50%;
margin-left: -480px;
margin-top: -300px;
Hovever it didn't worked quite as expected, and this is the result I'm getting:
I was expecting to see the yellow box perfectly centered both horizontally and vertically, but instead I see that it's slightly off-center.
I tried to load the page on Safari, Firefox and Chrome and I'm getting the same results so as I already suspected I know that it's my fault :-)
Could you help me by explaining what I did wrong ?
Thank you very much
This is the complete HTML+CSS code of the page I have written:
<!DOCTYPE html>
<html>
<head>
<title>Test 1</title>
<meta charset="utf-8">
<style>
html, body {
padding: 0;
margin: 0;
}
html {
background-color: red;
width: 100%;
min-height: 100%;
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
}
body {
padding: 1em;
background-color: yellow;
width: 960px;
height: 600px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -480px;
margin-top: -300px;
}
</style>
</head>
<body>
This is my website
</body>
</html>
That's because of the padding.
If you set the padding of the body to 0, it works (tested).
If you need a padding, add an internal 100% width div inside your body and give this internal div a padding.
Try this:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Test 1</title>
<meta charset="utf-8">
</head>
<body>
This is my website
</body>
</html>
CSS:
html, body {
padding: 0;
margin: 0;
}
html {
background-color: red;
width: 100%;
min-height: 100%;
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
}
body {
padding: 1em;
background-color: yellow;
width: 960px;
height: 600px;
margin:auto;
margin-top: -300px;
}
JsFiddle: http://jsfiddle.net/qecwx/
The margin-left and margin-top should have -ve half values for width and height respectively:
margin-left: /* minus half of width */
margin-top: /* minus half of height */
You need to put in appropriate values.
In the container, you can also center using:
margin:0 auto;
provided you have already specified width too
Just messing around with it for a few minutes and this is what I came up with that seems to fit your needs:
body {
padding: 1em;
background-color: yellow;
width: 960px;
height: 600px;
position: relative;
margin: 0 auto;
margin-top: 10%;
}
All I did was remove the margin-left: and did a margin: 0 auto; to align the left and right sides. I then set the margin-top: 10%; to get the top and bottom centered. Also I set the positioning to relative. Hope that this helps.
Basically, you want to have the margins on your body tag set to auto like this
body {
padding: 1em;
background-color: yellow;
width: 960px;
height: 600px;
margin-left: auto;
margin-right: auto;
}
to center the body vertically takes a lot more work.
Related
I am trying to make a semi-responsive web site project that will be viewed on an ipad. I made an html body with a max width of 800px. This works well enough for my purposes, but I also have a fixed navigation on the top with drop down menus. When the site is over 800px, it works fine, but if it scales below that, e.g to the 768 width when it is viewed vertically on the iPad, part of the menu bar sticks out a little, while the rest of the html scales proportionally with the viewport.
I am hoping the remedy is something simple. I am including a very simplified version of my code below. I removed all of the dropdown menu content since it should just be the container that has to work.
Thanks in advance! :)
<html>
<head>
</head>
<body>
<div id="page">
<header id="apu_top">some content<img src="images/chapter_cover_images/2x/ch5_apu#2x.png" width="100%"/>
</header>
<main>
<nav id="main_nav_bar_container">
<div id="main_nav_bar">
<div id="main_nav_top_div"> some content </div>
</div>
</nav>
</main>
</div>
</body>
</html>
css:
html {
box-sizing: border-box;
background-color: #888;
clear: both;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
font-family: "Roboto Condensed";
font-size: 13px;
line-height: 1.19em;
margin-bottom: 9px;
font-style: normal;
font-weight: normal;
text-align: left;
hyphens: auto;
}
#page {
max-width: 800px;
margin: 0 auto;
position: relative;
background-color: #FFFFFF;
}
#main_nav_bar_container {
width: 100%;
position: fixed;
max-width: 800px;
top: 0;
margin-left: auto;
margin-right: auto;
overflow: hidden;
z-index: 1000;
}
#main_nav_bar {
background-color: #2580B9;
color: #F3A51D;
font-size: 1em;
height: 38px;
width: 100%;
vertical-align: middle;
}
#main_nav_top_div {
z-index: 10000;
margin-left: 4%;
}
Ok so in your screenshot I think I see the default margins on the body of 8px and right and left side.
So what you can do is adding a width calculation of 100% minus the 2 * 8px.
Remain the max-width so it will never get bigger than 800px.
#main_nav_bar_container {
width: calc(100% - 16px);
position: fixed;
max-width: 800px;
top: 0;
margin-left: auto;
margin-right: auto;
overflow: hidden;
z-index: 1000;
}
Or instead of the width calc, you could use left: 8px; and right: 8px; :)
I have a small problem. The webpage I'm working on has three areas:
On the left a navigation, which should always be on the left side
A content area in the middle, which should always be in the middle of the browser
The logo area on the right side, which should always be in the top right corner
Here's the code I have right now:
CSS
html, body
{
height: 100%;
min-height:100%;
padding: 0em;
margin: 0em;
}
body
{
font-family: Segoe UI, Arial;
font-size: 12px;
color: #616a71;
line-height: 15px;
letter-spacing: 0.5px;
overflow-y: scroll;
background-color: #CCC;
}
div#navigation
{
position: absolute;
float: left;
width: 220px;
left: 5px;
top: 70px;
z-index: 2;
padding-bottom: 50px;
background-color: red;
}
div#content
{
position: relative;
width: 1014px;
margin: 0 auto;
top: 70px;
padding: 10px;
background-color: #f6f6f3;
box-shadow: 0 0 5px rgba(0,0,0,0.2);
border-radius: 2px;
line-height: 20px;
}
div#right
{
position: absolute;
width: 258px;
right: 0;
top: 0;
background-color: green;
}
HTML
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<title>header</title>
<link href="/style/test.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="navigation">
nav
</div>
<div id="content">
content
</div>
<div id="right">
logo
</div>
</body>
</html>
Now, when I resize the browser, the content area goes behind the navigation are. What I want to achieve, is that when there is too little space to display the navigation and content area side by side the horizontal scrollbar of the browser should appear.
By using the CSS media queries as the ones specifies below
#media (max-width: 600px) {
// Your code goes here
}
You can specify the CSS to be used for these widths. Change the width accordingly
Try to give the width of divs as %.
div#navigation
{
width: 20%;
}
div#content
{
width: 60%;
}
div#right
{
width: 20%;
}
and float them all to left.
When I zoomed the browser, the date and apa div went outside the container div. How to keep the date/apa div still inside the container even when zoomed? Sorry for asking simple question. Just a beginner.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="testeffect.css"/>
</head>
<body>
<div id="header">
<div id="container">
<div id="date">
<p>18 Jamadilawal 1434H<br> Saturday, 30th March 2013<br><p>
</div>
<div id="apa">
<p>18 Jamadilawal 1434H<br> Saturday, 30th March 2013<br><p>
</div>
</div>
</div>
</body>
</html>
*{margin: 0 auto;}
#header{
height: 50px;
width: 100%;
background-color: black;
}
p{
font-family: Garamond;
font-size: 18px;
color: white;
}
#container{
height: 50px;
width: 800px;
position: absolute;
left: 20%
}
#apa{
position: absolute;
left: 200px;
width: 200px;
height: 50px;
background-color: brown;
left: 420px;
}
#date{
position: absolute;
left: 200px;
width: 200px;
height: 50px;
background-color: brown;
}
http://jsfiddle.net/zWpM9/
most of the times, absolute positioning causes that. try not using absolute positioning
#header{
height: 50px;
width: 100%;
background-color: black;
}
can't inherit the width based off the parent if the parent also not set, try
body {
width: 100%;
}
also get rid of that * { margin: auto; } and only add it to things that MUST be centered.
Additional issues, you are using #header { width: 100%; } and then #content { width: 800px; } which is a poor idea. If header is smaller than 800px, what will content do? act strangely, and unexpectedly. So, please don't do this. Either specify all with percents or NONE (it will be easier for you as a beginner).
here is my fiddle, GUESSING what you might have wanted to do. It scales with zoom correctly, and uses no percentages.
http://jsfiddle.net/QgH99/
I am trying to achieve following with my code: I would like to have a div container, div#title-box, that is centered. Inside that div container I want to have 3 other div containers, div#logo, div#title, div#subtitle (look at the code to see how exactly they are displayed)
Now the actual problem: The div#logo has a given width, the other two however don't, they float.
How can I have have the div#title-box wrap around the other three divs but at the same time staying centered. Another problem I see is that the div#title-box cannot have a fixed width.
Any ideas. Thanks!
EDIT: The code below has to be modified so that the div#title-box wraps around the other divs and stays centered.
If anyone needs to play around with the code, here is it with a full example:
<!DOCTYPE html>
<html>
<head>
<style>
div#title-box {
max-width: 500px;
display: block;
height: 600px;
margin: 0 auto;
position: relative;
}
div#logo {
padding: 0;
margin: 0;
position: absolute;
top: 100px;
left: 5px;
width: 100px;
height: 100px;
overflow: auto;
background: #ff0000 no-repeat;
background-size: 100% 100%;
border-radius: 15px;
float: left;
}
div#title {
padding: 0;
margin: 0;
position: absolute;
left: 110px;
top: 100px;
bottom: 20px;
right: 10px;
overflow: auto;
float: left;
}
div#subtitle {
padding: 0;
margin: 0;
position: absolute;
top: 140px;
bottom: 20px;
right: 10px;
left: 110px;
overflow: auto;
float: left;
}
</style>
</head>
<body>
<div id="title-box">
<div id="logo">
</div>
<div id="title">
<h1>Hello</h1>
</div>
<div id="subtitle">
<h3>A A A A A A A A A A A A A A A!</h3>
</div>
</div>
try something along the lines of
div#title-box {
width: 500px;
display: inline-block;
height: 600px;
margin: 0 25%;
position: relative;
left:-250px;
}
When you apply
position: absolute
to your code, it will be put out of the rest of the DOM-context.
I have modified your CSS as such: http://jsfiddle.net/asBmS/. Your wrapping div now should always contain the child divs. Is this what you wanted?
The best thing I can think to suggest is more of a 'hack' which would need to be adjusted if you change the width of the content.
Take a look at this link and see the offset margin-left, it puts everything in the center.
You'll probably need to tweak it further to meet your needs.
http://jsfiddle.net/asBmS/15/
#logo,#title,#subtitle{
/*offset hack*/
margin-left: 10% !important;
}
I'm learning CSS and am having trouble getting my #wrapper DIV to expand to fit it's contents.
I've made sure that my containers all have 100% height, min-height didn't seem to do anything but I did try that also on both the #wrapper, html and body. Is it something to do with relative vs. absolute positioning? Here's an example of what i'm working on below, any help would be greatly appreciated.
(Updated 4.21.11 by owner)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS_Alpha_textArea</title>
<style type="text/css">
html {
height: 100%;
clear: both;
}
body {
margin: 0px;
padding: 0px;
font-family:Georgia, "Times New Roman", Times, serif;
color:#FFF;
font-size: 100%;
line-height: 1em;
background-color: #gray;
background-size: 100%;
height:100%;
clear: both;
}
#wrapper {
margin-right: auto;
margin-left: auto;
/*background-color: #FFF;*/
width: 75%;
height:100%;
position: relative;
clear: both;
}
.screen {
margin-right: auto;
margin-left: auto;
background-color: #3B6AA0;
width: 75%;
height:100%;
filter: alpha(opacity=20);
/* CSS3 standard*/
opacity:0.20;
z-index: -100;
position: absolute;
left: 12%;
right: 12%;
clear: both;
}
.overlay {
margin-right: auto;
margin-left: auto;
width: 75%;
height:100%;
z-index: 100;
position: absolute;
left: 12%;
right: 12%;
padding: 0px;
clear: both;
}
#textArea {
height: auto;
width: 75%;
margin-right: auto;
margin-left: auto;
color: #FFF;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="screen"></div>
<div class="overlay">
<div id="textArea">
<p>textArea</p><br><p>textArea</p><br><p>textArea</p><br><p>textArea</p><br><p>textArea</p><br><p>textArea</p><br><p>textArea</p><br><p>textArea</p><br>
<p>textArea</p><br><p>textArea</p><br><p>textArea</p><br><p>textArea</p><br><p>textArea</p><br><p>textArea</p><br><p>textArea</p><br><p>textArea</p><br>
</div>
</div>
</div>
</body>
</html>
For a container div, it is generally better to leave off the height property (unless you want to limit it for a specific reason). That will allow the height to expand as needed.
the 100% property means that it's going to fit on the parent's body.
check this out
http://cssbeauty.com/skillshare/discussion/30/100-width-and-height/
Your link is down, but it looks like if you add overflow:hidden; to your #wrapper, you'll get the desired effect.
Just keep in mind that absolute positioning removes the element from the natural flow of the document, so you'll need to consider how each item's content may overflow its container.