6 replies [Last post]
kbedi87
Offline
newbie
Last seen: 13 years 5 hours ago
Joined: 2009-12-11
Posts: 4
Points: 5

Hello all!!

Before I begin, I would just like to say that I am a css virgin and currently trying to learn how to handcode css in the hopes of becoming an efficient and creative web developer. I am currently following a book called "Designing without tables- using css 2nd edition", published by sitepoint and trying to recreate the following website using the code presented in the book in a logical and ordered way:

http://www.footbagfreaks.com/

So far, my website looks like this:

http://cssproblems.net23.net/

I've used css to style the portion of the text in here:

HTML Code:
<div id="main">
  <div id="content">
 
    <div id="mainfeature">
   <h2> Simon says <h2>
      <p> George linket tells us how a change of shoes has given him new
          moves and a new outlook as the new season approaches.</p>
 
    </div> <!--end of mainfeature-->

Using the following CSS (of course, since its uploaded, you can check the page source yourself if you want):

<!--start of content-->
 
#main {
  width: 100%;
  margin-top: 10px;
}
 
#content {
  margin: 0 240px 0 0;
  border-top: 1px solid orange;
  border-right: 1px solid orange;
  border-left: 1px solid orange;
  background-color: white;
  color: black;
}
 
 
#mainfeature {
  background-image: url("images/mainimg.jpg");
  background-repeat: no-repeat;
  background-color: #112236;
  color: white;
  padding: 2em 2em 1em 200px;
  height: 1%;
}
 
 
#mainfeature h2 {
  margin: 0;
  font-weight: normal;
  font-size: 140%;
}
 
 
#mainfeature p {
  font-size: 110%;
}
 
 
#mainfeature p.more {
  margin-top: 0;
  text-align: right;
}
 
 
#mainfeature p.more a:link, #mainfeature p.more a:visited {
  color: white;
  background-image: url(img/more-bullet.gif);
  background-repeat: no-repeat;
  background-position: center left;
  padding-left: 14px;
}

Several things to note: the background image is not showing (of mainfeature div), the right margin 240px of the content div is not showing. The text should be white as described in mainfeature div.

Its not going to plan!

Where am I going wrong, friends?

Thanks
Kbedi

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 7 years 13 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

kbedi87 wrote: Several things

kbedi87 wrote:

Several things to note: the background image is not showing (of mainfeature div), the right margin 240px of the content div is not showing. The text should be white as described in mainfeature div.

According to your css, you dont have a background applied to mainfeature div. You dont have 240px margin on content div. As far as the text goes, mainfeature. the css is making the text black, not white.

kbedi87
Offline
newbie
Last seen: 13 years 5 hours ago
Joined: 2009-12-11
Posts: 4
Points: 5

CupidsToejam wrote: kbedi87

Quote:

According to your css, you dont have a background applied to mainfeature div. You dont have 240px margin on content div. As far as the text goes, mainfeature. the css is making the text black, not white.

I don't? Please tell me where am I going wrong Sad( .

I thought the following code means I have a background image for the mainfeature div:

#mainfeature{
  background-image: url("images/mainimg.jpg");
  background-repeat: no-repeat;
  background-color: #112236;
  color: white;
  padding: 2em 2em 1em 200px;
  height: 1%;
}

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 7 years 13 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

your live example doesnt have

your live example doesnt have that css.

kbedi87
Offline
newbie
Last seen: 13 years 5 hours ago
Joined: 2009-12-11
Posts: 4
Points: 5

The live source is perhaps

The live source is perhaps unreliable since its hosted on a free hosting website with considerable down time. I'll post the code in its entirety so you can see what's going on here:

Here is the full HTML source:

<!DOCTYPE html PUBLIC" -//W3C//DTD XHTML 1.0 strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
  <head> 
    <title> Hoopy Loops</title> 
    <meta http-equiv="content-type"
       content="text/html; charset=iso-8859-1" /> 
 
 
 
<link rel= "stylesheet" type="text/css" href="styles.css" /> 
 
</head> 
 
<body> 
 
<div id="wrapper"> <!--OPENING CONTAINER--> 
 <div id="header"> 
   <img src="images/loopylog.gif" alt="Hoopy Loops" 
     height="77" width="203"/> 
 
      <div id="header-bottom"> 
 <p id="tagline">Home of the dunkin'<p> 
  <ul> 
 
 
   <li><a href="">Contact Us</a>|</li> 
      <li><a href="">About Us</a>|</li> 
      <li><a href="">Privacy Policy</a>|</li> 
      <li><a href="">sitemap</a>|</li> </ul> 
<img src="images/basketball.gif" height="33" width="28" alt="" id="ball" /> 
</div> <!--end of header bottom--> 
</div> <!--end of header--> 
 
 
 
 
<div id="main"> 
  <div id="content"> 
 
    <div id="mainfeature"> 
   <h2> Simon says </h2> 
      <p> George linket tells us how a change of shoes has given him new
          moves and a new outlook as the new season approaches.</p> 
 
    </div> <!--end of mainfeature--> 
 
 
 
 
<h2>Recent Features</h2> 
    <ul> 
      <li> 
      <h3>Head for the hills: Is endurance training the answer?</h3> 
      <p> Lachlan 'Super hand' Donali</p> 
      <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices 
       posuere cubilia Curae; Praesent hendrerit iaculis arcu.</p> 
 
     <p><a href="">Full Story</a></p> 
      </li> 
    <li> 
    <h3>The complete court survival guide</h3> 
    <p> Michael 'Dunkin' Tosh</p> 
    <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices 
       posuere cubilia Curae; Praesent hendrerit iaculis arcu.</p> 
 
     <p><a href="">Full Story</a></p> 
  </li> 
    <li> 
    <h3>5 dirty b-ball tricks for the average joe</h3> 
    <p> Dawson 'speed' Trikoe</p> 
    <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices 
       posuere cubilia Curae; Praesent hendrerit iaculis arcu.</p> 
 
     <p><a href="">Full Story</a></p> 
  </li> 
  </ul> 
  </div> <!--end of content--> 
 
 
 
 
 
<div id="sidebar"> 
  <h3>Site Search</h3> 
    <form method="post" action="" id="searchform"> 
    <div> 
    <label for="keywords"> Keywords</label>:
    <input type="text" name="keywords" id="keywords"/> 
     </div> 
      <div> 
     <input type="submit" name="btnSearch" id="btnSearch" /> 
     </div> 
     </form> 
  <h3> Coming Events</h3> 
  <ul> 
  <li> 09 Dec 09 -<br /> <a href=""> Seattle Zone Qualifier</a> </li> 
  <li> 12 Dec 09 -<br /> <a href=""> Basketball college cup '09</a></li> 
  <li> 16 Dec 09 -<br /> <a href=""> Basketsmash semi final </a> </li> 
  <li> 23 Dec 09 -<br /> <a href=""> Santa Claus Basketball team special</a> </li> 
  </ul> 
  <h3> Move Of The Month</h3> 
  <h4> The Outer Stall </h4> 
   <p> estibulum ante ipsum primis in faucibus orci luctus et ultrices 
       posuere cubilia Curae; Praesent hendrerit iaculis arcu.</p> 
   <p><a href="">more</a></p> 
 </div> <!--end of sidebar--> 
 </div> <!--end of main--> 
</div> <!--end of wrapper--> 
 
 
 
</body> 
 
</html> 

and the full CSS:

body
{
margin:0;
padding:0;
background-color: orange;
color:white;
background-image: url("images/basket.jpg");
background-repeat: no-repeat;
font:small Arial,Helvetica,Verdana, sans-serif;
}
 
 
#wrapper 
{
  background-color: white;
  color: black;
  margin: 30px 40px 30px 40px;
  padding: 10px;
}
 
#header-bottom 
{
  border-top: 1px solid orange;
  border-bottom: 1px solid orange;
  height: 1%;
}
 
#header-bottom ul 
{
  margin: 0;
  padding: 0;
  padding: 0 30px 0 0;
  text-align: right;
}
 
 
#header-bottom li 
{
  display: inline;
  background-color: #fdf8f2;
  color: #050845;
}
 
#header-bottom a:link, #header-bottom a:visited {
  text-decoration: none;
  background-color: #fdf8f2;
  color: black;
}
 
#header-bottom a:hover 
{
color:orange;
background-color:black;
}
 
 
#tagline {
  font-weight: bold;
  line-height: 2;
  background-color: #fdf8f2;
  color: #050845;
  font-style: italic;
  margin: 0;
  padding: 0 0 0 20px;
  width: 200px;
  float: left;}
 
#ball{
position: absolute;
top: 115px;
right:50px;
 
 
 
 
 
 
 
#main {
  width: 100%;
  margin-top: 10px;
}
 
#content {
  margin: 0 240px 0 0;
  border-top: 1px solid orange;
  border-right: 1px solid orange;
  border-left: 1px solid orange;
  background-color: white;
  color: black;
}
 
 
#mainfeature{
  background-image: url("images/mainimg.jpg");
  background-repeat: no-repeat;
  background-color: #112236;
  color: white;
  padding: 2em 2em 1em 200px;
  height: 1%;
}
 
 
#mainfeature h2 {
  margin: 0;
  font-weight: normal;
  font-size: 140%;
}
 
 
#mainfeature p {
  font-size: 110%;
}
 
 
#mainfeature p.more {
  margin-top: 0;
  text-align: right;
}
 
 
#mainfeature p.more a:link, #mainfeature p.more a:visited {
  color: white;
  background-image: url("images/more-bullet.gif");
  background-repeat: no-repeat;
  background-position: center left;
  padding-left: 14px;
}

kbedi87
Offline
newbie
Last seen: 13 years 5 hours ago
Joined: 2009-12-11
Posts: 4
Points: 5

SOLVED

Don't worry guys this issue is resolved.

I had forgotten a closing bracket on the ball div resulting in a ruptured css stylesheet.

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 7 years 13 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

<p id="tagline">Home of the

<p id="tagline">Home of the dunkin'<p> 

you also need to close this tag