CODE BASE: css

Showing posts with label css. Show all posts

Monday, April 8, 2013

Footer Fixes - Another Way by Matthew Taylor



<body>


 <div id="wrapper">


  <div id="header"></div>


  <div id="content"></div>


  <div id="footer"></div>


 </div>


</body>

====================

CSS

html,
body {
margin:0;
padding:0;
height:100%;
}

#wrapper {
min-height:100%;
position:relative;
}

#header {
padding:10px;
background:#5ee;
}

#content {
padding:10px;
padding-bottom:80px; /* Height of the footer element */
}

#footer {
width:100%;
height:80px;
position:absolute;
bottom:0;
left:0;
background:#ee5;
}

http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

Sticky Footer by Steve Hatcher - CSS

/*  
Sticky Footer Solution
by Steve Hatcher 
http://stever.ca
http://www.cssstickyfooter.com
*/

* {margin:0;padding:0;} 

/* must declare 0 margins on everything, also for main layout components use padding, not 
vertical margins (top and bottom) to add spacing, else those margins get added to total height 
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

html, body {height: 100%;}

#wrap {min-height: 100%;}

#main {overflow:auto;
 padding-bottom: 180px;}  /* must be same height as the footer */

#footer {position: relative;
 margin-top: -180px; /* negative value of footer height */
 height: 180px;
 clear:both;} 

/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}



/* IMPORTANT

You also need to include this conditional style in the <head> of your HTML file to feed this style to IE 6 and lower and 8 and higher.

<!--[if !IE 7]>
 <style type="text/css">
  #wrap {display:table;height:100%}
 </style>
<![endif]-->

*/

HTML

<div id="wrap">

 <div id="main">

 </div>

</div>

<div id="footer">

</div>

Background Position

selector {

background-position: left top;

//other options

left center
left bottom
right top
right center
right bottom
center top
center center
center bottom

}

Background Sizes

#selector {

//change values to:

background-size:400px 300px;
background-size:50%;
background-size:100% 100%;
background-size:cover;
background-size:contain;

}

Saturday, March 30, 2013

Carousel Markup

<div id="this-carousel-id" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/1200x480" alt="" />
<div class="carousel-caption">
<p>Caption text here</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x480" alt="" />
<div class="carousel-caption">
<p>Caption text here</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x480" alt="" />
<div class="carousel-caption">
<p>Caption text here</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x480" alt="" />
<div class="carousel-caption">
<p>Caption text here</p>
</div>
</div>
</div>

<a class="carousel-control left" href="#this-carousel-id" data-slide="prev">&lsaquo;</a>
<a class="carousel-control right" href="#this-carousel-id" data-slide="next">&rsaquo;</a>
</div>

Tuesday, March 12, 2013

Navigation Bar CSS

#navigation {

position: fixed;
top: 0;
width: 100%;
color: #ffffff;
height: 35px;
text-align: center;
padding-top: 15px;
/* Adds shadow to the bottom of the bar */

-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;

/* Adds the transparent background */
background-color: rgba(1, 1, 1, 0.8);
color: rgba(1, 1, 1, 0.8);
}

#navigation a {
font-size: 14px;
padding-left: 15px;
padding-right: 15px;
color: white;
text-decoration: none;
}

#navigation a:hover {
color: grey;
}

Monday, March 11, 2013

jQuery CDN and CSS Linking

# CDN - place after body tag

<script src="//ajax.googleapis.com/ajax/libs/webfont/1.1.2/webfont.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

# CSS Linking

<link href="styles.css" rel="stylesheet" type="text/css">

Tuesday, March 5, 2013

Drop Cap

p:first-letter{

display:block;
margin:5px 0 0 5px;
float:left;
color:#FF3366;
font-size:60px;
font-family:Georgia;

}

Monday, March 4, 2013

Images as Backgrounds on Headlines

#headline1 {
background-image: url(images/icon.png);
background-repeat: no-repeat;
background-position: left top;
padding-top:68px;
margin-bottom:50px;
}

#headline2 {
background-image: url(images/like.png);
background-repeat: no-repeat;
background-position: left top;
padding-top:68px;
}

Image Background Using Position

#bg {

position: fixed;
top: 0;
left: 0;

/* Preserve aspect ratio */
min-width: 100%;
min-height: 100%;

}

Background Image Size

html {

background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

}

@media queries for iPad

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}

Sunday, February 24, 2013

Define Print CSS

Using Multiple Classes

<div class="first second third">Lorem ipsum</div>

.first .second .third { ... }

.first {...}
.second { ... }
.third { ... }

Font Shorthand

font: { bold 1.5em verdana,sans-serif; }
font: { bold italic small-caps 1em/1.5em verdana,sans-serif; }

font-weight: bold;
font-style: italic;
font-variant: small-caps;
*font-size: 1em;
line-height: 1.5em;
*font-family: Helvetica Neue, sans-serif

*required, rest default to normal

Friday, February 22, 2013

Adding Ellipsis to Long Text

.truncate {

    width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

}

CSS Columns without Grid

.three-col {
       -moz-column-count: 3;
       -moz-column-gap: 20px;
       -webkit-column-count: 3;
       -webkit-column-gap: 20px;
}

<p class="three-col">Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna.</p>