SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    May 2002
    Posts
    67
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Alternative methods


    Alright, I got my page to work using "margin-left, margin-top" etc. to position the Image and Text within each cell.

    (Note, copy the url text to your browser if link doesn't work)
    www.1000planets.com/cosmic/CSStest/linkpage.jpg

    But if you will look at the above image file, the text flows outside the cell. I'm not sure which tag/code is causing this.
    Any suggestions on how to refine my CSS?

    Please take the time to look it over and write up new CSS code that would be a good substitue for what I have.
    As always, thanks in advance for any help and writing up some CSS code.

    My CSS :

    -- The main table that holds all the cells --

    table.table {
    position: absolute;
    left: 20px;
    top: 180px;
    width: 670px;
    border: 0px;
    border-collapse: collapse;
    background-color: #FFFFFF; }

    -- CSS for the image/thumbnail positioning --
    #imgLink {
    position: absolute;
    margin-left: 10px;
    margin-top: 10px;
    }

    -- CSS for the Link text --
    #txtLink {
    position: absolute;
    margin-left: 160px;
    margin-top: 10px;
    border-bottom: 1px dashed #ccc;
    }

    -- CSS for the site description text --
    #txtInfo {
    position: absolute;
    margin-left: 160px;
    margin-top: 35px;
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 10px;
    color: #686868;
    }

    -- a TD cell with the border --
    .box {
    width: 100%;
    border-top: 1px solid #ECEBEB;
    border-bottom: 3px solid #E5E3E3;
    border-left: 1px solid #ECEBEB;
    border-right: 3px solid #E5E3E3;
    height: 80px;
    vertical-align: top;
    background-color: #FFFFFF; }


    My HTML :

    ...
    <body>
    ...
    <table cellpadding="0" cellspacing="0" class="table">
    <tr>
    <td class="box"> <SPAN id="imgLink"> <img src="links/1kp.jpg" alt="www.1000planets.com">
    </SPAN> <SPAN id="txtLink"><a href="http://www.1000planets.com" target="_blank">1000
    Planets Inc.</a></SPAN> <p id="txtInfo"> Dream. Think. Build. Go. Be
    part of the team that does it! </p> </td>
    </tr>
    <tr>
    <td class="boxblank"> </td>
    </tr>
    <tr>
    <td class="box"><SPAN id="imgLink"> <img src="links/asr2.jpg" alt="www.appliedspace.com">
    </SPAN> <SPAN id="txtLink"><a href="http://www.appliedspace.com/" target="_blank">Applied Space Resources</a></SPAN> <p id="txtInfo"> Developing the first commercial lunar lander and sample return mission!</p></td>
    </tr>
    <tr>
    <td class="boxblank"> </td>
    </tr>
    ...
    </table>

  2. #2
    morphine for a wooden leg randem's Avatar
    Join Date
    Jun 2002
    Location
    .chicago.il.us
    Posts
    957
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Re: Alternative methods

    Originally posted by CosmicCatalyst
    Please take the time to look it over and write up new CSS code that would be a good substitue for what I have.
    That's a bit bold of you, isn't it?

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2002
    Posts
    67
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    No no no

    I'm not talking about somebody redoing the entire thing, I just want to make sure for people to leave examples of what they are describing. I'm new to css, so if you tell me to "center the table and align the text left", I just want an example of the code on how I would accomplish making the changes.

    I would never ask somebody to do all the work for me. j/k

    Laterz!

    Cosmic.

  4. #4
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Hmm, that would depend upon whether you wanted a complete CSS solution or a CSS styled <table> basically at the moment you have a <table>, which you set a class to 670px.

    Your #txtInfo is basically your text thus if would suggest having:

    #txtInfo {width: 490px; }

    However, that is only a cheapskate fix, for stopping your text from continuing past the border style if I had more time I'd have looked at the CSS more closely.
    Last edited by xhtmlcoder; Jun 21, 2002 at 02:44.

  5. #5
    SitePoint Enthusiast
    Join Date
    May 2002
    Posts
    67
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Talking :.:

    Alright, if you find the time, please do expand on you suggestion and take a look at the code plus the nifty screenshot I included.

    Thanks for the quick fix so far.

    Cosmic.


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
  •