New/Returning Customer Page

HTML & CSS
1

I would like to make a New/Returning Customer page like the one at this URL…

https://www.zazzle.com/lgn/signin

From a CSS standpoint, what would be the best way to make the two content boxes/sections (including the contents)?

TomTees

2

Anyone at all?

TomTees

3

Yes

And that “parent container” is created using DIVs?

yes

Is that gridShell?

yes that is the container

So you create those using DIVs again?

Can you explain, I don’t understand your question.

Why do you have to “float” them?

Think of floating like align=‘left/right’, once you say a width, you can push it to the right/left. You use margin:auto to center.

Is the red a background?

Background has 6 different properties, background, background-color, etc, he used background vs background-color as a shortcut (http://www.w3schools.com/css/css_reference.asp). Colors also you can call some by name (http://www.w3schools.com/css/css_colornames.asp)

4

using the float property gives you very good control over the layout. You can position content very exactly.

How do you get a gap in between the boxes?

The gap is created here:


.gridCell  {
float:left;
width:420px;
margin:0 18px 18px 0;
overflow:hidden;
background:lime
}

Could I use absolute or relative positioning?

The positioning was done in the above class. and some adjustments in the class after that:


.styleBox {
height:250px;
margin:2px;
padding:16px;
background:#F4F4F4;
}
5

Thanks for the response, but I’m still learning CSS, so that sorta went over my head! (Maybe we can try English first?)

So the entire webpage uses a Fixed-Width, Auto-Margins approach?

And that “parent container” is created using DIVs?

Is that gridShell?

Then set widths on the child floats and adjust them with margins as needed.

So you create those using DIVs again?

Why do you have to “float” them?

Here is a reduced example of the code from that link -

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test Page</title>

<style type="text/css">
.gridShell {
width:880px;
margin:auto;
overflow:hidden;
background:red
}
.gridCell  {
float:left;
width:420px;
margin:0 18px 18px 0;
overflow:hidden;
background:lime
}
.styleBox {
height:250px;
margin:2px;
padding:16px;
background:#F4F4F4;
}
</style>

</head>
<body>

    <div class="gridShell">
        <div class="gridCell">
            <div class="styleBox">
                <h2>I Am New To Zazzle</h2>
                <p>Form Stuff Here</p>
            </div>
        </div>
        <div class="gridCell">
            <div class="styleBox">
                <h2>I Have Used Zazzle Before</h2>
                <p>Form Stuff Here</p>
            </div>
        </div>
    </div>


</body>
</html>

Is the red a background?

How do you get a gap in between the boxes?

Could I use absolute or relative positioning?

I’m re-reading my SitePoint book on CSS over the next few days, but right now all of this has become foreign to me again?! :blush:

Thanks,

TomTees

6

Hi Tom,
You will want to do that basically the same way they did.

There are two floats nested within a parent container with a fixed width and centered with auto margins.

Then set widths on the child floats and adjust them with margins as needed.

Here is a reduced example of the code from that link -

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test Page</title>

<style type="text/css">
.gridShell {
width:880px;
margin:auto;
overflow:hidden;
background:red
}
.gridCell  {
float:left;
width:420px;
margin:0 18px 18px 0;
overflow:hidden;
background:lime
}
.styleBox {
height:250px;
margin:2px;
padding:16px;
background:#F4F4F4;
}
</style>

</head>
<body>

    <div class="gridShell">
        <div class="gridCell">
            <div class="styleBox">
                <h2>I Am New To Zazzle</h2>
                <p>Form Stuff Here</p>
            </div>
        </div>
        <div class="gridCell">
            <div class="styleBox">
                <h2>I Have Used Zazzle Before</h2>
                <p>Form Stuff Here</p>
            </div>
        </div>
    </div>


</body>
</html>