Text pop-out problem


#1


ex 12

i have set parameter a so that when e cross my mouse over the text, it will go "bold" and will increase in size. The problem is that when a hover over one of the list elements, the other ones move to. i want them to stay put, and only the text under my mouse to suffer modifications

css:

div {
    border-radius: 5px;
}

#header {
    z-index:1;
    position: fixed;
    background-color: #6495ED;
    width: 98%;
    height: 30px;
    margin-top: -8px;
    margin-left: 5px;
}

.left {
    margin-top: 28px;
    position: relative;
    background-color: #FA8072;
    width: 18%;
    height:150%;
    float: left;
}

.right {
    margin-top: 28px;
    position: relative;
    background-color: #FFE4B5;
    width: 80%;
    height:150%;
    float: right;
}

#footer {
    position: relative;
    background-color:#B0E0E6;
    height: 8%;
    clear:both;
}

h3 {
    position: inline-block;
    margin-top: 4px;
    font-family: Helvetica;
    font-style: italic;
    color: #F0F8FF;
}

.butoane {
    margin-top: -40px;  
}

li {
    display: inline;
    margin-left: 350px;
}

a {
    text-decoration: none;
    color: #2F4F4F;
}

a:hover {
    font-weight: bold;
    font-size: 110%;
}

p {
    color: #FFFAFA;
    text-align: center;
}

html:
<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title></title>
	</head>
	<body style="background-color: #F0FFFF;">
	    <div id="header">
	        <h3>Timotei Dedu</h3>
	           <div class="butoane"> 
	               <ul>
	                  <li>
	                      <a href="www.site.com">Acasa</a>
	                  </li>
	                  <li>
	                      <a href="www.site.com">Meniu</a>
	                  </li>
	                  <li>
	                      <a href="www.site.com">Cautare</a>
	                  </li>
	               </ul>
	           </div>    
	    </div>
	    <div class="left">
	                 <p>bla bla bla bla bla bla bla</p>
	    </div>
	    <div class="bod">
	    </div>
	    <div class="right">
	    </div>
	    <div id="footer">
	    </div>
	</body>
</html>



#2

The reason why you see a move is because when you hover then the text gets bigger thus the margin-left moves to add changes. Hope it makes sense ..

Let me rephrase: when you hover the one tab text gets bigger so the spacing from one to the other changes as according to margin left thus you see the changes

Is this from a particular lesson ? Please specify and URL


#3

How do i fix it?
În Vin, 8 iul. 2016 la 07:35 Zainab Rawat codecademy@discoursemail.com a
scris:


#4

If you remove margin, but then the tabs would be next to each other


#5

Yes, but i want the to keep the same spacing between them. Is there any
solution?
În Vin, 8 iul. 2016 la 13:57 Zainab Rawat codecademy@discoursemail.com a
scris:


#6

Not that I know of I'm afraid


#7

Add line-height: 0 to the a selector:

a {
  text-decoration: none;
  color: #2F4F4F;
  line-height: 0;
}

#8

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.