Web Analytics Made Easy -
StatCounter Nasty page title CSS DIV - Your advice? - CodingForum


No announcement yet.

Nasty page title CSS DIV - Your advice?

  • Filter
  • Time
  • Show
Clear All
new posts

  • Nasty page title CSS DIV - Your advice?

    I have finally cobbled together my first CSS layout...

    While I am reasonably happy with it (I know it's not perfect) one bit of it is nasty and definately needs attension.

    This is the page title DIV (#pagetitle) - which I cheated with and used floats. It is layed out how I want it but the floats are causing problems!

    An example of my CSS template

    The DIV area concerned is outlined with a red box here:

    Can anyone suggest a better way to code this DIV without using floats please???

    Code area:

    <!-- PAGE TITLE -->
    <div id="pagetitle">
    <div class="pt_left">
    <div class="pt_left_search">
    <form method="post" action="http://www.hull.ac.uk/cgi-bin/htsearch" name="sitesearch" target="_blank">
    <input type="hidden" name="config" value="fullsite" /><input type="hidden" name="restrict" value="" /><input type="hidden" name="exclude" value="" /><input type="text" size="15" name="words" value="Website search" />&nbsp;&nbsp;<input type="submit" value="Go" /></form>
    <div class="pt_middle">
    <h1>Page title (H1)</h1>
    <!-- END OF PAGE TITLE -->
    And the CSS to accompany it:

    /* -- PAGE TITLE --*/
    #pagetitle {
    	background-color: #d9e0e1;
    	background-image: url(../images/layout/pt_rightcorn.gif);
    	background-repeat: no-repeat;
    	background-position: right bottom;
    	height: 3.5em; }
    .pt_left {
    	background-color: #9cafb1;
    	height: 3.5em;
    	width: 12.62em;
    	background-image: url(../images/layout/lc_top.gif);
    	background-repeat: no-repeat;
    	background-position: right top;
    	float: left; }
    .pt_left_search {
    	height: 2em;
    	padding-top: 1.4em;
    	padding-left: 0.7em; }
    .pt_middle {
    	width: 20em;
    	height: 3.5em;
    	float: left; }
    .pt_right {
    	background-color: #9c6;
    	width: 2em; }
    /* -- END OF PAGE TITLE --*/
    I would be very greatful for any help.

    Many thanks in advance...


  • #2
    If you are going to do all css design you should join http://www.css-discuss.org/ and read this book cascading style sheets: the definitive guide http://www.oreilly.com/catalog/css This book will teach you how to style your markup through a page hierarchy. You'll learn more from the first three chapters of this book than from all of the other css books combined.

    Here is an example.

    #nav link {text-decoration:underline;}

    Firefox browser allows you do way more than the other borwsers when it comes to css.
    Master Newbie http://dwightstegall.com/


    • #3

      There is in a sense nothing wrong with using floats; your page title structure is a bit complicated, though.
      I counted four divs: there's the pagetitle div itself (which is fine as a grouping container), there's another div inside it for which I see no reason, and there are divs containing the form and the h1.
      As far as I can tell, you only really need the pagetitle div; both the form and the h1 are block level elements and can be treated just as you would a div.
      Float the form left, give the h1 sufficient left margin to clear it, and use the pagetitle div, the form and/or the h1 as containers for your backgrounds.

      The form and descendant elements can be styled using the "#pagetitle form" selector; ditto with "#pagetitle h1" for the h1: no need for extra classes.