SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: CSS positioning

  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2001
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS positioning

    Hope somebody can help me out, thanx in advance.

    I have the following situation
    <body>
    some text with no css associated with it just aligned LEFT

    <img> some image with a css selector that is as follows:
    h3{position: relative;
    left: 60%;
    top: 0%;}

    <table> a table of 1 row with two cells (50% widths)
    ....
    </body>
    I do not want to add any css stuff to the text or the table nor change their HTML tags/properties.
    With the relative style the img is placed 'under' the text (60% to the left which is what I need)but I want it to be on the top of the page immediately to the right of the left aligned text. If I use absolute positioning for the img it covers the contents of the table. Is there a way to 'push' the table to just below the image remembering that my only option at this point is playing around with that h3 style only.

  2. #2
    SitePoint Wizard Ian Glass's Avatar
    Join Date
    Oct 2001
    Location
    Beyond yonder
    Posts
    2,384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't think I quite understand what you're saying, perhaps you can link to an actual page (I'm a visual person ;-). You could also post either the full code or a relevant subset(s) (preferable) of the HTML and CSS files. That way, I think we'll be able to help you better.

    Out of curiosity, why are you putting so many restrictions on your style sheet?

  3. #3
    SitePoint Enthusiast
    Join Date
    Dec 2001
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    where is the image going to appear?
    with the above mentioned h3.
    I want it to be exactly to the right (very top of page)of CARNAL FORGE. As it stands now the page is:
    CARNAL FORGE
    ...
    ....2001 - WAR image

    table

    I want:

    CARNAL FORGE image
    ...
    ....2001 - WAR

    table

    also I must avoid the image covering the table which happens if you change the position to absolute.
    I really need the picture to be there and I could have had the image ALIGN RIGHT but if I can get a CSS solution I
    would be sure that the many pages that I have would have their respective images where I want them and it would also save me going back and changing some tags ... long story...


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head><link rel="stylesheet" type="text/css" href="metallian.css">
    <title>index</title>
    </head>
    <body bgcolor="#000000" text="#ffffff" link="#ffffff">
    <b>CARNAL FORGE</b> - SWEDEN <br><br>
    Who's Gonna Burn - 1998 - WAR <br>
    Firedemon - 2000 - Relapse <br>
    Please...Die! - 2001 - WAR

    <h3><img src="carnalforge.gif" alt="BAND PIC"></img></h3>

    <table width="100%"><tr><td width="60%">&nbsp;</td><td width="40%" align="left">Members:
    <br>S= Dellamorte, Centinex, Sideburners>>JONAS KJELLGREN>>Dellamorte,
    Centinex, Sideburners <br>
    G= Johan Magnusson - Steel Attack, In Thy Dreams>>JARI KUUSISTO - PETRI
    KUUSISTO <br>
    B= Dennis Vestman - LARS LINDEN <br>
    D= Steel Attack, In Thy Dreams>>STEFAN WESTERBERG </td></tr></table>
    </body></html>

  4. #4
    .net install meltdown
    Join Date
    May 2001
    Location
    View Ridge
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    mKay,

    a few things - there's no need to wrap the <img> in <h3></h3>. Just apply the style you want to the image tag.

    You could use the float property for the image however, be aware that NN4 will only render float properly if the style is declared in an external file & the margin is set to 0. If you want to support NN4 you're better off with a table otherwise:

    Code:
    <style>
    .floatRight
      {
      float:right;
      margin-left:10px;
      margin-bottom:10px;
      margin-top:0;
      margin-right:0
      }
    </style>
    then in the HTML:

    Code:
    <body>
    <img class="floatRight" src="carnalforge.gif" alt="BAND PIC" />
    <p><b>CARNAL FORGE</b> - SWEDEN
      <br><br> Who's Gonna Burn - 1998 - WAR
      <br> Firedemon - 2000 - Relapse
      <br> Please...Die! - 2001 - WAR 
    </p>
    HTH


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
  •