espresso_coffee espresso_coffee -4 years ago 93
CSS Question

How to align li text left and set horizontal navigation under h3 tag?

I have page where I want to put navigation bar Menu on the left side of the page. I'm struggling to align text in a tag to the left side. I tried text align to all three elements a,ul and li but that still didn't fix the problem. Also I have the problem with my horizontal navigation bar. I would like to be aligned with h3 tag in my contentMain div. I'm not sure why my two div's are not next to each other as well. if someone can see where my code is off please let me know. Thanks.



div.container {
width: 100%;
height: 100%;
}
.navMenuLeft {
width: 180px;
padding-bottom: 10px;
padding-left: 5px;
padding-right: 5px;
position: relative;
vertical-align: top;
float: left;
display: block;
background-color: white;
}
.navMenuLeft h3 {
margin-left: 10px;
margin-right: 10px;
margin-bottom: 0;
background-color: #000099;
color: white;
text-align: left;
padding-left: 5px;
}
.contentMain h3 {
margin-left: 10px;
margin-right: 10px;
background-color: #000099;
color: white;
text-align: left;
padding-left: 5px;
}
.hfNavLeft {
margin-left: 10px;
margin-right: 10px;
}
.hfNavLeft ul {
list-style: none;
text-align: left;
background-color: #d3d3d3;
}
.hfNavLeft li {
text-align: left;
}
.hfNavLeft a {
color: black;
text-decoration: none;
cursor: pointer;
}
.hfNavLeft a:hover {
color: #999999;
}
.contentMain {
margin-left: 5px;
padding-bottom: 10px;
padding-left: 5px;
position: relative;
vertical-align: top;
float: left;
display: block;
background-color: white;
min-width: 800px;
}

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=10; IE=11" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>


</head>
<body>
<div class="container">
<div class="navMenuLeft">
<h3>Menu</h3>
<nav class="hfNavLeft">
<ul>
<li><a href="Reports/hfReports.cfm">Reports</a></li>
</ul>
</nav>
</div>
<div class="contentMain">
<h3>Home</h3>
<nav class="hfNavTop">
<a href="#" class="tablinks">Demographic</a>
<a href="#" class="tablinks">Adult</a>
</nav>
</div>
</div>
</body>
</html>




Answer Source

It's hard to tell what you want... but I can explain the 'reports' alignment. It's in a ul tag - which has default padding and margins. text-align: left; is the default across the board for all elements already.

https://jsfiddle.net/sheriffderek/tLbbzqws/

<aside class='sidebar'>
  <h2>Menu</h2>
  <nav class='y-navigation'>
    <ul class='item-list'>
      <li class='item'>
        <a href='#'>Reports</a>
      </li>
    </ul>
  </nav>
</aside>

<section class='main-content'>
  <h1>Content</h1>
  <nav class='x-navigation'>
    <ul class='item-list'>
      <li class='item'>
        <a class='link' href="#">Demographic</a>
      </li>
      <li class='item'>
        <a class='link' href='#'>Adult</a>
      </li>
    </ul>
  </nav>
</section>

...

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar {
  width: 100%;
  max-width: 30%;
  float: left;
  background: lightgreen;
}

.main-content {
  width: 100%;
  max-width: 70%;
  float: left;
  background: lightblue;
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download