LinuxQuestions.org
Latest LQ Deal: Latest LQ Deals
Go Back   LinuxQuestions.org > Forums > Non-*NIX Forums > General
User Name
Password
General This forum is for non-technical general discussion which can include both Linux and non-Linux topics. Have fun!

Notices


Reply
  Search this Thread
Old 07-16-2005, 02:59 AM   #1
jon_k
Member
 
Registered: Jul 2003
Location: Fort Worth, Texas
Distribution: Mepis Linux 2004
Posts: 547

Rep: Reputation: 30
A little HTML/CSS help?


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?
 
Old 07-16-2005, 03:13 AM   #2
phil.d.g
Senior Member
 
Registered: Oct 2004
Posts: 1,272

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

http://www.thescripts.com/clientside...css/page1.html
 
Old 07-16-2005, 03:51 AM   #3
vharishankar
Senior Member
 
Registered: Dec 2003
Distribution: Debian
Posts: 3,178
Blog Entries: 4

Rep: Reputation: 138Reputation: 138
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.

Last edited by vharishankar; 07-16-2005 at 03:53 AM.
 
Old 07-16-2005, 03:55 AM   #4
phil.d.g
Senior Member
 
Registered: Oct 2004
Posts: 1,272

Rep: Reputation: 153Reputation: 153
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.

Last edited by phil.d.g; 07-16-2005 at 03:58 AM.
 
Old 07-16-2005, 04:00 AM   #5
vharishankar
Senior Member
 
Registered: Dec 2003
Distribution: Debian
Posts: 3,178
Blog Entries: 4

Rep: Reputation: 138Reputation: 138
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.
 
Old 07-16-2005, 04:23 AM   #6
Mega Man X
LQ Guru
 
Registered: Apr 2003
Location: ~
Distribution: Ubuntu, FreeBSD, Solaris, DSL
Posts: 5,339

Rep: Reputation: 65
Question

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...
 
Old 07-16-2005, 04:48 AM   #7
vharishankar
Senior Member
 
Registered: Dec 2003
Distribution: Debian
Posts: 3,178
Blog Entries: 4

Rep: Reputation: 138Reputation: 138
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.

Last edited by vharishankar; 07-16-2005 at 04:52 AM.
 
Old 07-16-2005, 03:29 PM   #8
Mega Man X
LQ Guru
 
Registered: Apr 2003
Location: ~
Distribution: Ubuntu, FreeBSD, Solaris, DSL
Posts: 5,339

Rep: Reputation: 65
Thanks a bunch Harishankar!. I'm bookmarking those links ^_^
 
Old 07-16-2005, 05:11 PM   #9
phil.d.g
Senior Member
 
Registered: Oct 2004
Posts: 1,272

Rep: Reputation: 153Reputation: 153
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
 
Old 07-17-2005, 02:49 AM   #10
jon_k
Member
 
Registered: Jul 2003
Location: Fort Worth, Texas
Distribution: Mepis Linux 2004
Posts: 547

Original Poster
Rep: Reputation: 30
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.
 
  


Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off



Similar Threads
Thread Thread Starter Forum Replies Last Post
html/css retrodict Programming 5 11-01-2004 07:56 PM
html/css hylke Programming 0 06-27-2004 03:39 PM
CSS / HTML in Mozilla jpbarto Programming 4 04-26-2004 09:08 PM
html/css problemo tearinox Programming 4 01-26-2004 03:45 PM
Positioning with CSS in HTML PhilD Programming 7 08-26-2003 11:49 AM

LinuxQuestions.org > Forums > Non-*NIX Forums > General

All times are GMT -5. The time now is 05:06 AM.

Main Menu
Advertisement
My LQ
Write for LQ
LinuxQuestions.org is looking for people interested in writing Editorials, Articles, Reviews, and more. If you'd like to contribute content, let us know.
Main Menu
Syndicate
RSS1  Latest Threads
RSS1  LQ News
Twitter: @linuxquestions
Open Source Consulting | Domain Registration