12 Replies Latest reply on Jun 4, 2010 1:34 PM by Nancy OShea

    Text Navigation links-make font big on rollover causes other links to move

    monicasID Level 1

      I have a horizontal text menu as links and want the font on a link to get bigger on rollover. This action causes the other links to move on the page because the increased font is taking up more space. How do I get the other links to stay put?

        • 1. Re: Text Navigation links-make font big on rollover causes other links to move
          Nancy OShea Adobe Community Professional & MVP

          Without a URL to your page?  No idea whatsoever.   The answer to your question is likely contained in your CSS and HTML code.  The best way to get help here is to upload your work so far and give us a link to your page.

           

          Nancy O.
          Alt-Web Design & Publishing
          Web | Graphics | Print | Media  Specialists
          http://alt-web.com/
          http://twitter.com/altweb
          http://alt-web.blogspot.com

          1 person found this helpful
          • 2. Re: Text Navigation links-make font big on rollover causes other links to move
            monicasID Level 1

            Thank you but I don't have it hosted yet. My very first page.

            • 3. Re: Text Navigation links-make font big on rollover causes other links to move
              Nancy OShea Adobe Community Professional & MVP

              Fair enough.

              Copy and paste your CSS and HTML code directly into a reply using this web forum's double blue arrows >> Syntax Highlighting > Plain.

               

              Code looks like this...
              

               

               

              Nancy O.
              Alt-Web Design & Publishing
              Web | Graphics | Print | Media  Specialists
              http://alt-web.com/
              http://twitter.com/altweb
              http://alt-web.blogspot.com

              • 4. Re: Text Navigation links-make font big on rollover causes other links to move
                monicasID Level 1


                <p class="NavBar"> <a href="NavTextLinkPages/aboutus.html">About Us</a><a href="NavTextLinkPages/aboutus.html">Contact</a>
                       <a href="NavTextLinkPages/aboutus.html">Reservations</a><a href="NavTextLinkPages/aboutus.html">Gallery</a><a    href="NavTextLinkPages/aboutus.html">Links</a></p>
                    <p class="NavBar"> </p>

                 

                 

                a:link {
                color: #c78d23;
                text-decoration: none;
                margin-right: 15px;
                margin-left: 15px;
                letter-spacing: 1px;
                }
                a:visited {
                text-decoration: none;
                color: 694a12;
                }
                a:hover {
                text-decoration: none;
                color: #ffb52c;
                float: none;
                clear: none;
                font-size: 36px;
                }
                a:active {
                text-decoration: none;
                color: #ffb52c;
                }

                • 5. Re: Text Navigation links-make font big on rollover causes other links to move
                  Nancy OShea Adobe Community Professional & MVP

                  We would need to see all your code.  Code fragments don't tell the whole story.

                   

                   

                   

                  Nancy O.

                   

                  Alt-Web Design & Publishing

                   

                  Web | Graphics | Print | Media  Specialists

                   

                  http://alt-web.com/

                   

                  http://twitter.com/altweb

                   

                  http://alt-web.blogspot.com
                  • 6. Re: Text Navigation links-make font big on rollover causes other links to move
                    monicasID Level 1

                    Thanks for your guidance on using this forum.

                     


                    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                    <html xmlns="http://www.w3.org/1999/xhtml">
                    <head>
                    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                    <title>Lights! Camera! Ocean!</title>
                    <style type="text/css">
                    <!--
                    -->
                    </style>
                    <link href="style sheets/stylesheet.css" rel="stylesheet" type="text/css" />
                    </head>

                    <body>
                    <div id ="container">
                      <div id="logowrapper"> <img src="images/Logo_LightsCameraOceanb2.jpg" width="960" height="105" alt="Logo Lights! Camera! Ocean!" />
                      </div>
                      <div id="wrapper">
                        <p class="logoaddon" id="logoaddon">Photo &amp; Video Adventure Travel by Land, Sea &amp; Air</p>
                        <p> </p>
                        <p class="NavBar"> <a href="NavTextLinkPages/aboutus.html">About Us</a><a href="NavTextLinkPages/aboutus.html">Contact</a>
                           <a href="NavTextLinkPages/aboutus.html">Reservations</a><a href="NavTextLinkPages/aboutus.html">Gallery</a><a href="NavTextLinkPages/aboutus.html">Links</a></p>
                        <p> </p>
                        <p> </p>
                       
                       
                        <p> </p>
                        <p> </p>
                        <p><img src="images/IMG_2567_tanks.jpg" alt="tanks" width="266" height="400" align="right" /></p>
                        <p> </p>
                        <p> </p>
                        <p>This is where the description of why we are here will go.#FFB52C </p>
                        <h1>Header1</h1>
                        <p>#C78D23 1</p>
                        <p> </p>
                        <h2>Header 2</h2>
                        <h3>Header 3</h3>
                        <p> </p>
                        <hr size="1" />
                        <p class="copyright" id="copyright">Copyright © 2010 Lights! Camera! Ocean! some links like top of page</p>
                      </div>
                    </div>
                    </body>
                    </html>

                    • 7. Re: Text Navigation links-make font big on rollover causes other links to move
                      Mylenium Most Valuable Participant

                      How do I get the other links to stay put?

                       

                      Not with your method, I'm afraid. You can't just pop in a bunch of links and hope for the best. Just listing them consecutively will auto-layout them and that is based on their bounding box/ hit area. Either contain them in tables or DIVs or format the individual entries so they mutually compensate which could be done with display:block and padding and margin definitions in your CSS code. Depending on the rest of your page content, this may still "jump", so properly defining a DIV hierarchy for the whole page is strongly advised.

                       

                      Mylenium

                      • 8. Re: Text Navigation links-make font big on rollover causes other links to move
                        Nancy OShea Adobe Community Professional & MVP

                        Ok. You've given us the HTML code.

                        Now give us the CSS code from your stylesheet.css file.

                         

                         

                        Nancy O.
                        Alt-Web Design & Publishing
                        Web | Graphics | Print | Media  Specialists
                        http://alt-web.com/
                        http://twitter.com/altweb
                        http://alt-web.blogspot.com

                        • 9. Re: Text Navigation links-make font big on rollover causes other links to move
                          monicasID Level 1


                          body,td,th {
                          font-family: Tahoma, Geneva, sans-serif;
                          color: #FBFDFC;
                          font-size: 16px;
                          }
                          body {
                          background-color: #252326;
                          background-image: url(../images/backgroundslicedarkblue.jpg);
                          margin-left: 0px;
                          margin-top: 0px;
                          background-repeat: repeat;
                          color: #F7F8FA;
                          font-size: 18px;
                          font-family: Tahoma, Geneva, sans-serif;
                          margin-bottom: 0px;
                          }
                          p {
                          margin-top: 0px;
                          margin-bottom: 0px;
                          }
                          h1 {
                          color: #0075a1;
                          }
                          h2 {
                          color: #5b9168;
                          }
                          h3 {
                          color: #8f2f2d;
                          }
                          a:link {
                          color: #c78d23;
                          text-decoration: none;
                          margin-right: 15px;
                          margin-left: 15px;
                          letter-spacing: 1px;
                          }
                          a:visited {
                          text-decoration: none;
                          color: #694a12;
                          }
                          a:hover {
                          text-decoration: none;
                          color: #ffb52c;
                          float: none;
                          clear: none;
                          font-size: 36px;
                          }
                          a:active {
                          text-decoration: none;
                          color: #ffb52c;
                          }
                          #wrapper {
                          background-color: #242625;
                          width: 930px;
                          margin-right: auto;
                          margin-left: auto;
                          padding: 15px;
                          margin-top: 0px;
                          color: #FEFFFF;
                          margin-bottom: 0px;
                          }
                          #logowrapper {
                          width: 960px;
                          margin-right: auto;
                          margin-left: auto;
                          padding-top: 15px;
                          padding-right: 0px;
                          padding-bottom: 0px;
                          padding-left: 0px;
                          }
                          .copyright {
                          font-size: 12px;
                          text-align: center;
                          }
                          .logoaddon {
                          font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
                          font-size: 18px;
                          font-style: normal;
                          color: #FDFDFD;
                          background-color: #013042;
                          background-position: center center;
                          text-decoration: none;
                          word-spacing: normal;
                          letter-spacing: 3px;
                          text-align: center;
                          vertical-align: middle;
                          height: auto;
                          width: 600px;
                          float: none;
                          white-space: nowrap;
                          padding-left: 0px;
                          clear: none;
                          margin-top: 0px;
                          margin-bottom: 0px;
                          margin-left: 162px;
                          border-top-style: double;
                          border-right-style: double;
                          border-bottom-style: double;
                          border-left-style: double;
                          border-top-color: #313737;
                          border-right-color: #313737;
                          border-bottom-color: #313737;
                          border-left-color: #313737;
                          }
                          .NavBar {
                          text-align: center;
                          }
                          .logolink {
                          }
                          #left_top {
                          text-align: left;
                          }

                          • 10. Re: Text Navigation links-make font big on rollover causes other links to move
                            Nancy OShea Adobe Community Professional & MVP

                            Copy and Paste this into a new, blank HTML document.

                             

                            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                            <html xmlns="http://www.w3.org/1999/xhtml">
                            <head>
                            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                            <title>Lights! Camera! Ocean!</title>
                            <style type="text/css">
                            
                            /**LAYOUT**/
                            body,td,th {
                            font: 18px Tahoma, Geneva, sans-serif;
                            color: #F7F8FA;
                            }
                            body {
                            margin:0;
                            padding:0;
                            background:#242625   url(../images/backgroundslicedarkblue.jpg) repeat;
                            }
                            #wrapper {
                            width: 960px;
                            margin: 0 auto;
                            padding: 0 15px;
                            color: #FEF;
                            border: 1px solid #5b9168; /**remove this border**/
                            }
                            #logowrapper {
                            width: 100%;
                            margin: 0 auto;
                            }
                            .copyright {
                            font-size: 12px;
                            text-align: center;
                            }
                            .logoaddon {
                            text-align: center;
                            width: 700px;
                            margin: 0 auto;
                            border: 8px double #313737;
                            font: 18px "Palatino Linotype", "Book Antiqua", Palatino, serif;
                            color: #FDFDFD;
                            background-color: #013042;
                            letter-spacing: 3px;
                            }
                            
                            /**RE-USABLE CLASSES**/
                            
                            /**floats & clearing**/
                            .floatRight, .floatLeft {
                            width: 300px; /**adjust as needed**/ 
                            padding:10px; 
                            border: 1px dotted #CCFF00; /**optional**/
                            }
                            .floatLeft {float:left;}
                            .floatRight {float:right}
                            .clearing {clear:both; height:1px; width: 100%}
                            
                            /**text-align**/
                            .left {text-align:left}
                            .center {text-align:center}
                            .right {text-align:right}
                            
                            /**TOP NAVBAR**/
                            #navbar {
                            width: 100%; 
                            margin:0 auto; 
                            text-align:center; 
                            padding: 10px; /**adjust as needed**/
                            font: bold 20px Verdana, Arial, Helvetica, sans-serif
                            }
                            #navbar li {
                            list-style: none;
                            margin: 0;
                            display: inline;
                            }
                            #navbar li a {
                            padding: 0.75em; /**space between items**/
                            text-decoration: none;
                            }
                            #navbar li a:link { color: #C78D23; }
                            #navbar li a:visited { color: #694A12; }
                            #navbar li a:hover, #navbar li a.current {
                            color: #FFB52C;
                            text-decoration:underline}
                            /**end top navbar**/
                            
                            /**GENERAL LINKS**/
                            a {text-decoration:none}
                            a:link {color: #C78D23;}
                            a:visited {color: #694A12;}
                            a:hover, a:active, a:focus {color: #FFB52C; text-decoration:underline;}
                            
                            /**GENERAL TEXT STYLES**/
                            p {color:#FFF; line-height: 1.5}
                            h1 {color: #0075a1;}
                            h2 {color: #5b9168;}
                            h3 {color: #8f2f2d;}
                            
                            </style>
                            </head>
                            
                            <body>
                            <div id="wrapper">
                            <div id="logowrapper"> <img src="images/Logo_LightsCameraOceanb2.jpg" width="960" height="105" alt="Logo Lights! Camera! Ocean!" />
                            <!--end logowrapper --></div>
                            
                            <p class="logoaddon" id="logoaddon">Photo &amp; Video Adventure Travel by Land, Sea &amp; Air</p>
                            
                            <div id="navbar">
                            <ul>
                            <li><a href="NavTextLinkPages/aboutus.html">About Us</a></li><li><a href="NavTextLinkPages/aboutus.html">Contact</a></li> 
                            <li><a href="NavTextLinkPages/aboutus.html">Reservations</a></li>
                            <li><a href="NavTextLinkPages/aboutus.html">Gallery</a></li>
                            <li><a href="NavTextLinkPages/aboutus.html">Links</a></li>
                            </ul>
                            <!--end top navbar -->
                            </div>
                            
                            <div class="floatRight">
                            <p class="center">
                            <img src="images/IMG_2567_tanks.jpg" alt="tanks" width="266" height="400" /></p>
                            <!--end floatRight --></div>
                            
                            <p>This is where the description of why we are here will go.#FFB52C </p>
                            <h1>Header1</h1>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a eros ipsum; vel pulvinar lectus. Nunc tincidunt facilisis nibh sed semper! Suspendisse eu auctor diam. Nunc et eros eu leo cursus lacinia. Etiam at nunc diam, gravida hendrerit nibh. Nulla facilisi. Duis vel cursus ante. Integer vulputate viverra quam, quis mollis erat rhoncus vel? Fusce quis lorem lorem? Phasellus commodo, mi vel imperdiet accumsan, augue velit congue felis, sed dignissim odio libero non elit. Nunc quis mauris mi, sed ornare elit! Ut sem turpis, pellentesque vitae molestie non, mattis eu dui. Morbi eget justo turpis. 
                            </p>
                            <p>#C78D23 1</p>
                            <p>Proin nec tellus in sapien ullamcorper feugiat eget aliquet diam. Pellentesque pellentesque risus at ante cursus sagittis. Praesent ut ligula magna. Mauris sit amet dui ut augue consectetur rutrum et eget mi. Nulla iaculis ante urna. Phasellus suscipit euismod justo, ac interdum nunc laoreet ut.</p>
                            <h2>Header 2</h2>
                            <p>Proin nec tellus in sapien ullamcorper feugiat eget aliquet diam. Pellentesque pellentesque risus at ante cursus sagittis. Praesent ut ligula magna. Mauris sit amet dui ut augue consectetur rutrum et eget mi. Nulla iaculis ante urna. Phasellus suscipit euismod justo, ac interdum nunc laoreet ut.</p>
                            <h3>Header 3</h3>
                            <p>Proin nec tellus in sapien ullamcorper feugiat eget aliquet diam. Pellentesque pellentesque risus at ante cursus sagittis. Praesent ut ligula magna. Mauris sit amet dui ut augue consectetur rutrum et eget mi. Nulla iaculis ante urna. Phasellus suscipit euismod justo, ac interdum nunc laoreet ut.</p>
                            <!--IMPORTANT! clear floats after they are no longer needed with a br hr or p clearing -->
                            <hr class="clearing" />
                            
                            <p class="copyright" id="copyright">Copyright © 2010 Lights! Camera! Ocean! 
                            <a href="#">some link</a> | 
                            <a href="#">some link</a> | 
                            <a href="#">some link</a>
                            </p>
                            <!--end wrapper --></div>
                            </body>
                            </html>
                            

                             

                             

                            Nancy O.
                            Alt-Web Design & Publishing
                            Web | Graphics | Print | Media  Specialists
                            http://alt-web.com/
                            http://twitter.com/altweb
                            http://alt-web.blogspot.com

                            1 person found this helpful
                            • 11. Re: Text Navigation links-make font big on rollover causes other links to move
                              monicasID Level 1

                              Wow! Thanks for straightening me out. I'll have study what you did and learn, learn, learn.

                              • 12. Re: Text Navigation links-make font big on rollover causes other links to move
                                Nancy OShea Adobe Community Professional & MVP

                                No prob.  Have fun learning! 

                                 

                                Nancy O.