SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Almost There . . . CSS & HTML order?

    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

    Code:
    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. #2
    SitePoint Enthusiast
    Join Date
    Oct 2011
    Location
    Canada,Montréal
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

    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


    Code:
    @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/...ck-and-inline/ block and inline help
    http://www.w3schools.com/cssref/default.asp : CSS referance whit examples.

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2011
    Location
    Canada,Montréal
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    your CSS could be cleaner also . You have redundent style definitions.

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

  4. #4
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Still confused

    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
    Attached Images Attached Images

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

  6. #6
    SitePoint Enthusiast
    Join Date
    Oct 2011
    Location
    Canada,Montréal
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I Agree with Paul O'B

    An updated page to look at would really help .

    Code:
    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. #7
    SitePoint Enthusiast
    Join Date
    Oct 2011
    Location
    Canada,Montréal
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


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
  •