Web Analytics Made Easy -
StatCounter Create a header above the DIV layer - CodingForum

Announcement

Collapse
No announcement yet.

Create a header above the DIV layer

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Create a header above the DIV layer

    Hi ,

    I would like to create a div layer with a text (header) above the actual layer..
    and a line around the div... So a line around the div the content in the div but not around the header of the div

    With my knowledge i can only create this using the fieldset... But need it in a DIV =)
    I cannot believe that it is not possible... So does someone know how to achieve this?

    I was thinking of creating a H1 and a H1 style within the class for the div and align it 20PX above the div...

    [ATTACH]4794[/ATTAH]

    Created this:

    CSS:

    Code:
    .important {padding: 1px 1px 1px 1px; border: #000000 1px dashed; } 
    .important h1 {
    	padding: 0px 0px;
    	color: #000000;
    	font-family: Geneva, Helvetica, Arial, sans-serif;
    	font-size: 10px;
    	color: #000000;
    	font-weight: bold;
    	top: -20px;
    	left: -3px;
    	position: relative;
    }

    HTML:
    Code:
    <div class="important" id="Layer1">
      <h1>yeah</h1>
      <p>helleo, happy content</p>
    Attached Files
    Last edited by peejeedee; Oct 6, 2006, 01:16 PM.

  • #2
    Just use a border.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <style type="text/css">
    html,body {
    font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif;
    font-size:13px;
    color:#000;
    background:#FFF;
    margin:0;
    padding:0;
    }
    #container {
    padding:5px;
    }
    #content {
    border:1px solid #000;
    padding:5px;
    min-height:400px;
    }
    </style>
    <!--[if lte IE 6]>
    <style type="text/css">
    #content {
    height:400px;
    }
    </style>
    <![endif]-->
    </head>
    <body>
    <div id="container">
    	<div id="header">header</div>
    	<div id="content">content</div>
    </div>
    </body>
    </html>
    From the sound of things, it would seem like you need to read more about CSS. www.htmldog.com is a good start.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

    Comment

    Working...
    X