Hi guys, I'm new to CSS and thought after reviewing the advocacy for it that I would give it a try. Problem is I'm hacking about it without understanding much. I tried to check out the websites out there talking about tableless layouts, but they didn't really tell you how to do it.
Here is what I got going on:
<!-- m --><a class="postlink" href="http://www.alloutfairytale.com">http://www.alloutfairytale.com</a><!-- m -->
and here is the CSS
<!-- m --><a class="postlink" href="http://www.alloutfairytale.com/aoft.css">http://www.alloutfairytale.com/aoft.css</a><!-- m -->
Notice I am heavily reliant on the position:absolute. I'm also using float: not knowing what exactly it does. I just know that it is working how I'm using it. Can someone please tell me what I'm doing wrong and the potential problems? I know there is going to be some.
Oh, and the table code is for the news poster I haven't converted over yet. (not much)
Thanks soo much!
Brandonhi - i'm by no means an expert buy being just in the process of converting from a table layout to a non table layout i thought i'd mention a couple of things -- first of all try <!-- m --><a class="postlink" href="http://www.w3schools.com/">http://www.w3schools.com/</a><!-- m --> for anything you want info on especially css - they really have it all, though it may seem like a lot of stuff in long lists ( they do have a tutorial also) the lists will provide most of the reference you need and as you play about with different styles you will eventually get the hang of it all.
second float has the attributes right and left ie float:right or float:left ; and it really just means that the element will float on the right or left of the containing element ; usually either the body or a div
next - my eneducated personal view is that you basicaly do a similar thing in a tableless page as in the old table layout ; except that you use divs to position things
lastly i had a look at your site it it seems allright - at the end of the day if you can get it so that 1) the site looks how you want it to ( in as many browsers as you can bear to design for) 2) the pages vallidate on the w3 site and 3) the site is generaly usable then you cant go too far wrong
one word though -- find out how different browsers handle css as if you rely too heavily on it for position and layout then your page might look a bit funny in certain browsers -- i must mention opera 5.02 which i found to be quite strangeThanks for that link!!!! That helps alot.
I'm sorry to hear it looks funny in Opera 5.02. I tried it in all the latest versions of Opera, Mozilla, IE, and Firebird and it looks perfect (phew!). Actually the motivation to going to CSS was frustration on how IE kept screwing up table layout. But darn, I'm glad I did!
Thanks again!
Brandonyea and another thing i came across quite a bit is that if you end up using div{overflow:auto} for any of your divs ( i suppose this really applies to where the div's content is dynamic, like from a database) then some of the browsers screw up the display of that; most noteably opera 6.04 --- in saying all that i'm not anti opera or anything - just another thing to look out forOriginally posted by BrandonL
I'm sorry to hear it looks funny in Opera 5.02.
i didn't mean that your page at the moment looks funny in opera; just that if you rely on css positioning then it could. -- i actually haven't looked at it in opera myselfI'm in class right now so I can't give you any specific help, but check out A List Apart.
url: <!-- m --><a class="postlink" href="http://www.alistapart.com/">http://www.alistapart.com/</a><!-- m -->
It has great articles and how-to guides on markup (HTML and XHTML) and CSS.OK. Here are some pointers and explanations.
Absolute positioning
This completely removes any element from the document flow, and creates a new document flow inside of itself. You can set the stacking order of absolutely positioned elements using the z-index CSS property:
table {
position: absolute;
z-index: 100;
}
Elements with higher-numbered z-indexes are "stacked" on top of lower-numbered z-indexes.
The left and top positioning of absolute-positioned elements is taken in reference to the absolutely positioned element's parent.
<div id="parent">
<div id="child"></div>
</div>
The DIV with id="child" is positioned absolutely in the above example (imagine the proper CSS has been written). The DIV with id="parent" contains the "child" div. Assume "parent" is declared through CSS - position: relative;
How far left and how far down "child" is located on the screen depends on how far left and how far down "parent" is located.
#parent {
position: relative;
left: 100px;
top: 10px;
}
#child {
position: absolute;
left: 300px;
top: 100px;
}
The CSS above sets properties to those DIV tags I wrote above.
"parent" is positioned 100 pixels left and 10 pixels down on the screen. The starting point for "child" is 100 pixels to the left and 10 pixels down.
The "left: 300px;" moves "child" an additional 300 pixels to the left, so it's actual position on the page is 400 pixels left. The "top: 100px;" moves "child an additional 100 pixels down, making "child" actually 110 pixels down the page.
Floating elements
This to removes the element from the normal document flow, but allows other elements to wrap around it.
Elements do not stretch to encompas floated elements.
Consider the same HTML as above:
<div id="parent">
<div id="child"></div>
</div>
and this CSS:
#parent { /* No properties set here in CSS */ }
#child {
float: right;
}
The "parent" div will not stretch to the same height as "child" unless you do:
<div id="parent">
<div id="child"></div>
<div class="spacer"></div>
</div>
In CSS:
#parent { /* No properties set here in CSS */ }
#child {
float: right;
}
.spacer {
clear: both;
}OK, one more post.
Keep all your CSS in external CSS files and then import them to your pages in two ways:
1. <link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"URL_TO_STYLESHEET.css"> You've probably already done this but I couldn't get the links you provided above to work.
Works on 4th generation browsers and newer (IE 4.0 PC/Mac, NS 4.x). Basically any browser released 1998 and after.
2. @import "URL_TO_STYLESHEET.css";
Use (in the <head> or your HTML document):
<style type="text/css">
<!--
@import "URL_TO_STYLESHEET.css";
-->
</style>
Works on fifth generation browsers and newer (IE 5/5.5+ PC, IE 5+ Mac, NS 6+, Mozilla 1, Opera 5+, Firebird...) Basically browsers released 1999-ish and newer.
Fourth generation and older browsers support CSS 1.0 pretty good. Only put CSS 1.0 styles in stylesheets imported via the <link> tag. You can place CSS 2.0 and 1.0 styles in stylesheets imported via @import. This keeps the advanced CSS layout away from browsers that don't support it.
I try to do all the CSS 1.0 formatting in <link> tag stylesheets and then place the needed 2.0 styles in @import stylesheets. I'll also place any additional CSS 1.0 styles needed in @import stylesheets.
Do not use inline styles - You could place CSS in the hands of browsers that don't fully support it, though you're usually pretty safe with inline CSS 1.0 styles.
Then, get your HTML to validate at <!-- m --><a class="postlink" href="http://validator.w3.org/">http://validator.w3.org/</a><!-- m --> to make sure browsers are working in standards compliance mode.
Also, open up your HTML files in a browser and don't import the CSS. Does the page still make sense? Can you tell what the main menu is and what the main content is? If not, it's time to rearrange the markup. What you see without CSS is basically what 4.0 and older browser users will see.
Here is what I got going on:
<!-- m --><a class="postlink" href="http://www.alloutfairytale.com">http://www.alloutfairytale.com</a><!-- m -->
and here is the CSS
<!-- m --><a class="postlink" href="http://www.alloutfairytale.com/aoft.css">http://www.alloutfairytale.com/aoft.css</a><!-- m -->
Notice I am heavily reliant on the position:absolute. I'm also using float: not knowing what exactly it does. I just know that it is working how I'm using it. Can someone please tell me what I'm doing wrong and the potential problems? I know there is going to be some.
Oh, and the table code is for the news poster I haven't converted over yet. (not much)
Thanks soo much!
Brandonhi - i'm by no means an expert buy being just in the process of converting from a table layout to a non table layout i thought i'd mention a couple of things -- first of all try <!-- m --><a class="postlink" href="http://www.w3schools.com/">http://www.w3schools.com/</a><!-- m --> for anything you want info on especially css - they really have it all, though it may seem like a lot of stuff in long lists ( they do have a tutorial also) the lists will provide most of the reference you need and as you play about with different styles you will eventually get the hang of it all.
second float has the attributes right and left ie float:right or float:left ; and it really just means that the element will float on the right or left of the containing element ; usually either the body or a div
next - my eneducated personal view is that you basicaly do a similar thing in a tableless page as in the old table layout ; except that you use divs to position things
lastly i had a look at your site it it seems allright - at the end of the day if you can get it so that 1) the site looks how you want it to ( in as many browsers as you can bear to design for) 2) the pages vallidate on the w3 site and 3) the site is generaly usable then you cant go too far wrong
one word though -- find out how different browsers handle css as if you rely too heavily on it for position and layout then your page might look a bit funny in certain browsers -- i must mention opera 5.02 which i found to be quite strangeThanks for that link!!!! That helps alot.
I'm sorry to hear it looks funny in Opera 5.02. I tried it in all the latest versions of Opera, Mozilla, IE, and Firebird and it looks perfect (phew!). Actually the motivation to going to CSS was frustration on how IE kept screwing up table layout. But darn, I'm glad I did!
Thanks again!
Brandonyea and another thing i came across quite a bit is that if you end up using div{overflow:auto} for any of your divs ( i suppose this really applies to where the div's content is dynamic, like from a database) then some of the browsers screw up the display of that; most noteably opera 6.04 --- in saying all that i'm not anti opera or anything - just another thing to look out forOriginally posted by BrandonL
I'm sorry to hear it looks funny in Opera 5.02.
i didn't mean that your page at the moment looks funny in opera; just that if you rely on css positioning then it could. -- i actually haven't looked at it in opera myselfI'm in class right now so I can't give you any specific help, but check out A List Apart.
url: <!-- m --><a class="postlink" href="http://www.alistapart.com/">http://www.alistapart.com/</a><!-- m -->
It has great articles and how-to guides on markup (HTML and XHTML) and CSS.OK. Here are some pointers and explanations.
Absolute positioning
This completely removes any element from the document flow, and creates a new document flow inside of itself. You can set the stacking order of absolutely positioned elements using the z-index CSS property:
table {
position: absolute;
z-index: 100;
}
Elements with higher-numbered z-indexes are "stacked" on top of lower-numbered z-indexes.
The left and top positioning of absolute-positioned elements is taken in reference to the absolutely positioned element's parent.
<div id="parent">
<div id="child"></div>
</div>
The DIV with id="child" is positioned absolutely in the above example (imagine the proper CSS has been written). The DIV with id="parent" contains the "child" div. Assume "parent" is declared through CSS - position: relative;
How far left and how far down "child" is located on the screen depends on how far left and how far down "parent" is located.
#parent {
position: relative;
left: 100px;
top: 10px;
}
#child {
position: absolute;
left: 300px;
top: 100px;
}
The CSS above sets properties to those DIV tags I wrote above.
"parent" is positioned 100 pixels left and 10 pixels down on the screen. The starting point for "child" is 100 pixels to the left and 10 pixels down.
The "left: 300px;" moves "child" an additional 300 pixels to the left, so it's actual position on the page is 400 pixels left. The "top: 100px;" moves "child an additional 100 pixels down, making "child" actually 110 pixels down the page.
Floating elements
This to removes the element from the normal document flow, but allows other elements to wrap around it.
Elements do not stretch to encompas floated elements.
Consider the same HTML as above:
<div id="parent">
<div id="child"></div>
</div>
and this CSS:
#parent { /* No properties set here in CSS */ }
#child {
float: right;
}
The "parent" div will not stretch to the same height as "child" unless you do:
<div id="parent">
<div id="child"></div>
<div class="spacer"></div>
</div>
In CSS:
#parent { /* No properties set here in CSS */ }
#child {
float: right;
}
.spacer {
clear: both;
}OK, one more post.
Keep all your CSS in external CSS files and then import them to your pages in two ways:
1. <link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"URL_TO_STYLESHEET.css"> You've probably already done this but I couldn't get the links you provided above to work.
Works on 4th generation browsers and newer (IE 4.0 PC/Mac, NS 4.x). Basically any browser released 1998 and after.
2. @import "URL_TO_STYLESHEET.css";
Use (in the <head> or your HTML document):
<style type="text/css">
<!--
@import "URL_TO_STYLESHEET.css";
-->
</style>
Works on fifth generation browsers and newer (IE 5/5.5+ PC, IE 5+ Mac, NS 6+, Mozilla 1, Opera 5+, Firebird...) Basically browsers released 1999-ish and newer.
Fourth generation and older browsers support CSS 1.0 pretty good. Only put CSS 1.0 styles in stylesheets imported via the <link> tag. You can place CSS 2.0 and 1.0 styles in stylesheets imported via @import. This keeps the advanced CSS layout away from browsers that don't support it.
I try to do all the CSS 1.0 formatting in <link> tag stylesheets and then place the needed 2.0 styles in @import stylesheets. I'll also place any additional CSS 1.0 styles needed in @import stylesheets.
Do not use inline styles - You could place CSS in the hands of browsers that don't fully support it, though you're usually pretty safe with inline CSS 1.0 styles.
Then, get your HTML to validate at <!-- m --><a class="postlink" href="http://validator.w3.org/">http://validator.w3.org/</a><!-- m --> to make sure browsers are working in standards compliance mode.
Also, open up your HTML files in a browser and don't import the CSS. Does the page still make sense? Can you tell what the main menu is and what the main content is? If not, it's time to rearrange the markup. What you see without CSS is basically what 4.0 and older browser users will see.