CSS DIV Explanations by ojp13483

VIEWS: 9 PAGES: 6

									   This is just the regular 
 browser screen <BODY>; set 
  outside background color, 
 fonts, font color, etc. for the 
                 y
              body
Example:

body {
font‐family: Arial, Helvetica, 
sans‐serif;
background‐color:  #ff222de;
}




 This is the main container for 
     y     g          p g (
everything on the page (often 
  called container, main, or I 
  like to call it big box!); this 
should be  roughly 700‐780 px
  wide with margins set to 0 
     and auto (to center it)

Example:

div#container {
width: 750px; 
margin: auto 0;
background‐color: #ffffff;
color: #22ff33; 
}
Most people put a top section 
Most people put a top section                                       This is 100% the width of the main 
                                                                    This is 100% the width of the main
   called top or header. This                                                container (750 px)
  typically contains a header 
graphic. Use the background‐
 image property  for this and 
  make your image the same 
   idth th        i     t i
 width as the main container; 
  set the div height to match 
       the header height
Example:

div#header {
  idth 100%
width: 100%;
background‐
image:url('paper.gif');}



                          yp
 The narrow column is typically y
the navigation section. You could 
   name it nav or left. Doesn’t 
 matter. Float it to the side you 
                                        Div width is “really” 
want it to be on. But, if you have    180 + 10 left + 10 right = 
a left and right, they need to add            200 px
 up to the main container width 
    (include padding/margins):

Example:

div#left {
width: 180px; 
padding: 10px;
float: left;
background‐color: #9900bb;
}
                                                                  This is 100% the width of the main 
                                                                  This is 100% the width of the main
Same rules as left.  Keep track 
                                                                           container (750 px)
of the “real” width so that left 
    + right equals the main 
       container’s width:

Example:

div#right {
width: 520 px;
padding: 15px;
float: right;
}




                                                                                          Div width is “really” 
     Sometimes there is a                                                               520 + 15 left + 15 right = 
                                                                                        520 + 15 left + 15 right 
    “bottom” box or footer.                                                                     550 px
That’s typically under the area 
 (this one doesn’t have one). 
                                      Div width is “really” 
  But if you did, you want to 
                                    180 + 10 left + 10 right = 
 make sure it clears the other              200 px
   boxes and takes up 100% 
             width:

Example:

div#footer{
width:  100%; 
clear: both;
background‐color: #bb22cc;
}
  Set up all normal tags and add divs in their order. Close 
each one as you add it whether you are ready to work on it 
                          or not!!


                   <html><head><title>
                     My Page</title>
<link rel=“stylesheet” href=“format.css” type=“text/css”>
                         </head>

                         <body>

                  <div id=“container”>



                          </div>
                         </body>
                         </html>
                                             Words            Welcome!
                 <body>

          <div id=“container”>               Paragraphs go 
                                                              More paragraphs on this side.
                                             here.
         di id “h d ” /di
        <div id=“header”> </div>

             <div id=“left”>
           <h2>Words</h2>
       <p>Paragraphs go here.</p>
                 </div>

            <div id=“right”>
         <h1>Welcome!</h1>
<p>More paragraphs on this right side.</p>
                 </div>


                 </div>
                </body>
                </html>
                 <body>

          <div id=“container”>

        <div id=“header”> </div>

             <div id=“left”>
           <h2>Words</h2>
       <p>Paragraphs go here.</p>
                 </div>

            <div id=“right”>
         <h1>Welcome!</h1>
<p>More paragraphs on this right side.</p>
                 </div>

            <div id=“footer”>
 <p align=“center”>Words in Footer</p>
                  </div>

                 </div>
                </body>
                </html>


                                             Words in Footer

								
To top