The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> How do i change position for li elements to fill up the box
Soro
post Jul 3 2016, 07:06 PM
Post #1





Group: Members
Posts: 1
Joined: 3-July 16
Member No.: 24,388
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" />
    <!--[if lt IE 9]>
      <script src="scripts/semantic.js"></script>
    <![endif]-->
  </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!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jul 3 2016, 08:39 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
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 }
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Cascading Style Sheets · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 25th April 2024 - 02:56 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC