I set up a sticky footer at my site using this method, and for some reason there's a large amount of extra space between the bottom of the content and the top of the footer. I can't figure out why. Since there's not much content on the first page, the page shouldn't even extend beyond the viewport and there shouldn't be scrollbars. What's going on?
Here's the code for the page:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<link rel="stylesheet" type="text/css" href="/css/styles.css" media="screen" />
<link rel="stylesheet" type="text/css" href="/css/pygment_trac.css" media="screen" />
<link href="/menu_assets/styles.css" rel="stylesheet" type="text/css">
<title>gulshansingh.com</title>
</head>
<body>
<header>
<img src="/images/banner.jpg">
</header>
<div id='cssmenu'>
<ul>
<li><a href='/'><span>Home</span></a></li>
<li><a href='/about/'><span>About</span></a></li>
<li><a href='/projects/'><span>Projects</span></a></li>
<li><a href='/articles/'><span>Articles</span></a></li>
</ul>
</div>
<div class="container">
<section id="main_content">
<h3>Welcome to GitHub Pages.</h3>
<p>This is a test home page for my site</p>
<pre><code>$ cd your_repo_root/repo_name
$ git fetch origin
$ git checkout gh-pages
</code></pre>
<h3>Section 2</h3>
<p>Lorem ipsum</p>
</section>
<div class="push">
</div>
</div>
<div id="footer">
Footer content goes here
</div>
</body>
</html>
Here is the CSS (Although looking at Firebug/CDT might be more helpful):
* {
margin: 0;
}
html, body {
height: 100%;
min-height: 100%;
}
.container {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -80px; /* the bottom margin is the negative value of the footer's height */
}
#footer, .push {
height: 80px; /* .push must be the same height as .footer */
}
body {
margin: 0;
padding: 0;
background: #161616;
color: #eaeaea;
font: 16px;
line-height: 1.5;
font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal, monospace;
}
/* General & 'Reset' Stuff */
.container {
width: 100%;
}
section {
display: block;
margin: 0 0 20px 0;
}
h1, h2, h3, h4, h5, h6 {
margin: 15px 0 5px;
}
p {
margin: 0 0 5px;
}
li {
line-height: 1.4 ;
}
header, header img {
position: relative;
z-index: 10;
width: 100%;
height: 150px;
box-shadow: 0 0 5px #469B46;
-webkit-box-shadow: 0 0 5px #469B46;
-moz-box-shadow: 0 0 5px #469B46;
-o-box-shadow: 0 0 5px #469B46;
-ms-box-shadow: 0 0 5px #469B46;
}
#downloads .btn {
display: inline-block;
text-align: center;
margin: 0;
}
/* Main Content
*/
#main_content {
padding: 20px;
background: #474747;
width: 80%;
margin: 50px auto;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-webkit-font-smoothing: antialiased;
}
section img {
max-width: 100%
}
h1, h1 a, h2, h2 a, h3, h3 a, h4, h4 a, h5, h5 a, h6, h6 a {
font-weight: normal;
font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal, monospace;
color: #b5e853;
letter-spacing: -0.03em;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1),
0 0 5px rgba(181, 232, 83, 0.1),
0 0 10px rgba(181, 232, 83, 0.1);
-moz-transition: all 0.3s ease-out; /* FF3.7+ */
-o-transition: all 0.3s ease-out; /* Opera 10.5 */
-webkit-transition: all 0.3s ease-out; /* Saf3.2+, Chrome */
transition: all 0.3s ease-out;
}
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
color: #ccc;
}
#main_content h1 {
font-size: 30px;
}
#main_content h2 {
font-size: 24px;
}
#main_content h3 {
font-size: 18px;
}
#main_content h4 {
font-size: 14px;
}
#main_content h5 {
font-size: 12px;
text-transform: uppercase;
margin: 0 0 5px 0;
}
#main_content h6 {
font-size: 12px;
text-transform: uppercase;
color: #999;
margin: 0 0 5px 0;
}
dt {
font-style: italic;
font-weight: bold;
}
/*
ul li {
list-style: none;
}
ul li:before {
content: ">>";
font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal, monospace;
font-size: 13px;
color: #b5e853;
margin-left: -37px;
margin-right: 21px;
line-height: 16px;
}*/
blockquote {
color: #aaa;
padding-left: 10px;
border-left: 1px dotted #666;
}
pre {
background: rgba(0, 0, 0, 0.9);
border: 1px solid rgba(255, 255, 255, 0.15);
padding: 10px;
font-size: 14px;
color: #b5e853;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
text-wrap: normal;
overflow: auto;
overflow-y: hidden;
}
table {
width: 100%;
margin: 0 0 20px 0;
}
th {
text-align: left;
border-bottom: 1px dashed #b5e853;
padding: 5px 10px;
}
td {
padding: 5px 10px;
}
hr {
height: 0;
border: 0;
border-bottom: 1px dashed #b5e853;
color: #b5e853;
}
/* Buttons
*/
.btn {
display: inline-block;
background: -webkit-linear-gradient(top, rgba(40, 40, 40, 0.3), rgba(35, 35, 35, 0.3) 50%, rgba(10, 10, 10, 0.3) 50%, rgba(0, 0, 0, 0.3));
padding: 8px 18px;
border-radius: 50px;
border: 2px solid rgba(0, 0, 0, 0.7);
border-bottom: 2px solid rgba(0, 0, 0, 0.7);
border-top: 2px solid rgba(0, 0, 0, 1);
color: rgba(255, 255, 255, 0.8);
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 13px;
text-decoration: none;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.75);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.btn:hover {
background: -webkit-linear-gradient(top, rgba(40, 40, 40, 0.6), rgba(35, 35, 35, 0.6) 50%, rgba(10, 10, 10, 0.8) 50%, rgba(0, 0, 0, 0.8));
}
.btn .icon {
display: inline-block;
width: 16px;
height: 16px;
margin: 1px 8px 0 0;
float: left;
}
.btn-github .icon {
opacity: 0.6;
background: url("../images/blacktocat.png") 0 0 no-repeat;
}
/* Links
a, a:hover, a:visited
*/
a {
color: #63c0f5;
text-shadow: 0 0 5px rgba(104, 182, 255, 0.5);
}
/* Clearfix */
.cf:before, .cf:after {
content:"";
display:table;
}
.cf:after {
clear:both;
}
.cf {
zoom:1;
}
#footer {
border-top: 2px solid #15893d;
text-align: center;
width: 100%;
height: 80px;
background: #0c0c0c;
line-height: 80px;
}
#footer_inner {
display: table-cell;
}
#footer a {
text-decoration: none;
color: #eaeaea;
}
#footer a:hover {
text-decoration: underline;
color: #eaeaea;
}
The .container element should wrap around all the other elements in the body except for the footer. This means you have to place the header in the .container element as well, because it's height of 100% means it will take up the height of the viewport. Since your header/navigation has been excluded from the .container element, the viewport height will be extended down further by the height of the header.
And please consider posting your example in a fiddle instead of your site, or any other external site that makes it too localized and less relevant to the rest of the SO community.
Related
The REST API is one way WordPress, and other applications, communicate with the server. One example is the block editor screen, which relies on this to display, and save, your posts and pages.
The REST API call gave the following unexpected result: (500)
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width">
<meta name='robots' content='max-image-preview:large, noindex, follow' />
<title>WordPress › Error</title>
<style type="text/css"> html { background: #f1f1f1; } body { background: #fff; border: 1px solid #ccd0d4; color: #444; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; margin: 2em auto; padding: 1em 2em; max-width: 700px; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .04); box-shadow: 0 1px 1px rgba(0, 0, 0, .04); } h1 { border-bottom: 1px solid #dadada; clear: both; color: #666; font-size: 24px; margin: 30px 0 0 0; padding: 0; padding-bottom: 7px; } #error-page { margin-top: 50px; } #error-page p, #error-page .wp-die-message { font-size: 14px; line-height: 1.5; margin: 25px 0 20px; } #error-page code { font-family: Consolas, Monaco, monospace; } ul li { margin-bottom: 10px; font-size: 14px ; } a { color: #0073aa; } a:hover, a:active { color: #006799; } a:focus { color: #124964; -webkit-box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, 0.8); box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, 0.8); outline: none; } .button { background: #f3f5f6; border: 1px solid #016087; color: #016087; display: inline-block; text-decoration: none; font-size: 13px; line-height: 2; height: 28px; margin: 0; padding: 0 10px 1px; cursor: pointer; -webkit-border-radius: 3px; -webkit-appearance: none; border-radius: 3px; white-space: nowrap; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; vertical-align: top; } .button.button-large { line-height: 2.30769231; min-height: 32px; padding: 0 12px; } .button:hover, .button:focus { background: #f1f1f1; } .button:focus { background: #f3f5f6; border-color: #007cba; -webkit-box-shadow: 0 0 0 1px #007cba; box-shadow: 0 0 0 1px #007cba; color: #016087; outline: 2px solid transparent; outline-offset: 0; } .button:active { background: #f3f5f6; border-color: #7e8993; -webkit-box-shadow: none; box-shadow: none; } </style>
</head>
<body id="error-page">
<div class="wp-die-message">
<p>There has been a critical error on this website.</p>
<p>
Learn more about troubleshooting WordPress.
</p>
</div>
</body>
</html> .
I checked codes in EDIT THEME in functions and it solved .
Hi Stack Overflow Community,
Novice HTML user: I am currently using the Baguette gallery (v1.8.1) code for my gallery site.
Tutorial: http://yifangdi.blogspot.com/2017/05/baguetteboxjs-simple-and-easy-to-use.html
I want to change the font style of the "data-caption"
example code:
or implement a hover-over caption .css style rule.
CSS for gallery grid:
body {
background - image: linear - gradient(to top, #d3c081 % , #d3c081 75 % , #d3c081 100 % );
min - height: 100 vh;
font: normal 16 px sans - serif;
padding: 100 px 0;
}
.container.gallery - container {
background - color: #163049;
color: # 163049;
min - height: 100 vh;
border - radius: 20 px;
box - shadow: 0 8 px 15 px rgba(0, 0, 0, 0.06);
}
.gallery - container h1 {
text - align: center;
margin - top: 70 px;
font - family: 'Droid Sans', sans - serif;
font - weight: bold;
}
.gallery - container p.page - description {
text - align: center;
max - width: 800 px;
margin: 25 px auto;
color: #888;
font-size: 18px;
}
.tz-gallery {
padding: 40px;
}
.tz-gallery .lightbox img {
width: 100%;
margin-bottom: 30px;
transition: 0.2s ease-in-out;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
}
.tz-gallery .lightbox img:hover {
transform: scale(1.05);
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
}
.tz-gallery img {
border-radius: 4px;
}
.baguetteBox-button {
background-color: transparent !important;
}
#media(max-width: 768px) {
body {
padding: 100px 0;
}
.container.gallery-container {
border-radius: 0;
}
}
<div class="container gallery-container">
<div class="tz-gallery">
<div class="row">
<div class="col-sm-6 col-md-4">
<a class="lightbox" href="images/park.jpg" data-caption="The Park">
<img src="images/park.jpg" alt="Park">
</a>
</div>
</div>
</div>
</div>
body {
background-image: linear-gradient(to top, #d3c081%, #d3c081 75%, #d3c081 100%);
min-height: 100vh;
font: normal 16px sans-serif;
padding: 100px 0;
}
.container.gallery-container {
background-color: #163049;
color: #163049;
min-height: 100vh;
border-radius: 20px;
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.06);
}
.gallery-container h1 {
text-align: center;
margin-top: 70px;
font-family: 'Droid Sans', sans-serif;
font-weight: bold;
}
.gallery-container p.page-description {
text-align: center;
max-width: 800px;
margin: 25px auto;
color: #888;
font-size: 18px;
}
.tz-gallery {
padding: 40px;
}
.tz-gallery .lightbox img {
width: 100%;
margin-bottom: 30px;
transition: 0.2s ease-in-out;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
}
.tz-gallery .lightbox img:hover {
transform: scale(1.05);
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
}
.tz-gallery img {
border-radius: 4px;
}
.baguetteBox-button {
background-color: transparent !important;
}
#media(max-width: 768px) {
body {
padding: 100px 0;
}
.container.gallery-container {
border-radius: 0;
}
}
[data-caption="The Park"] {
font: italic 16px sans-serif;
font-size: 2em;
}
<div class="container gallery-container">
<div class="tz-gallery">
<div class="row">
<div class="col-sm-6 col-md-4">
<a class="lightbox" href="images/park.jpg" data-caption="The Park">
<img src="images/park.jpg" alt="Park">
</a>
</div>
</div>
</div>
</div>
use [data-caption] like below
[data-caption="The Park"] {
font: italic 16px sans-serif;
font-size: 2em;
}
I have the following css:
.tabstyle {
color: #ffffff;
font-weight: bold;
outline: 1px solid transparent;
border-radius: 10px 10px 0 0;
background: #C8DEE9;
box-shadow: inset 0 -3px 3px rgba(0, 0, 0, 0.05);
content: '';
-webkit-transform: perspective(5px) rotateX(0.93deg) translateZ(-1px);
transform: perspective(5px) rotateX(0.93deg) translateZ(-1px);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
font-family: "Raleway", sans-serif !important;
font-style: normal;
margin: 0;
}
However, when this renders, the tab looks as expected, but the text is skewed, I thought I could do something like:
.nav-tabs li a {
width: 200px;
font-size: 18px;
line-height: 2;
**transform: rotateX(-0.93deg)**
font-style: normal !important;
text-align: center;
font-family: "Times New Roman", Georgia, Serif;
margin: 0;
}
But no go, how do I de-skew the resulting text?
Update:
Update #2:
<uib-tabset active="activeTab" >
<uib-tab index="$index + 1" classes="tabstyle" ng-repeat="tab in tabData" ng-if="!tab.disabled" select="changeTab(tab.route)">
<uib-tab-heading>
<span class="material-icons {{tab.icon}}" style="vertical-align: middle"></span> {{tab.heading}}
</uib-tab-heading>
<!--<div ng-include="tab.content"></div>-->
</uib-tab>
</uib-tabset>
So I have CSS for my register/login and CSS for my menu bar that is horizontal. On the pages that have the register.css, the menu bar seems to shrink.
On pages withtout the register.css, the menu bar is fine.
Why is this? What do I need to change?
menu.css
body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote {
margin: 0; padding: 0; border: 0;
}
body {
background: #0ca3d2;
font-family: Helvetica, sans-serif; font-size: 16px; line-height: 24px;
}
nav {
margin: 5px auto;
text-align: center;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background: #efefef;
background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
border-radius: 10px;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: #4b545f;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block; padding: 10px 30px;
color: #757575; text-decoration: none;
}
nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a; position: relative;
}
nav ul ul li a {
padding: 5px 20px;
color: #fff;
}
nav ul ul li a:hover {
background: #4b545f;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
register.css/login.css
body {
font: 13px/20px 'Lucida Grande', Tahoma, Verdana, sans-serif;
color: #404040;
background: #0ca3d2;
}
.container {
margin: 80px auto;
margin-left: 425px;
margin-top: 90px;
width: 600px;
}
.register {
position:relative;
margin: 20px auto;
padding: 20px 20px 20px;
width: 250px;
background: white;
border-radius: 3px;
box-shadow: 0 0 200px rgba(white, .5), 0 1px 2px rgba(black, .3));
&:before {
content: '';
position: absolute;
top: -8px; right: -8px; bottom: -8px; left: -8px;
z-index: -1;
background: rgba(black, .08);
border-radius: 4px;
}
h1 {
margin: -20px -20px 21px;
line-height: 40px;
font-size: 15px;
font-weight: bold;
color: #555;
text-align: center;
text-shadow: 0 1px white;
background: #f3f3f3;
border-bottom: 1px solid #cfcfcf;
border-radius: 3px 3px 0 0;
linear-gradient:top, whiteffd, #eef2f5;
box-shadow:0 1px #f5f5f5;
}
p { margin: 20px 0 0; }
p:first-child { margin-top: 0; }
input[type=number], input[type=password], input[type=tel], input[type=email], input[type=date], input[type=number] { width: 278px; }
.submit { text-align: center; }
}
:-moz-placeholder {
color: #c9c9c9 !important;
font-size: 13px;
}
::-webkit-input-placeholder {
color: #ccc;
font-size: 13px;
}
input {
font-family: 'Lucida Grande', Tahoma, Verdana, sans-serif;
font-size: 14px;
}
input[type=text], input[type=number], input[type=password], input[type=tel], input[type=email], input[type=date], input[type=number] {
margin: 5px;
padding: 0 10px;
padding-left: 10px;
width: 200px;
height: 34px;
color: #404040;
background: white;
border: 1px solid;
border-color: #c4c4c4 #d1d1d1 #d4d4d4;
border-radius: 2px;
outline: 5px solid #eff4f7;
&:focus {
border-color: #7dc9e2;
outline-color: #dceefc;
outline-offset: 0; // WebKit sets this to -1 by default
}
}
input[type=submit] {
padding: 0 18px;
height: 29px;
font-size: 12px;
font-weight: bold;
color: #527881;
text-shadow: 0 1px #e3f1f1;
background: #cde5ef;
border: 1px solid;
border-color: #b4ccce #b3c0c8 #9eb9c2;
border-radius: 16px;
outline: 0;
#include box-sizing(content-box); // Firefox sets this to border-box by default
#include linear-gradient(top, #edf5f8, #cde5ef);
#include box-shadow(inset 0 1px white, 0 1px 2px rgba(black, .15));
&:active {
background: #cde5ef;
border-color: #9eb9c2 #b3c0c8 #b4ccce;
#include box-shadow(inset 0 0 3px rgba(black, .2));
}
}
.lt-ie9 {
input[type=text], input[type=password] { line-height: 34px; }
}
UPDATE
I've added the previews below:
Normal Menu
Shrinked Menu
RELEVANT HTML:
<?php
include("menu_admin.php");
?>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Register User</title>
<link rel="stylesheet" type="text/css" href="register.css">
<!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<section class="container">
<div class="register">
<h1>Register Cadet</h1>
<form action="process_register.php" method="POST"/>
<div class="help-tip">
<p>Enter a suitable ID with only numbers. Create a strong password and enter it again</p>
</div>
<br>
<p><input type="number" name="ID" id="ID" placeholder="Cadet_ID*" autofocus required></p>
<br>
<p><input type="password" name="Password" id="Password" placeholder="Password*" required></p>
<br>
<p><input type="password" name="Password_2" id="Password_2" placeholder="Re-enter Password*" required></p>
<br>
<p>
Status*
<select name="Status" id="Status">
<option value="0">User</option>
<required>
</select>
</p>
<br>
<p class="submit"><input type="submit" name="commit" value="Next"></p>
</form>
</body>
</html>
I am working on this project :
body {
background: #f0f0f0;
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
outline: none;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #313131;
font-size: 62.5%;
line-height: 1;
}
/** typography **/
h1 {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 2.5em;
line-height: 1.5em;
letter-spacing: -0.05em;
margin-bottom: 20px;
padding: .1em 0;
color: #444;
position: relative;
overflow: hidden;
white-space: nowrap;
text-align: center;
}
h1:before,
h1:after {
content: "";
position: relative;
display: inline-block;
width: 50%;
height: 1px;
vertical-align: middle;
background: #f0f0f0;
}
h1:before {
left: -.5em;
margin: 0 0 0 -50%;
}
h1:after {
left: .5em;
margin: 0 -50% 0 0;
}
h1 > span {
display: inline-block;
vertical-align: middle;
white-space: normal;
}
h2 {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 2.1em;
line-height: 1.4em;
letter-spacing: normal;
margin-bottom: 20px;
padding: .1em 0;
color: #444;
position: relative;
overflow: hidden;
white-space: nowrap;
text-align: center;
}
p {
display: block;
font-size: 1.4em;
line-height: 1.55em;
margin-bottom: 22px;
color: #555;
}
a { color: #5a9352; text-decoration: none; }
a:hover { text-decoration: underline; }
.center { display: block; text-align: center; }
/** page structure **/
#w {
width: 90%;
margin: 0 auto;
padding-top: 30px;
padding-bottom: 45px;
}
#content {
display: block;
width: 100%;
background: #fff;
padding: 25px 20px;
padding-bottom: 35px;
-webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
-moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
}
#userphoto {
display: block;
float: right;
margin-left: 10px;
margin-bottom: 8px;
}
#userphoto img {
display: block;
background: #fff;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.4);
box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
/** profile nav links **/
#profiletabs {
display: block;
margin-bottom: 4px;
height: 50px;
}
#profiletabs ul { list-style: none; display: block; width: 70%; height: 50px; padding-left: 0;}
#profiletabls ul li { float: left; }
#profiletabs ul li a {
display: block;
float: left;
padding: 8px 11px;
font-size: 1.2em;
font-weight: bold;
background: #eae8db;
color: #666;
margin-right: 7px;
border: 1px solid #fff;
-webkit-border-radius: 5px;
-webkit-border-bottom-left-radius: 0;
-moz-border-radius: 5px;
-moz-border-radius-bottomleft: 0;
border-radius: 5px;
border-bottom-left-radius: 0;
}
#profiletabs ul li a:hover {
text-decoration: none;
background: #dad7c2;
color: #565656;
}
#profiletabs ul li a.sel {
background: #fff;
border-color: #d1cdb5;
}
/** clearfix **/
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
<div id="w">
<div id="content" class="clearfix">
<div id="userphoto"><img src="images/avatar.png" alt="default avatar"></div>
<h1>Minimal User Profile Layout</h1>
<nav id="profiletabs">
<ul class="clearfix">
<li>Projects</li>
<!--<li>Activity</li>
<li>Friends</li>-->
<li>Profile Details</li>
<li>Orders</li>
<li>Add an article</li>
</ul>
</nav>
</div>
</div>
The main content of the page has been inserted in a div named #w. I have applied margin: 0 auto; to #w for it to be centered but it is not working correctly. The margin-left is always bigger than the right side, whenever I try to reduce the margin-left, I end up having something else.
Please let me know How I can fix this problem.
Remove
#content {
width: 100%;
}
Or add
#content {
box-sizing: border-box;
}
By default, the width does not include the padding. So the outer width is bigger.
Try this :
add box-sizing property in #content
#content{
box-sizing: border-box; // ADD this
display: block;
width: 100%;
background: #fff;
padding: 25px 20px;
padding-bottom: 35px;
-webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
-moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
}
This is because your #userphoto is overlapping you <h1> check this out with position:absolute on #userphoto.
body {
background: #f0f0f0;
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
outline: none;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #313131;
font-size: 62.5%;
line-height: 1;
}
/** typography **/
h1 {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 2.5em;
line-height: 1.5em;
letter-spacing: -0.05em;
margin-bottom: 20px;
padding: .1em 0;
color: #444;
position: relative;
overflow: hidden;
white-space: nowrap;
text-align: center;
}
h1:before,
h1:after {
content: "";
position: relative;
display: inline-block;
width: 50%;
height: 1px;
vertical-align: middle;
background: #f0f0f0;
}
h1:before {
left: -.5em;
margin: 0 0 0 -50%;
}
h1:after {
left: .5em;
margin: 0 -50% 0 0;
}
h1 > span {
display: inline-block;
vertical-align: middle;
white-space: normal;
}
h2 {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 2.1em;
line-height: 1.4em;
letter-spacing: normal;
margin-bottom: 20px;
padding: .1em 0;
color: #444;
position: relative;
overflow: hidden;
white-space: nowrap;
text-align: center;
}
p {
display: block;
font-size: 1.4em;
line-height: 1.55em;
margin-bottom: 22px;
color: #555;
}
a { color: #5a9352; text-decoration: none; }
a:hover { text-decoration: underline; }
.center { display: block; text-align: center; }
/** page structure **/
#w {
width: 90%;
margin: 0 auto;
padding-top: 30px;
padding-bottom: 45px;
}
#content {
display: block;
width: 100%;
background: #fff;
padding: 25px 20px;
padding-bottom: 35px;
-webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
-moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
}
#userphoto {
display: block;
position: absolute;
right: 0;
margin-left: 10px;
margin-bottom: 8px;
}
#userphoto img {
display: block;
background: #fff;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.4);
box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
/** profile nav links **/
#profiletabs {
display: block;
margin-bottom: 4px;
height: 50px;
}
#profiletabs ul { list-style: none; display: block; width: 70%; height: 50px; padding-left: 0;}
#profiletabls ul li { float: left; }
#profiletabs ul li a {
display: block;
float: left;
padding: 8px 11px;
font-size: 1.2em;
font-weight: bold;
background: #eae8db;
color: #666;
margin-right: 7px;
border: 1px solid #fff;
-webkit-border-radius: 5px;
-webkit-border-bottom-left-radius: 0;
-moz-border-radius: 5px;
-moz-border-radius-bottomleft: 0;
border-radius: 5px;
border-bottom-left-radius: 0;
}
#profiletabs ul li a:hover {
text-decoration: none;
background: #dad7c2;
color: #565656;
}
#profiletabs ul li a.sel {
background: #fff;
border-color: #d1cdb5;
}
/** clearfix **/
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
<div id="w">
<div id="content" class="clearfix">
<div id="userphoto"><img src="images/avatar.png" alt="default avatar"></div>
<h1>Minimal User Profile Layout</h1>
<nav id="profiletabs">
<ul class="clearfix">
<li>Projects</li>
<!--<li>Activity</li>
<li>Friends</li>-->
<li>Profile Details</li>
<li>Orders</li>
<li>Add an article</li>
</ul>
</nav>
</div>
</div>