登录 | 注册 | FAQ
Anonymous

Horizontal Navbar Problem

+ 发表回复

4 篇帖子 分页: 1 / 1


Horizontal Navbar Problem

burkster » 周六 10月 02, 2010 9:58 pm

Greetings! Thanks for the great site/info! I had basic knowledge of html, but went thru both tutorials anyway.

With what I learned, I created a horizontal navbar from an unordered list. Here is the html:

<div id="list-nav">
<ul>
<li><a href="library/PrivateTutoring">Private Tutoring</a></li>
<li><a href="library/WhyGO">Why GO to a Tutor?</a></li>
<li><a href="library/HoursLocation">Hours and Location</a></li>
<li><a href="library/Rates">Rates</a></li>
<li><a href="library/FreeConsultation">Free Consultation</a></li>
<li><a href="library/FAQ">FAQ</a></li>
<li><a href="library/MeetTutor">Meet The Tutor</a></li>
<li><a href="library/MathVocab">Math Has Vocabulary??</a></li>
</ul>
</div>

The CSS I apply to it is at the bottom of this post.

I tried to attach a document to show the problem but .docx and .pdf are not allowed. Soooo... the problem is that when the browser window is resized, the navbar changes from 1 row to 2 and moves the image and text around on the page. Where the image/text move to depends on which navbar items is being selected. Also, the 2nd row has lost some of it's formatting.

I want the navbar to keep it's formatting (even if it is forced to be 2 rows) and I want the image to stay top left, under the navbar even if the browser window is resized. I've used float in the <p> to make the image float left and the text to stay to the right of the image.

Please help. Thanks!!

-----------------------
/* CSS Stylesheet */

div#list-nav
{
height: 30px;
width: 100%;
border-top: solid #000000 2px;
border-right: solid #000000 2px;
border-bottom: solid #000000 2px;
border-left: solid #000000 2px;
background-color:#FFFFFF;
}

div#list-nav ul
{
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size:medium;
color:#000000;
line-height: 30px;
white-space: nowrap;
}

div#list-nav li
{
list-style-type: none;
display: inline;
float: left;
border-right: solid #000 2px;
}

div#list-nav li a
{
text-decoration: none;
text-align:left;
padding: 7px 10px;
color:#264875;
}

div#list-nav li a
{
a:link
color:#FFFFFF
}

a:hover
{
font-weight: bold;
color#264875;
background-color:#CCCCCC;
border-top: solid #000 2px;
border-bottom: solid #000 2px;
}

a:visited
{
color:#993300;
}
头像

burkster

  • 帖子: 2
  • 注册: 周四 9月 30, 2010 4:27 pm

Re: Horizontal Navbar Problem

HTML.net » 周四 10月 07, 2010 8:25 am

Hi burkster,

Did you find a solution? Otherwise, please upload a picture of your navbar (pdf is now allowed).

- Andreas, HTML.net
头像

HTML.net
Site Admin

  • 帖子: 1194
  • 注册: 周六 9月 11, 2010 11:24 am
--
Show some love for HTML.net on Twitter, Facebook and Google: Use the buttons on top of all pages.

Re: Horizontal Navbar Problem

jaantjezensis » 周三 11月 03, 2010 11:47 am

Try this
#nav ul
{ float: left;
list-style: none;
background: #000000;
width: 100%;
padding: 0;
margin: 0 0 0 0px;
height: 32px;
display: inline;
text-transform: none;
text-align: center;
}
#nav ul li
{
display: inline;
margin: 0;
padding: 0; }
#nav ul li a { display: inline;
float: center;
width: auto;
margin: 0;
padding: 0 20px;
border-top: 2px solid #ffffff;
/*border-right: 1px solid #ffffff; */
/*border-left: 1px solid #ffffff; */
border-bottom: 1px solid #000000;
color: #ffffff;
font: bold 12px/52px Arial, Geneva, sans-serif;
text-transform: none;
text-decoration: none;
letter-spacing: 1px;
}
#nav ul li a:hover,
#nav ul li a:active
{
color: #fff;
background-color: #fba50f;
font: bold; }
头像

jaantjezensis

  • 帖子: 4
  • 注册: 周三 11月 03, 2010 4:29 am

Re: Horizontal Navbar Problem

Jacintarayenz » 周二 12月 28, 2010 7:35 am

Try this code
<html>
<head>
<style type="text/css">
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#7A991A;
}

</style>
</head>

<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
头像

Jacintarayenz

  • 帖子: 5
  • 注册: 周二 12月 28, 2010 5:22 am


+ 发表回复

分页: 1 / 1