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.
Page 2 of 2 FirstFirst 12
Results 16 to 25 of 25
  1. #16
    qim
    qim is offline
    Regular Coder
    Join Date
    Mar 2013
    Location
    Andorra
    Posts
    100
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I believe that the css styling is not recongnizing 'country', and 'website is on the right because that si where it would be if 'country' did not exist.

    Does it make sense?

    qim

  2. #17
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,928
    Thanks
    6
    Thanked 1,041 Times in 1,014 Posts
    Quote Originally Posted by qim View Post
    I'll try <center>
    Now, while <br> is still valid HTML <center> is indeed deprectated and should never ever be used anymore. You can do everything with CSS.

  3. #18
    qim
    qim is offline
    Regular Coder
    Join Date
    Mar 2013
    Location
    Andorra
    Posts
    100
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi sunfighter

    Missouri is a long, long way from here, but when I go there I think I owe a few beers...


    Yes that brings 'website in the middle and is good enough for me.

    The only mystery is why the centre is not centre. and that goes for the section titels, too. have a look:

    http://pintotours.net/coding/form.php

  4. #19
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,715
    Thanks
    25
    Thanked 660 Times in 659 Posts
    @qim, Take a look at this, it contains the css file and I added a few things to it.
    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>FORM</title>
    <style type="text/css">
    html, body {
    margin: 0;
    //font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif ;
    color: #000;
    background: #ccc;
    }
    body { background: #ccc url(../images/woodgrain.jpg); }
    .page, header, footer, .sidebar, .sidebar2, nav {
    -webkit-box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.5);
    box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.5);
    }
    .page {
    width: 1000px;
    margin: 28px auto;
    padding: 8px;
    background: #fff;
    }
    header {
    margin-bottom: 38px;
    background: #BABD98;
    border: 10px solid #BABD98;
    text-align: center;
    }
    .sidebar {
    width: 200px;
    float: left;
    }
    .sidebar2 {
    width: 200px;
    float: right;
    }
    nav, .loginarea {
    background: #D4D3BA;
    margin-bottom: 28px;
    padding: 18px;
    }
    nav ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    }
    .maincontent {
    //overflow: auto;
    background: #BABD98; /*demo only*/
    width: 560px;
    //padding-left: 80px;
    margin: 0 auto;  PUT backface-visibility IN
    }
    .holdBlock{padding: 0 59px;}
    .headies{text-align: center;}
    .fieldBlock
    {
    background-color: #BABD98;
    width:200px;
    float: left;
    padding: 10px;
    }
    .title
    {
    font-weight: bold;
    }
    input
    {
    border: 1px solid gray;
    font-size: 1.1em;
    }
    footer {
    padding: 8px;
    clear: both;
    background: #808000;
    text-align: center;
    }
    footer ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    }
    footer ul li { display: inline;}
    </style>
    
    
    </head>
    <body>
    	
    	
    
    	<div class="page">
    		<header> 
    			<img title="Lisboa" alt="Lisboa" src="images/Lisboa.jpg">
    			<h1>Registration Page</h1>
    		</header>
    		<div class="sidebar">
    			<nav>
    				<ul>
    					<li class="lh">Menu</li>
    					<li><a href="#">Privacy Policy</a></li>
    					<li><a href="#">Link</a></li>
    					<li><a href="#">Link</a></li>
    					<li><a href="#">Link</a></li>
    				</ul>
    			</nav>
    			<nav>
    				<ul>
    					<li><a href="/index.html">Home</a></li>
    					<li><a href="#"></a></li>
    					<li><a href="#"></a></li>
    					<li><a href="#"></a></li>
    				</ul>
    			</nav>
    		<!--end .sidebar--></div>
    		
    		<div class="sidebar2">
    			<nav>
    				<ul>
    					<li class="lh">Menu</li>
    					<li><a href="#">Privacy Policy</a></li>
    					<li><a href="#">Link</a></li>
    					<li><a href="#">Link</a></li>
    					<li><a href="#">Link</a></li>
    				</ul>
    			</nav>
    			<nav>
    				<ul>
    					<li><a href="/index.html">Home</a></li>
    					<li><a href="#"></a></li>
    					<li><a href="#"></a></li>
    					<li><a href="#"></a></li>
    				</ul>
    			</nav>
    		<!--end .sidebar2--></div>
    		
    			
    			<div class="maincontent">
    		<form method="post" action="./database.php">
    		<div class="holdBlock">
    			<div class="fieldBlock">
    			<label for='username'>Username:</label>
    			<input type='text' name='username'>
    			</div>
    			<div class="fieldBlock">
    			<label for='repeat-username'>Repeat username:</label>
    			<input type='text' name='repeat-username'>	
    			</div>
    		</div><br><br><br><br>
    		<div class="holdBlock">			
    			<div class="fieldBlock">
    			<label for='password'>Password:</label><br>
    			<input type='text' name='password'>
    			</div>
    			<div class="fieldBlock">
    			<label for='repeat-password'>Repeat password:</label><br>
    			<input type='text' name='repeat-password'>	
    			</div>
    		</div>
    			
    			<div class="headies">
    				<h2>Agency details</h2>
    			</div>
    
    		<div class="holdBlock">
    			<div class="fieldBlock">
    			<label for='agency-name'>Agency name:</label><br/>
    			<input type='text' name='agency-name'>
    			</div>
    			<div class="fieldBlock">
    			<label for='iata-number'>IATA number:</label><br/>
    			<input type='text' name='iata-number'>	
    			</div>
    		</div>
    	
    		<div class="holdBlock">
    			<div class="fieldBlock">
    			<label for='city'>City:</label><br/>
    			<input type='text' name='city'>
    			</div>
    			<div class="fieldBlock">
    			<label for='Country'>Country</label><br>
    			<select name='country'>
    				<option value="">Please, choose...</option>
    				<option value="Afganistan">Afghanistan</option>
    			</select>
    			</div>
    		</div>
    
    			<div style="padding-left:185px;padding-top:150px;" >
    			<label>Website:</label><br>
    			<input type='text' name='website'>
    			</div>
    
    		<div class="holdBlock">
    			<div class="fieldBlock">
    			<label for='email'>Email:</label><br/>
    			<input type='text' name='email'>
    			</div>
    			<div class="fieldBlock">
    			<label for='repeat-email'>Repeat email:</label><br/>
    			<input type='text' name='repeat-email'>
    			</div>
    		</div>
    		
    			<div class="headies">
    				<h2>Contact details</h2>
    			</div>
    		<div class="holdBlock">
    			<div class="fieldBlock">
    			<label for='person-responsible'>Person responsible:</label><br/>
    			<input type='text' name='person-responsible'>
    			</div>
    			<div class="fieldBlock">
    			<label for='position-in-agency'>Position in agency:</label><br/>
    			<input type='text' name='position-in-agency'>
    			</div>
    		</div>
    		
    		<div class="holdBlock">
    			<div class="fieldBlock">
    			<label for='telephone'>Telephone:</label><br/>
    			<input type='text' name='telephone'/>
    			</div>
    			<div class="fieldBlock">
    			<label for='fax'>Fax:</label><br/>
    			<input type='text' name='fax'/>
    			</div>
    		</div>
    
    		<div class="headies">
    			<input type="submit" value="Submit" name="submit"><input type="reset" value="Reset">
    		</div>
    		<br>
    		</form>
    	</div>
    			
    <div>
    		<footer>
    			<ul>
    				<li><a href="#">Link</a></li>
    				<li><a href="#">Link</a></li>
    				<li><a href="#">Link</a></li>
    				<li><a href="#">Link</a></li>
    			</ul>
    		</footer>
    </div>
    </div>
    </body>
    </html>
    I also cut the selects down. You should add them back if you like to page.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  5. #20
    qim
    qim is offline
    Regular Coder
    Join Date
    Mar 2013
    Location
    Andorra
    Posts
    100
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you very much sunfighter

    It looks great.

    The only thing is the 'country' box that became smaller. Is it possible to reshape this box so that it is equal in size to the orhers?


    I appreciate your help. Thank you again.

    qim
    Last edited by qim; 04-09-2013 at 08:33 AM.

  6. #21
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,715
    Thanks
    25
    Thanked 660 Times in 659 Posts
    Add a width to it.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  7. #22
    qim
    qim is offline
    Regular Coder
    Join Date
    Mar 2013
    Location
    Andorra
    Posts
    100
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi

    Where do I do that? in the css or in the actual html field? I have tried to put <style width="200px"</style> inside the <div class="fieldBlock"> for country but it does nothing. I suppose if I were to do the amendment in the css part it would affect all field boxes... so, I'm stuck!



    I have anothe couple of little things. I hope you have time to look at them:

    There's a couple of things which I can't understand in the new code. I've looked everywhere but can't make it up.

    a) below the image where there is a title "Registration Page" the vertical amount of space has increased and I would like to bring it

    back to what it was.

    b) I've fiddled around trying to add lines before "Agency details" and "Contact details" and possibly reduce by one line below but I

    cannot see how it is done in either the css or the rest of the form.


    Could this have to be with limits you placed on the length of the page?
    Last edited by qim; 04-09-2013 at 04:35 PM.

  8. #23
    qim
    qim is offline
    Regular Coder
    Join Date
    Mar 2013
    Location
    Andorra
    Posts
    100
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi

    Where do I do that? in the css or in the actual html field? I have tried to put <style width="200px"</style> inside the <div class="fieldBlock"> for country but it does nothing. I suppose if I were to do the amendment in the css part it would affect all field boxes... so, I'm stuck!


    If you have a chance could you also look at my previous post, please?

  9. #24
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,715
    Thanks
    25
    Thanked 660 Times in 659 Posts
    Qim at this point I say stop. And go read and learn css. Good starter site is http://www.w3schools.com/cssref/default.asp concentrate on css3.

    Why? All your questions are because you do not know css.
    Where do I do that? in the css or in the actual html field?
    It makes no difference as long as you do it.

    below the image where there is a title "Registration Page" the vertical amount of space has increased and I would like to bring it

    back to what it was.
    Don't know where it was but added to css this
    Code:
    h1{
    	margin-top: 2px;	
    }
    h2{
    	margin-bottom: 2px;
    }
    might give you a starting point.

    All your html elements are there. You now have to style them with css.
    Oh the text is the wrong size....Style it.
    The text in the third line is the wrong color....Style it.
    See what I'm getting at?

    Good luck in your studies.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  10. #25
    qim
    qim is offline
    Regular Coder
    Join Date
    Mar 2013
    Location
    Andorra
    Posts
    100
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I understand. Thank you sunfighter for all your help

    qim
    Last edited by qim; 04-09-2013 at 08:47 PM.


 
Page 2 of 2 FirstFirst 12

Posting Permissions

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