944,042 Members | Top Members by Rank

Ad:
Oct 23rd, 2005
0

Have a problem with centering "jpg" files via a "css" file

Expand Post »
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...
Similar Threads
Reputation Points: 10
Solved Threads: 0
Unverified User
bobr_1013 is offline Offline
27 posts
since Apr 2005
Oct 24th, 2005
0

Re: Have a problem with centering "jpg" files

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.
Team Colleague
Reputation Points: 227
Solved Threads: 37
Made Her Cry
tgreer is offline Offline
1,697 posts
since Dec 2004
Nov 10th, 2005
0

Re: Have a problem with centering "jpg" files via a "css" file

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!
Reputation Points: 10
Solved Threads: 0
Newbie Poster
Slim is offline Offline
3 posts
since Nov 2005
Nov 10th, 2005
0

Re: Have a problem with centering "jpg" files

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.
Team Colleague
Reputation Points: 227
Solved Threads: 37
Made Her Cry
tgreer is offline Offline
1,697 posts
since Dec 2004
Nov 10th, 2005
0

Re: Have a problem with centering "jpg" files via a "css" file

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
Reputation Points: 10
Solved Threads: 0
Unverified User
bobr_1013 is offline Offline
27 posts
since Apr 2005

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in HTML and CSS Forum Timeline: Music
Next Thread in HTML and CSS Forum Timeline: onLoad commands





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC