Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts

    link CSS #footer {} to text. - RESOLVED

    #footer {}

    The above CSS was about #footer {} and was meant to apply to:

    <p>The picture is randomly selected and will change every 45 seconds.Pressing the F5 key will also change it. Clicking the screen picture will enlarge it and keep it on screen until you choose to move on</p>

    How do I make the CSS #footer control this text. I have many books but I cannot work it out.
    This index page was written for me by one of the coders and I do not fully understand all of it.

    It is not vital, but I do not like driving blind.

    Frank
    Last edited by effpeetee; 07-20-2007 at 08:05 AM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,606
    Thanks
    6
    Thanked 997 Times in 970 Posts
    I believe that was me who wrote that page some time in the past…
    The text is in this part of the HTML:
    Code:
    <div id="main" style="Z-INDEX: 100; LEFT: 232px; POSITION: absolute; TOP: 103px">
    <p id="imgcaption">(If you see this text instead of an image you probably have JavaScript disabled.)</p>
    <p>The picture is randomly selected and will change every 45 seconds.Pressing the F5 key will also change it. Clicking the screen picture will enlarge it and keep it on screen until you choose to move on</p>
    </div>
    So applying the ID “footer” to this wouldn’t make any sense since it’s not the footer of the page. You have to think vice versa. Don’t try to adjust the HTML to the CSS, apply CSS to the HTML! That means rename that #footer rule to address the paragraph.

    In the current case I would write it like this:
    Code:
    #main p {…}
    #main #imgcaption {… /* overwrite/revert the rules that were applied to all paragraphs in the former rule */}
    As the first rule would apply all styles to the image caption paragraph as well you would apply styles that revert this in the second rule. This way you don’t need to add an ID to that paragraph.

    Hope that makes sense?

  • #3
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by VIPStephan View Post
    I believe that was me who wrote that page some time in the past…
    The text is in this part of the HTML:
    Code:
    <div id="main" style="Z-INDEX: 100; LEFT: 232px; POSITION: absolute; TOP: 103px">
    <p id="imgcaption">(If you see this text instead of an image you probably have JavaScript disabled.)</p>
    <p>The picture is randomly selected and will change every 45 seconds.Pressing the F5 key will also change it. Clicking the screen picture will enlarge it and keep it on screen until you choose to move on</p>
    </div>
    So applying the ID “footer” to this wouldn’t make any sense since it’s not the footer of the page. You have to think vice versa. Don’t try to adjust the HTML to the CSS, apply CSS to the HTML! That means rename that #footer rule to address the paragraph.

    In the current case I would write it like this:
    Code:
    #main p {…}
    #main #imgcaption {… /* overwrite/revert the rules that were applied to all paragraphs in the former rule */}
    As the first rule would apply all styles to the image caption paragraph as well you would apply styles that revert this in the second rule. This way you don’t need to add an ID to that paragraph.

    Hope that makes sense?
    VIPStephan,
    Yes, I am sure that it was your work. I don't quite understand what you have said.
    This is the relevant piece of code, I believe.

    Would you explain how I link the text to this CSS.
    Or am I completely adrift?

    Frank
    Code:
    ##main {
    	float: right;
    	width: 750px;
    }
    #main p {
    	clear: both;
    	width: auto; /* reverting the width set in #content p */
    
    }
    #main a img {border: 2px solid white;}
    
    #main a:hover img {border-color: orange;}
    
    #imgcaption {
    	text-align: center;
    	color: #0FF;
    }.previewlink {}
    .previewimage {
    	width: 700px;
    	float: left;
    }
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    It sounds like you are wanting to control what text goes in that paragraph with CSS. If this is the case then no CSS cannot do this.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    No, I have done what I wanted - see the highlighted text below.
    It may not be much, but at least I can see how to influence the text with CSS.

    Thank you for your help. My site is still a bit of a mess, but I am using it currently to try out various ways of presenting picture menus.

    Frank
    http://www,exitfegs.co.uk

    Code:
    <div id="main" style="Z-INDEX: 100; LEFT: 232px; POSITION: absolute; TOP: 103px">
    <p id="imgcaption">(If you see this text instead of an image you probably have JavaScript disabled.)</p>
    <p id="imgcaption">The picture is randomly selected and will change every 45 seconds.Pressing the F5 key will also change it. Clicking the screen picture will enlarge it and keep it on screen until you choose to move on</p>
    </div>

  • #6
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,606
    Thanks
    6
    Thanked 997 Times in 970 Posts
    That’s not the correct way, though. An ID may only be used once per document.
    If you really want to apply this CSS:
    Code:
    #imgcaption {
    	text-align: center;
    	color: #0FF;
    }
    to this paragraph:
    Code:
    <p>The picture is randomly selected and will change every 45 seconds.Pressing the F5 key will also change it. Clicking the screen picture will enlarge it and keep it on screen until you choose to move on</p>
    Then apply it to that paragraph:
    Code:
    #main p {…}
    (change the text “#imgcaption” to “#main p”)
    This will apply the style(s) to all paragraphs within the div called main. Since the image caption is replaced by the image anyway the applied style won’t be visible for users with JS enabled (I seem to recall suggesting you that you replace that text in the brackets with a link to a gallery that works without JS for accessibility reasons).

  • #7
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    I have done what you suggest. Thank you.
    I am sorry to be so dense, but basically I have not done enough with CSS to feel at home with it..

    Also I don't understand this.

    (I seem to recall suggesting you that you replace that text in the brackets with a link to a gallery that works without JS for accessibility reasons).

    Is it something else that I need to do?

    Frank

  • #8
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,606
    Thanks
    6
    Thanked 997 Times in 970 Posts
    Currently, if a user has JavaScript disabled she will only see that message in the brackets:
    Code:
    <p id="imgcaption">(If you see this text instead of an image you probably have JavaScript disabled.)</p>
    This text is replaced with the image through JavaScript, as this is the most valid and backward compatible way. Now, there are cases where users either have JS disabled or the browser can’t execute such scripts, and instead of just giving him that message you should give him a link that he can still see the image(s) without requiring JavaScript.

    This is called accessibility. The concept is to provide alternative content to people that for some reason can’t use a certain technology. These users should still be able to get the entire message of the site. That’s why I suggested you put a link to a gallery with these images instead of just the “error message” so users without JS can browse the images too.

  • #9
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    I do have a gallery on the index page called picchoose which makes any picture available to the user. But how can I pass the viewer over to this automatically on default?

    My knowledge does not cover this area of coding.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #10
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,849
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Just give an anchor tag with proper color and size like at a suitable place on your current home page

    <a class="picchoose" href="yourfile.htm">Wanna see all pics?</a>

    and use some CSS

    If you really want to make it automatic use
    Code:
    <meta http-equiv="refresh" content="0;url=Picchoosea.html">
    inside your <head></head> of current page
    Last edited by abduraooft; 07-19-2007 at 03:18 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #11
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,606
    Thanks
    6
    Thanked 997 Times in 970 Posts
    Quote Originally Posted by abduraooft View Post
    If you really make it automatic use
    Code:
    <meta http-equiv="refresh" content="0;url=Picchoosea.html">
    inside your <head></head> of current page
    In case you haven’t noticed: he already has a meta refresh. However, this is a method that shouldn’t be used in the first place.

    Frank, you should also use JavaScript to switch those images because if someone doesn’t have JS enabled it will still reload due to the meta refresh which can be annoying. If JS is disabled it won’t refresh (as it also won’t show any image), and there will be a link to the gallery:

    Code:
    <p id="imgcaption">Check out the family <a href="picchoose.html">photo gallery.</a></p>

  • #12
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Stephan.

    I do not have a meta refresh line on my index page. I removed it a while back.
    The refresh is now in the include,js script.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #13
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,606
    Thanks
    6
    Thanked 997 Times in 970 Posts
    Oh, sorry. Didn’t pay attention. OK then forget everything I said except the point about replacing the text with a link to a gallery.

    Edit: Of course you can’t just copy and paste what I gave you. I mean you can but that was only an example and the URL is giving me an error 404 since there is no page called “picchoose.html”. You need to replace that with the correct one, of course.
    Last edited by VIPStephan; 07-19-2007 at 03:51 PM.

  • #14
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts

    Resolved.

    Yes I have already done that. Many thanks for all your expert help over quite a long period. It is very much appreciated.

    Frank.

    This is my latest page.

    http://www.exitfegs.co.uk/steve.html

    I'm just experimenting as always.
    Last edited by effpeetee; 07-20-2007 at 08:04 AM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •