HTML

 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
User Name:
Password:
Remember me



Go Back   Tutorialized ForumsWeb Design & DevelopmentHTML

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread Tutorialized Forums Sponsor:
  #1  
Old February 28th, 2013, 03:28 PM
bluejay10 bluejay10 is offline
Registered User
Tutorialized Newbie (0 - 499 posts)
 
Join Date: Feb 2013
Posts: 1 bluejay10 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 4 m 37 sec
Reputation Power: 0
Why aren't the html and css pages with same code producing the same output?

This is a layout question about mostly done homework.If you go on http://sidetrack1.de...7?_sid=597d29d3 you'll see what it's suppose 2b like,what it looked like last semester and what I have.

For some reason what I have right now is far off from what it's suppose 2b like '~`.There nearly identical (except for commented things) but why are the outputs on Chrome different ?.
--------------------------------
Theses are my present HTML and CSS sheets
Code:
<!DOCTYPE html>
<html>
  <head>
<!--
  statement of authorship
  <section id="activities"
-->
<script src="modernizr-2.js"></script>
<title>Fiji Sunset Spa and Resort Gift Shop</title>
<link rel="stylesheet" href="printstyles2.css" type="text/css"/>
<link rel="stylesheet" href="spastyles2.css" type="text/css"/>
<style type="text/css">
#container{
  background-image:url('images/texture_background.jpg');
  background-repeat:repeat;
  }

  aside {
  width:30%;
  float:left;
  padding:0.75%;
  background-color:#f3da79;

  border: 2px solid red;
  }

  #main {
  float:right;
  margin-left:3%;
  padding:0.75%;
  background-color:#f3da79;

  border: 2px solid red;
  }

  h1 {
  text-align:center;
  }

  h2{
  text-align:center;
  }

  ul {
  margin-left:1.5em;
  padding-top:1em;
  }
</style>
</head>
<body>
<div id="container">
<header>
<a href="spa.htm"><img src="images/fijispa.jpg" alt="Fiji Spa - outdoor massage" /></a>
</header> <!--end header-->
<nav>
<ul>
<li><a href="#">Directions</a></li>
<li><a href="#">Reservations</a></li>
<li><a href="#">Lunch Menu</a></li>
<li><a href="#">Dinner Menu</a></li>
<li><a href="gift2.html">Gift Shop</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
<div>
<aside>
<h2>Gift Cards</h2>
<ul>
<li>We are pleased to announce that the SpaCard gift card is now available. Use your SpaCard
at any restaurant or at any of our shops that charge an additional fee for service.</li>
<li>Use your SpaCard at our hair and beauty salon and receive 10% off any service.</li>
<li>Watch for the SpaCard specials posted at the entrance to each restaurant. To find out more
about the benefits of having a SpaCard, speak to the concierge or to any of our sales associates.</li>
</ul>
</aside>
<section id="main">
<h1>Our Gift Shop</h1>
<p>Our gift shop has all the souvenirs you want, but in addition, we now have a full line of sportswear in
every size and at every price point. We even have our own line of designer sportswear customized with the Sundown logo.
You can wear these items anywhere and be in style no matter what the season or the setting.</p>
<p>Come to the gift shop and try on shorts, shirts, and swimwear. We have hooded jackets as well for those
summer nights when there still is a chill in the air. We also have a fully equipped dive shop. In addition, we
carry a full line of handy personal items.</p>
<p>If you are looking for a snack before or after our main dining facilities close, come to the gift shop
and have some coffee, tea, juice, and a light breakfast. We have sitdown and takeout service as well.</p>
<p>Stock up on healthful snacks and low-calorie, high-carb beverages before any excursion.</p>
<p>We want you to know that we value your patronage, and we want you to enjoy every part of your stay here.
It's the memories of your visit that will be priceless.</p>
<!-- end main
margin-right: 1em;
padding-right:5em;
-->
</section>
</div>
<footer>
<h4>The Fiji Sunset Spa and Resort Gift Shop  Open each day from 7 a.m. to 11 p.m.</h4>
</footer> <!-- end footer -->
</div> <!-- end div container -->
</body>
</html>

Code:
* {
  margin:0 px;
  padding:0 px;
      }
body{
margin:0;
    padding:0;
    padding-top:10px;
    text-align:center;
background-color:white;
font-size:0.9em;
font-family:Arial,Verdana,Helevetica,sans-serif;
}
#container
  {
  width:90%;
  margin-top:10 px;
  margin-bottom:10px;
  margin-left:auto;
  margin-right:auto; /* auto allows the size 2b moded 2 fit in2 the container */
  border-width:2px wide,solid,black;
  border-radius:22px;
  }
header {
background-color:darkkhaki;
border-top-left-radius:20px;
border-top-right-radius:20px;
text-align:center;
}
  
   nav {
padding:0.5em;
background-color:darkkhaki;
text-align:center;
}

nav ul li
{
display:inline;
list-style-type:none;
background-image:url(texture_background.jpg);
    background-repeat:repeat;
}

nav a
{
padding:0.25em;
color:#5c4033;
font-weight:bold;
text-decoration:none;
}

/* u finished this all already */

nav a:hover
{
color:black;
background-color:goldenrod;
text-decoration: underline;
}

#activities
{
width:20%;
float:left;
background-image:url(images/texture_background.jpg);
background-repeat:repeat;
}
#activities h3
{
margin-bottom:0.5em;
background-color:goldenrod;
font:white;
text-align:centered;
text-transform:uppercase;
}

#spa h2
{
   background-color:goldenrod;
   text-align:center;
   color:white;
   margin-bottom:0.5 em;
   text-transform:uppercase;
}

#activities p
{
padding:0% 1% 1% 5%;
}

/*#main
{
float:left;
}*/

#main h1
{
margin-bottom:1em;
text-align:center;
}
  
footer
{
clear:both;
margin-top:1em;
padding:1em auto 1em auto;
border-top:solid black;
border-width:2px;
clear:both;
font-weight:bold;
text-align:center;
}
figure
{
text-align:center;
}

Code:
*{
  size: 8.5in 11in;
margin:0.5in;
}
nav{
/* display:none; */
display:all;
}

header{
/* display:none; */
display:all;
}

body{

  /* size: 8.5in 11in;
margin:0.5in;*/
color:black;
background-color:white;
font-size:12 pt;
font:"Times New Roman" , Times ,serif ;
line-height:120%;
}

=======================================
here is the old more visually correct code below
=======================================
Code:
<!DOCTYPE html>
<html>
  <head>
    <script src="modernizr-2.js"></script>
    <title>Fiji Sunset Spa and Resort Gift Shop</title>

  <style type="text/css">
  #container{
  background-image:url(images/texture_background.jpg);
  background-repeat:repeat;
  }

  aside {
  width:30%;
  float:left;
  padding:0.75%;
  background-color:#f3da79;
  }

  #main {
  float:right;
  width:65%;

  margin-left:3 %;
  padding:0.75%;
  background-color:#f3da79;
  }

  h1 {
  text-align:center;
  }

  h2{
  text-align:center;
  }

  ul {
  margin-left:1.5em;
  padding-top:1em;
  }

  </style>


  </head>

  <body>
  
    <div id="container">
      <header>
        <p>
          <a href="spa.htm"><img src="images/fijispa.jpg" alt="Fiji Spa - outdoor massage" /></a>
    <link href="spastyles.css" rel="stylesheet" type="text/css" />
      <link href="printstylesTHATMAKESGIFTshowstuff.css" rel="stylesheet" type="text/css" />
        </p>
      </header>
  
      <nav>
        <ul>
          <li><a href="#">Directions</a></li>
          <li><a href="#">Reservations</a></li>
          <li><a href="#">Lunch Menu</a></li>
          <li><a href="#">Dinner Menu</a></li>
          <li><a href="gift.htm">Gift Shop</a></li>
          <li><a href="#">Contact Us</a></li>
        </ul>
      </nav>
      <aside>
        <h2>Gift Cards</h2>
        <ul>
          <li>We are pleased to announce that the SpaCard gift card is now available. Use your SpaCard at any restaurant or at any
              of our shops that charge an additional fee for service.</li>
          <li>Use your SpaCard at our hair and beauty salon and receive 10% off any service.</li>
          <li>Watch for the SpaCard specials posted at the entrance to each restaurant. To find out more about the benefits of
              having a SpaCard, speak to the concierge or to any of our sales associates.</li>
        </ul>
      </aside>
      <nav id="main">
        <h1>Our Gift Shop</h1>
        <p>
          Our gift shop has all the souvenirs you want, but in addition, we now have a full line of sportswear in every size and
          at every price point. We even have our own line of designer sportswear customized with the Sundown logo. You can wear
          these items anywhere and be in style no matter what the season or the setting.
        </p>
        <p>
          Come to the gift shop and try on shorts, shirts, and swimwear. We have hooded jackets as well for those summer nights
          when there still is a chill in the air. We also have a fully equipped dive shop. In addition, we carry a full line of
          handy personal items.
        </p>
        <p>
          If you are looking for a snack before or after our main dining facilities close, come to the gift shop and have some
          coffee, tea, juice, and a light breakfast. We have sitdown and takeout service as well.
        </p>
        <p>
          Stock up on healthful snacks and low-calorie, high-carb beverages before any excursion.
        </p>
        <p>
          We want you to know that we value your patronage, and we want you to enjoy every part of your stay here. It's the
          memories of your visit that will be priceless.
        </p>
      </nav>
      <footer>
        <h4>The Fiji Sunset Spa and Resort Gift Shop  Open each day from 7 a.m. to 11 p.m.</h4>
      </footer>
    </div>
  </body>
</html>

Code:
*{
margin:0 px;
padding: 0 px;
}

body
{
margin:0;
padding:0;
padding-top:10px;
text-align:center;
background-color:white;
font-size:0.9 em;
font-family:Verdana, Arial, Helvetica, sans-serif;
}

  #container{
width:90%;
margin-top:10 px;
margin-bottom:10px;
margin-left:auto;
margin-right:auto;
border-width:2px wide, solid,black;
border-radius:22px;
}

header
{
background-color:darkkhaki;
border-top-left-radius:20px;
border-top-right-radius:20px;
text-align:center;
}
nav {
padding:0.5 em;
background-color:darkkhaki;
text-align:center;
}
nav ul li
{
display:inline;
list-style-type:none;
background-image:url(texture_background.jpg);
background-repeat:repeat;
}
nav a
{
padding:0.25em;
color:#5c4033;
font-weight:bold;
text-decoration:none;
}
nav a:hover
{
   text-decoration: underline;
   color:black;
   background-color:goldenrod;
}
#activities
{width:20%;
float:left;
background-image:url(images/texture_background.jpg);
background-repeat:repeat;
}
#activities h3
{
   background-color:goldenrod;
   text-align:center;
   color:white;
   margin-bottom:0.5 em;
   text-transform:uppercase;  
}
#spa h2
{
   background-color:goldenrod;
   text-align:center;
   color:white;
   margin-bottom:0.5 em;
   text-transform:uppercase;  
}
#activities p
{
padding: 0% 1% 1% 5%;
}
#main h1
{
margin-bottom:1em;
text-align:center;
}
footer
{
margin:1em auto 1em auto;
padding:1em 0em 1em 0em;
border-top:solid black ;
border-width:2 px;
clear:both;
font-weight:bold;
text-align:center;
}

figure{
text-align:center;
}


Code:
*{
  size: 8.5in 11in;
margin:0.5in;
}

nav{
display:all;
}

header{
display:all;
}

body{
color:black;
background-color:white;
font-size:12 pt;
font:"Times New Roman" , Times ,serif ;
line-height:120%;
}

Reply With Quote
Reply

Viewing: Tutorialized ForumsWeb Design & DevelopmentHTML > Why aren't the html and css pages with same code producing the same output?


Developer Shed Advertisers and Affiliates


Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump


Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 

Powered by: vBulletin Version 3.0.5
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.

© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap