Almost There . . . CSS & HTML order?

HTML & CSS
1

Okay – I’ve spent over a day at SitePoint Referrence for HTML and CSS.
Again www.propertieswithstyle.com

IE 8: Displays well and is the look that I want. However, I believe the HTML is somewhat ugly. Look at what I had to do to get spacing between the <p> paragraphs. Yes I ran it through validation but cannot intpret well the suggestions. That’s why I spent a lot of time in the reference sections.

Opera 11.52: Menu text much larger. <p> text smaller. Spacing between paragraphs is huge. Footer text HUGE!. Layout is basically there with images and content widths, etc.

Chrome I believe the latest version. Menu text is smaller. Viewport width is TWICE the width of the normal screen. All text is very small. Footer text is microscopic and extends way off screen to the left of the view port. When zooming in or out all seems to implode on itself

I’m wondering about my CSS flow, the order of the css callouts on the stylesheet. If the outer, maincontent and menu <divs>are conflicting somehow?

Any assistance would be greatly appreciated.

(Note: I did obtain more information about java script. Thanks.)

My CSS


html, body {margin:0;
    		padding:0
}


body 		{color:#000;
    		 background: url(images/blinds1.png) fixed;			
    		 font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    		 font-size:100%;
    		 line-height:1.3;
			 padding:0 10px;
			 margin-top:30px;
}

#outer 		{max-width:1200px;
			 min-width:400px;
			 width:100%;
			 margin-right:14px;
			 margin-left:14px;
			 position:relative;
} 

#maincontent{float:right;
			 width:66.67%; /* 800px */
			 margin-top:30px;
}

/* ---------------container for the navigation ----------------------*/
#nav {
    margin:0;
    padding:0;
    list-style:none;
	font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
    color:#fff;
	font-size:90%;
	line-height: 130%;
    position: fixed;
	top:30px;
    width:26.67%;  /*width of navigation list 320px*/
	overflow:hidden; /* can-does this go here? */
}

	* html #nav{position:absolute;}
	#navli{font-size:90%;margin:0 0 5px;
	list-style:none;}
	#nav a,#nav a:link,#nav a:visited {
	color: #6CF;
    list-style: none;
	text-decoration: none;
}

#nav li a:hover{color:#fff}
/*************************************************NAVIGATION ENDS HERE***************/

h1,2,3,4,5,6{font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;

}

p 			{font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; 
			 float:left;
			 font-size:96%;
			 line-height: 120%; 
			 text-align: justified;
			 color:#6CF;
			 padding-bottom:1%;
			 /*padding: 1% 0.5 1% 0.5;*/
}

.plate  
			{float:right;
			 display:block;
			 position: relative;/* IE bug fix*/
}

.imgpic		{float:right;
			 display:block;
			 position: relative;/* IE bug fix*/
			 /* margin-bottom:1%; */
			 border-style:inset;
			
}

#footer		{font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
			 float:right;
			 font-size:54%;
			 font-style:normal;
			 line-height: 100%; 
			 color:#6CF; 
			 text-align:justify;
					 
}
/* eND css*/
2

Get rid of those <BR> AND <PRE></PRE>

Apply class to your p for the spacing.

<p class=‘yourClassName’> TEXT </p>(whitout the .) (see end of CSS for class example in CSS)

test-align:justified does’nt exist its text-align:justify :slight_smile:

in XHTML 1.0 STRICT doctype image end whit " />" and not “>”

ex : <img src=“images/pwsheader.gif” alt=“Properties With Style Header Image” width=“800” /> no px needed
for the with and height of img tag

HERE is a correct CSS file

@charset "utf-8";
/* CSS Document */
/* 10/18/2011 */

html, body {margin:0;
    		padding:0
}


body 		{color:#000;
    		 background: url(images/blinds.jpg) fixed; /* (images/blinds1.png) fixed; */
    		 font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    		 font-size:100%;
    		 line-height:1.3;
			 padding:0 10px;
			 margin-top:30px;
}

#outer 		{max-width:1200px;
			 min-width:400px;
			 width:100%;
			 margin-right:14px;
			 margin-left:14px;
			 position:relative;
} 

#maincontent{float:right;
			 width:66.67%; /* 800px */
			 margin-top:30px;
}

/* ---------------container for the navigation ----------------------*/
#nav {
    margin:0;
    padding:0;
    list-style:none;
	font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
    color:#fff;
	font-size:70%;
	line-height: 130%;
    position: fixed;
	top:30px;
    width:26.67%;  /*width of navigation list 320px*/
	overflow:hidden;
}

	* html #nav{position:absolute;}
	#navli{font-size:90%;margin:0 0 5px;
	list-style:none;}
	#nav a,#nav a:link,#nav a:visited {
	color: #6CF;
    list-style: none;
	text-decoration: none;
}

#nav li a:hover{color:#fff}
/*************************************************NAVIGATION ENDS HERE***************/


h1,h2,h3,h4,h5,h6{font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;

}

p 			{font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; 
			 float:left;
			 font-size:96%;
			 line-height: 120%; 
			 text-align:justify;
			 color: #6CF;
			 padding-bottom:1%;

}

.plate  
			{float:right;
			 display:block;
			 position: relative;/* IE bug fix*/
}

.imgpic		{float:right;
			 display:block;
			 position: relative;/* IE bug fix*/
			 /* margin-bottom:1%; */
			 border-style:inset;
			
}

#footer		{font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
			 float:right;
			 font-size:54%;
			 font-style:normal;
			 line-height: 100%; 
			 color:#6CF; 
			 text-align:justify;
					 
}
/* eND css*/


html, body { 
margin : 0; 
padding : 0; 
} 
body { 
color : #000; 
background : url(images/blinds.jpg) fixed; 
font-family : "Lucida Sans Unicode", "Lucida Grande", sans-serif; 
font-size : 100%; 
line-height : 1.3; 
padding : 0 10px; 
margin-top : 30px; 
} 
#outer { 
max-width : 1200px; 
min-width : 400px; 
width : 100%; 
margin-right : 14px; 
margin-left : 14px; 
position : relative; 
} 
#maincontent { 
float : right; 
width : 66.67%; 
margin-top : 30px; 
} 
#nav { 
margin : 0; 
padding : 0; 
list-style : none; 
font-family : "Lucida Sans Unicode", "Lucida Grande", sans-serif; 
color : #fff; 
font-size : 70%; 
line-height : 130%; 
position : fixed; 
top : 30px; 
width : 26.67%; 
overflow : hidden; 
} 
* html #nav { 
position : absolute; 
} 
#navli { 
font-size : 90%; 
margin : 0 0 5px; 
list-style : none; 
} 
#nav a, #nav a:link, #nav a:visited { 
color : #6cf; 
list-style : none; 
text-decoration : none; 
} 
#nav li a:hover { 
color : #fff; 
} 


p { 
font-family : "Palatino Linotype", "Book Antiqua", Palatino, serif; 
float : left; 
font-size : 96%; 
line-height : 120%; 
color : #6cf; 
padding-bottom : 1%; 
} 
.plate { 
float : right; 
display : block; 
position : relative; 
} 
.imgpic { 
float : right; 
display : block; 
position : relative; 
border-style : inset; 
} 
#footer { 
font-family : "Lucida Sans Unicode", "Lucida Grande", sans-serif; 
float : right; 
font-size : 54%; 
font-style : normal; 
line-height : 100%; 
color : #6cf; 
text-align : justify; 
} 

/* CLASS EXEMPLE

.yourClassName  // this will give the p elements whit the class a padding at the top of 60 px ,.
{
     margin-top: 60px;
}

*/

here is your header corrected also

<!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” xml:lang=“en” lang=“en”>
<head>
<title>Orange County Real Estate - Properties With Style, Inc. Home Page</title>
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” />
<meta http-equiv=“Content-Language” content=“en” />
<meta name=“Keywords” content=“orange county real estate, rick schreiber, local broker, local real estate broker, local agent, local real estate agent, orange county real estate broker, orange county real estate agent.” />
<link type=“text/css” rel=“stylesheet” href=“images/homepage.css” media=“screen,projection,tv” />
</head>

notice the /> again for meta and link tag

http://www.webdesignfromscratch.com/html-css/css-block-and-inline/ block and inline help
http://www.w3schools.com/cssref/default.asp : CSS referance whit examples.

3

your CSS could be cleaner also . You have redundent style definitions.

i use http://www.cleancss.com/ (free) or topstyle

4

Hi clairmore22

I did incorporate your suggestion regarding a new class .pmargin-top:20px;

For the most part that works well until I get here . . .

This short sentence . . .

<p class=“pmargin”>We believe our clients are <em>Properties With Style!</em></p> does not extend to the far right of the #maincontent border. There is no block absorption of the remainder of the text line as referred to in one of your links for blocks.

Because of that, the next (larger) paragraph starts at the right end of the short box and inherits what the above block is not absorbing.

I have an empty block at the far right side of my #maincontent where this larger wordrapping paragraph is formatted.

[___] empty space - no block-line absorption

    [_________]   larger paragraph will not

aaaaaaaaaaafloat:left of this block as it should.

I have the same problem with the footer being contained to the far right side of the #mincontainer held to the width of the graphic which is 90px.

If I can learn how to correct this problem I believe I can move on with other design pages for my site.

See my attached AlingmentProblems.jpeg file.

Thanks much . . . Rick

5

From the look of your picture it looks like you have floated some elements but not cleared the following elements when needed. There’s probably some other stuff going on there as they have wrapped in blocks which probably means you have set overflow other than visible to the wrapping text which will make it form a rectangular block to thee side of the float.

However, that’s just a guess without an updated page to look at.:slight_smile:

6

I Agree with Paul O’B

An updated page to look at would really help .

http://www.kmultim.com/test.html

I think you whant something like this (this is fluid width ) .
Just add your classes to give it the final look you want if you decide to use it . I made this with a premade template so there is a lot of comments in the css . ( you should move it to an external file if you decide to use it).

7

http://csscreator.com/version2/pagelayout.php

another tool is use , but having a clear understanding of CSS really help when it come to modifing those.

There is no such thing as a perfect template anyway. Except if you make it yourself.