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 6 of 6
  1. #1
    New Coder
    Join Date
    May 2007
    Posts
    16
    Thanks
    2
    Thanked 1 Time in 1 Post

    CSS positioning problems

    Hi,

    I'm currently designing a new website, but have come across some problems that I have been unable to solve, despite hours of trial and error fiddling with the code.

    I'm trying to display a large image to the left, with a subcolumn, if you like, to the right displaying sub-information - as can be seen at The Volkswagen UK homepage

    The html code I am using for this is:
    Code:
      <DIV id=test>
        <H1>Deals</H1><IMG height=329 alt="" src="images/c4test.jpg" width=560>
        <UL>
          <LI>Hi
          <LI><IMG height=229 alt="" src="images/citroen_bxtest.jpg" width=208>
          <LI>How are you all?</LI>
        </UL>
      </DIV>
    With the CSS code as:
    Code:
    #test {
      background:#999;
      float:left;
      width:780px;
      margin:0;
      padding:0;
      }
    #test h1 {
      float:right;
      width:210px;
      margin:0;
      padding:0;
      font-size:100%;
      color:#fff;
      }
    #test img {
      float:left;
      }
    #test ul {
      float:right;
      width:208px;
      margin:0;
      padding:0;
      list-style:none;
      }
    #test li {
      background:#999;
      margin:0;
      padding:0;
      }
    The problem I am getting when viewing the page in IE6 is that there seems to be imaginary margins, despite having declared that I want the margins to be 0.
    I'll show you what I mean:

    As you can see, there seems to be padding of some sort either side of the images. I have tried declaring margin:0; and padding:0; in #test img but to no avail.

    I have, however, located the root problem as being the #test img css code - though I cannot understand why this would be so.

    In Mozilla Firefox and Netscape the results are also bizarre, with the following displaying from the same code:


    The "padding" problem seems not to occur, but it's as though the final list item seems to shift to a different list.

    Any help or suggestions would be greatly appreciated.
    Thanks!
    Last edited by vyp0r; 05-30-2007 at 04:02 PM.

  • #2
    New Coder
    Join Date
    May 2007
    Posts
    16
    Thanks
    2
    Thanked 1 Time in 1 Post
    Nevermind. I finally figured it out!

    For anyone interested, this is what I changed to fix the problem (red text highlights what has been changed)

    In the original HTML code I added the <H2> markers in order to be able to float the first image to the left, without floating the second image to the left as well (which was causing the original problem).
    Code:
     <DIV id=test>
        <H1>Deals</H1><H2><IMG height=329 alt="" src="images/c4test.jpg" width=566></H2>
        <UL>
          <LI>Hi
          <LI><IMG height=229 alt="" src="images/citroen_bxtest.jpg" width=214>
          <LI>How are you all?</LI>
        </UL>
      </DIV>
    Code:
    #test {
      background:#999;
      float:left;
      width:780px;
      margin:0;
      padding:0;
      }
    #test h1 {
      float:right;
      width:210px;
      margin:0;
      padding:0px;
      font-size:100%;
      color:#fff;
      }
    #test h2 {
      display:block;
      float:left;
      margin:0;
      padding:0;
      }
    #test ul {
      float:right;
      width:214px;
      margin:0;
      padding:0;
      list-style:none;
      }
    #test li {
      background:#999;
      margin:0;
      padding:0;
      }
    Here I changed the #test img style to #test h2 so that the float:left attribute wasn't applied to the second image. Instead I was now able to only apply this to the first image, with the use of the <h2> markers.

    And voila. The intended result! :

  • #3
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    I really wouldn't put just an image inside of an h2 element. You should read about the term "html semantics". Why not just float the image directly?
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #4
    Regular Coder GSimpson's Avatar
    Join Date
    Aug 2006
    Location
    New Zealand
    Posts
    268
    Thanks
    9
    Thanked 0 Times in 0 Posts
    That's what I could have done. Or a css table with 1 main col and a <span>,
    <img> and <p> on the right. However, if it works.

  • #5
    New Coder
    Join Date
    May 2007
    Posts
    16
    Thanks
    2
    Thanked 1 Time in 1 Post
    Quote Originally Posted by _Aerospace_Eng_ View Post
    I really wouldn't put just an image inside of an h2 element. You should read about the term "html semantics". Why not just float the image directly?
    How would I go about floating just the one image, and not having it apply to both images?

  • #6
    Regular Coder GSimpson's Avatar
    Join Date
    Aug 2006
    Location
    New Zealand
    Posts
    268
    Thanks
    9
    Thanked 0 Times in 0 Posts
    give it a class -

    Code:
    <img src="myimage.jpg" alt="my image" class="float-right"/>
    Style:
    Code:
    img.float-right { float: right; }


  •  

    Posting Permissions

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