SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    301
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need CSS align help

    Hi,

    I have a HTML page . I could not upload here as file size is big ...hence uploading in google doc.

    here is the link

    http://docs.google.com/View?id=dc83hzcs_373fxscgdgv




    this is the look I get when I open the HTML in the browser ...

    http://docs.google.com/View?id=dc83hzcs_367gqgwv9dg


    This is the look I desire in the browser ..
    http://docs.google.com/View?id=dc83hzcs_369dwx5jxgc
    [ formatted and edited in mspaint ]

    What changes I need to do In my code ? Can you please help ? I don't want to alter the existing CSS , as the existing CSS are used in the page elsewhere . I would like to overwrite the CSS styles to get the desired look.

    Thanks for your time.

  2. #2
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,280
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Lawlz, love the username!

    I don't go into stuff like google docs because usually they want me to have, like, javascript on and stuff.

    But it looks like you may have to set some explicit widths in your table headers. I ran into a similar issue making some tables... the problem was that the contents of the columns were single digit numbers, which seemed to set the width of the whole column (and ended up doing pretty much what your table is doing). I had to either set widths on those th's (I assume you have th for your top table headers... if not, you should) or a width on the td's underneath. I forget which worked.

    Since this DOES mean screwing around with the CSS files, see if you can't throw an id (or if it already has one that's being used in CSS, a new class) on it and give it really specific styles. You should be able to do that without affecting other elements.

    *edit oh I went ahead and tried clicking the link anyway... yay, it just worked.

    Give your table an id.

    Put a full doctype up there (yours now is partial... copy the full doctype from this page: http://www.w3.org/QA/2002/04/valid-dtd-list.html ). Otherwise, browsers think your page was built back in the days of Geocity : )

    Then I'll bet this would work:
    <style type="text/css">
    #idofTable .cellTextLeft{
    width: some width that you want to be the minimum;
    font: 11px Arial, Helvetica, sans-serif;
    color: #000000;
    text-align: left;
    border-right: 1px solid #000000;
    height: 17px;
    PADDING-LEFT: 10px;
    }

    If you're not catering to IE6 you can do min-width instead, which would let your table get wider... cause I notice you have 29% as a stated width for your table headers.

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,624
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, I notice you are trying to have a fixed table header, you are doing two tables but it could be combined into 1 if you use the fixed header technique from this quiz
    You should combine it into 1 table and that way the header column widths will be depending upon the cells . That way it will work
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  4. #4
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,280
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Ah yeah I kinda missed that but it seems to be in two (or three) for this reason:
    </table>
    <input type="hidden" name="checkedCustTerrOld" value="">
    </table>

    Maybe there's some reason the input is outside the inner table but inside the outer table? Er, thats confuzling me now...

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,624
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    That's invalid anyway and there's no reason to have that there
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  6. #6
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    301
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Hi, I notice you are trying to have a fixed table header, you are doing two tables but it could be combined into 1 if you use the fixed header technique from this quiz
    You should combine it into 1 table and that way the header column widths will be depending upon the cells . That way it will work
    combined into 1 table ?

    but see , I want to keep the inner table scrolling.

    I,m not getting you what you are trying to say.
    Can you please do the changes in my code and post ...let me see how it can fixed .

    I think in that case I will loose the inner table scrollability...is not it?

    can it still fetch my desired look ?

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,624
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by windowsxp View Post
    combined into 1 table ?

    but see , I want to keep the inner table scrolling.
    That's not a problem. If you looked at the quiz and ran some code from there you would see it working
    I,m not getting you what you are trying to say.
    Can you please do the changes in my code and post ...let me see how it can fixed .

    I think in that case I will loose the inner table scrollability...is not it?

    can it still fetch my desired look ?
    Just take the code from the quiz and modify the text output to match yours, then style it however you wish . Simple as that. I won't do the manual work for you lol
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


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
  •