HTMLHelp Forums > How do i change position for li elements to fill up the box

Help - Search - Members - Calendar

Full Version: How do i change position for li elements to fill up the box

HTMLHelp Forums > Web Authoring > Cascading Style Sheets

Soro

Jul 3 2016, 07:06 PM

Hello, I have this navbar.

IPB Image

But would like to have this navbar.

IPB Image

How would I go about doing this?

Here's my code.

CODE

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Hotel Natoma - San Francisco Museums</title>
    <link type="text/css" rel="stylesheet" media="screen" href="natoma.css" />
    <link type="text/css" rel="stylesheet" media="print" href="hnprint.css" />
    <link rel="shortcut icon" href="favicon.ico" />
    
  </head>
  <body>
    <div id="box">
      <div id="skipnav"><a href="#main">    Skip navigation</a></div>
      <div id="logo">
        <img src="images/natoma.gif" width="368" height="65" alt="Hotel Natoma" title="" />
      </div>
      <nav>
        <ul id="mainnav">
          <li><a href="index.html">Home</a></li>
          <li><a href="nearby.html">What's Nearby</a></li>
          <li><a href="http://bit.ly/bb3Sic" target="_blank">Location</a></li>
          <li><a href="museums.html">SF Museums</a></li>
          <li><a href="greensf.html">Green SF</a></li>
        </ul>
      </nav>
      <article id="main">
        <h2>San Francisco Museums</h2>
        <figure> <img src="images/bridge.jpg" width="350" height="232" alt="the Golden Gate Bridge" title="" /> </figure>
        <ul>
          <li>Alcatraz Island</li>
          <li>Asian Art Museum of San Francisco</li>
          <li>Beat Museum</li>
          <li>Cable Car Museum</li>
          <li>California Academy of Sciences</li>
          <li>California Historical Society</li>
          <li>California Palace of the Legion of Honor</li>
          <li>Cartoon Art Museum</li>
          <li>Chinese Culture Center</li>
          <li>Chinese Historical Society of America Museum and Learning Center</li>
          <li>Contemporary Jewish Museum</li>
          <li>de Young Museum</li>
          <li>Exploratorium</li>
          <li>Fort Point National Historic Site</li>
          <li>GLBT Historical Society Museum</li>
          <li>International Museum of Women</li>
          <li>Mission Cultural Center for Latino Arts</li>
          <li>Museo ItaloAmericano</li>
          <li>Museum of Craft and Folk Art</li>
          <li>Museum of Performance & Design</li>
          <li>Museum of Russian Culture</li>
          <li>Museum of the African Diaspora</li>
          <li>Musée Mécanique</li>
          <li>New Langton Arts</li>
          <li>North Beach Museum</li>
          <li>Pacific Heritage Museum</li>
          <li>Randall Museum</li>
          <li>San Francisco Arts Commission Gallery</li>
          <li>San Francisco Fire Department Museum</li>
          <li>San Francisco Maritime National Historical Park</li>
          <li>San Francisco Museum and Historical Society</li>
          <li>San Francisco Museum of Craft & Design</li>
          <li>San Francisco Museum of Modern Art</li>
          <li>San Francisco Railway Museum</li>
          <li>USS Pampanito</li>
          <li>Walt Disney Family Museum</li>
          <li>Wattis Institute for Contemporary Arts</li>
          <li>Wax Museum at Fisherman's Wharf</li>
          <li>Yerba Buena Center for the Arts</li>
          <li>Zeum</li>
        </ul>
      </article>
<footer>
    <p>568 Natoma St. • San Francisco, CA 94103 • (415) 555-8378</p>
      </footer>
    </div>
  </body>
</html>

CODE

/* Hotel Natoma */
@font-face {
  font-family: 'PTSansCaption';
  src: url('fonts/PTC55F-webfont.eot');
  src: local('☺'), url('fonts/PTC55F-webfont.woff') format('woff'), url('fonts/PTC55F-webfont.ttf') format('truetype'), url('fonts/PTC55F-webfont.svg#webfontaMnF3Xb4') format('svg');
  font-weight: normal;
  font-style: normal;
  }
article, aside, body, dd, div, dl, dt, figcaption, figure, footer, h1, h2, h3, header, li, nav, ol, p, section, table, th, td, ul {
  margin: 0;
  padding: 0;
  }
article, aside, figure, header, footer, nav {
  display: block;
  }
article {
  padding: 10px;
}
body {
  font-family: tahoma, verdana, arial, sans-serif;
  margin: 0 auto;
  width: 960px;
  }
figcaption {
  text-align: center;
  }
figure {
  float: right;
  }
footer {
  border: 0.25em solid #082008;
  border-left: 0;
  clear: both;
  text-align: center;
  background: #93AD78;
  }
footer p {
  padding: 0.5em;
  }
h1 {
  text-align: center;
  font-family: PTSansCaption, georgia, "times new roman", times, serif;
  font-weight: normal;
  background: #082008;
  color: white;
  font-size: 2em;
  }
h2 {
  font-size: 1.5em;
  text-align: center;
  padding-bottom: 15px;
  }
ol {
  list-style-type: lower-roman;
  }
ul {
  padding-left: 40px;
  list-style-type: disc;
  }
#box {
  border: 0.25em solid #082008;
  background: #FDF5E6;
  position:relative;
  }
#logo {
  background: #082008;
  }
#logo img {
  display: block;
  margin: 0 auto;
  }
#mainnav {
  text-align:left;
  padding-top:5px;
  padding-bottom:10px;
  border-bottom: 0.25em solid #082008;
  border-right: 0.25em solid #082008;
  background: #93AD78;
  margin: 0;
  position:relative;
  width:200px;
  }
#mainnav a {
  text-decoration: none;
  }
#mainnav li {
  list-style-type: none;
  padding: 0.25em;
  margin:5px 0 0 0;
  background: #082008;
  }
#skipnav {
  color: white;
  position:absolute;
  padding-right:10;
  padding-top:5px;
  }
#skipnav  a {
  text-decoration: none;
  }
.center {
  margin: 0 auto;
  }
.center img {
  display: block;
  padding: 0 0 2em 0;
  margin: 0 auto;
  }
.right {
  margin: 0 1em 0 0;
  float: right;
  clear: right;
  }
.right img {
  display: block;
  }
a:link {
  color: white;
  }
a:visited {
  color: white;
  }
a:hover {
  text-decoration: underline;
  }
a:active {
  color: white;
  }
#skipnav a:hover {
  text-decoration: underline;
  }
#mainnav a:link {
  color: white;
  }
#mainnav a:visited {
  color: #ffffcc;
  }
#mainnav a:hover {
  text-decoration: underline;
  }
#mainnav a:active {
  color: white;
  }

Thanks!

pandy

Jul 3 2016, 08:39 PM

Browsers add margin and/or padding to lists to give them the look we are used to see. But they do it in different ways, so the easiest is to first remove all possible margins and padding and then add back whatever you may want.

CODE

ul,li { margin: 0; padding:0 }

Or if you want to target only this list:

CODE

#mainnav, #mainnav li { margin: 0; padding:0 }

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.