CODEWITHSUNDEEP
htmlcss
Octopus Designs
Octopus Designs

Reputation: 23

How can i set my text not to move but still have my css work properly

Ok so i have my tex in my div, and i set my div to move but i need my text to stay on the same place, can anyone help me with this?

<div id="nav_bar_menu">
      <div id="pocetna" ><div class="moving_background_nav_bar_img"><p id="pocetna_paragraf">POCETNA</p></div></div>

</div><!-- Menu -->

and here is my css

#nav_bar_menu {
    height: 38px;
    width: 580px;
    float: right;
    margin-left: 25px;
    margin-right: 25px;
    margin-top: 93px;
    overflow: hidden;

}
.moving_background_nav_bar_img {
    background: url(../Images/images/nav_bar_pictures_01.jpg);
    -moz-transition: top 0.7s;
    -webkit-transition: top 0.7s;
    -o-transition: top 0.7s;
    transition: top 0.7s;
    position: relative;
    height: 76px;
    top: 0;
    }
#pocetna {
    height: 38px;
    width: 131px;
    }
.moving_background_nav_bar_img:hover {
    top: -38px;
    position: relative;
    }

here is picture how it should look like https://i.sstatic.net/kw7ZN.png

if i set position fixed for text then if i scroll down it is still on its position on page... i dont want nav bar to follow me on scroll.

Upvotes: 2

Views: 1526

Answers (2)

Andy
Andy

Reputation: 71

Ok That's right the text wont move down when you scroll down. I'm sorry I released that later Anyway I tried different method but the problem when you hover over the text the ease effect will not work and when you hover over the image will work perfectly.

Hope someone will figure out what we need to do. Here is the code

CSS:

a#one {
    width:64px;
    height:64px;
    display:block;
    text-indent:-9999px; /* hide the text */
    background:url(background.png) top left;/* Do not forget to set your own image*/
}

a#one:hover {
    background-position:bottom left;
}

a#one {
    width:64px;
    height:64px;
    display:block;
    text-indent:-9999px; /* hide the text*/
    background:url(background.png) top left;
    -moz-transition:background 300ms ease-in-out;
    -webkit-transition:background 300ms ease-in-out;
    transition: background 300ms ease-in-out;
}

#two{
position:absolute;
top:25px;
left:25px;
}

HTML:

<a href ="http://google.com" id="one">Hover image</a>
<a href="http://google.com" id="two">Text</a>

Basically I made two links I hid the first one text with text-indent and made the background ease. This second one is just to show the link without scrolling up and down.

Upvotes: 0

Andy
Andy

Reputation: 71

All you need to do add the fixed positioning to the ID of the paragraph

#pocetna_paragraf{
position:fixed;
}

Upvotes: 1

Related Questions