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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 24

Thread: align using CSS

  1. #1
    Regular Coder DELOCH's Avatar
    Join Date
    Apr 2006
    Location
    Canada
    Posts
    537
    Thanks
    4
    Thanked 2 Times in 2 Posts

    Internet Explorer align using CSS

    hello everyone

    i tried aligning with CSS but it failed, can anyone say what i did wrong?

    Code:
    /* This CSS is copyright Demon Lord Chaos */
    
    
    /********************Begin My CSS Code********************/
    
    
    /* Make class table id navigation align left */
    table.navigation {
      left: auto;
      position: absolute;
      text-align: center;
      border: 1px;
      border-color: #000000;        	
      width: 20%;
    }
    /* Make class table id content align center */
    table.content {
    	left: 0px;
    	right: 0px;
       text-align: left;
    	border: 1px;
    	border-color: #000000;
    	width: 50%;
    }
    /* Make class table id extras align right */
    table.extras {
    	right: auto;
    	position: absolute;
    	text-align: left;
    	border: 1px;
    	border-color: #000000;
    	width: 20%;
     }
     /* Make class div id left align left */
    div.left {
    	left: auto;
    	position: absolute;
    	text-align: left;
    	color: #000000;
       background-color: #FFFFFF;
    }
    /* Make class div id center align center*/
    div.center {
    	left: 0px;
    	right: 0px;
    	position: absolute;
    	text-align: left;
    	color: #000000;
    	background-color: #FFFFFF; 
    }
    div.left {
    	left: auto;
    	position: absolute;
    	text-align: left;
    	color: #000000;
    	background-color: #FFFFFF;
    }
    Thanks a lot for taking time to respond to this message

  • #2
    Senior Coder
    Join Date
    Feb 2006
    Location
    USA
    Posts
    1,013
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions
    Java != JavaScript && JScript != JavaScript
    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

  • #3
    Regular Coder DELOCH's Avatar
    Join Date
    Apr 2006
    Location
    Canada
    Posts
    537
    Thanks
    4
    Thanked 2 Times in 2 Posts
    uhh... i am using XHTML 1.0 transitional.. i need to learn this to go on to XHTML 1.0 Strict and XHTML 1.1

    so i will never use ALIGN element... it is old and useless, i need to use css to align

    thanks but please help

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    I think a little more information is necessary. What exactly is it that you are trying to align without success? If it's the page you're trying to center-align then the usual formula is:

    Code:
    <style type="text/css">
    
    body {
      text-align: center; /* for MSIE */
      }
    
    div#container {
      margin-left: auto;
      margin-right: auto;
      text-align: left; /* to counter inheritance due to MSIE rule */
      }
    
    </style>
    
    <div id="container">
    </div>
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #5
    Regular Coder DELOCH's Avatar
    Join Date
    Apr 2006
    Location
    Canada
    Posts
    537
    Thanks
    4
    Thanked 2 Times in 2 Posts
    i want to align

    table1 to left
    table2 to center
    table3 to right
    div1 to left
    div2 to center
    div3 to right

    ex: <div id="right">i am right</div>

    is it possible?

    thanks

  • #6
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Yes, it's possible using CSS. Keep in mind that if your tables or divisions are too wide for the area in which they're supposed to fit some of them could end up getting pushed to the next line anyway. You may have to fiddle with the code a bit as well to get what you want since float and clear aren't nearly as straight-forward as they appear to be.

    Code:
    <style type="text/css">
    
    table#left {
      float: left;
      }
    table#center {
      float: left;
      }
    table#right {
      clear: right;
      float: left;
      }
    
    div#left {
      clear: left;
      float: left;
      }
    div#center {
      float: left;
      }
    div#right {
      float: left;
      }
    
    </style>
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #7
    Regular Coder DELOCH's Avatar
    Join Date
    Apr 2006
    Location
    Canada
    Posts
    537
    Thanks
    4
    Thanked 2 Times in 2 Posts
    thanks.. although it does not seem to work...

  • #8
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    I probably should have taken a closer look and accordingly mentioned that this method seems to have some problems if more than one of the objects doesn't have a fixed width; percentages aren't fixed.

    If you're using tables you should be able to just merge them all together, with each table becoming a table-cell, to get that effect easily. Achieving that effect with div that have dynamic sizes is much more troublesome though.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #9
    Regular Coder DELOCH's Avatar
    Join Date
    Apr 2006
    Location
    Canada
    Posts
    537
    Thanks
    4
    Thanked 2 Times in 2 Posts
    thanks but... the thing is that making one table with table cell is not my thing

    my thing is banner on top, copyright on bottom, navigation on left, center information and extras on the right

    so i like spaces between there, is it possible?

    because what you are telling me makes sence but, it does not fit my requirements, what i desire is to get closer to XHTML 1.1 but the thing you are telling me seems to sway me away

    thanks, if it is possible can you please help me with that?

  • #10
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Based on your explanation, I believe you want to create separate tables for each element of the layout; this is simply inefficient regardless of whether you're using HTML 4.0 or XHTML 1.1. If you're going to use tables for layout you might as well use a single unified table for the layout.

    Code:
    <table cellspacing="1" style="border-spacing: 1px;">
    
    <tr>
      <td colspan="3">Banner Image</td>
    </tr>
    <tr>
      <td>Navigation</td>
      <td>Main Content</td>
      <td>Right Panel</td>
    </tr>
    <tr>
      <td colspan="3">Copyright Info</td>
    </tr>
    
    </table>
    And yes you can put spaces between table cells by using the CSS border-spacing property as demonstrated above. This doesn't work in MSIE though so you'll have to use cellspacing which is invalid in XHTML 1.1 so I would just stick with XHTML 1.0 Transitional if you must have this.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #11
    Regular Coder DELOCH's Avatar
    Join Date
    Apr 2006
    Location
    Canada
    Posts
    537
    Thanks
    4
    Thanked 2 Times in 2 Posts

    Unhappy

    thank you but may i repeat myself?

    i do not desire to use tables, i already professionally know how to use them, they are not fun if you know them, i am trying to learn CSS, so can i do what i asked before because what you said does not meet my standards, i require to use CSS to use sepperate tables instead... but can i do that? this is all i asked can you please tell me how i may make this reality...

    Thank you for your help, but i already know tables...

    ps: if anything does not work in MSIE i will not use it, i have FF and stuff but IE owns them in my opinion
    Last edited by DELOCH; 04-22-2006 at 05:48 AM.

  • #12
    Senior Coder
    Join Date
    Feb 2006
    Location
    USA
    Posts
    1,013
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by DELOCH
    uhh... i am using XHTML 1.0 transitional.. i need to learn this to go on to XHTML 1.0 Strict and XHTML 1.1

    so i will never use ALIGN element... it is old and useless, i need to use css to align

    thanks but please help
    Huh? I told you how to use CSS to center an element.

    ALIGN is an attribute, not an element.

    To align elements left or right use floats.

    In a table cell CSS's text-align property acts like the align attribute.

    Read all of these as well as the page I linked to in my first reply:
    http://css.maxdesign.com.au/floatutorial/index.htm
    http://www.brunildo.org/test/#flo

    I recommend clearing options 1 and 2 listed on this page.
    More information:
    http://garyblue.port5.com/webdev/floatdemo.html
    http://www.quirksmode.org/css/clearing.html

    Curing Float Drops and Wraps

    http://www.alistapart.com/articles/negativemargins/
    http://www.alistapart.com/articles/practicalcss/
    http://www.alistapart.com/articles/journey/

    Why do you want to use XHTML 1.1?
    Read these:
    XHTML 1.0 vs XHTML 1.1
    No to XHTML
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions
    Java != JavaScript && JScript != JavaScript
    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

  • #13
    Regular Coder DELOCH's Avatar
    Join Date
    Apr 2006
    Location
    Canada
    Posts
    537
    Thanks
    4
    Thanked 2 Times in 2 Posts
    yes but i do not understand whar a float is, the only elements of float i ever saw was a parseFloat and a dynamicHTML float

    i do not want layers, i want simple alignment onto the left/right/center

    and no i do not need center, i need all the three equally

  • #14
    Senior Coder
    Join Date
    Feb 2006
    Location
    USA
    Posts
    1,013
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by DELOCH
    yes but i do not understand whar a float is,
    Read the pages I linked to.
    And this: http://www.w3.org/TR/REC-CSS2/visure...#propdef-float

    Quote Originally Posted by DELOCH
    dynamicHTML float
    I'm not sure what you are referring to.

    By one definition dynamic HTML (DHTML) is X/HTML, CSS, and JavaScript being used together to make a web page change in response to user actions.

    Quote Originally Posted by DELOCH
    i do not want layers, i want simple alignment onto the left/right/center
    They aren't layers. Read the pages I've linked to more thoroughly.

    Quote Originally Posted by DELOCH
    and no i do not need center, i need all the three equally
    I don't understand what you mean by that.
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions
    Java != JavaScript && JScript != JavaScript
    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

  • #15
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by DELOCH
    i do not desire to use tables
    Then why does your CSS use tables and when I asked you what you were trying to align you used tables as an example? Further, later on in that paragraph you just said you intend to use tables and in the post prior to that you also said that you intend to use tables... Huh?

    It looks to me based on your original code that what you were trying to do is text-align left, center, and right using tables on the same line but this is not possible; you can't have separate alignments for objects on the same line.

    Furthermore, CSS TEXT-align is used to align TEXT, not things such as tables like Internet Explorer incorrectly does. I'd hardly call lack of support and bugs for CSS properties like border-spacing (which would have helped solve one of your stated problems) "owning" and added to that, Internet Explorer doesn't even support true XHTML which you want to use; otherwise you might as well use XHTML 1.0 Transitional and HTML 4.01 so you can use those deprecated tags to accommodate IE's outdated renderer.

    In answer to what seems to more clearly be your question now, I already gave you the answer: either learn to use CSS clear and CSS float or merge your table layout. There is no other solution except to do something difficult like create your webpage out of an image or Flash or use another table to layout your existing tables which would actually amount to the same as the latter option.
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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