html - Finally got my navbar to center...now my effects won't work -
So I started floating my li item and used the property's display: inline; But I could not reach the center. Then I found a solution on the stack exchange using the extracting flax and using text-alignment and display: inline-block but now my effect will not work! Is it not possible to focus on the menu and still when the list links roam while hovering? Or is it one or the other? Thanks for your help!
ul {text-align: center; } Li {List-style: none; Margin-right: 1 em; Font-family: 'special elitism', cursor; Font-size: 25px; Padding: 12px; Display: inline-block; } Ltd a {color: # D0903C; Background color: # 7A4909; Text-decoration: none; }. Left a: Hover {color: # 7A4909; Background color: # D0903C; -WebKit-transform: (-10 degree) scale (1.2); -MOZ-TRANSFORM: Rotate (-10 degree) scale (1.2); -o-transform: rotate (-10 degree) scale (1.2); Change text: uppercase; }. Correct: hover {color: # 7 A4909; Background color: # D0903C; -Widkit-Conversion: Rotate (10 degree) scale (1.2); -MOZ-TRANSFORM: Rotate (10 degrees) scale (1.2); -o-transform: rotate (10 degree) scale (1.2); Change text: uppercase; }
& lt; Ul class = "navbar" & gt; & Lt; Li class = "left" & gt; & Lt; A href = "home.html" & gt; Home & lt; / A & gt; & Lt; / Li & gt; & Lt; Li class = "right" & gt; & Lt; A href = "contact.html" & gt; Contact me & lt; / A & gt; & Lt; / Li & gt; & Lt; Li class = "left" & gt; & Lt; A href = "blog.html" & gt; Blogs & lt; / A & gt; & Lt; / Li & gt; & Lt; Li class = "right" & gt; & Lt; A href = "funny html" & gt; Funny & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt;
For you inline blocks Anchor element must be set.
ul {text-align: center; } Li {List-style: none; Margin-right: 1 em; Font-family: 'special elitism', cursor; Font-size: 25px; Padding: 12px; Display: inline-block; } Li Ek {Color: # D0903C; Background color: # 7A4909; Text-decoration: none; Display: Inline-block; }. Left a: Hover {color: # 7A4909; Background color: # D0903C; -WebKit-transform: (-10 degree) scale (1.2); -MOZ-TRANSFORM: Rotate (-10 degree) scale (1.2); -o-transform: rotate (-10 degree) scale (1.2); Change text: uppercase; }. Correct: hover {color: # 7 A4909; Background color: # D0903C; -Widkit-Conversion: Rotate (10 degree) scale (1.2); -MOZ-TRANSFORM: Rotate (10 degrees) scale (1.2); -o-transform: rotate (10 degree) scale (1.2); Change text: uppercase; }
& lt; Ul class = "navbar" & gt; & Lt; Li class = "left" & gt; & Lt; A href = "home.html" & gt; Home & lt; / A & gt; & Lt; / Li & gt; & Lt; Li class = "right" & gt; & Lt; A href = "contact.html" & gt; Contact me & lt; / A & gt; & Lt; / Li & gt; & Lt; Li class = "left" & gt; & Lt; A href = "blog.html" & gt; Blogs & lt; / A & gt; & Lt; / Li & gt; & Lt; Li class = "right" & gt; & Lt; A href = "funny html" & gt; Funny & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt;
Comments
Post a Comment