css - prevent centered text from moving when sibling is hidden/displayed -


We have a div that acts as a horizontal title bar with a title in between "settings There is also a left supporting link named "" that appears only when the mouse is on the title bar. The problem occurs when the settings link is displayed, the title moves.

An example / w follows jQuery - How can we keep the headings of watches stable, even if the settings are displayed or not ?

  & lt; Script type = "text / javascript"> $ (function () {var settings = $ (".settings"); $ (". Titlebar") .mouseover (function () {Settings.css ("display", "inline ");}) .mouseout (function () {settings.css (" display "," none ");});}); & Lt; / Script> & lt; Style type = "text / css"> .titlebar {text-align: center; Width: 300px;} .know {float: left;} .settings {float: left; Display: None;} Title {margin-right: 10px;} & lt; / Style> ... & lt; Div class = "titlebar"> & lt; Img class = "icon" src = "icon.png"> & lt; / Img> & lt; One class = "settings"> settings & lt; / A> & lt; One class = "title"> watches & lt; / A> & lt; / Div>  

Try to use the full position like this:

  & lt; Style type = "text / css" & gt; .titlebar {text-align: center; Width: 300px; Status: Relative; } .inon {float: left;} .settings {display: none; Status: Completed; Left: 0; }. Title {margin-right: 10px;} & lt; / Style & gt;  

Comments

Popular posts from this blog

oracle - The fastest way to check if some records in a database table? -

php - multilevel menu with multilevel array -

jQuery UI: Datepicker month format -