Basic HTML/CSS

Place for questions and answers for all newcomers and new coders. This is a free for all forum, no question is too stupid and to noob.
Post Reply
User avatar
Xaos
Posts: 946
Joined: Wed Jan 11, 2012 4:01 am

Basic HTML/CSS

Post by Xaos »

Hey guys, I have a basic HTML/CSS question. I'm triyng to implement a dropdown nav bar, and I can't for the life of me get ANY OF THEM to work! Any help/ideas?

Code: Select all

<!DOCTYPE HTML>
<html>
<title> MAHS | Home</title>
<div id = "top"; div style = "position: relative; width: 75%;  left: 12%; background-color: white; overflow: hidden";>
<!-- http://css-snippets.com/drop-down-navigation --> 
<body class="news">
    <div class="nav">
      <ul>
        <li class="home"><a href="#">MAHS TSA</a></li>
        <li class="tutorials"><a href="#">TSA Archives</a>
          <ul>
            <li><a href="#">Tutorial #1@@</a></li>
            <li><a href="#">Tutorial #2</a></li>
            <li><a href="#">Tutorial #3</a></li>
          </ul>
        </li>
        <li class="about"><a class="a" href="#">Curricula</a></li>
        <li class="news"><a href="#">Resources</a>
          <ul>
            <li><a href="#">News #1</a></li>
            <li><a href="#">News #2@@@</a></li>
            <li><a href="#">News #3</a></li>
          </ul>
        </li>
      </ul>
    </div>
</body>

</div>

<div id = "SLIDESHOW"; div style = "position: relative; width: 75%; left: 12%; height: 350px;">
<img src = "Wolf.jpg" style = "height: 350px; width: 100%;">
</div>

<div id = "CONTENT"; div style = "position: relative; width: 75%; left: 12%; border: 1px solid black; background-color: white;">
<div id = "SECONDARY"; div style = "position: relative; width: 100%;  border: 1px solid black; background-color: white;"><font size = "5";>Monroe Area High School is a Title 1 school located in
Walton County; founded in DATE, Monroe Area has educated thousands of students and multiple generations. In recent years,
Monroe Area has made an effort to expand CTAE curricula and to encourage the creation of high school CTAE organizations</font></div>
<div id = "THIRD"; div style =  "position: relative; width: 50%; left:50%; border: 1px solid black; background-color: white;"><font size = "5">Among multiple CTAE pathways, including the courses
Engineering 1 through 4, Monroe Area is host to a passionate and highly involved set of students in the high school level of the Technology Student
Association. The MAHS TSA chapter provides an environment in which students may strive and thrive, all whilst "learning to live in a technical world."</font></div>
</div>

<footer><center><div id = "FOOTER"; div style = "background-color: grey; width: 75%; margin-left: -10px; margin-top: 0px; border: 1px solid grey"><font color = "white">
<address>© Copyright 2015 All Rights Reserved Monroe Area High School TSA</address>
</center></font></footer>
</div>
</html>
</html>

<style type = "text/css">
body {
 background-color: #240B3B;
  margin: 0;
  padding: 0;
}


.nav ul {
  list-style: none;
  background-color: #444;
  text-align: center;
  padding: 0;
  margin: 0;
}

.nav li {
  font-family: 'Oswald', sans-serif;
  font-size: 1.2em;
  line-height: 40px;
  text-align: left;
}

.nav a {
  text-decoration: none;
  color: #fff;
  display: block;
  padding-left: 15px;
  border-bottom: 1px solid #888;
  transition: .3s background-color;
}

.nav a:hover {
  background-color: #005f5f;
}


/* Sub Menus */
.nav li li {
  font-size: .8em;
}

 .nav li:hover ul {
    display: block;
  }

/*******************************************
   Style menu for larger screens

   Using 650px (130px each * 5 items), but ems
   or other values could be used depending on other factors
********************************************/

@media screen and (min-width: 650px) {
  .nav li {
    width: 150px;
    border-bottom: none;
    height: 50px;
    line-height: 50px;
    font-size: 1.4em;
    display: inline-block;
    margin-right: -4px;
  }

  .nav a {
    border-bottom: none;
  }

  .nav > ul > li {
    text-align: center;
  }

  .nav > ul > li > a {
    padding-left: 0;
  }

  /* Sub Menus */
  .nav li ul {
    position: absolute;
    display: none;
    width: inherit;
  }

  .nav li:hover ul {
    display: block;
  }

  .nav li ul li {
    display: block;
  }
}


</style>

User avatar
vitinho444
Posts: 2825
Joined: Mon Mar 21, 2011 4:54 pm

Re: Basic HTML/CSS

Post by vitinho444 »

I use bootstrap, but pure CSS you can check this out: https://www.youtube.com/watch?v=pYN8FUiKfzA
My Company Website: http://www.oryzhon.com

Skype: vpegas1234
User avatar
hallsofvallhalla
Site Admin
Posts: 12031
Joined: Wed Apr 22, 2009 11:29 pm

Re: Basic HTML/CSS

Post by hallsofvallhalla »

Bootstrap is the absolute best. Can't imagine building a site without it.
User avatar
vitinho444
Posts: 2825
Joined: Mon Mar 21, 2011 4:54 pm

Re: Basic HTML/CSS

Post by vitinho444 »

hallsofvallhalla wrote:Bootstrap is the absolute best. Can't imagine building a site without it.
I know right? Same here... Amazing.. I wonder if there will be a Bootstrap 2.. Like some enhanced version of it. Like Bootstrap++ or something... Something even mind blowing'er xD
My Company Website: http://www.oryzhon.com

Skype: vpegas1234
User avatar
hallsofvallhalla
Site Admin
Posts: 12031
Joined: Wed Apr 22, 2009 11:29 pm

Re: Basic HTML/CSS

Post by hallsofvallhalla »

You are on it. They changed it completely from the original version. Looking forward to the next big addition however.
User avatar
vitinho444
Posts: 2825
Joined: Mon Mar 21, 2011 4:54 pm

Re: Basic HTML/CSS

Post by vitinho444 »

Wow, I didn't know that, I can't wait too, it's so freaking awesome!!!
My Company Website: http://www.oryzhon.com

Skype: vpegas1234
Post Reply

Return to “Beginner Help and Support”