Jump to content

Any reason why once hovered over, my text moves down a bit as well?


luke214

Recommended Posts

So when i hover over my Rocks text in the navigation menu, it does as I've stated, it grows in size and turns white.

However, it also moves down the page slightly as well :o

I have 3 other pieces of text, they all grow and turn white, but they DON'T move down, they just stay in place.

 

Here's my HTML and CSS that refer to the element!

 

<div id="navigation">
<nav id="navmenu">
<div id="textnav">
<pre>
</pre>
Rocks
</div>
<pre>
</pre>
<div id="textnav1">
Minerals
</div>
<pre>
</pre>
<div id="textnav2">
Locations
</div>
<pre>
</pre>
<div id="textnav3">
Identification
</div>
</nav>
</div>




CSS;
#textnav:hover {
color: white;
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
transition: .3s ease-in;
}
Edited by luke214
Link to comment
Share on other sites

I can't really tell from this code, it looks correct to me, I would have to see the actual page in my browser to find out what styles are being applied to it. I think you may be adding a border on hover.

 

You need to improve your HTML. You're using whitespace for layout, that's a bad practice, if you need space between elements use margin or padding. You also have too many IDs, they're not necessary. IDs should denote important elements on the page.

 

This would be a better structure for your HTML. Clean and semantically correct.

<nav id="navigation">  <ul id="menu">    <li>Rocks</li>    <li>Minerals</li>    <li>Locations</li>    <li>Identification</li>  </ul></nav>

You can use CSS to make it look however you want:

#menu {  padding: 0; /* Remove <ul> default padding */  list-style-type: none; /* Remove bullets */}#menu li {  margin-bottom: 3.3em; /* This replaces the <pre> elements */}#menu li:hover {  color: white;  -moz-transform: scale(1.1);  -webkit-transform: scale(1.1);  -o-transform: scale(1.1);  -ms-transform: scale(1.1);  transform: scale(1.1);  transition: .3s ease-in;}
Link to comment
Share on other sites

I'm going to work on cleaning up my code tomorrow :)

 

Here's my HTML if you want to take a look!

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<meta content="My website about Minerals and Rocks" name="description">
<meta content="minerals,rocks,earth,gems" name="keywords">
<meta content="index,follow" name="robots">
<link href="styles.css" rel="stylesheet" type="text/css">
<link href="geode.ico" rel="icon">
<title>Information about Minerals and Rocks</title>
</head>
<body>
<div class="mainwrapper">
<div id="navigation">
<nav id="navmenu">
<div id="textnav">
<pre>
</pre>
Rocks
</div>
<pre>
</pre>
<div id="textnav1">
Minerals
</div>
<pre>
</pre>
<div id="textnav2">
Locations
</div>
<pre>
</pre>
<div id="textnav3">
Identification
</div>
</nav>
</div>
<div id="wrapper">
<noscript>Please enable Javascript</noscript>
<header>
<h1><ins>Welcome!</ins></h1>
<p>Welcome to my website about Minerals and Rocks!<br>
Hopefully you'll find 0some useful information to help you!</p>
</header>
<main id="content">
<article id="firstfont">
<h2>What is a Mineral</h2>
<p>A mineral is a naturally occurring chemical compound. Most
often, they are crystalline and abiogenic in origin.<br>
A mineral is different from a rock, which can be an aggregate
of minerals or non-minerals and does not have one<br>
specific chemical composition, as a mineral does. The exact
definition of a mineral is under debate, especially<br>
with respect to the requirement that a valid species be
abiogenic, and to a lesser extent with regard to it<br>
having an ordered atomic structure. More information can be
found <a href="https://en.wikipedia.org/wiki/Mineral" target=
"_blank">here</a>!</p>
<h2>What is a Rock?</h2>
<p>In geology, rock or stone is a naturally occurring solid<br>
aggregate of one or more minerals or mineraloids. For
example,<br>
the common rock granite is a combination of the quartz,
feldspar<br>
and biotite minerals. The Earth's outer solid layer, the
lithosphere,<br>
is made of rock.<br>
Rocks have been used by mankind throughout history. From the
Stone Age,<br>
rocks have been used for tools. The minerals and metals found
in rocks<br>
have been essential to human civilization.<br>
Three major groups of rocks are defined: igneous,
sedimentary,<br>
and metamorphic. The scientific study of rocks is called
petrology,<br>
which is an essential component of geology.<br>
More information about rocks can be found <a href=
"_blank">here!</a></p>
</article>
</main>
</div>
<div id="wrappertwo">
<div id="example">
<h1><ins>Examples of Geodes</ins></h1>
<p>Below is a short video showing different types of Geodes.<br>
Take a look to see the different types you can find, or hopefully
buy!</p>
</div>
<img src="Arrow.png" id="Arrow" alt="Arrow">
<div id="Geodevideo">
<video controls="controls" poster=
"picofrock.png"><source src="Geodes.mp4" type="video/mp4"> Your browser
does not support the video tag.</video>
</div>
</div>
</div>
</body>
</html>
CSS
a:visited { color: green; }
a:hover { color: red; }
* { font-family: "Arial Black"; }
body {
background: #526F35;
font-size: 100%;
}
#wrapper{
float: left;
}
#wrappertwo{
float: left;
}
#navigation{
float: right;
}
#wrapper{
box-sizing: border-box;
box-shadow: 0px 0px 50px black;
font-size: 1.2em;
border: 6px solid black;
background: white;
text-align: center;
width: 60%;
}
#wrappertwo{
box-sizing: border-box;
font-size: 1.2em;
width: 30%;
text-align: center;
}
#navigation{
box-sizing: border-box;
border: 6px solid black;
box-shadow: 0px 0px 50px black;
font-size: 1.3em;
text-align: center;
background: #00CC33;
width: 10%;
height: 905px;
}
#Geodevideo{
background: white;
border: 6px solid black;
box-shadow: 0px 0px 20px black inset;
padding: 8px;
}
#Arrow{
height: 200px;
margin-top: 30px;
margin-bottom: 33px;
margin-right: 5px;
}
#example{
background: white;
border: 6px solid black;
box-shadow: 0px 0px 50px black;
}
#Arrow:hover {
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
-ms-transform: scale(1.2);
-webkit-transform: scale(1.2);
transform: scale(1.2);
transition: .1s ease-in;
}
#textnav:hover {
color: white;
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
transition: .3s ease-in;
}
#textnav1:hover {
color: white;
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
transition: .3s ease-in;
}
#textnav2:hover {
color: white;
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
transition: .3s ease-in;
}
#textnav3:hover {
color: white;
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
transition: .3s ease-in;
}
Link to comment
Share on other sites

I can't see anything in the code that might be causing that. I need to see it working in the browser.

 

Just a tip, you can combine selectors with the comma so that you don't have to copy and paste the same CSS rules over and over. In your current page, this would be an example (but I already provided a better HTML structure so this rule should not be used)

#textnav:hover,#textnav1:hover,#textnav2:hover,#textnav3:hover {  color: white;  -moz-transform: scale(1.1);  -webkit-transform: scale(1.1);  -o-transform: scale(1.1);  -ms-transform: scale(1.1);  transform: scale(1.1);  transition: .3s ease-in;}
Link to comment
Share on other sites

I think I know what the issue is. I thought you were referring to text below the menu on the page, but I now believe you were referring to the text inside the button.

 

Since the button has increased in size, so has the text inside it, but when you scale something you have to scale it around a center point. If that center point were at the top left corner of the element then the text would appear to move down slightly when the text scaled up. Setting transform-origin to center should solve that problem: http://www.w3schools.com/cssref/css3_pr_transform-origin.asp

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...