#apDiv text box position problem

Hello

I am a teacher and amateur graphic designer, make a website for children who have learning difficulties. The page I'm trying is available here:

http://www.John-Paul.TalkTalk.NET/index6.html#

As you can see there are 'bigger text' and 'small' buttons at the top right of the page using CSS (this is my first shot at CSS). The page works as I want, but I can't place the text as I want it on the screen.

What I am after is the text boxes under the images where the text gets bigger and smaller when the 'more large text' button is clicked, but at present the text in small characters is not positioned below each image, and large text moves down rather than being exactly where was the small text. I don't know how to move the text up (i.e. to change the space around the word 'University' for the word is plu top), or how to get the big text to focus on the very place where was the small text. I hope that makes sense.

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

Thanks for reading this. Any advice would be great.

Best wishes

John-Paul

Would you be able to advise me on a cookie in this page so that the preferences of a user about the size of the text are stored?

Of course, it's not hard

Place this Javascript in your:


Then change your HTML code:


...

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

--

Kenneth Kawamoto

http://www.materiaprima.co.UK/

Tags: Dreamweaver

Similar Questions

  • Text - box height problem tool text & confusion

    Hello

    I struggled to solve a problem of text box in my layout of phone.  I have a box of text at the bottom of the page.  The lower edge of the text box touches the top of the footer area.  If I drag the center of the bottom of the text just below box handle of the text, so that no blue dashed line appears in the text box, it looks good in Muse, but when I download and watch the page on my iPhone, there is an empty space under the text (in addition to the footer area).  If, however, I drag the bottom of the text box so that the dashed blue line is a few lines above the bottom of the text, then the text appears correctly on the iPhone.

    I'm not clear on what this broken blue horizontal line in means of text area, other than the height of the text and the box do not match.  It seems not important since the text is displayed even if the box is theoretically too short.  Perhaps someone can explain what that broke horizontal line way and if it's a problem if it appears in the text box.

    Now, for the confusion, I just today created some paragraph Styles so that I can be sure that my pages are compatible.  It seems that the text box can be sized before applying a paragraph Style, dashed blue line disappeared - no extra space below the text on the iPhone.  Once I applied the paragraph Style, that extra space will appear unless I reduce the text box.  I checked and the paragraph Style has no padding, leading etc., normal.  The footer area is not checked.

    I did a few tests, and the problem is not related to the text box on the top of the footer area.  I inserted another test text box under the "problem" box, and the problem persists - extra space unless I have shorten the height of the text box.  I think it has to do with my paragraph Style, but I don't see what is the cause.  I must emphasize that the other text boxes have the same applied paragraph Style and they don't have any extra space under the text.

    Thanks for any help.

    John

    I don't think that your "get extra space." Rather, I suspect the text block is high and narrow, and the text it contains is much shorter in the browser that it appears in Design view in Muse because of differences in the line breaks in the text. It is quite common when using "web safe" fonts and is also true when you view websites in different browsers, browser versions, devices or versions of operating system because of the differences in text layout engines used and available fonts on the device. It is especially common in text frames narrow tall.

    The most effective way to reduce the effect is to use a Web font rather than a 'web safe' police, which will reduce the variation of the layout of the text between the browsers, but ultimately you need to design, with the variations of line in mind, because they are not entirely avoidable. In your case this means that the block of text sizing for minimum height (as indicated by the dotted line) is shorter than the text as it appears in Design view, so when line breaks changes the block of text is reduced in height, rather than leave a space blank at the bottom.

  • Text box display problem

    I'm using CF7 developer on a single computer to create pages. I just bought the Standard edition and installed on the server, I'll use. In general, Cold Fusion seems to work, including database connections. However, when I move to a page with a form, the text boxes are missing. The form is built into a table, and the table as well as the other text is missing. Looking at the source of the page in the browser, it's like CF just jumped the table completely. The same exact page works on the development computer, but not on the server computer. Any ideas? Thank you.

    Never mind. :) The page in question involves a query that uses a cookie. I got access to the new installation of the computer of the developer, who already had an established cookie. When I transferred the table with the cookie ID of the new facility, I emptied. It has become a problem where a machine had a cookie that does not match anything in the database on the Server table.

    I have a way to catch this problem on other pages and remove the bad cookie, but the request to this page slipped by me. Thanks for the help.

  • Text box layout problem - and the number of rows displayed

    Hello

    Wonder if you can help with my 2 problems

    1. when I create text boxes, the label is displayed to the left of the text box. How can I display label above the text box
    CGH

    Label
    TextBox

    Instead of

    Text box label

    2. when I ask report showing my data, that it shows that 15 records per page, for the next set of records, I need to click on the following icon at the bottom of the table to go to the next page.
    How can I view all on the same page?

    Thanks for help

    1. simply check this using the Horizontal / Vertical alignment of attribute in the section of the label of the element of the Page definition.

    2. in the report of the attributes, the value of the plan of paging None; and the number of rows and number of maximum lines to more than the number of rows that will be returned by the report query.

    (You should only ignore this last you really know that the number of lines make this a reasonable option.) Nobody is going to want to scroll through thousands of lines or wait 5 minutes for total information overload. You wouldn't be popular with your admins/ISP network due to the excessive bandwidth consumed either.)

  • RH2015 problem with text box placed remaining in Place on the Image

    Using RH2015 I find a text box placed over an image and set a trigger of the text in the content to the top of the image page to display / hide the (effect) positioned text box when you click on. The issue I see is that the text box is not positioned compared to the image on which are superimposed. Is the placement of a text box positioned compared to the outbreak, in this case, rather than the image you like? I use a reagent HTML5 output would therefore have a solution that would elapse from the position of the image and the changes in scale, remaining anchored.

    Hello

    What is the ultimate goal? Click on the image and see the text?

    I ask because there may be a better way to achieve the goal.

    Personally, I have never had anything but bad using positioned text boxes.

    See you soon... Rick

  • Japanese fonts are cut by pix 2 or 3 on each text box, among other...

    I was really hoping that this issue would be resolved with Captivate 4, but no luck.  I'm working on a Japanese English PC inputing through an IME, and each unique text box has problems.  Or fonts are cut on the top by 2 or 3 pixels, otherwise they swell in somewhere between a normal font and a bold font.  Not a single text box will make what it looks like in Captivate before I saw it.  Everything looks wonderful in Captivate, but no matter how I saw or make, it's just awful.

    Any help is very appreciated!

    Benjamin

    Hello

    First of all, I assume you mean legends of text here?

    Assuming I'm reading correctly, I wonder if you tried to set the margins for the legend type you are using. For example, if you use the type of legend blue Adobe, when we look at where Captivate has been installed

    (for me on my own PC for Captivate 4, I look here):

    D:\Program Adobe Captivate 4\Gallery\Captions)

    You should see the files ending with .fcm.

    For the type of blue legend Adobe, find you five of them:

    If you change each and adjust the margin values. Then create a new project and use the legend type Blue Adobe. See if that makes a difference in the appearance of the font. I am not sure, it will be, but it can't hurt to try. Who knows, it may just solve the problem.

    See you soon... Rick

  • Positioning of a text box in a text box

    I need the position of some text boxes shaded in the columns of normal text that all streams on about 30 pages. This is so that whenever I make changes to text in columns, I need to not spend by manually and reposition the box color.

    The method im using at the moment is to simply copy / paste the text box in the columns of so that if I add or remove a line, the box moves with the rest of the text.

    However the question I have, is that the internal text box overlaps normal text unless I knocked back 10-15 depending on how the area is large.

    Is anyway to avoid this?

    Hope ive explained it's ok.

    CS5.5, Windows 7.

    OK, here's how skin works with anchored objects:

    For inline and top executives of the line (the kind you get when you cut and paste directly into the text flow), film applied to the pasted frame button text between the point where you paste from.

    For placed custom frames (the kind you get when you drag the square on the edge of the image in the text, or by changing the type on a line) that can be placed anywhere on the page, but always move with the text wrap applied to the anchored only frame affects text in the lines that follow the line containing the anchor point.

    Text on an anchoed object wrapping never affects text in lines before the anchor point. Can you show us a screenshot of the problem? I suspect that you use inlines and you need to change the way that you attack applied to the paragraph in order to push the frame anchored to the bottom.

  • a text box is every moment that I edited dynamically scroll bar upward. I know that's not a problem with the Web site because she works with other browsers

    There is a problem with scrolling of a text box bar. whenever it is changed dynamically developing area moves upward instead to keep the focus in the area of the new inserted text. even if I move it down to hand it back again.

    OK, I have fixed the code in my program. When I finished the editing, I use this code in javascript.
    document.getElementById("chatMainTxt").scrollTop = document.getElementById ("chatMainTxt") .scrollHeight;

  • Problems related to the film project title/text boxes.

    In the opening of my external hard drive iMovie projects, many title/text boxes throughout the film are whitewashed.  When I click it, the text appears, but when playing the movie, they come again white.  I had installed iMovie v.10, could not navigate, so returned to old iMovie 9.0.7 and reused, but found this problem with movies.

    iMovie 11 (version 9.x.x) is not compatible with El Capitan and results in errors that you see more than others. iMovie 10 also reported problems with the video in the event viewer and the chronology of white. Only iMovie 10.1.1 is fully compatible with El Capitan. I would upgrade to 10.1.1. Yes, it's a different interface, but not for difficult cases, you read up on it and watch a few tutorials.

  • Cursor (cursor) appears in the text box after inserting text or the position of change

    I managed to change the position of the cursor in a TextArea as qml and C++ to help through the Publisher associated with the drop-down list.

    I checked the change to receive cursor, change of position and position again.

    However, the cursor does not appear or is not visible in the TextArea component. When I tap on the screen the cursor is displayed again.

    The cursor disappears when I insert text at the cursor position.

    No idea why or how to control the visibility of the cursor in this situation.

    I know you probaably you want to see the source code is here

    textArea.editor.insertPlainText ("plain text");

    Hello

    The cursor/caret is not visible unless the text box is focused. Code like this work for you?

            TextArea {
                id: ta
            }
            Button {
                text: "Click Me";
                onClicked: {
                    ta.editor.insertPlainText("plainText");
                    ta.requestFocus();
                }
            }
    

    Thank you.

  • Problem with the new text box - large size

    Hello

    I have a problem with InDesing and just can't understand why it's happening.

    When creating the text box (frame), I am selecting the text tool and want to drag a new text box, InDesing creates a new frame with size 1221, 058 x 1221, 058 mm (always, no matter what...). When I'm typing in it, the text is invisible, in the same way that it is out of reach of the size of the image (at the bottom right I see the Red Cross). It happenes even after hitting only one character and I can't make it visible (adjust to the right).

    Someone has any suggestions how to solve this problem?

    I will be grateful.

    System: Win 8.1

    InDesign worm. : output 2015.4 CC / 11.4.1.102 x 64 build

    Best regards

    Andrzej

    huge_textbox_InDesign.jpg

    First try: 101 troubleshooting: replace, or 'trash' your InDesign preferences

  • Photoshop elements 14 text box problem

    I uploaded a picture and added a speech bubble.  I then added a text box on the dialog bubble.  When you try to add text, the program inserts the text in a small places used to increase or decrease the size of the text box, instead of the text in the text box.  It's never happened before.  I started from scratch and even restarted the computer with the same results.  Any help would be appreciated.

    I just noticed that this only occurs when you transfer pictures taken with a DSLR camera of digital Canon EOS Rebel T5.  There is no problem with the photos taken with a Kodak EasyShare digital camera.

  • Several problems with embedded DHTML menu text boxes, drop-down

    We have recently improved HR 10 HR 2015.  We know a menu dhtml drop-down text question existed prior to the upgrade and the upgrade did not fix it.  We now have a more serious problem.  We are not certain that all started with the upgrade, but we detected it after you convert our projects to HR 2015 and republish them.  I list both here in case they are connected.

    The problem known: styles of multilevel list to the level of the main topic and within the text box drop-down dhtml to first level.  However, if we add a drop-down list box text in a drop-down text box and apply a list style at several levels to the text in the drop-down text embedded dhtml, the topic seems in good shape on the Design tab, but loses the line numbers or bullets in the preview and in the published version.  No idea what would cause the list not to display properly or how to get the multilevel list styles to work in this situation?  (Yes, we know we can use styles list rather than multilevel list styles, but it is problematic, too)

    list1.png

    The novelty is that, when content is published and read in IE or Chrome (the two major browsers use customers), the drop-down text link embedded dhtml is always present, but the text in the drop-down list embedded dhtml has disappeared (for example, nothing happens when you click on the link to open the text box).  It works in preview, but not when accessed through a browser (or access to the content of webhelp after publication to a server directly from my local computer).  Any ideas on how to get it to display?  The net result for our users, is that a substantial PART of the content of the assistance amount is now more accessible.list2.png

    Thanks in advance for any help you can provide to these questions!

    Here are a few things that I would consider trying.

    First, click on Tools > update DHTML and let it do its thing.

    A test to see if something has changed. If so, great!

    If the problem persists, open one of the samples project. Click here to see a video on how to do

    Then open Windows Explorer. Click here to see a video on how to do

    Find and copy a file called ehlpdhtm.js and return to your project and paste this file into so that it replaces the one that is there.

    Then see if things are better.

    See you soon... Rick

  • Text boxes have gone white! Problem of formatting or glitch?

    We use InDesign on the same computer for years, and today (while establishing a print publication), text boxes went white. The text was not deleted, just inaccessible and invisible. The only way that the text could become visible was messing with the formatting - change column number, increasing the border spacing, etc. - and even then it would not completely work. Is it a formatting problem or a bug in the program? We have already done basic troubleshooting (restarting the computer, modify files, etc.). I would like to know why this happened, so we could avoid any incident in the future.

    Yes we usually postpone files from previous publications and who for years without any problem.

    Could it be a corrupted file?

  • Serious problem of closure with invisible text boxes cursed (CC)

    Total Hi,

    I have a serious problem with InDesign closing. I'm working on a nearly finished book who has texts and images. For this book, I also use InCopy. All the text boxes are assigned.

    When I worked on the book, I noticed three text boxes are missing. Because I didn't know when it happened and DIND'T want to get all the corrections I did by then, I decided to copy the text boxes missing from a backup I had. It worked, even the links with InCopy worked.

    InCopy has shown me that there are two links assigned to these boxes, so I just deleted one of the links to each of the three missions. Seemed so far until I updated the table of contents. I had two entries for these text boxes. I checked and on a spread seems to be dublicated areas of text that can only be seen when I "select all." They also appear on the layers panel. There I can select separately.

    The problem is that InDesign will stop when I try to move the spread or try to remove these text boxes. When I copy the spread, it gives me a perfect, even copy text. These areas of copied text can be edited and deleted. Remove the links concerned had no influence on the problem.

    Now, I deleted all content visible and any spread. My document now contains only the first single release and the second 'cursed', spread two-sided. There is no missions more. When I create a table of contents on the page first, alone, it shows me the three entries that should not be there. When I copy the spread he still 'perfect', as if there is nothing wrong with the spread. I have three areas of text with the text, I don't see in the spread of "cursed".

    Please help me! How can I get rid of these cursed text boxes? I use InDesign CC on a Windows 7 (64 bit) system.

    Thank you!

    Tami

    If the file is corrupted try to export it as IDML, to open and work with it.

    If that doesn't work, try opening IDML in an XML Editor (there are several similar BBedit which are able to read zip files) and try to find the damaged item and to fix it. Do it on a copy, because failure could destroy everything.

Maybe you are looking for

  • IOS 9.3.1 music launch

    I used Bluetooth for listening to music on my iPhone with iOS 9.3.1 in my car 6. Now, I'm not in my car and the music app screen shows just a picture and I can't get out. But if I press the button to launch a second I get the voice command, asking si

  • Where is the HP Smart Web Printing button in the toolbar of the browser. ??

    I uninstalled and reinstalled Hp Web Smart Printing and still no 'button' on my toolbar in IE8? The first time after installing the black side bar is there so when I click on the X to close it never reapears anywhere? How can I get in my toolbar, cli

  • Satellite L500-22R - memory problem

    I tried to upgrade my Toshiba L500-22R memory up to 8 GB. I bought 2 x 4 GB Kingston SODIMM 12800 PC3L, the operating system does not start, I did a check of memory and it fails too. I tried with a Samsung 4 GB 12800 and it fails too. The original me

  • 74147N does not only get no change in display

    Hello I built a simple circuit. I can't make it work.  I tested each section of the scheme and they operate except once the 74147 is connected. It seems as if the 74147 is not powered.  Can someone explain or help me make it work? Thank you. Ray

  • LabVIEW Comunicación excel

    Hola the cuento mi proyecto, estoy doing mi residencia profesional in a company that makes engranes conicos, el detail are the following: tenemos una Máquina en cual will want tell el tiempo los paros, number of pieces produced y la Razón el paro. me