Forum:

HTML Pages with CSS and JavaScript

Place a form in the center

Angus Ferguson

Ranch Hand

Posts: 1402

I like...

posted 8 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Hi,

I am trying to put a form in the center. For that purpose I am using a CSS with this piece of code

It doesnt works, when I put to float the value right or left it get it but no with center.

And to put the text in bold I have used this piece of code but it doesnt works

Any idea, please?

Regards, Isaac

Tim Cooke

Sheriff

Posts: 5555

326

I like...

posted 8 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

There is no 'float: center'.

Try 'margin: auto' to get something centred on a page.

Tim Driven Development | Test until the fear goes away

Java 8 (verified skill)
Skill verified by Tim Cooke

JUnit 5 (verified skill)
Skill verified by Campbell Ritchie

Bear Bibeault

Sheriff

Posts: 67747

173

I like...

posted 8 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

To be slightly more precise, set the left and right margins to auto. The top and bottom margins can be set independently.

[Asking smart questions] [About Bear] [Books by Bear]

HTML 5 (verified skill)
Skill verified by Jeanne Boyarsky

CSS 3 (verified skill)
Skill verified by Jeanne Boyarsky

JavaScript (verified skill)
Skill verified by Jeanne Boyarsky

Angus Ferguson

Ranch Hand

Posts: 1402

I like...

posted 8 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I have set

the effect doesnt change

Any more idea,please?

Tim Cooke

Sheriff

Posts: 5555

326

I like...

posted 8 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

The only reason why an element styled with left and right margin as 'auto' will not centre is if the element being styled is the same width as its containing element. Use your browser developer plugins, such as FireBug for Firefox or the built in one for Chrome, to inspect your element widths.

Tim Driven Development | Test until the fear goes away

Angus Ferguson

Ranch Hand

Posts: 1402

I like...

posted 8 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Button: width: 264.375px
Form (page): width: 1314px;

This is the code in the index.jsp

<html>
    <head>
        <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8“>
        <link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="cssLeanRoute.css">
        <title>LeanRoute Stress Test Analyzer</title>
    </head>
    <body >
        <H1 class="h1">LeanRoute Test Performance</H1>

<fieldset>
                <legend>Which the max loading time for your users?</legend>
                <input type="checkbox" name="loadTime" value="1" />1 sec <br />
                <input type="checkbox" name="loadTime" value="2" />2 sec<br />
                <input type="checkbox" name="loadTime" value="3" />3 sec
         
            </fieldset>

<fieldset>
                <legend>Max number of users expected?</legend>
                <input type="checkbox" name="loadUsers" value="500" />500 Users<br/>
                <input type="checkbox" name="loadUsers" value="1000" />1000 Users<br/>
                <input type="checkbox" name="loadUsers" value="1500" />1500 Users<br/> 
                <input type="checkbox" name="loadUsers" value="2000" />2000 Users<br/>    
            </fieldset>

<fieldset>
                <legend>Are not your requirements there? Please, write down what you need!</legend>

To:<input type="text" name="to"/><br/>  
                Subject:<input type="text" name="subject"><br/>

<div class="text"> 
                    <label for="comment">Comment</label> 
                    <textarea rows="5" cols="50" name="comment" ></textarea> 
                </div>

</body>
                </html>

Bear Bibeault

Sheriff

Posts: 67747

173

I like...

posted 8 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

You need to set a specific width.

[Asking smart questions] [About Bear] [Books by Bear]

Angus Ferguson

Ranch Hand

Posts: 1402

I like...

posted 8 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I put a specific width for the button and for the form. At the moment I dont observe any diference. Am I missing something?

<body >
        <H1 class="h1">LeanRoute Test Performance</H1>

<fieldset>
                <legend>Are not your requirements there? Please, write down what you need!</legend>

To:<input type="text" name="to"/><br/>  
                Subject:<input type="text" name="subject"><br/>

<div class="text"> 
                    <label for="comment">Comment</label> 
                    <textarea rows="5" cols="50" name="comment" ></textarea> 
                </div>

</body>

Any more idea, please?

Bear Bibeault

Sheriff

Posts: 67747

173

I like...

posted 8 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Use CSS, not the deprecated width attribute. Show us your new CSS.

[Asking smart questions] [About Bear] [Books by Bear]

Angus Ferguson

Ranch Hand

Posts: 1402

I like...

posted 8 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I delete the width form the .jsp and I placed it in the CSS I also attach the printScreen

.body1
{
    padding: 50px;
    background-color: blue;
    color: #FFF;
    width:100%;

}

.animate
{
    transition: all 0.1s;
    -webkit-transition: all 0.1s;
}

.action-button
{
    position: relative;
    padding: 10px 40px;
    margin: 0px 10px 10px 0px;
    float: middle;
    border-radius: 10px;
    font-family: 'Pacifico', cursive;
    font-size: 25px;
    color: #FFF;
    text-decoration: none;	
    margin-left: auto;
    margin-right: auto;
    width:400px;

}
.blue
{
    background-color: #3498DB;
    border-bottom: 5px solid #2980B9;
    text-shadow: 0px -2px #2980B9;

}

.red
{
    background-color: #E74C3C;
    border-bottom: 5px solid #BD3E31;
    text-shadow: 0px -2px #BD3E31;
}

.green
{
    background-color: #82BF56;
    border-bottom: 5px solid #669644;
    text-shadow: 0px -2px #669644;
}

.yellow
{
    background-color: #F2CF66;
    border-bottom: 5px solid #D1B358;
    text-shadow: 0px -2px #D1B358;
}

.action-button:active
{
    transform: translate(0px,5px);
    -webkit-transform: translate(0px,5px);
    border-bottom: 1px solid;
    margin-left: auto;
    margin-right: auto;
}

.h1 {
    color: #3498DB;
    margin-left: auto;
    margin-right: auto;
}

.form{

color:black;
    background-color: whitesmoke;
    width:1000px;
    border-top: 100px solid;
}

.legends{

font-style: bold;

}

Any idea, please?

Filename: alignImages.tiff

File size: 80 Kbytes

Download Attachment

Bear Bibeault

Sheriff

Posts: 67747

173

I like...

posted 8 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Which of this rules is being applied to the form?

And when you say "center the form", I assume you mean the block containing the form, not the form contents, right?

[Asking smart questions] [About Bear] [Books by Bear]