...

View Full Version : Caption in the wrong place. Still struggling with CSS.



effpeetee
06-03-2007, 09:40 AM
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


<!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>

Arbitrator
06-03-2007, 10:32 AM
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.

effpeetee
06-03-2007, 11:19 AM
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

Arbitrator
06-03-2007, 11:34 AM
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.

effpeetee
06-03-2007, 01:03 PM
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


<!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>

Arbitrator
06-03-2007, 01:20 PM
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.

effpeetee
06-03-2007, 02:07 PM
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


<!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>

whizard
06-03-2007, 02:22 PM
The caption seems to be OK for me in FF2

Dan

Arbitrator
06-03-2007, 02:25 PM
Sorry, I was referring to this post (http://www.codingforums.com/showpost.php?p=572347&postcount=7) 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.

This code works better, but I cannot find where to alter the position of the caption. Will you point me in the right directionOkay, 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.


<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:


<div>
<img alt="description" width="width" height="height" src="URI">
<p>This is a caption.</p>
</div>


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:


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.

effpeetee
06-03-2007, 05:54 PM
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


<!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>

Arbitrator
06-03-2007, 06:01 PM
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:

html { background: black; }

effpeetee
06-03-2007, 06:07 PM
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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum