The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Want To Stack A jpg on top of a form, Want to show a form on the same page as a jpg
HowdeeDoodee
post Feb 5 2021, 12:05 PM
Post #1


Novice
**

Group: Members
Posts: 25
Joined: 29-July 20
Member No.: 27,462



Want to show a form on the same page as a jpg however when I load up a single html page with the jpg and form on the same page the jpg disappears. What do I do to fix this?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 5 2021, 01:22 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6



The right question is what did you do to accomplish this?

Please link to the page (preferred) or post the markup and CSS here.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
HowdeeDoodee
post Feb 5 2021, 04:03 PM
Post #3


Novice
**

Group: Members
Posts: 25
Joined: 29-July 20
Member No.: 27,462



https://www.findthepower.net/FridayFormPage1.htm
The link showing how it does not work.

https://www.findthepower.net/Contact%20Form...aGOws5Uxn1J.jpg
Another link showing the jpg.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
HowdeeDoodee
post Feb 5 2021, 04:04 PM
Post #4


Novice
**

Group: Members
Posts: 25
Joined: 29-July 20
Member No.: 27,462



Thank you for the reply.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 5 2021, 04:11 PM
Post #5


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6



See that broken image icon where your image should be? That means the image file can't be found where you've said it is.

You have linked to it on your hard drive, not to where it is on the server. You just need to replace that with the real URL.

CODE
<img jsname="VBiiYc" class="freebirdFormeditorViewMediaImage" tabindex="0" aria-label="Captionless image" src="../../Documents/My%20Webs/uqYypn5VDcZV5adO5WP2RZr3__kNZzzDwXpE4t2ncrPwCmbNKaGOws5Uxn1J.jpg" style="width: 740px;">


BTW I think that was the longest and most incomprehensible file name I've ever seen! laugh.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
HowdeeDoodee
post Feb 6 2021, 11:26 AM
Post #6


Novice
**

Group: Members
Posts: 25
Joined: 29-July 20
Member No.: 27,462



QUOTE(pandy @ Feb 5 2021, 11:22 AM) *

The right question is what did you do to accomplish this?

Please link to the page (preferred) or post the markup and CSS here.


Pandy, thank you for the reply. I have another issue. I want to center the form now residing below the image. The web seems to be covered with answers regarding this matter but I do not understand any of them. When I used FrontPage to build my web the form is centered. When I load up my page on the server, the form appears on the left side of the page. Here is how the page looks on the server https://www.findthepower.net/Contact%20Form/AltarImage3.htm
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 6 2021, 12:16 PM
Post #7


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6



QUOTE(HowdeeDoodee @ Feb 6 2021, 05:26 PM) *

QUOTE(pandy @ Feb 5 2021, 11:22 AM) *

The right question is what did you do to accomplish this?

Please link to the page (preferred) or post the markup and CSS here.


Pandy, thank you for the reply. I have another issue. I want to center the form now residing below the image. The web seems to be covered with answers regarding this matter but I do not understand any of them. When I used FrontPage to build my web the form is centered. When I load up my page on the server, the form appears on the left side of the page. Here is how the page looks on the server https://www.findthepower.net/Contact%20Form/AltarImage3.htm



You've tried to center it with text-align: center. That doesn't work for what you want to do. It centers inline content within a block level element. Such as text or images inside a P.

But, it isn't FORM you need to center. It's the visible part, the table. Table is a block level element and can be centered on the page with equal left and right margins, which can be auto, provided the element has a width. Your table has a width.

So instead of this.
CODE

form{text-align: center;}


Use this.

CODE
table   { margin-left: auto; margin-right: auto }


If you are planning to use more tables you may want to give this one an id and use that id as a selector for the above rule, or it will center all tables on the page.

You need to clean your HTML up a little. The style block should be up in HEAD for instance, not in BODY. And you should use a doctype. Things can get messy if you don't.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
HowdeeDoodee
post Feb 6 2021, 01:43 PM
Post #8


Novice
**

Group: Members
Posts: 25
Joined: 29-July 20
Member No.: 27,462



Where should the the code
CODE
table style=margin-left: auto; margin-right: auto
be placed.

Thank you in advance for the reply.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 6 2021, 03:31 PM
Post #9


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6



QUOTE(HowdeeDoodee @ Feb 6 2021, 07:43 PM) *

Where should the the code
CODE
table style=margin-left: auto; margin-right: auto
be placed.




No. Place it in the style block that you are going to move to the HEAD section and remove the line you already have there.

Change this...

CODE

<html>

<head>
<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Contact Form Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">    





<body>
<style>
form{text-align: center;}
</style>


...this.

CODE

<html>

<head>
<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Contact Form Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">    

<style>
table      { margin-left: auto; margin-right: auto;}
</style>

</head>


<body>


It isn't wrong to use it in a style attribute, but it isn't a smart way of doing it. Keep your CSS separated from your HTML.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 26th April 2024 - 04:58 AM