0
Как удалить пространство под своим липким нижним колонтитулом?
/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */
/*
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
*/
/* ==========================================================================
Base styles: opinionated defaults
========================================================================== */
html,
button,
input,
select,
textarea {
color: #222;
}
html {
position: relative;
\t min-height: 100%;
\t line-height: 1.4;
\t font-size: 18px;
\t
}
/*
* Remove text-shadow in selection highlight: h5bp.com/i
* These selection rule sets have to be separate.
* Customize the background color to match your design.
*/
::-moz-selection {
background: #b3d4fc;
text-shadow: none;
}
::selection {
background: #b3d4fc;
text-shadow: none;
}
/*
* A better looking default horizontal rule
*/
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
/*
* Remove the gap between images, videos, audio and canvas and the bottom of
* their containers: h5bp.com/i/440
*/
audio,
canvas,
img,
video {
vertical-align: middle;
}
/*
* Remove default fieldset styles.
*/
fieldset {
border: 0;
margin: 0;
padding: 0;
}
/*
* Allow only vertical resizing of textareas.
*/
textarea {
resize: vertical;
}
/* ==========================================================================
Browse Happy prompt
========================================================================== */
.browsehappy {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
/* ==========================================================================
Author's custom styles
========================================================================== */
.redText {
\t color: #b6503c
}
.footerBack {
\t height: 1em; \t
\t
}
body {
\t margin: 0 0 5.5em;
\t font-size: 100%;
\t
\t background-image: -webkit-gradient(
\t linear,
\t left top,
\t left bottom,
\t color-stop(0.02, #E2DFD7),
\t color-stop(1, #F4F2EE)
\t);
\t background-image: -o-linear-gradient(bottom, #E2DFD7 2%, #F4F2EE 100%);
\t background-image: -moz-linear-gradient(bottom, #E2DFD7 2%, #F4F2EE 100%);
\t background-image: -webkit-linear-gradient(bottom, #E2DFD7 2%, #F4F2EE 100%);
\t background-image: -ms-linear-gradient(bottom, #E2DFD7 2%, #F4F2EE 100%);
\t background-image: linear-gradient(to bottom, #E2DFD7 2%, #F4F2EE 100%);
}
#wrapper {
\t margin: 0 auto;
\t padding-bottom: 0px;
/* max-width: 1280px;
\t max-height: 960px;
\t width: 53.333em;
\t height: 71.111em; */
}
#logo {
\t
\t margin: 1em 1em -1em 1.5em;
\t z-index: 2;
\t
}
#hook {
\t display: inline;
\t clear: both;
\t position: absolute;
\t top: 125px;
\t letter-spacing: .05em;
\t
}
#socialIcon1, #socialIcon2, #socialIcon3 {
\t margin-top: -1em;
}
/* Spacing between social media icons created via padding in the below .button float css */
#iAm {
\t font-family: Vivaldi, "Brush Script MT", "Giddyup Std", "Myriad Pro", Garamond;
\t font-size: 1.5em;
}
#carousel {
\t background-color: #433d32;
\t /* height: 16.667em; */
\t height: 58.823529%;
\t margin: auto 0;
\t padding: 10px;
}
#bio {
/* height: 11.667em; */
\t height: 41.117647%;
\t padding: 0 3em 0 3em;
\t margin: auto 0;
}
#bioText {
\t margin: 1em;
\t width: 70%;
}
#social {
\t background-color: #a29d92;
\t
}
#portrait {
\t float: right;
\t margin: 0 1em 0 1em;
}
h1 {
\t font-family: "Century Gothic", Muli:300, "Century", "Calibri", "Courier New", Courier, monospace;
\t font-size: 1.5em;
\t color: #433d32;
\t text-align: center;
\t margin: auto 0;
}
p {
\t font-family: "Bell MT", Sylfaen, "Baskerville Old Face", Garamond;
\t font-size: 1em;
\t color: #433d32;
\t padding: 0;
}
a {
\t color: #b6503c;
\t text-decoration: underline;
\t
}
\t
/*
img {
\t text-align: center;
\t max-width: 100%;
\t height: auto;
\t width: auto;
}
header {
\t height: 9em; /*11.111em;
\t margin: auto 0;
}*/
aside {
\t text-align: center;
\t background: #a29d92;
\t position: absolute;
\t top: 0;
\t right: 1em;
\t height: 4em;
\t width: 25%;
\t padding: 0em .5em .5em .5em;
\t margin: auto 0;
\t clear: both;
\t font-size: .9em;
\t
\t -webkit-border-bottom-right-radius: 10px;
\t -webkit-border-bottom-left-radius: 10px;
\t -moz-border-radius-bottomright: 10px;
\t -moz-border-radius-bottomleft: 10px;
\t border-bottom-right-radius: 10px;
\t border-bottom-left-radius: 10px;
}
main {
clear: both;
\t height: 100%;
\t /*max-height: 18.333em;*/n
\t /*margin: auto 0 20px 0;*/
}
footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
clear: both;
text-align: center;
}
footer p {
color: #433d32;
margin-bottom: 0;
}
/* ==========================================================================
Helper classes
========================================================================== */
/*
* Image replacement
*/
.ir {
background-color: transparent;
border: 0;
overflow: hidden;
/* IE 6/7 fallback */
*text-indent: -9999px;
}
.ir:before {
content: "";
display: block;
width: 0;
height: 150%;
}
/*
* Hide from both screenreaders and browsers: h5bp.com/u
*/
.hidden {
display: none !important;
visibility: hidden;
}
/*
* Hide only visually, but have it available for screenreaders: h5bp.com/v
*/
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
/*
* Extends the .visuallyhidden class to allow the element to be focusable
* when navigated to via the keyboard: h5bp.com/p
*/
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
/*
* Hide visually and from screenreaders, but maintain layout
*/
.invisible {
visibility: hidden;
}
/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* `contenteditable` attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
/*
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.clearfix {
*zoom: 1;
}
/* ==========================================================================
Float Shadow Effect
========================================================================== */
.button {
margin: 0em;
padding-left: 2.5em;
padding-right: 2.5em;
cursor: pointer;
background: none;
text-decoration: none;
color: none;
/* Prevent highlight colour when element is tapped */
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/* SHADOW/GLOW TRANSITIONS */
/* Float Shadow */
.float-shadow {
display: inline-block;
position: relative;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: -webkit-transform;
transition-property: transform;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.float-shadow:before {
pointer-events: none;
position: absolute;
z-index: -1;
content: '';
top: 100%;
left: 5%;
height: 10px;
width: 90%;
opacity: 0;
background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
/* W3C */
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: -webkit-transform, opacity;
transition-property: transform, opacity;
}
.float-shadow:hover {
-webkit-transform: translateY(-5px);
-ms-transform: translateY(-5px);
transform: translateY(-5px);
/* move the element up by 5px */
}
.float-shadow:hover:before {
opacity: 1;
-webkit-transform: translateY(5px);
-ms-transform: translateY(5px);
transform: translateY(5px);
/* move the element down by 5px (it will stay in place because it's attached to the element that also moves up 5px) */
}
/* ==========================================================================
EXAMPLE Media Queries for Responsive Design.
These examples override the primary ('mobile first') styles.
Modify as content requires.
========================================================================== */
/*@media only screen and (min-height: 850px) {
\t #bio {
\t \t background: blue;
\t padding: 3% 3em 3% 3em;
\t margin: auto 0;
}
\t #carousel {
\t \t background: red;
\t \t height: 58.823529%;
\t \t padding: 100px;
\t \t margin: auto 0;
\t }
}
@media only screen and (max-width: 944px) {
\t #social {
\t \t background: red;
\t }
\t
}*/
/* \t @media screen and (max-width: 944px) {
\t \t \t #fbContainer {
\t \t \t margin: auto 0 0 40px;
\t \t \t width: 80%;
\t \t \t display: block;
\t \t \t }
\t \t \t .social-links img {
\t \t \t margin: -10px auto -10px -50px; \t \t \t \t
\t \t \t } \t \t \t
\t \t \t .fb-page {
\t \t \t margin-top: 25px;
\t \t \t }
}
*/
@media print,
(-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi) {
/* Style adjustments for high resolution devices */
}
/* ==========================================================================
Print styles.
Inlined to avoid required HTTP connection: h5bp.com/r
========================================================================== */
@media print {
* {
background: transparent !important;
color: #000 !important; /* Black prints faster: h5bp.com/s */
box-shadow: none !important;
text-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
/*
* Don't show links for images, or javascript/internal links
*/
.ir a:after,
a[href^="javascript:"]:after,
a[href^="#"]:after {
content: "";
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
thead {
display: table-header-group; /* h5bp.com/t */
}
tr,
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
@page {
margin: 0.5cm;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Risa Lee ~ Web Design Portfolio</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<!-- <link rel="stylesheet" media="screen and (max-width: 501px)" href="css/main_mobile.css" />-->
<link href='http://fonts.googleapis.com/css?family=Muli:300' rel='stylesheet' type='text/css'>
<!--Start Royal Carousel-->
<link rel="stylesheet" type="text/css" href="load/skin_modern_silver.css"/>
\t \t <link rel="stylesheet" type="text/css" href="load/html_content.css"/>
\t \t <script type="text/javascript" src="java/FWDRoyal3DCarousel.js"></script> \t \t
\t
\t \t <script type="text/javascript">
\t \t \t FWDUtils.onReady(function()
\t \t \t {
\t \t \t \t var carousel = new FWDRoyal3DCarousel({ \t \t
\t \t \t \t \t //required settings
\t \t \t \t \t carouselHolderDivId:"myDiv",
\t \t \t \t \t carouselDataListDivId:"carouselData",
\t \t \t \t \t displayType:"fluidwidth",
\t \t \t \t \t autoScale:"yes",
\t \t \t \t \t carouselWidth:30,
\t \t \t \t \t carouselHeight:225,
\t \t \t \t \t skinPath:"load/skin_modern_silver",
\t \t \t \t \t \t \t \t \t \t \t \t
\t \t \t \t \t //main settings
\t \t \t \t \t backgroundColor:"none",
\t \t \t \t \t backgroundImagePath:"none",
\t \t \t \t \t thumbnailsBackgroundImagePath:"none",
\t \t \t \t \t scrollbarBackgroundImagePath:"none",
\t \t \t \t \t backgroundRepeat:"none",
\t \t \t \t \t showDisplay2DAlways:"no",
\t \t \t \t \t carouselStartPosition:"center",
\t \t \t \t \t numberOfThumbnailsToDisplayLeftAndRight:4,
\t \t \t \t \t slideshowDelay:5000,
\t \t \t \t \t autoplay:"no",
\t \t \t \t \t showPrevButton:"yes",
\t \t \t \t \t showNextButton:"yes",
\t \t \t \t \t showSlideshowButton:"yes",
\t \t \t \t \t disableNextAndPrevButtonsOnMobile:"yes",
\t \t \t \t \t controlsMaxWidth:940,
\t \t \t \t \t slideshowTimerColor:"#777777",
\t \t \t \t \t showContextMenu:"no",
\t \t \t \t \t addKeyboardSupport:"yes",
\t \t \t \t \t \t \t \t \t \t \t \t
\t \t \t \t \t //thumbnail settings
\t \t \t \t \t thumbnailWidth:400,
\t \t \t \t \t thumbnailHeight:250,
\t \t \t \t \t thumbnailSpaceOffset3D:70,
\t \t \t \t \t thumbnailSpaceOffset2D:70,
\t \t \t \t \t thumbnailBorderSize:10,
\t \t \t \t \t thumbnailBackgroundColor:"#666666",
\t \t \t \t \t thumbnailBorderColor1:"#fcfdfd",
\t \t \t \t \t thumbnailBorderColor2:"#e4e4e4",
\t \t \t \t \t transparentImages:"no",
\t \t \t \t \t maxNumberOfThumbnailsOnMobile:13,
\t \t \t \t \t showThumbnailsGradient:"yes",
\t \t \t \t \t showThumbnailsHtmlContent:"no",
\t \t \t \t \t enableHtmlContent:"no",
\t \t \t \t \t textBackgroundColor:"#333333",
\t \t \t \t \t textBackgroundOpacity:.7,
\t \t \t \t \t showText:"yes",
\t \t \t \t \t showTextBackgroundImage:"yes",
\t \t \t \t \t showThumbnailBoxShadow:"yes",
\t \t \t \t \t thumbnailBoxShadowCss:"0px 2px 2px #555555",
\t \t \t \t \t showReflection:"yes",
\t \t \t \t \t reflectionHeight:60,
\t \t \t \t \t reflectionDistance:0,
\t \t \t \t \t reflectionOpacity:.2,
\t \t \t \t \t \t \t \t \t \t \t \t
\t \t \t \t \t //scrollbar settings
\t \t \t \t \t showScrollbar:"no",
\t \t \t \t \t disableScrollbarOnMobile:"no",
\t \t \t \t \t enableMouseWheelScroll:"yes",
\t \t \t \t \t scrollbarHandlerWidth:300,
\t \t \t \t \t scrollbarTextColorNormal:"#777777",
\t \t \t \t \t scrollbarTextColorSelected:"#000000",
\t \t \t \t \t \t \t \t \t \t \t \t
\t \t \t \t \t //combobox settings
\t \t \t \t \t showComboBox:"no",
\t \t \t \t \t startAtCategory:1,
\t \t \t \t \t selectLabel:"SELECT CATEGORIES",
\t \t \t \t \t allCategoriesLabel:"All Categories",
\t \t \t \t \t showAllCategories:"no",
\t \t \t \t \t comboBoxPosition:"topright",
\t \t \t \t \t selectorBackgroundNormalColor1:"#fcfdfd",
\t \t \t \t \t selectorBackgroundNormalColor2:"#e4e4e4",
\t \t \t \t \t selectorBackgroundSelectedColor1:"#a7a7a7",
\t \t \t \t \t selectorBackgroundSelectedColor2:"#8e8e8e",
\t \t \t \t \t selectorTextNormalColor:"#8b8b8b",
\t \t \t \t \t selectorTextSelectedColor:"#FFFFFF",
\t \t \t \t \t buttonBackgroundNormalColor1:"#e7e7e7",
\t \t \t \t \t buttonBackgroundNormalColor2:"#e7e7e7",
\t \t \t \t \t buttonBackgroundSelectedColor1:"#a7a7a7",
\t \t \t \t \t buttonBackgroundSelectedColor2:"#8e8e8e",
\t \t \t \t \t buttonTextNormalColor:"#000000",
\t \t \t \t \t buttonTextSelectedColor:"#FFFFFF",
\t \t \t \t \t comboBoxShadowColor:"#000000",
\t \t \t \t \t comboBoxHorizontalMargins:12,
\t \t \t \t \t comboBoxVerticalMargins:12,
\t \t \t \t \t comboBoxCornerRadius:0,
\t \t \t \t \t \t \t \t \t \t \t \t
\t \t \t \t \t //lightbox settings
\t \t \t \t \t addLightBoxKeyboardSupport:"yes",
\t \t \t \t \t showLightBoxNextAndPrevButtons:"yes",
\t \t \t \t \t showLightBoxZoomButton:"yes",
\t \t \t \t \t showLightBoxInfoButton:"yes",
\t \t \t \t \t showLighBoxSlideShowButton:"yes",
\t \t \t \t \t showLightBoxInfoWindowByDefault:"no",
\t \t \t \t \t slideShowAutoPlay:"no",
\t \t \t \t \t lightBoxVideoAutoPlay:"no",
\t \t \t \t \t lightBoxBackgroundColor:"#000000",
\t \t \t \t \t lightBoxInfoWindowBackgroundColor:"#FFFFFF",
\t \t \t \t \t lightBoxItemBorderColor1:"#fcfdfd",
\t \t \t \t \t lightBoxItemBorderColor2:"#e4FFe4",
\t \t \t \t \t lightBoxItemBackgroundColor:"#333333",
\t \t \t \t \t lightBoxMainBackgroundOpacity:.8,
\t \t \t \t \t lightBoxInfoWindowBackgroundOpacity:.9,
\t \t \t \t \t lightBoxBorderSize:5,
\t \t \t \t \t lightBoxBorderRadius:0,
\t \t \t \t \t lightBoxSlideShowDelay:4
\t \t \t \t });
\t \t \t })
\t \t </script>
\t \t <!-- End Royal Carousel-->
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
\t \t
<div id="wrapper">
\t <header>
\t <a href="index.html"><img src="img/signature_logo_final2.png" alt="RisaLogo" id="logo"/></a>
\t <aside>
<p><span class="redText"><strong>@</strong></span> Email me:
<a href="mailto: [email protected]">[email protected]</a><br>
<a href="http://www.linkedin.com/in/risalee" alt="LinkedInLink"><img src="img/48x48-Square-82-LI.png" alt="LinkInIcon" target="_new" width="18px" height="18px" /> View my Resume</a></p>
</aside>
\t
<h1 id="hook">I love <span class="redText">Web Design</span> and <span class="redText">Front End Developement</span>.</h1>
<!-- DELETE ME
<p>Header logo is 298 x 189 signature_logo_final</p>
<p>
\t \t \t \t 200 - Header - 40 .25 25%
\t \t \t \t 300 - Carousel - 26.66667 .2249 37.5%
\t \t \t \t 210 - About 38 .4210 26.25%
\t \t \t \t 90 - Footer 33 .48484 11.25%</p>
\t \t -->
</header>
<main>
\t <div id="carousel">
<div id="myDiv">
</div>
\t \t <div id="carouselData" style="display: none;">
\t \t \t <!-- category -->
\t \t \t <ul data-cat="Category one">
\t \t \t \t <ul>
\t \t \t \t \t <li data-type="media" data-url="load/images/1.jpg"></li>
\t \t \t \t \t <li data-thumbnail-path="load/thumbnails/1.jpg"></li>
\t \t \t \t \t <li data-thumbnail-text="" data-thumbnail-text-title-offset="35" data-thumbnail-text-offset-top="10" data-thumbnail-text-offset-bottom="7">
\t \t \t \t \t \t <p class="largeLabel">Megalith Online</p>
\t \t \t \t \t \t <p class="smallLabel">This site is sadly no longer live (mainly because it's a half a decade old), however, it was designed employing Flash - back when that was the animation standard.</p>
\t \t \t \t \t </li>
\t \t \t \t \t <li data-info="">
\t \t \t \t \t \t <p class="mediaDescriptionHeader">Megalith Online</p>
\t \t \t \t \t \t <p class="mediaDescriptionText">This site is sadly no longer live (mainly because it's a half a decade old), however, it was designed employing Flash - back when that was the animation standard.</p>
\t \t \t \t \t </li>
\t \t \t \t </ul>
\t \t \t
\t \t \t \t <ul>
\t \t \t \t \t <li data-type="media" data-url="load/images/5.jpg"></li>
\t \t \t \t \t <li data-thumbnail-path="load/thumbnails/5.jpg"></li>
\t \t \t \t \t <li data-thumbnail-text="" data-thumbnail-text-title-offset="35" data-thumbnail-text-offset-top="10" data-thumbnail-text-offset-bottom="7">
\t \t \t \t \t \t <p class="largeLabel">Student Orientation Design</p>
\t \t \t \t \t \t <p class="smallLabel">Designed for a University, this project required a simple layout that would accomodate their existing color scheme (gray, beige, red and orange) while still looking clean and clutter-free. Complete with an original logo, the design displays excellently on smaller devices thanks to the use Responsive Design principles.</p>
\t \t \t \t \t </li>
\t \t \t \t \t <li data-info="">
\t \t \t \t \t \t <p class="mediaDescriptionHeader">Student Orientation Design</p>
\t \t \t \t \t \t <p class="mediaDescriptionText">Designed for a University, this project required a simple layout that would accomodate their existing color scheme (gray, beige, red and orange) while still looking clean and clutter-free. Complete with an original logo, the design displays excellently on smaller devices thanks to the use Responsive Design principles.</p>
\t \t \t \t \t </li>
\t \t \t \t </ul>
<ul>
\t \t \t \t \t <li data-type="iframe" data-width="800" data-height="550" data-url="load/images/StartHereInfoGraphic_Final.html"></li>
\t \t \t \t \t <li data-thumbnail-path="load/thumbnails/6.jpg"></li>
\t \t \t \t \t <li data-thumbnail-text="" data-thumbnail-text-title-offset="35" data-thumbnail-text-offset-top="10" data-thumbnail-text-offset-bottom="7">
\t \t \t \t \t \t <p class="largeLabel">Interactive Infographic</p>
\t \t \t \t \t \t <p class="smallLabel">Designed for a University, this graphic replaced a text heavy document with an immersive learning element. The layout for this project was completed using Piktochart, with the interactive elements hand coded to add a little "whizz bang".</p>
\t \t \t \t \t </li>
\t \t \t \t \t <li data-info="">
\t \t \t \t \t \t <p class="mediaDescriptionHeader">Interactive Infographic</p>
\t \t \t \t \t \t <p class="mediaDescriptionText">Designed for a University, this graphic replaced a text heavy document with an immersive learning element. The layout for this project was completed using Piktochart, with the interactive elements hand coded to add a little "whizz bang".</p>
\t \t \t \t \t </li>
\t \t \t \t </ul>
\t \t \t \t
\t \t \t \t <ul>
\t \t \t \t \t <li data-type="media" data-width="640" data-height="420" data-url="load/images/3.jpg"></li>
\t \t \t \t \t <li data-thumbnail-path="load/thumbnails/3.jpg"></li>
\t \t \t \t \t <li data-thumbnail-text="" data-thumbnail-text-title-offset="35" data-thumbnail-text-offset-top="10" data-thumbnail-text-offset-bottom="7">
\t \t \t \t \t \t <p class="largeLabel">Creative Portrait</p>
\t \t \t \t \t \t <p class="smallLabel">Created to showcase the then new CSS3 features, this old Portfolio site is no longer live. In it's heyday, it utilized Spry Tabs and a Fluid Layout to allow the foreground elements to float above the background content.</p>
\t \t \t \t \t </li>
\t \t \t \t \t <li data-info="">
\t \t \t \t \t \t <p class="mediaDescriptionHeader">Creative Portrait</p>
\t \t \t \t \t \t <p class="mediaDescriptionText">Created to showcase the then new CSS3 features, this old Portfolio site is no longer live. In it's heyday, it utilized Spry Tabs and a Fluid Layout to allow the foreground elements to float above the background content.</p>
\t \t \t \t \t </li>
\t \t \t \t </ul>
\t \t \t \t
<ul>
\t \t \t \t \t <li data-type="iframe" data-width="800" data-height="550" data-url="load/images/dynamicCharts/dynamicTable.html"></li>
\t \t \t \t \t <li data-thumbnail-path="load/thumbnails/4.jpg"></li>
\t \t \t \t \t <li data-thumbnail-text="" data-thumbnail-text-title-offset="35" data-thumbnail-text-offset-top="10" data-thumbnail-text-offset-bottom="7">
\t \t \t \t \t \t <p class="largeLabel">Dynamic Chart</p>
\t \t \t \t \t \t <p class="smallLabel">This mockup was created for a University that sought implementation of Highcharts' interactive features within their course template. Information displayed is shown only as an example.</p>
\t \t \t \t \t </li>
\t \t \t \t \t <li data-info="">
\t \t \t \t \t \t <p class="mediaDescriptionHeader">Dynamic Chart</p>
\t \t \t \t \t \t <p class="mediaDescriptionText">This mockup was created for a University that sought implementation of Highcharts' interactive features within their course template. Information displayed is shown only as an example.</p>
\t \t \t \t \t </li>
\t \t \t \t </ul>
\t \t \t \t
\t \t \t \t
\t \t \t </ul>
\t \t \t <!-- end --> \t \t \t
\t \t </div>
</div>
<div id="bio">
<img src="img/risa_portrait.jpg" alt="RisaPortrait" id="portrait" />
<div id="bioText">
<p><span class="redText" id="iAm">I</span> am a Denver, CO native who designs and builds beautiful sites with clean, responsive code for computer screens, tablets, mobiles and more.</p>
<p>With over 6 years of experience in the web industry, I have worked with companies like Verizon, CSUGlobal and Pearson eCollege. I work primarily with the Adobe Suite and use cutting edge technologies including <strong>HTML5</strong>, <strong>CSS3</strong> and <strong>JavaScript</strong> to produce accessible sites. I’m passionate about anything computer, art or design related and am an avid video gamer.</p>
<p>What are you wating for? <a href="mailto: [email protected]"><strong>Contact Me</strong></a>!</p>
</div>
</div>
</main>
\t <footer>
\t <div id="social">
<a href="https://plus.google.com/+RisaLee/posts" alt="GooglePlusLink" rel="float-shadow" class="button float-shadow"><img src="img/48x48-Square-82-GP.png" alt="GooglePlusIcon" target="_new" id="socialIcon1" /></a>
<a href="http://www.linkedin.com/in/risalee" alt="LinkedInLink" rel="float-shadow" class="button float-shadow"><img src="img/48x48-Square-82-LI.png" alt="LinkInIcon" target="_new" id="socialIcon2" /></a>
<a href="http://twitter.com/#!/@RisaLee316" alt="TwitterLink" rel="float-shadow" class="button float-shadow"><img src="img/48x48-Square-82-TW.png" alt="TwitterIcon" target="_new" id="socialIcon3" /></a>
<p>© 2014 Risa Hall, All Rights Reserved.</p>
</div>
</footer>
\t </div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>
<!--
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
-->
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='//www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-XXXXX-X');ga('send','pageview');
</script>
</body>
</html>Я прочитал бесчисленное количество статей и работал над этим в течение нескольких часов, но я просто не могу понять, где пространство ниже футер откуда. Я пробовал объявить 0 margin и padding на нижнем колонтитуле, а любой, содержащий Div, но это не сработало.
В режиме Inspect Mode и Dreamweaver кажется, что пространство является частью нижнего колонтитула, но изменение Footer CSS ничего не делает.
Есть много вспомогательных файлов, так что это, вероятно, проще всего рассмотреть мой HTML и Main.css файлы в Inspect режиме: http://risalee.com/
Пожалуйста, помогите!
Пожалуйста, добавьте содержательный код и описание проблемы. Не просто ссылку на сайт , который нуждается в исправлении - в противном случае этот вопрос потеряет значение для будущих посетителей после проблема решена или если сайт, на который вы ссылаетесь, недоступен. Проводка [Минимальный, полный и проверенный пример (MCVE)] (http://stackoverflow.com/help/mcve), который показывает, что ваша проблема поможет вам получить более качественные ответы. Для получения дополнительной информации см. [Что-то на моем веб-сайте не работает. Могу ли я просто вставить ссылку на него?] (Http://meta.stackexchange.com/questions/125997/) Спасибо! – j08691