• The concept of taking a footer that more than likely doesn’t sit at the bottom of a screen comfortably and forcing it to stay put at the bottom of the screen.
• This is ideal if you have information there that you would like people to have a constant view on. Ie, social links, navigation links, contact information

<footer id=”footer”>
Content goes here.
</footer>

#footer {
  position:fixed;
  left:0px;
  bottom:0px;
  Height:30px; <!–Is it needed? Play around with it –>
  width:100%;
}

Flexbox – via CSS Tricks by Chris Coyier

Twitter
@SchaffenCreate
@tommnorman

Website: https://www.schaffencreative.com

The post Eps 35: Fixed Position Footer appeared first on Schaffen Creative.

Float event:

elements are removed from the flow of the website. Will cause issues with non floated elements.

Use:

Float: left, right, none

Clear: left, right, both

ORDER MATTERS!!!

Items in the first position will be placed first.

Go to itunes, stitcher, or wherever you get your podcasts and leave the show a rating and a comment. Ratings get listeners! If you don’t leave a rating/comment then please tell a friend.

@tommnorman

@TNPWDesign

Link to the Youtube video: https://youtu.be/vD3hA5xh7lA

webdevpod.com

CODE

body {
    Width: 980px;
}

#box1 {
    height: 400px;
    width: 300px;
    margin: 10px;    
    background: #000;
}

#box2 {
    height: 300px;
    width: 300px;    
    margin: 10px;
    background: #F00;
}

#box3 {
    height: 200px;
    width: 300px;    
    margin: 10px;
    background: #0F0;
}

footer {
    height: 200px;
    width: 300px;
    margin: 10px;    
    background: #00F; 
}

<div id=”box1″ class=”box”></div>
<div id=”box2″ class=”box”></div>
<div id=”box3″ class=”box”></div>
<footer></footer>

The post CSS Float – Talking HTML appeared first on Schaffen Creative.

Smashing Magazine Transition article

Material Design Instructions

https://design.google.com/

HTML

<div class=”container_circle”>
<div class=”circle circle1″>
<!– <img src=”YOUR-URL-IMAGE.png”> –>
<p>+</p>
</div>
<div class=”circle circle2″><p><a href=””>t</a></p></div>
<div class=”circle circle3″><p><a href=””>f</a></p></div>
<div class=”circle circle4″><p><a href=””>g+</a></p></div>
</div>

CSS

.circle
{
width:60px;
height:60px;
box-shadow: 3px 3px 6px #333333;
border-radius:50%;
position: fixed;
bottom: 10px;
right: 10px;
-webkit-transition:all 0.2s linear;
-moz-transition:all 0.2s linear;
-ms-transition:all 0.2s linear;
transition:all 0.2s linear;
}

.circle p {
margin: 0;
padding: 0;
font-size: 40px;
font-weight: bold;
}

.circle1
{
background-color:#db4531;
z-index: 4;
}

.circle2
{
background: #00aced;
z-index: 3;
<!– background-image: url(YOUR-URL-IMAGE.png); –>
background-size:cover;
}

.circle3
{
background: #3b5998;
z-index: 2;
<!– background-image: url(YOUR-URL-IMAGE.png); –>
background-size:cover;
}

.circle4
{
background: #dd4b39;
z-index: 1;
<!– background-image: url(YOUR-URL-IMAGE.png); –>
background-size:cover;
}

.container_circle:hover .circle2
{
bottom:75px;
}

.container_circle:hover .circle3
{
bottom:140px;
}

.container_circle:hover .circle4
{
bottom:205px;
}

The post Material Design: Expanding Circle – Talking HTML appeared first on Schaffen Creative.

Individual Properties

Background -image

Background -repeat

Background -position

Background -size

Shortcode

background : #cccccc url(“img_tree.gif”) no-repeat fixed top left;

Multiple Background Images

background -image: url(“img_tree.gif”), url(“img_flwr.gif”);

Properties

positioning: top, bottom, left, right, center repeat, repeat-x (horizontal), repeat-y (vertical), no-repeat,

horizontal% vertical% (top left is 0% 0%)

horizontalpos verticalpos – ex= (0px 0px), (0em, 0em)

background -image default is top-left corner of an element and repeated

You can set a background to inherit, though I don’t recommend it.

Gradients can be created – however it is not supported by all browsers. Use with caution. If you are interested in background gradients simply search css background gradients to find some tutorials

@TNPWdesign

@tommnorman

Dreamhost.com – promo code: TNPW

The post Eps 25: CSS Backgrounds – Talking HTML appeared first on Schaffen Creative.

This is a basic web development tutorial on styling a primary navigation using HTML and CSS.

As always, the code will be in the show notes.

Please go to iTunes, Stitcher or Google Play Music and rate the show! Ratings get listeners!!

http://www.Webdevpod.com for all the content and links

@TNPWDesign

@tommnorman

DreamHost promo code – tnpw

/* HTML */

<nav id=”nav”>    

   <ul>

      <li></li>

     <li></li>

   </ul>

</nav>

/* Navigation */

#nav {
padding-top: 205px;
margin-left: 105px;
}
#nav ul li{
color: white;
background: #113e63;
display: block;
width: 150px;
position: relative;
list-style-type: none;
float: left;
padding: 0px;
margin: 0 3px 0 0;
height: 40px;
border: 0px solid #ffbf00;
/*border-bottom: 3px solid #ffbf00;*/
border-top: 5px solid #fff;
-webkit-border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
}
#nav ul li a {
display: block;
text-decoration: none;
color: white;
font-size: 1.6em;
line-height: 40px;
text-align: center;
}
#nav ul li:hover,
#nav ul li:focus,
#nav ul li#current {
background: #c1c4c4;
line-height: 40px;
border-top: 5px solid #7c765b;
}
#nav ul li a:hover,
#nav ul li a:focus,
#nav ul li#current a {
color: #000;
}

The post A basic web development tutorial on styling a primary navigation using HTML and CSS. – Talking HTML appeared first on Schaffen Creative.

<aside></aside>

• section of the page with content related to the page
• separate from that content.
• Used as a sidebar or an inserted box/space
• advertisements
• bio/blurb/profile information  
• related links on a site
• Does NOT have to be on the side of the site/page
• Be creative, use a circle or other shape
• Place it in the middle of the page, wrap wording around the container.
• Whatever you decide to do with it, make sure it sticks out as separate content
  • Different background color, use a border of some sort

As always, ease of use is most important over all

Please go to iTunes and Stitcher and rate the show! Ratings get listeners!!

http://www.Webdevpod.com for all the content and links

@TNPWDesign

@tommnorman

DreamHost promo code – tnpw

The post Eps 22: An Aside – Talking HTML appeared first on Schaffen Creative.

Break goals into bite sized chunks. If you want to learn a language make weekly checkpoints.

For long term goals have monthly or bimonthly checkpoints.

Know who you are and be realistic about your goals. 

Before you begin down your path it may be helpful to map out your plans. Create a calendar on your phone/computer and use notifications to keep you on track. Join social groups or local meet ups to enhance your experience. If you share your experience with friends, family or even strangers that may go a long way in having accountability to someone more than yourself. Nobody likes disappointing other people.

Give me a rating on iTunes, Stitcher or any other place you get your podcasts.

Leave me comments!

Webdevpod.com for all content and shows

@tnpwdesign

@tommnorman

The post Eps 21: Resolutions – Talking HTML appeared first on Schaffen Creative.

<!– BEGIN GOOGLE FONTS –>
<link href=’http://fonts.googleapis.com/css?family=Kite+One|Merienda+One|Sintony’ rel=’stylesheet’ type=’text/css’>
<!– END GOOGLE FONTS–>

Ensure readability and accessibility before choosing a final font for your website!

If you enjoy listening please share it with your friends and Please go to iTunes and Stitcher to rate the show! Ratings get listeners!!

If you leave a good comment it could end up on the front page of the site!

http://www.Webdevpod.com for all the content and links

@TNPWDesign

@tommnorman

DreamHost promo code – tnpw

The post Eps 20: Google Fonts – Talking HTML appeared first on Schaffen Creative.

• http://www.w3schools.com/tags/tag_meta.asp

Info about HTML 5 Shiv

• https://en.wikipedia.org/wiki/HTML5_Shiv

If you enjoy listening please share it with your friends and Please go to iTunes and Stitcher to rate the show! Ratings get listeners!!

If you leave a good comment it could end up on the front page of the site!

http://www.Webdevpod.com for all the content and links

@TNPWDesign

@tommnorman

DreamHost promo code – tnpw

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>TNPW Design</title>
<meta charset=”utf-8″>
<meta name=”description” content=”TNPW Design is a Freelance Website Design And Website Development Business in Green Bay, WI 54301. Podcast Creation Services Available.” />
<meta name=”keywords” content=”HTML,CSS,Web Development,Web Design”>

<link rel=”stylesheet” href=”css/screen.css” media=”screen”>
<link rel=”stylesheet” href=”css/phone.css” media=”screen”>
<link rel=”stylesheet” href=”css/tablet.css” media=”screen”>
<link rel=”stylesheet” type=”text/css” href=”css/jquery.fancybox.css” media=”screen” />

<!– BEGIN JQUERY LIBRARY –>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js”></script>
<!– END JQUERY LIBRARY –>

<!– BEGIN GOOGLE FONTS –>
<link href=’http://fonts.googleapis.com/css?family=Kite+One|Merienda+One|Sintony’ rel=’stylesheet’ type=’text/css’>
<!– END GOOGLE FONTS –>

<!– FANCY BOX JAVASCRIPT BEGIN –>
<script type=”text/javascript” src=”js/jquery.fancybox.pack.js”></script>
<script type=”text/javascript” src=”js/jquery.fancybox.load.js”></script>
<!– END FANCY BOX JS –>

<!– Only use when building media rules –>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<!– End: meta – viewport –>
<!–[if lt IE 9]–>
<script src=”http://html5shim.googlecode.com/svn/trunk/html5.js”></script>
<!–[endif]–>

</head>
</html>

The post Eps 19: Head Code – Talking HTML appeared first on Schaffen Creative.

If you enjoy listening please share it with your friends and Please go to iTunes and Stitcher to rate the show! Ratings get listeners!!

If you leave a good comment it could end up on the front page of the site!

http://www.Webdevpod.com for all the content and links

@TNPWDesign

@tommnorman

DreamHost promo code – tnpw
<footer>
<div class=”footer-box-1″>
</div>
<div class=”footer-box-2″>
</div>
<div class=”footer-box-3″>
</div>

<p id=”copyright”></p>
</footer>

<style>

#center {
width: 960px;
}

footer {
clear: both;
background: #7c765b;
color: #FFF;
height: auto;
padding: 10px;
}

.footer-box-1 {
width: 31%;
background: red;
color: black;
float: left;
padding: 5px 4px 5px 4px;
margin: 5px;
height: auto;
font-size: 1.2em;
}

.footer-box-2 {
width: 32%;
background: red;
color: black;
float: left;
padding: 5px 4px 5px 4px;
margin: 5px;
height: auto;
font-size: 1.2em;
}

.footer-box-3 {
width: 31%;
background: red;
color: black;
float: right;
padding: 5px 4px 5px 4px;
margin: 5px;
height: auto;
font-size: 1.2em;
}
footer p#copyright {
float: none;
clear: both;
margin: 15px 10px 0px 0px;
font-size: 1.3em;
text-align: right;
line-height: 2em;
}

</style>

The post Eps 18: Coding A Footer – Talking HTML appeared first on Schaffen Creative.