Reputation:

HTML I have been trying to fix my code. But I can not figure it out

I am trying to put my contact us code in the contact tab but I do not know the exact spot where to put it. It keeps wanting to go where the tab bar is. And I do not want it there. I want it in the middle of the page when to click on the bar.

I have tried many different spots but it does not seem to fit anywhere to me. I have put it in the code. So run it and see what is happening.

Thanks to whom ever helps me!

Here is the code I want to add into the homepage:

    <style>

    div {

    text-align: center;
    }

    </style>

    <div>
    <h1>{PEBKAC}</h1>
    <p>____________________________________________________________________</p>
    <h2>Customer Support:</h2>

    <p>Thank you for using {PEBKAC}! Please complete the form below. <br> This 
    is the 
    fastest and easiest way to get in touch with us.</p>

    <p><b>U.S.</b></p>
    <p><b> Monday-Friday 11:30 AM - 11:45 PM CST <br>
    Saturday-Sunday 1:50 PM - 11:45 PM CST</b></p>

    <p><b>Contact by E-mail only.</b></p>

    <style>
    input[type=text], select, textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;
    }

    input[type=submit] {
    background-color: grey;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    }

    input[type=submit]:hover {
    background-color: white;
    }

    .container {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
    }
    </style>
    </head>
    <body>

    <form action="mailto:the email that I choose" method="post" 
    enctype="text/plain">

    <div class="container">
    <form action="/action_page.php">
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" placeholder="Your 
    Username..">

    <label for="E-mail">E-mail:</label>
    <input type="text" id="E-mail" name="E-mail" placeholder="Your E-mail..">

 
    <label for="subject">Subject</label>
    <textarea id="subject" name="subject" placeholder="Write Something.." 
    style="height:200px"></textarea>

    <input type="submit" value="Submit">
    </form>
    </div>

Homepage with all the tabs:

<html lang="en">

        <head>

        <title>{PEBKAC} - HomePage</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

        <style>
        .w3-bar-item{
          margin-top: 36px;
          margin-bottom: 36px;
        }
        </style>

        <body style="background-color:white;">

        <div class="w3-sidebar w3-bar-block w3-light-grey w3-card-2" 
        style="width:130px">
      
        <button class="w3-bar-item w3-button tablink" onclick="openTab(event, 
        'Home')">Home</button>
        <button class="w3-bar-item w3-button tablink" onclick="openTab(event, 
        'Questions')">Questions</button>
         <button class="w3-bar-item w3-button tablink" onclick="openTab(event, 
        'Search')">Search</button>
        <button class="w3-bar-item w3-button tablink" onclick="openTab(event, 
        'Users')">Users</button>
        <button class="w3-bar-item w3-button tablink" onclick="openTab(event, 
        'About')">About</button>
        <button class="w3-bar-item w3-button tablink" onclick="openTab(event, 
        'Profile')">Profile</button>
        <button class="w3-bar-item w3-button tablink" onclick="openTab(event, 
        'Settings')">Settings</button>
        <button class="w3-bar-item w3-button tablink" onclick="openTab(event, 'Log 
        Out')">Log Out</button>
        <button class="w3-bar-item w3-button tablink" onclick="openTab(event, 
        'Terms')">Terms</button>
        <button class="w3-bar-item w3-button tablink" onclick="openTab(event, 
        'Privacy Policy')">Privacy Policy</button>
        <button class="w3-bar-item w3-button tablink" onclick="openTab(event, 
        'Contact Us')">Contact Us</button>
        <button class="w3-bar-item w3-button tablink" onclick="openTab(event, 
        'Feedback')">Feedback</button>
        
        </div>

        <div style="margin-left:130px">


        <div id="Home" class="w3-container tab" style="display:none"> 
           
        </div>

        <div id="Questions" class="w3-container tab" style="display:none">
        
        </div>

        <div id="Search" class="w3-container tab" style="display:none"> 

        </div>

        <div id="Users" class="w3-container tab" style="display:none">
       
        </div>

        <div id="About" class="w3-container tab" style="display:none">

        </div>

        <div id="Profile" class="w3-container tab" style="display:none">

        </div>
      
        <div id="Settings" class="w3-container tab" style="display:none">
      
        </div>
      
        <div id="Log Out" class="w3-container tab" style="display:none">

        </div>
      
        <div id="Terms" class="w3-container tab" style="display:none">

        </div>

        <div id="Privacy Policy" class="w3-container tab" style="display:none:>

        </div>

        <div id="Contact Us" class="w3-container tab" style="display:none:>

        </div>

        <div id="Feedback" class="w3-container tab" style="display:none:>

        </div>

        </div>

        </body>
        </head>
        </html>

Upvotes: 0

Answers (1)

Naren Murali

Reputation: 57986

Please include this in the head tag if you want to use the JQuery function I created.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>        
        <script>
        $(document).ready(function(){
            $("#Home").css("display", "block"); 
        });
        function openTab(evnt, id){ 
            $(".tab").each(function(){ $
                (this).css("display", "none"); 
            }) 
            $("#"+id).css("display", "block"); 
        }
        </script>

There can't be space inside the id selector.

Before:

<div id="Privacy Policy" class="w3-container tab" style="display:none;">

After:

<div id="PrivacyPolicy" class="w3-container tab" style="display:none;">

Same was found in button also.

Before:

<button class="w3-bar-item w3-button tablink" onclick="openTab(event, 'Log Out')">Log Out</button>

After:

<button class="w3-bar-item w3-button tablink" onclick="openTab(event, 'LogOut')">Log Out</button>

Also I found the inline style for the div's were not closed properly

Before:

<div id="Privacy Policy" class="w3-container tab" style="display:none:>

After:

<div id="PrivacyPolicy" class="w3-container tab" style="display:none;">

Please refer to the below working fiddle with the corrections and use the same!

JSFiddle Demo

Upvotes: 2

HTML I have been trying to fix my code. But I can not figure it out

Answers (1)

Related Questions