div not in proper place

div not in proper place - css

I am creating a one-pager website. I am facing problem in the positioning of divs in the body tag. In the code, the search button is suppose to take me where the div containing the id "search" is , but this is somehow overlapping with the previous div with the id of "home". I checked all the previous tags as to make sure they are closed but I am unable to figure out where the problem lies. Also my background images wont show up for these div tags.Any help would be highly appreciated...Below is the index.html
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>eVolunteers</title>
<!--links-->
<link rel="icon" href="http://static.tmimgcdn.com/img/favicon.ico"><!--the title image-->
<link href="css/indexcss.css" rel="stylesheet" type="text/css" media="all" />
<link rel="shortcut icon" href="http://static.tmimgcdn.com/img/favicon.ico">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800" rel="stylesheet" />
<link rel="stylesheet" media="screen" href="http://openfontlibrary.org/face/dancing" rel="stylesheet" type="text/css"/>
<!--scripts-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
</head>
<body>
<div id="home">
<div style=" width:460px;height:180px; display: inline-block; float:left ;"><p class="heading" style="padding-top:50px; ">eVolunteers</p>
</div>
<div style= " width: 800px; height:180px; display: inline-block; float:right; " >
<ul class="ls" >
<li>Home<span class="round">That is, if you already have an account.</span></li>
<li>Search<span class="round">That is, if you already have an account.</span></li>
<li>Contact<span class="round">That is, if you already have an account.</span></li>
<li>About Us<span class="round">About the developers.</span></li>
<li>Login<span class="round">That is, if you already have an account.</span></li>
<li>Sign Up<span class="round">But only if you really, really want to. </span></li>
</ul>
</div>
</div>
</div>
<!--slider-->
<div id="search" class="sb">
<p>Hello</p>
</div>
<div id="contact" class="cb">
<p>Hello</p>
</div>
<div id="about" class="ab">
<p>Hello</p>
</div>
</body>
</html>
and this is the css
.sb{
border: 5px solid red;
padding-top: 800px;
}
.cb{
border: 5px solid green;
background: url('homepage.jpg');
}
.ab{
border: 5px solid black;
}
.heading {
font-family: 'DancingScriptOTRegular';
font-weight: bold;
font-style: normal;
font-size: 60px;
text-align:right;
}
.ls{
padding-left: 60px;
}
/* login and sign up css*/
* {
margin: 0;
padding: 0;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
ul {
margin: 30px auto;
text-align: center;
}
li {
list-style: none;
position: relative;
display: inline-block;
width: 100px;
height: 100px;
}
#-moz-keyframes rotate {
0% {transform: rotate(0deg);}
100% {transform: rotate(-360deg);}
}
#-webkit-keyframes rotate {
0% {transform: rotate(0deg);}
100% {transform: rotate(-360deg);}
}
#-o-keyframes rotate {
0% {transform: rotate(0deg);}
100% {transform: rotate(-360deg);}
}
#keyframes rotate {
0% {transform: rotate(0deg);}
100% {transform: rotate(-360deg);}
}
.round {
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
padding-top: 30px;
text-decoration: none;
text-align: center;
font-size: 25px;
text-shadow: 0 1px 0 rgba(255,255,255,.7);
letter-spacing: -.065em;
font-family: "Hammersmith One", sans-serif;
-webkit-transition: all .25s ease-in-out;
-o-transition: all .25s ease-in-out;
-moz-transition: all .25s ease-in-out;
transition: all .25s ease-in-out;
box-shadow: 2px 2px 7px rgba(0,0,0,.2);
border-radius: 300px;
z-index: 1;
border-width: 4px;
border-style: solid;
}
.round:hover {
width: 130%;
height: 130%;
left: -15%;
top: -15%;
font-size: 33px;
padding-top: 38px;
-webkit-box-shadow: 5px 5px 10px rgba(0,0,0,.3);
-o-box-shadow: 5px 5px 10px rgba(0,0,0,.3);
-moz-box-shadow: 5px 5px 10px rgba(0,0,0,.3);
box-shadow: 5px 5px 10px rgba(0,0,0,.3);
z-index: 2;
border-size: 10px;
-webkit-transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
transform: rotate(-360deg);
}
a.red {
background-color: rgba(239,57,50,1);
color: rgba(133,32,28,1);
border-color: rgba(133,32,28,.2);
}
a.red:hover {
color: rgba(239,57,50,1);
}
a.yellow{
background-color: rgba(255,255,0,1);
color: rgba(255,165,0,1);
border-color: rgba(255,165,0,.2);
}
a.yellow:hower{
color: rgba(255,255,0,1);
}
a.agreen{
background-color: rgba(0,255,0,1);
color: rgba(0,128,0,1);
border-color: rgba(0,128,0,.5);
}
a.yellow:hower{
color: rgba(255,255,0,1);
}
a.green {
background-color: rgba(1,151,171,1);
color: rgba(0,63,71,1);
border-color: rgba(0,63,71,.2);
}
a.green:hover {
color: rgba(1,151,171,1);
}
a.purple{
background-color: rgba(221,160,221,1);
color: rgba(128,0,128,1);
border-color: rgba(128,0,128,.8);
}
a.purple:hover {
color: rgba(221,160,221,1);
}
a.gray{
background-color: rgba(169,169,169,1);
color: rgba(3,3,3,1);
border-color: rgba(3,3,3,.2);
}
a.gray:hover {
color: rgba(3,3,3,1);
}
.round span.round {
display: block;
opacity: 0;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
font-size: 1px;
border: none;
padding: 40% 20% 0 20%;
color: #fff;
}
.round span:hover {
opacity: .85;
font-size: 16px;
-webkit-text-shadow: 0 1px 1px rgba(0,0,0,.5);
-moz-text-shadow: 0 1px 1px rgba(0,0,0,.5);
-o-text-shadow: 0 1px 1px rgba(0,0,0,.5);
text-shadow: 0 1px 1px rgba(0,0,0,.5);
}
.green span {
background: rgba(0,63,71,.7);
}
.red span {
background: rgba(133,32,28,.7);
}
.yellow span{
background: rgba(255,165,0,.7);
}
.agreen span{
background: rgba(0,128,0,.7);
}
.purple span{
background: rgba(128,0,128,.9);
}
.gray span{
background: rgba(3,3,3,.9);
}
/*slider*/
#slides {
display:none;
}

Your issue has to do with your content in #home being floated. When you float something it takes it out of the normal document flow. Since the child elements of #home are floated #home ends up collapsing, that is, having no height.
With the CSS you have provided you can see that your search DIV is already at the top of your page based on the red border you have given it. So there is no reason for it to "jump down" to #search as it's at the top.
I recommend using a the micro clearfix so your #home DIV takes up the space you expect it to. There are other options out there but I'll leave that up to you to discover.
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
In the jsFiddle below I have removed the padding from #search, which is also styled by your .sb class, and added the padding to your #home DIV (for illustrative purposes) as padding-bottom: 800px;. I've added the clearfix to #home to clear the floats contained within it.
#home {
padding-bottom: 800px;
}
.sb {
border: 5px solid red;
/* moved padding to #home as bottom padding for illustrative purposes */
}
<div id="home" class="cf">
jsFiddle: http://jsfiddle.net/mct84jbj/1

Related

Trigger an animation on an element's ::after when the element is clicked(::active) with css

Look My animation.
I made this for using a button for showing and hiding passwords.
.eye{
margin: 50px;
color: black;
transition-duration: .3s;
width: 100px;
height:100px;
border: 10px solid currentColor;
transform: rotate(45deg);
border-radius: 90px 5px;
opacity: .5
}
.eye::before{
content: "";
border: 10px solid currentColor;
width: 50px;
height:50px;
background-color: currentColor;
display: block;
border-radius: 50px;
margin-top: 15px;
margin-left: 12px;
}
.eye::after{
content: "";
border-bottom: 7.5px solid rgb(255, 255, 255);
width: 175px;
height: 5px;
background-color: currentColor;
display: block;
border-radius: 50px;
margin-top: -50px;
position: absolute;
margin-left: -35px
}
.eye:hover{
opacity: 1;
}
.eye:active{
color: rgb(174, 0, 0);
/* .eye::before{
animation: slash infinite 5s;
} */
}
#keyframes slash{
from{width:1px;}
to{width:175px}
}
<div class="eye"></div>
look that...
I want to run the animation slash on .eye::after
when the .eye is :active
and also make it so until again click(that is once the eye is clicked draw a slash and make it show until the again click )
that is I want to trigger the slash animation on .eye::after when .eye:active is triggered only using css.

I've added an example, you don't need to use #keyframes and animation to animate this eye on click - just use transitions. Also, example works with :active pseudo-class as you use it in your example, but looks like you need to have it switch on click, that way just add and remove class .active on click and replace :active with .active in CSS
.eye{
margin: 50px;
color: black;
width: 100px;
height:100px;
border: 10px solid currentColor;
transform: rotate(45deg);
border-radius: 90px 5px;
opacity: .5;
transition: all 0.3s ease-in;
}
.eye::before{
content: "";
border: 10px solid currentColor;
width: 50px;
height:50px;
background-color: currentColor;
display: block;
border-radius: 50px;
margin-top: 15px;
margin-left: 12px;
}
.eye::after{
content: "";
border-bottom: 7.5px solid rgb(255, 255, 255);
width: 0;
height: 5px;
background-color: currentColor;
display: block;
border-radius: 50px;
margin-top: -50px;
position: absolute;
margin-left: -35px;
transition: all 0.3s ease-in;
}
.eye:hover{
opacity: 1;
}
.eye:active{
color: rgb(174, 0, 0);
}
.eye:active::after{
width: 175px;
background-color: rgb(174, 0, 0);
}
<div class="eye"></div>

you can achieve this by just simply adding one liner code of javascript i.e. classList.toggle()
const myfun = () => {
const eye = document.querySelector(".eye");
eye.classList.toggle('changed')
};
.eye{
margin: 50px;
color: black;
transition-duration: .3s;
width: 100px;
height:100px;
border: 10px solid currentColor;
transform: rotate(45deg);
border-radius: 90px 5px;
opacity: .5
}
.eye::before{
content: "";
border: 10px solid currentColor;
width: 50px;
height:50px;
background-color: currentColor;
display: block;
border-radius: 50px;
margin-top: 15px;
margin-left: 12px;
}
.eye::after{
content: "";
border-bottom: 7.5px solid rgb(255, 255, 255);
width: 0px;
height: 5px;
background-color: currentColor;
display: block;
border-radius: 50px;
margin-top: -50px;
position: absolute;
margin-left: -35px;
transition: 1s;
}
.changed:after {
width: 175px;
transition: 1s;
}
.eye:hover{
opacity: 1;
}
.eye:active{
color: rgb(174, 0, 0);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src="style.js"></script>
</head>
<body>
<div class="eye" onclick="myfun()"></div>
</body>
</html>

CSS: round buttons with shadow effect

I'm trying to replicate the navigation buttons here, that's a wix website so it's so hard to inspect elements.
What I have tried is here
https://jsfiddle.net/1vngy4uo/1/
I'm trying many variations, never getting the css 100% correct.
.navButton {
width:15%;
display:inline-block;
position:relative;
background-color:#03314b;
border-radius: 30%;
box-shadow: 2px 2px 2px #888888;
}
.navButton:hover {
background-color:#98b7c8;
}
.navButton span {
width:100%;
display:inline-block;
position:absolute;
border-radius: 30%;
box-shadow: 2px 2px 2px #888888;
}
.navButton .bg {
height:50%;
top:0;
background-color:#3a6076 ;
border-radius: 30%;
box-shadow: 2px 2px 2px #888888;
}
.navButton:hover .bg{
background-color:#afcad9;
}
.navButton .text {
position:relative;
text-align:center;
color:#fff;
vertical-align: middle;
align-items: center;
}
.navButton .text:hover {
color:#000000;
}
and html
<a href="contact.html" class="navButton">
<span class="bg"></span>
<span class="text">Contact</span>

A very similar one, using linear-gradient and less HTML markup
jsFiddle
.navButton {
color: white;
text-decoration: none;
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
text-align: center;
padding: 0 30px;
line-height: 30px;
display: inline-block;
position: relative;
border-radius: 20px;
background-image: linear-gradient(#335b71 45%, #03324c 55%);
box-shadow: 0 2px 2px #888888;
transition: color 0.3s, background-image 0.5s, ease-in-out;
}
.navButton:hover {
background-image: linear-gradient(#b1ccda 49%, #96b4c5 51%);
color: #03324c;
}
Contact

I just used a div element to implement the same button that you referred. Is this what you want?
https://jsfiddle.net/9L60y8c6/
<div class="test">
</div>
.test {
cursor: pointer;
background: rgba(4, 53, 81, 1) url(//static.parastorage.com/services/skins/2.1212.0/images/wysiwyg/core/themes/base/shiny1button_bg.png) center center repeat-x;
border-radius: 10px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
transition: background-color 0.4s ease 0s;
position: absolute;
top: 0;
bottom: 0;
left: 5px;
right: 5px;
height: 30px;
width: 115px;
}

Would this be a start? You might want to adjust the colors a little.
Note: One can use linear-gradient, though it won't work on IE9, so I use a pseudo instead
.navButton {
width: 15%;
display: inline-block;
position: relative;
background-color: #03314b;
border-radius: 8px;
box-shadow: 2px 2px 2px #888888;
text-align: center;
text-decoration: none;
color: #fff;
padding: 5px;
transition: all 0.3s;
overflow: hidden;
}
.navButton:before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 50%;
width: 100%;
background-color: #335b71;
transition: all 0.3s;
}
.navButton span {
position: relative;
}
.navButton:hover {
transition: all 0.3s;
background-color: #96b4c5;
color: black;
}
.navButton:hover:before {
transition: all 0.3s;
background-color: #b1ccda;
}
<a href="contact.html" class="navButton">
<span>Contact</span>
</a>

Aligning the Image into the html page

Ive been trying to put in this image but the issue i'm getting here is that the image keeps on passing the footer and I cant seem to solve it. Please help me out. The image size for the "batmanshop" is width=890 and height=2000.
Here is the CSS code and below is the HTML code
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-image: url(images/background.png);
margin: 0;
padding: 0;
color: #000;
}
IMG.titleImage {
margin-left: 300px;
}
ul, ol, dl {
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0;
padding-right: 15px;
padding-left: 15px;
word-wrap: break-word;
}
a img {
border: none;
}
a:link {
color: black;
}
a:visited {
color: #6E6C64;
}
a:hover, a:active, a:focus {
text-decoration: none;
}
.container {
width: 960px;
height:100%;
background-color: #FFF;
margin: 0 auto;
}
.header {
background-image:url(images/headerbg.png);
height:140px;
}
.content {
width:100%;
height:100%;
background-color: white;
}
.footer {
padding: 10px 0;
background-color: #F1F8E0;
}
.fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
//Navigation Bar
.nav, .nav ul {
margin: 0;
padding: 0;
list-style: none;
line-height: 1;
}
.nav {
/* Layout & positioning */
position: relative;
margin: auto; /* Centering the menu */
height: 46px;
width: 960px;
text-align: center;
/* Background & effects */
box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
background: #65c0bb;
background-image:url(images/navImage.png);
}
.nav>li {
margin: 0;
line-height: 1;
padding: 0;
display: inline;
position: relative;
margin: 0 12px;
}
.nav::after, .nav::before {
content: "";
display: block;
position: absolute;
top: 6px;
height: 0px;
width: 0px;
border: 23px solid #65c0bb;
z-index: -1;
}
/* The left ribbon */
.nav::before {
border-left-color: transparent;
left: -30px;
}
/* The right ribbon */
.nav::after {
border-right-color: transparent;
right: -30px;
}
.nav>li>a {
display: inline-block;
padding: 15px 20px;
position: relative;
font-family: 'Oswald', sans-serif;
font-size: 16px;
text-transform: uppercase;
text-decoration: none;
color: #fff;
-webkit-transition: color .3s linear;
-moz-transition: color .3s linear;
-o-transition: color .3s linear;
-ms-transition: color .3s linear;
transition: color .3s linear;
}
.nav>li>a:hover, .nav>li:hover>a {
color: #eae8a5;
}
.nav>li>a::after {
content: "";
height: 15px;
width: 15px;
position: absolute;
right: -20px;
top: 16px;
display: block;
}
.nav>li:last-child>a::after {
display: none;
}
.nav ul {
position: absolute;
left: -9999px;
padding-top: 10px;
border-bottom: 1px solid #ccc;
opacity: 0;
-webkit-transition: opacity .3s linear;
-moz-transition: opacity .3s linear;
-o-transition: opacity .3s linear;
-ms-transition: opacity .3s linear;
}
.nav>li:hover>ul {
left: 0;
opacity: 1;
top: 30px;
}
.nav ul li:hover>ul {
left: 150px;
opacity: 1;
top: -11px;
padding-left: 12px;
border-bottom: 0;
box-shadow: none;
}
.nav ul li {
display: block;
position: relative;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
width: 150px;
text-align: justify;
z-index: 9;
background: #eee;
box-shadow: 3px 4px 0 rgba(0, 0, 0, .1);
-webkit-transition: background .3s linear;
-moz-transition: background .3s linear;
-ms-transition: background .3s linear;
-o-transition: background .3s linear;
}
.nav ul li a {
font-family: "Oswald", sans-serif;
font-size: 14px;
text-decoration: none;
display: block;
padding: 7px 12px 7px 20px;
color: #65c0bb;
-webkit-transition: color .3s linear;
-moz-transition: color .3s linear;
-ms-transition: color .3s linear;
-o-transition: color .3s linear;
}
.nav ul li:hover>a, .nav ul li a:hover {
color: #4db6b0;
}
.nav ul li:hover {
background: #f7f7f7;
}
.nav ul ul li:last-child {
border-bottom: 1px solid #ccc;
}
.nav ul ul li {
box-shadow: 3px 3px 0 rgba(0, 0, 0, .1);
}
.nav ul::after, .nav ul::before {
content: "";
display: block;
z-index: 1;
position: absolute;
height: 9px;
width: 9px;
}
.nav>li>ul::after {
border: 1px solid #ccc;
background: #eee;
border-right: 0;
border-bottom: 0;
top: 5px;
left: 25px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
}
.nav>li>ul::before {
height: 1px;
width: 12px;
background: #eee;
border-right: 0;
border-bottom: 0;
top: 10px;
left: 24px;
z-index: 99;
}
.nav ul ul::after {
border: 1px solid #ccc;
background: #eee;
border-right: 0;
border-bottom: 0;
top: 20px;
left: 8px;
position: absolute;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
}
.nav ul ul::before {
height: 10px;
width: 1px;
background: #eee;
z-index: 99;
top: 20px;
left: 12px;
}
.titleImage2 {
margin-left: 250px;
}
.birthdayDream {
padding-right: 15px;
padding-left: 15px;
float: right;
}
p1 {
display: block;
margin-top: 30px;
padding-right: 15px;
padding-left: 15px;
}
form {
margin-left: auto;
margin-right: auto;s
display:inline-block;
width:600px;
}
input {
float:right;
margin-right: 50px;
clear:both;
}
input2 {
float:left;
}
.row {
margin-left: 200px;
}
.batmanImage {
margin-left: 180px;
}
.batmanshop {
height:auto;
margin: 0 auto;
}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css">
<title>Birthday Planner - Home</title>
</head>
<body>
<div class="container">
<div class="header">
</div>
<ul class="nav">
<li>
Home
</li>
<li>
Themes
<ul>
<li>Boys Party Theme</li>
<li>Girls Party Theme</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
<li>Login</li>
<li>Sign Up</li>
</ul>
<div class="content">
<br/>
<IMG class="batmanImage">
<img src="images/batmantitle.jpg" name="Title" width="600" height="206">
</IMG>
<p>All you need to do is select the desired theme and provide us the necessary details. We will do the rest. The items listed below are what will be provided when you order this theme. Don't need to worry about anything else. Just a click of a button and we will get our team to handle the rest for you.
</p>
<IMG class="batmanshop">
<img src="images/batmanshop.jpg" name="Title">
</IMG>
</div>
<div class="footer">
<div class="navigationbar">
<ul class="nav">
<li>
Home
</li>
<li>
About
</li>
<li>
Contact
</li>
<li>
Terms and Conditions
</li>
</ul>
</div>
</div>
</div>
</body>
</html>

Whatever you want to achieve, you can not do that :
<IMG class="batmanshop">
<img src="images/batmanshop.jpg" name="Title">
</IMG>
I replaced that by: <img class="batmanshop" src="images/batmanshop.jpg" name="Title" />
Anyway, even with your code, I do not see the image passing over the footer.
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-image: url(images/background.png);
margin: 0;
padding: 0;
color: #000;
}
IMG.titleImage {
margin-left: 300px;
}
ul, ol, dl {
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0;
padding-right: 15px;
padding-left: 15px;
word-wrap: break-word;
}
a img {
border: none;
}
a:link {
color: black;
}
a:visited {
color: #6E6C64;
}
a:hover, a:active, a:focus {
text-decoration: none;
}
.container {
width: 960px;
height:100%;
background-color: #FFF;
margin: 0 auto;
}
.header {
background-image:url(images/headerbg.png);
height:140px;
}
.content {
width:100%;
height:100%;
background-color: white;
}
.footer {
padding: 10px 0;
background-color: #F1F8E0;
}
.fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
//Navigation Bar
.nav, .nav ul {
margin: 0;
padding: 0;
list-style: none;
line-height: 1;
}
.nav {
/* Layout & positioning */
position: relative;
margin: auto; /* Centering the menu */
height: 46px;
width: 960px;
text-align: center;
/* Background & effects */
box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
background: #65c0bb;
background-image:url(images/navImage.png);
}
.nav>li {
margin: 0;
line-height: 1;
padding: 0;
display: inline;
position: relative;
margin: 0 12px;
}
.nav::after, .nav::before {
content: "";
display: block;
position: absolute;
top: 6px;
height: 0px;
width: 0px;
border: 23px solid #65c0bb;
z-index: -1;
}
/* The left ribbon */
.nav::before {
border-left-color: transparent;
left: -30px;
}
/* The right ribbon */
.nav::after {
border-right-color: transparent;
right: -30px;
}
.nav>li>a {
display: inline-block;
padding: 15px 20px;
position: relative;
font-family: 'Oswald', sans-serif;
font-size: 16px;
text-transform: uppercase;
text-decoration: none;
color: #fff;
-webkit-transition: color .3s linear;
-moz-transition: color .3s linear;
-o-transition: color .3s linear;
-ms-transition: color .3s linear;
transition: color .3s linear;
}
.nav>li>a:hover, .nav>li:hover>a {
color: #eae8a5;
}
.nav>li>a::after {
content: "";
height: 15px;
width: 15px;
position: absolute;
right: -20px;
top: 16px;
display: block;
}
.nav>li:last-child>a::after {
display: none;
}
.nav ul {
position: absolute;
left: -9999px;
padding-top: 10px;
border-bottom: 1px solid #ccc;
opacity: 0;
-webkit-transition: opacity .3s linear;
-moz-transition: opacity .3s linear;
-o-transition: opacity .3s linear;
-ms-transition: opacity .3s linear;
}
.nav>li:hover>ul {
left: 0;
opacity: 1;
top: 30px;
}
.nav ul li:hover>ul {
left: 150px;
opacity: 1;
top: -11px;
padding-left: 12px;
border-bottom: 0;
box-shadow: none;
}
.nav ul li {
display: block;
position: relative;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
width: 150px;
text-align: justify;
z-index: 9;
background: #eee;
box-shadow: 3px 4px 0 rgba(0, 0, 0, .1);
-webkit-transition: background .3s linear;
-moz-transition: background .3s linear;
-ms-transition: background .3s linear;
-o-transition: background .3s linear;
}
.nav ul li a {
font-family: "Oswald", sans-serif;
font-size: 14px;
text-decoration: none;
display: block;
padding: 7px 12px 7px 20px;
color: #65c0bb;
-webkit-transition: color .3s linear;
-moz-transition: color .3s linear;
-ms-transition: color .3s linear;
-o-transition: color .3s linear;
}
.nav ul li:hover>a, .nav ul li a:hover {
color: #4db6b0;
}
.nav ul li:hover {
background: #f7f7f7;
}
.nav ul ul li:last-child {
border-bottom: 1px solid #ccc;
}
.nav ul ul li {
box-shadow: 3px 3px 0 rgba(0, 0, 0, .1);
}
.nav ul::after, .nav ul::before {
content: "";
display: block;
z-index: 1;
position: absolute;
height: 9px;
width: 9px;
}
.nav>li>ul::after {
border: 1px solid #ccc;
background: #eee;
border-right: 0;
border-bottom: 0;
top: 5px;
left: 25px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
}
.nav>li>ul::before {
height: 1px;
width: 12px;
background: #eee;
border-right: 0;
border-bottom: 0;
top: 10px;
left: 24px;
z-index: 99;
}
.nav ul ul::after {
border: 1px solid #ccc;
background: #eee;
border-right: 0;
border-bottom: 0;
top: 20px;
left: 8px;
position: absolute;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
}
.nav ul ul::before {
height: 10px;
width: 1px;
background: #eee;
z-index: 99;
top: 20px;
left: 12px;
}
.titleImage2 {
margin-left: 250px;
}
.birthdayDream {
padding-right: 15px;
padding-left: 15px;
float: right;
}
p1 {
display: block;
margin-top: 30px;
padding-right: 15px;
padding-left: 15px;
}
form {
margin-left: auto;
margin-right: auto;s
display:inline-block;
width:600px;
}
input {
float:right;
margin-right: 50px;
clear:both;
}
input2 {
float:left;
}
.row {
margin-left: 200px;
}
.batmanImage {
margin-left: 180px;
}
.batmanshop {
height:auto;
margin: 0 auto;
}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css">
<title>Birthday Planner - Home</title>
</head>
<body>
<div class="container">
<div class="header">
</div>
<ul class="nav">
<li>
Home
</li>
<li>
Themes
<ul>
<li>Boys Party Theme</li>
<li>Girls Party Theme</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
<li>Login</li>
<li>Sign Up</li>
</ul>
<div class="content">
<br/>
<IMG class="batmanImage">
<img src="images/batmantitle.jpg" name="Title" width="600" height="206">
</IMG>
<p>All you need to do is select the desired theme and provide us the necessary details. We will do the rest. The items listed below are what will be provided when you order this theme. Don't need to worry about anything else. Just a click of a button and we will get our team to handle the rest for you.
</p>
<img class="batmanshop" src="http://placehold.it/890x2000&text=Batmanshop" name="Title" />
</div>
<div class="footer">
<div class="navigationbar">
<ul class="nav">
<li>
Home
</li>
<li>
About
</li>
<li>
Contact
</li>
<li>
Terms and Conditions
</li>
</ul>
</div>
</div>
</div>
</body>
</html>

How can I create a fade in/fade out effect using only CSS?

I want to do fade in and fade out effects using only CSS. If I move or hover over one div element, I then need to call another DIV to fade in, snd then it should fade out agsin when the mouse leaves. DOM element calling and effect should be in CSS or CSS3. I can't use javascript and Jquery.
<style>
#b
{
width: 200px;
height: 40px;
background: red;
border-radius: 10px;
text-align: center;
margin: 35px;
padding: 30px 0px;
box-shadow: 2px 4px 10px 2px;
opacity:0;
color: white;
font: 20px bold;
}
#a
{
width: 200px;
height: 40px;
background: rgb(156, 155, 155);
border-radius: 10px;
text-align: center;
cursor: pointer;
margin: 35px;
padding: 30px 0px;
box-shadow: 2px 4px 10px 2px;
color: white;
font: 20px bold;
}
#a:hover + #b {
animation:myfirst 1s;
-webkit-animation:first 1s;
opacity:1;
}
#keyframes first
{
from {opacity:0.1;}
to {opacity:1;}
}
#-webkit-keyframes first
{
from {opacity:0.1}
to {opacity:1;}
}
</style>
<div id="a">Hover</div>
<div id="b">show</div>

You can easily achieve that with opacity and the adjacent sibling combinator.
Check out the jsfiddle for a vendor prefixed version.
#container + div {
transition: opacity .25s;
opacity: 0;
}
#container:hover + div {
opacity: 1;
}
Transition browser support
Adjacent sibling combinator (+ selector) documentation

How to make a square button

I have a button on my website and I want to make it square:
How do a make a square button and make it still act like a button so it changes a little bit when i scroll over it
here is my example: note that the button can't be clicked on
http://jsfiddle.net/HrUWm/
(what css will make this work?)
here is what i tried:
<input class="butt" type="button" value="test"/>
.butt{ border: 1px outset blue; background-color: lightBlue;}

This will do the work:
.butt {
border: 1px outset blue;
background-color: lightBlue;
height:50px;
width:50px;
cursor:pointer;
}
.butt:hover {
background-color: blue;
color:white;
}
http://jsfiddle.net/J8zwC/

Example: http://jsfiddle.net/HrUWm/7/
.btn{
border: 1px solid #ddd;
background-color: #f0f0f0;
padding: 4px 12px;
-o-transition: background-color .2s ease-in;
-moz-transition: background-color .2s ease-in;
-webkit-transition: background-color .2s ease-in;
transition: background-color .2s ease-in;
}
.btn:hover {
background-color: #e5e5e5;
}
.btn:active {
background-color: #ccc;
}
The key piece is the selectors matching the :active and :hover states of the button, to allow a different style to be applied.
See also: The user action pseudo-classes :hover, :active, and :focus

Try something like this
.square {
background: #000;
height: 200px;
width: 380px;
border-radius: 20px;
color: #fff;
text-align: center;
}
.button:hover {
background-color: #000;
}
.sub-content {
font-size: 25px;
/* text-shadow: 0 0 10px white; */
/* font-style: oblique; */
font-family: 'Prosto One;
}
.main-content {
margin-top: 30px;
font-size: 45px;
font-family: 'Prosto One';
/* text-shadow: 0 0 20px white; */
}
.align-content {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.button:active {
background-color: #000;
box-shadow: 0 5px #383838;
transform: translateY(4px);
}
.button {
box-shadow: 0 9px #383838;
cursor: pointer;
}
<link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Prosto+One" rel="stylesheet">
<!-- <div class="triangle-with-shadow"></div> -->
<div class="square button">
<div class="align-content">
<span class="main-content">Create Repair</span><br>
<span class="sub-content">The Mobile Shop </span>
</div>
</div>
codepane.io

An option I am using now (I'm using AngularJS & Bootstrap scripts)
HTML:
Log In
CSS:
padding: 40px 0px 40px 0px;
text-decoration: none;
width: 250px !important;
height: 250px !important;

Develop Reference

r css asp.net wordpress firebase qt symfony nginx http apache-flex

div not in proper place - css

Related

Trigger an animation on an element's ::after when the element is clicked(::active) with css

CSS: round buttons with shadow effect

Aligning the Image into the html page

How can I create a fade in/fade out effect using only CSS?

How to make a square button

Categories

Resources