5 replies [Last post]
caverman
caverman's picture
Offline
newbie
Last seen: 9 years 33 weeks ago
Timezone: GMT-6
Joined: 2012-11-12
Posts: 3
Points: 4

Noobie question here,

I'm trying to learn CSS to get away from table tags and just getting started. I'm trying to follow along with a friends CSS file to hopefully get a better understanding. One of the first things I'm trying to do is make a box around some information but have that box only be as wide as the text....not the whole width of the browser. Then I would like to center that box.

My first issue is trying to find what is need to have the box only be as wide and need based on the text or controls inside the div tag.

I've attached a screen shot. The bottom section is my friends that I'm trying to follow along with. I'm look for that box but for it to only be as wide and the mark I put on the image...then to have that centered on the page.

The top section is my attempt. Here is my code.

    <div class="ContentContainerOverAll">
        <div class="ContentContainer2">
                <uc1:StatusSummary ID="StatusSummary1" runat="server" />
 
            <div class="ContentFormArea2">
 
                <div class="ContentTitle2">
                    Search Users
                </div>  
 
                Here is some text
            </div>
        </div>        
    </div>

Here is the CSS. I think ContentContainer2 is the section of CSS that needs to be altered. I made the border red so it's easy to see for testing.

.ContentContainerOverAll{ 
    margin-top: 90px; 
    padding: 5px; 
    border: 1px solid black; 
}
 
.ContentContainer2 {
  border: 1px solid red;
  text-align: left;    
  margin-left:auto;
  margin-right:auto;
}
 
.ContentFormArea2
{
    padding: 5px;
}
 
.ContentTitle2 {
  border-bottom: 1px solid #585858;
  font-size: 12pt;
  font-weight: bold;
  color: #FFF;
  text-align: left; 
  background-color:#828282;
  height: 18px;
  padding-left: 3px;
  font-family: Arial, Helvetica, sans-serif;
  vertical-align: middle;
}

//mod edit: Please mark your code with bbcode tags, [code][/code], or use the "code" button above the textarea. Fixed ~gt

AttachmentSize
Image1.jpg70.47 KB
gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 18 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Rest of the markup?

Where is the form's markup? There are different ways to do what you want, but the document's structure will usually suggest the optimal solution.

Not using tables for layout does not mean marking everything as a "div" element. It's about marking each element of the document for what it is. The "div" is for grouping, or aggregating, multiple elements as contextual blocks. It has no semantic meaning, and is strictly structural.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

caverman
caverman's picture
Offline
newbie
Last seen: 9 years 33 weeks ago
Timezone: GMT-6
Joined: 2012-11-12
Posts: 3
Points: 4

Do you mean this:

Do you mean this:
<--!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

*had to put the comment code to get it show up.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 18 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Not quite

Yes, the DTD should always be included as that governs the rendering mode of browsers. And no, as your image shows a form with a heading or legend, plus input elements, which your code doesn't.

Please read the edit I added to your original post. Also see http://csscreator.com/node/19116

Here is an example of a well structured form with css that does what you ask.

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" 
	  content="text/html; charset=UTF-8" />
 
    <title>Test Document</title>
 
    <style type="text/css">
 
      div {
        border: 1px dotted lightgray;
        margin: 1px;
        }
 
      #wrapper {
        border: 1px solid black;
        margin: 0 auto;
        width: 90%;
        }
 
      form {
        display: table;
        margin: 0 auto;
        width: 15em;
        }
 
      fieldset {
        padding: 2px;
        }
 
      label {
        display: inline-block;
        text-align: right;
        width: 40%;
        }
 
      form p {
        margin: 5px 0;
        white-space: nowrap;
        }
 
    </style>
  </head>
  <body>
    <div id="wrapper">
      <form method="get"
	    action="#">
	<fieldset>
	  <legend>Search Users</legend>
 	  <p>
	    <label for="uname">
	      User Name:&#160;
	    </label>
	    <input type="text"
		 name="uname"
		 id="uname" />
	  </p>
 
	  <p>
	  <label for="email">
	    E-Mail:&#160;
	  </label>
	  <input type="text"
		 name="email"
		 id="email" />
	  </p>
 
	  <p>
	    <input type="submit"
		   value="Search" />
	    <input type="reset"
		   value="Clear" />
	  </p>
	</fieldset>
      </form>
    </div>
  </body>
</html>

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

caverman
caverman's picture
Offline
newbie
Last seen: 9 years 33 weeks ago
Timezone: GMT-6
Joined: 2012-11-12
Posts: 3
Points: 4

Thanks....I'll give it a try.

Thanks....I'll give it a try. I can see I still have tons of CSS to learn. I didn't know you could put just the name of the class in some tags.

One thing though, is "Legend" supposed to have some CSS properites assigned to it? I'm not seeing anything for Legend.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 18 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

legend

See http://www.w3.org/TR/REC-html40/interact/forms.html#edef-LEGEND

The legend is a special purpose element that is used with the fieldset element.

Quote:

The LEGEND element allows authors to assign a caption to a FIELDSET. The legend improves accessibility when the FIELDSET is rendered non-visually.

There is no need to assign a class to an element that can be addressed by the cascade. In the example above, the selector was "form p". That addresses p elements that are in a form. p elements that are not in a form are not affected.

If you really want to know html and css, read the following again and again.

http://www.w3.org/TR/REC-html40/

http://www.w3.org/TR/CSS2/

Type resource://gre-resources/ into your Firefox address bar to see FF's default stylesheets. Learn what html.css and forms.css do. All browsers have pretty much the same default values.

There's a lot more, including html5 and css3 which are in development, but you really need to know the basics inside and out.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.