Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 5 of 5
  1. #1
    Junior Member
    Join Date
    Oct 2016
    Posts
    3
    Member #
    55443

    CSS Issue with Form

    Hi guys, new to this forum so I really hope you can help!

    I have a contact page that i'm trying to build but I'm having two issues, one is with Google Maps, and the other is with my contact form.

    I created a form using - https://www.jqueryform.com/

    Here is my form: :: Generated By JQueryForm.Com
    Here is my original page and I'm trying to insert that HTML code under the phone number and above the map: Best Boston SEO Company Experts | Instill Solutions | Top Search Engine Optimization Company Massachusetts, PPC in MA, Reputation Management
    This is the end result.... Best Boston SEO Company Experts | Instill Solutions | Top Search Engine Optimization Company Massachusetts, PPC in MA, Reputation Management

    It seems to be messing with all the CSS in the header. Should I wrap it in a div somehow or how can I make it so that it works? I figured by just pasting the entire HTML from :: Generated By JQueryForm.Com would work.

    My second question, any idea why the map won't work and how I can fix that? I have this page on another domain and it works, but here it won't. Any feedback would be much appreciated!!!

  2.  

  3. #2
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,485
    Member #
    425
    Liked
    2783 times
    Your Javascript map doesn't have an API key. You need to register all Google Maps applications and get an API key so that they can track and limit requests to avoid abuse.

    https://developers.google.com/maps/d...pt/get-api-key <-- get it here.

    Your menu is turning off white because you're loading a second bootstrap.min.css file overtop of your bootstrap.css file. This is one of the (many) reasons I advise against using CSS frameworks unless you understand CSS first...and why I advise against using them when you do understand CSS. It's all too easy to have two CSS files collide like this, and most CSS frameworks are incredibly bloated (e.g. Bootstrap).

    Now, you could switch the order that the two CSS files load, but that may (read: probably will) create other conflicts. If you're going to insist on using both of those CSS files, your best bet will be to create a third CSS file after the first two with your form and put the background-color: transparent rule back in for your nav bar.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  4. #3
    Junior Member
    Join Date
    Oct 2016
    Posts
    3
    Member #
    55443
    Sorry in advance if I sound a little dumb with this. I haven't done a web design project in years, way before responsive came out so I'm struggling through a lot of this. The website was a template that I got so it wasn't designed from scratch.

    Is there any way to wrap that code in something, like a div so it doesn't overlap. I'm sure I could iframe it, but that wouldn't stay responsive correct?

    On the Google Maps, went and got a key, how do implement the key so that it works on the pro144.com?

  5. #4
    Junior Member
    Join Date
    Oct 2016
    Posts
    3
    Member #
    55443
    Capture.JPG
    So I think I did the Google Maps right but still nto showing, got the Key, went into the API, added the URL, still not showing up, been about 30 mins now. Any idea? Is there a step I'm missing?

  6. #5
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,485
    Member #
    425
    Liked
    2783 times
    You have to put the key into the URL that calls the script.

    Go into your tm-scripts.js file and edit this line:

    Code:
      include('//maps.google.com/maps/api/js?sensor=false');
    To read:
    Code:
      include('//maps.google.com/maps/api/js?sensor=false?key=(whatever your key is)');
    To answer your first question: wrapping it in anything won't make a difference. The "C" in "CSS" stands for "Cascading"; this is a reference to the way in which CSS rules are applied. The last Cascading tiebreaker is descending source order. If you have two rules of the same importance (which most are; as long as !important isn't specified, this generally is identical) and specificity (as in what elements a rule applies to), then the source order breaks that tie. Your bootstrap.min.css is declared later than bootstrap.css, so based on source order rules its CSS will take over. If you absolutely must use that CSS file, move it above bootstrap.css in your code. This isn't the best way to solve your problem, but it may be the easiest for you.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 07:15 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com