Trouble integrating css into site [Archive]

neostyles

07-27-2014, 12:18 AM

Im trying to put this on my site
http://www.dynamicdrive.com/style/csslibrary/item/flat_flipping_menu_buttons_vertical/
I only want the first ones (the ones where the text pops up)

I copied the css code into my style sheet and the html into my page but when i try to view it, nothing looks right. I cant even see the colors of the buttons.

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.Jack Murdock</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="portfolio.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Lato:700' rel='stylesheet' type='text/css'>
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
</head>

<body bgcolor="#FFFFFF">

<div id="HeaderContainer"></div>

<br /><br />

<ul class="flatflipbuttons second">
<li><a href="photography.html"><span><img src="images/photography.png" /></span></a></li>
<li><a href="2d design.html"><span><img src="images/graphicdesign.png" /></span></a></li>
<li><a href="3d work.html"><span><img src="images/3dwork.png" /></span></a></li>
<li><a href="contact.html"><span><img src="images/contact.png" /></span></a></li>

</ul>

</body>
</html>

CSS

@charset "utf-8";
@charset "utf-8";
/* CSS Document */
body {
background-color: #FFFFFF;
}

#HeaderContainer {
width: 102%;
height: 320px;
background-color: #FFFFFF;
background-image: url("title2.png");
background-repeat: no-repeat;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
float: center;
}

.title {
position: relative;
text-align:center;
color: #5f5f5f;

}

#nav {
display: inline;
}

ul {
list-style: none;
display: block;
}

.CenterContainer {
width: 102%;
overflow: visible;
display: block;
height: 210px;
padding-top: 10px;

}

div.img{
height: 133px;
width: 200px;
float: left;
text-align: center;
margin: 20px 30px 20px;
display: block;
line-height:0;

}

#nav li a:hover {
color: #9BACC4;
/* CSS Document */

a.current:link, a.current:visited {

border-bottom:thick dotted #FFFFFF;
}

#slideshow {
margin: 50px auto;
position: relative;
width: 240px;
height: 240px;
padding: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}

#slideshow > div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}

.TitleImg {
position: relative;
top: 100px;
}

#nav2 {
max-width: 30%;
height: 50px;
float: left;
padding: 0;
list-style: none;
list-style: none;
background-color: #FFFFFF;
z-index: 90;

}

#nav2 li {
float: left;
margin: 2px;
}
#nav2 li a {
display: inline;

}

.frontimage {
position: absolute;
left: 500px;
display: inline;
}

#nav {
width: 25px;
height: 600px;
}

ul.flatflipbuttons{
margin:0;
padding:0;
list-style:none;
-webkit-perspective: 10000px; /* larger the value, the less pronounced the 3D effect */
-moz-perspective: 10000px;
perspective: 10000px;
}

ul.flatflipbuttons li{
margin:0;
display: block;
width: 100px; /* dimensions of buttons. */
height: 100px;
margin-bottom: 0; /* spacing between buttons */
background: white;
text-transform: uppercase;
text-align: center;
}

ul.flatflipbuttons li a{
display:table;
font: bold 36px Arial; /* font size, pertains to icon fonts specifically */
width: 100%;
height: 100%;
color: black;
background: #3B9DD5;
text-decoration: none;
outline: none;
-webkit-transition:all 300ms ease-out; /* CSS3 transition. */
-moz-transition:all 300ms ease-out;
transition:all 300ms ease-out;
}

ul.flatflipbuttons li:nth-of-type(1) a{
color: green;
background: #3B9DD5;
}

ul.flatflipbuttons li:nth-of-type(2) a{
background: #A1CD3A;
}

ul.flatflipbuttons li:nth-of-type(3) a{
background: #80C5EC;
}

ul.flatflipbuttons li:nth-of-type(4) a{
color: white;
background: #635746;
}

ul.flatflipbuttons li:nth-of-type(5) a{
background: #F2C96D;
}

ul.flatflipbuttons li a span{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: table-cell;
vertical-align: middle;
width: 100%;
height: 100%;
-webkit-transition: all 300ms ease-out; /* CSS3 transition. */
-moz-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}

ul.flatflipbuttons li b{ /* CSS for text alongside button */
display: block;
position: relative;
top: -100%; /* starting vertical position of text */
left: 100%; /* horizontal position of text */
text-align: left;
text-indent: 10px;
width: 100%;
opacity: 0;
-webkit-transition: all 300ms ease-out 0.2s; /* CSS3 transition. 0.2s delay */
-moz-transition: all 300ms ease-out 0.2s;
transition: all 300ms ease-out 0.5s;
}

ul.flatflipbuttons li a img{ /* CSS for image if defined inside button */
border-width: 0;
vertical-align: middle;
}

ul.flatflipbuttons li:hover a{
-webkit-transform: rotateY(180deg); /* flip horizontally 180deg*/
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
background: #c1e4ec; /* bgcolor of button onMouseover*/
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
transition-delay: 0.2s;
}

ul.flatflipbuttons li:hover a span{
color: black; /* color of icon font onMouseover */
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg); /* flip horizontally 180deg*/
transform: rotateY(180deg);
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
transition-delay: 0.2s;
}

ul.flatflipbuttons li:hover b{
opacity: 1;
top: -65%; /* vertical position of text onmouseover */
}

/* CSS for 2nd menu below specifically */

ul.second li a{
background: #eee !important;
}

ul.second li a:hover{
background: #ddd !important;
}

Any help would be greatly appreciated. Its been a few months since i did any sort of web design so i guess im a bit out practice. Thank you so much!

Deadweight

07-27-2014, 06:56 AM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>.Jack Murdock</title>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
<link href="portfolio.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Lato:700' rel='stylesheet' type=
'text/css' />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css"
rel="stylesheet" type="text/css" />
<style type="text/css">
/*<![CDATA[*/
body {
background-color: white;
}
/*]]>*/
</style>
</head>

<body>
<div id="HeaderContainer"></div><br />
<br />

<ul class="flatflipbuttons second">
<li><a href="photography.html"><span><img src=
"images/photography.png" /></span></a></li>

<li><a href="2d%20design.html"><span><img src=
"images/graphicdesign.png" /></span></a></li>

<li><a href="3d%20work.html"><span><img src="images/3dwork.png" /></span></a></li>

<li><a href="contact.html"><span><img src="images/contact.png" /></span></a></li>
</ul>
</body>
</html>

I dont know where your css is saved so i cant help you there. It needs to be in the same folder as the HTML file in this example.