CSS FAQ?

[Trium918]

Who is an expert in CSS or familar with it. Answer Yes or No and then I

will replay with a response.

 

Note: The reason I named the topic CSS FAQ? is because

I plan to recycle this topic with queston after question until

I get and understanding of CSS.

 

I feel like tables & CSS are much easier to build the structuce of a

web page oppose to using a <div> element & CSS through out an

entire site.

 

Who Agree and why?

Who Disagree and why?

[ToonMariner]

If you feel that tables are the best way to construct a web page simply for layout then I suggest you DON'T keep recycling his topic but go away and spend a day or two converting a site you have done previously (one of your favorites) to a tableless layout and css.  It will be the most beneficial time you will spend in your whole career of web development.

 

By all means come on ask questions when you get stuck or just need to know if another option is avialable for what you want to achieve.  You will only learn by parctice and failure keep pluggining away and I suspect within a few days your opinion will change...

[TheFilmGod]

I agree. CSS is better than tables for a various of reasons. At first it'll be very DIFFICULT to change. For this past week I've been trying to convert my site from tables to css and its not easy. First of all, for some reason it renders better in IE 6 and not in Firefox!

 

The great part is that there are unlimited possibilities. Tables had only a few options. So, when you do start to convert your site to Css, take it slow. It'll come eventually!

[Trium918]

Ok, I am suck! I can center a div wrapper,container, or what ever, but

I am having trouble aligning the content correctly inside of the wrapper.

[soycharliente]

How are you trying to align in? What containers is it in? What are their attributes? Etc. Supply the relevant information.

[jcombs_31]

I don't think there is a fair comparison, tables are a mess, css is much easier.

[soycharliente]

I don't disagree that tables are a mess, but I've had no problems using tables and getting it to look just fine (Win FF, IE6/7; Mac FF, Safari; Linux FF) with a little CSS. I do agree that anything you can do with tables, you can do with divs. And I also agree that it takes a lot longer to get it right, especially if you need multiple cells on a row. I don't know how many times I've tried to float a div and had it wrap to the next line.

 

@jcombs: IDK that you can compare tables to CSS. That's like comparing apples and oranges to me. Tables are a layout thing and CSS is a style thing. I'm sure you already knew that

[Liquid Fire]

Table may seem easier to format a whole website at first however you will find making changes to the website and like adding and removing content might become a nightmare to maintain.  I think there are only 2 things you should ever use a table for, itemized list or forms.  Other than that everything should be formatted using pure css classes and ids.

[jcombs_31]

Table may seem easier to format a whole website at first however you will find making changes to the website and like adding and removing content might become a nightmare to maintain.  I think there are only 2 things you should ever use a table for, itemized list or forms.  Other than that everything should be formatted using pure css classes and ids.

 

Actually, a table shouldn't be used for either of those.  A list should be an ordered or unorderd list (e.g. <ol> or <ul>).  A form should be styled by its own elements.  A table should be used for tabular data. 

[Liquid Fire]

When i said list i did mean tabular.  For instance like for a project management system you would have a list of support tickets with 4-5 pieces of information you want to list on the same line.

 

I would also think to see you create a form that look exactly like this:

 

http://www.studentcity.com/inforeq/new/request_info.php

 

only using css.  I don't think is is possible and if it is it would require much more work where using a table would be much easier and using a table to create a layout for the form has zero disadvantages that i can see.

[jcombs_31]

of course I can, that form is not complicated to create.  This is a small example of a form using only css, but I hope you can see that it could be easily added to to create a larger form that is still appealing and neatly organized.

 

http://multimedia-technologies.com/misc/form/form.php

[jcombs_31]

also check this out for forms  http://www.formassembly.com/form-garden.php?formId=29&style=/form-builder/css/default

[Trium918]

Inheritance describes situations where (X)HTML elements inherit stylistic properties from a parent element.

Could someone please explain Parents and Children in depth?

[Liquid Fire]

I don't think it as complicated as you think(someone correct me if i am wrong).  take this code for example:

 

<script>
#main
{
    color: black;
    font-size: 12px;
}

#main2
{
    color:red;
}
</script>
<div id="main">
    <div id="main2">
    </div>
</div>

 

anything in main will have a font-size of 12 and color of black.  now everything in main2 will also have a font size of 12 because it is inside the #main(this is the cascade of css in action) however any text inside the main2 will be red because main2 is overloading the black color previous set.  I don't think there is much more to explain but maybe someone else will have something to say.

[dbrimlow]

Liquid fire, you actually picked a form that is the easiest to do with css.

 

I have some forms that are MONSTERS and have been in table format for five years. While I CAN create it using css, it is a time consuming, trial and error business that will require actual planning.

 

But, make no mistake ... it CAN be done using css. I will actually be converting them at some point during the year.

 

Most people don't understand WHY css layout is preferable; it is certainly not because it is easier to code (although it does get easier with constant use).

 

The beauty of css layout is that it reduces the page weight. The markup source code is as clean and lean as the display. Using an external css that loads into cache once, makes pages load much faster than table tag heavy code.

 

 

[Trium918]

There are many ways to layout a page using CSS. I was wondering

how do some of you design a site using CSS?

 

Example: Fixed or Liquid

[AndyB]

Liquid with max width around 1240 (when I'm frrling really frisky)

[Trium918]

I am having problems getting the content div to align correctly

with each sidebar div in IE6. I figure out the problem but why would

it not align correctly? Padding: 10px inside of the content div CSS.

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Fixed-Width Layout</title>

<link rel="stylesheet" type="text/css" href="style/fixed_layout.css" />
</head>

<body>

<div id="masthead">

</div>
<div id="sidebar_a">

</div>
<div id="sidebar_b">

</div>
<div id="content">
I am trying to understand how does this actually works.
How about it? Those it work the correct way?
</div>
<div id="footer">

</div>

</body>
</html>

 

/* CSS Document */
body {
width: 760px;
margin: 10px;
font-size: 80%;
font-family: Verdana, Arial, Helvetica, sans-serif;

margin: 0;

margin-left: auto;
margin-right: auto;

}

/* Masthead */
#masthead { 
width: 738px;
margin: 0 0 10px 0;
padding: 10px;
border: 1px solid #000;
background-color: #CCC;
}

/* Footer */
#footer {
clear: both;
width: 738px;
padding: 10px;
border: 1px solid #000;
background-color: #CCC;
}

/* Content */
#content {
width: 338px;
margin-left: 200px;
margin-right: 200px;
margin-bottom: 10px;
border: 1px solid #000;

padding: 10px;
}

/* */
#sidebar_a {
float: left;
width: 158px;
margin-bottom: 10px;
padding: 10px;
border: 1px solid #000;
}

/* */
#sidebar_b {
float: right;
width: 158px;
margin-bottom: 10px;
padding: 10px;
border: 1px solid #000;
}

[\code]

 

Example 1: IE6

Example 2: Fire Fox

 

Example 2 to is the correct alignment.

 

 

[attachment deleted by admin]

[soycharliente]

You have to float the content div as well.

[Trium918]

You have to float the content div as well.

 

How is it possible to float the content div center? There isn't

a float center like the left or right.

[soycharliente]

You float 3 divs in a row left.

Or three in a row right. Then clear for the next.

[Trium918]

I have no idea what is going on with floating all elements.

I used margin: auto; for the content element and it centered

it in IE and fire fox. What do you think?

[soycharliente]

That's what it should do.

 

What exactly do you need help with?

[Trium918]

That's what it should do.

 

What exactly do you need help with?

 

That is what i needed help with

[ToonMariner]

Charlie - some people are beyond help....