Sunday, 15 July 2012

css3 - Menu not aligning with an image/link (CSS issue) -


I am building and though on my localhost and server, the site looks ok, I take some screenshots with browsershots And I criticize this website as shown in the screenshot (Notice on top, part of the image about us)

I'm not sure why this is happening, the page is responsive and my On localhost and server, everything looks fine E is also certainly a CSS problem because this is how to go'm finding what I see.

Menu code

  & lt; Div class = "top menu pull-right home-menu" id = "main menu" & gt; & Lt; Ul class = "nav" & gt; & Lt ;! - li & gt; & Lt; A href = "# FEATURES" & gt; Features & lt; / A & gt; & Lt; / Li - & gt; & Lt; Li & gt; & Lt; A href = "/ features" & gt; Features & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "/ plans" & gt; Pricing & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "/ demo" & gt; Demo & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "about /" & gt; About us & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt;   

CSS

  body.refend .header .top-menu {margin-top: 5px; Padding: 5px 10px; Status: Completed; Left: 50%; Margin-left: 140px; } .nav {margin-left: 0; Margin-down: 20px; List style: none; } .little-right {float: true; }    

Trying to debug it and I got this problem

See this

Use your code instead

  & lt; Ul class = "nav" & gt; & Lt; Li & gt; & Lt; A href = "/ features" & gt; Features & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "/ plans" & gt; Pricing & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "/ demo" & gt; Demo & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "about /" & gt; About us & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A class = "BTN BTN-breakthrough pull-empty login-BTN" href = "/ user / sign_in" & gt; Sign-in & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt;   

And add this CSS to your style and it will work fine

  .remend .nav li a.btn { Margin -top: 0! Important;} .frontend .nav li {line-height: 30px! Important;}    

No comments:

Post a Comment