SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict sojomy's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    349
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    New to CSS, is this right?

    Ok, I am developing a new site based on what the boss wants it to look like and I decided that this time I would try to use CSS instead of a bunch of nested tables for layout. I am very new to CSS, so I have some questions. But here is the shell of my page. Some notes about it. I have three seperate sections marked Header, Dynamic Content, and Footer. I am using PHP to develop the site, so I include a Header and a Footer on each .php script and just add the dynamic content in between. I consolidated all three files into one HTML file (below), but you can see where I would include my header and footer where the HTML comments start and end.

    Here are my questions about my CSS code.
    1. Is it syntactically correct?
    2. Is it cross-browser compatible? Mostly? What would I need to change to make it look the same in most browsers.
    3. Are there any attributes that I have in my code that I don't need to include, like "position:absolute"? Or are there any attributes that I am missing that should be there?
    4. If I use background-color:transparent will the layers (DIVs) all overlap as long as I create the ones that go on bottom first? Or should I use z-index's?
    5. Where the dynamic content starts, I included a <STYLE> tag where I added more styles that are for the dynamic content only. Is this allowed? Will it work in all/most browsers? Is it a problem creating multiple DIVs inside DIVs, and including a <STYLE> tag in a DIV?
    6. Any other suggestions or comments?

    Ok, here's the code...

    PHP Code:
    <!-- Start Header Here -->
    <
    HTML>
    <
    HEAD><TITLE>test</TITLE>
      <
    STYLE type="text/css"><!--
        
    BODY {
          
    background-color#FFFFFF; color: #000000;
        
    }
        
    #Frame {
          
    background-colortransparentpositionabsolute;
          
    margin-left: -370px;
          
    margin-top: -210px;
          
    top50%; left50%;
          
    width740pxheight420px;
          
    border 1 solid black;
        }
        
    #Logo {
          
    background-colortransparentpositionabsolute;
          
    left17top25;
          
    width52pxheight51px;
        }
        
    #HeaderBar {
          
    background-colortransparentpositionabsolute;
          
    left86top18;
          
    width1pxheight67px;
        }
        
    #HeaderText {
          
    background-colortransparentpositionabsolute;
          
    left105top28;
          
    width182pxheight50px;
        }
        
    #DynamicContent {
          
    background-colortransparentpositionabsolute;
          
    left86top111;
          
    width576pxheight288px;
        }
      -->
      </
    STYLE>
    </
    HEAD>
    <
    BODY>
    <
    div id="Frame">
      <
    div id="Logo"><IMG SRC="/Images/Logo.gif" WIDTH=52 HEIGHT=51></div>
      <
    div id="HeaderBar"><IMG SRC="/Images/GrayDot.gif" WIDTH=1 HEIGHT=67></div>
      <
    div id="HeaderText"><IMG SRC="/Images/HeaderText.gif" WIDTH=182 HEIGHT=50></div>
      <
    div id="DynamicContent">
    <!-- 
    End Header Here -->
    <!-- 
    Starty Dynamic Content Here -->
        <
    STYLE type="text/css"><!--
          
    #OrangeBackground {
            
    background-color#FF9900; position: absolute;
            
    top 0left0;
            
    width 576pxheight 288px;
          }
          
    #Clouds {
            
    background-colortransparentpositionabsolute;
            
    left0top53;
            
    width576pxheight73px;
          }
          
    #LogoOrange {
            
    background-colortransparentpositionabsolute;
            
    top237left535;
            
    width25pxheight38px;
          }
        -->
        </
    STYLE>
        <
    div id="OrangeBackground">
          <
    div id="Clouds"><IMG SRC="/Images/Clouds.jpg" WIDTH=576 HEIGHT=73></div>
          <
    div id="LogoOrange"><IMG SRC="/Images/LogoOrange.gif" WIDTH=25 HEIGHT=38></div>
        </
    div>
    <!-- 
    End Dynamic Content Here -->

    <!-- 
    Start Footer Here -->
      </
    div>
    </
    div>
    </
    BODY>
    </
    HTML>
    <!-- 
    End Footer Here --> 

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    A couple of quick comments:

    No you should not put style tags in the body of the html. While it may work on some browsers its not valid code and stricter browsers may not work with it.

    You have specifed dimensions without units:
    Code:
    left: 0; top: 53;
    Mozilla will treat those dimensions as zero. Ie will guess they are pixels. Always specify a unit (e.g. px, em , % etc)

    You did not need to specify background-color:transparent on every div as that is its default anyway.

    Don't call your styles by their colours.
    Code:
    #OrangeBackground 
    What happens next year when you change the background to blue? You will have to change all your classes and id's as well otherwise they won't make sense.

    For cross browser compatability use a valid doctype with uri but you will still need to test at each stage of the design in the broswers you wnat to support. This is the easiest way to do it as it avoids building your page on something that only one browser understands.

    You should learn about the broken box model of ie also as this is important when designing. See the FAQ sticky thread about this.

    Hope that helps.

    Paul

  3. #3
    SitePoint Addict sojomy's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    349
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul, thank you for the quick reply.

    I will add the "px" to the width and height, and change the style to "ColoredBackground". I'll also go read on the broken box model. Now, on the part about the not including <STYLE> in the body, what is the alternative? Here is the actual script that I was using (with PHP)

    PHP Code:
    <? include('gtoro/Header.inc.php'); ?>
        <STYLE type="text/css"><!--
          #OrangeBackground {
            background-color: #FF9900; position: absolute;
            top : 0; left: 0;
            width : 576px; height : 288px;
          }
          #Clouds {
            background-color: transparent; position: absolute;
            left: 0; top: 53;
            width: 576px; height: 73px;
          }
          #LogoOrange {
            background-color: transparent; position: absolute;
            top: 237; left: 535;
            width: 25px; height: 38px;
          }
        -->
        </STYLE>
        <div id="OrangeBackground">
          <div id="Clouds"><IMG SRC="/Images/Clouds.jpg" WIDTH=576 HEIGHT=73></div>
          <div id="LogoOrange"><IMG SRC="/Images/LogoOrange.gif" WIDTH=25 HEIGHT=38></div>
        </div>

    <? include('gtoro/Footer.inc.php'); ?>
    And the part that has the <HEAD> and includes an external CSS file or has the <STYLE> tags is in the Header.php.inc. So where or how could I include the styles that go with the dynamic content (which is the only part that is in the individual scripts)?

    Thanks again,
    Sojomy

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    PHP is not my area but I would have thought that you just include the link to the relevant css file in the head of the document for the files that you are including below. Surely you can just set a variable name for the linked file so the appropriate file is loaded.

    Or just have one css file that has all the styles already in it.

    Paul

  5. #5
    SitePoint Addict sojomy's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    349
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, i "rigged it" by adding a variable to the top of the dynamic documents something like

    IncludeCSS = 'PageName.css'

    and in the header where the <HEAD> is, just below including the main CSS document, i added

    "If (IncludeCSS != '') then write the statement to include whatever is in IncludeCSS


    So on AboutUs.php, I would add "$IncludeCSS = AboutUs.css" and that file will be included when the <HEAD> is section is generated. I just have to make sure to set IncludeCSS to blank on every page that doesnt need any stylesheets added. Later I might change it so that multiple stylesheets can be added.

    Also, does the "position:absolute" need to be included on every style that is for layout?

    Ok, now just looking at my design, not the syntax, is that right? is that how you are supposed to make a site using style sheets and css? Are you supposed to have a style (or ID) for each element on the page? or at least each section? Is my page supposed to be full of <DIV>s? And is there ever a need for tables (other than listing data)?

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Also, does the "position:absolute" need to be included on every style that is for layout?
    You only need position absolute when you want to remove an element from the flow of the document and place it absolutely at the position required.

    If possible its better to let your pages flow so that one element logically follows another. You can use the margin-property to position an element and still keep it in the flow.

    Obviously most pages are a mixture of both but mainly I like to keep absolute elements to a minimum as you will always have to take care where they are. Of course it does depend on the layout and a fixed width layout that doesn't change in any way can be absolutely positioned without problems.

    Are you supposed to have a style (or ID) for each element on the page? or at least each section? Is my page supposed to be full of <DIV>s? And is there ever a need for tables (other than listing data)?
    Only give elements classes or id's when needed and only use divs when needed otherwise you will suffer from what is commonly known as divitis or classitis.

    Use structural html markup where appropriate and use divs when there is no other method available.

    e.g.
    Some people do this:
    Code:
    <div id="header">
    <p class="mainheading">Main Header</p>
    </div>
    When in fact all they needed was:
    Code:
    <h1>Main Heading</h1>
    You can still style the heading without a class.
    Code:
    h1 {color:blue;background:white}
    No classes or id's needed in the mark up at all.


    Its a good idea to give id's to your main sections in some cases as it allows you to address items within that section without altereing the mark=up.

    e.g.
    Code:
    <div id="maincontent">
    <h2>Secondary Title</h2>
    <p>some text</p>
    <ul>
    <li>A list</li>
    </ul>
    </div>
    Then you can style those elements like this:
    Code:
    #maincontent h2 {color:red;background;yellow}
    #maincontent p {padding:2px 20px}
    #maincontent ul {margin:0;padding:0}
    #maincontent li {float:left;width:100px}
    Then the whole block is styled without adding to the weight of the markup. Again of course it does all depend on the job in hand and most pages are a mixture of the two

    Have a look at this design which uses no classes or divs (but is just an example and not meant to be the complete way to code a page).

    http://www.pmob.co.uk/temp/quiz6.htm

    The above was taken from the question set in this thread that you might find interesting.

    http://www.sitepoint.com/forums/show...est+css+skills

    Hope that's given you some food for thought

    Paul


Bookmarks

Posting Permissions

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