SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 26
  1. #1
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Positioning elements on html page

    Here is my html page so far.

    I'm using "Build Your Own Web Site The Right Way" and and CSS Web Design for Dummies (Written for me I believe.)

    All of the items are almost on top of each other. The header and footer are at the top of the page.

    I've spent days in both of these books and I just don't get the positioning of all of the elements on the page. Text, images, menus, etc.

    They all talk about floating, align=right, align=left, margins, padding, %, em, px, etc.

    H. E. L. P !


    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Properties With Style, Inc. Orange County Real Estate</title>
    <link href="testcss.css" rel="stylesheet" type="text/css" />
    <style type="text/css" media all>
    </style>
    
    </head>
     
    	</div>
    <div id="nav"= "navigation"/>
        <ul>
            <li><a href="#">Home Page</a></li>
            <li><a href="#">Valuating All Homes</a></li>
            <li><a href="#">Search For Homes</a></li>
            <li><a href="#">Map Search By Communities</a></li>
            <li><a href="#">Sellers Information Look Here</a></li>
            <li><a href="#">Buyers Information Look Here</a></li>
            <li><a href="#">Community Areas in Demand</a></li>
            <li><a href="#">Buyers Information Look Here</a></li>
            <li><a href="#">Buyers Information Look Here</a></li>
            <li><a href="#">Buyers Information Look Here</a></li>
            <li><a href="#">Buyers Information Look Here</a></li>
        </ul>
    </div>
    </div> <!--end of navigation div -->
    
    <div id="header">
    	<p> Welcome to Properties Internet and Information Site. We believe you wil find information here that is potentely relavent to the Orange County area. We welcome all questions and comments viw our contact information form.</p>
        </div>
    
    <div id="footer">
    	<p>Copyright, Properties With Style Inc., a Real Estate Corporation<p>
        </div>
    
    <body>
    
    <h2>What is the value of my home or the home I wish to purchase?</h2> <br/>
    <p align="right">In looking at the "UNIT SQUARE FEET" scale located at the bottom of the chart below, locate the square foot size of your home or the home of your dreams. On an imaginary vertical line where it intersects either SOLD or available home curve lines, look to the left or right side of the chart to find the dollar scales. This will indicate an approximate value of the home you are thinking of selling or purchasing based on square feet and sales price, the two most critical factors in evaluation. Remember, every home is unique and each specific analysis is far more in depth, however this is a very good start. Data is based on a specific city or area and time frames as noted on the charts. If you have questions or would like a custom detailed analysis for your home or the home you're thinking of purchasing, please contact us.</p>
    <p><img src="http://www.sitepoint.com/forums/images/MacroValueChart.jpg" alt="Macro View chart" width="955" height="701" vspace="3" align="right" /></p>
    
    <h2> This is a MICRO view of the above chart, a zoomed in view if you will providing precise detail.</h2> 
    
    <!--<p>Here is where we fine tune values and price point positioning.</p>
    <p><img src="http://www.sitepoint.com/forums/images/MicroValueChart.jpg" alt="Micro View Chart" width="955" height="701" align="right" /> </p>-->
    
    </body>
    </html>
    Last edited by ralph.m; Jun 4, 2011 at 19:47. Reason: fixed code tag

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,592
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    How do you actually want the page to appear? You need to give us your style sheet as well, and perhaps a screen shot of how you want the page laid out.

  3. #3
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is my css . . .

    Code:
    @charset "utf-8";
    /* CSS Document */
     /* font sizes
      xx-large
      x-large
      larger
      medium = 100% or 1em.
      smaller
      x-small
      xx-small 
      */
    
    body {
    background-color:#000000;
    background-image: url(images/Multi204.jpg);
    background-repeat:repeat-no repeat;
    background-attachment:fixed;
    line-height:125%
    padding: 20px;
    border 4px solid navy;
    margin-right: 40px;
    }
    
    p {	font-family: "Lucida Sans Unicode", "Lucida Grande" ; 
    font-size:medium% ; 
    text-align: justify ; 
    line-height:125%; 
    color: #fff; 
    margin-left: 23%;
    text-indent:2em; 
    }
    
     h1,h2,h3,h4,h5 
    {font: "Lucida Sans Unicode", "Lucida Grande", sans-serif; color: #fff ;text-align:right;}
    
    #header {font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; color: #fff ;text-align: center; font-size:80%;
    	     width:auto; min-height:20%; margin-left: 23%;
    }
    
    #footer {font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;color: #fff ;text-align:center; font-size:80%;
    		min-height:20%; width:auto; margin-left: 23%;
    }
    
    
    			   
    /*#navigation {
    	width: 200px;
    	border: 3px dotted groove #3CF; 
    }*/
    Attached Files Attached Files

  4. #4
    SitePoint Enthusiast
    Join Date
    Jun 2004
    Location
    Arnhem, The Netherlands
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Did you validate your HTML? Right now it doesn't make any sense. Closing a div right after you end the head, the opening of the body halfway across the document...

    My guess is that if you correct your code all will look as it is supposed to look.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,787
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi as others have said we can't really work out what that is supposed to look like.

    I'm taking a wild guess that you wanted something like this:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Properties With Style, Inc. Orange County Real Estate</title>
    <link href="testcss.css" rel="stylesheet" type="text/css" />
    <style type="text/css" media="all">
    @charset "utf-8";
    html, body {
        margin:0;
        padding:0
    }
    body {
        background:#000 url(images/Multi204.jpg) no-repeat fixed;
        color:#fff;
        line-height:1.25;
        padding: 20px;
        font-family: "Lucida Sans Unicode", "Lucida Grande";
    }
    #outer {
        border: 4px solid navy;
        width:90%;
        margin:auto;
        max-width:1200px;
        min-width:600px;
    }
    #content p {
        font-size:medium;
        text-align: justify;
        line-height:125%;
        margin:0 0 1em;
        text-indent:2em;
    }
    p,h1, h2, h3, h4, h5 {margon:0;}
    p{margin:0 0 1em}
    #header {
        text-align: center;
        font-size:80%;
        background:red;
    }
    #header h1 {
        margin:0 0 1em
    }
    #footer {
        text-align:center;
        font-size:80%;
        clear:both;
        background:blue;
        padding:10px 0;
    }
    #footer p{margin:0;}
    #nav {
        width: 200px;
        padding:10px 0;
        border: 3px groove #3CF;
        margin:0 25px 2em 10px;
        list-style:none;
        float:left;
        word-wrap:break-word;
        font-size:77%;
    }
    #nav li{margin:0 10px 5px}
    #nav a{
        color:#fff;
        text-decoration:none;
    }
    #content {
        overflow:hidden;
        margin:0 0 2em;
        background:#666;
        padding:10px;
    }
    * html #content {
        zoom:1.0
    }
    </style>
    </head>
    <body>
    <div id="outer">
        <div id="header">
            <h1>Welcome</h1>
            <p>Welcome to Properties Internet and Information Site. We believe you wil find information here that is potentely relavent to the Orange County area. We welcome all questions and comments viw our contact information form.</p>
        </div>
        <ul id="nav">
            <li><a href="#">Home Page</a></li>
            <li><a href="#">Valuating All Homes</a></li>
            <li><a href="#">Search For Homes</a></li>
            <li><a href="#">Map Search By Communities</a></li>
            <li><a href="#">Sellers Information Look Here</a></li>
            <li><a href="#">Buyers Information Look Here</a></li>
            <li><a href="#">Community Areas in Demand</a></li>
            <li><a href="#">Buyers Information Look Here</a></li>
            <li><a href="#">Buyers Information Look Here</a></li>
            <li><a href="#">Buyers Information Look Here</a></li>
            <li><a href="#">Buyers Information Look Here</a></li>
        </ul>
        <!--end of navigation div -->
        <div id="content">
            <h2>What is the value of my home or the home I wish to purchase?</h2>
            <p>In looking at the "UNIT SQUARE FEET" scale located at the bottom of the chart below, locate the square foot size of your home or the home of your dreams. On an imaginary vertical line where it intersects either SOLD or available home curve lines, look to the left or right side of the chart to find the dollar scales. This will indicate an approximate value of the home you are thinking of selling or purchasing based on square feet and sales price, the two most critical factors in evaluation. Remember, every home is unique and each specific analysis is far more in depth, however this is a very good start. Data is based on a specific city or area and time frames as noted on the charts. If you have questions or would like a custom detailed analysis for your home or the home you're thinking of purchasing, please contact us.</p>
        </div>
        <div id="footer">
            <p>Copyright, Properties With Style Inc., a Real Estate Corporation</p>
        </div>
    </div>
    </body>
    </html>
    It's a steep learning curve at first but you should learn about floats and how they work first and how they affect the flow of the page. Floats allow you to align things horizontally but they do need a lot of controlling and have many unexpected side effects although this is by design to cater for many different situations.

    If you have a drawing of what you want or can explain in words(awkward) we can pint you inn the right direction.

    You must however validate your code regularly as you had a lot of silly typos that the validator would find straight away.

    The W3C CSS Validation Service
    The W3C Markup Validation Service

  6. #6
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    I'm going to go down your CSS bit by bit to point out 'issues'

    Code:
    @charset "utf-8";
    Valid CSS is inherently ASCII7, so there is no reason to need to state a character set in CSS... well, unless you use generated content outside the ASCII7 set, which is just a really bad idea.

    Code:
    /* CSS Document */
     /* font sizes
      xx-large
      x-large
      larger
      medium = 100% or 1em.
      smaller
      x-small
      xx-small 
      */
    Pointless comment. Adds nothing meaningful to future developers -- also as a rule of thumb I also suggest avoiding using the named font sizes as being inconsistent cross-browser.

    Code:
    body {
    background-color:#000000;
    background-image: url(images/Multi204.jpg);
    background-repeat:repeat-no repeat;
    background-attachment:fixed;
    A condensed background property would help cut down on the amount of code, your repeat property is invalid (is it no-repeat or repeat?)... and attachment:fixed is annoyingly slow to scroll in Firefux and has it's own cross-browser issues which is why I'd never use it.

    Code:
    p {	font-family: "Lucida Sans Unicode", "Lucida Grande" ; 
    font-size:medium% ; 
    text-align: justify ; 
    line-height:125%; 
    color: #fff; 
    margin-left: 23%;
    text-indent:2em; 
    }
    
     h1,h2,h3,h4,h5 
    {font: "Lucida Sans Unicode", "Lucida Grande", sans-serif; color: #fff ;text-align:right;}
    
    #header {font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; color: #fff ;text-align: center; font-size:80%;
    	     width:auto; min-height:20%; margin-left: 23%;
    }
    
    #footer {font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;color: #fff ;text-align:center; font-size:80%;
    		min-height:20%; width:auto; margin-left: 23%;
    }
    You failed to list a fallback family on the first one, and by default they are all set to inherit. Inheritance means that if you said font-family on BODY, you wouldn't have to keep saying it over and over again. The same goes for the color setting. If you say it on BODY everything except table elemetnts in IE5- (or IE quirks mode) and form inputs should pick it up.

    There are other issues too .. margin on body is unreliable, I wouldn't ever set border on body either, percentage margins on the P make no sense (since that's based on font-size and not screen width), etc, etc...

    Code:
    #footer {font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;color: #fff ;text-align:center; font-size:80%;
    		min-height:20%; width:auto; margin-left: 23%;
    }
    min-height of 20% is unreliable, not sure what you're even trying to do there. Likewise the auto width should be unneccesarry and again, % on margins/padding is baased on font-size, which assuming you are aiming for 12px (evidenced by your 80%) that's like 3px.

    Of what you have, this is what I consider salvageable.
    Code:
    body {
    	padding:20px;
    	font:normal 80%/125% "Lucida Sans Unicode","Lucida Grande",sans-serif;
    	color:#FFF;
    	background:#000 url(images/Multi204.jpg) no-repeat;
    }
    
    p {	
    	text-align: justify ; 
    	text-indent:2em; 
    }
    
    h1,h2,h3,h4,h5 {
    	text-align:right;
    }
    I'd really have to see it on a working page and/or what you are trying to do to say for sure. Paul mentioned the issues in the HTML already like the invalid media declarations... the stuff in HEAD that has no business even being there (#head and #footer)... the #head div probably being the wrong tag for it since P is a perfectly good block-level container on it's own -- NOT that it looks like it should be inside a P either...

    A lot of issues.

  7. #7
    SitePoint Addict EarlyOut's Avatar
    Join Date
    Mar 2011
    Location
    Sector R
    Posts
    279
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    ...unless you use generated content outside the ASCII7 set, which is just a really bad idea.
    Yeah, why can't all those damn furners just speak 'mercan?

  8. #8
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by EarlyOut View Post
    Yeah, why can't all those damn furners just speak 'mercan?
    Well to be fair, I was referring to generated content and not the language limitations of 7 bit ascii. Given that I practice separation of presentation from content, adding content with CSS seems a bit... wrong.

  9. #9
    SitePoint Addict EarlyOut's Avatar
    Join Date
    Mar 2011
    Location
    Sector R
    Posts
    279
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Granted - using non-ASCII in the CSS probably falls into the "asking for trouble" category.

    Off Topic:

    Now, if I could just get users to quit using non-ASCII characters and various punctuation marks in file and folder names....

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,787
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    I see you have added an attachment now which wasn't there when I posted (or I missed it). However, I suggest you look at the example I posted (post #5) as a starting point which includes a lot of the fixes that DS pointed out above.

  11. #11
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There is a lot to digest - Trust me as I really appreciate it.

    I need to take baby steps.

    First concern; my background image now only shows near the top left side of the browser window. The rest is now solid black.

    I would like the background image to display in the entire browser window.

    How do I fix that - and what changed it in your CSS?

    Font sizes should not be named, is percent better?

    I also wish to have my menu static (fixed) in the left hand of my screen for the entire site on every page, plus have expanding sub menus.

    How do I accomplish this.

    Thanks very much!

    Rick

  12. #12
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    First concern; my background image now only shows near the top left side of the browser window. The rest is now solid black.

    I would like the background image to display in the entire browser window.

    How do I fix that - and what changed it in your CSS?
    Paul could not see your attachment at the time, and he did not know what your background image was.
    In your earlier code, you confusled the browsers with
    background-repeat: no-repeat repeat;

    which apparently means browsers read just the last "repeat" and repeated (tiled) your image, making it cover the whole body.

    Paul's code has "no-repeat" on the body so it does not repeat. Hint: in case the bg image does not show up, choose a background colour that contrasts well with your text, possible one that's similar to the dominant colour of your image. You can never rely on an image loading when text contrast is involved.

    So you would take Paul's version of "background" and simply remove any mention of repeating, since "repeat" is actually the default in browsers anyway.

    Font sizes should not be named, is percent better?
    % or em, however as a newbie you might be tempted to physically list a % or em font size on Absolutely Everything, which will confuse you because those %'s are %'s of their parents... and this hits many new developers.
    (To get around this myself, I set a % font-size on the body element (which also gets around an IE bug) and then only set anything different on individual elements who usually themselves don't have children: header tags (h1,h2), p's, etc. I do not set font-sizes on containers unless I really do want that to cascade throughout the whole box)

    I also wish to have my menu static (fixed) in the left hand of my screen for the entire site on every page, plus have expanding sub menus.
    If someone's screen isn't as tall as your menu, you realise this means those users will never be able to reach your lowest menu items without either turning off CSS or unzooming/shrinking the text of the page until it appears? Someone once posted some HTML5 security page and they made this mistake and I was sorely pissed, and immediately wrote them off as Ginormous-27"-Mac-monitor-using-graphic-arts-majors, rather than real web developers. That and all their plain-text content only loaded with Javascript, which is 100% Fail. Lawlz. Guess they didn't want my Javascript interpreter to get lazy or something. Needed exercise.


    Seriously, though, unless you've only got like 4 main-menu items and they start at the very top of the page, I would urge you to consider something else.

    If you do only have like 4 main-menu items, position: fixed will work everywhere but IE6. Remember that users can't scroll position:fixed elements (which I guess is the point of it) so this is why it's often a huge usability issue. Position: fixed places the element in relation to the viewport rather than to any element on the page. Hint: while the default might be 0,0 on a ltr page, for best results, list two positions manually.

    I've also seen it done with Javascript, which if built right, can account for user screen size and maybe allow scrolling in those instances. With a not-position:fixed styling for those without JS.

  13. #13
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why do I have body and paragraph in my CSS Stylesheet AND my html page?

    Code:
    body {
    background-color:#000000;
    background-image: url(images/Multi204.jpg);
    background-repeat:no repeat;
    background-attachment:fixed;
    line-height:125%
    padding: 20px;
    /*border 4px solid navy;*/
    margin-right: 40px;
    }
    
    p {	font-family: "Lucida Sans Unicode", "Lucida Grande" ; 
    font-size:100% ; 
    text-align: justify ; 
    line-height:125%; 
    color: #fff; 
    margin-left: 23%;
    text-indent:2em; 
    }
    In html page . . .

    Code:
    body {
        /*background:#000 url(images/Multi204.jpg) no-repeat fixed;
        color:#fff;*/
        line-height:1.25;
        padding: 20px;
        font-family: "Lucida Sans Unicode", "Lucida Grande";
    }
    #outer {
        /*border: 4px solid navy;*/
        width:90%;
        margin:auto;
        max-width:1200px;
        min-width:600px;   
    }
    #content p {
        font-size:medium;
        text-align: justify;
        line-height:125%;
        margin:0 0 1em;
        text-indent:2em;
    }
    p,h1, h2, h3, h4, h5 {margin:0;}
    p{margin:0 0 1em}
    What is #outer { ?

    What is #content p { and how does it differ from a normal <p>

    What is p, h1,h2,h3,h4,h5 and p{margin . . . and why is p, used with h elements anyway.

    I;m setting up my host site so I can upload my css, html and images for you to see. Although . . . I don't think I'll ever get this.

    Thanks . . . Rick

  14. #14
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Properties With Style, Inc. Orange County Real Estate

    Be sure to view to the far right of the viewing window.

  15. #15
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,592
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by R Schreiber View Post
    Why do I have body and paragraph in my CSS Stylesheet AND my html page?
    You tell us! Perhaps it was just in the HTML for testing purposes. Once you are using an external style sheet, just move everything there.

    Code:
    What is #outer { ?
    It's a div that is meant to wrap around the page content (often used to center the contents).

    What is #content p { and how does it differ from a normal <p>
    That rule in the CSS is saying—"Just apply these styles to any <p> withing the #content div, rather than all <p>s".

    What is p, h1,h2,h3,h4,h5 and p{margin . . . and why is p, used with h elements anyway.
    If there is a style that you want to apply to headings and <p>s at the same time, it's most efficient to do it in one rule.

    I don't think I'll ever get this.
    Hang in there. You will.

  16. #16
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok everyone. I do have my one page site that we've been working on up and running.

    Please go to: Properties With Style, Inc. Orange County Real Estate

    It looks very different in IE 8 and Chrome 12.0.742.91.

    I like the menu on the left. Is there a way to make it stay (float) in the left-middle of the page when it's scrolled up or down by the user?

    How can I tell when the Chrome Browser is at the normal viewing size when opened?

    Please review my source page.

    Thanks much.

    Rick

  17. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,787
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by R Schreiber View Post
    Ok everyone. I do have my one page site that we've been working on up and running.

    Please go to: Properties With Style, Inc. Orange County Real Estate

    It looks very different in IE 8 and Chrome 12.0.742.91.
    Looks very much the same to me! What differences are you seeing?

    I like the menu on the left. Is there a way to make it stay (float) in the left-middle of the page when it's scrolled up or down by the user?
    You could wrap a div around the nav using the styles that you have for #nav and that will allow you to use position:fixed on the ul which will fix the menu in position so that it doesn't scroll with the rest of the page.

    That will effectively mean that the menu will need to stay a relatively small height because fixed elements that stretch out of the viewport are unreachable. It also means that you can't have anything else in that left column because it wuld of course overlap.

    How can I tell when the Chrome Browser is at the normal viewing size when opened?
    There is no normal viewing size.

    It all depends on the resolution/monitor size etc and how far the user wants the browser open to. Most users I believe do not browse with their viewports maximised anyway. I certainly don't as I have half a dozen application open at the same time and like to see then all.

    You have a fluid layout anyway except for that massive image (955px) which effectively rules out those on smaller screens anyway.

    Make sure you validate your html and css as you are introducing lots of errors such as missing units from your dimensions and missing semi-colons at the end of rules.

    Also be careful with setting global rules for normal elements like paragraphs. You set all paragraphs to have a margin-left of 23% which is unlikely to ever be useful. Normally you would just set things globally with basic defaults and then be more specific when needed.

    Here is the code tidied up again and with the "fixed" navigation code added in place

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Properties With Style, Inc. Orange County Real Estate</title>
    <link href="testcss.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    html, body {
        margin:0;
        padding:0
    }
    body {
        font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
        background:#000 url(http://www.propertieswithstyle.com/images/bluemarb.gif) repeat fixed;
        padding: 20px;
        color:#fff;
        font-size:100%;
        line-height:1.25;
        padding: 20px 60px;
    }
    p, h1, h2, h3, h4, h5 {
        margin:0 0 1em;
    }
    #outer {
        width:90%;
        margin:auto;
        max-width:1200px;
        min-width:600px;
    }
    #content p {
        text-align: justify;
        line-height:125%;
        margin:0 0 1em;
        text-indent:1em;
        color: #fff;
    }
    #header {
        text-align: center;
        font-size:80%;
    }
    #footer {
        text-align:center;
        font-size:80%;
        clear:both;
        padding:10px 0;
    }
    #footer p {
        margin:0;
    }
    #nav {
        width: 200px;
        padding:10px 0;
        margin:0 25px 2em 10px;
        float:left;
        word-wrap:break-word;
        font-size:77%;
    }
    #nav ul {
        margin:0;
        padding:0;
        list-style:none;
        width: 200px;
        position:fixed;
    }
    #nav li {
        margin:0 10px 5px;
    }
    #nav a {
        color:#fff;
        text-decoration:none;
    }
    #content {
        overflow:hidden;
        margin:0 0 2em;
        padding:10px;
    }
    * html #content {
        zoom:1.0
    }
    #content p.imgchart{text-align:center}
    p.imgchart img{display:inline}
    </style>
    </head>
    <body>
    <!--<div id="outer">-->
    <div id="header">
        <h1>Welcome</h1>
        <p>Welcome to Properties Internet and Information Site. We believe you wil find information here that is potentely relavent to the Orange County area. We welcome all questions and comments viw our contact information form.</p>
    </div>
    <div id="nav">
        <ul>
            <li><a href="#">Home Page</a></li>
            <li><a href="#">Valuating All Homes</a></li>
            <li><a href="#">Search For Homes</a></li>
            <li><a href="#">Map Search By Communities</a></li>
            <li><a href="#">Sellers Information Look Here</a></li>
            <li><a href="#">Buyers Information Look Here</a></li>
            <li><a href="#">Community Areas in Demand</a></li>
            <li><a href="#">Buyers Information Look Here</a></li>
            <li><a href="#">Buyers Information Look Here</a></li>
            <li><a href="#">Buyers Information Look Here</a></li>
            <li><a href="#">Buyers Information Look Here</a></li>
        </ul>
    </div>
    <!--end of navigation div -->
    <div id="content">
        <h2>What is the value of my home or the home I wish to purchase?</h2>
        <p>In looking at the "UNIT SQUARE FEET" scale located at the bottom of the chart below, locate the square foot size of your home or the home of your dreams. On an imaginary vertical line where it intersects either SOLD or available home curve lines, look to the left or right side of the chart to find the dollar scales. This will indicate an approximate value of the home you are thinking of selling or purchasing based on square feet and sales price, the two most critical factors in evaluation. Remember, every home is unique and each specific analysis is far more in depth, however this is a very good start. Data is based on a specific city or area and time frames as noted on the charts. If you have questions or would like a custom detailed analysis for your home or the home you're thinking of purchasing, please contact us.</p>
        <p class="imgchart"><img src="http://www.propertieswithstyle.com/images/MacroValueChart.jpg" width="955" height="701" alt="Macro Value Chart" /></p>
        <div id="footer">
            <p>Copyright, Properties With Style Inc., a Real Estate Corporation. This representation is based in whole or in part on data supplied by various Boards of Realtors or their MLS.  Neither the Associations or their Multiple Listing Service's guarantees or is in any way responsible for its accuracy.  Data maintained by the Associations or their MLS may not reflect all Real Estate activity in the market.</p>
        </div>
    </div>
    </body>
    </html>

  18. #18
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank Paul -

    I'm still lost.

    What part of this markup belogs in the .html page and what part belongs in the Stylesheet page?

  19. #19
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Information overload = total confusion.

    The background image does not remain fixed as before.

    I do not understand why it does not stay FIXED?

    I need to tackle this first before I go down the page to examine/learn the rest of the items.

    Thanks

    Rick

  20. #20
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,592
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by R Schreiber View Post
    What part of this markup belogs in the .html page and what part belongs in the Stylesheet page?
    Paul just included the CSS on the actual HTML page for convenience. The CSS is everything between the <style> tags:

    Code:
    <style type="text/css">
    ⋮
    </style>
    You can cut that out and put it in your style sheet instead if you wish. Make sure to replace all that CSS with an external link to the style sheet in the HTML, of course.

    Quote Originally Posted by R Schreiber View Post
    The background image does not remain fixed as before. I do not understand why it does not stay FIXED?
    Seems the same as before to me. What are you expecting to see?

  21. #21
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,787
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Yes sorry for the late reply but been away all weekend. Shout if you are still stuck.

  22. #22
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I became so frustrated and angry over css and html I fell pray to a knee-jerk reaction and paid $385.52 to use the GoDaddy WebSite Tonight web design.

    That's WORSE than understanding what little I've learned so far of html and css.

    I am working with just a few text and picture items for my index.html home page trying to get them positioned.

    In the html page view all items seems to stack up against the left side of the #outer declaration and I can't effectively place them where I want to.

    I'm trying to understand in Ian Lloyd's book when I should use a BOX model, positioning absolute and how margins and padding fit into all of this.

    I'm still in a chaotic state of mind but I must figure this out.

    So. . . . .in css . . . what do these actually do, and how do they help the page design?

    Code:
    html, body {margin:0;padding:0;}
    also . . .
    Code:
    #outer {width:90%; margin:auto;max-width:1200px;
        min-width:600px;
    }
    this seems to display the boundary (width) of the page, correct? I have objects outside of this boundary! A picture and some text.

    Code:
    #content {
        overflow:hidden;
        margin:0 0 2em;
        padding:10px;
    }
    don't know what this is?

    Code:
    #content p {
        text-align: justify;
        line-height:125%;
        margin:0 0 1em;
        text-indent:1em;
        color: #fff;
    }
    don't know what this is in relation to the #content above?

    Code:
    * html #content {
        zoom:1.0
    say what?

    Thanks Rick

  23. #23
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,787
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by R Schreiber View Post
    In the html page view all items seems to stack up against the left side of the #outer declaration and I can't effectively place them where I want to.
    Where do you want them to be?

    Block elements naturally follow one another vertically down the page and you can space them out with margins where necessary.

    If you want horizontal alignment of block elements then most times you will need to float them as I mentioned earlier in this thread. (I mentioned earlier that you should study floating and all its implications as the is no short-cut to learning I'm afraid. It's practice,practice and more practice. There's no point in getting angry about having to learn something.

    It's not rocket science but just like learning a language you have to know the rules and at least know all the right words and then you have to put the words in the right place. It's a steep learning curve and takes months, (even years) to digest fully and even then there is still much to learn.

    I'm trying to understand in Ian Lloyd's book when I should use a BOX model, positioning absolute and how margins and padding fit into all of this.
    You don't use the "box model" as such. It's a term that describes how an element is made up in respect of width + padding + borders + margin. An element may be 500px width but if you add padding and borders then it will take up more space on the page than 500px because the padding and borders are added on top so that the content space doesn't diminish.

    Absolute positioning removes the element from the flow and is rarely used for structural layout. It is mainly used in controlled situations where the flow of the page is already controlled by other content and you want to place something say in the corner or outside the current context but without interrupting the flow. Once you place something absolutely then you have to make sure that all other elements do not just run over the top of it so use with care.

    Margin is the space between the border (edge) of one element and the border edge of an adjacent element. Padding is the space inside the border between the border and the content. You can see the relationship clearly in the diagram on this page.

    Margins just move elements away from each other (or with negative margins they drag over each other). Margins collapse in some instances and is a complicated subject that needs a thorough understanding.

    Floats allow block elements to sit horizontally but they have many peculiar behaviours so you need to read up on them and practice with them before you can apply them correctly.


    Code:
    html, body {margin:0;padding:0;}
    also . . .
    That negates the default margin and padding that some browsers apply to the html and body elements by setting them both to zero.

    Nearly all elements have some sort of default margin so you need to control this as all browsers vary ion what they think a default should be.

    Code:
    #outer {width:90%; margin:auto;max-width:1200px;
        min-width:600px;
    }
    this seems to display the boundary (width) of the page, correct? I have objects outside of this boundary! A picture and some text.
    That sets an element to 90% of the width of its containing block.

    The min-width and max-width do exactly as they suggest and ensure that the element is no bigger or smaller than the dimensions specified.

    The margin:auto will center a block element that has a width defined. It works by making sure that the side margins are automatically equal. If they are equal and the box has a width then the element is automatically centred (the same does not apply to vertical margins as height is more complicated).

    Code:
    #content {
        overflow:hidden;
        margin:0 0 2em;
        padding:10px;
    }
    don't know what this is?
    The overflow:hidden will clip any content that extends out of the container (it will not clip absolutely positioned elements that extend out of the container unless a stacking context has been set with position:relative on the parent). Overflow:hidden will also contain any child floats which is what it is commonly used for these days. Floats are removed from the flow and an element that holds only floats will be zero height high unless you contain the floats somehow. Overflow:hidden is one way of doing this when you don;t need visible overflow (there are other methods - see css faq on floats) .

    The margin shorthand applies a 2em bottom margin which will push anything away by 2 ems (ems are based on the font-size of the element concerned.

    Code:
    #content p {
        text-align: justify;
        line-height:125%;
        margin:0 0 1em;
        text-indent:1em;
        color: #fff;
    }
    don't know what this is in relation to the #content above?
    [/code]

    Any p element that is inside a container called #content will have those rules above applied to them.

    The space between #content and p is called a descendant selector and selects children of that parent.

    Code:
    Code:
    * html #content {
        zoom:1.0
    say what? Thanks Rick
    Code:
    
    
    That's a hack for IE to give the element haslayout. Read this thoroughly as it explains it all in minor detail.

    You can't expect to learn everything in one go so don't get angry with it. You must take your time, practice and gradually it will start falling into place. CSS isn't hard but it's not easy at first I agree.

    It does however have rules that need to be learned and understood before you can apply them properly. As I said earlier its like learning to speak a language where you can't take random words, throw them into a sentence and expect them to make sense. The words may be spelled correctly but you still end up talking rubbish

  24. #24
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,592
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    You can't expect to learn everything in one go so don't get angry with it. You must take your time, practice and gradually it will start falling into place.
    The other thing I would recommend is take a day or so to sit down and read the book cover to cover. I'm not familiar with Ian Lloyd's book, but a lot of people come here citing the book and laying out their pages with absolute positioning. I'm assuming they've only read a little way into the book and stopped before getting the whole picture. It's really important to get that overview and see how everything fits together, and which tools are suited to what purpose.

    As long as you read a CSS book cover to cover, you should have a good overview of the subject. I only wish I could say the same for JavaScript and PHP!

  25. #25
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ralph & Paul - thanks very much.

    I did read the entire notation on the MSDN hasLayout.

    My simplistic translation is that I can't solely rely on the parent layout parameters to flow down to the child, and that in some cases just providing a little layout definition to the child element will correct the problem.

    I'm actually experiencing that right now with text not flowing around a picture.

    I'll let you know if I figure it out.

    Thanks much. Rick


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
  •