WordPress.org

1. carisima@alaska.net
   Member
   Posted 3 years ago #

   OK, this is the last question I have before this site is done - but can anyone see how to make my navigation bar fit the site? Since it takes up different amounts of space in IE, Firefox and Safari, messing with the minimum values doesn't work. I'm sure there is a trick, but I don't know it. Any help would be highly appreciated. you can see it a mirandaweiss.com.

2. lhoylhoy
   Member
   Posted 3 years ago #

   are you sure you didn't fixed width your nav bar?try experimenting, set your header element's padding to zero.

3. lhoylhoy
   Member
   Posted 3 years ago #

   are you sure you didn't fixed width your nav bar?try experimenting, set your header element's paddings and margins to zero. try using auto as well to center some divs. or paste ur css code here

4. carisima@alaska.net
   Member
   Posted 3 years ago #

   Here's the code - I started with a theme and modified it quite a bit. What about putting a background image in that is the same height as the nav bar? Would that do it? How can I tell exactly what height (I think the font height is part of the calculation??)

   /*
   Theme Name: Weiss

   */

   /* Begin Typography & Colors */
   body {background: url(images/dropshadow.jpg) top center repeat-y;
   font-size: 62.5%; /* Resets 1em to 10px */
   font-family: Georgia, 'Times New Roman', Serif;
   text-align: center;
   background-color: #7F7A7A;
   }

   a {color: rgb(60,60,60); text-decoration: none; border-bottom: 1px dotted;}
   a:visited {color: rgb(142,143,137);}
   a:hover {text-decoration: none; color: rgb(60,60,60);}

   a.image {border-bottom: 0;}

   #page {
   text-align: left;
   }

   /*this controls the header link text, placement*/
   #header a {z-index: 100;
   background: #F7F9E3;
   margin-top: 0px;
   border-top: 0px;
   border-left: 1px solid rgb(221,217,215);
   border-bottom: 1px solid rgb(221,217,215);
   font-size: 1em;
   font-weight: bold;
   font-family: Galliard, Georgia, 'Times New Roman', Serif;
   letter-spacing: 0.7px;}

   /*header text removed, replaced with image, so hover feature removed*/
   #header a:hover {text-decoration: italic;
   color: rgb(41,41,41);}

   #content {
   font-size: 1.2em;
   line-height: 1.8em;
   }

   .postmetadata, .commentmetadata, #footer {
   letter-spacing: 1px;
   font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
   text-transform: uppercase;
   font-size: 0.75em;
   font-weight: normal;
   }

   .commentmetadata {font-size: 0.8em;}

   .alt {background-color: rgb(250,249,248);
   border-top: 1px solid rgb(241,239,237);
   border-bottom: 1px solid rgb(241,239,237);
   }

   #footer {
   font-size: 0.9em;
   text-align: center;
   color: (139,139,139);
   }

   #footer a, #footer a:visited {color: rgb(139,139,139); text-decoration: none; border-bottom: none;}
   #footer a:hover {color: rgb(139,139,139);}

   small, .navigation {
   color: rgb(41,41,41);
   font-family: Arial, Helvetica, Sans-Serif;
   font-size: 0.9em;
   line-height: 1.5em;
   }

   .navigation a {border-bottom: none;
   }

   h1, h2, h3, h4 {
   font-family: Georgia, 'Times New Roman', Serif;
   font-weight: normal;
   }

   h1 {
   font-size: 3.8em;
   line-height: 0.9em;
   }

   #header h1 a {
   color: rgb(200,100,40);
   letter-spacing: -3px;
   font-family: Galliard, Georgia, 'Times New Roman', Serif;
   font-weight: normal;
   text-align: center;
   text-transform: lowercase;
   border: none;
   }

   h2 {
   font-size: 2.1em;
   }

   h2 a {color: rgb(80,80,80);
   letter-spacing: -1px;
   line-height: 1.2em;
   text-decoration: none;
   border-bottom: none;
   }

   h2 a:visited {color: rgb(120,120,120);}
   h2 a:hover {color: rgb(0,0,0);}

   h3 {
   font-size: 1.3em;
   }

   h4, li h2 {line-height: 1.5em;
   letter-spacing: 1px;
   font-size: 1em;
   font-weight: normal;
   font-family: 'Trebuchet MS', Arial, Helvetica, Sans-Serif;
   }

   .entry p a:visited {
   color: #b85b5a;
   }

   .commentlist li, #commentform input, #commentform textarea {
   font: 0.9em Georgia, 'Times New Roman', Serif;
   }

   .commentlist li {
   font-weight: bold;
   }

   .commentlist cite, .commentlist cite a {
   font-weight: bold;
   font-style: normal;
   font-size: 1.1em;
   }

   .commentlist p {
   font-weight: normal;
   line-height: 1.5em;
   text-transform: none;
   }

   #commentform p {
   font-family: 'Trebuchet MS', Arial, Helvetica, Sans-Serif;
   }

   #description {
   text-align: left;
   background: white;
   color: grey;
   font-size: 1.1em;
   font-family: Tahoma, Arial, Helvetica, Serif;
   line-height: 1.8em;
   }

   #sidebar {
   color: grey;
   font-size: 1.1em;
   font-family: Tahoma, Arial, Helvetica, Serif;
   line-height: 1.8em;
   text-align: left;
   padding: 0;

   }

   #sidebar a {font-size: 1.2em; color: rgb(60,69,67); text-decoration: none; line-height: 1.7; border-bottom: none;}
   #sidebar a:hover {color: rgb(90,99,97); text-decoration: underline;}

   #sidebar h2 {color: white;
   font-family: 'Trebuchet MS', Arial, Helvetica, Sans-Serif;
   font-weight: bold;
   letter-spacing: 2px;
   line-height: 30px;
   text-transform: uppercase;
   font-size: 1.1em;
   }
   dd.wp-caption-dd { margin-left: 0; }

   #searchsubmit, #sidebarsubmit, #commentform #submit {
   font: normal 0.8em 'Trebuchet MS', Arial, Helvetica, Sans-Serif;
   letter-spacing: 1px;
   text-transform: uppercase;
   }

   #sidebarsubmit {
   font-size: 1em;
   }

   .nocomments, .postmetadata, strike, #footer {
   color: rgb(168,164,162);
   }

   code {
   font: 1.1em 'Courier New', Courier, Fixed;
   }

   acronym, abbr, span.caps
   {
   font-size: 0.9em;
   letter-spacing: .07em;
   }

   #wp-calendar #prev a {
   font-size: 9pt;
   }

   #wp-calendar a {
   text-decoration: none;
   }

   #wp-calendar caption {
   font: bold 1.3em 'Trebuchet MS', Arial, Helvetica, Sans-Serif;
   text-align: center;
   }

   #wp-calendar th {
   font-style: normal;
   text-transform: capitalize;
   }

   #pagestripe {background: rgb(221,217,215); width: 778px; height: 0px; clear: both;
   }

   #pageblock {display: block; background: rgb(221,217,215); width: 265px; height: 0px; float: right; line-height: 0;
   }
   /* End Typography & Colors */

   /* Begin Structure */
   body {
   margin: 0;
   padding: 0;
   }

   #page {
   margin: 0 auto;
   width: 780px;
   }

   .dropcaps {
   font-family: Georgia, Times New Roman, Serif;
   font-weight:bold;
   float:left;
   line-height:40px;
   font-size:40px;
   padding: 3px 3px 0 0;
   }

   #header {
   height: 112px;
   width: 778px;

   }

   #content {
   width: 350px;
   margin: 0;
   padding: 50px 70px;
   float: left;
   clear: both;
   }

   #content.single {
   width: 670px;
   margin: 0;
   padding: 50px 70px;
   }

   #header ul, #header li {
   display: inline;
   list-style-type: none;
   list-style-image: none;
   width: 778px;
   background: #F7F9E3;

   }
   #header ul { background:none }

   /*header links*/
   #header li a {display: block;
   minimum width: 30px;
   padding: 14px 28px 12px 12px;
   float: left;
   color: gray;
   background: #F7F9E3;
   }

   .post {
   margin: 0 0 20px 0;
   text-align: left;
   }

   .postmetadata .alt {
   margin: 25px 0 0 0;
   }

   #footer {
   width: 778px;
   clear: both;
   color: #F7F9E3
   }

   #footer.single {
   width: 780px;
   }

   #footer p {
   margin: 0;
   padding: 20px 0;
   text-align: center;
   }

   div.columnleft {
   float: left;
   width: 285px;
   padding-right: 33px;
   }

   div.columnright {
   float: right;
   width: 285px;
   padding-left: 34px;
   }
   /* End Structure */

   /* Begin Headers */
   #header h1 {background: #F7F9E3 url(images/Header-Digot.jpg) top left no-repeat;
   display: block;
   width:779px;
   height: 100px;
   float: left;
   margin: 0px;
   padding: 0px;
   }

   #header h1 a {color: #F7F9E3;
   display: block;
   width: 239px;
   height: 50px;
   margin: 20px 0 0 0;
   padding: 37px 15px 0 15px;
   }

   h2, #sidebar h2 {
   margin: 0;}

   #sidebar h2 {
   padding: 0;
   }

   h3 {
   margin: 30px 0 0 0;
   padding: 0;
   }

   h3.comments {
   margin: 40px auto 20px auto;
   padding: 0;
   }

   h4 {
   margin: 10px 0 0 0;
   padding: 10px 0 0 0;
   }
   /* End Headers */

   /* Begin Images */

   p img {
   padding: 0;
   max-width: 100%;
   }

   img.centered {
   display: block;
   margin-left: auto;
   margin-right: auto;
   }

   img.alignright {
   margin: 0 0 2px 7px;
   display: inline;
   }

   img.alignleft {
   margin: 0 7px 2px 0;
   display: inline;
   }

   .alignright {
   float: right;
   padding-left: 20px;
   padding-bottom: 20px;
   }

   .alignleft {
   float: left;
   padding-right: 20px;
   padding-bottom: 20px;
   }
   /* End Images */

   /* Begin Lists */

   ul, ol {
   margin: 0px 0 25px 0;
   padding: 0 0 0 30px;
   }

   ol {
   padding: 0 0 0 35px;
   }

   ul ul {
   margin: 5px 0 20px 20px;
   }

   ol li {
   margin: 0;
   padding: 0;
   }

   .postmetadata ul, .postmetadata li {
   display: inline;
   list-style-type: none;
   list-style-image: none;
   }

   #sidebar ul, #sidebar ul ol {
   margin: 0;
   padding: 0;
   list-style: none;
   }

   #sidebar ul li {
   list-style-type: none;
   list-style-image: none;
   margin-bottom: 15px;
   line-height: 1.7;
   }

   #sidebar ul p, #sidebar ul select {
   margin: 10px 0 4px;
   }

   #sidebar ul ul, #sidebar ul ul ul {
   margin: 0;
   }

   ol li, #sidebar ul ol li {
   list-style: decimal outside;
   }

   #sidebar ul ul li, #sidebar ul ol li {
   margin: 0;
   padding: 0;
   }
   /* End Entry Lists */

   /* Begin Form Elements */
   input#s, input#author, input#email, input#url, textarea, #sidebar #searchform #s {border: 1px solid rgb(201,197,195);}

   #searchform {
   margin: 0 auto;
   padding: 20px 0 20px 0;
   text-align: right;
   }

   #sidebar #searchform #s {
   width: 125px;
   padding: 3px 0;
   }

   #searchsubmit, #sidebarsubmit {
   margin-left: 2px;
   }

   .entry form { /* This is mainly for password protected posts, makes them look better. */
   text-align:center;
   }

   select {
   width: 130px;
   }

   #commentform {
   padding: 0;
   }

   #commentform input {
   width: 170px;
   margin: 5px 5px 1px 0;
   padding: 2px;
   }

   #commentform textarea {
   width: 98%;
   margin: 5px 0 0 0;
   padding: 0px;
   }

   #commentform #submit {
   margin: 2px 0 0 0;
   float: right;
   }
   /* End Form Elements */

   /* Begin Comments*/
   .alt {
   margin: 20px 0 0 0;
   padding: 10px;
   }

   .commentlist {
   padding: 0;
   text-align: left;
   }

   .commentlist li {
   margin: 15px 0 3px 0;
   padding: 10px;
   list-style: none;
   }

   .commentlist p {
   margin: 0;
   padding: 10px 0 0 0;
   }

   #commentform p {
   margin: 5px 0;
   }

   .nocomments {
   text-align: center;
   margin: 0;
   padding: 0;
   }

   .commentmetadata {
   margin: 0;
   display: block;
   }
   /* End Comments */

   /* Begin Sidebar */
   #description, #sidebar {
   float: right;
   padding: 50px 0 0 0;
   width: 220px;
   }

   #sidebar form {
   margin: 0;
   padding-bottom: 10px;
   float: left
   }

   /* End Sidebar */

   /* Begin Calendar */
   #wp-calendar {
   empty-cells: show;
   margin: 10px auto 0;
   width: 155px;
   }

   #wp-calendar #next a {
   padding-right: 10px;
   text-align: right;
   }

   #wp-calendar #prev a {
   padding-left: 10px;
   text-align: left;
   }

   #wp-calendar a {
   display: block;
   }

   #wp-calendar caption {
   text-align: center;
   width: 100%;
   }

   #wp-calendar td {
   padding: 3px 0;
   text-align: center;
   }

   #wp-calendar td.pad:hover { /* Doesn't work in IE */
   background-color: #fff; }
   /* End Calendar */

   /* Begin Various Tags & Classes */
   acronym, abbr, span.caps {
   cursor: help;
   }

   acronym, abbr {
   border-bottom: 1px dotted;
   }

   blockquote, blockquote cite {
   margin: 0px 15px 0 0;
   padding: 20px 0px 20px 33px;
   background: url(images/quote-arial.gif) 0px 15px no-repeat;
   color: rgb(110,106,103);
   font-style: italic;
   font-size: 1.3em;}

   blockquote cite {
   display: block;
   }

   blockquote p {
   margin: 0;
   padding: 0;
   }

   .center {
   text-align: center;
   }

   hr {
   display: none;
   }

   a img {
   border: none;
   }

   .navigation {
   display: block;
   width: 100%;
   text-align: center;
   padding: 10px 0 40px 0;
   clear: both;
   border-bottom: none;
   margin:0;

   }

   .break {margin: 0; padding: 0; clear: both; line-height: 0px; width: 100%; visibility: hidden;}

   /* End Various Tags & Classes*/

5. lhoylhoy
   Member
   Posted 3 years ago #

   add this to your header style at the top of your #header a {

   #header {background:#F7F9E3;
   text-align:center;}

   that should fill white space and center your list.

6. carisima@alaska.net
   Member
   Posted 3 years ago #

   That didn't do it - I tried putting it in several different places and got no change. does the fact that it is a php-generated list impact things?

7. lhoylhoy
   Member
   Posted 3 years ago #

   no, php just makes it dynamic, what you input in your dashboard reflects in your themes, it should have nothing to do with style.

   you don't put it inside #header a {} you paste it above and its independent

   try removing px in your padding/margin :0px; at the #header

8. carisima@alaska.net
   Member
   Posted 3 years ago #

   Still no go - it's like none of these places have any impact on the nav bar - I tried the background color in several different places to see if it would change things, and no dice. Here's what I think is the relevant css at this point - my new ads are generally justified left.

   /* Begin Structure */
   body {
   margin: 0;
   padding: 0;
   }

   #page {
   margin: 0 auto;
   width: 780px;
   }

   .dropcaps {
   font-family: Georgia, Times New Roman, Serif;
   font-weight:bold;
   float:left;
   line-height:40px;
   font-size:40px;
   padding: 3px 3px 0 0;
   }

   #header { background: #F7F9E3;
   text-align: center;
   height: 112px;
   width: 778px;
   padding: 0px;
   margin: 0px;
   }

   #content {
   width: 350px;
   margin: 0;
   padding: 50px 70px;
   float: left;
   clear: both;
   }

   #content.single {
   width: 670px;
   margin: 0;
   padding: 50px 70px;
   }

   #header ul, #header li {
   display: inline;
   list-style-type: none;
   list-style-image: none;
   width: 778px;
   background: #F7F9E3;
   padding: 0px;
   margin: 0px;

   }
   #header ul { background: none }

   /*header links*/
   #header li a {display: block;
   minimum width: 30px;
   padding: 14px 28px 12px 12px;
   float: left;
   color: gray;
   background: #F7F9E3;
   }

   .post {
   margin: 0 0 20px 0;
   text-align: left;
   }

   .postmetadata .alt {
   margin: 25px 0 0 0;
   }

   #footer {
   width: 778px;
   clear: both;
   color: #F7F9E3
   }

   #footer.single {
   width: 780px;
   }

   #footer p {
   margin: 0;
   padding: 20px 0;
   text-align: center;
   }

   div.columnleft {
   float: left;
   width: 285px;
   padding-right: 33px;
   }

   div.columnright {
   float: right;
   width: 285px;
   padding-left: 34px;
   }
   /* End Structure */

   /* Begin Headers */
   #header h1 {background: #F7F9E3 url(images/Header-Digot.jpg) top left no-repeat;
   display: block;
   width:779px;
   height: 100px;
   float: left;
   margin: 0px;
   padding: 0px;
   }

   #header h1 a {color: #F7F9E3;
   display: block;
   width: 239px;
   height: 50px;
   margin: 20px 0 0 0;
   padding: 37px 15px 0 15px;
   }

   h2, #sidebar h2 {
   margin: 0;}

   #sidebar h2 {
   padding: 0;
   }

   h3 {
   margin: 30px 0 0 0;
   padding: 0;
   }

   h3.comments {
   margin: 40px auto 20px auto;
   padding: 0;
   }

   h4 {
   margin: 10px 0 0 0;
   padding: 10px 0 0 0;
   }
   /* End Headers */

9. lhoylhoy
   Member
   Posted 3 years ago #

   your problem's so simple and yet so hard to solve hehe!

   last resort, try to add a background color to your #header ul then try to fixed width it to 778px since your page width is 778px also.

10. carisima@alaska.net
    Member
    Posted 3 years ago #

    Nope - no dice.... like you said, it's a tough one. If I wasn't using wordpress I could mess with it easily by setting the width of each nav tab, but ... .

11. kapiljain.in
    Member
    Posted 3 years ago #

    It is quite difficult to find out where is the problem.

    Can you share the theme?

    If yes sent it to me at me@kapiljain.in, I will try to resolve it by check this theme on my local system.

12. carisima@alaska.net
    Member
    Posted 3 years ago #

    Finally fixed it with the suggestion to add
    #header ul {
    display:block;
    float:left;
    width:100%;
    }
    YAY. Thank you all.

Topic Closed

This topic has been closed to new replies.