...

View Full Version : align using CSS



DELOCH
04-22-2006, 04:28 AM
hello everyone

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


/* 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 :)

Kravvitz
04-22-2006, 04:35 AM
Three ways to Center Elements with CSS (in IE5+/Win and other browsers) (http://www.dynamicsitesolutions.com/css/center_element/)

DELOCH
04-22-2006, 04:37 AM
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

Arbitrator
04-22-2006, 04:45 AM
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:


<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>

DELOCH
04-22-2006, 04:49 AM
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

Arbitrator
04-22-2006, 04:58 AM
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.


<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>

DELOCH
04-22-2006, 05:03 AM
thanks.. although it does not seem to work...

Arbitrator
04-22-2006, 05:17 AM
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.

DELOCH
04-22-2006, 05:22 AM
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?

Arbitrator
04-22-2006, 05:38 AM
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.


<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.

DELOCH
04-22-2006, 05:45 AM
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

Kravvitz
04-22-2006, 05:56 AM
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 (http://css-discuss.incutio.com/?page=ClearingSpace).
More information:
http://garyblue.port5.com/webdev/floatdemo.html
http://www.quirksmode.org/css/clearing.html

Curing Float Drops and Wraps (http://nemesis1.f2o.org/aarchive?id=11)

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 (http://www.sitepoint.com/forums/showthread.php?t=320391)
No to XHTML (http://www.spartanicus.utvinternet.ie/no-xhtml.htm)

DELOCH
04-22-2006, 06:00 AM
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

Kravvitz
04-22-2006, 06:11 AM
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/visuren.html#propdef-float


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.


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.


and no i do not need center, i need all the three equally
I don't understand what you mean by that.

Arbitrator
04-22-2006, 06:14 AM
i do not desire to use tablesThen 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.

DELOCH
04-23-2006, 12:12 AM
i said, i require alignment of selected three tables, and to align text i want to use divs

i do not want any floats nor layer

and no DHTML is CSS+JS used together to make specific areas more effective and interactive than others :)

thanks

Kravvitz
04-23-2006, 12:42 AM
Why don't you want to use floats?

DELOCH
04-23-2006, 04:16 AM
i would if you would please define what they are, i do not understand them, the only time i read floats they were for images and they were annoying layers...

anyways i would, but can you give me a sample to prove it works, the last one i got seems not to work on me... i tried id="right" and class="right" and either worked

:(

but thanks, i appriciate your will to provide assistance

Kravvitz
04-23-2006, 04:52 AM
IDs and classes only work if there is a stylesheet rule defined for them.

Floats are complicated, but they are very useful once you get used to them.

The way to understand these concepts is by playing around with the code and seeing what different changes to the code make in how it renders.

Read the pages I linked to. If you won't read them, then I can't help you.

Arbitrator
04-23-2006, 12:35 PM
i would if you would please define what they are, i do not understand them, the only time i read floats they were for images and they were annoying layers...You probably read that because float replaced some older, deprecated code that was used to align images relative to text (it was the align attribute used on the img element if recall correctly). However, float is for use in aligning non-text elements too, not just images against text.

DELOCH
04-23-2006, 04:52 PM
thanks, how do i apply it to HTML, i tried it just does not work, is it my coding or my IE6?

Kravvitz
04-24-2006, 02:50 AM
Please show us the code you tried.

DELOCH
04-24-2006, 04:36 AM
the one on the last page ...

Kravvitz
04-24-2006, 04:39 AM
There's more than one snippet of code on the first page.

I suggest you read some of these:
Adding a touch of style (http://www.w3.org/MarkUp/Guide/Style)
http://www.cssbasics.com/
Learning CSS (http://www.w3.org/Style/CSS/learning)
CSS2 Specification (http://www.w3.org/TR/REC-CSS2/)
BrainJar.com: Using Style Sheets (http://www.brainjar.com/css/using/)
www.glish.com/css/
www.w3schools.com/css/default.asp
www.thenoodleincident.com/tutorials/css/



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum