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 11 of 11

Thread: Alignment query

  1. #1
    Regular Coder
    Join Date
    Feb 2014
    Posts
    114
    Thanks
    32
    Thanked 0 Times in 0 Posts

    Alignment query

    Hello

    I have the date in the top right-hand corner of a page in the following format: Friday 28th February, and have now added two
    small login fields (username and password) in the top middle of the same page.

    This is my CSS for the two log-in fields:

    Code:
    <style>
    
    form#login {  
      background-color: #000000;  
      color: #FFFFFF;  
      border: 0px solid #999999;  
      font-family: "News Cycle", Verdana, Arial, Helvetica, sans-serif;  
      font-size: 12px;  
      text-align: center;
    margin-top: 10px;  
    }
    
    #login .text {  
      font-family: "News Cycle", Verdana, Arial, Helvetica, sans-serif;  
      font-size: 12px;  
      width: 60px;  
      margin-right: 6px;
      margin-left: 3px;
    }
    
    #login .buttons {  
      font-family: "News Cycle", Verdana, Arial, Helvetica, sans-serif; 
      font-size: 12px;  
      background-color: #333333;  
      color: #FFFFFF;  
      margin-right: 6px;  
        
    }
    
    </style>
    And this is the HTML:

    Code:
    <form name="login" id="login" method="post" action="myTest.asp">
    
    <label>Username: <input type="text" name="UserName" tabindex="1" class="text" /></label>  
    
    <label>WolfID: <input type="password" name="wolfID" tabindex="2" class="text" />
    
    <input type="submit" value="Enter" tabindex="3" class="buttons" /></label>  
    
    </form>
    The CSS for the line the date sits on is this:

    p.show_date {
    font-size: 1em;
    text-align: right;
    margin-right:5px;


    }
    p.show_date sup {
    font-size: 1em;
    margin-right:5px;
    }

    And the HTML:

    Code:
    <p class="show_date">Friday 28<sup>th</sup>February</p>
    What I would like to do is have the two log-in fields sit on the same line as the date, because at the moment it looks
    disjointed (please see screenshot).

    Thank you.
    Attached Thumbnails Attached Thumbnails Alignment query-different_lines.jpg  

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Blue1,
    Floats are what we use to put elements beside other elements. Look at it like this once -

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	margin: 0;
    	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
    	color: #000;
    	background: #fc6;
    }
    #container {
    	width: 800px;
    	margin: 0 auto;
    	padding: 100px 0 300px;/*demo only*/
    	background: #999;
    }
    p.show_date {
    	margin: 0;
    	padding: 0 5px 0 0;
    	float: right;
    	font-size: 1em;
    	text-align: right;
    	color: #ff0;
    }
    p.show_date sup {
    	font-size: 1em;
    	margin-right: 5px;
    }
    form#login {
    	background-color: #000000;
    	color: #FFFFFF;
    	border: 0px solid #999999;
    	font-family: "News Cycle", Verdana, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	text-align: center;
    	margin-top: 10px;
    }
    #login .text {
    	font-family: "News Cycle", Verdana, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	width: 60px;
    	margin-right: 6px;
    	margin-left: 3px;
    }
    #login .buttons {
    	font-family: "News Cycle", Verdana, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	background-color: #333333;
    	color: #FFFFFF;
    	margin-right: 6px;
    }
    
    </style>
    </head>
    <body>
    	<div id="container">
    		<p class="show_date">Friday 28<sup>th</sup>February</p>
    			<form name="login" id="login" method="post" action="myTest.asp">
    				<label>Username:
    					<input type="text" name="UserName" tabindex="1" class="text" />
    				</label>
    				<label>WolfID:
    					<input type="password" name="wolfID" tabindex="2" class="text" />
    					<input type="submit" value="Enter" tabindex="3" class="buttons" />
    				</label>
    			</form>
    	<!--end container--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Regular Coder
    Join Date
    Feb 2014
    Posts
    114
    Thanks
    32
    Thanked 0 Times in 0 Posts
    Hello Excavator

    Thank you.

    You have it slightly different to me - whereas you have 'container', I have 'main' (at least, that's the way I understand it). At the moment, my form (which contains the log-in fields) is styled in the <head> tags, but resides outside the main structural properties of '#main, header, #banner, #menubar, #site_content,' etc

    Should I just try including my form under 'main' the way you have with 'container'?

    The site is here if you don't mind taking a quick look?

    bayingWolf Productions - home

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    It's fine outside of #main, nothing wrong with that. It's fine to have the CSS embedded as well, that's probably the only page you have a login on so there isn't much need for that CSS to be available to multiple pages.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    Blue1 (02-28-2014)

  • #5
    Regular Coder
    Join Date
    Feb 2014
    Posts
    114
    Thanks
    32
    Thanked 0 Times in 0 Posts
    Hello Excavator

    What I am not sure about is why, if I reduce the top-margin here:

    Code:
    form#login {
    	background-color: #000000;
    	color: #FFFFFF;
    	border: 0px solid #999999;
    	font-family: "News Cycle", Verdana, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	text-align: center;
    	margin-top: 10px;
    - or remove it altogether - why won't the two log-in fields (username and password) join the same line as that which holds the date? Why is it not 'pulled upwards'?

    Thanks for your patience!

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    UNcollapsing margins makes your <sup> push p.show_date down. That's why my demo worked (top padding) but your actual code does not. Maybe it's easiest to overcome that with a containing element... look at it this way once, I've highlighted the differences in red -
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	margin: 0;
    	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
    	color: #000;
    	background: #fc6;
    }
    #top {
    	overflow: auto;
    	background: #999;
    }
    p.show_date {
    	margin: 0;
    	padding: 0 5px 0 0;
    	float: right;
    	font-size: 1em;
    	text-align: right;
    	color: #ff0;
    }
    p.show_date sup {
    	font-size: 1em;
    	margin-right: 5px;
    }
    form#login {
    	background-color: #000000;
    	color: #FFFFFF;
    	border: 0px solid #999999;
    	font-family: "News Cycle", Verdana, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	text-align: center;
    	margin-top: 10px;
    }
    #login .text {
    	font-family: "News Cycle", Verdana, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	width: 60px;
    	margin-right: 6px;
    	margin-left: 3px;
    }
    #login .buttons {
    	font-family: "News Cycle", Verdana, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	background-color: #333333;
    	color: #FFFFFF;
    	margin-right: 6px;
    }
    
    </style>
    </head>
    <body>
    	<div id="top">
    		<p class="show_date">Friday 28<sup>th</sup>February</p>
    			<form name="login" id="login" method="post" action="myTest.asp">
    				<label>Username:
    					<input type="text" name="UserName" tabindex="1" class="text" />
    				</label>
    				<label>WolfID:
    					<input type="password" name="wolfID" tabindex="2" class="text" />
    					<input type="submit" value="Enter" tabindex="3" class="buttons" />
    				</label>
    			</form>
    	<!--end top--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    Regular Coder
    Join Date
    Feb 2014
    Posts
    114
    Thanks
    32
    Thanked 0 Times in 0 Posts
    Hello Excavator

    This will just not align:

    Code:
    <style>
    
    #top {
    	overflow: auto;
    	background: #999;
    
    	}
    
    form#login {  
      background-color: #000000;  
      color: #FFFFFF;  
      border: 0px solid #999999;  
      font-family: "News Cycle", Verdana, Arial, Helvetica, sans-serif;  
      font-size: 12px;  
      text-align: center;
    
    }
    
    #login .text {  
      font-family: "News Cycle", Verdana, Arial, Helvetica, sans-serif;  
      font-size: 12px;  
      width: 60px;  
      margin-right: 6px;
      margin-left: 3px;
    }
    
    #login .buttons {  
      font-family: "News Cycle", Verdana, Arial, Helvetica, sans-serif; 
      font-size: 12px;  
      background-color: #333333;  
      color: #FFFFFF;  
      margin-right: 6px;     
    }
    
    </style>
    
    </head>
    
    <body>
    
    <!--#include file ="myDate.asp"-->
    
    <div id="top">
    
    <form name="login" id="login" method="post" action="myTest.asp">
    
    <label>Username: <input type="text" name="UserName" tabindex="1" class="text" /></label>  
    
    <label>WolfID: <input type="password" name="wolfID" tabindex="2" class="text" />
    
    <input type="submit" value="Enter" tabindex="3" class="buttons" /></label>  
    
    </form>
    
    <!--end top--></div>
    It means, I think, that something else is preventing it - I'll go through my external stylesheet just in case.

    Thanks again for all your time.

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by Blue1 View Post
    Hello Excavator

    This will just not align:
    I don't see p.show_date at all this time...
    Do you have a test site up? Might help a little with version control.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #9
    Regular Coder
    Join Date
    Feb 2014
    Posts
    114
    Thanks
    32
    Thanked 0 Times in 0 Posts
    Thanks for getting back to me.

    Yes, it is here: bayingWolf Productions - home

    The CSS that governs the date is in the external stylesheet. I didn't mean it to develop in that way - with some CSS in the <head> tags of the above link (index.asp) and other CSS (including the date, as I say) in an external sheet.

    I will put all in the CSS in the external sheet, probably tomorrow now.

    Thanks for looking at it.

  • #10
    Regular Coder
    Join Date
    Feb 2014
    Posts
    114
    Thanks
    32
    Thanked 0 Times in 0 Posts
    Alignment query-excavator.jpg

    Hello Excavator

    Managed to pull the form up as desired. I have replaced:

    p.show_date {
    font-size: 1em;
    text-align: right;
    margin-right:5px;

    }
    p.show_date sup {
    font-size: 1em;
    margin-right:5px;
    }

    with:

    p.show_date {
    font-size: 1em;
    margin-right: 5px;
    display: inline-block;
    float: right;
    }
    #top {
    padding: 10px 0;
    }

    in the external stylesheet. But how to get rid of those two grey bars (please see attached) - not sure where they have come from.

  • #11
    Regular Coder
    Join Date
    Feb 2014
    Posts
    114
    Thanks
    32
    Thanked 0 Times in 0 Posts
    Hello Excavator

    OK, I think they have gone now. I had a #top in the external sheet and another #top (with not quite the same values) in the <head> tags.

    Sorry for causing so much confusion.

    I'll collate all the CSS into one stylesheet as soon as I can.

    Many thanks for all your great help and patience

    Blue


  •  

    Posting Permissions

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