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!
Related
Despite having position fixed and no transform properties, my "hero" div always moves with the page. I want it to stay put
.hero{
position: fixed;
width: 1500px;
margin-left: 0px;
margin-top: 60px;
}
Full css:
*
{
margin: 0;
padding: 0;
}
header
{
background-image: linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.5)), url(img/snow.jpg);
height: 100vh;
background-size: cover;
background-position: center;
}
.main-nav
{
float: right;
list-style: none;
margin-top: 30px;
}
.main-nav li{
display: inline-block;
}
.main-nav li a{
color:white;
text-decoration: none;
padding: 5px 20px;
font-family: "Roboto", "sans-serif";
}
.main-nav li.active a{
border: 1px solid white;
}
.main-nav li a:hover{
border: 1px solid white;
}
.logo img
{
width: 150px;
height: auto;
float: left;
}
body
{
font-family: monospace;
}
.row
{
max-width: 1200px;
margin: auto;
}
.hero{
position: fixed;
width: 1500px;
margin-left: 0px;
margin-top: 60px;
}
h1{
color: white;
text-transform: uppercase;
font-size: 60px;
text-align: center;
/* margin-top: 275px; */
margin-top: 220;
}
.button
{
margin-top: 30px;
margin-left: 440px;
position: sticky;
}
.btn{
border: 1px solid white;
padding: 10px 30px;
color: white;
text-decoration: none;
margin-right: 5px;
font-size: 13px;
text-transform: uppercase;
position: sticky;
}
.btn-one{
background-color: darkorange;
font-family: "Roboto", sans-serif;
position: sticky;
}
.btn-two{
font-family: "Roboto", sans-serif;
position: sticky;
}
.btn-two:hover{
background-color: darkorange;
transition: all 0.5s ease-in;
}
html,body{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-y: auto;
overflow-x: hidden;
}
#page_2{
height: 1000px;
background-color: red;
}
Full HTML:
<html>
<head>
<title>Summer Website</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div id="page_1">
<div id="particles-js">
<div class="row">
<!-- <div class ="logo">
<img src="https://i.imgur.com/0PyA8HR.png" alt="">
</div> -->
<ul class="main-nav">
<li class ="active"> HOME </li>
<li> ABOUT </li>
<li> PORTFOLIO </li>
</ul>
</div>
<div class="hero">
<h1>HI I'M KACIE AND I LOVE SOLVING PROBLEMS.</h1>
<div class="button">
LINKEDIN
RESUME
</div>
<div class ="bro">
</div>
</div>
</div>
</header>
<!--particles js file -->
<!-- <h1> TEST </h1> -->
<script type="text/javascript" src="js/particles.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</div>
<div id=page_2>
</div>
</body>
</html>
There just seems to be problem with your closing tags incorrectly nested. There needs to another closing div before the closing header tag. The snippet shows the hero in a fixed position:
.hero {
position: fixed;
width: 1500px;
margin-left: 0px;
margin-top: 60px;
}
Full css: * {
margin: 0;
padding: 0;
}
header {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(img/snow.jpg);
height: 100vh;
background-size: cover;
background-position: center;
}
.main-nav {
float: right;
list-style: none;
margin-top: 30px;
}
.main-nav li {
display: inline-block;
}
.main-nav li a {
color: white;
text-decoration: none;
padding: 5px 20px;
font-family: "Roboto", "sans-serif";
}
.main-nav li.active a {
border: 1px solid white;
}
.main-nav li a:hover {
border: 1px solid white;
}
.logo img {
width: 150px;
height: auto;
float: left;
}
body {
font-family: monospace;
}
.row {
max-width: 1200px;
margin: auto;
}
.hero {
position: fixed;
width: 1500px;
margin-left: 0px;
margin-top: 60px;
}
h1 {
color: white;
text-transform: uppercase;
font-size: 60px;
text-align: center;
/* margin-top: 275px; */
margin-top: 220;
}
.button {
margin-top: 30px;
margin-left: 440px;
position: sticky;
}
.btn {
border: 1px solid white;
padding: 10px 30px;
color: white;
text-decoration: none;
margin-right: 5px;
font-size: 13px;
text-transform: uppercase;
position: sticky;
}
.btn-one {
background-color: darkorange;
font-family: "Roboto", sans-serif;
position: sticky;
}
.btn-two {
font-family: "Roboto", sans-serif;
position: sticky;
}
.btn-two:hover {
background-color: darkorange;
transition: all 0.5s ease-in;
}
html,
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-y: auto;
overflow-x: hidden;
}
#page_2 {
height: 1000px;
background-color: red;
}
<header>
<div id="page_1">
<div id="particles-js">
<div class="row">
<!-- <div class ="logo">
<img src="https://i.imgur.com/0PyA8HR.png" alt="">
</div> -->
<ul class="main-nav">
<li class="active"> HOME </li>
<li> ABOUT </li>
<li> PORTFOLIO </li>
</ul>
</div>
<div class="hero">
<h1>HI I'M KACIE AND I LOVE SOLVING PROBLEMS.</h1>
<div class="button">
LINKEDIN
RESUME
</div>
<div class="bro">
</div>
</div>
</div>
</div>
</header>
<div id=page_2>
</div>
Use position:inherit
You are using fixed and I think that is causing your issue.
Inherit won’t move, absolute stacks, fixed scrolls with page, static is default.
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>
How would i be able to align my navigation links to the header?
This is what i currently have:
But, I'd really like to have the links vertically aligned within the header, like this:
How would i do this?
Below is my CSS & HTML.
html, body {
margin: 0;
padding: 0;
}
body {
font-family: 'Open Sans', sans-serif;
}
.wrapper {
width: 1100px;
max-width: 90%;
margin: 0 auto;
}
#top_header {
position: fixed;
left: 0px;
top: 0px;
right: 0px;
background-color: #26ABF5;
height: 70px;
vertical-align: middle;
}
#logo_top {
display: inline-block;
width: 53px;
padding-top: 8px;
}
#main_nav {
display: inline-block;
font-size: 12px;
padding-left: 170px;
}
#main_nav a {
color: #fff;
font-weight: 400;
text-decoration: none;
margin-left: 6em;
}
.button {
float: right;
justify-content: center;
display: flex;
width: 101px;
margin-top: 14px;
padding-top: 9px;
padding-bottom: 9px;
border-radius: 2px;
background-color: #fff;
text-decoration: none;
font-family: 'Open Sans', sans-serif;
color: #26abf5;
font-size: 13px;
font-weight: 600;
}
<body>
<header id="top_header">
<div class="wrapper">
<img id="logo_top" draggable="false" src="images/logo1.png">
<nav id="main_nav">
FORSIDE
HVAD TILBYDER VI?
PRISER
OM OS
</nav>
<a class="button" href="#">LOG IND</a>
</div>
</body>
Use line-height for vertical-align. Im add the line in #main_nav.
Edit: add float: left; for your logo image.
html, body {
margin: 0;
padding: 0;
}
body {
font-family: 'Open Sans', sans-serif;
}
.wrapper {
width: 1100px;
max-width: 90%;
margin: 0 auto;
}
#top_header {
position: fixed;
left: 0px;
top: 0px;
right: 0px;
background-color: #26ABF5;
height: 70px;
vertical-align: middle;
}
#logo_top {
display: inline-block;
float: left;
width: 53px;
padding-top: 8px;
}
#main_nav {
display: inline-block;
font-size: 12px;
line-height: 70px;
padding-left: 170px;
}
#main_nav a {
color: #fff;
font-weight: 400;
text-decoration: none;
margin-left: 6em;
}
.button {
float: right;
justify-content: center;
display: flex;
width: 101px;
margin-top: 14px;
padding-top: 9px;
padding-bottom: 9px;
border-radius: 2px;
background-color: #fff;
text-decoration: none;
font-family: 'Open Sans', sans-serif;
color: #26abf5;
font-size: 13px;
font-weight: 600;
}
<body>
<header id="top_header">
<div class="wrapper">
<img id="logo_top" draggable="false" src="images/logo1.png">
<nav id="main_nav">
FORSIDE
HVAD TILBYDER VI?
PRISER
OM OS
</nav>
<a class="button" href="#">LOG IND</a>
</div>
</body>
i whant to center my article classes in my aside verticaly. If the size of the browser window is changed or is smaller (like on a mobile phone), the centering should adjust accordingly and the template should be responsive.
By the way: I talk about my three "war-boxes", that you could recognize with the words "Gegner 1", "Gegner 2" "and the gray background around them.. If the screen width is greater than or equal to 1200px, the Articles shall stand side by side, if the resolution is smaller, they should adapt dynamically and are available on a mobile phone resolution among themselves.
How could I do that?
HTML:
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Funfighter Alliance</title>
<link rel="stylesheet" href="/include/designs/FFA/reset.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/include/designs/FFA/style.css" type="text/css" media="screen" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans|Roboto' rel='stylesheet' type='text/css'>
<script src="/include/designs/FFA/js/modernizr.js"></script>
<script src="/include/designs/FFA/js/respond.min.js"></script>
</head>
<body>
<!--Header mit Navigation-->
<header id="side-header-wrapper">
<section id="side-header">
<!--Logo + Logounterschrift-->
<img alt="Funfighter Alliance - Offizielle Projekt-Homepage" src="/include/designs/FFA/bilder/Logo-FFA.jpg">
<p>Offizielle Projekt-Homepage</p>
<!--Navigation-->
<nav>
<h2 class="hidden">Navigation</h2>
<ul>
<li>Home</li>
<li>News</li>
<li>Teams</li>
<li>Forum</li>
<li>Kontakt</li>
</ul>
</nav>
</section>
</header>
<!--Spacer mit Log-In-->
<section id="spacer">
<h2 class="hidden">Log-In</h2>
<div class="login">{_boxes_VTEC-LOGINH}</div>
</section>
<!--3 Boxen für den War-Content-->
<aside>
<h2 class="hidden">Our Matches</h2>
<!--Topmatch Team 1-->
<article>
<img class="topwar_picleft" alt="Logo 1" src="/include/images/teams/team1.png" />
<p class="bluebox_versus">versus</p>
<img class="topwar_picright" alt="Logo 2" src="/include/images/teams/team1.png" />
<div class="topwar_whitebox">
<p class="whitebox_teamleft">Gegner links</p>
<p class="whitebox_versus">VERSUS</p>
<p class="whitebox_teamright">Gegner links</p>
</div>
</article>
<!--Topmatch Team 2-->
<article>
<img class="topwar_picleft" alt="Logo 1" src="/include/images/teams/team1.png" />
<p class="bluebox_versus">versus</p>
<img class="topwar_picright" alt="Logo 2" src="/include/images/teams/team1.png" />
<div class="topwar_whitebox">
<p class="whitebox_teamleft">Gegner links</p>
<p class="whitebox_versus">VERSUS</p>
<p class="whitebox_teamright">Gegner links</p>
</div>
</article>
<!--Last Matches-->
<article>
<img class="topwar_picleft" alt="Logo 1" src="/include/images/teams/team1.png" />
<p class="bluebox_versus">versus</p>
<img class="topwar_picright" alt="Logo 2" src="/include/images/teams/team1.png" />
<div class="topwar_whitebox">
<p class="whitebox_teamleft">Gegner links</p>
<p class="whitebox_versus">VERSUS</p>
<p class="whitebox_teamright">Gegner links</p>
</div>
</article>
<br class="clear" />
</aside>
<!--Content mit dynamischen Inhalt (je nach Unterseite generiert)-->
<div id="post"> {EXPLODE}</div>
<!--Footer, am Ende der Seite-->
<footer> </footer>
</body>
</html>
CSS:
/*Allgemeine Definitionen*/
body {
background-color: #FFFFFF;
border-top: 5px solid #009CFF;
color: #272934;
font-family: 'Open Sans',sans-serif;
overflow-y: scroll;
position: relative;
}
p {
line-height: 25px;
margin: 5px 0;
}
a {
color: inherit;
text-decoration: none;
transition: color 0.5s ease 0s;
}
strong {
font-weight: bold;
}
img {
height: auto;
max-width: 100%;
}
.hidden {
clip: rect(1px, 1px, 1px, 1px);
position: absolute;
}
.clear {
clear: both;
}
/*Header*/
#side-header {
color: #444444;
font-family: 'Roboto',sans-serif;
margin: 0 auto;
max-width: 1200px;
position: relative;
width: auto;
}
#side-header-wrapper {
background-color: #E8E8E8;
background-image: linear-gradient(to top, #E8E8E8 0%, #FFFFFF 100%);
background-repeat: repeat-x;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
height: 81px;
padding-bottom: 20px;
padding-top: 10px;
}
#side-header p {
font-size: 14px;
margin-left: 107.5px;
}
/*Navigation*/
nav {
bottom: 0;
font-size: 20px;
position: absolute;
right: 0;
}
nav ul li {
display: block;
float: left;
padding: 3px 15px;
}
/*Spacer m. Login*/
#spacer {
color: #444444;
font-family: 'Open Sans',sans-serif;
font-size: 14px;
height: 70px;
position: relative;
}
.login {
max-width: 100%;
overflow: hidden;
}
/*War-Boxes*/
.topwar_bluebox {
background: none repeat scroll 0 0 #009CFF;
float: left;
font-size: 14px;
height: 95px;
margin-right: 45px;
width: 256px;
}
aside {
background: none repeat scroll 0 0 #808080;
margin: 70px auto 45px;
max-width: 1200px;
width: auto;
}
aside article {
width: 256px;
margin-right: 45px;
float: left;
font-size: 14px;
}
.bluebox_versus {
background: none repeat scroll 0 0 #FFFFFF;
float: left;
font-family: 'Open Sans',sans-serif;
height: 22px;
line-height: 25px;
margin: 40px 0 0 12px;
text-align: center;
width: 46px;
}
.topwar_picleft {
background: none repeat scroll 0 0 #FFFFFF;
float: left;
margin-left: 22px;
margin-top: 12px;
width: 72px;
}
.topwar_picright {
background: none repeat scroll 0 0 #FFFFFF;
float: right;
margin-right: 22px;
margin-top: 12px;
width: 72px;
}
.topwar_whitebox {
background: none repeat scroll 0 0 #FFFFFF;
float: left;
font-size: 11px;
font-weight: bold;
margin-right: 45px;
width: 256px;
}
.whitebox_teamleft {
background: none repeat scroll 0 0 #FFFFFF;
float: left;
margin-left: 22px;
max-width: 72px;
}
.whitebox_versus {
background: none repeat scroll 0 0 #EEEEF1;
color: #2099DC;
float: left;
font-family: 'Open Sans',sans-serif;
height: 14px;
line-height: 14px;
margin: 10px 0 0 13px;
text-align: center;
width: 44px;
}
.whitebox_teamright {
background: none repeat scroll 0 0 #FFFFFF;
float: right;
margin-right: 22px;
max-width: 72px;
}
/*Content*/
#post {
clear: both;
font-family: 'Open Sans',sans-serif;
line-height: 25px;
margin: 0 auto;
max-width: 1200px;
position: relative;
width: auto;
}
/*News*/
#news_headline {
border-top: 2px solid #009CFF;
max-width: 1200px;
padding-bottom: 7px;
padding-top: 14px;
}
.news_headline_kate {
background-color: #00A3FF;
float: left;
font-size: 11px;
height: 15px;
line-height: 15px;
max-width: 48px;
text-align: center;
}
.news_headline_title, .news_headline_title_1 {
display: inline-block;
font-weight: 700;
margin-top: -3.5px;
max-width: 250px;
overflow: hidden;
padding-left: 48px;
text-overflow: ellipsis;
white-space: nowrap;
}
.news_headline_title_1 {
max-width: 470px;
}
img.news_headline_writersgraphic {
height: 16px;
margin-top: -3.5px;
max-width: 17px;
position: absolute;
}
.news_headline_username {
font-size: 11px;
margin-left: 18px;
margin-top: -1px;
position: absolute;
}
.news_headline_datum {
color: #858A9F;
font-size: 11px;
margin-left: 171px;
margin-top: -1px;
position: absolute;
white-space: nowrap;
}
#news_content {
font-size: 14px;
margin-top: 12px;
padding-bottom: 12px;
}
#news_footer {
max-width: 1200px;
padding-bottom: 16px;
padding-top: 14px;
position: relative;
}
a.news_headline_comment {
background-color: #272934;
color: #FFFFFF;
float: left;
font-size: 11px;
height: 17px;
line-height: 17px;
max-width: 48px;
position: absolute;
text-align: center;
text-decoration: none;
top: 7px;
}
#news_headline, #news_content {
border-bottom: 1px solid #009CFF;
}
/*Footer*/
footer {
background: none repeat scroll 0 0 #333333;
clear: both;
height: 350px;
position: relative;
width: auto;
}
Link to jsfiddle-example of my code: Click me
A way of vertically center that is also responsive is to use Flexbox even if it is not fully supported by all the browsers yet and it does not work on old browsers (ref).
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;