Ask Question Forum:
Model Library:2025-02-08 Updated:A.I. model is online for auto reply question page
C
O
M
P
U
T
E
R
2
8
Show
#
ASK
RECENT
←
- Underline
- Bold
- Italic
- Indent
- Step
- Bullet
- Quote
- Cut
- Copy
- Paste
- Table
- Spelling
- Find & Replace
- Undo
- Redo
- Link
- Attach
- Clear
- Code
Below area will not be traslated by Google,you can input code or other languages
Hint:If find spelling error, You need to correct it,1 by 1 or ignore it (code area won't be checked).
X-position of the mouse cursor
Y-position of the mouse cursor
Y-position of the mouse cursor
Testcursor
caretPos
Attachment:===
Asked by ank5
at 2024-08-09 00:46:48
ModifyPoint:500 Replies:7 POST_ID:828719USER_ID:11616
Topic:
Cascading Style Sheets (CSS);Hypertext Markup Language (HTML);Web Languages/Standards
I have the following html/css code
<html><head> <script language="JavaScript" type="text/javascript"> function HandleFileButtonClick() { document.import_form.zip_file_import.click(); document.import_form.txtFakeText_zip.value = document.import_form.zip_file_import.value; } </script> <style> .label-style { font-family: Helvetica, Arial, sans-serif; font: Helvetica, Arial, sans-serif; font-size: 12px; font-weight: normal; color: #363636; word-wrap: break-word; float:left; display:inline; } label.cabinet { width: 79px; height: 22px; background: url(btn-choose-file.png) 0 0 no-repeat; display: block; overflow: hidden; cursor: pointer; } label.cabinet input.file { position: relative; height: 100%; width: auto; opacity: 0; -moz-opacity: 0; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0); } </style></head><body> <div class="label-style">Please select the documents to import : </div> <br/> <form name="import_form" action='http/upload_archive' method="post" enctype="multipart/form-data"> <label class="label-style">Select zip file :</label><label class="cabinet"> <input type="file" class="file" name="zip_file_import" /> </label> <label class="label-style">Select manifest file :</label><label class="cabinet"> <input type="file" class="file" name="manifest_file_import" /> </label> </form></body></html> 1:2:3:4:5:6:7:8:9:10:11:12:13:14:15:16:17:18:19:20:21:22:23:24:25:26:27:28:29:30:31:32:33:34:35:36:37:38:39:40:41:42:43:44:45:46:47:48:
The result is displayed is attachment1.png. As you would observe, the three lines have very minimal space between them and look cluttered.
I would like it to be more like attachement2.png where there is space between the lines.
Can someone please suggest the changes to increase the space between lines.
Attachment:Attachment1.pngAttachment2.png
Assisted Solution
Expert: COBOLdinosaur replied at 2024-08-09 07:48:08
125 points EXCELLENT
Just set the CSS line-height to a value like 125% or whatever value gives you the spacing you want. You would not have so much of a problem if you were not mis-using the label tag by sticking in the extra label with no content. Use one label and manage positioning with CSS or use a span; instead of such an ugly hack.
Cd&
Cd&
Accepted Solution
Expert: Chris Stanyon replied at 2024-08-09 03:56:55
125 points EXCELLENT
OK. You could add clear:both to your label-style rule, but another option is to wrap each row in a DIV and space that. It will keep the label and input together.
<div class="row"> <label class="label-style">Select zip file :</label> <label class="cabinet"><input type="file" class="file" name="zip_file_import" /></label></div><div class="row"> <label class="label-style">Select manifest file :</label> <label class="cabinet"><input type="file" class="file" name="manifest_file_import" /></label></div> 1:2:3:4:5:6:7:8:9:
You can then just space the rows by styling .row:
.row { margin: 5px 0px; }
.row { margin: 5px 0px; }
Author: ank5 replied at 2024-08-09 03:35:47
I tried this but it moves the image to the next line
.label-style { font-family: Helvetica, Arial, sans-serif; font: Helvetica, Arial, sans-serif; font-size: 12px; font-weight: normal; color: #363636; word-wrap: break-word; float:left; display:inline; margin-bottom:5px;margin-top:5px; width: 100px; } 1:2:3:4:5:6:7:8:9:10:11:12:
Assisted Solution
Expert: Chris Stanyon replied at 2024-08-09 02:59:06
125 points EXCELLENT
You should set your labels to display as inline-blocks and then give them a width:
Author: ank5 replied at 2024-08-09 02:50:05
Thanks padas.
One last question. Is it possible to align the fields like in attachment2. Regardless of the width of the label, the text fields start at the same point. Is it possible to do that in the CSS above.
So, I'm looking at something like
Select zip file : Select
Select manifest file : Select
(it doesn't align well here, but what I intend is both Selects aligned one above the other, as in text fields in attachment2)
One last question. Is it possible to align the fields like in attachment2. Regardless of the width of the label, the text fields start at the same point. Is it possible to do that in the CSS above.
So, I'm looking at something like
Select zip file : Select
Select manifest file : Select
(it doesn't align well here, but what I intend is both Selects aligned one above the other, as in text fields in attachment2)
Assisted Solution
Expert: Scott Fell (padas) replied at 2024-08-09 01:06:22
125 points EXCELLENT
You will want to use css. One option is to add a margin to the bottom and or top of your labels. label{margin-bottom:5px;margin-top:5px;}
http://jsbin.com/asowaz/1/edit
http://jsbin.com/asowaz/1/edit
Expert: duncanb7 replied at 2024-08-09 00:49:33
Why don't put <br/> between lines
