Skip navigation
jp zoro
Currently Being Moderated

#apDiv text box position problem

Apr 11, 2013 3:45 AM

Tags: #cs5 #text #css ##apdiv

Hi,

 

I'm a school teacher and amateur web designer making a site for children who have learning difficulties. The page I'm working on is available here:

 

http://www.john-paul.talktalk.net/index6.html#

 

As you can see there are 'bigger text' and 'smaller text' buttons at the top right hand of the page using CSS (this is my first go at CSS). The page is working as I would like, but I can't postition the text as I want it on the screen.

 

What I'm after is text boxes underneath the images where the text gets bigger and smaller when the 'bigger text' button is clicked, but at the moment the small text is not positioned exactly underneath each image, and the large text moves down rather than being exactly where the small text was. I don't know how to move the small text upwards (i.e. to change the space around the word 'university' so that the word is higher up), or how to get the large text to centre on the same place where the small text was. I hope that makes sense.

 

Eventually I would like to add a cookie to the site so that the preference for large or small text will be remembered. If you were able to point me in the right direction for how to do that I would be very grateful.

 

Thanks for reading this. Any advise would be great.

 

Best wishes,

 

John-Paul

 
Replies 1 2 Previous Next
  • Currently Being Moderated
    Apr 11, 2013 4:09 AM   in reply to jp zoro

    I would place the text in the same <table> where your images are.

     

    --

    Kenneth Kawamoto

    http://www.materiaprima.co.uk/

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 11, 2013 4:35 AM   in reply to jp zoro

    Do not use separate <div> for your images - it's semantically incorrect.

     

    The reason why your text size buttons didn't work is that you have set the font-size for <td> to 24px explicitly (line 9). Remove td from that CSS rule.

     

    --

    Kenneth Kawamoto

    http://www.materiaprima.co.uk/

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 11, 2013 5:18 AM   in reply to jp zoro

    Copy and paste the following into a new document and view in your favourite browser

     

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style>
    * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
    body {max-width: 1400px; margin: auto;}
    body.Bigger {font-size: 36px;}
    body.Smaller {font-size: 24px;}
    h2 {margin: 0; padding: 0;}
    hr {clear: both;}
    .settingIcons {width: 200px; float: right;}
    .settingIcons img {display: inline-block; width: 65px; margin: 10px;}
    .itembox {width: 33.33333%; float: left; padding: 20px; text-align: center;}
    .itembox img {display: block; margin: auto;}
    </style>
    </head>
    
    <body class="Smaller">
    <div class="settingIcons">
    <img src="http://www.john-paul.talktalk.net/Images2/big.png" alt="bigger text" onClick ="body.className = 'Bigger'">
    <img src="http://www.john-paul.talktalk.net/Images2/small.png" alt="smaller text" onClick ="body.className = 'Smaller'">
    </div>
    <hr>
    <div class="itembox">
    <img src="http://www.john-paul.talktalk.net/Images2/university.png" alt=" ">
    <h2>university</h2>
    </div>
    <div class="itembox">
    <img src="http://www.john-paul.talktalk.net/Images2/university.png" alt=" ">
    <h2>university</h2>
    </div>
    <div class="itembox">
    <img src="http://www.john-paul.talktalk.net/Images2/university.png" alt=" ">
    <h2>university</h2>
    </div>
    <div class="itembox">
    <img src="http://www.john-paul.talktalk.net/Images2/university.png" alt=" ">
    <h2>university</h2>
    </div>
    <div class="itembox">
    <img src="http://www.john-paul.talktalk.net/Images2/university.png" alt=" ">
    <h2>university</h2>
    </div>
    <div class="itembox">
    <img src="http://www.john-paul.talktalk.net/Images2/university.png" alt=" ">
    <h2>university</h2>
    </div>
    </body>
    </html>
     
    |
    Mark as:
  • Currently Being Moderated
    Apr 11, 2013 5:24 AM   in reply to jp zoro

    Is there a way to stop the text in the first box (where it says 'www.john-paul.org.uk') from resizing with the 'bigger text' button, whilst allowing the text below (for example 'university') to resize?

    In my example above add the highlighted

    body.Bigger .itembox {font-size: 36px;}

    body.Smaller .itembox {font-size: 24px;}

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 11, 2013 5:35 AM   in reply to jp zoro

    Is there a way to stop the text in the first box (where it says 'www.john-paul.org.uk') from resizing with the 'bigger text' button, whilst allowing the text below (for example 'university') to resize?

    That's <h1> so create a CSS rule for h1 and set font-size explicitly.

     

    Your code:

    <td><div align="center"><strong>university</strong></div></td>

    should be:

    <td align="center"><strong>university</strong></td>

    NB. Since your page is in HTML4.0 you can use align attribute. Moving forward, you should use CSS instead. Of course you can rewrite all in HTML5 too, like in Ben's post

     

    --

    Kenneth Kawamoto

    http://www.materiaprima.co.uk/

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 11, 2013 7:18 AM   in reply to jp zoro

    Would you be able to advise me on putting a cookie into this page so that the preference of a user about the text size is stored?

    Sure that's not hard

     

    Place this Javascript in your <head>:

    <script>
    function createCookie(value) {
        var date = new Date();
        date.setTime(date.getTime() + (30*24*60*60*1000));
        document.cookie = "fontSize=" + value + "; expires=" + date.toGMTString() + "; path=/";
    }
     
    function readCookie() {
        var nameEQ = "fontSize=";
        var ca = document.cookie.split(';');
        for(var i=0; i < ca.length;i++) {
            var c = ca[i];
            while (c.charAt(0) == ' ') c = c.substring(1, c.length);
            if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
        }
        return null;
    }
     
    function init() {
        if(readCookie()) document.body.className = readCookie();
    }
     
    function setFontSize(size) {
        document.body.className = size;
        createCookie(size);
    }
    </script>
    

    Then modify your HTML:

    <body onLoad="init()">
    ...
    <a href="javascript:void(0)" onClick="setFontSize('Smaller')"><img src="Images2/small.png" ...
    ...
    <a href="javascript:void(0)" onClick="setFontSize('Bigger')"><img src="Images2/big.png" ...
    

    BTW you should clean up your HTML -  it's not a valid HTML5 document as it is.

     

    --

    Kenneth Kawamoto

    http://www.materiaprima.co.uk/

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 11, 2013 1:13 PM   in reply to jp zoro

    Many attributes that were OK in older doc types are obsolete in HTML5.  For best cross browser results, you should endeavor to use valid, error-free code wherever possible. 

     

    Use the on-line validation tools below and fix reported errors.

    ------------------------------------

    HTML - http://validator.w3.org/

    CSS - http://jigsaw.w3.org/css-validator/

     

    Good luck with your project,

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 12, 2013 5:49 AM   in reply to jp zoro

    I'm away right now so can't give you a detailed advice from my phone, but I can assure you my script works. I tested it myself :)

     

    --

    Kenneth Kawamoto

    http://www.materiaprima.co.uk/

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 12, 2013 5:54 AM   in reply to jp zoro

    Line 64 and line 67 plus line 76 is all I would worry about.

     

     

    Line 67 is saying  replace the & marked in red with &amp;

    (I never do that when passing variables via a url parameter)

     

     

    …zingcounters.com/counter.php?i=2944158&c=8832787" alt="Amazing Counters"></a><…

     

    Line 64 and 67 are indicating that you may have more closing </div> tags that opening opening ones - <div> OR that it doesnt know and it marks them up as 'stray' because it can't find the balancing ones.

     

    The other errors are saying that what you have used such as 'cellpadding' and 'align' are deprecated elements or should not be used with the <doctype> you are using so the WC3 won't validate the page if they are present. It won't make any difference to the display of the page.

     

    I have no idea why 31 id saying the below, its just plain stupid. I guess unless you have this border="" it won't validate. I don't know try it and see if that error disappears.

     

    Line 31, Column 63: The value of the border attribute on the table element must be either 1 or the empty string. To regulate the thickness of table borders, Use CSS instead.<table width="100%" border="0" cellpadding="0" cellspacing="0">

     

     

    About 99% of those errors you can safely ignore

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 12, 2013 7:34 AM   in reply to jp zoro

    I'm down to 22 erros and 12 warnings, which I'm happy to live with
    Sorry, this teacher does not take that for an answer.

     

    Have a look at http://pleysier.com.au/johnpaul and http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fpleysier.com. au%2Fjohnpaul%2F%23

     

    That is how it is to be

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 12, 2013 8:07 AM   in reply to jp zoro

    jp zoro wrote:

     

    Dear Osgood, Kenneth, Nancy and Ben,

     

    Many thanks for your help. I've made the changes you suggested Osgood and I'm down to 22 erros and 12 warnings, which I'm happy to live with if you don't think they will cause problems to users. Changing line 31, column 63 to border="" caused the invisible line around the box at the top of the page to become black (so I left it as "0").

     

     

    The errors won't make the slightest difference whatever doctype or browser you view the page in. I'm not sure why some waste time on 100% validation it serves no useful purpose other than to award yourself a pat on the back and a gold star and a large invoice for the client, who only cares that the page displays correctly in the browser. Even being 100% valid WILL NOT guarantee that. Also being 100% valid does not mean you have written good code. I could used a serious of unecessary nested <div> tags and my page would still validate causing me to think, hey aren't I a good code writer, well no I'm not.

     

    Now let me say IF you are that way inclined I respect your views of course. I'm really just saying it won't have any adverse effect if you leave the errors in the page, as opposed to others who are biased towards complete validation, who won't tell you the truth for reasons which only they know.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 12, 2013 8:18 AM   in reply to jp zoro

    If you have another look at http://pleysier.com.au/johnpaul you will see the JS etc included

     

    @osgood_,

     

    You are quite correct in what you are saying. However, by correcting the errors reported by the validation program, I learnt a lot. After a while it became second nature to write my markup accordingly.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 12, 2013 8:25 AM   in reply to Ben Pleysier

    Ben Pleysier wrote:

     

    @osgood_,

     

    You are quite correct in what you are saying. However, by correcting the errors reported by the validation program, I learnt a lot. After a while it became second nature to write my markup accordingly.

     

    Hi Ben,

     

    I don't disagree there and I will always say 'Code needs to be wriiten to a proficient standard as to not make any difference if it validates or not.'

     

    If using the validator helps you to that standard then it can only be a good thing BUT don't become too obsessed would be my advice.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 12, 2013 9:04 AM   in reply to jp zoro

    jp zoro wrote:

     

    I had a website review for inclusion from AbilityNet and the changes you've helped me make mean that people with disability should be able to use the site more easily.

     

     

    That's an exception I would make to ensure the pages are as well formed as is possibile IF the target audience was as 'tunneled' as that.

     

    Good luck with the project, I'm sure only positive results and reactions can emerge from it.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 12, 2013 2:25 PM   in reply to osgood_

    The errors won't make the slightest difference whatever doctype or browser you view the page in. I'm not sure why some waste time on 100% validation it serves no useful purpose other than to award yourself a pat on the back and a gold star and a large invoice for the client, who only cares that the page displays correctly in the browser. Even being 100% valid WILL NOT guarantee that. Also being 100% valid does not mean you have written good code. I could used a serious of unecessary nested <div> tags and my page would still validate causing me to think, hey aren't I a good code writer, well no I'm not.

    Oh I so disagree with you here.

     

    I  agree with you on <div> usage. People use "HTML5" with semantically incorrect markups (undermining why HTML5 is there in the first place). That's OK, because browsers wont give a ****, right?

     

    --

    Kenneth Kawamoto

    http://www.materiaprima.co.uk/

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 12, 2013 2:30 PM   in reply to kennethkawamoto2

    I just want to add that browsers, especially the web standards ones, are getting more prickly & less forgiving of code errors with each upgrade. Some of the stuff we could get away with in older browsers just won't fly in newer ones. 

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 13, 2013 6:14 AM   in reply to jp zoro

    Have a look at these style rules

    .header a.logo {

    width: 20%;
    float: left;
    }
    .header h1 {
    width: 50%;
    float: left;
    text-align: center;
    }
    .header .settingIcons {
    width: 30%;
    float: right;
    text-align: right;
    }

    The logo-block is 20% wide; the h1-block is 50% wide and the text is centred; the icons-box is 30% wide with the text right-aligned.

     

    This means that the centered text in the overall context is 5% of the width off-centre. Try changing both 20% and 30% to 25%

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 13, 2013 11:40 AM   in reply to kennethkawamoto2

    kennethkawamoto2 wrote:

     

    The errors won't make the slightest difference whatever doctype or browser you view the page in. I'm not sure why some waste time on 100% validation it serves no useful purpose other than to award yourself a pat on the back and a gold star and a large invoice for the client, who only cares that the page displays correctly in the browser. Even being 100% valid WILL NOT guarantee that. Also being 100% valid does not mean you have written good code. I could used a serious of unecessary nested <div> tags and my page would still validate causing me to think, hey aren't I a good code writer, well no I'm not.

    Oh I so disagree with you here.

     

     

    Not sure what you are disagreeing on Ken every thing I said above is correct.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 13, 2013 11:49 AM   in reply to Nancy O.

    Nancy O. wrote:

     

    I just want to add that browsers, especially the web standards ones, are getting more prickly & less forgiving of code errors with each upgrade. Some of the stuff we could get away with in older browsers just won't fly in newer ones. 

     

     

    Nancy O.

     

    It's strange how I see so much, even what I would consider very poor code, perform remarkably well in all modern browsers. Even I think good grief how the hell does that work, it should not. YET I will agree a wonderfully executed construction with a one minor error and the page coughs and chokes like its dying. I saw one a few weeks back. One error on a page a closing anchor tag like <\a> instead of this </a> and it cause display issues. I don't know exactly what that says about browsers when a bunch of unclosed tags hold up without any issues and yet one insignificant error causes so much problems.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 13, 2013 12:52 PM   in reply to osgood_

    I agree. Overall I think browsers do a terrific job of making sense out of really bad code.  But sometimes Safari & Chrome baffle the heck out of me.  Even though they both use the Webkit engine, a minor code error can destroy a layout in one browser but not the other.       Go figure.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 13, 2013 2:26 PM   in reply to osgood_

    Just because browsers render your malformed tag-soupe with no problem, you are saying your effort of making your code valid is a waste of time. I disagree with your view on this. Is this clearer...?

     

    --

    Kenneth Kawamoto

    http://www.materiaprima.co.uk/

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 14, 2013 1:41 AM   in reply to kennethkawamoto2

    kennethkawamoto2 wrote:

     

    Just because browsers render your malformed tag-soupe with no problem, you are saying your effort of making your code valid is a waste of time. I disagree with your view on this. Is this clearer...?

     

    --

    Kenneth Kawamoto

    http://www.materiaprima.co.uk/

     

    It's clear now Ken, thanks for the clarification but the two are not linked. What I'm saying is valid code is no measure of good code and don't be fooled that it is. I'm not against those that want 100% validation, myself I can't see any point in it so long as you know the code you write is of a standard that IS acceptable. Now that's a grey area because what is acceptable code. Is it code that validates yet is formed of tag-soupe or is it code that does not validate because of one minor error such as a missing alt tag or and unclosed tag but in all other respects is well constructed.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 14, 2013 5:37 AM   in reply to osgood_

    Who determines the validity of markup. Is it W3C, is it the programmer, is it the browser, is it the validation programs or is it some other mysterious force?

     

    I know that W3C has done, and is still doing a lot of work in the field of conformity and I greatly appreciate this work. It goes a long way to deter Babylonian situations from creeping in.

     

    Take XHTML, where is the extensibility that we have been promised, why can't we use tags of our own choosing just like XML?

     

    Why can I use different ways to close empty elements (e.g. <br>, <br />), regardless of the document type, yet get reprimanded for doing so simply by using a certain document type?

     

    Here is another problem

     

    As HTML5 is no longer formally based upon SGML, the DOCTYPE no longer serves this purpose (W3C Draft)

    Try a document without the document type declaration (DTD). No DTD triggers all browsers to use the Quirks mode.

     

    I could continue like this and write a complete volume.

     

    It is important is to reach a conclusion and to answer the opening question; it is the browser that determines the validity of, not only our markup, but also CSS, DOM and JS.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 14, 2013 10:13 AM   in reply to osgood_

    A good (acceptable) HTML code means it's well-formed AND semantically sound. I do not use the W3C validator much, but I've never found making code conforming to the standard that hard at all - it's not a big deal. Making code semantically correct means your code will become simple and logical too, naturally bringing the code towards valid state anyway.

     

    All browser benders are member of W3C (Adobe too) and their browsers are now expected to follow the standard. I think it's a good initiative and I won't say it's pointless to work with W3C standard.

     

    --

    Kenneth Kawamoto

    http://www.materiaprima.co.uk/

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 14, 2013 11:06 AM   in reply to kennethkawamoto2

    All good points guys. I would much prefer that we were 'forced' to write standard compliant code as that would make our jobs more 'qualified' but until such time as browsers break an unvalid page to the point were we need to validate I fear nothing will change. Obvioulsy browser producers don't see validation of key importance and I think that's were the issues lies. You can set rules but if a vehicle doesn't adhere to them its open to 'corruption'. It's a bit like saying don't steal the money from the charity jar otherwise your fingers will be chopped off. When they aren't chopped off people keep stealing. The first browser to break unvalid code intentionally will be the death of it.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 14, 2013 11:28 PM   in reply to osgood_

    Take XML, for example. If you open a malformed XML in your browser it will say it's not a valid XML and tell you where it's failing. You have no choice but write a proper XML, otherwise it won't work. Full stop.

     

    Browsers have this "validation" capability built in for some time now but deliberately it's not applied for HTML visual rendering and it will never be.  As mentioned HTML is not a SGML any more and browsers will legitimately continue to be flexible and accommodating. This shouldn't be an excuse for a sloppy code.

     

    --

    Kenneth Kawamoto

    http://www.materiaprima.co.uk

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 14, 2013 11:42 PM   in reply to kennethkawamoto2

    kennethkawamoto2 wrote:

     

    Take XML, for example. If you open a malformed XML in your browser it will say it's not a valid XML and tell you where it's failing. You have no choice but write a proper XML, otherwise it won't work. Full stop.

     

     

    You could apply that to any language though, apart for html. If you miss off a ; from php the browser chokes, similarly ill formed javascript does not work.

     

     

    kennethkawamoto2 wrote:

     

    Browsers have this "validation" capability built in for some time now but deliberately it's not applied for HTML visual rendering and it will never be.

     

    I know. If it was the browser is dead in the water unless they all roll out together which they never will do.

     

     

    kennethkawamoto2 wrote:

    This shouldn't be an excuse for a sloppy code.

     

     

    Again we are back to the same old question....what is sloppy code.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 15, 2013 3:01 AM   in reply to osgood_

    Again we are back to the same old question....what is sloppy code.

    Browsers think there are no such thing as bad code. You omit <body> tag or even <html> tag, it still works

     

    --

    Kenneth Kawamoto

    http://www.materiaprima.co.uk/

     
    |
    Mark as:
1 2 Previous Next

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points