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 !


<!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>

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.

Here is my css . . .

@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; 
}*/

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.

Hi as others have said we can’t really work out what that is supposed to look like.:slight_smile:

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


<!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

I’m going to go down your CSS bit by bit to point out ‘issues’


@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.


/* 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.


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.


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…


#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.


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.

Yeah, why can’t all those damn furners just speak 'mercan? :wink:

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.

Granted - using non-ASCII in the CSS probably falls into the “asking for trouble” category. :eek:

Off Topic:

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

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.

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

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.

Why do I have body and paragraph in my CSS Stylesheet AND my html page?

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 . . .


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

Properties With Style, Inc. Orange County Real Estate

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

You tell us! :stuck_out_tongue: Perhaps it was just in the HTML for testing purposes. Once you are using an external style sheet, just move everything there.

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. :slight_smile:

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

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


<!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>


Thank Paul -

I’m still lost.

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

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

Paul just included the CSS on the actual HTML page for convenience. The CSS is everything between the <style> tags:

<style type="text/css">
&#8942;
</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.

Seems the same as before to me. What are you expecting to see?