• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

positioning

Enthusiast ,
Sep 13, 2019 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

311

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
community guidelines
LEGEND ,
Sep 13, 2019 Sep 13, 2019

Copy link to clipboard

Copied

LATEST

 

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;
}

 

Votes

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
community guidelines