More than one selector? [Archive]

Charles

06-30-2003, 04:11 PM

You use "class" for many or "id" for just one. See http://www.w3.org/TR/REC-CSS1.

However, From the HTML 4.01 Specification:
Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.
http://www.w3.org/TR/html4/struct/tables.html#h-11.1

See the CSS2 Specification for how to control layout (http://www.w3.org/TR/REC-CSS2).

JDM71488

06-30-2003, 05:33 PM

OMG!!!! This is SO confusing... I can not figure nothing out... Like I went to the link Charles provided BUT I can't understand any of it... :(... Even the tutorials on w3schools.com are confusing... Can anyone provide any links to any simple tutorial sites???

JDM

Charles

06-30-2003, 06:11 PM

Woah, slow down. It should take you about four years to digest all of that stuff. Get the HTML right first. You need to start with working and valid HTML before you add the CSS.

That said, steal ideas from the following three sites:

http://www.rickbull.co.uk/

http://www.agbs.co.uk/

http://www.saintjohns.ang-md.org/

JDM71488

06-30-2003, 07:47 PM

Charles,

When I view the last two web sites source code, that you listed, the menu items are aligned on the bottom of the page? What defines the layout of the page? is it CSS? of DIV? I have heard of DIV, but do not know what it is...

JDM

P.S. Charles... After trying to validate, it came back with 29 errors... :( So I guess I will keep playing around with it. Unless someone can find a site where it will give me rules to follow... Thanks again :)!

Charles

06-30-2003, 08:24 PM

Rules to follow:

1) http://www.w3.org/TR/html4/

2) http://www.w3.org/TR/WCAG10/

3) http://www.w3.org/TR/REC-CSS2/

The whole idea is to create a page that "transitions well". On a non-graphical or legacy graphical browser the menu should be along the bottom of the page. One of the problems with using TABLEs for layout is that with the standard "nav bar on the left" layout the links end up at the top on a non-graphical browser. If you are a sighted person imagine listening to the site and having to review the same list of links with each new page. And if an appeal to compassion doesn't move you, search engines rank your page according to what comes first.

Jonathan

07-01-2003, 12:31 AM

I really like the www.webmonkey.com tutorials... They explain everything pretty well... But you would have to use an ID="" or a Class="".

I use this very much, and I have found it easier.


<STYLE type="text/css">

</STYLE>


THEN...

Put this on the cell...


<TABLE>
<TR>
<TD ALIGN="left" CLASS="your_classification">BLAH</td>
<TD ALIGN="left" CLASS="your_classification">Blah</td>
</TR>
<TR>
<TD ALIGN="left" CLASS="different_classification">fds</td>
<TD ALIGN="left" CLASS="different_classification">de</td>
</TR>
</TABLE>

JDM71488

07-01-2003, 09:16 AM

Well I was up till 4 last night, and looked at sample css layouts, and tutorials and things, copied a template, and starting working on it. You can check it here... (http://www.jdm71488.com/index2.html) . Its not like I want it yet, but I figured I better get the layout of it right, so that I can populate it... The .css file can be viewed ...here. (http://www.jdm71488.com/css/test.css) . You will have to open it with notepad I think, but I also copied that from... umm... thenoodleincident.com i think... but there are things on the css that I dont use. You can see the class id's at the bottom that I used.

Thank you Johnathon...

I played around with it some last night, and got it to here. I pretty much understand how things work on their. BUT I dont know how to make the nav bar move with the document. For instance, if I shrink my browser window, the top and middle windows shrink with it. But the left one stays the same... Also in a table, if you have to cells next to each other in the same row... And one is longer than the other, the other one also moves to the same length. Is there a way to do that. Like in the home page of my site, for example... Im sorry if there is any confusion...

JDM

Jonathan

07-01-2003, 12:35 PM

You have a few things that you could save... This is the only part that I added to... Just look for the 





     Thank you for visiting my web site. It is still undergoing many changes as of right now.
I will add as many things to my web site as possible, but right now, I have to focus on the layout of my site.
With the maximum disk space my site will let me have, I can upload roughly around 500 pictures.
I just have to take them all, so keep checking back now and then to see the progress...
<br />
<br />



     The following is something I found while I was online. It has opened my eyes to a lot.
Not only in baseball but in life. You may want to read it. It makes a lot of since, well in my opinion.
<br />
<br />

JDM71488

07-01-2003, 02:18 PM

Thanks a lot... I added text-indent 2cm to my P {} in my CSS. But Im still confused on some things...

1.) When you resize the browser window of my index2 page...
all the boxes automatically resize except for the nav bar. Why is this???

2.) How can I make a box where it will contain two columns, and it will size to the length of the longest column. Like a table row with two cells???

I would like to keep basically the same layout as my tabled pages. But with CSS layout... Any suggestions?

JDM

Jonathan

07-01-2003, 02:59 PM

There are a couple of ways to do columns...

<table border="0" cellpadding="2" cellspacing="0">
<tr>
<td>This is a table cell or column</td>
<td>This is another column</td>
</tr>
<td>row 2 column 1</td>
<td>row 2 column 2</td>
</tr>
</table>



<TABLE BORDER=1 CELLPADDING=4 RULES=GROUPS FRAME=BOX>

<COLGROUP></COLGROUP>
<COLGROUP SPAN=3></COLGROUP>




-------------------

Is your navbar an iframe? because iframes don't resize, as far as I know...

JDM71488

07-01-2003, 04:05 PM

No my navbar is not an iframe... Here is what I have...

Well Id rather not explain it... You can just look it you dont mind...

Index2 (http://www.jdm71488.com/index2.html) and the CSS (http://www.jdm71488.com/css/test.css) I will not alter it until you look at it...

How can I get my Nav bar and my paragraphs side by side, and right under my title bar???

JDM

Charles

07-01-2003, 04:22 PM

1) width: 175px;

2) That gets a little tricky. Try something like:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<title>Example</title>
<style type="text/css">

</style>
<div id="left"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipitlobortis nisl ut aliquip ex ea commodo consequat.</p></div>
<div id="right"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipitlobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor *** soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.</p></div>

Jonathan

07-01-2003, 04:26 PM

Just to let you know... you left a '>' off the paragraph sign in the second paragraph.

Then you should list the text.css file like this:
body
{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-family: verdana, arial, helvetica, sans-serif;
color:;
background-color:silver;
}

a
{
text-decoration:none;
font-weight:none;
color:red;
outline:none;
font-size:10pt;
}

a:visited
{
color:red;
text-decoration:none;
font-size:10pt;
}

a:active
{
color:red;
text-decoration:none;
font-size:10pt;
}

a:hover
{
color:black;
text-decoration:none;
font-size:10pt;
}

p
{
font-size: 12px;
text-indent:2cm;
}

#top
{margin: 0px 0px 0px 0px;
border: 1px solid;
padding:5px;
border-color:black;
background:black;
height: 25px;
}

#left
{
margin: 0px 0px 0px 0px;
padding:5px;
border: 1px solid;
border-color:black;
background:white;
width: 175px;
}

#middle
{
margin: 0px 0px 0px 185px;
padding:5px;
border: 1px solid;
border-color:black;
background:white;
}

#outside
{
margin: 50px 50px 50px 50px;
border: 5px solid;
border-color:black;
background:white;
}

.th1
{
font-family:verdana;
font-size:14px;
background-color:red;
color:white
}

.th2
{
font-family:verdana;
font-size:14px;
background-color:blue;
color:white

}

.td1
{
font-family:tahoma;
font-size:12px;
background-color:black;
color:red
}

.td2
{
font-family:comic sans ms;
font-size:12px;
background-color:black;
color:white
}

.tnav
{
width:100px;
}

.title
{
font-family:verdana;
font-size:14px;
color:white;
}

-----------------------------------

If it is already like that I apologize, it didn't come out on my computer like this...

-----------------------------------

My best guess about this would be that you specified a width with the '#left'

It should look like so:


#left
{
margin: 0px 0px 0px 0px;
padding:5px;
border: 1px solid;
border-color:black;
background:white;
}

JDM71488

07-01-2003, 04:45 PM

To save you some trouble here is my index 2

<div id="outside">
<div id="title"><font class="title>My title...</font></div>
<div id="navbar">nav bar</div>
<div id="body">body...asdlfjalsjdfljsadf</div>
</div>

That didnt help any... :( It still is not aligned right...

JDM * I really appreciate this guys...

Charles

07-01-2003, 04:55 PM

That needs to be:

<div id="outside">
<div id="title"><h1>My title...</h1></div>
<div id="navbar">nav bar</div>
<div id="body">body...asdlfjalsjdfljsadf</div>
</div>

And you really should be using the Strict DTD and not the Transitional.

Jonathan

07-01-2003, 05:00 PM

I am sorry... but I helped as much as I can... I will see what I can do when I get home because I am at a friends house... and he doesn't have a html editor... I highly recommend HTML-Kit though... it is killer software... and totaly free! :) that is my favorite part.

Well... I will be home in about an hour.. but I will still look at the source code again... so don't go away...

I will wait.. I think Charles is right... let me know and then I will return and continue if he isn't

JDM71488

07-01-2003, 05:07 PM

Well from what Charles said... I think he meant to change my DOCTYPE, which I did... To this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

And the only difference in charles' div layout was he changed the <font class> to <h1>. Well I may of missed something else, BUT my document is the same as before, thank you for the hint on the doctype as well...

I will keep checking back so until you get home, thank you...

JDM

Charles

07-01-2003, 05:16 PM

If you are using XHTML 1.0 then your DOCTYPE should be:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

You are trying to make CSS do someting that it doesn't do so well. Yuo can try various tricks but some layouts that woork well on a screen using TABLEs don't work so well with CSS. One trick that I've seen is to use a background image in the containing element. (http://www.saintjohns.ang-md.org/)

JDM71488

07-01-2003, 05:29 PM

I understand... It sucks though... I will keep playing with it though. Is there any kind of way to make two ids inside a box, and specify the width of them... If I could do that, I could place them under my <div id="title"> and inclose it in the <div id="outside"> therefore having something like a table layout with the nav bar, and my body being in a row...

JDM

Charles

07-01-2003, 05:59 PM

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<title>Example</title>
<style type="text/css">

</style>
<div id="body"><h1>Lorem ipsum</h1>
<div id="left"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipitlobortis nisl ut aliquip ex ea commodo consequat.</p></div>
<div id="right"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipitlobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor *** soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.</p></div>
</div>

Jonathan

07-01-2003, 06:04 PM

Why are you doing this in a different language???

Charles

07-01-2003, 06:13 PM

Originally posted by Jonathan
Why are you doing this in a different language??? See http://www.straightdope.com/columns/010216.html and, since you are a fellow fan of HTML-Kit, http://www.chamisplace.com/asp/hkp.asp?f=cmrandomcontent.

Jonathan

07-01-2003, 06:16 PM

how do you do that quote thing?!?!

And thanks ofr the plug in... :)

JDM71488

07-01-2003, 06:21 PM

Charles that was a great help, Im almost there... Im stuck now... View my site, I wont change it... index2 (http://www.jdm71488.com/index2.html)

css
-------

#title
{
margin: 50px 50px 0px 50px;
border: 1px solid;
padding:5px;
border-color:black;
background:black;
height: 15px;
}

#col1
{
margin: 0px 0px 0px 0px;
width:30%;
float:left;
padding:5px;
border: 1px solid;
border-color:black;
background:white;
}

#col2
{
margin: 0px 0px 0px 0px;
width:70%;
float:left;
padding:5px;
border: 1px solid;
border-color:black;
background:white;
}

#outside
{
margin: 20px 50px 50px 50px;
border: 2px solid;
border-color:black;
background:white;
}

and html
-------------
<div id="outside">
<div id="title"><h2>www.JDM71488.com</h2></div>
<div id="col1">col 1</div>
<div id="col2">col 2</div>
</div>

Its just not all inside the outside box.... I am getting lost with all the widths and margins and stuff...

Thanks guys!!!

JDM

spufi

07-01-2003, 11:42 PM

I just wanted to say when I saw the newest version I got a chuckle out of it because it's basically the layout that I use. I've been wanting to do the version that you are trying to do for sometime, but I never got around to it.

I will point out that you can clean up your CSS a liitle. He's a rework of just a hint of it.

#col2
{
margin: 0px;
width:70%;
float:left;
padding:5px;
border: 1px solid #000;
background:#FFF;
}

JDM71488

07-02-2003, 08:09 AM

LOL... Chuckle? Well I took your advice on cleaning it up a little. If you are going to work on the script then send me a copy when you finish, because mine has went to crap... I had it so where the title was in the outside box, and the width of the columns where right, but they just werent in the box... I guess I messed it up somehow, and started over because I got frustrated... :( I am now where I was on my previous post. I am working from right there.

Another question... Can I just specify in percent? instead of pixels? It may make it easier?

JDM

spufi

07-02-2003, 11:02 AM

Unless I missed something I don't see where you need a script since you are dealing with pure XHTML and CSS. Using percentages is going to help because it will make your layout adjust to any resolution.

JDM71488

07-02-2003, 01:49 PM

Sorry to keep bugging everyone, but how would you make the div not span all the way across the page? This should be my last question... Sorry once again...

Ok... I tried to braw a picture but it didnt come out right...

But when my navbar is set to 20% so it spans 20% from the left, but when my content starts, it is on the next line starting from where the navbar ended. Is there a break of some sort in there or what???

Sorry once again, this should be my last question once I get this figured out...

JDM

Jonathan

07-02-2003, 01:52 PM

Just use a table to do this

JDM71488

07-02-2003, 02:08 PM

I guess I could, but I thought I was trying to steer away from tables?

JDM

Charles

07-02-2003, 02:08 PM

Originally posted by Jonathan
Just use a table to do this From the HTML 4.01 Specification:
Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.
http://www.w3.org/TR/html4/struct/tables.html#h-11.1