right sidebar won't float to top

  • Resolved astephens

    (@astephens)


    9 years, 4 months ago

    Using a blank template created in a web design class.

    Working on Contact page https://www.gracechurchhouston.com/contact
    and trying to figure out why the right sidebar won’t float to the top. I can’t figure out what is blocking it from going up.

    Using Simple Basic Contact Form but still trying to get the input areas to show border and/or background so they’ll show up better… also Submit button needs styling but i’ve contacted the form’s author on that (unless someone sees it easy and quicker) ??
    Thanks!

Viewing 6 replies - 1 through 6 (of 6 total)
  • Peninah

    (@highlight_creative)

    It has to do with your stacking order. You’ve got 3 elements floated left. What you’re trying to attain is 2 columns; one for the content, one for the sidebar.

    To achieve that, you need to wrap the 2 content divs (.contactinfo and #simple-contact-form) inside a div, and put the width and float on the containing div.

    Re styling your contact form, looks like the regular css for that (input, textarea, etc) should work–it did when I tested it in the browser.

    Good luck!

    Thread Starter astephens

    (@astephens)

    Thank you for your help… much improved!

    Thread Starter astephens

    (@astephens)

    Almost there…
    I’m trying to find the place in css to add the light grey border for the input text boxes. Did you say you got it to work? Not locating yet where to add the color outline so the boxes will show up… maybe to look more like this sample:
    https://perishablepress.com/simple-basic-contact-form/

    Also searching for where/how to make the “Send email” button look a bit more styled as in example.
    thank you ??
    https://www.gracechurchhouston.com/contact

    Peninah

    (@highlight_creative)

    Glad to hear it!

    If you use a development tool like Chrome’s Element Inspector or Firefox’s Firebug, you can actually check the css on other sites and see what they’ve done. (Google both and you’ll find tutorials)

    Your example looks like it would be something like:

    input, textarea {
   border: 1px solid #ddd;
   background: #f5f5f5;
   }

    And the button can be styled using input[type=submit]

    You may find the following resource helpful for determining which elements to use:
    https://www.w3schools.com/css/default.asp

    Or, googling things like “how to style a contact form with css.” I love Google ??

    Thread Starter astephens

    (@astephens)

    Your help has allowed me to just about finish up the site.
    Thanks so much, Peninah!
    I will definitely look into the Chrome and Firefox aids to check css.
    You’re right about google… it’s helped me alot!

    Using a validator now to correct a few small errors… if i can find where they are ??

    Peninah

    (@highlight_creative)

    Yay! That’s a big accomplishment.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘right sidebar won't float to top’ is closed to new replies.