I'm attempting to achieve the following:
(The black box represents a signup/login section, the blue is a navigation bar, and the red is a header area with some
text
content) I'm trying to reach this outcome with the following CSS:@import url(//fonts.googleapis.com/css?family=Droid+Sans:regular,bold&subset=latin);
html, body {
margin:0;
padding:0;
background-color:#fff;
font-family: 'Droid Sans', arial, serif;
color: #777;
font-size: 14px;
}
a {
color: #2e4987;
text-decoration: none;
}
img {
border: 0;
width: 250 px;
height: 250px;
margin: auto;
}
#nwtBox {
margin: 0 auto;
width: 960px;
height: 800px;
}
#nwtBox h1 {
color: #333;
font-weight: normal;
margin: 0 0 20px 0;
padding: 0;
}
#nwtBox h1 span {
float: right;
font-size: 14px;
font-weight: normal;
}
#nwtBox h2 {
font-weight: normal;
font-size: 20px;
padding: 0;
margin: 0 0 10px 0;
color: #333;
}
#nwtBox h3 {
padding:0;
margin: 0;
}
#nwtBox h3 img {
vertical-align: middle;
}
#nwtBox #header {
width: 960px;
background-color:#fff;
height: 100px;
border: solid;
border-width:thin;
border-color: red;
}
#nwtBox #header h1 {
text-align: center;
}
#nwtBox #navigation {
width: 960px;
background-color:#fff;
height: 100px;
border: solid;
border-width:thin;
border-color:blue;
}
#nwtBox #navigation ul {
list-style-type: none;
padding: 0;
margin: 0;
}
#nwtBox #navigation ul li {
padding: 0 30px 0 0;
font-weight: bold;
}
#nwtBox #navigation ul li a {
color: #a8a8a8;
text-decoration: none;
}
#nwtBox #navigation ul li a:hover {
color: #2e4987;
}
#nwtBox #navigation .main-nav {
width: 500px;
overflow: auto;
}
#nwtBox #navigation {
float: left;
padding: 35px 0 0 0;
}
#nwtBox #navigation ul {
list-style-type: none;
padding: 0;
margin: 0;
}
#nwtBox #navigation ul li {
float: left;
padding: 0 30px 0 0;
font-weight: bold;
}
#nwtBox #navigation ul li a {
color: #a8a8a8;
text-decoration: none;
}
#nwtBox #navigation ul li a:hover {
color: #2e4987;
}
#nwtBox #navigation .main-nav {
width: 500px;
overflow: auto;
}
#nwtBox #signupLogin {
float:right;
width: 400px;
overflow: none;
padding: 32px 0 0 0;
text-align: right;
color: #999999;
border: solid;
border-width:thin;
border-color:red;
}
Also, utilizing this HTML:
<body>
<div id ="nwtBox">
<div id ="signupLogin">
<ul>
<li> <a href =''> Sign Up</a>
</li>
<li> <a href =''> Log In</a>
</li>
</ul>
</div>
<div id = "navigation">
<ul class="main-nav">
<li class="main-nav-selected">
<a href="index.php">HOME</a>
</li>
<li>
<a href="stuff.php">STUFF</a>
</li>
<li>
<a href='stuff.php'>STUFF</a>
</li>
</ul>
</div>
<div id ="header">
<h1> TEXT</h1>
</div>
</body>
However, instead of achieving the desired design, I'm encountering issues. What could be wrong?