SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 29
  1. #1
    SitePoint Enthusiast SteveMif's Avatar
    Join Date
    Aug 2013
    Location
    Malta
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Simple learning excercise - 2 blocks of text with css (no table)

    Hi, I am in my starting part of the learning curve to try using css instead of tables.

    I want to start to do something simple.

    I need a left block of text and a right block of text (same width) as if we have
    Code HTML4Strict:
    </tr>
    <td> text 1 </td>
    <td> text 2 </td>
    </tr>


    So i tried this:



    Code CSS:
    {
    	margin-right: 60%;
    	margin-left:10px;
    	margin-top: 10px;
    	margin-bottom:0;
    	border:thin;
    	background-color:#FFF;
    	font: 9pt "trebuchet ms", arial, sans-serif;
    	color:#003318;
    	display:block;
    }
     
     
     
     
    .introtxt_r
    {
    	margin-left: 60%;
    	margin-right:10px;
    	margin-top: 10px;
    	border:thin;
    	background-color:#FFF;
    	font: 9pt "trebuchet ms", arial, sans-serif;
    	color:#003318;
    	display:block;
    }

    Code HTML4Strict:
    <div class="introtxt_l"> text1 </div>
    <div class="introtxt_r"> text2 </div>


    The negative results:
    1: No border
    2: The left hand side box is good, but the right hand side box is ot next to it but below it (well aligned to the right)


    I played a bit with some css elements (like float) but now I gave up!

    Help!

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,198
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    To get straight into it the below points are the key things to know.

    • By default DIV elements are display: block which means they fill the entire space they are used in
    • You need to use float: left when aligning elements side by side unless they are inline, as per my first point
    • Using margin-left and margin-right will cause the columns to drop below one another as the margin takes affect from the first column, not the edge of the page (unless its floated)


    See the following demo which is an example of floating 2 columns side by.

    http://cdpn.io/f22794171f99f5f84891d321d604e4cb

    CSS
    Code CSS:
    .column {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      background-color: red;
      color: #fff;
      float: left;
      padding: 10px;
      width: 50%;
    }

    Be aware I wrote this example with the intention that you're only supporting IE8+ which support box sizing.

  3. #3
    SitePoint Enthusiast SteveMif's Avatar
    Join Date
    Aug 2013
    Location
    Malta
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've adapted the code as follows:
    Code CSS:
    .introtxt_l 
    {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      background-color:#DDD;
      color: #000;
      float: left;
      padding: 10px;
      width: 49%;
      padding:10px;
    }
     
    .introtxt_r
    {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      background-color:#DDD;
      color: #000;
      float: right;
      padding: 10px;
      width: 49%;
      padding:10px;
    }


    I cannot however set the two boxes to have an inset margin from the left (for the left box) or the right (for the right box) so as they are aligned vertically with teh content above/below. Using the margin-left / -right, the boxes will wrap over each other if the window is resized.

    Secondly, there is a wide gap between the boxes and the content below it. Can't figure out how to eliminate it either.

    Check website here: Testpage

  4. #4
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,198
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    The link you posted points to your local server which I can't see, also you don't need to duplicate your selector code as you can simply comma separate your selectors to share the same CSS rules.

    Code css:
    .introtxt_l,
    .introtxt_r {
         -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
         box-sizing: border-box;
     
         background-color:#DDD;
         color: #000;
         float: left;
         padding: 10px;
         width: 49%;
    }
     
    .introtxt_r {
         float: right;
    }

  5. #5
    SitePoint Enthusiast SteveMif's Avatar
    Join Date
    Aug 2013
    Location
    Malta
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  6. #6
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,611
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    And this page, with a 4.01 Transitional doctype, shows 141 errors in the HTML.

  7. #7
    SitePoint Enthusiast SteveMif's Avatar
    Join Date
    Aug 2013
    Location
    Malta
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Many of them are because of the use of <font> tag (depreciated). As I said, the code originated from a template which was heavy modified and mutilated! I am fixing them.

    Please do you know how can I move the left box slightly to the right. Margin-left cannot be used.

  8. #8
    SitePoint Enthusiast SteveMif's Avatar
    Join Date
    Aug 2013
    Location
    Malta
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ronpat, now the errors should have been reduced by 95% (ignoring depreciation alerts). The graphical table were using the tag moduleid which is not further used.

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by SteveMif View Post
    Please do you know how can I move the left box slightly to the right. Margin-left cannot be used.
    You could increase the left padding a bit instead.

    Code:
    .introtxt_l {padding: 10px 10px 10px 20px;

  10. #10
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,611
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by SteveMif View Post
    Please do you know how can I move the left box slightly to the right. Margin-left cannot be used.
    I am working up an example for you. I'm not very fast, so it will take a few minutes.

  11. #11
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,611
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    I do not advocate using properties that are still under development, especially if there is no graceful fallback for non-supporting devices; therefore, my suggested code does not use the box-sizing property. That's my preference and is no reflection on anyone else (call me a slow adopter, if you wish).

    I suggest making the following change to the HTML:

    from:
    Code:
    <td class="toptext">
        <a name="top"></a>
        <h1>MALTA NATURE TOURS</h1>
        <br>
        <div class="introtxt_l">
            text here
        </div>
        <div class="introtxt_r">
            text here
        </div>
    </td>
    to:
    Code:
    <td class="toptext">
        <a name="top"></a>
        <h1>MALTA NATURE TOURS</h1>
        <div class="intro">
            <div class="introtxt_l">
                <p><span>introduction</span>... text here...</p>
            </div>
            <div class="introtxt_r">
                <p><span>mission</span>... text here...</p>
            </div>
        </div>
    </td>
    In the above change, we add <div class="intro"> and delete the <br> tag. Remember that <div class="intro"> has a closing tag, too.
    The text is changed by putting it in <p> tags and changing the <font> tags to <span> tags.

    The new HTML with text should look like this:
    Code:
    <td class="toptext">
        <a name="top"></a>
        <h1>MALTA NATURE TOURS</h1>
        <div class="intro">
            <div class="introtxt_l">
                <p><span>introduction:</span> Backed with 7 years of experience, MaltaNatureTours.com specializes in organising <b>guided nature walks</b> in Malta and Gozo. Identification and information about the <b>biodiversity</b> encountered is supplied in all tours. <b>Small groups</b> guarantee personal attention and a unique experience of the fantastic Maltese natural habitats. During these years, experience made these tours having the right balance of fun, education, non-exhaustive exercise, site seeing, plenty of magnificent views and with a touch of history in the <b>safest and best countryside areas</b> in the Maltese islands.</p>
            </div>
            <div class="introtxt_r">
                <p><span>mission:</span> Our mission is to promote educatione, awarness and protection to the Maltese biodiversity and natural habiats. For several decades along the development of the country, these habitats were endangered; partly due to lack of awerness and partly due to the growing urbanisation. Major profits from these tours are directed to financially support environmental activities and websites needed to araise awareness and educate younger generations about the importance of our environment. For example, a part of the sister website - <a href="http://www.maltawildplants.com">Maltawildplants.com</a> is supported from such funds.</p>
            </div>
        </div>
    </td>
    The above HTML is supported by the following CSS. This CSS replaces whatever is currently in place. If in doubt, you can insert it at the bottom of the stylesheet or at top of the HTML page.
    Code:
    .intro {
        overflow:hidden;    /* because contents are floated */
        padding-top:20px;    /* space between intro boxes and "Malta Nature Tours" text */
        padding-left:40px;   /* space to the left of the intro boxes */
    }
    
    .introtxt_l,
    .introtxt_r {
        background-color:#ddd;
        float:left;
        margin-bottom:25px;
        width:49%;
    }
    
    .introtxt_r {
        margin-left:2%;    /* The total width of the contents of div.intro must not exceed 100%;  {width:49%} + {width:49%} + {margin-left:2%} = 100%. */
    }
    
    .introtxt_l p,
    .introtxt_r p {
        color:#000;
        font-size:1em;
        line-height:1.5;
        margin:.5em 1em;
    }
    
    .introtxt_l p span,
    .introtxt_r p span {
        font-size:1.5em;
        text-transform:uppercase;
    }
    This is a screenshot showing how it appears on my PC.
    textcontainer.gif

  12. #12
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,198
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by ronpat View Post
    I do not advocate using properties that are still under development, especially if there is no graceful fallback for non-supporting devices; therefore, my suggested code does not use the box-sizing property. That's my preference and is no reflection on anyone else (call me a slow adopter, if you wish).
    Everyone is entitled to their own view on things which is fine, however IE7 is dead with less than a 1% global footprint which means box-sizing is completely safe to use since IE8 supports border-box without any major issues.

    The prefixes are only used to support legacy versions of Chrome, Firefox etc...

  13. #13
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,611
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by chris.upjohn View Post
    The prefixes are only used to support legacy versions of Chrome, Firefox etc...
    Thanks, Chris. Truly, I'm slow to pick up on these things as they become accepted. If properties work in IE8+ and all other major browsers (which are automatically updated) I'm usually happy with them. Thanks again for the input (I appreciate it!).

    EDIT: I just checked http://caniuse.com/#feat=css3-boxsizing and they seem a bit less convinced that it's fully accepted, so maybe I'll still take the conservative road for a while longer. Can't hurt. I'll keep my eye on it, though.

  14. #14
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by ronpat View Post
    I just checked http://caniuse.com/#feat=css3-boxsizing and they seem a bit less convinced that it's fully accepted
    In the notes, they say—

    Partial support refers to supporting only the "border-box" value, not "padding-box" (which was added to the spec later).
    That means that all of the browsers listed there support border-box, which is good enough for me.

  15. #15
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,611
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by SteveMif View Post
    Many of them are because of the use of <font> tag (depreciated). As I said, the code originated from a template which was heavy modified and mutilated! I am fixing them.
    Steve, the number of validation errors went down from 141 to 135.

    The reason I mentioned the Transitional doctype in post #6 is because there are NO errors for deprecated elements included in the error tally. Most of these are legit errors. I imagine most are fixable. I tinkered with it and got it down to 26 errors before I stopped. My tinkering will probably remain unfinished. It's a long page and requires a few hours of work to clean up.

    I'll stop nagging about validating the HTML, but it's important for you to realize that CSS cannot work its magic reliably if the HTML that it styles contains certain types of errors. That's just the way it is.

  16. #16
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,611
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by ralph.m View Post
    In the notes, they sayŚ
    That means that all of the browsers listed there support border-box, which is good enough for me.
    I'm slightly hesitant because FF still requires the -moz- prefix, and apparently plans to do so for the next few versions. Anyway, I'm overly cautious as a defense mechanism because I find it difficult to keep up with the incremental evolution of the properties. Plus, apparently I didn't understand what that note was saying, either; I interpreted it to mean exactly the opposite. ("... my native tongue")

  17. #17
    SitePoint Enthusiast SteveMif's Avatar
    Join Date
    Aug 2013
    Location
    Malta
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi RonPat and Chris. Thanks for your help. I went with Ronpat css as I was more understanding what is happening in the code and also relearing the css which I forgot most of it. The test page is here: www.maltanaturetours.com/index.php From this post, now I have created another block (green col) beneath the two intro text boxes. I tried to apply the cascading effect like in the example above for having the last two lines (those not in <ul>) to be smaller. I tried many ways but it does not want to get smaller


    Code CSS:
     
    .maintxt  {
        background-color:#ded;
        float:left;
        margin-bottom:0px;
        width:90%;
        padding: 15px;
        border:double;
    	 font-size:12pt;
    	 margin-left:4%;
    	 margin-right:6%;
    }
     
    .maintext p {
    	font-size:10pt;
    }

    Code HTML4Strict:
    <div class="maintxt">
    <ul>
    <li>Prices...</li>
    <li>For a quote...</li>
    <li>Please note... </li>
    </ul>
     
    <p class="maintxt"> Full details about selected tours are provided below.... </p>
    </div>


    I tried using span and also giving a different classname to the small font, but it seems nothing makes effect.
    What I am doing wrong ?

  18. #18
    SitePoint Enthusiast SteveMif's Avatar
    Join Date
    Aug 2013
    Location
    Malta
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    Steve, the number of validation errors went down from 141 to 135.
    Oh no! lol! What validator are you using. I did mine with the tool on Dreamweaver V8. I have table cleaned one page (this) and was really a brain damage experience. If there are still 135 errors on this page, than its amazing.!

    I placed the reported faults [here]

    Quote Originally Posted by ronpat View Post
    I'll stop nagging about validating the HTML, but it's important for you to realize that CSS cannot work its magic reliably if the HTML that it styles contains certain types of errors. That's just the way it is.
    are you passing the partially validated file some way to see what are these errors. ?

  19. #19
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,611
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Delete the class from
    Code:
    <p class="maintxt">
    so you just have <p> without a class.

    See what happens.

  20. #20
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,611
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    What web browser do you use?


    I just noticed that I misdiagnosed the problem in message #17.
    Code:
    .maintxt  {
        background-color:#ded;
        margin-bottom:0px;
        width:90%;
        padding: 15px;
        border:3px double #000;
        font-size:12pt;
        margin-left:4%;
    }
    .maintxt p {    /* maintxt was spelled wrong "maintext" */
        font-size:10pt;
    }
    
    
    <div class="maintxt">
        <ul>
            <li>Prices...</li>
            <li>For a quote...</li>
            <li>Please note... </li>
        </ul>
        <p> Full details about selected tours are provided below.... </p>
    </div>
    That should do it.
    Last edited by ronpat; Aug 28, 2013 at 03:20. Reason: Add code example.

  21. #21
    SitePoint Enthusiast SteveMif's Avatar
    Join Date
    Aug 2013
    Location
    Malta
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh dear me - how could I not detect that typo :-( Thanks Ron. Now I have manually checked the nested tables of index.php and i have fixed a number of errors . My validation tool is different from yours as it does not list all that number of errors. I wonder what is the count now!


    Code CSS:
    .intro {
        overflow:hidden;    /* because contents are floated */
        padding-top:20px;    /* space between intro boxes and "Malta Nature Tours" text */
        padding-left:40px;   /* space to the left of the intro boxes */
    	 padding-right:20px;    
    }
     
    .introtxt_l,
    .introtxt_r {
        background-color:#ddd;
        float:left;
        margin-bottom:25px;
        width:48.5%;
    }
     
    .introtxt_r {
        margin-left:1.5%;    /* The total width of the contents of div.intro must not exceed 100%;  {width:49%} + {width:49%} + {margin-left:2%} = 100%. */
    }
     
    .introtxt_l p,
    .introtxt_r p {
        color:#000;
        font-size:1em;
        line-height:1.5;
        margin:.5em 1em;
    }
     
    .introtxt_l p span,
    .introtxt_r p span {
        font-size:1.5em;
        text-transform:uppercase;
    }
     
     
    .maintxt  {
        background-color:#bedcce;
        float:left;
    	 margin: 0 6% 15px 4%; /* top right bottom left*/
        width:90%;
    	 padding: 15px;
    	 border:double;
    	 font-size:12pt;
    }
     
    .maintxt p {
    	font-size:10pt;
    	border:0;
    	margin:0;
    	width:97%;
    }

    Hope this kind of mini tutorial helps someone else.
    The example discussed here is found on this webpage

  22. #22
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,611
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Hi, Steve,

    In the interest of learning exciting new things, I would like to ask you to take another look at the code for .maintxt.

    You show this:
    Code:
    .maintxt  {
        background-color:#bedcce;
        float:left;
        margin: 0 6% 15px 4%; /* top right bottom left */
        width:90%;
        padding: 15px;
        border:double;
        font-size:12pt;
    }
    I recommend this:
    Code:
    .maintxt  {
        width:90%;
        border:3px double #000;
        background-color:#bedcce;
        font-size:12pt;
        padding: 15px;
        margin: 0 6% 15px 4%; /* top right bottom left */
    }
    The most important thing to notice about my recommedation is that the box is NOT floated. Floating .maintxt serves no purpose. In fact, it disrupts the flow of the page and requires another element.

    I urge you to copy and paste my code over yours. If the space between .maintxt and the List of Provided Tours and Services becomes too large (which it probaby will), then you should delete lines 171 through 177 entirely:
    Code:
    <center>
    <h3>
    </b></h3>
    </center>
    
    </p>
           <p>&nbsp;</p></td>
    The preceeding HTML is disfunctional and should be deleted.

    We can talk about restoring the space between .maintxt and the List of Provided... using proper code techniques.


    The number of validation errors on this page is down from 135 to 103. Way to go!

    What browser(s) do you use?

  23. #23
    SitePoint Enthusiast SteveMif's Avatar
    Join Date
    Aug 2013
    Location
    Malta
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have the trio (FF,IE,GC), but mainly work on FireFox.

    The useless html cannot be found, so I must have deleted it during my last correction

    The space between maintext and table of provided tours is fine.

    105 errors?! What type of errors are these?

  24. #24
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,611
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by SteveMif View Post
    I have the trio (FF,IE,GC), but mainly work on FireFox.

    105 errors?! What type of errors are these?
    OK, good. We're on a roll! The error count is now down to 95 !!!

    Moving right along... let's take a look at the top of the page:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd"> <head>
    
    <title> Malta Nature Tours - Quality Holiday excursion and walking guided tours in Maltese Nature [Home Page] </title>
    		 <head>
    Notice that you have TWO open head tags <head>, but NO open <html> tag.
    Notice also that the second <head> tag is BELOW the <title> tag.

    Let's fix those errors by doing this:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
        <title>Malta Nature Tours - Quality Holiday excursion and walking guided tours in Maltese Nature [Home Page]</title>
    More to follow...

  25. #25
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,611
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Wanna clear another 20 errors on the index.php page quickly?

    Go to lines 166 through 185.

    The <param> tag does not require a close </param> tag.

    Delete the </param> tag from the ends of those lines and you will clear 20 validation errors.

    Quick and easy

    More to follow....


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
  •