Skip to main content
K
kingpat27
Participating Frequently
July 1, 2015
Question

CSS Transition problems

  • July 1, 2015
  • 2 replies
  • 1404 views

I am working on my website and before the update, I was able to use CSS Transition and it worked find. On hover, the transition is not working. Also, when I try to click on the text to create a transition I am having an issue. I even tried to solve the problem with Div and still would run into problems. Here is my code.

<header>

  <div class = "navigation">

    <nav>

  <div clas ="home page button">

            <a href="home.html" onMouseOver="MM_swapImage('PL_Gray_Logo','',

        'PL GRAY.png',1)" onMouseOut="MM_swapImgRestore()"><img src="PL GRAY.png" alt="Company                 Logo" width="217" height="90" class="brandhome"></a>

                <h1><a href="services.html" class="services">Services</a></h1>

                <h1><a href="casestudies.html" class="casestudies">Cases</a></h1>

            <h1 class="services"><a href="contact.html">Contact</a></h1>

        </div>

  </nav>

  </div>

     </header>

</div>

<div class ="main image"> </div>

<img src="../../../Gray Industries/PL Gray Consulting/Consulting/Websites/Gray Group/mirroring-711926_edited.jpg" alt="" width="1300" height="500" class="home_image"/>

<div class ="footer">

  <footer>

  <p>Copyright &copy; 2015 by P.L. Gray Consulting</p>

  </footer>

</div>

</body>

</html>

div a .brandhome {

  width: 217px; 

    height: 90px; 

    display: block;

}

a {

  color: #050505;

  text-decoration: none;

  text-transform: uppercase;

  font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;

  margin-left: 0px;

  width: 0px;

  float: left;

  margin-bottom: 26px;

}

div h1 .services {

  margin-left: 300px;

  -webkit-transition: all .5s ease 0s;

  -o-transition: all .5s ease 0s;

  transition: all .5s ease 0s;

  margin-top: 47px;

}

div h1 .casestudies {

  margin-left: 450px;

  margin-top: 47px;

}

.home_image {

  display: block;

  margin-left: -7px;

}

div .services a {

  margin-left: 350px;

  margin-top: 47px;

}

div h1 .services:hover {

  background-color: rgba(237,171,31,1);

}

This topic has been closed for replies.

2 replies

sinious
sinious
Legend
September 8, 2015

To keep this sane, let's keep each thread and the monster code separate, even if the issues seem similar. We definitely want to handle things on a case by case basis.

kingpat27 ~ A few things first.

Semantically you have lots of elements wrapped in extra unnecessary elements. <div class="navigation"><nav> can just be <nav>, unless you have another reason why. Navigation tags shouldn't be wrapped by <h1> tags because it confuses search engines on where your navigation and page headlines are. If you like the <h1> style, then apply that in a class such as "nav a".

There's a lot of missing and mis-nested tags here. I assume this is just you giving a snapshot overall. The CSS is also applied incorrectly such as you may think "div h1 .services" will affect "<div><h1 class="services"><a>..." but it will not because it expects .services to be applied to a "child" element of <h1>. In that case it is directly on the <h1> and doesn't affect it.

All of this aside, do you realize you're telling all anchors "a {" to float:left; and have a width:0px? Did you intend to include changing the width as part of your animation?

If you have a link to this page I'd highly suggest you let us see more of it so we can use debugger tools on it. It solves problems in fractions of the time rather than snippits.

sambegdouri ~ Can you please post your code in a new thread to keep this from getting out of hand with "too much code"? Thanks.

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
September 8, 2015

kingpat27's OP is from June so probably not around anymore.

Nancy O.

Nancy O'Shea— Product User & Community Expert
hans-g.
hans-g.
Legend
July 1, 2015

Hello,

did you work according to the directions of Use the CSS Transitions panel | Adobe Dreamweaver CC tutorials (only 6 min duration)? Please open a really new file to try it out from there.

If not, I for my part would prefer if you send a link to your website in question, no matter how it looks like.

Hans-Günter

sambegdouri
sambegdouri
Inspiring
September 7, 2015

I think, I am having a similar problem, too. I checked out the link you posted, but I am having no luck. In my case, would it have anything to do with how I am targeting the snippets/expressions. What I mean (regarding transitions), in the code you see below, my a snippets have .link .visited and .hover. Am I targeting the wrong tag? I tried using li.link li.visited and li.hover, but that doesn't work either.

Any idea where I am going wrong?

<!doctype html>

<!--..-->

<html>

<head>

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

<meta charset="UTF-8">

<meta http-equiv="content-type" content="text">

    

     

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title >BGDR creative</title>

<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.--><script>var __adobewebfontsappname__="dreamweaver"</script>

<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->

<!--<script>var __adobewebfontsappname__="dreamweaver"</script>-->

<script src="http://use.edgefonts.net/quicksand:n3:default.js" type="text/javascript"></script>

</head>

   

<body>

<header>

<!--

This image is in CSS. Not sure if I need to use this image or the one in CSS so I can scroll........

<img src="../Assests/Pics/horizon bali.jpg" name="background image of Bali" width="1420">-->

 

 

  <!-- h1 is a text logo (i need to check to see having a h1 text logo is ok)-->

        <h1 class="logo" role="button">

        <a href="Home.html" title="Back to the front page" role="link">

        <span id="bgdr">

        BGDR

        </span>

        <br>

        <span id="creative">

        creative

        </span>

        </a>

        </h1>

       

      

        <nav id="nav" role="navigation">

            <ul>

            <li><a href="Home.html" title="Go Home" rel="next">FRONT PAGE </a> </li>

            <li><a href="About.html" title="About BGDR" rel="next">ABOUT </a> </li>

          <li><a href="CV.html" title="CV" rel="next">CV </a> </li>

            <li><a href="Blog.html" title="A blog of my work and musings">BLOG </a> </li>

            <li><a href="Contact.html" title="Contact Me" rel="next">CONTACT </a> </li>

                </ul>

                </nav>

                <br>

               

               

    <!--Below are the social netowrking buttons with <a> tags to link externally-->

       <section class="social" role="button">      

            <a href="https://twitter.com/sambegdouri" title="Tweet Me!" target="_blank">

                <img src="../Assests/Icons/twitter.png" height="32" width="32" alt="Twitter">

            </a>

       

            <a href="..." title="Facebook Page" target="_blank">

                <img src="../Assests/Icons/facebook.png" name="Facebook" alt="Facebook" width="32" height="32">

            </a>

           

            <a href="https://instagram.com/sambegdouri/" title="My Insta Feed" target="_blank">

                <img src="../Assests/Icons/instagram.png" height="32" width="32" alt="Instagram">

            </a>

           

            <a href="https://uk.linkedin.com/in/sambegdouri" title="My Linkedin Profile" target="_blank">

                <img src="../Assests/Icons/linkedin.png" height="32" width="32" alt="Linkedin"></a>

    </section>

      

</header>

  <!--Below is the "main" content of the page, which includes the about section-->

  <main role="main" class="main">

   

        <article>

            <h2>ABOUT</h2> <br>

                <section>

            <p class="centertext" style="font-size: 0.9em">text</p>

                </section>

                   

                <section>

        <h4 class="centertext">text.</h4>

                    </section>

                   

                    <section>

    <h4 class="centertext" style="font-weight:500; font-size:1.1em">text</h4>

        <p class="centertext">text </p>

                </section>

                   

                <section>

        <h4 class="centertext" style="font-weight:500; font-size:1.1em">text</h4>

               

                <p>text</p>

              </section>

                   

                <section>

  <h3>Sound and Music</h3>

        <p>text</b>.</p>

                <p> text</p>

                </section>

               

                <section>

         <h3>Film Animation and Graphics</h3>    

                <p>text</p>

                </section>

               

                <section>

          <h3>Web</h3>

            <p>text.</p>

              </section>

                    

            <section>

            <p>text</p>

            <p>text </p>

             <p style="text-align:center; font-size:1.5em">Sam Begdouri</p>

              </section>

    </article>

           

       

    </main>

   

    <!--This is the footer section, which will contain social buttons that will link externally-->

   

    <footer role="contentinfo">

    <section>

    <a href="https://twitter.com/sambegdouri" title="Tweet Me!" target="_blank">

                <img src="../Assests/Icons/twitter.png" height="20" width="20" alt="Twitter">

                </a>

   

    <a href="..." title="Facebook Page" target="_blank">

                <img src="../Assests/Icons/facebook.png" name="Facebook" alt="Facebook">

                </a>

   

    <a href="https://instagram.com/sambegdouri/" title="My Insta Feed" target="_blank">

                <img src="../Assests/Icons/instagram.png" height="20" width="20" alt="Instagram">

                </a>

   

    <a href="https://uk.linkedin.com/in/sambegdouri" title="My Linkedin Profile" target="_blank">

                <img src="../Assests/Icons/linkedin.png" height="20" width="20" alt="Linkedin">

                </a>

    </section>

    </footer>

<script src="../js/jquery-1.11.2.min.js" type="text/javascript"></script>

<script src="../js/bootstrap.js" type="text/javascript"></script>

</body>

</html>

html{
margin: 0 auto;
padding: 0;
}
body{
font-family: quicksand, source-sans-pro, Gotham, "Helvetica Neue", Helvetica, Arial, sans-se;
margin:auto;
}
header{
background-image:url(../Assests/Pics/horizon%20bali.jpg);
padding:0;
margin:0;
}

h1{
font-size: 4em;
color: black;
margin: 0;
position: fixed;
top: 1em;
left: 0.5em;
width: 300px;
font-weight:300;
padding: 0;
line-height:55%;
}

#creative{
font-size:0.6em;
letter-spacing: 0.04em;
padding-left:0.5%;
}
a:link{
color: hsla(0,0%,0%,1.00);
-webkit-transition: background-color 2s ease-out;
-moz-transition: background-color 2s;
-o-transition: background-color 2s;
transition: background-color 2s;
text-decoration:none;
}

a:visited{
color: hsla(0,0%,0%,1.00);
}

a:hover{
color: hsla(0,0%,72%,1.00);
text-decoration: none;
font-family: quicksand;
font-style: normal;
font-weight: 400;
cursor: pointer;
}

h2/*h2 is the title of each page eg "ABOUT"*/
{
font-size:2em;
text-align:center;
position:relative;
/*top: 250px;*/
}
h3{
text-align: center;
}
p/*web text*/
{
font-size: 0.85em;
text-align: justify;
}
ul{/*here, the ul, li, and .nav control the top nav menu*/
list-style-type: none;
float:right;
position: fixed;
top: 110px;
right:0px;
margin: 0;
padding: 0;
}
li{
   float: right;
display: block;
   width: 10em;
}

.social{
position:fixed;
right:0px;
top: 110px;
display: block;
width: 10em;
margin: 5em;
}
.main  {
position: relative;
top: 250px;
width: 65%;
margin:0 auto;
}
footer{
position: relative;
top: 250px;
}

.centertext {

text-align:center;
}
Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
September 7, 2015

Please tell us exactly what you're trying to achieve and on which element?

For example, if user hovers over a link with their mouse, do you want the link background to change color? 

Or do you want the text to change?  Which properties should change -- color, size, font?

Nancy O.

Nancy O'Shea— Product User & Community Expert
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices