Search the Community
Showing results for tags 'multiple lists'.
Found 1 result
-
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>
