WEB What the fuck am I doing wrong?

Discussion in 'OT Technology' started by anthem404, Sep 9, 2008.

  1. anthem404

    anthem404 not my cup of mud

    Joined:
    Mar 11, 2007
    Messages:
    237
    Likes Received:
    0
    Location:
    Georgia
    Kay, I'm new to this whole css/html thing, and I'm trying to make something with text styles outlined in a separate stylesheet.

    Problem is, when I view it outside of dreamweaver's preview window, it looks completely fucked up.

    Here's my css:

    Code:
    /* Font Styles */
    
    .sitetitle {
        font: Arial, Helvetica, sans-serif;
        font-size: 55px;
        color: #FFFFFF;
        font-weight: Bold;
        text-transform: Uppercase;
        letter-spacing: 0px;
        line-height: 0.72em;
        border-bottom: thin;
        border-width: 0px;
        }
        
    .sitesubtitle  {
        font: Georgia, "Times New Roman", Times, serif;
        font-size: 18px;
        color: #D9610B;
        font-weight: normal;
        line-height: 1em;
        margin-top: 16px;
        }
        
    a {
        color: #0F8299;
        text-decoration: none;
        }
        
    a:active {
        color: #BF370A;
        text-decoration: none;
        }
        
    a:hover {
        color: #FFFFFF;
        text-decoration: none;
        }
    
    h3 {
        font: Arial, Helvetica, sans-serif;
        font-size: 28px;
        color: #FFFFFF;
        font-weight: normal;
        text-transform: uppercase;
        letter-spacing: 0px;
        text-decoration: none;
        line-height: 1em;
        }
    /* Body Styles */
    
    body {
        font: Arial, Helvetica, sans-serif;
        font-size: 12px;
        color: #FFFFFF;
        line-height: 1.8em;
        background-color: #262626;
        margin-right: Auto;
        margin-left: Auto;
        padding-left: 1px;
        }
    
    .canvas {
        margin-right: auto;
        margin-left: auto;
        padding-left: 1px;
        }
        
    .section {
        color: #CCCCCC;
        background-color: #3F403D;
        margin-bottom: 20px;
        padding-top: 10px;
        padding-right: 10px;
        padding-bottom: 10px;
        padding-left: 10px;
        }
    and my html:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>My Portfolio</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
    </head>
    
    <body>
    <p class="sitetitle">My Portfolio</p>
    <p class="sitesubtitle">Jay Stone</p>
    <a href="work.html">Assorted Works</a>
    </body>
    
    </html>
    
    Here's what it should look like:

    [​IMG]

    Here's how it looks in FF/IE/Safari/Opera:

    [​IMG]


    It's driving me fucking crazy, any help?
     
  2. anthem404

    anthem404 not my cup of mud

    Joined:
    Mar 11, 2007
    Messages:
    237
    Likes Received:
    0
    Location:
    Georgia
    I just copied and pasted it into my document, and it's still using the wrong font for everything. Now it just erases the breaks between each different style.

    I don't quite get why it doesn't use the class I set it to use...

    Gives the right size and color, but fucks the font family up...
     
  3. biawokauns

    biawokauns New Member

    Joined:
    Sep 18, 2001
    Messages:
    19,893
    Likes Received:
    0
    Location:
    Republic of Kalifornia
    no such thing as "font" broseph

    you should also be using h1, h2, h3 tags vs a very large P. you can also consolidate a lot of your css.

    edit: at least the way you are styling it out
     
  4. Mikey

    Mikey This one, this form I hold now, so Wide eyed and h

    Joined:
    Oct 18, 2001
    Messages:
    23,118
    Likes Received:
    0
    Location:
    Baltimore
    if you are going to make separate classes... just a couple ideas...

    Code:
    font-family:
    
    padding: 10 10 10 10;
     
  5. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    55,919
    Likes Received:
    10
    Location:
    Los Angeles
    Not in the way he's using it. :o

    Shorthand ftw
    Code:
    font: normal 12px Helvetica, Arial, san-serif;
    
     
  6. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    55,919
    Likes Received:
    10
    Location:
    Los Angeles
    You are setting a shitload of that CSS to it's default value. I don't understand the purpose of that.

    And CSS like this is completely unnecessary. As it does the same thing as if nothing was in it to begin with.

    Code:
        border-bottom: thin;
        border-width: 0px;
    

    Avoid doing things like this, you have more control than specifying 'auto' for your elements.
    Code:
        margin-right: Auto;
        margin-left: Auto;
    
    And this:
    Code:
        padding-top: 10px;
        padding-right: 10px;
        padding-bottom: 10px;
        padding-left: 10px;
    
    Can be transformed to this:
    Code:
    padding: 10px;
    
    You also don't need to override child containers with the same attributes as parent containers because all child attributes will inherit all the attributes within it's parent element.
     
  7. biawokauns

    biawokauns New Member

    Joined:
    Sep 18, 2001
    Messages:
    19,893
    Likes Received:
    0
    Location:
    Republic of Kalifornia
    where'd he write that shit? i dont see it in his post :o
     
  8. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    55,919
    Likes Received:
    10
    Location:
    Los Angeles
    I may have misunderstood something.

    I'm lost. :hsugh:
     
  9. biawokauns

    biawokauns New Member

    Joined:
    Sep 18, 2001
    Messages:
    19,893
    Likes Received:
    0
    Location:
    Republic of Kalifornia
    i figured it out

    Code:
    <IFRAME SRC="http://img392.imageshack.us/img392/486/yayez4.jpg" WIDTH=457 HEIGHT=338>
    
     
  10. anthem404

    anthem404 not my cup of mud

    Joined:
    Mar 11, 2007
    Messages:
    237
    Likes Received:
    0
    Location:
    Georgia
    Thanks everyone, and it's just for me to learn html/css.

    It won't actually be my portfolio. Just used that as a place holder.
     

Share This Page