combo of external css and inline – possible?

@kbrown2974Feb 24.2004

I am just starting with CSS and was wondering if it is possible to modify a class in a div. The code I have is below.

in the external:
.datacell
{
float: left;
padding: 0;
margins: 0;
color: yellow;
width: 15%;
}

.tabcon
{
width: 90%;
padding: 0;
margins: 0;
}

in the html:
<div class=”tabcon”>
<div class=”datacell”>
800 Number:<BR>
OTHER:<BR>
COMPANY:<BR>
REFERENCE:<BR>
SSN: **ONLY NUMBERS**<BR>
COUNTY: <BR>
QUESTIONS: <BR>
ANSWERS: <BR>
CALLER NAME: <BR>
ADDRESS: <BR>
CITY: <BR>
STATE: <BR>
ZIP: <BR>
ZIP+4: <BR>
DAY PHONE: <BR>
NIGHT PHONE: <BR>
</DIV>
<div class=”datacell”>
<select name=”num800″>
<option>Choose</option>
<option value=”8002278195″>8002278195</option>
<option value=”8002157865″>8002157865</option>
<option value=”8008229349″>8008229349</option>
<option value=”8006325071″>8006325071</option>
<option value=”OTHER”>OTHER</option>
</select><BR>
<INPUT TYPE=TEXT NAME=”num8002″ SIZE=10 MAXLENGTH=10><BR>
<INPUT TYPE=”TEXT” NAME=”company” SIZE=50 MAXLENGTH=50><BR>
<INPUT TYPE=”TEXT” NAME=”reference” SIZE=50 MAXLENGTH=50><BR>
<INPUT TYPE=”TEXT” NAME=”ssn” SIZE=9 MAXLENGTH=9><BR>
<INPUT TYPE=”TEXT” NAME=”county” SIZE=30 MAXLENGTH=30><BR>
<INPUT TYPE=”TEXT” NAME=”questions” SIZE=100 MAXLENGTH=100><BR>
<INPUT TYPE=”TEXT” NAME=”answers” SIZE=100 MAXLENGTH=100><BR>
<INPUT TYPE=”TEXT” NAME=”name” SIZE=50 MAXLENGTH=50><BR>
<INPUT TYPE=”TEXT” NAME=”addr1″ SIZE=50 MAXLENGTH=50><BR>
<INPUT TYPE=”TEXT” NAME=”city” SIZE=30 MAXLENGTH=30><BR>
<INPUT TYPE=”TEXT” NAME=”state” SIZE=2 MAXLENGTH=2><BR>
<INPUT TYPE=”TEXT” NAME=”zip5″ SIZE=5 MAXLENGTH=5><BR>
<INPUT TYPE=”TEXT” NAME=”zip4″ SIZE=4 MAXLENGTH=4><BR>
<INPUT TYPE=”TEXT” NAME=”dayphone” SIZE=10 MAXLENGTH=10><BR>
<INPUT TYPE=”TEXT” NAME=”nightphone” SIZE=10 MAXLENGTH=10><BR>
</DIV>

</DIV>

Is it possible to modify the class in the div calls like changing the width?

to post a comment

CSS

23 Comments(s) _↴

@TimeBanditFeb 24.2004 — #try:

<div class="datacell" style="width: 111px;">

this will override what is in the external style sheet.

@kbrown2974authorFeb 24.2004 — #cool..that works..now i just got one other thing..the text and inputs are not lining up. What could I do to make sure they line up correctly?

@TimeBanditFeb 24.2004 — #Easiest thing to do is use a table. I'm not sure some web sites will ever be totally tableless. Should they be tableless "just because tables are out and DIVs are in"?

Tables serve a purpose and they are easily rendered in browsers. They can be a pain, and nesting them can lead to other issues, but this is the exact situation they are most useful. Use a table to align your bits of info. Here's an added bonus most people don't think about, but I have to - blind users will be able to use your info. If you put it scattered in various DIVs and then line all these DIVs up with CSS, no blind person will understand what's going on.

You could use TITLE tags to assign your bits of info, but if you've ever used JAWS to try to find out what a disabled user goes through trying to use the web, you'll put data in data tables.

As far as CSS goes, you may be able to use a combo of UL/LI lists to equate one LI in one list with the corresponding LI in another list, but this is really a workaround to basically do what a table already does.

To really see where you may run into a problem, assume someone's City name is ridiculously long and they have their browser window set to a small width... what will happen is your city name will wrap to the next line and then cause all of the inputs after that to be out of alignment.

Use a table.

[URL=http://www.brookgroup.com/site/tb_section508.html]http://www.brookgroup.com/site/tb_section508.html[/URL]

@Ben_RogersFeb 24.2004 — #Yes, tables should be used for data, i agree. Basically if you follow web standards & symphatics... or sympatics,.. or whatever, you're guaranteed to get some good results. Don't use lists...

As for blind viewers... if most of them are like my granpa, then they'll avoid the net, and loath comps...

@Paul_JrFeb 25.2004 — #[i]Originally posted by TimeBandit [/i]

[B]Should they be tableless "just because tables are out and DIVs are in"? [/B][/QUOTE]
It's not that "tables are out and <div>'s are in", it's that people are using the <table> tag incorrectly. It is for laying out tabular data. End of story. Is your site tabular data?

[i]Originally posted by TimeBandit [/i]

[B]Tables serve a purpose[/B][/QUOTE]
Exactly. To display tabular data.

[i]Originally posted by TimeBandit [/i]

[B]blind users will be able to use your info. If you put it scattered in various DIVs and then line all these DIVs up with CSS, no blind person will understand what's going on.[/B][/QUOTE]
I believe you misunderstand -- pardon me if I'm wrong. But the point of CSS isn't so that you can randomly place the code and then use CSS to place it wherever. Things should follow a logical order - the code for the header will logically be placed at the top of your document, since that is where it should show up. The point of CSS isn't that you are able to place that code at the bottom, and have the actual content appear at the top of the page.

[i]Originally posted by TimeBandit [/i]

[B]Use a table.[/B][/QUOTE]
That's really a matter of preference. There was a large debate on another forum as to whether using tables to layout ones' form is semantically correct. I'm not exactly sure of the outcome, but this looks like a job for

[url=http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.9][FONT=courier new]<label>[/FONT][/url]

</rant>

@Ben_RogersFeb 25.2004 — #'Twas a rant, but a good one. I would just go

text [input]

longer text [input]

blah
-----------------------------------

|textarea------------------------|

_____________________________
without tables or spacing... well, you get the point. that form would make perfect sense and not need excess code. maybe im just lazy... and maybe i only use 1 multi fielded form on my site (which doesnt work due to safe mode, btw) but i find laying forms out pointless.

semantics. thats the word i was thinking of.

@Paul_JrFeb 25.2004 — #[i]Originally posted by omega [/i]

[B]but i find laying forms out pointless.[/B][/QUOTE]
You may now, but in the near/not-so-near future, you may need to lay them out. ? I used to not think that I would ever need to, but I am finding out I need to learn a lot of things I didn't previously think I would need to learn. ?

Now, I've been having a bit of trouble with laying out a form with CSS in the same manner achieved with a table. But in the process of typing out a long thread on the subject, I figured it out myself. Attached is an example of a form laid out with CSS in the manner similar to that of using a table. It is a big rough, but I only figured this out today. ?

It works in all browsers I have at my disposal.

[upl-file uuid=518e83d9-6089-4477-b53c-da6a70edd0ae size=739B]csslaidoutform.zip[/upl-file]

@Ben_RogersFeb 25.2004 — #Note to Paul: in future use CSS+(X)HTML for example pages!!! not every1 has apache.

@Paul_JrFeb 25.2004 — #[i]Originally posted by omega [/i]

[B]Note to Paul: in future use CSS+(X)HTML for example pages!!! not every1 has apache. [/B][/QUOTE]
HuH? No, it is just CSS with XHTML. I just like the .php extension. I like the way the li'l icon looks ( ? ), plus it's just more professional IMO. :p

You just have to open it in your browser and it works fine.

@TimeBanditFeb 25.2004 — #[i]Originally posted by Paul Jr [/i]

[B]It's not that "tables are out and <div>'s are in", it's that people are using the <table> tag incorrectly. It is for laying out tabular data. End of story. Is your site tabular data?[/QUOTE]

*sigh* The more things change, the more they stay the same. The user asked how he could line the stuff up. A table is a way to do it, whether you or I believe it's "right" or not. A table is a tool. Use it however you want if it gets the job done.

I can just hear you back in the Stone Ages... "Don't sharpen that rock and use it as a an arrowhead, rocks are just for stubbing your toe on."

I believe you misunderstand -- pardon me if I'm wrong. But the point of CSS isn't so that you can randomly place the code and then use CSS to place it wherever.[/QUOTE]

Ugg... Gronk stub toe again.

Things should follow a logical order - the code for the header will logically be placed at the top of your document, since that is where it should show up. The point of CSS isn't that you are able to place that code at the bottom, and have the actual content appear at the top of the page.[/QUOTE]

Man, you need a beer. Loosen up a tad. By the way, the world is flat. Don't bother ever checking to see if that's right or not, just accept it.

You never had a project that required a little whack on the side of the head to get you to think differently? My head is aching from all this linear thinking...

Maybe this will help... tomorrow morning, instead of leaning on your left foot and putting your right foot in your underwear, then leaning on your right and putting your left foot into the other hole, try bending a little and putting both feet in their repective holes and then pull your underwear up all at once.

There's more than one way to skin a cat... ?

@SamFeb 25.2004 — #I'm gonna side with Paul here. Just because something works, doesn't mean its right. Using logical document structure and following web standards are very important goals to achieve in web design.

@TimeBanditFeb 25.2004 — #[i]Originally posted by samij586 [/i]

[B]I'm gonna side with Paul here. Just because something works, doesn't mean its right. Using logical document structure and following web standards are very important goals to achieve in web design. [/B][/QUOTE]

I hear you, brotha. I do code and art for Fortune 500 and government clients who don't have many bosses above them. I have to strive for and achieve compliance in not just web standards but government mandated standards for disabled folks, etc.

But let me also say, that to do what we do, we hack the code, and massage the code, and manipulate the code in any way we have to in order to achieve our goals. If I gotta stick a DIV somewhere that is not in "logical order" so I can help achieve a design goal, then friend, that is what I'll do, whether it's "right" or not. In the end, you be as compliant as you want, if the user on the front end finds your site unusable or irritating, they'll go elsewhere. As long as I can validate the HTML and CSS, and I have appropriately dealt with 508 issues, then it is compliant.

It's been my curse and gift all my life to be a decent artist and decent coder, but not excellent in either. Decent enough to get by in both worlds. Is that "well rounded" or "deficient"? ?

I can get along with both very different types of people. But when I hang out for any length of time where coders are, I don't fit in because they mostly want code to go in logical order and can't fathom a few curves in all the straight lines of their lives... is it all the Pepsi and pizza that causes this in coders? And I don't fit in with the artists that well because Bohemian lifestyles don't often blend well with the logical thought needed for code. Is it all the Twinkies and Vodka that causes this in artists?

heheh... I actually *like* being the guy that does both, but it'd be nice to be excellent in one or the other, if even for a day. Maybe.

@ray326Feb 25.2004 — #As TBL has been saying, we're moving toward a "semantic web." In general a table doesn't express the relationship between the field labels and the fields. The exceptional case being when you have a table with two columns headed "Label" and "Input". 8-)

As Paul said, the most correct relationship is expressed with label-input pairs like

<i>
 </i>&lt;div&gt;&lt;label for="county"&gt;County:&lt;/label&gt;&lt;input type="TEXT" name="county" id="county" size="30" maxlength="30"&gt;&lt;/div&gt;

Then with rather simple styling of the label element you can make your form look however you like.

@Paul_JrFeb 25.2004 — #TimeBandit, man, you really cracked me up! ?

But that thing about the underwear kinda wierded me out. :p

@Ben_RogersFeb 26.2004 — #I'm going to have to agree with Paul as well, don't use something just cuz it works when there's a better solution.

As for PHP, it opens up in notepad Paul. and if i open it ina browser it shows text. Doesn't really work now does it? I coulda/shoulda saved it as html, but i figured you used php code, so i uploaded it.

@Paul_JrFeb 26.2004 — #[i]Originally posted by omega [/i]

[B]I'm going to have to agree with Paul as well, don't use something just cuz it works when there's a better solution.

As for PHP, it opens up in notepad Paul. and if i open it ina browser it shows text. Doesn't really work now does it? I coulda/shoulda saved it as html, but i figured you used php code, so i uploaded it. [/B][/QUOTE]
Right-click -> Open With -> [Firebird|IE|Whatever]

@Ben_RogersFeb 26.2004 — #[i]Originally posted by Paul Jr [/i]

[B]Right-click -> Open With -> [Firebird|IE|Whatever] [/B][/QUOTE]

This is weird: it'll open fine in IE, but not in firefox. oh well, this is getting off topic.

@kbrown2974authorFeb 26.2004 — #Wow guys..I didnt mean to start a whole debate.

I originally used nested tables to achieve the look I wanted. The code got excessively large(20K) for a fairly simplistic(minus validation) form.

I want to use CSS for internal site so the users dont get all pissed off and say they dont understand the page.

Oh yeah..i didnt see an answer to my question..?..how do you line up the label and input field?

@ray326Feb 26.2004 — #I gave you an example in my reply.

@kbrown2974authorFeb 26.2004 — #Ok..I will have to give that a try.

@kbrown2974authorFeb 26.2004 — #Ok..I put the code in and it sorta works. There are no line breaks in the form..everything is all up against each other. Also, my select-option values are printed out..not a dropdown ? The code is below:

<style type="text/css">

div#form form div label

{

display: block;

float: left;

}

div#form form div input

{

display: block;

}

div#form form div select

{

display: block;

}

</style>

<FORM NAME="MyForm" ACTION="populate.asp" onSubmit="return ChkForm(this) ;" METHOD="POST">

<div id="form">

<form action="#">

<div>

<label for="num800">800 Number: </label>

<input type="select" name="num800" id="num800">

<option>Choose</option>

<option value="8002278195">8002278195</option>

<option value="8002157865">8002157865</option>

<option value="8008229349">8008229349</option>

<option value="8006325071">8006325071</option>

<option value="OTHER">OTHER</option>

</select>

</input>

 <label for="num8002">OTHER: </label>
   <input type="text" name="num8002" id="num8002" SIZE=10 MAXLENGTH=10/> 
 
   <label for="company">COMPANY: </label>
   <input type="text" name="company" id="company" SIZE=50 MAXLENGTH=50/> 
 
   <label for="reference">REFERENCE: </label>
   <input type="text" name="reference" id="reference" SIZE=50 MAXLENGTH=50/> 
 
   <label for="ssn">SSN: </label>
   <input type="text" name="ssn" id="ssn" SIZE=9 MAXLENGTH=9/> 
 
   <label for="county">COUNTY: </label>
   <input type="text" name="county" id="county" SIZE=30 MAXLENGTH=30/> 
 
   <label for="questions">QUESTIONS: </label>
   <input type="text" name="questions" id="questions" SIZE=100 MAXLENGTH=100/> 
 
   <label for="answers">ANSWERS: </label>
   <input type="text" name="answers" id="answers" SIZE=100 MAXLENGTH=100/> 
 
   <label for="name">NAME: </label>
   <input type="text" name="name" id="name" SIZE=50 MAXLENGTH=50/> 
 
   <label for="addr1">ADDRESS: </label>
   <input type="text" name="addr1" id="addr1" SIZE=50 MAXLENGTH=50/> 
 
   <label for="city">CITY: </label>
   <input type="text" name="city" id="city" SIZE=30 MAXLENGTH=30/> 
 
   <label for="state">STATE: </label>
   <input type="text" name="state" id="state" SIZE=2 MAXLENGTH=2/> 
 
   <label for="zip5">ZIP: </label>
   <input type="text" name="zip5" id="zip5" SIZE=5 MAXLENGTH=5/> 
 
   <label for="zip4">ZIP+4: </label>
   <input type="text" name="zip4" id="zip4" SIZE=4 MAXLENGTH=4/> 
 
   <label for="dayphone">DAY PHONE: </label>
   <input type="text" name="dayphone" id="dayphone" SIZE=10 MAXLENGTH=10/> 
 
   <label for="nightphone">NIGHT PHONE: </label>
   <input type="text" name="nightphone" id="nightphone" SIZE=10 MAXLENGTH=10/> 
 
   <INPUT TYPE=SUBMIT VALUE="SUBMIT"> 
   </DIV>

</FORM>

</DIV>

@ray326Feb 26.2004 — #There are no line breaks because you didn't wrap each label/input pair in a div.

The select options are printed out because you didn't in fact put a select tag in there.

Also, throw away the current content of that style sheet. All you need is something like

label { float: left; width: 30%; text-align: right; }

@Ben_RogersFeb 27.2004 — #Gah... too much code. b3 m0r3 sp3c1f1c, im not l00kin thru d4t.

Also in #CSS _↴

A Really Simple CSS for Drop Shadow Border?Edge Fix Help with exactly positioned objects

Success!

Help @kbrown2974 spread the word by sharing this article on Twitter...

Tweet This

combo of external css and inline – possible?

23 Comments(s) _↴

blah
-----------------------------------

Also in #CSS _↴

Success!

Social

Version

combo of external css and inline – possible?

23 Comments(s) ↴

blah -----------------------------------

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

23 Comments(s) _↴

blah
-----------------------------------

Also in #CSS _↴