www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 16

Thread: Backgrounds not displaying in IE6

  1. #1
    Join Date
    Dec 2002
    Posts
    216

    Backgrounds not displaying in IE6

    I can't figure out why the images on the right don't show in IE6? They show normally in Firefox.
    Also, the container suddenly appeared to have left a white space at the top. How to get rid of that?

    h t t p://pages(dot)intnet(dot)mu/didierah/test/
    Last edited by WebJoel; 06-22-2008 at 12:53 PM.

  2. #2
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    Code:
    <a href="index.html" class="home"></a><d></d>
    d ????

  3. #3
    Join Date
    Dec 2002
    Posts
    216
    LOL! Looks like i made a fool of myself thinking I could use any letter to specify what content goes in a div.

    I followed your reply here to include several divs into the "footer" div.
    What do the b and i in #footer h2 b and #footer i stand for?

    For the site in my first post, what can I put instead of d?

  4. #4
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    The <b> and <i> tags mean bold and italics - they are normally used to style text inline, but have have fallen out of favour as <strong> and <em> (emphasis) do the same job but with semantic meaning. Although the <b> and <i> tags are normal used for text, they can be styled for other purposes such as image attachment when no other element already is available.

    The way you have sliced the graphics looks like a carry over from table layouts. Looking at the page, I see a heading (Juventus Online) which also happens to be a link to the home page. Asfaras non-visual browsers go, their interpretation of elements doesn't have to be exactly the same as the visual, as long as the overall meaning is the same. In your case, non-visual browsers can see a heading plus a link to the home page, giving an extra element to attach an image to. I would also slice and apply the images differently - the referee graphic can be applied (in whole) the the background of the header div, the logo as a background to a <h1> heading element, and the Juventus text graphic as a background to the home page link.

    A rework of the site could be - html:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Juventus Online</title>
    <link href="style.css" rel="stylesheet" type="text/css">
    </head>
    
    <body>
    <div id="wrapper">
      <div id="header">
        <h1>Juventus Online</h1>
        <a href="index.html" class="home">Home page</a>
        <ul id="toplinks">
          <li><a href="#">LOGIN</a></li>
          <li><a href="#">SITEMAP</a></li>
          <li class="last"><a href="#">CONTACT</a></li>
          </ul>
        <ul id="nav">
          </ul>
      </div>
    </div>
    </body>
    </html>
    Note that with the <h1> and homepage link, the html has more meaning than before. The resliced images I used are attached, and the css I came up with is :
    Code:
    * {
    	margin: 0;
    	padding: 0;
    }
    body {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 14px;
    	color: #00005E;
    	background-color: #FFFFFF;
    }
    p {
    	padding: 8px 0;
    	line-height: 1.3em;
    }
    #wrapper {
    	width: 775px;
    	margin: 0 auto;
    	border: 1px solid #000000;
    	padding-right: 1px;
    }
    #header {
    	height: 179px;
    	background-color: #000000;
    	color: #FFFFFF;
    	background-image: url(images/headerback.jpg);
    	background-repeat: no-repeat;
    	background-position: right top;
    }
    #header h1 {
    	float: left;
    	font-size: 1px;
    	color: #000000;
    	background-image: url(images/logo.jpg);
    	width: 128px;
    	height: 179px;
    }
    #header .home {
    	float: left;
    	width: 207px;
    	height: 123px;
    	background-image: url(images/juventus.jpg);
    	margin-top: 19px;
    	font-size: 1px;
    	color: #000000;
    }
    #toplinks li {
    	list-style: none;
    	float: left;
    	border-right: 2px solid #F8C632;
    	margin-top: 4px;
    }
    #toplinks .last {
    	border: 0;
    }
    #toplinks a {
    	font-size: 70%;
    	color: #FFFFFF;
    	text-decoration: none;
    	padding: 0 6px;
    	float: left;
    	line-height: 1.2em;
    }
    #toplinks a:hover {
    	text-decoration: underline;
    }
    #nav {
    	display: block;
    	height: 37px;
    	width: 647px;
    	float: left;
    	background-image: url(images/nav_bg.gif);
    }
    Attached Images Attached Images

  5. #5
    Join Date
    Dec 2002
    Posts
    216
    Wow I'm getting lost. I used to use divs to place each element where I wanted them, and even though using lists seems a more clean way to do it, it's kind of confusing.

    I've tried to continue with the template from what you have done, but it's all broken. The wrapper border doesn't wrap what I've added, even though it's inside the wrapper.

    That's how it should look like: http://pages.intnet.mu/didierah/test/image.jpg

    and that's how it currently looks like: h t t p://pages(dot)intnet(dot)mu/didierah/test/

    Could you please help me out? I'm starting to loose all interest in continuing this page

    Would it be easier and quicker if I learned how to export it in HTML with Fireworks?
    Last edited by WebJoel; 06-22-2008 at 12:55 PM.

  6. #6
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    Quote Originally Posted by hitman
    Would it be easier and quicker if I learned how to export it in HTML with Fireworks?
    NO NO NO !!! - this will produce crap code making the site impossible to understand by non-visual browsers.

    Don't give up now! - it takes a little while to grasp the concept of styling content rather than fitting content into visual constraints as with table layouts, but the rewards are worth it.

    I'm having another play with this, and its looking good - however I won't be able to post back until tomorrow, when we will explore the possiblities opened up by styling lists

  7. #7
    Join Date
    Dec 2002
    Posts
    216
    Alright. It's just that I've seen a guide a while back that said you could export from Fireworks to Dreamweaver, where it would supposedly give proper coding, I haven't gone through it though. But, I don't like using automating programs, as I don't have control over what I'm doing.

    I'll stick with manual coding, even though it seems a bit more confusing than when I started learning it.

  8. #8
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    Manual coding only seems more confusing as the modern methods use a different approach than previously - once you start thinking content first and presentation second, it becomes second nature.

    I will go through this section by section over several posts, with the complete html and css at the end. Some of this is based on your mockup graphic, and goes a little further than your current sample site.

    Before I start, I noticed you reduced the body text size to 10px. I would strongly recommend against going so small - 10px as a general text size is too small for most people to comfortably read at a sensible distance from the monitor, which will prompt them to resize the text in their browser. If reasonable steps aren't taken to allow for text resizing, this can easily break a layout. If the text size is set to a reasonable value to start with, then less people will need to increase the size. I would consider 12px to be the minimum for comfortable long-term reading, and have reset the body text size to this value, and is used as the base size for the following discussions.

    To start from where I left off previously, we look at the top menu. As the button images are presentation, they shouldn't be in the html. Applying the images as backgrounds also gives the possiblilty for future rollover graphics if desired. The menu links should also contain text for the benefit of non-visual browsers. So the html for the menu section can be simply:
    Code:
        <ul id="nav">
          <li><a href="index.html" class="navhome">Home</a></li>
          <li><a href="#" class="navhist">History</a></li>
          <li><a href="#" class="navplay">Players</a></li>
          <li><a href="#" class="navstore">Store</a></li>
        </ul>
    I have given each menu item a class name to apply individual background images, and it also allows the possibility of using the class name in association with a body id to use a different button graphic to indicate which page you are on - just another feature than can be added later with little change. The css for this section can thus be :
    Code:
    #nav {
    	display: block;
    	height: 37px;
    	width: 647px;
    	float: left;
    	background-image: url(images/header004.jpg);
    	background-repeat: no-repeat;
    	background-position: right top;
    }
    #nav li {
    	list-style: none;
    	float: left;
    }
    #nav a {
    	display: block;
    	height: 37px;
    	font-size: 1px;
    	text-indent: -1000px;
    }
    #nav .navhome {
    	background-image: url(images/nav_01home.gif);
    	width: 94px;
    }
    #nav .navhist {
    	background-image: url(images/nav_02history.gif);
    	width: 93px;
    }
    #nav .navplay {
    	background-image: url(images/nav_03players.gif);
    	width: 102px;
    }
    #nav .navstore {
    	background-image: url(images/nav_04store.gif);
    	width: 89px;
    }
    As the player's belly graphic is the correct with to fill the end of the nav bar, it can be applied as the background of #nav, positioned to the right.

    Each <a> link is styled as a block and given the appropriate height. The link text is reduced in size and indented way off the page to effectively hide it from view. The individual background graphics button width are then applied via each button's class name.

    Following the #header div can be the #content div. As there is no background image required here, and the div will be against the bottom of the #nav / #header, the graphic slice of the player's upper legs can be applied as a background to the #content div, positioned to line things up - this saves having a separate div, and a non-content image in the html.
    Code:
    #content {
    	background-image: url(images/header005.jpg);
    	background-repeat: no-repeat;
    	background-position: 537px top;
    	overflow: hidden;
    	clear: both;
    }
    The overflow ensures the div will visually wrap floated contents, and the clear ensures the div positions below the floats in the menu.

    Discussion continues....

  9. #9
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    Looking at the left sidebar of your mockup, the Latest Scores section is a list of score items, with each item also listing the score and opposition team. This can then be logically marked up as an unordered list, with each list item (li) containing a single level definition list. The number of elements to which styling can be applied in this structure will enable all those &nbsp's and br's to be eliminated. The html for the left bar (#inner1) can therefore be :
    Code:
      	<div id="inner1">
    	  <ul id="latestscores">
    	    <li>
    		  <h2>Latest Scores</h2>
    		</li>
    	    <li>11.08.2007
    		  <dl>
    	      	<dt>5-2</dt>
    	      	<dd class="roma">vs. Roma</dd>
    	      </dl>
    	    </li>
    	    <li>04.08.2007
    		  <dl>
    	      	<dt>1-1</dt>
    	      	<dd class="sunderland">vs. Sunderland</dd>
    	      </dl>
    		</li>
    	    <li>01.08.2007
    		  <dl>
    	      	<dt>0-1</dt>
    	      	<dd class="hamburg">vs. Hamburg</dd>
    	      </dl>
    		</li>
    	  </ul>
    	  <a href="#" class="advert">New 07/08 Replica Jersey - visit our store</a>
    	</div>
    The first list item contains a <h2> heading announcing the purpose of the list - this will be styled to use the background graphic. The other list items contain the date and a definition list, which has the score as the definition term and the opposition club as the definition description. The <dd>s are given class names to allow the appropriate club logo graphic to be applied, again as background images. Following the Latest Scores list is the <a> link for the jersey advert - again the image will be applied as a background and link text is used so non-visual browsers can identify the link purpose.

    The css for this section is :
    Code:
    #inner1 {
    	float: left;
    	width: 156px;
    }
    #latestscores {
    	border: 2px solid #999999;
    	background-color: #232323;
    	color: #CCCCCC;
    	margin: 30px 0 0 4px;
    	overflow: hidden;
    }
    * html #latestscores, * html #content {
    	height: 1%;
    }
    #latestscores li {
    	list-style: none;
    	border-top: 1px solid #666666;
    	clear: both;
    }
    #latestscores dt {
    	font-size: 160%;
    	font-weight: bold;
    	color: #FFFFFF;
    	float: left;
    	padding: 10px 0 0 15px;
    }
    #latestscores dd {
    	float: right;
    	padding-top: 35px;
    	margin: 0 0 5px 10px;
    	width: 80px;
    	font-size: 80%;
    	color: #FFFFFF;
    	background-repeat: no-repeat;
    	background-position: center top;
    	text-align: center;
    }
    #latestscores h2 {
    	display: block;
    	height: 28px;
    	font-size: 1px;
    	color: #5B5B5B;
    	background-image: url(images/latestscores.gif);
    }
    #latestscores .roma {
    	background-image: url(images/roma.jpg);
    }
    #latestscores .sunderland {
    	background-image: url(images/sunderland.jpg);
    }
    #latestscores .hamburg {
    	background-image: url(images/hamburg.jpg);
    }
    #inner1 .advert {
    	display: block;
    	height: 100px;
    	font-size: 1px;
    	background-image: url(images/advert.jpg);
    	background-repeat: no-repeat;
    	background-position: center top;
    	text-indent: -1000px;
    	margin: 10px 0 0 4px;
    }
    The #latestscores <ul> itself is given the border and margins to position it, along with a background colour. Whilst a graphic can be used as a background here (as in your test page), using one that has the divider lines is problematic trying to align content, and breaks if the text is resized anyway, so I am applying the dividers via a border on the list items. The position of the divider on your mockup seemed to be a little illogical and tended to divide things incorrectly, so I have put the divider lines above each date. The * html part with 1% height is a hack for IE6 to force the <ul> to visually enclose contents - this is also applied to the #content div at the same time for the same reason. Clear:both in the <li>s ensures each list item does not overlap the one above due to floated elements.

    The definition term (dt) that holds the score, is given the appropriate font size, weight and colour, and is floated to the left. Padding spaces it from the top and left edge.

    The definition description (dd) that holds the opposition team name is floated to the right, given a width to allow for the graphic, and given some room at the right and bottom with margins. The top padding spaces the text downward and allows room for the team graphic to be placed as a background via the class names further down. Text align centres the team name under the graphic.

    The <h2> heading at the top of the list gets the appropriate size and the heading image as its background. Here I hid the text by reducing it and making it the same colour as the top of the graphic.

    The jersey advert link is styled as a block and given the correct size for the image, applied as a background. The text is hidden by indenting way off the left of the page, and margins position it correctly below the list.

    Discussion continues ....

  10. #10
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    With the centre content, the image looks like it could convey a particular incident, and could be subject to regular change - in that context, the graphic could be considered viable content and therefore is left in the html as an image. When including an image in the html, it should always have an "alt" defined, even if it is empty. An image should also have the size listed in the html so that the browser knows how much room to allocate for it before the image downloads - this prevents the page shifting and expanding as images load. A title attribute will also give the viewer some additional info about the picture when it is hovered over.

    The html for the centre content can thus be :
    Code:
    	<div id="inner2">
    	  <h2>Excepteur sint occaecat </h2>
    	  <img src="images/nedved.jpg" alt="" width="310" height="159" class="displaypic" title="description for picture">
    	  <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. <br>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>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
        </div>
    The associated css is then:
    Code:
    #inner2 {
    	float: left;
    	width: 350px;
    	padding: 30px 14px 0;
    }
    #inner2 h2 {
    	font-size: 150%;
    }
    
    #inner2 .displaypic {
    	display: block;
    	margin: 10px auto;
    	border: 2px solid black;
    }
    Not much to say here. Padding spaces things from the top and right side. The image is displayed as a block with auto side margins to centre it, and the image border is applied via the css as well.

    Discussion continues ....

  11. #11
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    Turning now to the right column, the "latest news" panel looks like .... another list! As for the latest scores list, the first item can be a <h2> heading. Looking at your mockup graphic, the ">" character is being used as a bullet point for each item. As this cannot be selected as a valid bullet display, enclosing each list item text in a paragraph tag allows us to style the list as though the ">" was a bullet.

    Below this on your mockup graphic is the League table. Whilst you have not tackled that yet in your test page, I will include it here due to styling hastles with this section. The table is a display of tabular data, and therefore should be marked up appropriately as a .... table, as this is what they are for. There is more to tables than <tr> and <td> tags - tables can have a <caption> which is the ideal place to define the heading of the table, and the <th> element is used to describe the contents of the particular row or column. Here I have used the <th> to list the team name, describing the data across the row - it also helps when styling.

    The html for the right column can then be :
    Code:
        <div id="inner3">
    	  <ul id="latestnews">
    	    <li><h2>Latest News</h2></li>
    	    <li><p>> Lorem ipsum dolor sit amet, consectetur adipisicing elit</p></li>
    		<li><p>> Excepteur sint occaecat cupidatat</p></li>
    		<li><p>> Non proident, sunt in culpa qui officia</p></li>
    		<li><p>> Excepteur sint occaecat cupidatat</p></li>
    		<li><p>> Lorem ipsum dolor sit amet, consectetur adipisicing elit</p></li>
    	  </ul>
    	  <table id="leaguetable">
    		<caption>League Table</caption>
    		<tr>
    		  <th scope="row">&nbsp;</th>
    		  <td>PT</td>
    		  <td>P</td>
    		  <td>W</td>
    		  <td>N</td>
    		  <td>L</td>
    		</tr>
    		<tr class="us">
    		  <th scope="row">Juventus</th>
    		  <td>85</td>
    		  <td>42</td>
    		  <td>28</td>
    		  <td>10</td>
    		  <td>4</td>
    		</tr>
    		<tr>
    		  <th scope="row">Napoli</th>
    		  <td>79</td>
    		  <td>42</td>
    		  <td>21</td>
    		  <td>16</td>
    		  <td>5</td>
    		</tr>
    		<tr>
    		  <th scope="row">Genoa</th>
    		  <td>78</td>
    		  <td>42</td>
    		  <td>23</td>
    		  <td>9</td>
    		  <td>10</td>
    		</tr>
    		<tr>
    		  <th scope="row">Piacenza</th>
    		  <td>68</td>
    		  <td>42</td>
    		  <td>20</td>
    		  <td>8</td>
    		  <td>14</td>
    		</tr>
    		<tr>
    		  <th scope="row">Rimini</th>
    		  <td>67</td>
    		  <td>42</td>
    		  <td>17</td>
    		  <td>16</td>
    		  <td>9</td>
    		</tr>
    		<tr>
    		  <th scope="row">Brescia</th>
    		  <td>67</td>
    		  <td>42</td>
    		  <td>19</td>
    		  <td>10</td>
    		  <td>13</td>
    		</tr>
    		<tr>
    		  <th scope="row">Bologna</th>
    		  <td>65</td>
    		  <td>42</td>
    		  <td>18</td>
    		  <td>11</td>
    		  <td>13</td>
    		</tr>
    	  </table>
    	</div>
    Note that no size parameters for any table elements are specified in the html - all this will be done in the css.

    The css for the column and news section can be (I will discuss the table styling next post due to complexities and hacks required) :
    Code:
    #inner3 {
    	float: left;
    	width: 228px;
    	padding: 30px 4px 0;
    }
    #latestnews {
    	background-color: #232323;
    	border: 2px solid #999999;
    	color: #CCCCCC;
    }
    #latestnews li {
    	list-style: none;
    }
    #latestnews h2 {
    	display: block;
    	height: 26px;
    	background-image: url(images/latestnews.gif);
    	font-size: 1px;
    	color: #FFFFFF;
    	background-position: -2px -2px;
    }
    #latestnews p {
    	margin: 10px 5px 10px 1.5em;
    	padding: 0;
    	text-indent: -1em;
    	color: #FFFFFF;
    }
    The column itself is again floated left and given the appropriate width (with about 1 or 2 pixels to spare). Padding spaces the content down to line up with the bottom of the player graphic, and keeps content in from the sides.

    The #latestnews <ul> gets the colours and border like the #latestscores <ul> did. The <h2> heading similarly is displayed as a block, given a size and has the heading image applied as a background. As with the latest scores, the text is hidden by reducing its size and colouring it the same as the graphic background. As your latestnews.gif image actually included the border, I have negatively offset the image to hide these borders.

    The bullet-type behaviour of the list items is achieved by using a negative text indent on the paragraphs - this "pulls" the start of the paragraph left by 1em, about the size of a ">" plus a space. A left margin of 1.5em then shifts the whole lot to the right, giving the appearance of list bullet indents. The padding is zeroed here to over-ride the general paragraph padding, and margins are used to controll spacing between list items.

    Discussion continues .....

  12. #12
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    Styling the table is a bit of a pain, especially when a caption is used. Although the caption is contained within the table structure, it is outside of it when you place a border around the table - the border does not enclose the caption as well. Therefore the caption also requires a border, and the bottom border of the caption and top border of the table are set to zero to give a continuous border around the lot.

    Another problem is that IE6 inludes the caption if you put a top margin on the table (thereby spacing both caption and table downwards), whilst FF and IE7 applies the top margin to the table only, thereby separating the caption from the table - in this case the caption must have the margin. As IE6 seems to ignore a top margin on the caption, we can target IE6 using a * html hack to apply the margin to the table in this browser only.

    The css for the table section is :
    Code:
    #leaguetable {
    	border: 2px solid #999999;
    	width: 228px;
    	border-top: 0;
    	border-collapse: collapse;
    }
    * html #leaguetable {
    	margin-top: 15px;
    }
    #leaguetable caption {
    	margin-top: 15px;
    	border: 2px solid #999999;
    	border-bottom: 0;
    	height: 28px;
    	background-image: url(images/leaguetable.gif);
    	font-size: 1px;
    	color: #656565;
    }
    #leaguetable th {
    	text-align: left;
    	padding-left: 5px;
    	font-weight: normal;
    	width: 80px;
    }
    #leaguetable td {
    	text-align: center;
    }
    #leaguetable .us, #leaguetable .us th {
    	font-weight: bold;
    }
    The caption gets the heading image as background, with the text hidden by colouring as in previous headings.

    The <th> tags are given a left text align and normal font weight as the default styling for <th>s is centre alignment and bold text. They are also given a width - the <td>s will adjust themselves automatically to fill the remaining width. The second row (which contains the home team info) is given a class of "us", and this is used to bold the text on that row.

    Discussion continues .....

  13. #13
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    Whilst I'm on a roll, may as well include the footer in this as well

    The footer contains, surprise, surprise, another list of links! .. and a paragraph of text. Similarly to the top navigation list structure, the footer html can be :
    Code:
        <div id="footer">
          <ul>
          	<li><a href="#">HOME</a></li>
          	<li><a href="#">HISTORY</a></li>
          	<li><a href="#">PLAYERS</a></li>
          	<li class="last"><a href="#">STORE</a></li>
          </ul>
    	  <p>Copyright &copy; JuventusOnline.com - All rights reserved</p>
    	</div>
    Styling for this section is :
    Code:
    #footer {
    	clear: both;
    	text-align: center;
    }
    #footer ul {
    	background-color: #000000;
    	display: block;
    	padding: 4px 0;
    }
    #footer li {
    	list-style: none;
    	border-right: 2px solid #F8C632;
    	display: inline;
    	line-height: 1em;
    }
    #footer .last {
    	border: 0;
    }
    #footer a {
    	font-size: 75%;
    	color: #FFFFFF;
    	text-decoration: none;
    	padding: 0 6px;
    }
    #footer a:hover {
    	text-decoration: underline;
    }
    #footer p {
    	padding: 0;
    	font-size: 75%;
    }
    The clear:both places the footer below the floated columns. The links list is styled similar to the top nav list using right borders on the <li>s as separators. As we want this list to be centred, floats are not used, instead we use inline display on the <li>s to sit the items beside each other. The <ul> itself is styled as a block so it occupies the entire avaiable width, and its black background forms the black bar.

    That's about it. The next two posts will have the full html and css.

  14. #14
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    The full page html :
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Juventus Online</title>
    <link href="style.css" rel="stylesheet" type="text/css">
    </head>
    
    <body>
    <div id="wrapper">
      <div id="header">
        <h1>Juventus Online</h1>
        <a href="index.html" class="home">Home page</a>
        <ul id="toplinks">
          <li><a href="#">LOGIN</a></li>
          <li><a href="#">SITEMAP</a></li>
          <li class="last"><a href="#">CONTACT</a></li>
        </ul>
        <ul id="nav">
          <li><a href="index.html" class="navhome">Home</a></li>
          <li><a href="#" class="navhist">History</a></li>
          <li><a href="#" class="navplay">Players</a></li>
          <li><a href="#" class="navstore">Store</a></li>
        </ul>
      </div>
      
      <div id="content">
    
      	<div id="inner1">
    	  <ul id="latestscores">
    	    <li>
    		  <h2>Latest Scores</h2>
    		</li>
    	    <li>11.08.2007
    		  <dl>
    	      	<dt>5-2</dt>
    	      	<dd class="roma">vs. Roma</dd>
    	      </dl>
    	    </li>
    	    <li>04.08.2007
    		  <dl>
    	      	<dt>1-1</dt>
    	      	<dd class="sunderland">vs. Sunderland</dd>
    	      </dl>
    		</li>
    	    <li>01.08.2007
    		  <dl>
    	      	<dt>0-1</dt>
    	      	<dd class="hamburg">vs. Hamburg</dd>
    	      </dl>
    		</li>
    	  </ul>
    	  <a href="#" class="advert">New 07/08 Replica Jersey - visit our store</a>
    	</div>
    
    	<div id="inner2">
    	  <h2>Excepteur sint occaecat </h2>
    	  <img src="images/nedved.jpg" alt="" width="310" height="159" class="displaypic" title="description for picture">
    	  <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. <br>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>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
        </div>
      	
        <div id="inner3">
    	  <ul id="latestnews">
    	    <li><h2>Latest News</h2></li>
    	    <li><p>> Lorem ipsum dolor sit amet, consectetur adipisicing elit</p></li>
    		<li><p>> Excepteur sint occaecat cupidatat</p></li>
    		<li><p>> Non proident, sunt in culpa qui officia</p></li>
    		<li><p>> Excepteur sint occaecat cupidatat</p></li>
    		<li><p>> Lorem ipsum dolor sit amet, consectetur adipisicing elit</p></li>
    	  </ul>
    	  <table id="leaguetable">
    		<caption>League Table</caption>
    		<tr>
    		  <th scope="row">&nbsp;</th>
    		  <td>PT</td>
    		  <td>P</td>
    		  <td>W</td>
    		  <td>N</td>
    		  <td>L</td>
    		</tr>
    		<tr class="us">
    		  <th scope="row">Juventus</th>
    		  <td>85</td>
    		  <td>42</td>
    		  <td>28</td>
    		  <td>10</td>
    		  <td>4</td>
    		</tr>
    		<tr>
    		  <th scope="row">Napoli</th>
    		  <td>79</td>
    		  <td>42</td>
    		  <td>21</td>
    		  <td>16</td>
    		  <td>5</td>
    		</tr>
    		<tr>
    		  <th scope="row">Genoa</th>
    		  <td>78</td>
    		  <td>42</td>
    		  <td>23</td>
    		  <td>9</td>
    		  <td>10</td>
    		</tr>
    		<tr>
    		  <th scope="row">Piacenza</th>
    		  <td>68</td>
    		  <td>42</td>
    		  <td>20</td>
    		  <td>8</td>
    		  <td>14</td>
    		</tr>
    		<tr>
    		  <th scope="row">Rimini</th>
    		  <td>67</td>
    		  <td>42</td>
    		  <td>17</td>
    		  <td>16</td>
    		  <td>9</td>
    		</tr>
    		<tr>
    		  <th scope="row">Brescia</th>
    		  <td>67</td>
    		  <td>42</td>
    		  <td>19</td>
    		  <td>10</td>
    		  <td>13</td>
    		</tr>
    		<tr>
    		  <th scope="row">Bologna</th>
    		  <td>65</td>
    		  <td>42</td>
    		  <td>18</td>
    		  <td>11</td>
    		  <td>13</td>
    		</tr>
    	  </table>
    	</div>
    	
        <div id="footer">
          <ul>
          	<li><a href="#">HOME</a></li>
          	<li><a href="#">HISTORY</a></li>
          	<li><a href="#">PLAYERS</a></li>
          	<li class="last"><a href="#">STORE</a></li>
          </ul>
    	  <p>Copyright &copy; JuventusOnline.com - All rights reserved</p>
    	</div>
    
      </div>
    </div>
    </body>
    </html>

  15. #15
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    and the full css file :
    Code:
    * {
    	margin: 0;
    	padding: 0;
    }
    body {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	color: #000000;
    	background-color: #FFFFFF;
    }
    p {
    	padding: 8px 0;
    	line-height: 1.3em;
    }
    #wrapper {
    	width: 775px;
    	margin: 0 auto;
    	border: 1px solid #000000;
    }
    #header {
    	height: 179px;
    	background-color: #000000;
    	color: #FFFFFF;
    	background-image: url(images/headerback.jpg);
    	background-repeat: no-repeat;
    	background-position: right top;
    }
    #header h1 {
    	float: left;
    	font-size: 1px;
    	color: #000000;
    	background-image: url(images/logo.jpg);
    	width: 128px;
    	height: 179px;
    }
    #header .home {
    	float: left;
    	width: 207px;
    	height: 123px;
    	background-image: url(images/juventus.jpg);
    	margin-top: 19px;
    	font-size: 1px;
    	color: #000000;
    }
    #toplinks li {
    	list-style: none;
    	float: left;
    	border-right: 2px solid #F8C632;
    	margin-top: 4px;
    }
    #toplinks .last {
    	border: 0;
    }
    #toplinks a {
    	font-size: 75%;
    	color: #FFFFFF;
    	text-decoration: none;
    	padding: 0 6px;
    	float: left;
    	line-height: 1.2em;
    }
    #toplinks a:hover {
    	text-decoration: underline;
    }
    #nav {
    	display: block;
    	height: 37px;
    	width: 647px;
    	float: left;
    	background-image: url(images/header004.jpg);
    	background-repeat: no-repeat;
    	background-position: right top;
    }
    #nav li {
    	list-style: none;
    	float: left;
    }
    #nav a {
    	display: block;
    	height: 37px;
    	font-size: 1px;
    	text-indent: -1000px;
    }
    #nav .navhome {
    	background-image: url(images/nav_01home.gif);
    	width: 94px;
    }
    #nav .navhist {
    	background-image: url(images/nav_02history.gif);
    	width: 93px;
    }
    #nav .navplay {
    	background-image: url(images/nav_03players.gif);
    	width: 102px;
    }
    #nav .navstore {
    	background-image: url(images/nav_04store.gif);
    	width: 89px;
    }
    #content {
    	background-image: url(images/header005.jpg);
    	background-repeat: no-repeat;
    	background-position: 537px top;
    	overflow: hidden;
    	clear: both;
    }
    #inner1 {
    	float: left;
    	width: 156px;
    }
    #latestscores {
    	border: 2px solid #999999;
    	background-color: #232323;
    	color: #CCCCCC;
    	margin: 30px 0 0 4px;
    	overflow: hidden;
    }
    * html #latestscores, * html #content {
    	height: 1%;
    }
    #latestscores li {
    	list-style: none;
    	border-top: 1px solid #666666;
    	clear: both;
    }
    #latestscores dt {
    	font-size: 160%;
    	font-weight: bold;
    	color: #FFFFFF;
    	float: left;
    	padding: 10px 0 0 15px;
    }
    #latestscores dd {
    	float: right;
    	padding-top: 35px;
    	margin: 0 0 5px 10px;
    	width: 80px;
    	font-size: 80%;
    	color: #FFFFFF;
    	background-repeat: no-repeat;
    	background-position: center top;
    	text-align: center;
    }
    #latestscores h2 {
    	display: block;
    	height: 28px;
    	font-size: 1px;
    	color: #5B5B5B;
    	background-image: url(images/latestscores.gif);
    }
    #latestscores .roma {
    	background-image: url(images/roma.jpg);
    }
    #latestscores .sunderland {
    	background-image: url(images/sunderland.jpg);
    }
    #latestscores .hamburg {
    	background-image: url(images/hamburg.jpg);
    }
    #inner1 .advert {
    	display: block;
    	height: 100px;
    	font-size: 1px;
    	background-image: url(images/advert.jpg);
    	background-repeat: no-repeat;
    	background-position: center top;
    	text-indent: -1000px;
    	margin: 10px 0 0 4px;
    }
    #inner2 {
    	float: left;
    	width: 350px;
    	padding: 30px 14px 0;
    }
    #inner2 h2 {
    	font-size: 150%;
    }
    
    #inner2 .displaypic {
    	display: block;
    	margin: 10px auto;
    	border: 2px solid black;
    }
    #inner3 {
    	float: left;
    	width: 228px;
    	padding: 30px 4px 0;
    }
    #latestnews {
    	background-color: #232323;
    	border: 2px solid #999999;
    	color: #CCCCCC;
    }
    #latestnews li {
    	list-style: none;
    }
    #latestnews h2 {
    	display: block;
    	height: 26px;
    	background-image: url(images/latestnews.gif);
    	font-size: 1px;
    	color: #FFFFFF;
    	background-position: -2px -2px;
    }
    #latestnews p {
    	margin: 10px 5px 10px 1.5em;
    	padding: 0;
    	text-indent: -1em;
    	color: #FFFFFF;
    }
    #leaguetable {
    	border: 2px solid #999999;
    	width: 228px;
    	border-top: 0;
    	border-collapse: collapse;
    }
    * html #leaguetable {
    	margin-top: 15px;
    }
    #leaguetable caption {
    	margin-top: 15px;
    	border: 2px solid #999999;
    	border-bottom: 0;
    	height: 28px;
    	background-image: url(images/leaguetable.gif);
    	font-size: 1px;
    	color: #656565;
    }
    #leaguetable th {
    	text-align: left;
    	padding-left: 5px;
    	font-weight: normal;
    	width: 80px;
    }
    #leaguetable td {
    	text-align: center;
    }
    #leaguetable .us, #leaguetable .us th {
    	font-weight: bold;
    }
    #footer {
    	clear: both;
    	text-align: center;
    }
    #footer ul {
    	background-color: #000000;
    	display: block;
    	padding: 4px 0;
    }
    #footer li {
    	list-style: none;
    	border-right: 2px solid #F8C632;
    	display: inline;
    	line-height: 1em;
    }
    #footer .last {
    	border: 0;
    }
    #footer a {
    	font-size: 75%;
    	color: #FFFFFF;
    	text-decoration: none;
    	padding: 0 6px;
    }
    #footer a:hover {
    	text-decoration: underline;
    }
    #footer p {
    	padding: 0;
    	font-size: 75%;
    }
    Enjoy, study and learn

    Cheers
    Graeme

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles