0

First of all, I'd like to apologise if this question is too simple to justify asking here, I'm extremely inexperienced when it comes to web design/development.

I'm trying to get these links to span the entire width of the nav bar, while still making room for the elements on each side, both of which have different widths.

Setting any width anywhere in my code to 100% doesn't do this, however taking the table out of the navbar works fine.

Here's my code.

header {
  position: fixed;
  width: 100%;
  height: 2.5em;
  background-color: #202020;
}
#top-spacer {
  height: 2.5em;
  width: 100%;
}
#logo {
  width: auto;
  height: 2.5em;
}
#nav-container {
  display: inline-block;
  max-width: 100%;
}
nav {
  display: block;
  width: 100%;
  background-color: blue;
  height: 0.5em;
  vertical-align: top;
  padding: 0;
  margin: 0 auto;
}
nav table {
  display: inline-block;
  width: 100%;
}
#menu-button {
  display: inline-block;
  width: auto;
  height: 2.5em;
  float: right;
  opacity: 0.3;
  transition: opacity 1s;
}
#menu-button:hover {
  opacity: 1;
}
<html lang=en>

<head>
  <meta charset="utf-8">
  <meta name="Description" content="describey mcscriberson">
  <meta name="keywords" content="a,b,c,d">
  <link rel="stylesheet" href="css/normalize.css" type="text/css">
  <link rel="stylesheet" href="css/style.css" type="text/css">
</head>

<body>
  <header>
    <img src="img/logo.png" id="logo">
    <div id="nav-container">
      <nav>
        <table width="100%">
          <tr>
            <td>link</td>
            <td>link</td>
            <td>link</td>
            <td>link</td>
            <td>link</td>
            <td>link</td>
          </tr>
        </table>
      </nav>
    </div>
    <img src="img/menu.png" id="menu-button">
  </header>
  <div id="top-spacer"></div>

</body>

</html>

Thank you.

PorkSausages
  • 115
  • 1
  • 1
  • 8

4 Answers4

1

Is this what you're trying to achieve? (run the snippet to view) Basically, if you want to have a header with 3 elements that have different widths yet fill the entire width then you can use CSS to set the parent as display:table then the children as display:table-cell. It works with dynamic widths for any of the elements without any need of floating...

html, body {margin:0;padding:0}

header {
  position: fixed;
  width: 100%;
  height: 2.5em;
  background-color: #202020;
  display:table;
  text-align: center;
}

#top-spacer {
  height: 2.5em;
  width: 100%;
}

#logo {
  width: auto;
  height: 2.5em;
  display:table-cell;
}

#nav-container {
  display:table-cell;
  max-width: 100%;
}

nav {
  width: 100%;
  height:100%;
  background-color: blue;
}

nav table tr {
  width: 100%;
  color:#FFF;
}

nav table td {
  height: 2.5em;
}

#menu-button {
  width: auto;
  display:table-cell;
  height: 2.5em;
  opacity: 0.3;
  transition: opacity 1s;
}
#menu-button:hover {
  opacity: 1;
  display:table-cell;
  background:red;
}
<html lang=en>

<head>
  <meta charset="utf-8">
  <meta name="Description" content="describey mcscriberson">
  <meta name="keywords" content="a,b,c,d">
  <link rel="stylesheet" href="css/normalize.css" type="text/css">
  <link rel="stylesheet" href="css/style.css" type="text/css">
</head>

<body>
  <header>
    <img src="img/logo.png" id="logo">
    <div id="nav-container">
      <nav>
        <table width="100%">
          <tr>
            <td>link</td>
            <td>link</td>
            <td>link</td>
            <td>link</td>
            <td>link</td>
            <td>link</td>
          </tr>
        </table>
      </nav>
    </div>
    <img src="img/menu.png" id="menu-button">
  </header>
  <div id="top-spacer"> </div>

</body>

</html>
Aziz
  • 7,685
  • 3
  • 31
  • 54
0

Equal sized table cells to fill entire width of holding table This topic is addressing similar issue, the idea is that you have to have in css the width in % for td. Meaning that if you have 6 columns width would be 100%/6 But I would rather use div elements for links instead of table.

Edit: The td takes the width of the text that is inside. For better understanding use the development tool (F12) and inspect the element of your table (right click on the table you want to see how it is generated) and select Inspect element. You will be able to see that actually the table is 100% in width. Just the columns are not expanded because in your css there is nothing related to this.

Community
  • 1
  • 1
Diana R
  • 1,174
  • 1
  • 9
  • 23
  • While this *may* answer the question, providing additional context regarding **how** and/or **why** it solves the problem would improve the answer's long-term value. – Paulie_D Aug 25 '15 at 21:36
  • @Diana Sorry I should have mentioned, I've already tried that, unfortunately it doesn't work. – PorkSausages Aug 25 '15 at 21:42
  • Ok. You can try to add this to your css: 'div#nav-container { display: inline-block; width: 90%; }' This is the best solution for the layout you have, but try and see if this is what you expect. – Diana R Aug 25 '15 at 21:50
0

Generally, using a table for this layout is not recommended but a simple idea is to move the images into the table.

<table width="100%">
   <tr>
     <td><img src="img/logo.png" id="logo"></td>
     <td>link</td>
     <td>link</td>
     <td>link</td>
     <td>link</td>
     <td>link</td>
     <td>link</td>
     <td><img src="img/menu.png" id="menu-button"></td>
   </tr>
</table>

and also set #nav-container width to width: 100%;.

Also, you should supply an example without any unnecessary code such as meta tags and make sure the links are not broken (images links for example)

Itay Gal
  • 10,706
  • 6
  • 36
  • 75
  • Why shouldn't I use a table? Another question I saw here where the asker was trying to accomplish something similar was told to use a table for this because it's what they're for? That's the only reason I used one. – PorkSausages Aug 25 '15 at 21:47
  • You'll find the answer here: http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html – Itay Gal Aug 25 '15 at 21:48
0

I made a fiddle replacing the table with list items which is the preferred method instead of tables for SEO, responsiveness, maintainability reasons.

Although because you need the list to stretch evenly using % will mean adjusting this number if your list changes length. The first and last item (images li items) will probably need to have their own % width set using nth-child as they may vary from the other list items. Hope it helps:

http://jsfiddle.net/43r7L2fj/1/

<header>
<div id="nav-container">
  <nav>
    <ul>
        <li><img src="img/logo.png" id="logo"></li>
        <li>link</li>
        <li>link</li>
        <li>link</li>
        <li>link</li>
        <li>link</li>
        <li><img src="img/menu.png" id="menu-button"></li>
    </ul>
  </nav>
</div>

amespower
  • 907
  • 1
  • 11
  • 25