PDA

View Full Version : Newbie: re:nav won't display inline



murphysstrings
Jun 6th, 2016, 01:31 AM
Hi,

I'd appreciate help with the html/css pasted below. I'd like my nav to display inline. It worked at first, but now it doesn't and I can't figure out the problem.

Thanks for any help/explanation of what I did wrong.

Thanks,



<!DOCTYPE html>
<html lang="en">
<head>
<title>Content Multimedia Resource Cat</title>
<meta charset="utf-8"/>
<meta name="description" content="put your page description here">

<link rel="stylesheet" tupe="text/css" href="styles.css"/>
<meta name="viewport" content="width=device-width, initial scale=1.0">
</head>
<body class="bodymain">
<header class="mainheader">
<img src=".gif">
<nav>
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul></nav>
</header>
<div class="maincontent">
<div class="content">
<article class="topcontent">
<header>
<h2><a href="#" title="firstPost"</a></h2>
</header>
<footer>
<p class="postinfo">This is written by Kimberly Sanders</p>
<content>
</p>
</content>
</article>

</div>
</div>
<class="bottomcontent">
<header>
<h2><a href="#" title="firstPost"</a></h2>
</header>
<footer>
<p class="postinfo">This is written by Kimberly Sanders</p>
<content>
</p>
</content>
</article>

</div>
</div>
<aside class="topsidebar">
<article>
<h2>Top Sidebar</h2>
<p>Lorem Ipsum</p>
</article>
</aside>
<aside class="bottomsidebar">
<article>
<h2>Bottom Sidebar</h2>
<p>Lorem Ipsom</p>
</article>
</aside>
<footer class="mainfooter">
<p>Copyright &copy; 2016 <href="#" title="my info">My Info</a></p>
</footer>
</body>
</html>


body {
background-image: url('image/bg.png');
color: #000305;
font-size: 95% /*basefont size=14px*/
font-family: lucida sans unicode, arial;
line-height: 1.5;
text-align: left;
}
a {text-decoration: none;}
a:link, a:visited {
color:#cf5c3f;
}
a:hover, a:active {
background-color:#cf5c3f;
color:#fff;
}
/*to style logo*/
.bodymain {margin: 0 auto;
width: 90%;
clear: both;}
.mainheader img {
width: 100%;
height: auto;
margin: 2%, 0;
}
.mainheader nav {
background-color: #666;
height: 160px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.mainheader nav ul {
list-style: none;
margin: 0 auto;
}
.mainheader nav ul li {
width: 100%;
margin: 0 auto;
float: left;
display: inline;
}
.mainheader nav ul li a: link, mainheader na a:visited {
padding: 10px 25px;
height: 20px;

}
.mainheader nav a:link, mainheader nav a:visited {
color: #fff;
}
.mainheader nav a:hover, .mainheader nav a:active,

.mainheader nav .active a: link, .mainheader nav .active a: visited {
background-color: CFSC3F;
text-shadow: none;
}
.mainheader nav ul li a {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.maincontent {
line-height: 30px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
overflow: hidden;
}
.content {
width: 100%%;
float: left;
margin-top: 2%;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.postinfo {
display: none;
}
.topcontent {
background-color: #FFF;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 3%, 5%;
margin-top: 2%;
margin-bottom: 4%;}
.bottomcontent {
background-color: #FFF;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 3%, 5%;
margin-top: 3%;
}
.top-sidebar {
width: 94%;
float: left;
background-color: #FFF;
border-radius: 5px;
-moz-border-radius: 5px;
margin: 2% 0%;
-webkit-border-radius: 5px;
padding: 2% 3%;}
.middle-sidebar {
width: 94%;
float: left;
background-color: #FFF;
border-radius: 5px;
-moz-border-radius: 5px;
margin: 2% 0%;
-webkit-border-radius: 5px;
padding: 2% 3%;}
.bottom-sidebar {
width: 94%;
float: left;
background-color: #FFF;
border-radius: 5px;
-moz-border-radius: 5px;
margin: 2% 0%;
-webkit-border-radius: 5px;
padding: 2%;}
.mainfooter {
width: 100%;
float: left;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background-color: #666;
margin: 2% 0;
height: 40px;
}
.mainfooter p {
width: 92%;
margin: 2%;
color: #FFF;
@media only screen and (min-width: 150px)
and (max-width: 600px)
}

WAINGRO
Jun 6th, 2016, 02:47 AM
Lol I am becoming somewhat of a newcomer-sign standing in the CF-doorway :D But as long as I'm helping ppl out I'm fine with it... Your code has many errors. Specify and locate them using https://validator.w3.org/nu/#textarea

good luck!