jemz
November 22, 2012, 4:06pm
1
Hi, I need some help on how can i prevent my element that it will not overlap to other element.I have 1 div
inside of it is, label,textbox,checkbox,and image button in horizontal form.but when i am going to press the crtl+mouse wheel.the element is starting moving and it will overlap to other element…how can i fixed this.?
Thank you in advance.
ralphm
November 22, 2012, 11:39pm
2
Can you post a link to an example? Or post a working example here.
jemz
November 26, 2012, 1:50pm
3
Hi ralph, i do apologize i forgot to put my source code…
here it is, when you ctrl+mouse wheel as you can observe that the checkbox and the textbox well overlap and it will not align properly…Thank you in advance…
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css">
#firstdiv{
float: left;
}
#firstdiv input{
margin-left: 5px;
}
#seconddiv{
float: left;
}
.wrapperclass{
width: 80%;
}
</style>
</head>
<body>
<div class="wrapperclass">
<div id="firstdiv">
<label>Please input</label>
<input type="text">
</div>
<div id="seconddiv">
<input type="checkbox">
<input type="text"/>
</div>
</div>
</body>
</html>
ralphm
November 26, 2012, 1:56pm
4
Not sure what you mean by that. I can’t see a problem like that in the code.
jemz
November 26, 2012, 2:39pm
6
I attached a picture so that you can see what i mean…Thank you in advance.
ralphm
November 26, 2012, 10:23pm
7
OK, I see. It doesn’t do that in my browser. What browser are you using?
ronpat
November 26, 2012, 11:05pm
8
The line will do that if it is reduced in size enough in FF and IE8. That’s illegibly small, though. Seems silly, IMO.
ronpat
November 27, 2012, 10:16am
10
jemz, try this:
<!DOCTYPE html>
<html>
<!--
-->
<head>
<title>Test</title>
<style type="text/css">
.wrapperclass {
width:80%;
}
#firstdiv input {
margin-left:5px;
}
input {
vertical-align:middle;
}
</style>
</head>
<body>
<div class="wrapperclass">
<span id="firstdiv">
<label>Please input</label>
<input type="text"/>
</span>
<span id="seconddiv">
<input type="checkbox"/>
<input type="text"/>
</span>
</div>
</body>
</html>
Tested in FF17 and IE8.
jemz
November 27, 2012, 12:22pm
11
Hi, thanks what is the logic on this?..by the way what causes my code that will destroy or overlap when my page is resize into small?..Thank you in advance
jemz
December 5, 2012, 2:13pm
12
Hi, ralph i need some help on my one div, i could not align horizontally in the Level Dept.
I want that my submission label and input will be align horizontally in the Level Dept and input.
here is the code
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.outer-wrapper {
width: 80%;
margin: 58px 0 0 13px;
}
.outer-wrapper div {
float: left;
min-width: 1000px;
padding: 0 0 0.75em 0;
}
.outer-wrapper label {
width: 160px;
float: left;
padding: 8px 5px;
}
</style>
</head>
<body>
<div class="outer-wrapper">
<div>
<label>Series number</label>
<input type="text"/>
</div>
<div>
<label>Level Dept</label>
<input type="text"/>
</div>
<div>
<label>Submission date</label>
<input type="text"/>
</div>
</div>
</body>
</html>
ronpat
December 5, 2012, 11:23pm
13
I’m not sure that I understand the question, but try this and let us know if it satisfies your need:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.outer-wrapper {
width: 80%;
margin: 58px 0 0 13px;
}
.outer-wrapper div {
float: left;
min-width: 1000px;
padding: 0 0 0.75em 0;
}
.outer-wrapper label {
width: 160px;
/* float: left; /* delete this */
display:inline-block; /* add this */
padding: 8px 5px;
}
</style>
</head>
<body>
<div class="outer-wrapper">
<div>
<label>Series number</label>
<input type="text"/>
</div>
<div>
<label>Level Dept</label>
<input type="text"/>
</div>
<div>
<label>Submission date</label>
<input type="text"/>
</div>
</div>
</body>
</html>
jemz
December 6, 2012, 2:20pm
14
ronpat:
I’m not sure that I understand the question, but try this and let us know if it satisfies your need:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.outer-wrapper {
width: 80%;
margin: 58px 0 0 13px;
}
.outer-wrapper div {
float: left;
min-width: 1000px;
padding: 0 0 0.75em 0;
}
.outer-wrapper label {
width: 160px;
/* float: left; /* delete this */
display:inline-block; /* add this */
padding: 8px 5px;
}
</style>
</head>
<body>
<div class="outer-wrapper">
<div>
<label>Series number</label>
<input type="text"/>
</div>
<div>
<label>Level Dept</label>
<input type="text"/>
</div>
<div>
<label>Submission date</label>
<input type="text"/>
</div>
</div>
</body>
</html>
Hi, thank you for the reply…hmmm. the subbmission date should in the right side and align it to the Level dept
sample
Level date ___________ submission date ______________