Solved

cannot get navbar to warp when minimized html5 css3

Posted on 2014-03-05
2
326 Views
Last Modified: 2014-03-17
I have a project which calls for centering on full screen and minimized.

http://www.124marketplace.com/newsite/

The home page minimizes properly using php8 designer and in ie 9.
 
The page does not render properly in google chrome(navbar is shifted left).  I have written code in html5
and css3.

The image centers on minimize and full screen but the navbar does not wrap.

My code is attached.

I will be making my style sheet external when competed.

Please advise.

Thanks.
Isaac
testhtmltables.htm
0
Comment
Question by:TechIsaac
2 Comments
 
LVL 6

Accepted Solution

by:
Tony O'Byrne earned 500 total points
ID: 39908461
If I understand your goal correctly, I was able to get this working as desired with a few quick modifications:

#topNav li should not be floated left, and should not be left-positioned (remove the float: left; and left: 25% properties)
Add text-align: center; to the topNav ul

#topNav ul {
  list-style: none;
  margin: auto;
  padding: 0;
  text-align: center;
}

#topNav li {
    display:inline-block;
    position: relative;
}

Open in new window



I also noticed something odd in your attached file:
#header #topNav {
  position: absolute;
  left: 400px;
  top: 0px;
  width: 900px;
  height: 15px;url("../Documents and Settings/User/Local Settings/Temporary Internet Files/Content.IE5/WBD5DNMP/124Home(rotation1aa)[1].jpg")
}url("../Documents and Settings/User/Local Settings/Temporary Internet Files/Content.IE5/WBD5DNMP/124Home(rotation1aa)[1].jpg")

Open in new window


You have url values at the end there that might be causing trouble with the parsing.
0
 

Author Comment

by:TechIsaac
ID: 39936017
Suggestions worked.

Thanks,

Isaac
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Update (December 2011): Since this article was published, the things have changed for good for Android native developers. The Sequoyah Project (http://www.eclipse.org/sequoyah/) automates most of the tasks discussed in this article. You can even fin…
How to install Selenium IDE and loops for quick automated testing. Get Selenium IDE from http://seleniumhq.org Go to that link and select download selenium in the right hand columnThat will then direct you to their download page.From that page s…
This tutorial explains how to use the VisualVM tool for the Java platform application. This video goes into detail on the Threads, Sampler, and Profiler tabs.
The viewer will learn how to use NetBeans IDE 8.0 for Windows to connect to a MySQL database. Open Services Panel: Create a new connection using New Connection Wizard: Create a test database called eetutorial: Create a new test tabel called ee…

773 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question