A little HTML/CSS help?

jon_k · 07-16-2005, 01:59 AM

I've got two different input types I need to style with CSS

The first input type is the text input (the one that gives you a text field)

Here's the code:

Code:

<input type="text" size="40" maxlength="120" name="member_title" value="PalaceCommunity.com Staff" />

I need to make this in CSS width: 98%

Then, I have a radio button

Code:

<input type="radio" name="prune_type" id="prune_older" value="older" class="radiobutton" />

Which I don't want 98%

I could use

input { width: 98%; } in CSS, but this will make the radio buttons huge as well.

I would change size="40" in the HTML but this is a message board skin I'm doing and it'd require that I recode many different files to do this. It'd be a pain in the butt, and it'd be simplier if I could just do something like:

input.text { width: 98%; } and have it not affect the radio fields.

Any ideas?

phil.d.g · 07-16-2005, 02:13 AM

A quick search on google shows that using INPUT.TEXT{ css code; } is the correct way

http://www.thescripts.com/clientside...css/page1.html

vharishankar · 07-16-2005, 02:51 AM

You can use the CSS classes or IDs.

For example declare classes like this:

Code:

input.class1 { font-size: 10pt Verdana; }
input.class2 { color: #FFFFFF; }

Then in the HTML file:

Code:

<input class="class1" type="text" name="something" />

And by the way if you want to be XHTML compatible, then pay attention to case. XHTML is case-sensitive all tags are lowercase.

phil.d.g · 07-16-2005, 02:55 AM

Putting id tags or class tags in each <input> statement requires him going through all his pages of code, something he wanted to avoid

The reason I used capital letters in the CSS was because I copied the example verbatim from the link I supplied, I hadn't tested to make sure it worked, which is why I didn't want to alter it.

vharishankar · 07-16-2005, 03:00 AM

Anyway it doesn't matter. There was no criticism involved there

Sorry for sounding like a teacher.

In my opinion I think everybody needs to stop using formatting tags within HTML and start using CSS completely.

I think it's well worth converting all HTML to XHTML transitional or strict in the long run because it will be much easier to maintain. To change the presentation, all one needs to do is to modify the CSS.

Regards.

Mega Man X · 07-16-2005, 03:23 AM

Sorry for just jump in, but looks like you guys are good with css so ^_^ ... how does one avoid using tables when designing the pages?. I don't think anything gets more messy then tables inside tables inside tables. There should be a way to do that with CSS right? Been looking on the net for ages, without finding one worthy, understandable tutorial about that. All of the tutorials I've found were to change backgrounds, fonts and colors with css. That's fine, but I want to get rid of the tables...

vharishankar · 07-16-2005, 03:48 AM

Megaman X,

See these pages:
XHTML Reference
CSS Layout techniques

The second link in particular provides useful code and samples for laying out web pages with tableless design.

I found these on the web and have bookmarked them for fun and profit

In fact my current PHP project "Link Directory" completely uses XHTML templates and I'm validating all my XHTML code to make sure they're 100% compliant.

Nice way to do layout. Using <div> tags entirely and controlling the entire layout using the CSS style for the div class or indentifier.

I learn it quite recently myself. <div> can be a bit confusing at first, but stick with it. It's nice to be able to control layout using the CSS.

Mega Man X · 07-16-2005, 02:29 PM

Thanks a bunch Harishankar!. I'm bookmarking those links ^_^

phil.d.g · 07-16-2005, 04:11 PM

If you want a simple example to look at, try here, your welcome to the code. Note: the table 'wrapper' was a workaround to vertically align the design in IE

jon_k · 07-17-2005, 01:49 AM

Yeah, I couldn't get input.text to work, so I decided to use classes. I ended up having to do a regexp search through MySQL, it was nasty -- but at least it works now.