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 12 of 12
  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

    Exclamation Caption in the wrong place. Still struggling with CSS.

    I cannot get the caption on to the picture. What am I doing wrong?

    it should be bottom center - about 3 cms from bottom.

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

    effpeetee

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html> 
    <head>  <link rel="stylesheet" type="text/css" href="atwo.css" />  
    <title>Mapperton</title> 
    <style type="text/css">
    
    #main.figure {
    float:right;
    width:200px;
    margin-bottom:2px;
    margin-left:10px;
    position:relative;
    }
    
    #main .figure p {
    position:absolute;
    width:168px;
    left: 10px;
    bottom: 10px;
    background-color:#fff;
    border: 1px dashed #666666;
    font-size:1.1em;
    font-weight:bold;
    text-align:center;
    padding: 5px;
    margin: 0;
    }
    
    #main .figure img {
    display: block;
    }
    
    </style>
    </head>   
    <body>   
    <div class="figure">
    <a href="index.html"><img  height="600" src="11.jpg"  alt="Click to move on"  width="800"><p>In the grounds of Mapperton, a stately home in Dorset.</p></a></div>
      
    </body>   
    </html>
    Last edited by effpeetee; 06-03-2007 at 08:42 AM. Reason: Added info.

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    Thereís no element with an ID of main in there, so all three of your style rules arenít being applied. Paragraph elements are also not allowed inside of anchor elements.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #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 Arbitrator View Post
    Thereís no element with an ID of main in there, so all three of your style rules arenít being applied. Paragraph elements are also not allowed inside of anchor elements.
    I have tried using a '#Main' entry but nothing that I do seems to work.

    I will probably go back to my usual routine:-

    <div style="Z-INDEX: 101; LEFT: 258px; WIDTH: 549px; POSITION: absolute; TOP: 584px; HEIGHT: 50px">
    <center><span class="t14aw"><p style="COLOR: #ffffff; BACKGROUND-COLOR: #00364a">In the grounds of Mapperton, a stately home in Dorset.</span></center>
    </div>

    Many thanks.

    effpeetee

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    Quote Originally Posted by effpeetee View Post
    I have tried using a '#Main' entry but nothing that I do seems to work.
    Did you also try removing it from your style sheet selectors? You also know that IDs are case‐sensitive, right? main and Main are not the same thing, although some browsers may act as if itís otherwise.

    Even if you added it to the HTML, it probably wouldnít work.

    • The first selector selects an element that has an ID of main AND that is assigned to the class figure. This is because the thereís no space or other combinator between them; I suspect that this is a typo in your code.
    • The second selector selects a paragraph element descended from (inside of) a .figure element thatís further descended from #main.
    • And, of course, the last does the same thing except for an image element instead of a paragraph.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #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
    Quote Originally Posted by Arbitrator View Post
    Did you also try removing it from your style sheet selectors? You also know that IDs are case‐sensitive, right? main and Main are not the same thing, although some browsers may act as if itís otherwise.

    Even if you added it to the HTML, it probably wouldnít work.

    • The first selector selects an element that has an ID of main AND that is assigned to the class figure. This is because the thereís no space or other combinator between them; I suspect that this is a typo in your code.
    • The second selector selects a paragraph element descended from (inside of) a .figure element thatís further descended from #main.
    • And, of course, the last does the same thing except for an image element instead of a paragraph.
    This is the latest code. Note tha it does not use a seperate style sheet, that is for later. (hopefully)

    I still cannot get it to work properly.

    effpeetee

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html> 
    <head>   
    <title>Mapperton</title> 
    <style type="text/css">
    
    #main {
    	width: 1000px;
    	margin: auto;
    }
    
    
    #main.figure {
    float:right;
    width:200px;
    margin-bottom:2px;
    margin-left:10px;
    position:relative;
    }
    
    #main .figure p {
    position:absolute;
    width:168px;
    left: 10px;
    bottom: 10px;
    background-color:#fff;
    border: 1px dashed #666666;
    font-size:1.1em;
    font-weight:bold;
    text-align:center;
    padding: 5px;
    margin: 0;
    }
    
    
    </style>
    </head>
     
    <body> 
       
    <div class="figure">
    <a href="index.html"><img  height="600" src="11.jpg"  alt="Click to move on"  width="800"></a><p>In the grounds of Mapperton, a stately home in Dorset.</p></div>
      
    </body>   
    </html>

  • #6
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    Quote Originally Posted by effpeetee View Post
    This is the latest code. Note tha it does not use a seperate style sheet, that is for later. (hopefully)

    I still cannot get it to work properly.
    Where, in your document, is there an element with an id attribute of main (<elementName id="main"></elementName>)? A CSS ID selector cannot select anything when thereís nothing to select.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #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
    Hello again Arbitrator,

    This code works better, but I cannot find where to alter the position of the caption. Will you point me in the right direction please.

    effpeetee

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

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html> 
    <head>   
    <title>Mapperton</title> 
    <style type="text/css">
    
    #main {
    	width: 1000px;
    	margin: auto;
    
    }
    
    
    #main.figure {
    float:right;
    width:200px;
    margin-bottom:2px;
    margin-left:10px;
    position:relative;
    }
    
    #main .figure p {
    position:absolute;
    width:380px;
    left: 190px;
    bottom: -8px;
    background-color:#fff;
    border: 1px dashed #666666;
    font-size:.7em;
    font-weight:bold;
    text-align:center;
    padding: 5px;
    margin: 0;
    }
    
    
    </style>
    </head>
     
    <body class id="main"> 
       
    <div class="figure">
    <a href="index.html"><img  height="600" src="11.jpg"  alt="Click to move on"  width="800"></a><p>In the grounds of Mapperton, a stately home in Dorset.</p></div>
      
    </body>   
    </html>

  • #8
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    The caption seems to be OK for me in FF2

    Dan
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #9
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    Edit: Sorry, I was referring to this post in a similar thread of yours; this thread contains the mentioned live example. The problems are very similar. Not sure if this explanation still applies, but the technique is still useful and should be learned.

    Quote Originally Posted by effpeetee View Post
    This code works better, but I cannot find where to alter the position of the caption. Will you point me in the right direction
    Okay, Iíll try to explain this. This assumes that you want the caption placed over the image like in my example. You need to use a technique that I call ďrelatively absolute positioningĒ. Basically, you take an element, like a div and you apply the declaration position: relative to it.

    Code:
    <div>
    	<img alt="description" width="width" height="height" src="URI">
    	<p>This is a caption.</p>
    </div>
    Now, you apply position: absolute to the caption (the paragraph element) inside it. Now, normally, when you absolutely position something, it gets positioned relative to the viewport (the area of the browser where you can see your Web site). With this, it will now be positioned relative to the div element (the relatively positioned parent).

    Now, the key here is to make the image element and div element the same size so that it looks like youíre positioning the caption relative to the image. After youíve done that, you can simply use combinations of the top, left, right, and bottom properties to position the caption relative to the image. (Itís really relative to the div.)

    So, hereís an example that positions the caption in the lower right of the div:

    Code:
    <div>
    	<img alt="description" width="width" height="height" src="URI">
    	<p>This is a caption.</p>
    </div>
    Code:
    div { position: relative; width: width; height: height; }
    p { position: absolute; bottom: 0; right: 0; }
    If the div elementís dimensions donít match the dimensions of the image, then you will also need to make them match:

    Code:
    img { width: 100%; height: 100%; }
    You can now compare this with the live example that I provided in a previous post. It uses this technique.
    Last edited by Arbitrator; 06-03-2007 at 01:33 PM. Reason: I clarified a mistake.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #10
    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
    Hello again,

    This is what I have landed up with. It seems satisfactory except that I cannot get a background color that does not overlay the text.

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

    effpeetee

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html> 
    <head> 
      
    <title>Mapperton</title> 
    <style type="text/css">
    
    #main {
    	width: 1200px;
    	margin: auto;
    }
    #main.figure {
        float:right;
        width:200px;
        margin-bottom:0px;
        margin-left:110px;
                position:absolute;
    }
    
    #main .figure p {
        position:absolute;
        left: 10px;
        top: 570px;
        width 180px;
        background-color:#eee;
        border: 1px dashed #666666;
        font-size:.7em;
        font-weight:bold;
        text-align:center;
        padding: 5px;
        margin: 0;
    }
    
    #main .figure img 
    {
    display: block;
    }
    
    </style>
    </head>
     
    <body class ="main"> 
       
    <div class="figure">
    <a href="index.html"><img  height="600" src="4.jpg"  alt="Click to move on"  width="800"></a><p>Higher Came farm.</p></div>
    
    </body>   
    </html>

  • #11
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    Quote Originally Posted by effpeetee View Post
    This is what I have landed up with. It seems satisfactory except that I cannot get a background color that does not overlay the text.
    A background color for what? The textís background color looks fine to me.

    If you want one for the viewport, use:
    Code:
    html { background: black; }
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #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
    Sorry Arbitrator.

    I had tried that but I forgot the brackets.

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

    It's OK now.


    It's the old "C-Nile" virus again.

    Very many thanks for your tuition.
    I really do appreciate the time that you have given me.

    Kind regards.

    effpeetee
    Last edited by effpeetee; 06-03-2007 at 05:21 PM.


  •  

    Posting Permissions

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