Overflow: hidden problem

HTML & CSS
61

The inputs are set at 79% width. If that’s too much then lower it. Unless I misunderstand you?

62

I tried width: 50%

form inputtext messed up.

63

Looks like you could use some “clear” rules.

64 
    #contact  form input[type="text"] {
          width: 55%;
          clear: both;
}

It is also not working.

Url Site

65

It’s as I’ve been saying. You need to wrap that text in a label.

Right now you have an inline text node, an inline (or inline-block I forget); either way it acts as inline-block) input, and then you just have 3x of that or however many.

It will try to fit as many as it can on a line before wrapping.

Please take my advice and use labels. It’s a win win. Accessibility wins, and you can more easily format your form.

1 Like
66

this one, right?

67

Nope. Not fieldset. Label.

68

902×359 12 KB

Is my Form area okay now like the coding structure?

Url Site

TO THIS :

900×298 46.9 KB

69

Your form has no method attribute but other than that it’s fine.

Not responsive but that’s a separate question.

1 Like
70

Url Site

Where can I download the plugin like this functionality?

1017×451 156 KB

Like from my calendar

71

Do you mean embed a google map?

You should find what you want here:

https://code.google.com/p/jquery-ui-map/
http://jquery-plugins.net/tag/google-maps

72

What type of plugin are you using now of those three?

73

It depends on what you are trying to do exactly.

If you want a simple map on your page then you can simply grab some ifram code form the google map itself.

e.g.

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d79429.09118536298!2d-0.10159865000000001!3d51.52864165000001!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47d8a00baf21de75%3A0x52963a5addd52a99!2sLondon!5e0!3m2!1sen!2suk!4v1427033999888" width="600" height="450" frameborder="0" style="border:0"></iframe>

Just go to Google maps and find your destination. Next click the gear icon at the bottom left of the map. Click share or embed map. Clock embed map. Grab iframe code.

If you want more complicated control then you will need the map API from google which is in the first link I gave above and you will need to sign up and get a license key (free). Modifying the API is not something I am familiar with though.

74

This image is the whole thing that I want to do: :confounded:

1017×451 156 KB

75

You are not making much sense here. What is it that you cannot do?

If you set your location into the google map then you will get code that looks pretty much like your image. You will get iframe code like this which you paste into your website.

<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3010.469417363874!2d-83.934043!3d41.014985!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x883e989bf835fa73%3A0x18a855fd962e7a21!2sGilboa+Quarry+Inc!5e0!3m2!1sen!2suk!4v1427037654694" width="600" height="450" frameborder="0" style="border:0"></iframe>

You can use CSS to move it around but if you want to modify the map look and details then you need to do that with the Google API which was in the link I gace you above and would be something that you need to study in detail. It’s all explained in the link in my original post.

Here’s what just embedding the map in your page will look like with some css rules to make it stretch.

If you need more modification than that then you must use the map API (or perhaps one of those jquery plugin links I gave you earlier).

Or try these links:

1 Like
76

Should I use clear float again because my map covered the calendar and form area:

902×359 12 KB

Is this correct to let my map be full width like from my #featured UL Li images?

#contact .gmap {
      max-width: **1400px**;
  margin: auto;
  border: 5px solid red;
  padding: 36% 0 0;
  position: relative;
}

Url Site

77

Add overflow:hidden to that.

78

Overflow: hidden isn’t working, but I tried clear: both and it is working. Is it fine?

#contact .gmap {
      max-width: 1400px;
  margin: auto;
  border: 5px solid red;
  padding: 36% 0 0;
  position: relative;
  clear: both;
}
79

Mine works if you are trying to get them on the same line.

Why is column1 floated if you have no intentions of columns? You can just remove the float from column1, give it overflow:hidden; to contain the floats, and you won’t NEED the clear:both; (i.e. remove it.)

Your code gives one intention but you wanted something else. Very confusing code :wink: .

So, yes it works however it’s a somewhat silly way of going about it.

1 Like
80

I already removed the float left and added overflow hidden.

How can I make my map full width same as with my featured UL Li images?

My #contact is 1200px width and I just want to know the clean way though :grimacing:

Url site