Highlighted

positioning

Engaged ,
Sep 13, 2019

Copy link to clipboard

Copied

Hi,

 

Clicking the icon in <header> opens the file (Contact Me).

It is before adding php.

 

There is the green box in <main>.

How can I position it in the middle?

 

I just think margin: 0px auto would work.

 

https://dazzling-lamport-08b3f2.netlify.com/

 

Hosun Kang

 

Q_Dw_80_php.png

 

TOPICS
Code

Views

192

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

positioning

Engaged ,
Sep 13, 2019

Copy link to clipboard

Copied

Hi,

 

Clicking the icon in <header> opens the file (Contact Me).

It is before adding php.

 

There is the green box in <main>.

How can I position it in the middle?

 

I just think margin: 0px auto would work.

 

https://dazzling-lamport-08b3f2.netlify.com/

 

Hosun Kang

 

Q_Dw_80_php.png

 

TOPICS
Code

Views

193

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Sep 13, 2019 0
osgood_ LATEST
LEGEND ,
Sep 13, 2019

Copy link to clipboard

Copied

 

The code below is all you require between the <main> </main> tags on the contact page:

 

<main>
<div class="form-container">
<h2>Contact Me</h2>
<form method="post" class="feedback-form" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<p>
<label for="name">Name</label>
<input type="text" name="name" id="name" value="<?php echo isset($_POST['name']) ? $name : ''; ?>">
</p>
<p>
<label for="email">Email</label>
<input type="text" name="email" id="email" value="<?php echo isset($_POST['email']) ? $email : ''; ?>">
</p>
<p>
<label for="phone">Phone</label>
<input type="text" name="phone" id="phone" value="<?php echo isset($_POST['phone']) ? $phone : ''; ?>">
</p>
<p>
<label for="message">Message</label>
<textarea name="message" id="message"><?php echo isset($_POST['message']) ? $message : ''; ?></textarea>
</p>
<p>
<label for="alien">6 + 6 = ?</label>
<input type="text" name="alien" id="alien" value="<?php echo isset($_POST['alien']) ? $alien : ''; ?>">
</p>
<?php if($msg != ''): ?>
<div class="alert-message"><?php echo $msg; ?></div>
<?php endif; ?>
<button type="submit" name="submit" class="btn-green">Submit</button>
</form>
</div>
</main>

 

 

Then add the css below to position the form-container in the center of your contact page:

 

.form-container {
width: 75%;
margin: 0 auto;
padding: 30px;
}

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 13, 2019 2