Have a problem with centering "jpg" files

[bobr_1013]

Hi,

This problem is with another one of my assignments.

As part of this assignment, I'm to add the following into a "css" file:

"Display the Flags box only when the left margin is clear, and center any text or images within the box."

The "css" file is used in 18 individual Web pages (simulating Golf Course ). The first flag represents the first hole. the other holes up to the 17th hole has two flags (one to click to return to the previous screen and one to go to the next hole). The 18th hole has a single "previous" flag.

The code in each module is as follows:

I'm entering the following code into the "css" file (used in each of the following "htm" files):

from willet.css:

div.flags {image:url(next.jpg) no-repeat fixed center}

I'm aware I need to have code for both flags. After I figure out the first one, I will add in the second.

from h01.htm

<div class="flags">
<a href="h02.htm">
<img src="next.jpg" alt="Go to next hole" border="0" hspace="10">
</a>
</div>

</body>

from h02.htm - h03.htm:

<div class="flags">
<a href="h01.htm">
<img src="previous.jpg" alt="Go to previous hole" border="0" hspace="10">
</a>
<a href="h03.htm">
<img src="next.jpg" alt="Go to next hole" border="0" hspace="10">
</a>
</div>
</body>

from h18.htm:

<div class="flags">
<a href="h17.htm">
<img src="previous.jpg" alt="Go to previous hole" border="0" hspace="10">
</a>
</div>

</body>

I hope this makes sense without any pictures...

[tgreer]

I generally don't help with homework assignments... that might even be a site-wide policy (it is on most tech-help sites).

I would encourage you to research the CSS "margin" attribute.

[Slim]

Well ill give you a hint:
To center any image, regardless of format in CSS, you need to do this sentence:

<center>[image code]</center>

only without brackets. So this is what you would want to do(example from your code)

from h01.htm

<div class="flags">
<a href="h02.htm">
<center><img src="next.jpg" alt="Go to next hole" border="0" hspace="10"></center>
</a>
</div>

Hope it helps!

[tgreer]

The "center" element is deprecated. The orignal poster specifically mentioned the assignment was to implement centering via CSS. Centering, in CSS, is implemented by properly setting the margin property in your block-level elements, and the text-align property in inline elements.

[bobr_1013]

Slim,

Thanks for your help. FYI - I Aced the Web Design with a 96% on the final and a 100% for my project (98% overall). I have the e-mail from my teacher to prove it. It was a great class and I learned a lot.

I figured out a way to fix the problem I had with the Case study. I added in the following code in the "CSS" file.

div.flags {margin-top: 250px; text-align: center}

In the actual html pages the following code exists:

First hole with one flag showing:
<div class="flags">
<a href="h02.htm">
<img src="next.jpg" alt="Go to next hole" border="0" hspace="10">
</a>
</div>

2nd - 17 hole (2 flags - this is hole 2):

<div class="flags">
<a href="h01.htm">
<img src="previous.jpg" alt="Go to previous hole" border="0" hspace="10">
</a>
<a href="h03.htm">
<img src="next.jpg" alt="Go to next hole" border="0" hspace="10">
</a>
</div>

18th hole (1 flag):

<div class="flags">
<a href="h17.htm">
<img src="previous.jpg" alt="Go to previous hole" border="0" hspace="10">
</a>
</div>

When I set this up, the sets of flags are centered on the bottom of each page.

Now I'm studying and will eventually purchase Dreamweaver and am currently planning to begin doing some part-time work at home.

Again thanks for your help:)

Bob