0
Comment supprimer l'espace situé sous mon pied de page?
/*! 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>J'ai lu d'innombrables articles et travaillé pendant des heures, mais je ne peux pas savoir où l'espace ci-dessous le pied de page vient. J'ai essayé de déclarer 0 marge et padding sur le pied de page et tout Div contenant mais cela n'a pas fonctionné. En mode Inspect et Dreamweaver, il semble que l'espace fasse partie du pied de page, mais la modification du pied de page CSS n'a aucun effet.
Il y a beaucoup de dossiers de soutien, il est probablement plus facile d'examiner juste mon HTML et les fichiers main.css en mode Contrôler: http://risalee.com/
S'il vous plaît aider!
Veuillez ajouter ici un code significatif et une description du problème. Ne faites pas que lier le site qui a besoin de réparation - sinon, cette question perdra toute valeur pour les futurs visiteurs une fois le problème est résolu ou si le site que vous liez est inaccessible. Publier un [Exemple minimal, complet et vérifiable (MCVE)] (http://stackoverflow.com/help/mcve) indiquant que le problème vous aiderait à obtenir de meilleures réponses. Pour plus d'informations, voir [Quelque chose sur mon site web ne fonctionne pas. Puis-je simplement coller un lien?] (Http://meta.stackexchange.com/questions/125997/) Merci! – j08691