Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Feb 2008
    Posts
    14
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Image and form alignment please help

    Okay so if you look at this site

    **URL REMOVED BY POSTER**

    you can see that the forms at the top are a little off. I have taken away the top image and the one below the issue for now. but i am those work fine already.

    The question is how can i align the input images and the actual input fields in the middle of that div?

    Here is the HTML:

    Code:
    BEGINNING CODE CUT OUT....
    
    <link rel="stylesheet" type="text/css" href="style1.css" />
    <link rel="stylesheet" type="text/css" href="style2.css" />
    </head>
    
    <body>
    <div id="outer">
    	
    	<!-- Header -->
    	<div id="header_top"> 
    		<div align="right" class="wlcme_usr">
    		Welcome <strong>Guest</strong>, Please <a class="wlcme_usr" href="#">login</a>or <a class="wlcme_usr" href="#">register</a> 
    		</div>
    	</div>
    	<div id="header_middle">
    		<form method="post" action="">
    			<span style="margin-left: 350px; background-image: url(images/search_input_box.gif);  background-repeat: no-repeat;"> 
    				<input type="text" size="7" style="color:#FFFFFF; background-color: transparent; border: solid 0px #FFF;" maxlength="100" name="site"/>
    				&nbsp; 
    				<input type="image" name="search" src="images/search_go.gif" BORDER="0" ALT="Search">
    			</span>
    	  		<span style="margin-left: 32px;">
    	  			<img src="images/user_login.gif" /> 
    	  		</span>
    	 		<span style="margin-left: 5px; background-image: url(images/search_input_box.gif); background-repeat: no-repeat;"> 
    		 		<input type="text" size="7" style="color:#FFFFFF; background-color: transparent; border: solid 0px #FFF;" maxlength="100" name="username"/>
    			</span>
    			<span style="margin-left: 2px; background-image: url(images/search_input_box.gif);  background-repeat: no-repeat;"> 
    		 		<input type="text" size="7" style="color:#FFFFFF; background-color: transparent; border: solid 0px #FFF;" maxlength="100" name="password"/>
    			</span>
    			<span style="margin-left: 1px; ">
    				<input name="login" type="image" src="images/login_button.gif" alt="Login" border="0" />
    			</span>
    		</form>
    	</div>
    	<div id="header_bottom"></div>
    	<!-- Header End -->
    	
    ENDING CODE CUT OUT...
    HERE is the CSS well part of it. the part we need:
    Code:
    /* Layout Stylesheet */ 
    
    body {
     margin:20px;
     background:#808080;
     color: #333333;
     text-align:center;
     padding:0;
     }
    
    #outer {
     text-align:left;
     border:1px solid #000000;
     width:760px;
     margin:auto;
     
     }
     
    #header_top {
    	height:37px;
    	background-image: url('images/header_top11.gif');
    }
    
    #header_middle {
    	height:23px;
    	background-image: url('images/header_top2.gif');
    }
    
    #header_bottom {
    	height: 128px;
    	background-image: url('images/header_bottom1_big.gif');
    }	
    
    #bar {
     height:35px;
     background:#c0c0c0;
     color: #333333;
     /* border:solid #000000;	
     border-width:1px 0 1px 0; */
     
     }
    
    #bodyblock {
     /* position:relative; */
     margin: auto;
     background: #dcdcdc;
     color: #333333;
     width:760px;
     padding:0;
     }
    
    #l-col {
     float:left;
     background:#dcdcdc;
     color: #333333;
     width:145px;
     }
    
    #cont {
     width:495px;
     background:#ffffff;
     color: #333333;
     border:solid #000000;	
     border-width:0 0 0 1px;
     text-align:left;
     }
    
    #ftr {
     height:25px;
     background:#c0c0c0;
     color: #333333;
     border:solid black;
     border-width:1px 0 0 0;
     margin:0;
     width: 760px;
     }
    Last edited by Money88; 04-30-2009 at 03:33 AM.

  • #2
    New Coder
    Join Date
    Feb 2008
    Posts
    14
    Thanks
    3
    Thanked 0 Times in 0 Posts
    wow always figures whenever i look for help i figure it out haha. Well if anyone else is looking to do the same type of thing...

    Its sloppy but works.

    HTML:
    Code:
    	<form method="post" action="http://www.tipjar.com/cgi-bin/test">
    			<span style="margin-left:350px; vertical-align:top; background-image: url(images/search_input_box.gif);  background-repeat: no-repeat;"> 
    				<input type="text" size="7" class="top" maxlength="100" name="site"/>
    				&nbsp; 
    				<input type="image" name="search" src="images/search_go.gif" BORDER="0" ALT="Search">
    			</span>
    	  		<span style="margin-left: 32px;">
    	  			<img src="images/user_login.gif" /> 
    	  		</span>
    	 		<span style="margin-left:5px; vertical-align:top; background-image: url(images/search_input_box.gif); background-repeat: no-repeat;"> 
    		 		<input type="text" size="7" class="top" maxlength="100" name="username"/>
    			</span>
    			<span style="margin-left:2px; vertical-align:top; background-image: url(images/search_input_box.gif);  background-repeat: no-repeat;"> 
    		 		<input type="text" size="7" class="top" maxlength="100" name="password"/>
    			</span>
    			<span style="margin-left: 1px; ">
    				<input name="login" type="image" src="images/login_button.gif" alt="Login" border="0" />
    			</span>
    		</form>
    CSS TOP for the input:
    Code:
    input.top {
    	vertical-align:top; 
    	margin-top: .5%; 
    	height: 10px; 
    	color:#FFFFFF; 
    	background-color: transparent; 
    	border: solid 0px #FFF;
    }
    Last edited by Money88; 04-30-2009 at 03:35 AM.


  •  

    Posting Permissions

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