Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts

    Exclamation Columns will not display properly. Now resolved.

    http://exitfegs.co.uk/test.html
    http://exitfegs.co.uk/Sources.html

    This is the same program as my Sources program. I started to do what I thought was Semantically correct. The middle column was at the end of the program instead of its rightful place as the second part of the html.

    I cut and pasted the second column code and took it from the end and inserted it into the middle, where I thought it should be. The result is obvious.
    The remedy is not. (Not to me anyway.)

    Help and an explanation would be gratefullr received.

    Frank

    Both programs are on my site.
    Last edited by effpeetee; 03-08-2008 at 07:19 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #2
    Senior Coder rafiki's Avatar
    Join Date
    Aug 2006
    Location
    Floating around somewhere...
    Posts
    2,046
    Thanks
    19
    Thanked 42 Times in 42 Posts
    Code:
    #content3 {
      width: 31%;
      float: right;
      background-color: #551100;
      margin-bottom: 1px;
      text-align: left;
      right: 0px; //add this line to make the div stick to the right hand side of the browser viewing panel
    }

  • #3
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Sorry. But it doesn't work for me.
    Also why does the original code not work.

    It was OK before I moved it.

    Frank

    (I think I'll take up Mandarin Chinese, It must be easier,)
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Your divs having ids content1 and content2 are placed well, but content3 is placed inside content2 (it's supposed to be before content2 as you given float:right; ).
    PS: I've attached the modified code using firebug(since I'm unable to post), place it inside <body></body>, or better to create a new file and paste this!
    Attached Files Attached Files
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    effpeetee (03-08-2008)

  • #5
    Senior Coder rafiki's Avatar
    Join Date
    Aug 2006
    Location
    Floating around somewhere...
    Posts
    2,046
    Thanks
    19
    Thanked 42 Times in 42 Posts
    dont forget to add you style to it,
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
      <link rel="shortcut icon" href="/favicon.ico" />
      <!-- Kindly re-written and corrected for me by _AeroSpace_Eng of CodingForums. 31.1.2008 -->
      <!-- Modified by me, effpeetee - 8th 2008   -->
      <meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
    
      <title>Useful Links</title>
    <style type="text/css">
    
    
    *{
      margin: 0;
      padding: 0;
    }
    
    html, body {
      height: 100&#37;;
    }
    
    body {
      background-color: #551100;
      color: #ffffff;
      font: 900 .57em "lucida sans", verdana, arial, sans-serif;
      font-weight: 900;
    }
    
    #body {
      width: 100%;
      min-height: 100%;
      position: relative;
    }
    
    a:link {
      color: #fff;
      background-color: inherit;
      text-decoration: none;
    }
    
    a:visited {
      color: #ffff00;
      background-color: inherit;
    }
    
    a:hover {
      color: #ff0000;
      background-color: inherit;
    }
    
    a:active {
      color: #ffffff;
      background-color: inherit;
    }
    
    a img {
      border: 0;
    }
    
    #header h1 {
      font-size: 3em;
      color: #ffffff;
      background-color: #551100;
      text-align: center;
      padding: 1px;
    }
    
    #content1 {
      width: 31%;
      float: left;
      background-color: #551100;
      margin-bottom: 1px;
      text-align: left;
    }
    
    #content2 {
      width: 31%;
      background-color: #551100;
      margin-bottom: 1px;
      text-align: left;
      margin-left: auto;
      margin-right: auto;
    }
    
    #content3 {
      width: 31%;
      float: right;
      background-color: #551100;
      margin-bottom: 1px;
      text-align: left;
    }
    
    
    
    .h6 {
      padding: 0;
      margin: 0;
    }
    
    .links {
      font: 300 1.03em "lucida sans", verdana, arial, sans-serif;
      padding: 1.5em;
      list-style-type: decimal;
      margin-bottom: 9px;
      border: 2px solid yellow;
      color: #fff;
    }
    
    .links ol {
      padding-left: 9px;
      margin-left: 16px;
      list-style-type: decimal;
    }
    
    .links ol a {
      text-decoration: none;
    }
    
    .links ol a:hover {
      font-size: 150%;
      font-family: "lucida bright", serif;
      color: #0ff;
      text-decoration: none;
    }
    
    ol {
      list-style: decimal;
      margin-left: 2em;
    }
    
    .indent {
      margin-left: 4em;
    }
    
    #clearfoot {
      height: 60px;
      clear: both;
      overflow: hidden;
    }
    
    #footer {
      height: 10px;
      position: absolute;
      width: 100%;
      bottom: 8px;
      left: 0;
      font-size: 1.5em;
      background-color: #551100;
      padding: 3px 3px;
      text-align: center;
    }
    
    li.nobullet, li.nobullet ol li {
      list-style-type: decimal;
    }
    
    .clearfix:after {
      content: ".";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
    }
    
    .clearfix {
      display: inline-block;
    }
    
    #button ol {
      list-style-type: decimal;
      margin: 0;
      padding: 0;
      border: none;
    }
    
    #button li {
      border-bottom: 1px solid #90bade;
      margin: 0;
    }
    
    h6{
      text-align: center;
      margin-bottom: 4px;
      font: 1.4em arial, verdana, arial, sans-serif;
    }
    
    .indent {
      margin-left: 2.3em;
    }
    
    .indent2 {
      margin-left: 2.4em;
    }
    
    .clearfix {
      display: block;
    }
    
    .centre {
      text-align: center;
    }
    
    p {
      text-align: left;
      padding-left: 30px;
      color: #ffcccc;
      font: 1.3em arial, verdana, arial, sans-serif;
      font-weight: 900;
    }
    
    
    
    </style><!--[if IE]>
    <style type="text/css">li.nobullet {
      height: 1%;
    }
    
    * html .clearfix {
      height: 1%;
    }
    
    * html #body {
      height: 100%;
    }
    </style>
    <![endif]-->
    </head>
    
    <body> add that to the top of the text file

  • Users who have thanked rafiki for this post:

    effpeetee (03-08-2008)

  • #6
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Thanks abduraooft and rafiki

    http://exitfegs.co.uk/test.html

    Works fine now.

    Did I paste it wrong before?

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #7
    Senior Coder rafiki's Avatar
    Join Date
    Aug 2006
    Location
    Floating around somewhere...
    Posts
    2,046
    Thanks
    19
    Thanked 42 Times in 42 Posts
    you may have pasted it in the wrong place.
    thats all we can say. unless you have a video/diagram of how you done it

  • #8
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by rafiki View Post
    you may have pasted it in the wrong place.
    thats all we can say. unless you have a video/diagram of how you done it
    It's my 83 year old eyes again!

    It has been worth it.

    Thanks again to all.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  

    Posting Permissions

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