SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,104
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Exclamation I have problem in horizontal

    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.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Can you post a link to an example? Or post a working example here.

  3. #3
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,104
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Can you post a link to an example? Or post a working example here.
    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...
    Code:
    <!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>

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by jemz View Post
    when i am going to press the crtl+mouse wheel
    Not sure what you mean by that. I can't see a problem like that in the code.

  5. #5
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,104
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Not sure what you mean by that. I can't see a problem like that in the code.
    Have you tested my code?

  6. #6
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,104
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Not sure what you mean by that. I can't see a problem like that in the code.

    I attached a picture so that you can see what i mean..Thank you in advance.
    Attached Images Attached Images

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    OK, I see. It doesn't do that in my browser. What browser are you using?

  8. #8
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,506
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    The line will do that if it is reduced in size enough in FF and IE8. That's illegibly small, though. Seems silly, IMO.

  9. #9
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,104
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    OK, I see. It doesn't do that in my browser. What browser are you using?
    mozilla firefox.

  10. #10
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,506
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    jemz, try this:

    Code:
    <!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.

  11. #11
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,104
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    jemz, try this:

    Code:
    <!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.

    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

  12. #12
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,104
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    OK, I see. It doesn't do that in my browser. What browser are you using?

    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

    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>

  13. #13
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,506
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    I'm not sure that I understand the question, but try this and let us know if it satisfies your need:

    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;            /* 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>

  14. #14
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,104
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    I'm not sure that I understand the question, but try this and let us know if it satisfies your need:

    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;            /* 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 ______________


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •