#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    4
    Rep Power
    0

    Cannot decrease paragraph font size inside div


    Hello,
    My name is Joshua and I am new here. I am enrolled in a Web Development course at my local community college. I am having trouble getting the font-size and margins set for a paragraph in CSS. I have validated my CSS Stylesheet and I have validated my htm page. I can't seem to get the font-size to decrease to 14px. Also, I cannot seem to get the margin set inside the same element. The font is supposed to get low enough to put the font inside of coupons. The problem could be related to contextual selectors but I am not sure.

    Also, the web page is pizza related, so try not to get hungry. Or get hungry it's alright.

    I hope that someone can help me. Thanks in advance.

    I have viewed it in Firefox, Chrome and my Aptana 3 browser. They all do NOT look correct.

    Here is my css code:

    The problem area is near the bottom at the
    div.coupon p portion of the css code.



    /* Coupon styles */

    div.coupon {
    background: url(slice.png) 50% 50% no-repeat,
    url(notice.png) bottom right no-repeat white;
    float: left;
    border: 5px dashed black;
    width: 170px;
    height: 150px;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 10px;
    margin-right: 10px;
    }


    div.coupon h1 {
    color: white;
    background-color: rgb(192, 0, 0);
    font-size: 16px;
    letter-spacing: 2px;
    text-align: center;
    height: 25px;
    font-variant: small-caps;

    }

    div.coupon p {
    font-size: 14px;
    text-align: center;
    margin: 5px;
    }

    My HTM code

    <div class="coupon">
    <h1>Classic Combo</h1>

    <p>16" 1-Topping Pizza
    &amp; a 2-Liter of Your Choice
    For Only $14.99
    </p>
    <p>Expires 3/14</p>
    </div>
    <div class="coupon">
    <h1>Pizza &amp; Stix</h1>
    <p>16" Specialty Pizza
    Reg. Cheese Stix &amp; a 2-Liter
    For Only $21.99
    </p>
    <p>Expires 3/14</p>
    </div>
    <div class="coupon">
    <h1>1/2 Price</h1>
    <p>Buy any 16" Specialty Pizza
    at Reg. Price &amp; Get a 2nd
    Pizza For Half Price
    </p>
    <p>Expires 3/14</p>
    </div>
    <div class="coupon">
    <h1>Pizza &amp; Wings</h1>
    <p>14" 2-Topping Pizza
    &amp; 12 Wings
    For Only $15.99
    </p>
    <p>Expires 3/31</p>
    </div>
    <div class="coupon">
    <h1>$3.00 Off</h1>
    <p>Get $3.00 Off
    any 16" Pizza at
    Menu Price
    </p>
    <p>Expires 3/31</p>
    </div>
    <div class="coupon">
    <h1>Sub Dinner</h1>
    <p>1 Toasted Sub &amp; Chips
    &amp; 1 20oz Soda
    For Only $6.99
    </p>
    <p>Expires 3/31</p>
    </div>
    </section>
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Location
    Stockholm, Sweden
    Posts
    16
    Rep Power
    0
    Hi vintagegamingsy,

    I'm having difficulty understanding what you're really requesting here.
    I'm able to assign any font-size to the paragraphs. I did adjust your margin problem by doing a CSS reset. (Which is always neccessary since all web browsers have a built-in CSS).

    Full code:
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8" />
    <title>vintagegamingsy</title>
    
    <style type="text/css">
    * {
    padding: 0;
    margin: 0;
    border: 0;
    outline: 0;
    }
    
    /* Coupon styles */
    
    .coupon {
    background: url(slice.png) 50% 50% no-repeat,
    url(notice.png) bottom right no-repeat white;
    float: left;
    border: 5px dashed black;
    width: 170px;
    height: 150px;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 10px;
    margin-right: 10px;
    }
    
    .coupon h1 {
    color: white;
    background-color: rgb(192, 0, 0);
    font-size: 16px;
    letter-spacing: 2px;
    text-align: center;
    height: 25px;
    font-variant: small-caps;
    }
    
    .coupon p {
    font-size: 14px;
    text-align: center;
    margin: 5px;
    }
    </style>
    
    <body>
    <div class="coupon">
    <h1>Classic Combo</h1>
    
    <p>16" 1-Topping Pizza
    & a 2-Liter of Your Choice
    For Only $14.99
    </p>
    <p>Expires 3/14</p>
    </div>
    <div class="coupon">
    <h1>Pizza & Stix</h1>
    <p>16" Specialty Pizza
    Reg. Cheese Stix & a 2-Liter
    For Only $21.99
    </p>
    <p>Expires 3/14</p>
    </div>
    <div class="coupon">
    <h1>1/2 Price</h1>
    <p>Buy any 16" Specialty Pizza
    at Reg. Price & Get a 2nd
    Pizza For Half Price
    </p>
    <p>Expires 3/14</p>
    </div>
    <div class="coupon">
    <h1>Pizza & Wings</h1>
    <p>14" 2-Topping Pizza
    & 12 Wings
    For Only $15.99
    </p>
    <p>Expires 3/31</p>
    </div>
    <div class="coupon">
    <h1>$3.00 Off</h1>
    <p>Get $3.00 Off
    any 16" Pizza at
    Menu Price
    </p>
    <p>Expires 3/31</p>
    </div>
    <div class="coupon">
    <h1>Sub Dinner</h1>
    <p>1 Toasted Sub & Chips
    & 1 20oz Soda
    For Only $6.99
    </p>
    <p>Expires 3/31</p>
    </div>
    </body>
    </html>
    Also, I happened to find a end tag for <section> but no starttag, you should be aware that <section> should only be used outside the documents content (e.g at the side in the page background for example).
    " A general rule is that the <section> element is appropriate only if the elementís contents would be listed explicitly in the documentís outline. "
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    4
    Rep Power
    0

    I cannot show you my whole code because of the new user restrictions on url posting


    So the code was sort of right. The thing is I have an external css style sheet. I am unable to put in all of the code for both the external css sheet and the html because it says that I cannot upload urls to my page because I am new. There is something else in my code that is messed up. Either in my stylesheet or my htm page. I just can't show you the whole thing because of the restrictions on urls.

    Originally Posted by Heatleakz
    Hi vintagegamingsy,

    I'm having difficulty understanding what you're really requesting here.
    I'm able to assign any font-size to the paragraphs. I did adjust your margin problem by doing a CSS reset. (Which is always neccessary since all web browsers have a built-in CSS).

    Full code:
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8" />
    <title>vintagegamingsy</title>
    
    <style type="text/css">
    * {
    padding: 0;
    margin: 0;
    border: 0;
    outline: 0;
    }
    
    /* Coupon styles */
    
    .coupon {
    background: url(slice.png) 50% 50% no-repeat,
    url(notice.png) bottom right no-repeat white;
    float: left;
    border: 5px dashed black;
    width: 170px;
    height: 150px;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 10px;
    margin-right: 10px;
    }
    
    .coupon h1 {
    color: white;
    background-color: rgb(192, 0, 0);
    font-size: 16px;
    letter-spacing: 2px;
    text-align: center;
    height: 25px;
    font-variant: small-caps;
    }
    
    .coupon p {
    font-size: 14px;
    text-align: center;
    margin: 5px;
    }
    </style>
    
    <body>
    <div class="coupon">
    <h1>Classic Combo</h1>
    
    <p>16" 1-Topping Pizza
    & a 2-Liter of Your Choice
    For Only $14.99
    </p>
    <p>Expires 3/14</p>
    </div>
    <div class="coupon">
    <h1>Pizza & Stix</h1>
    <p>16" Specialty Pizza
    Reg. Cheese Stix & a 2-Liter
    For Only $21.99
    </p>
    <p>Expires 3/14</p>
    </div>
    <div class="coupon">
    <h1>1/2 Price</h1>
    <p>Buy any 16" Specialty Pizza
    at Reg. Price & Get a 2nd
    Pizza For Half Price
    </p>
    <p>Expires 3/14</p>
    </div>
    <div class="coupon">
    <h1>Pizza & Wings</h1>
    <p>14" 2-Topping Pizza
    & 12 Wings
    For Only $15.99
    </p>
    <p>Expires 3/31</p>
    </div>
    <div class="coupon">
    <h1>$3.00 Off</h1>
    <p>Get $3.00 Off
    any 16" Pizza at
    Menu Price
    </p>
    <p>Expires 3/31</p>
    </div>
    <div class="coupon">
    <h1>Sub Dinner</h1>
    <p>1 Toasted Sub & Chips
    & 1 20oz Soda
    For Only $6.99
    </p>
    <p>Expires 3/31</p>
    </div>
    </body>
    </html>
    Also, I happened to find a end tag for <section> but no starttag, you should be aware that <section> should only be used outside the documents content (e.g at the side in the page background for example).
    " A general rule is that the <section> element is appropriate only if the elementís contents would be listed explicitly in the documentís outline. "
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Location
    Stockholm, Sweden
    Posts
    16
    Rep Power
    0
    Originally Posted by vintagegamingsy
    I just can't show you the whole thing because of the restrictions on urls.
    Could you post your full HTML and CSS here? Replace any http url with mysite.
    This way I can test your code in my own browser.
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    4
    Rep Power
    0

    Here is my code with mysite instead of html


    Thank you so much for looking at this. I really appreciate it.
    html contents

    <!DOCTYPE HTML>
    <HTML>

    <head>
    <!--
    New Perspectives on HTML and CSS
    Tutorial 4
    Case Problem 2

    Red Ball Pizza
    Author: Joshua Cagle
    Date: 10/18/2012

    Filename: redball.htm
    Supporting files: modernizr-1.5.js, notice.png, rblogo.png,
    redbar.png, slice.png, toppings.png

    Pizza slice and toppings images from public domain site at:

    -->

    <meta charset="UTF-8" />
    <title>Red Ball Pizza</title>


    <script src="modernizr-1.5.js"></script>

    <link href="pizza.css" rel="stylesheet" />


    </head>

    <body>
    <div id="container">
    <header><img src="rblogo.png" alt="Red Ball Pizza" /></header>

    <nav class="horizontal">
    <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Menu</a></li>
    <li><a href="#">Locations</a></li>
    <li><a href="#">Catering</a></li>
    <li><a href="#">About Us</a></li>
    </ul>
    </nav>

    <nav class="vertical">
    <ul>
    <li><a href="#">Pizza</a></li>
    <li><a href="#">Salad</a></li>
    <li><a href="#">Pasta</a></li>
    <li><a href="#">Sandwiches</a></li>
    <li><a href="#">Appetizers</a></li>
    <li><a href="#">Pocket Pizzas</a></li>
    <li><a href="#">Fish &amp; Shrimp</a></li>
    <li><a href="#">Chicken &amp; Wings</a></li>
    <li><a href="#">Beverages</a></li>
    <li><a href="#">Dessert</a></li>
    <li><a href="#">Catering</a></li>
    <li><a href="#">Download Menu</a></li>
    <li><a href="#">Catering Menu</a></li>
    </ul>
    </nav>

    <section id="main">
    <img src="toppings.png" alt="" />
    <p>At Red Ball Pizza, we want to satisfy every appetite. That's
    why our menu contains a variety of different items. With
    so many choices, everyone's favorites are available!
    </p>
    <p>
    Red Ball Pizza is NOT a franchise, a chain, or a corporation.
    It is 100% locally owned and operated. Red Ball Pizza is
    devoted to providing the highest quality and the best service
    possible. Our only goal is to provide you with a great
    pizza Ö EVERY TIME!
    </p>
    <div class="coupon">
    <h1>Classic Combo</h1>

    <p>16" 1-Topping Pizza
    &amp; a 2-Liter of Your Choice
    For Only $14.99
    </p>
    <p>Expires 3/14</p>
    </div>
    <div class="coupon">
    <h1>Pizza &amp; Stix</h1>
    <p>16" Specialty Pizza
    Reg. Cheese Stix &amp; a 2-Liter
    For Only $21.99
    </p>
    <p>Expires 3/14</p>
    </div>
    <div class="coupon">
    <h1>1/2 Price</h1>
    <p>Buy any 16" Specialty Pizza
    at Reg. Price &amp; Get a 2nd
    Pizza For Half Price
    </p>
    <p>Expires 3/14</p>
    </div>
    <div class="coupon">
    <h1>Pizza &amp; Wings</h1>
    <p>14" 2-Topping Pizza
    &amp; 12 Wings
    For Only $15.99
    </p>
    <p>Expires 3/31</p>
    </div>
    <div class="coupon">
    <h1>$3.00 Off</h1>
    <p>Get $3.00 Off
    any 16" Pizza at
    Menu Price
    </p>
    <p>Expires 3/31</p>
    </div>
    <div class="coupon">
    <h1>Sub Dinner</h1>
    <p>1 Toasted Sub &amp; Chips
    &amp; 1 20oz Soda
    For Only $6.99
    </p>
    <p>Expires 3/31</p>
    </div>
    </section>
    <aside>
    <h1>Pizza Pizzazz</h1>
    <ul>
    <li>93% of Americans eat pizza at least once a month.</li>
    <li>Mozzarella was originally made from the milk of Indian
    water buffalo in the 7th century.</li>
    <li>75 acres of cheese is eaten every day.</li>
    <li>23 pounds of cheese is eaten every year by the average
    person.</li>
    <li>The tomato was brought back to Italy by Spaniards returning
    from Mexico in the 16th century.</li>
    <li>The busiest night for take-out pizza orders is Halloween.</li>
    <li>The first pizzeria opened in 1830 in Naples, Italy and is still operating today. We've been open since 1982 and
    we're happy to serve you today and tomorrow!</li>
    </ul>
    </aside>

    <footer>
    <address>
    Red Ball Pizza &bull;
    811 Beach Drive &bull;
    Ormond Beach, FL 32175 &bull;
    (386) 555 - 7499
    </address>
    </footer>

    </div>

    </body>

    </HTML>

    EXTERNAL CSS SHEET contents

    /*
    New Perspectives on HTML and CSS
    Tutorial 4
    Case Problem 2

    Pizza Style Sheet
    Author: Joshua Cagle
    Date: 10/18/2012

    Filename: pizza.css
    Supporting Files:

    */


    /* Display HTML5 structural elements as blocks */

    article, aside, figure, figcaption, footer, hgroup, header,
    section, nav {
    display: block;
    }


    /* Displays default styles for every element so that every element
    is diplayed in the same manner. */


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

    /* Styles for Page Body */

    body {
    background-color: red;
    font-family: Verdana, Geneva, san-serif;
    }

    /* Container styles */

    #container {
    background: rgb(255, 255, 255) url(redbar.png) top left repeat-y;
    margin: 0px auto 0px auto;
    border-left: 1px solid black;
    border-right: 1px solid black;
    width: 1000px;
    }

    /* Styles for Header */

    header {
    background-color: white;
    height: 100px;
    }

    /* Removes decorations, such as underling, from navigation lists*/

    nav a {
    text-decoration: none;
    }

    /* Horizontal Navigation List Styles */

    nav.horizontal {
    background-color: white;
    width: 100%;
    height: 70px;
    }

    nav.horizontal ul li {
    display: block;
    float: left;
    background-color: rgb(255, 255, 255);
    font-size: 16px;
    line-height: 50px;
    width: 180px;
    margin-left: 5px;
    margin-right: 5px;
    text-align: center;
    }

    nav.horizontal ul li a {
    display: block;
    background-color: red;
    color: white;

    /* Progressive enhancements to support browser extensions. */

    -webkit-border-radius: 30px/25px;
    -moz-border-radius: 30px/25px;
    border-radius: 30px/25px;

    }

    nav.horizontal ul li a:hover {
    background-color: rgb(255,101,101);
    color:black;
    }

    /* Vertical Navigation List Styles */

    nav.vertical {
    float: left;
    width: 200px;
    }

    nav.vertical ul li {
    list-style-type: none;
    text-indent: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    }

    nav.vertical ul li a {
    color: white;

    }

    nav.vertical ul li a:hover {
    color:black;
    }

    /* Section Styles */

    #main {
    float: left;
    background-color: rgb(255, 211, 211);
    width: 600px;
    }

    #main p {
    font-size: 20px;
    margin: 15px;
    }

    #main img {

    float: right;
    margin: 15px;
    width: 350px;

    -moz-border-radius-bottomleft: 350px;
    -webkit-border-bottom-left-radius: 350px;
    border-bottom-left-radius: 350px;
    }


    /* Coupon styles */

    .coupon {
    background: url(slice.png) 50% 50% no-repeat,
    url(notice.png) bottom right no-repeat white;
    float: left;
    border: 5px dashed black;
    width: 170px;
    height: 150px;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 10px;
    margin-right: 10px;
    }

    .coupon h1 {
    color: white;
    background-color: rgb(192, 0, 0);
    font-size: 16px;
    letter-spacing: 2px;
    text-align: center;
    height: 25px;
    font-variant: small-caps;
    }

    .coupon p {
    font-size: 14px;
    text-align: center;
    margin: 5px;
    }

    /* Aside Styles */

    aside {
    float: left;
    width: 200px;
    }

    aside h1 {
    color: rgb(192, 0, 0);
    font-size: 20px;
    letter-spacing: 2px;
    font-weight: normal;
    text-align: center;
    }

    aside ul li {

    background-color: rgb(255, 135, 135);
    border-radius: 5px;
    list-style-type: none;
    margin: 10px;
    padding: 5px;

    }

    footer {
    margin:200px;

    }

    footer address {
    border-top: 1px solid red;
    color: red;
    font-size: 10px;
    font-style: normal;
    text-align: center;
    margin-top: 25px;
    padding-bottom: 20px;
    }
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Location
    Stockholm, Sweden
    Posts
    16
    Rep Power
    0
    Basically, a very often encountered problem with parents and child properties in stylesheets.

    The problem occurs when all child paragraph's (.coupon p) font-size: 14px; are inherited by the parents (#main p) font-size: 20px; by default since it ignores your property (.coupon p)'s value.

    I have updated your CSS abit.

    Code:
    #main/*added by Heatleakz*/ .coupon p {
    font-size: 14px;
    text-align: center;
    margin: 15px;
    }
    This should fix your CSS problem.

    A tip from me: Always use "basic property sets" for all elements in your CSS so that you won't get any conflict when using different browsers (as every browser has it's very own built-in CSS).

    For instance,
    Code:
    p {
    font-size: 14px;
    }
    Hope this worked out for you.
    PS: Don't hesitate giving me reputation for my solution(s)
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    4
    Rep Power
    0

    Thank You So Much!!!!!!


    I want to thank you so much for looking into my code. I now understand that the ID #main p was taking precedence over all my paragraphs. So I need to be careful as to what I set my elements to because they can override other elements in the parent-child relationship. I hope I got that right. Again thank you very much.

    I will give you a nice reputation upper, if I can.

    Joshua

    Originally Posted by Heatleakz
    Basically, a very often encountered problem with parents and child properties in stylesheets.

    The problem occurs when all child paragraph's (.coupon p) font-size: 14px; are inherited by the parents (#main p) font-size: 20px; by default since it ignores your property (.coupon p)'s value.

    I have updated your CSS abit.

    Code:
    #main/*added by Heatleakz*/ .coupon p {
    font-size: 14px;
    text-align: center;
    margin: 15px;
    }
    This should fix your CSS problem.

    A tip from me: Always use "basic property sets" for all elements in your CSS so that you won't get any conflict when using different browsers (as every browser has it's very own built-in CSS).

    For instance,
    Code:
    p {
    font-size: 14px;
    }
    Hope this worked out for you.
    PS: Don't hesitate giving me reputation for my solution(s)

IMN logo majestic logo threadwatch logo seochat tools logo