41 users online (1 members and 40 guests)  


  Results 1 to 2 of 2

Related

  1. Confused with SEO    Forum: Search Engine Optimization - SEO - Forum
    Replies: 6
  2. Replies: 6
  3. Confused    Forum: CSS Forum
    Replies: 1
  4. Help. I'm just confused...    Forum: CSS Forum
    Replies: 1
  1. #1
    lilguy43uk's Avatar
    New User

    Status
    Offline
    Join Date
    Jul 2015
    Posts
    1

    Totally confused

    Hello all

    It's been many years ago since I dabbled in html/css and, even then, I didn't use it enough to really become proficient. Looking at it nowadays, so much has changed since I last got my hands dirty and I'm totally confused by some of it. At 72 I don't take in information like I used to.
    Now I need some help. I've been asked to create a website for an organisation and have created a mailto contact form.
    The only thing that's puzzling me is placing paragraph text to the right of it.

    Imagine a square box divided vertically with the form in the left half and explanatory text in the right and you will get the idea.

    In the "Good old days" this would have been easy using the now maligned and depreciated "Table".

    The markup for the form and css is below. Any help would be appreciated.

    <form
    action="mailto:dummy1@chamisplace.com"
    method="POST"
    enctype="multipart/form-data"
    name="EmailTestForm">

    Your Name:<br>
    <input width="auto" type="text" size="20" name="VisitorName"><br><br>

    Your Phone:<br>
    <input type="text" size="20" name="VisitorPhone"><br><br>

    Your Email:<br>
    <input type="text" size="40" name="VisitorEmail"><br><br>

    Your Comment:<br>
    <textarea name="VisitorComment" rows="8" cols="40">
    </textarea><br><br>

    <input type="submit" value="Email This Form">

    </form>
    ---------------------------------------------------------
    label
    {
    width: 4em;
    float: left;
    text-align: right;
    margin-right: 0.5em;
    display: block
    }

    .submit input
    {
    margin-left: 4.5em;
    }
    input
    {
    color: #781351;
    background: #fee3ad;
    border: 1px solid #781351
    }

    .submit input
    {
    color: #000;
    background: #ffa20f;
    border: 2px outset #d7b9c9;}

  2. #2
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: Totally confused

    Hi there lilguy43uk,

    and a warm welcome to these forums.

    I am sorry that I did not get back to you sooner, but, like you,
    I am also a war baby and don't function so quickly now.

    Try it like this...
    Code:
    
    <!DOCTYPE html>
    <html  lang="en">
    <head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>untitled document</title>
    
    <link rel="stylesheet" href="/" media="screen">
    
    <style media="screen">
    body {
        background-color:#f0f0f0;
     }
    #container {
        width:75%;
        padding:2.5%;
        margin:auto;
        border:1px solid #781351;
        background-color:#fff;
        box-shadow:0.5em 0.5em 0.5em #999;
        overflow:hidden;   
     }
    #EmailTestForm {
        float:left;
        width:50%;
     }
    #EmailTestForm label{
        display:block;
        margin-bottom:0.25em;
     }
    #EmailTestForm input,#EmailTestForm textarea {
        display:block;
        width:80%;
        margin-bottom:2em;
        border:1px solid #781351;
        color: #781351;
        background-color:#fee3ad;
     }
    #EmailTestForm input[type=submit] {
        width:auto;
        border:2px outset #d7b9c9;
        color:#000;
        background:#ffa20f;
     }
    #content {
        float:left;
        width:50%;
     }
    @media screen and (max-width:690px) {
    #container {
        width:90%;
        padding:2.5%;
      }
    #EmailTestForm,#content {
        width:100%;
      }
     }
    </style>
    
    </head>
    <body>
    
    <div id="container">
    
    <form action="mailto:dummy1@chamisplace.com" method="post" enctype="multipart/form-data" id="EmailTestForm">
    
    <label for="nme">Your Name:</label>
    <input id="nme" type="text" name="VisitorName">
    
    <label for="phe">Your Phone:</label>
    <input id="phe" type="text" name="VisitorPhone">
    
    <label for="eml">Your Email:</label>
    <input id="eml" type="text" name="VisitorEmail">
    
    <label for="cmt">Your Comment:</label>
    <textarea id="cmt" name="VisitorComment" rows="8" cols="40"></textarea>
    
    <input type="submit" value="Email This Form">
    
    </form>
    
    <div id="content">
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec 
    ultricies sollicitudin nisi, ut molestie felis adipiscing sit 
    amet. Sed auctor vehicula commodo. Nam a nibh neque, vitae 
    faucibus felis. Vivamus at metus eget eros consequat fringilla. 
    Quisque magna magna, laoreet eu tempus sit amet, fringilla at 
    tellus. Praesent felis tortor, scelerisque vitae fringilla 
    non, porttitor et lacus. Ut ut sapien nec quam tincidunt 
    consectetur in nec lacus.
    </p><p>
    Phasellus porta, dui a elementum egestas, odio sapien rhoncus 
    lorem, vitae bibendum erat sem eget sapien. Maecenas ut metus 
    ac quam pellentesque lacinia quis sit amet augue. Fusce eu 
    euismod urna. Nunc volutpat scelerisque tempus. Donec eget arcu 
    et mauris scelerisque tristique. Donec fringilla mauris dolor, 
    sit amet vulputate lacus. Nulla feugiat mattis nulla non 
    tincidunt. Nam sit amet dolor eros, a viverra lacus. Nunc quis 
    nisi eget neque tempus facilisis eu quis sapien.
    </p>
    </div><!-- end #content -->
    
    </div><!-- end #container -->
    
    </body>
    </html>
    Note:-
    This code will also work on tablets and mobile devices.