Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

distance labels

Featured Replies

I have the attached picture in word. The problem is the distance between the labels is too big and I do not know what to make to make it smaller.

 

Please see also the css code, the picture.

 

Can i get a help?

 

Thanks,

Alisia

Doc1.doc

contact.htm

listaalisia.css

post-11784-0-78414800-1314816243_thumb.png

publish the page and post a link to the page so we don't have to put it all together ourselves - and no one want sot to download a doc

You should attach the pictures, I have looked at your file html and css, cause here can you use too much "margin-top", increase the distance between two label, first you should label a separate div tag, and the label underneath a separate div tag example:

<div class="input_top">

<span> City </span>

<input type="text"....>

</input>

........

</div>

..................

 

<div class="input">

<span> City </span>

<input class="top" type="text"....>

</input>

........

</div>

 

 

and css:

 

.input_top {margin:100px 0 0 0};

.input {margin:30px 0 0 0};

 

may be so ^_____________________^

 

Ps: My english very bad

I have the attached picture in word. The problem is the distance between the labels is too big and I do not know what to make to make it smaller.

 

Please see also the css code, the picture.

 

Can i get a help?

 

Thanks,

Alisia

 

Hi alisia,

 

I went through your script and solved the error.There was a slight error in CSS coding which i have rectified.

I am sending you the rectified CSS file.

 

It was nice to serve you.

 

Thanking You,

Futureistic Team

Edited by zed
remove crap from post

I have the attached picture in word. The problem is the distance between the labels is too big and I do not know what to make to make it smaller.

 

Please see also the css code, the picture.

 

Can i get a help?

 

Thanks,

Alisia

 

Hi alisia,

 

I went through your script and solved the error.There was a slight error in CSS coding which i have rectified.

I am sending you the rectified CSS file.

 

It was nice to serve you.

 

Thanking You,

Futureistic Team

listaalisia.css

Edited by zed
remove crap from post

I went through your script and solved the error.There was a slight error in CSS coding which i have rectified.

I am sending you the rectified CSS file.

All you did was remove 'max-height: 30px;' from the rule on line 420... :huh: Which, because of the 'height: 159px;' on line 456, makes the buttons move even further apart..

 

 

Alisiaro: Do you simply want the space between the buttons smaller? If so, try removing or reducing the 8px margin you have on the bottom of the 'input.rounded' rule on line 456, that will bring them closer together.

 

 

Edit: Hmmm... I didn't actually see the Word doc before I posted my comment. The 'max-height' was not in the original CSS.

 

Still, that isn't the best solution. The reason the input blocks are so large is because of the 'height: 159px;' on 'input.rounded'. If 'input.rounded' isn't used at that size anywhere else on your site, then just set that height to about 30px.

Edited by ZaLiTH

  • Author

Any idea how can I make the cusor begin now from the interor of the label not from exterior. It begins from exterior and when I write it exceeds the size of the label.

 

Many thanks,

Alisia

  • Author

How can I decrease the size of the label in which I am writing to be exacly the same with the size of the picture label inserted.

 

I have tried to change the width and padding but does not work.....See attached how appears whe i am tring to type something.

 

Thanks,

Alisia

Doc1.doc

How can I decrease the size of the label in which I am writing to be exacly the same with the size of the picture label inserted.

 

I have tried to change the width and padding but does not work.....See attached how appears whe i am tring to type something.

 

Thanks,

Alisia

Hi,

 

Share your kind with me then only i can rectify it.

 

Thanking You,

Futureistic Team

How can I decrease the size of the label in which I am writing to be exacly the same with the size of the picture label inserted.

Just a thought... But what about doing this without using a picture? Here is something I put together now quickly using the border-radius from CSS3. No pictures at all.

 

If you are worried about compatibility with older browsers (non-CSS3), then you would need to have a fallback to a picture background.. However, working from input fields that already have margin/padding set properly to begin with will be easier. In that case, a sliding-doors style image background can be setup to use a single image as the background for the input and textarea blocks.

 

If you're not too worried about compatibility with old browsers, the only part that won't work in older browsers should be the rounded corners.

  • Author

ok great! but how can i personalize the sent button?

Edited by alisiaro

ok great! but how can i personalize the sent button?

I've added a few comments in the code itself where they apply, have a look here.

 

I like using JSfiddle because you can to play with the values; change a value and click the 'Update' button at the top, you'll see the changes in a few seconds. When you've got something you want to show someone else, simply copy the URL, it's all saved automatically.

Perfect! Thanks a lot!

No problem, glad to help. At the end of the day, forums are all about sharing knowledge and experience.. :)

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.