css3 footer tutorial ( kicking boxes )

+1 Alexander Liakopoulos · July 9, 2015
Hello everyone!!
i'm Alex and just finished the html & css tutorial, html5 tutorial and now css3 footer tutorial.
First question: where can i find the code files on your tutorials?
Second question: Watching the CSS3 footer tut i was typing the css code and run it but the buttons when i hover on them ( for ex. on the first button ) all the buttons on the right of it disappears and the current button take all over the place.( a.k.a. there are no stable at their position)
also opacity doesn't work.
Here is my code:

body{
background-image:url("woodwall.jpg");
color:white;
}
#the_footer{
position:fixed;
bottom:0px;
margin:0px;
padding:0px;
left:0px;
right:0px;
width:100%;
height:40px;
font-family:Arial;
text-shadow:1px 1px 1px black;
border-top:1px solid rgba(0,0,0,0.4);
background:rgba(0,0,0,0.3);
box-shadow:inset 0 1px rgba(255,255,255,0.2),inset 0 10px rgba(255,255,255,0.3),
inset 0 10px 10px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);

}
#the_footer h2{
font-weight:normal;
font-size:14px;
text-decoration:underline;
color:#cc0000;
margin-top:10px;
margin-bottom:5px;
margin-left:10px;
}
#the_footer p{
color:white;
font-size:12px;
float:left;
padding:0px 10px;
margin:10px 0px;
}
#the_footer img{
border:none;
}
#the_footer li{
list-style:none;
padding:0px;
margin-bottom:12px;
}
.clear{
clear:both;
display:block;
overflow:hidden;
visibility:hidden;
width:0px;
height:0px;
}
#the_footer .whiteBorder{
border: 1px solid white;
}
#the_footer .img_left{
float:left;
margin-right: 10px;
width:40px;
}
#the_footer .black_box{
background: rgba(0,0,0, 0.4);
padding: 5px;
margin-bottom: 5px;
border-radius: 5px;
}
#the_footer #notifications{
float:right;
width: auto;
margin: 5px 15px 0px;
padding: 0px;
overflow: hidden;
}
#the_footer #notifications li{
margin-right:12px;
float:left;
wider:24px;
padding:0px;
height:32px;
list-style:none;
}
#the_footer #notifications li:hover{
margin-top: -1px;
}
a.notificationIcon span{
display:none;
font-size:12px;
color:white;
bottom:40px;
position:absolute;
border:1px solid #333333;
border-radius:3px;
padding: 5px;
margin-left: -75px;
background: rgba(0,0,0,0.4);
}
a.notificationIcon:hover span{
display:block;
}
#the_footer_menu{
margin:0px;
padding:0px;
width: auto;
}
#the_footer_menu li{
list-style:none;
float:left;
font-size:12px;
padding: 12px 14px 14px 14px;
border-right: 1px solid rgba(0,0,0,0.4);
background: rgba(0,0,0,0.1);
}
#the_footer_menu li:hover{
background: rgba(0,0,0,0.3);
}
#the_footer_menu li a{
display:block;
color:#cccccc;
text-decoration:none;
}
#the_footer_menu li a:hover{
color:white;
}
#the_footer_menu .homeButton{
padding: 5px 8px 0px 14px;
border:none;
background: none;
}
#the_footer_menu .homeButton a{
background:url("home-button.jpg") top left no-repeat;
width:40px;
height:40px;
}
#the_footer_menu .homeButton a:hover{
background:url("home-button-overlay.png")top left no-repeat;
}
/*Programs menu Drop-up */
#the_footer_menu li ul.dropup{
display:none;
}
#the_footer_menu li:hover ul.dropup{
display:block;
position: absolute;
margin: 0 0 0 -15px;
bottom: 40px;
border:1px solid #111111;
border-bottom:none;
background: rgba(0,0,0,0.5);
border-radius:7px 7px 0px 0px;
}
#the_footer_menu li:hover{
float:none;
background:none;
border:none;
border-bottom:1px solid #111111;
padding:12px 10px 12px 10px;
}
/*The other Dedault Links 3 columns-MenuButtons*/

#the_footer_menu li:hover a{
color:#aaaaaa;
}
#the_footer_menu li:hover a:hover{
color:white;
}
/*Header Link on the drop up menu*/
#the_footer_menu li:hover a.headerLinks{
font-size:14px;
color:#cc0000;
text-decoration:underline;
margin-top:10px;
margin-left:10px;
}
#the_footer_menu li:hover a.headerLinks:hover{
color:white;
cursor:pointer;
}
/*List Links*/
#the_footer_menu li:hover a.listLinks{
font-size:12px;
color:#aaaaaa;
margin-left:10px;
}
#the_footer_menu li:hover a.listLinks:hover{
color:white;
cursor:pointer;
}
#the_footer_menu.right{
float:right;
right:0px;
margin-right:2px;
border-right: none;
border-left:1px solid rgba(0,0,0,0.3);
}

/*Layouts*/
#the_footer .one_column_layout,
#the_footer .two_column_layout,
#the_footer .three_column_layout{
margin:4px;
position:absolute;
padding-bottom:15px;
display:none;
text-align:left;

}
/*Width on each layout*/
#the_footer .one_column_layout{
width:140px;
}
#the_footer .two_column_layout{
width:280px;
}
#the_footer .three_column_layout{
width:420px;
}

/* Display Drop-up menus on Hover!!! */
#the_footer li:hover .one_column_layout,
#the_footer li:hover .two_column_layout,
#the_footer li:hover .three_column_layout{
display:block;
position:absolute;
margin: 0 0 0 -15px;
bottom: 40px;
background: rgba(0,0,0,0.5);
border-radius:7px 7px 0px 0px;
}

#the_footer .col_1,
#the_footer .col_2,
#the_footer .col_3{
display:inline;
float:left;
position:relative;
margin-left: 5px;
margin-right: 5px;
}
#the_footer .col_1{width:130px;}/* width of the column layout - (minus) margin-left and margin-right*/
#the_footer .col_2{width:270px;}
#the_footer .col_3{width:410px;}

I use Chrome.  and i want the site to be responsive and work to all browsers.
How i that possible??


Thanks in advanced !!!

Post a Reply

Replies

Oldest  Newest  Rating
0 Chandan A V · July 24, 2015
http://www.thenewboston.com/forum/topic.php?id=819 compare your code with this
+1 Ray LeDuc · August 6, 2015
https://www.thenewboston.com/forum/topic.php?id=8199&page=9999 here is a copy of the footer source code
  • 1

HTML / CSS / Web Design

107,279 followers
About

Discuss, share, ask, learn and teach HTML5 and CSS3.

Links
Moderators