SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    May 2009
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation Div representation of tables problem

    Following lots of advice and the clear benefits, I have replaced loads of nested tables with a set of divs. I far prefer to use the container approach as going back to tables would not only be wasteful but would mean I could not easily turn the same site into a mobile version just be changing the css and including an additional class in elements that I want to suppress (such as images). ie maintenance would be much more messy.

    The overall structure I want to represent is a repeated set of three columns with the first column a small image or logo followed by two text columns. The image and text will vary for each repetition and there will be typically 20 such cases to a page.

    I particularly want to ensure that the site validates to W3C standards using either Total Validator validator.w3.orrg/check.

    The XHTML I have is:

    Code:
    <div class="wrap">
      <div class="logpic">
        <a class="inlink" name="xxxx" />
        <a class="biglinks" href="xxxx.html" target="_blank">
          <img  class="logo" src="xxxx.gif" title="My title for hovering" alt="(opens in new window)" />
          Title that needs to be below
        </a>
      </div>
      <div class='alltext'>
        <div class='col1'>
          <p>Column 2 text ...</p>
        </div>
        <div class='col2'>
          <p>Column 3 text ....</p>
        </div>
      </div>
      <div class='footer' />
      <div>
        <p class='select'><a class='seclinks' href='#top'>top</a></p>
      </div>
    </div>
    where the appropriate styles are:

    Code:
    div.wrap {width:880px;}
    div.logpic {
    width: auto; 
    min-width: 160px; 
    margin-left:20px; 
    margin-top: 0; 
    margin-bottom: 4em;
    text-align: left; 
    float:left; 
    padding-top:1em; 
    top: 0; 
    line-height:1.1em; 
    position: relative;
    }
    div.alltext {
    float:right; 
    width:540px; 
    padding:0; 
    margin-top:10px; 
    background-color:#f8f8f8;
    }
    div.col1 {
    float:left;  
    width:250px; 
    padding-top:10px; 
    padding-left:10px; 
    padding-right:10px;
    }
    div.col2 {float:right; 
    width:250px; 
    padding-top:10px; 
    padding-left:10px; 
    padding-right:10px;}
    img.logo {
    float: left; 
    padding: 0; 
    top: 4em;  
    position: absolute;}
    a.inlink {text-decoration:none; color:#444a40;}
    a.biglinks:hover {color:#44f; font-weight:bold; text-decoration:none;font-size:1.2em; text-align:center; text-align: bottom;}
    a.biglinks:link {color:#444; font-weight:bold; text-decoration:none;font-size:1.2em;  text-align:center; text-align: bottom;}
    a.biglinks:active {color:#4f4; font-weight:bold; text-decoration:none;font-size:1.2em;  text-align:center; text-align: bottom;}
    a.biglinks:visited {color:#f44; font-weight:bold; text-decoration:none;font-size:1.2em;  text-align:center; text-align: bottom;}
    a.seclinks:link {color:#444; text-decoration:none; font-size:0.9em;}
    a.seclinks:active {color:#4f4; text-decoration:none; font-size:0.9em;}
    a.seclinks:visited {color:#f44; text-decoration:none; font-size:0.9em;}
    a.seclinks:hover {color:#44f; text-decoration:none; font-size:0.9em;}
    p.select {font-size:0.9em; text-align:right; margin-right:20px; margin-left:20px; padding-top:0; padding-bottom:0; margin-top:0; margin-bottom:0; border-bottom:1.3px solid #cccccc; clear: both;}
    The issues are:

    1) I want the text below the image rather than above it but inserting a <p> ... </p> (or <h4> ... </h4>) within the <a> ... </a> is illegal. How do I achieve this?

    2) The above XHTML validates OK (using Transitional to cope with the target="_blank"). But using either FF DOM inspector or IE Web Developer tools, each repetition starting with <div class="wrap"> is a container that ends at the bottom of the page rather than after the <p class="select">. There a footer that I want to include between two outer <div>s that is therefore not shown.

    I can display this footer by adding an extra </div> to the end of the coding above for each wrap but the XHTML then become illegal. It seems that FF3 and IE8 are not obeying the container rules but this surely can't be so, Any suggestions how to ensure that the coding above is self contained?

    3) Sometimes the image in the first column is too high. Other than resizing it before use - difficult if it is located elsewhere - how do I extend the second and third columns so that the bottom <p class="select">...</p> is always below the image. Note that this happens whether I have an extra </div> in or not.

    Any help would be much appreciated...

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Loggy View Post
    1) I want the text below the image rather than above it but inserting a <p> ... </p> (or <h4> ... </h4>) within the <a> ... </a> is illegal. How do I achieve this?
    Code CSS:
    a img {display:block}

    Quote Originally Posted by Loggy View Post
    2) The above XHTML validates OK (using Transitional to cope with the target="_blank"). But using either FF DOM inspector or IE Web Developer tools, each repetition starting with <div class="wrap"> is a container that ends at the bottom of the page rather than after the <p class="select">. There a footer that I want to include between two outer <div>s that is therefore not shown.
    Are you serving this markup as an application of XML, e.g,. with a MIME type of application/xhtml+xml?
    If not, you're not using XHTML at all, but invalid HTML. The following lines will not be interpreted as you intend if you serve the markup as text/html:
    Code XML:
    <a class="inlink" name="xxxx" />
    ...
    <div class='footer' />
    The parser will probably recover from the missing </a> tag, but it will look for the </div> tag that isn't there. (<div/> means <div>> in HTML, not <div></div> as in XHTML).
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Member
    Join Date
    May 2009
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Tks 4 this.

    I had the markup as text/html but on reflection I am probably better for the moment leaving this and correcting the <a ... /> and <div .../>'s. Now the footer works properly and I haven't got loads of nested containers...

    Funny thing is I thought I had checked these possibilities!

    The display still leaves the text at the top though, the text is left-aligned and overruns the bottom for larger images.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •