Solved

cannot get navbar to warp when minimized html5 css3

Posted on 2014-03-05
2
329 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

In our object-oriented world the class is a minimal unit, a brick for constructing our applications. It is an abstraction and we know well how to use it. In well-designed software we are not usually interested in knowing how objects look in memory. …
Jaspersoft Studio is a plugin for Eclipse that lets you create reports from a datasource.  In this article, we'll go over creating a report from a default template and setting up a datasource that connects to your database.
THe viewer will learn how to use NetBeans IDE 8.0 for Windows to perform CRUD operations on a MySql database.
The viewer will learn how to use and create keystrokes in Netbeans IDE 8.0 for Windows.

726 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