My questions:
1.Logo: I'm trying to put my logo in top left side of my navigation but I can't. Any ideas (NOT UP TO CHANGE CODE A LOT)?
2.Screen resolution: Well I've noticed that my website isn't same on my PC and Laptop (ofc...). Is it possible to some how fix that. On this pictures you can also see how my website looks with my fonts. So you can see better that problem with Logo.
body {
background-color: white;
margin: 0;
padding: 0;
width: 100%;
height: auto;
min-width: 1000px;
}
#font-face {
font-family: "Jocker";
src: url("JockeyOne-Regular.ttf") format("truetype");
}
#font-face {
font-family: "Pacifica";
src: url("PacificaCondensed-Regular.ttf") format
("truetype");
}
#font-face {
font-family: "ReklameScript";
src:url("ReklameScript.ttf") format("truetype");
}
h1 {
font-size: 120px;
text-align: left;
font-family: "Jocker";
margin-left: 45;
color: rgb(200,101, 103);
}
h2 {
font-size: 70;
margin-left: 224;
font-family: "Jocker";
color: rgb(200,101, 103);
}
#header {
width: 100%;
height: 50px;
margin: auto;
}
#navigacija {
width: 100%;
margin-left: 0px;
padding: 0px;
height: 50px;
overflow: hidden;
text-align: right;
position: fixed;
background-color: #089DE3;
z-index: 9999;
}
#navigacija a {
color: white;
text-decoration: none;
line-height: 50px;
font-size: 30px;
font-family: "Pacifica";
display: inline-block;
padding-left: 50px;
padding-right: 50px;
padding-top: 0px;
padding-bottom: 0px;
}
#navigacija a:hover {
background: #00C5CD;
}
.main1 {
margin-top: 50px;
font-family: "ReklameScript";
font-size: 50;
background: #089DE3;
text-align: left;
margin-left: 194;
}
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 0px;
height: 0;
overflow: hidden;
bottom: 930;
right: 0px;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.video-wrapper {
width: 640px;
float: right;
margin-left:auto;
margin-right:auto;
max-width: 100%;
}
<!DOCYPE html>
<html>
<head>
<title>MaxSkins-Home</title>
<link rel="stylesheet" href="Home.css" type="text/css" />
</head>
<body>
<div id="header">
<div id="navigacija">
<div class="Home"><b>HOME</b></div>
<b>SHOP</b>
<b>GET POINTS</b>
<b>INFO</b>
</div>
</div>
<h1><b>EARN POINTS,<br> GET SKINS!</b></h1>
<h2><b>How does it work?</b></h2>
<div class="main1">
<p><b>It's simple!<br> Watch videos, do tasks and have fun!
<br>After earning large amount of coins,<br> contact us to get your skins!
<b></p>
</div>
<div class="video-wrapper">
<div class="video-container">
<iframe width="640" height="360"
src="https://www.youtube.com/embed/lwItL2NXwDw" frameborder="5"
allowfullscreen></iframe>
</div>
<!-- /video -->
</div>
<!-- /video-wrapper -->
</body>
</html>
1680x1050 1366x768
You may try something like this. As I've seen in the site you linked, the logo is formatted text. I inserted text with left float. See if that works for you.
body {
background-color: white;
margin: 0;
padding: 0;
width: 100%;
height: auto;
min-width: 1000px;
}
#font-face {
font-family: "Jocker";
src: url("JockeyOne-Regular.ttf") format("truetype");
}
#font-face {
font-family: "Pacifica";
src: url("PacificaCondensed-Regular.ttf") format
("truetype");
}
#font-face {
font-family: "ReklameScript";
src:url("ReklameScript.ttf") format("truetype");
}
h1 {
font-size: 120px;
text-align: left;
font-family: "Jocker";
margin-left: 45;
color: rgb(200,101, 103);
}
h2 {
font-size: 70;
margin-left: 224;
font-family: "Jocker";
color: rgb(200,101, 103);
}
#header {
width: 100%;
height: 50px;
margin: auto;
}
#navigacija {
width: 100%;
margin-left: 0px;
padding: 0px;
height: 50px;
overflow: hidden;
text-align: right;
position: fixed;
background-color: #089DE3;
z-index: 9999;
}
#navigacija a {
color: white;
text-decoration: none;
line-height: 50px;
font-size: 30px;
font-family: "Pacifica";
display: inline-block;
padding-left: 50px;
padding-right: 50px;
padding-top: 0px;
padding-bottom: 0px;
}
a#logo {
float: left;
}
#navigacija a:hover {
background: #00C5CD;
}
.main1 {
margin-top: 50px;
font-family: "ReklameScript";
font-size: 50;
background: #089DE3;
text-align: left;
margin-left: 194;
}
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 0px;
height: 0;
overflow: hidden;
bottom: 930;
right: 0px;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.video-wrapper {
width: 640px;
float: right;
margin-left:auto;
margin-right:auto;
max-width: 100%;
}
<!DOCYPE html>
<html>
<head>
<title>MaxSkins-Home</title>
<link rel="stylesheet" href="Home.css" type="text/css" />
</head>
<body>
<div id="header">
<div id="navigacija">
LOGO
<div class="Home"><b>HOME</b></div>
<b>SHOP</b>
<b>GET POINTS</b>
<b>INFO</b>
</div>
</div>
<h1><b>EARN POINTS,<br> GET SKINS!</b></h1>
<h2><b>How does it work?</b></h2>
<div class="main1">
<p><b>It's simple!<br> Watch videos, do tasks and have fun!
<br>After earning large amount of coins,<br> contact us to get your skins!
<b></p>
</div>
<div class="video-wrapper">
<div class="video-container">
<iframe width="640" height="360"
src="https://www.youtube.com/embed/lwItL2NXwDw" frameborder="5"
allowfullscreen></iframe>
</div>
<!-- /video -->
</div>
<!-- /video-wrapper -->
</body>
</html>
Related
I've changed the color of my header, which includes a logo and a title.
In the title, the text box where the words appear are taking the background-color of the background of the body of the website, and not taking the background color of the header.
* {
margin: 0px;
padding: 0px;
font-family: arial, helvetica, sans-serif;
font-size: 12px;
background-color: #C0C0C0;
}
.headerMenu {
background-color: #00b9ED;
height: 40px;
border-bottom: 0px;
padding-left: auto;
padding-right: auto;
padding-bottom: 10px;
width: 100%;
}
#wrapper {
margin-left: auto;
margin-right: auto;
width: 1000px;
padding-top: 0px;
padding-bottom: 0px;
}
.logo {
width: 125px;
}
.logo img {
background-color: #00b9ED;
position: absolute;
width: 50px;
height: 38px;
top: 0;
left: 10px;
}
.headerTitle {
background-color: #00b9ED;
position: absolute;
top: 15px;
left: 80PX;
font-family: 'oswald', arial, sans-serif;
}
<!DOCTYPE HTML>
<HTML>
<HEAD>
<title>FINDPETS</title>
<link href="./css/style.css" rel="stylesheet" type="text/css" />
</HEAD>
<body>
<div class="headerMenu">
<div id="wrapper">
<div class="headerTitle">
<h2>PET FRIENDS</h2>
</div>
<div class="logo">
<img src="./IMG/dog_bone_logo.png" />
</div>
</div>
</div>
</body>
</HTML>
Photo of the resulting error:
the asterisk selector * is called the universal selector . Which means it selects all elements so it will add all those properties ( including background-color ) to the title as well.
You can just remove the background-color property rule from * {} and add it to a new body {} selector. That way the background-color property won't be applied to all your elements but only to body
body {
background-color: #C0C0C0;
}
* {
font-family: arial, helvetica, sans-serif;
font-size: 12px;
padding: 0px;
margin: 0px;
}
.headerMenu {
background-color: #00b9ED;
height: 40px;
border-bottom: 0px;
padding-left: auto;
padding-right: auto;
padding-bottom: 10px;
width: 100%;
}
#wrapper {
margin-left: auto;
margin-right: auto;
width: 1000px;
padding-top: 0px;
padding-bottom: 0px;
}
.logo {
width: 125px;
}
.logo img {
background-color: #00b9ED;
position: absolute;
width: 50px;
height: 38px;
top: 0;
left: 10px;
}
.headerTitle {
background-color: #00b9ED;
position: absolute;
top: 15px;
left: 80PX;
font-family: 'oswald', arial, sans-serif;
}
<div class="headerMenu">
<div id="wrapper">
<div class="headerTitle">
<h2>PET FRIENDS</h2>
</div>
<div class="logo">
<img src="./IMG/dog_bone_logo.png" />
</div>
</div>
</div>
I've tried everything and can't seem to get the footer to stick to the bottom.
I've been moving things around, might have messed up the codes a bit.
I'm fine with how it is on longer (more content) pages. But it's giving me to much white space on pages with less content.
Help would be appreciated!
#charset "UTF-8";
* {
margin: 0;
}
/* Body */
html, body {
font-family: 'Questrial', sans-serif;
background-image: url('mila_background_btm.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: bottom;
margin: 0;
padding: 0;
min-height: 100%;
}
/* Text */
h1 {
text-align: center;
margin-top: 30px;
margin-bottom: 30px;
color: #3A3366
}
h2 {
text-align: center;
margin-top: 20px;
color: #2D4B5B;
margin-bottom: 20px;
}
p {
margin-top: 1;
text-align: center;
line-height: 150%;
}
/* Container */
.container {
width: 90%;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
text-decoration: none;
height: 100%;
padding-bottom: 50px;
}
/* Navigation */
header {
font-family: 'Questrial', sans-serif;
width: 90%;
height: 9%;
background-color: #fff;
border-bottom: 2px solid #312f47;
text-decoration: none;
margin-left: auto;
margin-right: auto;
}
nav {
float: right;
width: 70%;
text-align: right;
margin-right: 0px;
margin-top: 35px;
}
nav a {
font-size: 1rem;
padding: .5rem;
text-decoration: none;
color: #312f47;
}
a:hover {
background: #312f47;
color: white;
}
nav a:first-child {
display: none;
}
.current {
color: #9390A6;
}
/* Images */
.gallery {
margin-bottom: 100px;
height: 100%;
}
.photos {
max-width: 50%;
}
.contact {
display: block;
margin: auto;
margin-top: 50px;
}
/* Google Maps */
.google-maps {
position: relative;
padding-bottom: 16.6%;
height: 0;
overflow: hidden;
margin-top: 50px;
}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.video
{
position: relative;
padding-bottom: 56.25%;
padding-top: 80px;
height: 0;
overflow: hidden;
margin-top: 50px;
}
.video iframe
{
position: absolute;
top: 0;
left: 15%;
width: 70%;
height: 70%;
}
/* Footer */
footer {
font-size: 8pt;
color: #707070;
text-align: center;
height: 50px;
margin-top: 50px;
position: relative;
}
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="container">
<header>
<nav>
</nav>
</header>
</div>
<footer>
</footer>
</body>
</html>
You have no text between the footer tags that is why you do not see the footer and if you add background color it will be much more clear.
For example you should add class="site-footer" to the html footer tag.
<footer class="site-footer">
The Footer.
</footer>
And the class definitions in the CSS file:
.site-footer{
height: 120px;
background: red;
}
You can also use the link for reference.
I'm using this for footer and its working perfect with me :
html,body,ul,a,li{
margin:0;
padding:0;
border:0;
outline:none;
vertical-align:top;
height:100%;
text-decoration:none;
}
.wrap{width:100%;
min-height:100%;
height: auto !important;
height:100%;margin:0 auto;
display:block;
background:lightblue;}
footer{
bottom:0px;
display:block;
width:100%;
height:auto;}
#fo-wrap{width:100%;
height:100px;
background-color:#FF2E99;}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class='wrap'>
here every thing in page
</div>
<footer>
<div id='fo-wrap'>
here footer content
</div>
</footer>
</body>
</html>
Add a min-height for .content relative to the viewport.
Decremented 110px from it (padding-bottom: 50px; margin-top: 10px; footer height: 50px)
footer {
font-size: 8pt;
color: #707070;
text-align: center;
height: 50px;
margin-top: 50px;
position: fixed;
bottom: 0;
width: 100%;
background-color: #ccc;
}
#charset "UTF-8";
* {
margin: 0;
}
/* Body */
html, body {
font-family: 'Questrial', sans-serif;
background-image: url('mila_background_btm.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: bottom;
margin: 0;
padding: 0;
min-height: 100%;
}
/* Text */
h1 {
text-align: center;
margin-top: 30px;
margin-bottom: 30px;
color: #3A3366
}
h2 {
text-align: center;
margin-top: 20px;
color: #2D4B5B;
margin-bottom: 20px;
}
p {
margin-top: 1;
text-align: center;
line-height: 150%;
}
/* Container */
.container {
width: 90%;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
text-decoration: none;
height: 100%;
padding-bottom: 50px;
}
/* Navigation */
header {
font-family: 'Questrial', sans-serif;
width: 90%;
height: 9%;
background-color: #fff;
border-bottom: 2px solid #312f47;
text-decoration: none;
margin-left: auto;
margin-right: auto;
}
nav {
float: right;
width: 70%;
text-align: right;
margin-right: 0px;
margin-top: 35px;
}
nav a {
font-size: 1rem;
padding: .5rem;
text-decoration: none;
color: #312f47;
}
a:hover {
background: #312f47;
color: white;
}
nav a:first-child {
display: none;
}
.current {
color: #9390A6;
}
/* Images */
.gallery {
margin-bottom: 100px;
height: 100%;
}
.photos {
max-width: 50%;
}
.contact {
display: block;
margin: auto;
margin-top: 50px;
}
/* Google Maps */
.google-maps {
position: relative;
padding-bottom: 16.6%;
height: 0;
overflow: hidden;
margin-top: 50px;
}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.video
{
position: relative;
padding-bottom: 56.25%;
padding-top: 80px;
height: 0;
overflow: hidden;
margin-top: 50px;
}
.video iframe
{
position: absolute;
top: 0;
left: 15%;
width: 70%;
height: 70%;
}
.container {
min-height: calc(100vh - 110px)
}
/* Footer */
footer {
font-size: 8pt;
color: #707070;
text-align: center;
height: 50px;
width: 100%;
background-color: #ccc;
}
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="container">
<header>
<nav>
</nav>
</header>
</div>
<footer>
My footer
</footer>
</body>
</html>
When I shrink my viewport, my divs (labeled "Top", "Left", and "Right") stack on top of each other like I want them, but don't show their full widths. The widths of each div becomes cut, so you can't see their full width on a mobile device. How should I change my code to show the full width of each div on a mobile device?
body
{
margin: 0;
padding: 0;
}
#wrapper
{
position: relative;
width: 900px;
height: 600px;
background-color: yellow;
left: 50%;
margin-left: -450px;
top: 0;
}
#main
{
position: absolute;
width: 900px;
height: 100px;
background-color: #99CCCC;
left: 50%;
margin-left: -450px;
}
#main p
{
font-family: sans-serif;
color: #333;
font-weight: bold;
text-align: center;
font-size: 40px;
margin-top: 0;
padding-top: 25px;
}
#left
{
position: absolute;
width: 200px;
height: 500px;
background-color: green;
top: 100px;
}
#left p
{
font-family: sans-serif;
font-weight: bold;
color: #333;
font-size: 45px;
text-align: center;
}
#right
{
position: absolute;
width: 200px;
height: 500px;
top: 100px;
right: 0;
background-color: dodgerblue;
}
#right p
{
font-family: sans-serif;
font-weight: bold;
color: #333;
font-size: 45px;
text-align: center;
}
/* START OF MEDIA QUERIES */
#media all and (max-width: 961px) {
#wrapper {
position: relative
width: 100%;
height: 400px;
background-color: yellow;
left: 0;
margin-left: 0;
top: 0;
}
#main {
position: absolute;
width: 100%;
height: 100px;
background-color: #99CCCC;
left: 0;
margin-left: 0;
}
#left {
position: absolute;
width: 100%;
height: 100px;
background-color: green;
top: 150px;
display: block;
}
#left p {
font-family: sans-serif;
font-weight: bold;
color: #333;
font-size: 45px;
text-align: center;
margin-top: 25px;
}
#right {
position: absolute;
width: 100%;
height: 100px;
background-color: dodgerblue;
top: 300px;
right: 0;
}
#right p {
font-family: sans-serif;
font-weight: bold;
color: #333;
font-size: 45px;
text-align: center;
margin-top: 25px;
}
<!DOCTYPE HTML>
<html>
<head>
<title>Responsive website</title>
<link rel="stylesheet" href="test.css">
<meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"/>
</head>
<body>
<div id="wrapper">
<div id="main">
<p>Top</p>
</div>
<div id="left">
<p>Left</p>
</div>
<div id="right">
<p>Right</p>
</div>
</div>
</body>
</html>
Please check updeted answer:
You have small mistake in your code, add the " ; " after you can give
"position:relative;" in id "#wrapper" for responsive.
I have made my YouTube video in my main div (container_wrapper) responsive. However, when the browser window is at full screen, the bottom of the video is cut off by the div below it (footer).
Question: How can I center my responsive YouTube video in the middle (both horizontally and vertically, so that it is equal on all sides) of my main div (container_wrapper) without having to make it bigger, or having to mess with the other div (footer)?
I would also like it if the video could keep the same aspect ratio and not have to be shrunk in height or width. Thanks!
Here is my HTML Code:
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Hyperdog Productions</title>
<link href="css/stylesheet5.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div class="wrapper">
<div id="navigation_bar">
<span>Hyperdog Productions</span>
<ul class="navbar_list">
<li class="nav_list" id="about"><a class="nav_link" href="about.html">About</a></li>
<li class="nav_list" id="short_films"><a class="nav_link" href="films.html">Short Films</a></li>
<li class="nav_list" id="cast/crew"><a class="nav_link" href="other.html">Cast/Crew</a></li>
<li class="nav_list" id="contact_us"><a class="nav_link" href="contact_us.html">Contact Us</a></li>
<li class="nav_list" id="other"><a class="nav_link" href="other.html">Other</a></li>
</ul>
</div> <!--End of NAVIGATION_BAR-->
<main id="container">
<div id="container_wrapper">
<div id="video" class="video-container">
<iframe class="trouble_in_smalls" height: 640px width: 1351px src="https://www.youtube.com/embed/EuIXJIp8f6U" frameborder="0" allowfullscreen></iframe>
</div>
</div> <!--End of CONTAINER_WRAPPER-->
<div id="footer">
</div> <!--End of FOOTER-->
</main> <!--End of MAIN-->
<footer id="copyright">
<img src="images/facebook2.png" alt="fbicon" title="Like Us on Facebook" />
<p class="copyright2">Copyright Andrew Myers © 2015. All Rights Reserved.</p>
</footer> <!--End of COPYRIGHT-->
</div> <!--End of WRAPPER-->
</body>
</html>
CSS Code:
#font-face {
font-family: "Lato-Regular";
src: url("../fonts/Lato-Regular/Lato-Regular.ttf");
src: url("../fonts/Lato-Regular/Lato-Regular.woff");
}
#font-face {
font-family: "PT-Sans";
src: url("../fonts/PT-Sans/PTS55F.ttf");
src: url("../fonts/PT-Sans/PTS55F.woff");
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html, body {
padding: 0;
margin: 0;
height: 1440px;
width: 100%;
font-size: 0;
overflow-x: none;
}
body {
font-size: 62.5%;
min-width: 575px;
}
.wrapper {
height: 1440px;
}
#navigation_bar {
height: 90px;
width: 100%;
text-align: center;
background-color: #1d1d1d;
}
main {
height: 1300px;
}
#container_wrapper {
height: 900px;
width: 100%;
background-image: url("../images/landscape.jpg");
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
overflow: hidden;
padding: 50px;
}
#footer {
height: 400px;
width: 100%;
background-image: url("../images/bg.png");
background-repeat: repeat;
text-align: center;
}
#copyright {
height: 50px;
width: 100%;
background-color: #1d1d1d;
}
.logo {
padding: 9px 12px;
margin: 0px;
position: absolute;
float: left;
left: 20%;
top: 25px;
font-family: "PT-Sans", "Calibri Light", sans-serif;
font-size: 24px;
letter-spacing: 10px;
text-align: center;
text-decoration: none;
text-shadow: 8px 8px 8px #000000;
text-transform: uppercase;
color: #AF7817; /* Cool Light Blue Color: #708090 */
}
.logo:hover {
color: #B8860B;}
.navbar_list {
position: absolute;
float: right;
right: 20%;
top: 16.25px;
text-align: center;
vertical-align: middle;
}
.navbar_list li {
list-style-type: none;
list-style: none;
float: left;
display: inline;
padding: 9px 12px;
margin: 0px;
font-size: 10px;
}
.nav_link:link {
padding: 10px;
margin: 0px;
font-family: "Lato-Regular", "PT-Sans", "Calibri Light", sans-serif;
font-size: 1.2em;
line-height: 3.7em !important;
text-transform: uppercase;
text-decoration: none;
text-align: center;
color: #ffffff;
}
.nav_link:hover {
color: #a3a3a3;
}
.trouble_in_smalls {
margin: 0px auto;
position: relative;
display: block;
top: 130px;
height: 640px;
width: 1351px;
}
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.video-container iframe, .video-container object, .video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 5%;
}
.footertext {
font-family: "PT-Sans", Verdana, "Calibri Light", sans-serif;
font-size: 24px;
line-height: 18px;
color: #878787;
text-align: center;
margin: 0px;
float: left;
position: relative;
left: 50%;
top: 5%;}
.left {
text-align: center;
position: relative;
left: 5px;
top: 15px;}
img {
height: 50%;
vertical-align: middle;
position: relative;
float: left;
left: 15%;
top: 25%;
}
.copyright2 {
font-family: "PT-Sans", Verdana, "Calibri Light", sans-serif;
font-size: 12px;
line-height: 18px;
color: #878787;
text-align: center;
margin: 0px;
float: left;
position: relative;
left: 25%;
line-height: 50px;
vertical-align: middle;
}
#media (max-width: 1750px) {
.logo {
margin-left: 15px;
position: relative;
float: inherit;
left: inherit;
}
.navbar_list {
padding-left: 0px;
position: relative;
float: inherit;
display: inline-block;
right: inherit;
}
}
At first I would get rid of some of the height-values on your divs like on the html and body tag. It will make everything more complicated as your project grows and in a responsive context.
If you don't care about supporting older browsers like IE9 and lower you could use flexbox. There is a pretty good guide for it on CSS Tricks:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I hope i could help you!
I have developed a website as part of my assignment. As I am new to html/css I could not figure some problems out of my code. The assignment specifications says that the screen size should be in certain size so that majority browsers can open it and the user should not experience any scroll activties. So I have used div to divide the whole page to fit the size. However, the container(In my code named as 'box') is set to the left side of the brower body and I have to set it centred, but I do not know how to fix it. Can anyone give me some help, please and thank you.
My HTML:
<!DOCTYPE html>
<html>
<head>
<title>habibe Naby</title>
<link rel="stylesheet" href="Websystems.css">
</head>
<body>
<div id="box">
<div id="header">
<img id="image" src="spring.jpeg">
<p id="text">Welcome to My Homepage</p>
</div>
<div id="under">
<div id="upper">
<div id="leftbar">
<div class="list">
<ul>
<li>Home</li>
<li>Past</li>
<li>Future</li>
<li>Comments
</li>
</ul>
</div>
</div>
<div id="rightbar">
<div id="title">Habibe Naby</div>
<p>this is my name and
I<spanclass="special">Danny</span>.Ihave a .. </p>
</div>
</div>
<div id="footer">copyrights©</div>
</div>
My CSS:
body
{
height: 750px;
margin: 2px;
padding: 2px;
width: 1000px;
}
#box
{
width: 1000px;
margin-left: auto;
margin-right: auto;
height:100%;
border:1px solid #8D8D8D;
}
#header
{
height: 150px;
width: 100%;
position: relative;
}
#image
{
height: 150px;
width: 1000px;
}
#text
{
z-index: 100;
position: absolute;
color: darkolivegreen;
font-style: italic;
font-size: 32px;
font-weight: bolder;
left: 300px;
top: 25px;
}
#leftbar
{
float: left;
width: 200px;
height: 560px;
margin: 0px;
padding: 0px;
background-color: azure;
}
.list
{
margin-top: 40px;
margin-left: auto;
text-decoration: underline;
color:blueviolet;
font-size: 20px;
}
.list ul
{
list-style: none;
}
#rightbar
{
float: right;
width: 800px;
height: 560px;
margin: 0px;
padding: 0px;
background: mintcream;
}
#title
{
margin-left: 80px;
margin-top: 30px;
font-size: 28px;
font-weight: normal;
font-style: italic;
color: blueviolet;
}
#footer
{
clear: both;
height: 40px;
text-align: center;
background-color: oliveDrab;
margin 0px;
padding: 0px;
color: white;
}
.special
{
font-size: 20px;
font-weight: bold;
font-family: "New Century Schoolbook", Times, sans-serif;
color: dodgerblue;
}
p, pre
{
padding: 10px 20px;
margin-left: 50px;
margin-right: 50px;
color: darkslateblue;
}
Jsfiddle: http://jsfiddle.net/2gtsK/show/
Removed width from body, Added margin:0 auto to #box
margin:0 auto is same as:
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
.
body
{
height: 750px;
margin: 2px;
padding: 2px;
}
#box
{
width: 1000px;
margin: 0 auto;
height:100%;
border:1px solid #8D8D8D;
}
You can wrap it by another div and set that div's text-align:center;