CODEWITHSUNDEEP
htmlcssweb
Panos Pixel
Panos Pixel

Reputation: 1

Css not working after a while

I am a newbie and this is my first ever try on creating css,css worked fine until line 10...And i cant figure out whats my problem. Background and font colors are temporary :D Thanks a lot in advance!!

body {
  background-image: url('bg.jpg');
  color: #000385;
  font-size: 87.5%;
  font-family: Arial;
  line-height: 1.5
}
a {
  text-decoration: none;
  /* no underline in links */
}
.body {
  margin: 0 auto;
  /* everything will be centered */
  width: 70%;
  /* no floating elements */
}
.mainheader img {
  width: 30%;
  height: auto;
  margin: 2% 0;
  /* leaves a bit of space on the top of the image */
}
.mainheader nav {
  background-color: #666;
  height: 40px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}
.mainheader nav ul {
  list-style: none;
  margin: 0 auto;
}
.mainheader nav ul li {
  float: left;
  display: inline;
}
<head>
  <title>Personal Portfolio</title>
  <link rel="stylesheet" href="style.css" type="text/css" />
</head>

<body class="body">
  <header class="mainHeader">
    <img src="logo.png" <nav>
    <ul>
      <li><a href="#">Home</a>
      </li>
      <li><a href="#">About Me</a>
      </li>
      <li><a href="#">Gallery</a>
      </li>
      <li><a href="#">Contact</a>
      </li>
    </ul>
    </nav>
  </header>
  <div class="Homepage">
    <div class="content">
      <article class="maincontent">
        <header>
          <h2><a href="#" title="About Photography">About Photography</a>
    					</header>
    					<content>
    						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    						tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    						quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    						consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    						cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    						proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
    						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    						tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    						quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    						consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    						cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    						proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
    			</article>
    		
    		</div>
    		<footer class="footer">

    			<p>All rights reserved &copy </p>

Upvotes: 0

Views: 139

Answers (2)

DrNio
DrNio

Reputation: 1976

The <img src="logo.png" is not closed.

You didn't close the <nav> element.

You didn't close the <h2> <h2><a href="#" title="About Photography">About Photography</a>

Replace the <content>

Also, you should close the <footer>.

Upvotes: 0

arnolds
arnolds

Reputation: 788

The problem is with your markup a.k.a (HTML) your CSS is ok, and needs some improvement, so make sure you study CSS as well as HTML.

Okay, but what is the mistake you might be asking.

HTML needs closing and opening tags, most tags come in pairs just like the body tag:

<body></body>

Other tags are self closing

<img src="" alt="" />

If you also notice the above tag has something called src & alt attribute, these are name/value pairs and these need the closing and opening double quotes ".

If you want to progress on HTML, and CSS here are some good resources

And for you example here is a link to a jsFiddle with working code.

Upvotes: 1

Related Questions