html - issues centering text in nav bar -
I'm having problems with focusing the text in my navigation bar, I try whatever I can think of Any assistance of Lee will be welcomed.
I have my navigation bar here on HTML and CSS code. I have tried to focus on it and use other methods, but still stuck.
hTML
& lt; Div class = "content-outer" id = "top_nav" & gt; & Lt; Div class = "content-inner" & gt; & Lt; Ul & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Home & lt; / A & gt; & Lt; Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Digital & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Film & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Timeline & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Contact & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt; & Lt; / Div & gt;
CSS
. Container {width: 1060px; Background: #FFF; Padding: 50px; Margin: 0 auto; } #top_nav {status: fixed; Background: # 343642; Font-family: effects, charcoal, non-serif; } #top_nav ul {margin: 0; Padding: 0 pixel 0; List-style: none; Width: 990px; Text align: center; Hidden flurry; } #top_nav ul li {margin: 0x 56px 0 0; Padding: 0; Font-size: 1.7em; Change text: uppercase; Swim left; font-weight: bold; } #top_nav ul li a {color: # fef6e9; Text-decoration: none; Display area; } #top_nav ul li a: Hover {Color: # ed7163; Text-decoration: none; } .content {padding: 10px 0;} .content-outer {width: 100%; Swim left; Overflow: visible; } .content-outer .content-inner {width: 978px; Margin: 0 auto; Overflow: visible; Status: Relative; }
I removed extra devices; Created a nav
element; Margins: 0 Auto; Place
on ul
; Float:
li
on display: inline-block; left;
and he has it!
HTML
& lt; Nav id = "top_nav" & gt; & Lt; Ul & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Home & lt; / A & gt; & Lt; Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Digital & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Film & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Timeline & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Contact & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Neo & gt;
CSS
#top_nav {status: fixed; Background: # 343642; Font-family: effects, charcoal, non-serif; Width: 100%; } #top_nav ul {margin: 0 auto; Padding: 0 pixel 0; List-style: none; Width: 990px; Text align: center; } #top_nav ul li {margin: 0x 56px 0 0; Padding: 0; Font-size: 1.7em; Change text: uppercase; Display: Inline-block; font-weight: bold; } #top_nav ul li a {color: # fef6e9; Text-decoration: none; Display area; } #top_nav ul li a: Hover {Color: # ed7163; Text-decoration: none; }
Comments
Post a Comment