?
Solved

cannot get navbar to warp when minimized html5 css3

Posted on 2014-03-05
2
Medium Priority
?
346 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 2000 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

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

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

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 column That will then direct you to their download page. From that p…
I'd like to talk about something that is near and dear to my heart: build systems. Without them, building software is all about compiling locally, with software versions everywhere. It can be a mess. Today we are going to discuss building a small di…
This tutorial will introduce the viewer to VisualVM for the Java platform application. This video explains an example program and covers the Overview, Monitor, and Heap Dump tabs.
The viewer will learn how to synchronize PHP projects with a remote server in NetBeans IDE 8.0 for Windows.
Suggested Courses
Course of the Month15 days, 6 hours left to enroll

840 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