locked
Positioning centered title RRS feed

  • Question

  • User-1793215261 posted

    Hello

    I have a Web page here with a top-centered title (CONTACT US) and a contact form: http://www.dimadayoub.net/frina/Contact.aspx

    The centered title is so far up that it is not visible online and, locally, the form is invisible unless I scroll to the bottom. I an happy with the horizontal layout with the form in the bottom-left, but how can I bring the centered title and the form closer together vertically without having to scroll from top to bottom, please? That is, I don't really want the centered title or form to move when the scrollbars are moved.

     header {
            background-size: cover;
            height: 100vh;
        }
    
        .title {
      ;
      top:50px;
      left: 50%;
      transform: translate(-50%, -50%);
      color: white;
      text-align: center;
    }
    
        h1 {
      text-transform: uppercase;
      margin: 0;
      font-size: 3rem;
      white-space: nowrap;
    }
    
    p {
      margin: 0;
      font-size: 1.3rem;
    }
    
    body
    {
    	background:url(images/bg.jpg) no-repeat center center fixed;
    	background-color:darkgrey;
    	background-size:cover;
            font-family: Candara, 'Segoe UI', Tahoma, sans-serif;
    }
    
     #form_container {
        ;
        margin-bottom:100px;
        margin-left:100px;
    }
    
    .textbox
    {
        background-color:transparent;
    	border:1px solid navy;
    	color:#696666;
    	font-family:Candara, 'Segoe UI', Tahoma, sans-serif;
    	font-size:14px;
    	font-weight:400;
    	height:35px;
    	margin-left:10px;
            margin-top:10px;
    	padding-left:20px;
    	width:20%;
    }
    
    .astext
    {
    	background:none;
    	border:none;
    	color:navy;
    	font:Candara, Segoe, Serif;
    	font-weight:400;
    	margin-left:105px;
    	padding:15px;
    }
    
    HTML:
    
     <header>
                
      <div class="title">
        <h1>Contact Us</h1>
        <p>Whatever goes here</p>
      </div>
    </header>
    
    

    Thanks.

    Wednesday, December 13, 2017 8:13 PM

Answers

  • User2103319870 posted

    I have used most of your code but I cannot use it all (you do not use 'form' or the <asp:TextBox>) and it began to cause errors in my 'code behind' file. However, the page looks better than it did

    I have used that to show an example, because JSFiddle work with only html controls. however the code which I posted above will work with asp.net controls as well.

    I have my <form> and <asp:TextBox> controls still in place. 

    <form id="footer" runat="server" Cssclass="footerdiv" method="post">

    Do not apply the footer style to form tag. Apply it to a div tag.

    However, the form is way down the screen and is still not fixed although I have used:

    If you are concerned about the page is having scroll bar then you need reduce the header height like below

    header {
                background-size: cover;
                height: 100vh;
                background-color:green;
            }

    Updated Markup

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <style>
            header {
                background-size: cover;
                height: 100vh;
                background-color:green;
            }
    
            .title {
                ;
                top: 50px;
                left: 50%;
                transform: translate(-50%, -50%);
                color: white;
                text-align: center;
            }
    
            h1 {
                text-transform: uppercase;
                margin: 0;
                font-size: 3rem;
                white-space: nowrap;
            }
    
    
            /*h2 {
      font-size: 2rem;
    }*/
    
            p {
                margin: 0;
                font-size: 1.3rem;
                font-family: Candara, 'Segoe UI', Tahoma, sans-serif;
            }
    
    
            /*main {
      max-width: 500px;
      margin: 20px auto;
    }*/
    
            body {
                background: url(images/bg.jpg) no-repeat center center fixed;
                background-color: darkgrey;
                background-size: cover;
                font-family: Candara, 'Segoe UI', Tahoma, sans-serif;
            }
    
    
            /*End of CSS for background image*/
    
            .dateStyle {
                color: navy;
                float: left;
                font: normal 14px Candara, 'Segoe UI', serif;
                left: 50px;
                ;
                top: 15px;
            }
    
            #form_container {
                ;
                margin-bottom: 100px;
                margin-left: 100px;
            }
    
            .textbox {
                background-color: transparent;
                border: 1px solid navy;
                color: #696666;
                font-family: Candara, 'Segoe UI', Tahoma, sans-serif;
                font-size: 14px;
                font-weight: 400;
                height: 35px;
                margin-left: 10px;
                margin-top: 10px;
                padding-left: 20px;
                width: 20%;
            }
    
            .astext:active {
                ;
                margin-top: 20px;
                background: none;
                border: none;
                color: navy;
                font: Candara, Segoe, Serif;
                font-weight: 400;
                margin-left: 105px;
                padding: 20px;
                /*.astext:active {
      ;
      top: 2px;*/
            }
    
            .footerdiv {
                ;
                bottom: 0;
                width: 100%;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <header>
                <div class="title">
                    <h1>Contact Us</h1>
                    <p>Whatever goes here</p>
                </div>
            </header>
            <div id="footer" class="footerdiv">
                <asp:TextBox ID="user_name" runat="server" CssClass="textbox" placeholder="Name"></asp:TextBox>
                <asp:TextBox ID="user_email" CssClass="textbox" runat="server" placeholder="Email Address"></asp:TextBox>
                <p>
                    <asp:TextBox ID="user_subject" CssClass="textbox" runat="server" placeholder="Subject"></asp:TextBox>
                </p>
                <p>
                    <asp:TextBox ID="user_message" runat="server" TextMode="MultiLine" Rows="2" Columns="20" placeholder="Message"></asp:TextBox>
                </p>
                <p>
                    <asp:Button ID="SendEmail" runat="server" Text="[Send]" class="astext" />
                </p>
            </div>
        </form>
    
    
    </body>
    </html>
    

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, December 14, 2017 3:43 PM

All replies

  • User2103319870 posted

    but how can I bring the centered title and the form closer together vertically without having to scroll from top to bottom

    You can set the header and footer as fixed. Try with below code

    First set the header to be fixed by changing the css

      .title {
                ;
                top: 50px;
                left: 50%;
                transform: translate(-50%, -50%);
                color: white;
                text-align: center;
            }

    Next wrap your footer textbox controls inside div and then set the footer fixed using css

     <div id="footer" class="footerdiv">
            <input name="user_name" type="text" id="user_name" class="textbox" placeholder="Name" required="required" />
            <input name="user_email" type="text" id="user_email" class="textbox" placeholder="Email Address" required="required" />
            <p>
                <input name="user_subject" type="text" id="user_subject" class="textbox" placeholder="Subject" required="required" />
            </p>
            <p>
                <textarea name="user_message" rows="2" cols="20" id="user_message" class="textbox" placeholder="Message" required="required">
                </textarea>
            </p>
            <p>
                <input type="submit" name="SendEmail" value="[Send]" id="SendEmail" class="astext" />
            </p>
        </div>

    Footer css

      .footerdiv {
                ;
                bottom: 0;
                width: 100%;
            }

    Complete Code

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <style>
            header {
                background-size: cover;
                height: 150vh;
            }
    
            .title {
                ;
                top: 50px;
                left: 50%;
                transform: translate(-50%, -50%);
                color: white;
                text-align: center;
            }
    
            h1 {
                text-transform: uppercase;
                margin: 0;
                font-size: 3rem;
                white-space: nowrap;
            }
    
    
            /*h2 {
      font-size: 2rem;
    }*/
    
            p {
                margin: 0;
                font-size: 1.3rem;
                font-family: Candara, 'Segoe UI', Tahoma, sans-serif;
            }
    
    
            /*main {
      max-width: 500px;
      margin: 20px auto;
    }*/
    
            body {
                background: url(images/bg.jpg) no-repeat center center fixed;
                background-color: darkgrey;
                background-size: cover;
                font-family: Candara, 'Segoe UI', Tahoma, sans-serif;
            }
    
    
            /*End of CSS for background image*/
    
            .dateStyle {
                color: navy;
                float: left;
                font: normal 14px Candara, 'Segoe UI', serif;
                left: 50px;
                ;
                top: 15px;
            }
    
            #form_container {
                ;
                margin-bottom: 100px;
                margin-left: 100px;
            }
    
            .textbox {
                background-color: transparent;
                border: 1px solid navy;
                color: #696666;
                font-family: Candara, 'Segoe UI', Tahoma, sans-serif;
                font-size: 14px;
                font-weight: 400;
                height: 35px;
                margin-left: 10px;
                margin-top: 10px;
                padding-left: 20px;
                width: 20%;
            }
    
            .astext:active {
                ;
                margin-top: 20px;
                background: none;
                border: none;
                color: navy;
                font: Candara, Segoe, Serif;
                font-weight: 400;
                margin-left: 105px;
                padding: 20px;
                /*.astext:active {
      ;
      top: 2px;*/
            }
    
            .footerdiv {
                ;
                bottom: 0;
                width: 100%;
            }
        </style>
    </head>
    <body>
        <header>
            <div class="title">
                <h1>Contact Us</h1>
                <p>Whatever goes here</p>
            </div>
        </header>
        <div id="footer" class="footerdiv">
            <input name="user_name" type="text" id="user_name" class="textbox" placeholder="Name" required="required" />
            <input name="user_email" type="text" id="user_email" class="textbox" placeholder="Email Address" required="required" />
            <p>
                <input name="user_subject" type="text" id="user_subject" class="textbox" placeholder="Subject" required="required" />
            </p>
            <p>
                <textarea name="user_message" rows="2" cols="20" id="user_message" class="textbox" placeholder="Message" required="required">
                </textarea>
            </p>
            <p>
                <input type="submit" name="SendEmail" value="[Send]" id="SendEmail" class="astext" />
            </p>
        </div>
    </body>
    </html>

    Thursday, December 14, 2017 1:29 AM
  • User-1838255255 posted

    Hi Bluenose,

    According to your description and needs, i make a modify based on your code, please check:

    Sample Code:

    <head>
        <title></title>
        <meta charset="utf-8" />
        <style>
            header {
                background-size: cover;
                height: 100vh;
            }
    
            .title {
                ;
                top: 50px;
                left: 50%;
                transform: translate(-50%, -50%);
                color: white;
                text-align: center;
            }
    
            h1 {
                text-transform: uppercase;
                margin: 0;
                font-size: 3rem;
                white-space: nowrap;
            }
    
            p {
                margin: 0;
                font-size: 1.3rem;
            }
    
            body {
                background: url(images/bg.jpg) no-repeat center center;
                background-color: darkgrey;
                background-size: cover;
                font-family: Candara, 'Segoe UI', Tahoma, sans-serif;
            }
    
            .MidBody {
                width: 500px;
                height: 200px;
                ;
                top:400px;
                left:100px;
            }
    
            #box {
            margin-top:1500px;
            }
        </style>
    </head>
    <body>
        <header>
            <div class="title">
                <h1>Contact Us</h1>
                <p>Whatever goes here</p>
            </div>
        </header>
        <main>
            <div class="MidBody">
                <input id="Text1" type="text" placeholder="UserName" />
                <input id="Text2" type="text" placeholder="Email" /><br />
                <input id="Text3" type="text" placeholder="Address" />
                <input id="Text4" type="text" placeholder="Other" /><br />
                <input id="Button1" type="button" value="Submit" />
            </div>
        </main>
        <div id="box">
            <p>Footer</p>
        </div>
    </body>

    Best Regards,

    Eric Du 

    Thursday, December 14, 2017 3:27 AM
  • User-1793215261 posted

    Hello A2

    Many thanks for your helpful reply.

    I have used most of your code but I cannot use it all (you do not use 'form' or the <asp:TextBox>) and it began to cause errors in my 'code behind' file. However, the page looks better than it did. This is what I have now: http://www.dimadayoub.net/frina/Contact.aspx

    Both the date and 'CONTACT US' are fixed which is nice to see and I have my <form> and <asp:TextBox> controls still in place. However, the form is way down the screen and is still not fixed although I have used:

    <form id="footer" runat="server" Cssclass="footerdiv" method="post">

    This is the CSS code I have:

    header
    {
    	background-size:cover;
    	height:150vh;
    }
    
    .title
    {
    	color:#FFF;
    	left:50%;
    	;
    	text-align:center;
    	top:50px;
    	transform:translate(-50%,-50%);
    }
    
    h1
    {
    	font-size:3rem;
    	margin:0;
    	text-transform:uppercase;
    	white-space:nowrap;
    }
    
    p
    {
    	font-family:Candara, 'Segoe UI', Tahoma, sans-serif;
    	font-size:1.3rem;
    	margin:0;
    }
    
    body
    {
    	background:url(images/bg.jpg) no-repeat center center fixed;
    	background-color:darkgrey;
    	background-size:cover;
    	font-family:Candara, 'Segoe UI', Tahoma, sans-serif;
    }
    
    .dateStyle
    {
    	color:navy;
    	float:left;
    	font:normal 14px Candara, 'Segoe UI', serif;
    	left:50px;
    	;
    	top:15px;
    }
    
    #form_container
    {
    	margin-bottom:100px;
    	margin-left:100px;
    	;
    }
    
    .textbox
    {
    	background-color:transparent;
    	border:1px solid navy;
    	color:#696666;
    	font-family:Candara, 'Segoe UI', Tahoma, sans-serif;
    	font-size:14px;
    	font-weight:400;
    	height:35px;
    	margin-left:10px;
    	margin-top:10px;
    	padding-left:20px;
    	width:20%;
    }
    
    .astext:active
    {
    	background:none;
    	border:none;
    	color:navy;
    	font:Candara, Segoe, Serif;
    	font-weight:400;
    	margin-left:105px;
    	margin-top:20px;
    	padding:20px;
    	;
    }
    
    .footerdiv
    {
    	bottom:0;
    	;
    	width:100%;
    }
     

    What would I need to amend in that CSS to pull the form up and keep it in position without compromising <form> or <asp:TextBox>?

    Thanks again.

    Thursday, December 14, 2017 9:37 AM
  • User2103319870 posted

    I have used most of your code but I cannot use it all (you do not use 'form' or the <asp:TextBox>) and it began to cause errors in my 'code behind' file. However, the page looks better than it did

    I have used that to show an example, because JSFiddle work with only html controls. however the code which I posted above will work with asp.net controls as well.

    I have my <form> and <asp:TextBox> controls still in place. 

    <form id="footer" runat="server" Cssclass="footerdiv" method="post">

    Do not apply the footer style to form tag. Apply it to a div tag.

    However, the form is way down the screen and is still not fixed although I have used:

    If you are concerned about the page is having scroll bar then you need reduce the header height like below

    header {
                background-size: cover;
                height: 100vh;
                background-color:green;
            }

    Updated Markup

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <style>
            header {
                background-size: cover;
                height: 100vh;
                background-color:green;
            }
    
            .title {
                ;
                top: 50px;
                left: 50%;
                transform: translate(-50%, -50%);
                color: white;
                text-align: center;
            }
    
            h1 {
                text-transform: uppercase;
                margin: 0;
                font-size: 3rem;
                white-space: nowrap;
            }
    
    
            /*h2 {
      font-size: 2rem;
    }*/
    
            p {
                margin: 0;
                font-size: 1.3rem;
                font-family: Candara, 'Segoe UI', Tahoma, sans-serif;
            }
    
    
            /*main {
      max-width: 500px;
      margin: 20px auto;
    }*/
    
            body {
                background: url(images/bg.jpg) no-repeat center center fixed;
                background-color: darkgrey;
                background-size: cover;
                font-family: Candara, 'Segoe UI', Tahoma, sans-serif;
            }
    
    
            /*End of CSS for background image*/
    
            .dateStyle {
                color: navy;
                float: left;
                font: normal 14px Candara, 'Segoe UI', serif;
                left: 50px;
                ;
                top: 15px;
            }
    
            #form_container {
                ;
                margin-bottom: 100px;
                margin-left: 100px;
            }
    
            .textbox {
                background-color: transparent;
                border: 1px solid navy;
                color: #696666;
                font-family: Candara, 'Segoe UI', Tahoma, sans-serif;
                font-size: 14px;
                font-weight: 400;
                height: 35px;
                margin-left: 10px;
                margin-top: 10px;
                padding-left: 20px;
                width: 20%;
            }
    
            .astext:active {
                ;
                margin-top: 20px;
                background: none;
                border: none;
                color: navy;
                font: Candara, Segoe, Serif;
                font-weight: 400;
                margin-left: 105px;
                padding: 20px;
                /*.astext:active {
      ;
      top: 2px;*/
            }
    
            .footerdiv {
                ;
                bottom: 0;
                width: 100%;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <header>
                <div class="title">
                    <h1>Contact Us</h1>
                    <p>Whatever goes here</p>
                </div>
            </header>
            <div id="footer" class="footerdiv">
                <asp:TextBox ID="user_name" runat="server" CssClass="textbox" placeholder="Name"></asp:TextBox>
                <asp:TextBox ID="user_email" CssClass="textbox" runat="server" placeholder="Email Address"></asp:TextBox>
                <p>
                    <asp:TextBox ID="user_subject" CssClass="textbox" runat="server" placeholder="Subject"></asp:TextBox>
                </p>
                <p>
                    <asp:TextBox ID="user_message" runat="server" TextMode="MultiLine" Rows="2" Columns="20" placeholder="Message"></asp:TextBox>
                </p>
                <p>
                    <asp:Button ID="SendEmail" runat="server" Text="[Send]" class="astext" />
                </p>
            </div>
        </form>
    
    
    </body>
    </html>
    

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, December 14, 2017 3:43 PM
  • User-1793215261 posted

    It looks a lot better: http://www.dimadayoub.net/frina/Contact.aspx

    Very many thanks to you (again).

    Thursday, December 14, 2017 7:49 PM
  • User-1793215261 posted

    Hello Eric

    Many thanks for your reply.

    I had already started amendments that A2 was working on, but I value your contribution.

    Thanks again.

    Thursday, December 14, 2017 7:51 PM