I have a very simple web page but something in the CSS causes a problem for Chrome.
Basically, if the content goes beyond what is rendered on the immediate screen Chrome will not be able to scroll down to it. The content and scrolling works fine in FF and IE.
The only way I have been able to get Chrome to show the content (beyond eliminating the CSS) is to
change html{height: 100%;} to some higher value (200%). Obviously that is not an ideal solution.
HTML and CSS:
http://cssdesk.com/Z3k52
Browsers:
Chrome 23.0.1271.91 // FF 16.0.2 // IE 9.0.8112.16421
I'm sure I'm just missing something simple, but I don't know what.
HTML:
<!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>
<title>Home Page</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link href="layout.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="box_margin">
<div id="title">Some Title, Info, Etc.</div>
<div id="link_nav">
<div class="links">Home</div>
<div class="links">Links</div>
<div class="links">About</div>
<div class="links">Contact</div>
</div>
<div id="contentbox">
<div class="box_header">Home Screen</div>
<div class="pagecontent">
<p>Text at the top</p>
<p>Next line</p>
<p>Next line</p>
</br>....
</br>....
</br></br></br></br>text continues below....</br></br></br></br></br></br></br></br>and can be scrolled to in FF/IE</br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>o</br>o</br>o</br>o</br>o</br>\ /</br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>....keep going....</br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br><p>But not Chrome</p>
</div>
<div id="footer">Here is the footer</div>
</div>
</div>
</div>
</body>
</html>
CSS:
html
{
height: 100%;
}
body
{
height: 100%;
margin: 0;
padding: 0;
line-height: 150%;
text-align: center;
font-size: 62.5%;
}
*
{
font-size: 1em;
font-family: Arial, Verdana, sans-serif;
color: #000000;
text-align: left;
}
#container
{
margin: 0 auto 0 auto;
display: table;
height: 100%;
position: relative;
overflow: hidden;
width: 600px;
}
.links
{
width:75px;
margin-right:10px;
float: left;
margin-top:24px;
text-align:center;
font-family:Georgia, "Times New Roman", Times, serif;
position:relative; bottom:0px;
color: #e1a630;
}
.links a{
font-family:Arial, Helvetica, sans-serif;
font-size:1.2em;
font-weight:bold;
}
#link_nav
{
margin-right:10px;
height:40px;
width:600px;
}
#title
{
width:230px;
height:40px;
margin-right:20px;
margin-top:15px;
font-family:Arial, Helvetica, sans-serif;
font-size:2em;
font-weight:bold;
text-align:center;
float:left;
}
.box_header
{
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#002664;
font-size:1.9em;
margin-top:15px;
margin-left:15px;
margin-right:15px;
margin-bottom:15px;
width:573px;
}
.pagecontent
{
font-family: Arial, Helvetica, sans-serif;
color:#000000;
font-size:1.2em;
margin-left:20px;
margin-right:20px;
width:560px;
}
#contentbox
{
position: absolute;
vertical-align: middle;
background-color:#5284CC;
width:600px;
clear:both;
}
#footer
{
width:600px;
height:20px;
background-color:#5284CC;
background-repeat:no-repeat;
text-align:center;
color:#BDCDEC;
}
#footer a
{
font-size:.8em;
color:#BDCDEC;
}
#box_margin
{
margin-top:25px;
}
html, body {
text-align: center;
}
p {text-align: left;}
i have edited your code check here : demo
html{
height: 100%; /* must be remove */
}
body{
height: 100%; /* must be remove */
}
your mistake was with setting height and also setting overflow : hidden.
Don't change the display property and positioning of the #container element.
The code below work fine on chrome and firefox. Didn't test on IE because im on a mac but i'm pretty certain it works.
#container
{
margin: 0 auto;
overflow: hidden;
width: 600px;
}
http://cssdesk.com/tyCdB
Related
I'm new to responsive web design, so I'm not sure why this isn't working, but it definitely has something to do with me. I'm not exactly sure how to make this current website "responsive", and I've been trying for a good while. Code shown below. It may help to run it via browser. NOTE: I would like to not use a 3rd party css library like Bootstrap
HTML
<!doctype html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/style.css" rel="stylesheet" type="text/css">
<link rel="icon" href="img/favicon.ico" sizes="16x16" type="image/ico">
<head>
<meta charset="utf-8">
<title>OneClickLearn - Home</title>
</head>
<body>
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
<div class="head">
<center>
<h1 class="centered-divcontent txt-jumbo">OneClickLearn</h1>
</center>
</div>
<div class="sidecontentleft">
<div class="sidecontent">
<h3 class="txt-marginall">Learn how to construct the blocks of a website!<br><br>Start Learning HTML <em>now</em></h3>
<button class="green-btn txt-marginall">Learn HTML5!</button>
</div>
</div>
<div class="sidecontentleft">
<div class="sidecontent"><h3>Learn the Cascading Style Sheet of web development!<br><br>Start Learning CSS <em>now</em></h3>
<button class="blue-btn txt-marginall">Learn CSS!</button>
</div>
</div>
<div class="sidecontentleft">
<div class="sidecontent">
<h3 class="txt-marginall">Learn data storing in web development!<br><br>Start Learning PHP <em>now</em></h3>
<button class="green-btn txt-marginall">Learn PHP!</button>
</div>
</div>
<div class="sidecontentleft">
<div class="sidecontent">
<h3>Create actions and animations!<br>
<br>
Start Learning Javascript <em>now</em></h3>
<button class="blue-btn txt-marginall">Learn Javascript!</button>
</div>
</div>
<div class="sidecontentleft">
<div class="sidecontent">
<h3 class="txt-marginall">Learn how to construct the blocks of a website!<br><br>Start Learning HTML5 <em>now</em></h3>
<button class="green-btn txt-marginall">Learn HTML5!</button>
</div>
</div>
</body>
</html>
CSS
#import url('https://fonts.googleapis.com/css?family=Source+Code+Pro');
body {
margin:0;
padding:0;
}
/*nav*/
#media (min-width:600px) {
.txt-jumbo {
font-size:-40px;
}
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float:left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
/*divs*/
.sidecontentleft {
align-self:center;
height:300px;
width:300px;
float:left;
}
.sidecontentright {
align-self:center;
height:300px;
width:300px;
float:right;
}
.sidecontent {
text-align:center;
height: 300px;
display: table-cell;
vertical-align: middle;
}
.head {
width:100%;
height:350px;
background-color:#05D7C6;
color:white;
text-align:center;
}
.centered-divcontent {
text-align:center;
height: 350px;
display: table-cell;
vertical-align: middle;
}
/*buttons*/
.green-btn {
height:40px;
width:auto;
border-radius:5px;
background-color:#04D43C;
border:none;
color:white;
}
.green-btn:hover {
height:40px;
width:auto;
border-radius:5px;
background-color:#00F040;
border:none;
color:white;
cursor:pointer;
}
.blue-btn {
height:40px;
width:auto;
border-radius:5px;
background-color:#05D7C6;
border:none;
color:white;
}
.blue-btn:hover {
height:40px;
width:auto;
border-radius:5px;
background-color:#00E9D6;
border:none;
color:white;
cursor:pointer;
}
.white-btn {
border-radius:5px;
height:40px;
width:auto;
text-align:center;
border: #BFBFBF 1px solid;
text-decoration:none;
color:black;
background-color:white;
}
/*Fonts*/
.txt-jumbo {
font-size:100px;
}
.txt-centered {
text-align:center;
}
.txt-margin {
margin-left:25px;
}
.txt-marginall {
margin-left:15px;
margin-right:15px;
margin-top:15px;
margin-bottom:15px;
}
h1 {font-family: 'Source Code Pro', monospace;}
h2 {font-family: 'Source Code Pro', monospace;}
h3 {font-family: 'Source Code Pro', monospace;}
h4 {font-family: 'Source Code Pro', monospace;}
h5{font-family: 'Source Code Pro', monospace;}
h6 {font-family: 'Source Code Pro', monospace;}
a {font-family: 'Source Code Pro', monospace;}
p {font-family: 'Source Code Pro', monospace;}
Your help would be appreciated! Thanks!
As much as I can appreciate building responsiveness from the ground up, you'll get a clean, crisp, and simple solution by using Flexbox. For more control, use Bootstrap or Materialize, or another framework. It will also be much quicker. No person in their right mind would frown on going simpler.
.txt-jumbo, which styles the header font, has a default value of 100px. The media query you used specified font-size: -40px for screens wider than 600px. font-size cannot take a negative value.
To make the font smaller on small screens, try something like:
#media (max-width: 600px) {
.txt-jumbo {
font-size: 50px;
}
}
where max-width: 600px means that the styles contained apply to screens less than 600px wide.
There are several ways to make the navigation "collapse". To make the links stack, make them inline-block elements and set their widths to 100%.
#media (max-width: 600px) {
li {
display: inline-block;
width: 100%;
}
}
When using a screen less than 600px wide, the links will now take up the entire width of the screen. display: inline-block allows them to stack.
1)For Header I use 2 Media Query Like This :
#media screen and (max-width:803px) {
.centered-divcontent {
font-size: 50px;
}
}
#media screen and (max-width:415px) {
.centered-divcontent {
font-size: 30px;
}
}
2)For navbar I use % instead of px.Like this :
li {
margin: 10px 2% 10px 1px;
//More Code
}
li a {
padding: 5% 7%;
//More Code
}
3)For Footer Information Languages,I have changed your code a little bit.
Full Code:
#import url('https://fonts.googleapis.com/css?family=Source+Code+Pro');
body {
margin:0;
padding:0;
}
/*nav*/
#media (min-width:600px) {
.txt-jumbo {
font-size:-40px;
}
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float:left;
margin: 10px 2% 10px 1px;
}
li a {
display: block;
color: white;
text-align: center;
text-decoration: none;
padding: 5% 7%;
}
li a:hover {
background-color: #111;
}
.head {
width:100%;
height:350px;
background-color:#05D7C6;
color:white;
text-align:center;
}
.centered-divcontent {
text-align:center;
height: 350px;
display: table-cell;
vertical-align: middle;
width: 100%;
}
.green-btn {
height:40px;
width:auto;
border-radius:5px;
background-color:#04D43C;
border:none;
color:white;
}
.green-btn:hover {
height:40px;
width:auto;
border-radius:5px;
background-color:#00F040;
border:none;
color:white;
cursor:pointer;
}
.blue-btn {
height:40px;
width:auto;
border-radius:5px;
background-color:#05D7C6;
border:none;
color:white;
}
.blue-btn:hover {
height:40px;
width:auto;
border-radius:5px;
background-color:#00E9D6;
border:none;
color:white;
cursor:pointer;
}
.white-btn {
border-radius:5px;
height:40px;
width:auto;
text-align:center;
border: #BFBFBF 1px solid;
text-decoration:none;
color:black;
background-color:white;
}
.txt-jumbo {
font-size:100px;
}
.txt-centered {
text-align:center;
}
.txt-margin {
margin-left:25px;
}
.txt-marginall {
margin-left:15px;
margin-right:15px;
margin-top:15px;
margin-bottom:15px;
}
.con {
margin-top: 10px;
width: 100%;
clear: both;
}
.content {
padding: 10px;
}
.box {
width: 30%;
text-align: center;
float: left;
box-sizing: border-box;
}
h1 {font-family: 'Source Code Pro', monospace;}
h2 {font-family: 'Source Code Pro', monospace;}
h3 {font-family: 'Source Code Pro', monospace;}
h4 {font-family: 'Source Code Pro', monospace;}
h5{font-family: 'Source Code Pro', monospace;}
h6 {font-family: 'Source Code Pro', monospace;}
a {font-family: 'Source Code Pro', monospace;}
p {font-family: 'Source Code Pro', monospace;}
#media screen and (max-width:803px) {
.centered-divcontent {
font-size: 50px;
}
}
#media screen and (max-width:415px) {
.centered-divcontent {
font-size: 30px;
}
}
#media screen and (max-width:920px) {
.sidecontentleft {
width: 50%;
box-sizing: border-box;
}
}
#media screen and (max-width:650px) {
.box {
width: 100%;
float:none;
padding: 20px;
}
.content {
width: 70%;
margin: auto;
}
}
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
<div class="head">
<center>
<h1 class="centered-divcontent txt-jumbo">OneClickLearn</h1>
</center>
</div>
<div class="con">
<div class="box left">
<div class="content">
<h3>Learn how to construct the blocks of a website!</h3>
<h4>Start Learning HTML <em>now</em></h4>
<button class="green-btn txt-marginall">Learn HTML5!</button>
</div>
</div>
<div class="box right">
<div class="content">
<h3>Learn the Cascading Style Sheet of web development!</h3>
<h4>Start Learning <em>now</em></h4>
<button class="blue-btn txt-marginall">Learn CSS!</button>
</div>
</div>
<div class="box left">
<div class="content">
<h3>LLearn data storing in web development!</h3>
<h4>Start Learning PHP <em>now</em></h4>
<button class="green-btn txt-marginall">Learn PHP!</button>
</div>
</div>
</div>
<div class="con">
<div class="box right">
<div class="content">
<h3>Create actions and animations!</h3>
<h4>Start Learning Javascript <em>now</em></h4>
<button class="green-btn txt-marginall">Learn JavaScript!</button>
</div>
</div>
<div class="box left">
<div class="content">
<h3>Learn how to construct the blocks of a website!</h3>
<h4>Start Learning HTML5 <em>now</em></h4>
<button class="blue-btn txt-marginall">Learn HTML5!</button>
</div>
</div>
</div>
Here is a simple HTML file with inline css:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<style type="text/css">
body {
margin-top: 20px;
margin-right: 500px;
margin-left: 500px;
}
.events {
font-size: 200%;
vertical-align:middle;
text-align:left;
margin-left:20px;
}
.sections{
font-size: 100%;
vertical-align:middle;
text-align:right;
margin-right:20px;
}
#divA {
background-color: #BB1919;
color:white;
height:60px;
font-family: Arial;
font-weight:bold;
}
</style>
</head>
<body>
<div id="divA"><div class="events">EVENTS</div>
<div class="sections">Sections</div>
</div>
</body>
</html>
The large red rectangle is correct. BUT why are the words EVENTS and Sections not vertically centered? It seems quite simple and yet it doesn't look correct.
vertical-align:middle; works only when parent has display:table and children display:table-cell
Take a look:
body {
margin-top: 20px;
margin-right: 100px;
margin-left: 100px;
}
.events {
font-size: 200%;
vertical-align:middle;
text-align:left;
margin-left:20px;
display:table-cell;
}
.sections{
font-size: 100%;
vertical-align:middle;
text-align:right;
margin-right:20px;
display:table-cell;
}
#divA {
background-color: #BB1919;
color:white;
height:60px;
width:100%;
font-family: Arial;
font-weight:bold;
display:table;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
</head>
<body>
<div id="divA"><div class="events">EVENTS</div>
<div class="sections">Sections</div>
</div>
</body>
</html>
Here is how you do it :
#divA {
display:block;
background: #BB1919;
color:white;
height:100px;
padding:20px;
box-sizing:border-box;
}
.divA {
display:table;
width:100%;
height:100%;
}
.events,
.sections {
display:table-cell;
font-size: 20px;
vertical-align:middle;
}
.divB {
display:table;
width:100%;
height:100px;
background:#f5f5f5;
padding:20px;
box-sizing:border-box;
}
<h2>If you need Outer Div</h2>
<div id="divA">
<div class="divA">
<div class="events">EVENTS</div>
<div class="sections">SECTIONS</div>
</div>
</div>
<h2>If you dont</h2>
<div class="divB">
<div class="events">EVENTS</div>
<div class="sections">SECTIONS</div>
</div>
The css property vertical-align will align elements on the same line. As you can see in the example below, three divs are centered through the middle because of that property. Vertical-align will not center text inside an element, though.
One way to achieve that without tables is to set the line height property to the same height value of the container. In the example below, the container is 60px tall and so is the text line. This method works if the text is contained in one line only.
div {
display: inline-block;
border: 1px solid black;
vertical-align: middle;
}
.lg {
height: 60px;
}
.sm{
height:40px;
}
.centerTxt{
line-height: 60px;
}
<div class="sm">
Small
</div>
<div class="lg">
Large
</div>
<div class="lg centerTxt">
Large centered text
</div>
I have a block that's full width across the screen. Here, the text only needs to take 60% of the block.
My problem is that when I upload option 1, the background will show, but the text is not 60% but fullscreen.
If I upload option 2, there is no background color but the text is 60%.
What am i doing wrong?
OPTION 1:
.tekst2 {
margin-top: 25px;
margin-bottom:25px;
text-align: center;
width: 60%;
margin-left:auto;
margin-right:auto;
font-family: 'Montserrat', sans-serif;
font-size:16px;
margin-top:25px;
float:none;
}
.info
{
margin-top: 100px;
width: 100%;
padding:50px;
padding-bottom:50px;
background-color: white;
text-align:center;
}
OPTION 2:
.info
{
margin-top: 100px;
width: 100%;
padding:50px;
padding-bottom:50px;
background-color: white;
text-align:center;
}
.tekst2 {
margin-top: 25px;
margin-bottom:25px;
text-align: center;
width: 60%;
margin-left:auto;
margin-right:auto;
font-family: 'Montserrat', sans-serif;
font-size:16px;
margin-top:25px;
float:none;
}
<div class="info">
<div class="tekst1">
<h2 id="tekst1">This is some text</h2>
</div>
<div class="tekst2">
<span id="tekst2">Here is a lot of text and it doesnt scale to 60% when in option 1.</span>
</div>
</div>
HTML CODE
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<style>
.info
{
margin-top: 100px;
width: 100%;
height:60%;
padding:50px;
padding-bottom:50px;
background-color:white;
text-align:center;
}
.tekst2 {
margin-top: 25px;
margin-bottom:25px;
text-align: center;
width: 60%;
margin-left:auto;
margin-right:auto;
font-family: 'Montserrat', sans-serif;
font-size:16px;
margin-top:25px;
float:none;
}
</style>
</head>
<body>
I have a design that requires a responsive width, and I have some images that line up next to each other than need vertical alignment so I did the whole display:table;, display:table-cell; thing.
Unfortunately in Firefox, the images don't scale when the browser is scaled.
Fiddle:
http://jsfiddle.net/35Js5/
HTML:
<main>
<article class="companylist relative SectionStyle1">
<section class="col col4">
<img src="http://upload.wikimedia.org/wikipedia/en/9/99/MarioSMBW.png" alt="Mario" />
</section>
<section class="col col4">
<img src="http://upload.wikimedia.org/wikipedia/en/f/f1/LuigiNSMBW.png" alt="Luigi" />
</section>
<section class="col col4">
<img src="http://upload.wikimedia.org/wikipedia/en/f/f5/Toad_3D_Land.jpg" alt="Toad" />
</section>
<section class="col col4">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/d/d5/Peach_%28Super_Mario_3D_World%29.png/200px-Peach_%28Super_Mario_3D_World%29.png" alt="Peach" />
</section>
</article>
</main>
CSS:
#import url(http://fonts.googleapis.com/css?family=Fjord+One|Imprima|Reenie+Beanie);
body {
background: #fff;
font-size: 62.5%;
font-family:"Imprima", "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
padding: 0px;
color: #000;
width:100%;
text-align:center;
margin:0;
}
p, ul, ol {
margin: 1em 0;
line-height: 1.2em;
font-size:1.2em
}
li {
list-style-position:inside;
}
.col {
box-sizing:border-box;
display:inline-block;
float:left;
padding:10px 10px;
}
.col1 {
width:100%;
}
.col2 {
width:50%;
}
.col4 {
width:25%;
}
.col8 {
width:12.5%;
}
header, footer, main > article {
padding: 10px 10%;
width:80%;
float:left;
clear:left;
}
.SectionStyle1 {
background-color:WhiteSmoke;
color:Black;
}
.companylist {
display:table;
}
.companylist .col {
display:table-cell;
height:200px;
vertical-align:middle;
float:none;
}
.companylist .col img {
max-height:100%;
max-width:100%;
}
If you pull the fiddle up in Chrome, you can see the behaviour I want and expect in Firefox too.
If I put the float:left; on, the cells do shrink, but the vertical alignment is lost :(
I also tried adding a display:table-row; element to no avail.
Any help appreciated, thanks in advance.
Does adding table-layout:fixed to .company-list get what you want? See http://jsfiddle.net/35Js5/5/
Try Addidng moz specific styling using :
#-moz-document url-prefix() {
// Your styling
}
Here is the fix for your code
Fiddle:
http://jsfiddle.net/35Js5/6/
Only addition to your CSS is:
#-moz-document url-prefix() {
.col.col4 img {
max-height:100%;
max-width:100%;
}
.companylist .col {
width:12.5%;
float:left !important;
vertical-align:middle;
display:inline;
}
}
Hope this helps
I need is to show the content of a web page in the center of the browser, no matter what screen size it is, big or small, resolution high or low, it always gets automatically adjusted to the center of the browser.
Thanks in advance
My Html and css code is below
HTML code
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="basic1.css"/>
</head>
<body>
<div id="menu">
<img class="imgc" src="img.png" alt="icon"/>
<img class="imgd" src="do.png" alt="do"/>
</div>
<div id="smenu"></div>
<div id="mainbox">
<div class="ibox"></div>
</div>
<div id="menutext">
<ul>
<li><b>???????</b></li>
<li><b>?????</b></li>
<li><b>?????</b></li>
</ul>
</div>
<div id="py">
<pre class="p">??<span style="color:black;font-size:25px">??????</span></pre>
<pre class="s">?? ???? ??? ??? <span style="color:#980000;
letter-spacing :+1mm"><b>:3</b></span></pre>
</div>
</body>
</html>
CSS
#menu img.imgc {
position:absolute;
right:77%;
top:10px;
margin:0px auto;
}
#menu img.imgd {
position:absolute;
left:75%;
top:10px;
margin:0px auto;
}
#menu {
position:absolute;
left:0%;
top:0%;
right:0%;
right:0%;
width:100%;
height:125px;
border-bottom:1px solid #C8C8C8;
margin:0px auto;
background-color:#E8E8E8;
}
#mainbox div.ibox{
position:absolute;
left:31%;
top:20px;
border-left:3px solid gray;
height:105px;
margin:0px auto;
}
#menutext ul{
position:absolute;
right:72%;
top:15px;
list-style: none;
line-height:30px;
margin:0px auto;
}
#menutext a{
font-size:12px;
font-variant:small-caps;
font-family:Lucida,Helvetica,sans-serif;
font-weight:500;
color:black;
text-decoration: none;
text-align: left;
}
#py pre.p{
position:absolute;
top:15px;
left:33%;
font-family:Tahoma, Geneva, sans-serif;
letter-spacing : +2mm;
font-size:50px;
color:#009933;
text-decoration: none;
text-align: center;
margin:0px auto;
}
#py pre.s{
position:absolute;
top:67px;
left:33%;
font-family:Tahoma, Geneva, sans-serif;
letter-spacing : +3mm;
font-size:12px;
color:gray;
text-decoration: none;
text-align: center;
margin:0px auto;
}
Put all the content inside a div, set its class to container:
<div class="container">
...
</div>
Then using css set its margins to auto:
.container{
margin:0px auto;
width: 600px;
}
have a look at this jsfiddle
EDIT
check this new fiddle , the menu css doesn't neet all of what you wrote, should be something like:
#menu {
height:125px;
border-bottom:1px solid #C8C8C8;
margin:0px auto;
background-color:#E8E8E8;
}
Put all your page content inside a wrapper div, then give it some relative width (e.g. 50%) and auto horizontal margins.
<div id="wrapper">
<!-- CONTENT GOES HERE -->
</div>
CSS (50% page width, zero top/bottom margin):
#wrapper {
width: 50%;
margin: 0 auto;
}
Put another div around all of your content (so from right after your body start tag and just before body end tag). Call it <div class="container">
Set the following style to that div:
width: 1000px;
margin: auto;
This should center your content.
You can change the width as needed.
You could use fundation3's grid: http://foundation.zurb.com/docs/grid.php
Working solution.
<html>
<head>
<style type="text/css">
html
{
width: 100%;
height: 100%;
}
body
{
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
This is text!
</body>
</html>