Jump to content

Recommended Posts

I have 2 lists I am trying to complete in my website.  The first list I have is a navigation bar that runs horizontally.  I have all of the css and html for that.  In addition, under my gallery division I am trying to add another list to replace my table and make it layout similar to the table.  When I add my list it is effected by the navigation bar css.  To remedy this I added a class to the division that carries nav bar and added that syntax to my list css such as <div class="nav"> and nav, ul {}.  This doesn't seem to be helping though.  I don't want to give a class for every li or ul and I'm sure it is an easy fix but I need some help. 
 

<!DOCTYPE html>
<html>
<head>
<style>
* {
    box-sizing: border-box;
}
.header, .footer {
    background-color: #333;;
    color: lightgrey;
    padding: 50px;
    clear: both;
}
a {color:white;}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}
nav, ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    position: fixed;
    top: 0;
    width: 100%;
}
.nav, li {
    float: left;
    font-family: arial;
}

.nav, li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111;
  }
#border1 {
  border: 3px solid #2990EA;
  padding: 10px;
}
.birthday {
    float: left;
    margin-right: 100px;
    margin-left: 400px;
    width:500px;
}
.footer a {
  text-decoration: none;
  clear: both;
}
.column {
  background-color: #ebecf6;
  overflow: hidden;
  clear: both;
}
.container {
  background-color:#909ca2;
}

div.gallery img {
    width: 300px;
    height: 250px;
    padding: 5px;
    float: left;
    margin-bottom: 50px;
}
.gallery1 {
    margin-left: 500px;
}
.table1 {
  padding:100px;
}
th {
  font-size: 200%;
}
tr {
  font-size: 150%;
}
tr, p {
  margin-left: 200px;
}
</style>
</head>
<body style="font-family: sans-serif;">
<div class="nav">
 <ul>
  <li class="li" style="float:right"><a href="#about school">ABOUT SCHOOL</a></li>
  <li class="li" style="float:right"><a href="#about family">ABOUT FAMILY</a></li>
  <li class="li" style="float:right"><a href="#about me">ABOUT ME</a></li>
  <li id="border" style="float:right"><a href="#home">HOME</a></li>
</ul>
</div>
  <div class="header">
   <h1 style="color: #e9cf76;text-align:center;font-size:300%">About Me</h1>
  </div>
<div class="container">
  <div class="gallery">
    <img class="gallery1" src="bun.jpg" alt="Trolltunga Norway" width="100" height="100">
  </div>
    <div class="gallery">
    <img src="3eb.jpeg" alt="Trolltunga Norway" width="100" height="100">

  <div class="gallery">
    <img src="westworld.jpg" alt="Trolltunga Norway" width="100" height="100">
  </div>
  <div class="list1">
  <ul>
    <li>Technology Teacher</li>
    <li>Previously a Manager</li>
  </ul>
  <ul>
    <li>Lamb Karahi</li>
    <li>Pho Thai</li>
  </ul>
  </div>
  <div class="table1">
  <table style="width:100%">
    <tr>
      <th>Job</th>
      <th>Food</th> 
    </tr>
    <tr>
      <td><p>Technology Teacher</p></td>
      <td><p>Lamb Karahi</p></td> 
    </tr>
    <tr>
      <td><p>Previously a Manager</p></td>
      <td><p>Pho Thai</p></td>
    </tr>
  </table>
  </div>
</div>
<div class="column content">
   <img class="birthday" src="birthday.jpg">
    <h1 style="text-align:center;font-size:300%">Who am I?</h1>
    <p style="font-size: 150%">I have two children and a third on the way.  My oldest child's name is Harper and her brother is called Nolan.  The third baby gender is a mystery to all but me, and no I won't tell you!  Minus the lack of sleep being a parent is the best thing that ever happened to me.</p>
    <p style="font-size: 150%"> teach technology at MMSA.  I am one of the few teachers who can say that they have taught every single grade level.  I graduated from Wayne State University with a Bachelor's Degree in Secondary Education in 2011.  I have been teaching since 2013. </p>
  </div>
</div>
<div class="footer">
  <p STYLE="text-align:center"><SPAN id="border1"><a href="https://www.weebly.com/" target="_blank">CREATE A FREE WEBSITE</SPAN></a></p>
</div>

</body>
</html>

Link to post
Share on other sites

The comma is used to separate selectors. If you want descendants of the .nav element, just separate them with a space:

.nav ul {
  /* Rules */
}

.nav li {
  /* Rules */
}

 

Link to post
Share on other sites

The code at http://w3schools.invisionzone.com/index.php?/topic/56661-help-with-float/#comment-311732

Only affected the ul and li elements with parent element class of 'menu', like I mentioned in another topic, doing it this way makes it more manageable, as any other ul, li used without parent 'menu' class, will not be styled as used for navigation menu ul, li elements.

Instead of class you can place the unordered list elements within nav element then use

nav ul {...}

nav li {...}

So any ul, li elements within nav element will be styled differently from any used on its own or within a div anywhere else within the page.

Edited by dsonesuk
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...