Div design

HTML & CSS
1

I am using <div> . Here is my code in dreamweaver


<div style="width:250px;height=218;float:left">
     <p>User Name 
       <label>
       <input type="text" name="textfield2">
       </label>
     </p>
     <p>Password 
       <label>
       <input type="text" name="textfield3">
       </label>
     </p>
     <p>Login Sign Up </p>
    </div>

I see this html in dreamweaver design view

But I want a view perfectly alligned like this ….

I’m not sure what are the changes I need to do in my div code. Could you please let me know what I have to do to get that kind of view.

2

One way:

<!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>Form</title>

  <style type="text/css">

    fieldset {
      display:inline;
    }
    
    label {
      float:left;
      width:5em;
    }
    
    input {
      display:block;
    }
    
    span {
      float:right;
    }

  </style>

</head><body>

  <form name="name" action="action" method="post">
    <fieldset>
      <legend>Sign in</legend>
      
         <label>User Name</label>
          <input type="text" name="textfield2">

         <label>Password</label>
          <input type="text" name="textfield3">

       <span>Sign Up</span>
       <span>&nbsp;|&nbsp;</span>
       <span>Login</span>
       
    </fieldset>
  </form>

</body></html>

Though you may bump into some fieldset bugs :slight_smile:

3

what this doing ???
input {
display:block;
}

fields are always visible …why do we then display:block; here?

how thr round borderis coming ?

4

If you are not opposed to using some extra <span>s and <div>s, you can use this:

<!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>Form</title>

  <style type="text/css">

    fieldset {
      display:inline;
    }
    
    fieldset div {
      margin-bottom:0.2em;
    }
    
    label span {
     display:inline-block;
      width:5em;
    }
    
    .actions {
      text-align: right;
    }
    
    .actions span {
      margin-left:1em;
    }

  </style>

</head><body>

  <form name="name" action="action" method="post">
    <fieldset>
      <legend>Sign in</legend>
      
        <div>
          <label>
              <span>User Name</span>
              <input type="text" name="textfield2">
          </label>
        </div>

        <div>
          <label>
            <span>Password</span>
            <input type="text" name="textfield3">
          </label>
        </div>
        
        <div class="actions">
          <span>Login</span>
          <span>Sign Up</span>
        </div>
       
    </fieldset>
  </form>

</body></html>

Works in IE5-8 and modern FF, CH, OP, SAF.

5

fields are always visible …why do we then display:block; here?

Because the <input> is an inline element… which means its rendered in the same way ( not to be confused with style) as <i> , or <span>, <em> , <strong>. Display block makes it be rendered in the same way as a P, or DIV.

the display property actually changes the way an element is rendered, not just toggles between rendering and not rendering it.

6

The specs say that form controls are inline:

<!ENTITY % inline “#PCDATA | %fontstyle; | %phrase; | %special; | %formctrl;”>

So, you use CSS to change their way to display, from inline, to block. A block level element will extend to its parent full width.

See above.

Huh? This is unexpected… But I’m sure that, if needed, a div for rounded corners can find its place in there somewhere. You don’t start building a form assuming the round corners are the main goal, right? :wink: Because a form is what you have there, rather than a div… Wrong thread title, right?

EDIT: Sorry dresden_phoenix, it seems we were in tune :slight_smile:

7

I’m trying to understand your code. Here are my queries

Query1:

In your code, you have this …

.actions span

Does this mean , find a class action and then find a span under this action and apply the style for it.

Query2:

fieldset {
display:inline;
}

do we really need this ? there is only one fieldset … inline does not make sense here . inline to whom ?

8

It means that there has to be at least one html element having “actions” as a value for its class attribute, and in it, there has to be at least one <span> html element as a target for this CSS selector.

In our case, there is a div having the class “actions”, with two action <span>s in it: “Login” and “Sign Up”.

        <div class="actions">
          <span>Login</span>
          <span>Sign Up</span>
        </div>

Inline in regards with its parent, <form> (which, I might add, you failed to code in, a big mistake!). Making it inline is a CSS play to get the desired result. You can easily see the difference by commenting the declaration:

/* 
fieldset {
      display:inline;
    }
*/

You’ll notice that, since fieldset is a block level element, it will extend by default to a full parent width, form, which is also a block level element. By making it inline, it will only extend to contain its child elements.

In our case, inline and block are two notions from html specification:

<!–
HTML has two basic content models:

    %inline;     character level elements and text strings
    %block;      block-like elements e.g. paragraphs and lists

–>

9

Thanks for the comments.

My replies in blue in the above.

One more doubt in your code, when we write …

label span {
display:inline-block; // what is this ? its neither inline nor block …whats inline-block ? tricky
width:5em;
}

10

You’re welcome :slight_smile:

Actually, you are not setting a width in CSS, you’re altering a width the element already has. Every element has a box model, and every box model has a width. Some can be changed (block) while some can’t (inline).

form, being a block level element, has a 100% width, by default. Meaning it will extend fully inside its parent.

Add this inside <style> element in the <head>:


    form {
      border: 1px solid black;
    }

Actually it’s both inline AND block. inline because its box model permits other element’s box model to be on the same line with it, and block because you can set its width.

11

Actually it’s both inline AND block. inline because its box model permits other element’s box model to be on the same line with it, and block because you can set its width.

Not understood. Its more theoretical .

Here is what I understand…

inline = in a line
block = not in a line and go the next line.

inline-block = confusing …where it will go ?

12

It’s a CSS fact :slight_smile:

Inline-block element: it will try to stay on the same line, if there is space for its box model.

Like: inline element.
Unlike: inline element, you can alter its box model dimensions. Width in our case. Like: block element.

13

Two block elements can’t stay on the same line.
Two inline elements can. So can two inline-block elements. They will try to stay on the same line, if there is space for their box model.

One thing, related to our discussion, inline element can’t have: they can’t have width set.
One thing, related to our discussion, block element can have: they can have their width set.
An inline-block will get the best of the two worlds: it can stay on the same line with other inline or inline-block elements and you can set a different width for it if you want.

If I want to set a width for my <fieldset>, I can. But I don’t want a fixed layout. The same thing like I, a customer, don’t want to get a TV in a box that’s ten times wider than it should be.

Setting a fixed width to my <fieldset> to make it smaller is not an option. I would like my <fieldset> to be fluid. The same thing like I, a manufacturer, don’t want to be restricted to TV screen sizes based on how wide the wrapping box was made.

And so, I change the <fieldset> display properties from block to inline-block. That way, I can have a box that can contain other boxes (block level element), box that will have a variable width based on the elements it has in it (inline).

That means I can have different TV sets in boxes having a width based on their screen size. Those boxes can be also put one next to another on a shelf, I don’t have to reserve an entire shelf for just one TV set box.

That is our case.

There is one more thing I can do: if I want to, I can set a width for a inline-block, one thing I can’t do for a inline element.

Meaning a can put a smaller TV set in a bigger box, not just in a box that fits.