Topic: drop caps and css

I am trying to make a drop cap using CSS but I can't seem to get it to work. Can someone help me out here? I tried using the first letter attribute but couldn't get it to work. I am trying to make a drop cap on the work marketing.
http://test.bus.olemiss.edu/departments/marketing/

The css file is at
http://test.bus.olemiss.edu/departments/marketing/text.css


Josh

One more thing....

On this page: http://test.bus.olemiss.edu/departments/marketing/cingene.asp

Under teaching interests I am trying to get rid of the space between executive programs, mba, doctoral, undergraduate and the information below them. But I can't because the <p class="nfo"> adds a line there. How do I get rid of this?

Josh

I've only been successful with the drop cap by wrapping the letter in a seperate <span></span> with a particular class, and setting the stlye attributes for that class.

I think you'll need to clarify on the second issue - what space are we talking about exactly?

I am trying to get rid of the space between the subheading executive programs and launching new products.

Josh

Ok.

For starters, the 'executive programs' text should be within header tags rather than <p>. The underline should be built into the CSS for that particular header (h3, I'm thinking) rather than in the markup.

After that, you'll just need to adjust your margins for both the header and the 'nfo' class so that the space is reduced to where you want it.

Expanding on DL-44's comment about span
Russ Weakly has a nice tutorial: http://css.maxdesign.com.au/floatutorial/tutorial0701.htm

when I changed all the <p> tags to <h2> or <h3> depending on the size of the header it put an extra line of space between the heading and the text below it. The first page is one that has <h2> <h3> on the headings instead of <p>
http://test.bus.olemiss.edu/departments/marketing/cingene.asp

the second has <p> tags on all the headings. I want it to look like this second page. How do I use <h3> and not get the extra line of space between the heading and the text.


Josh

Sorry forgot the second page. Here it is.
http://test.bus.olemiss.edu/departments/marketing/snoble.asp

Josh

quote:

---

After that, you'll just need to adjust your margins for both the header and the 'nfo' class so that the space is reduced to where you want it.

---

Each browser has it's own preset margins for all the elements. To get it the way you want it, you'll need to specify the margins yourself.

You can also do away with *all* of those table cells in the content area.

You really don't need tables at all, but if you are going to use them, that whole content area should be one single cell. That would simplify things *so* much...

And to go further, you have a whole lot of information listed on that page that are - well - lists. They should be coded as such. If you don't want the bullets - again, set it in your CSS.

You'll also want to do some cross browser checking, as your navigation layout is a bit out of place in mozilla.

I didn't do the content for the page. Some guy made the page in frontpage and it had terrible code and cells everywhere. All the text attributes were hard coded into the page and so on. I was just starting with the text attributes trying to get these profiles done so the page can go live as soon as possible. Right now there is just an old site that has no info, I was just trying to get it decent enough to go up. Then I could go back and make changes. This is the reason why I wish I was the only person working on the page b/c I would have never done it like that. But I will take your advice and take out all that crap. I am still not too proficient w/ CSS so any really good places to go would help me out.

Thanks,

Josh

I tried putting the headings in <h1> <h2> etc... but it doesn't work. It ignores my font properties. CSS is such a pain in the neck

Ok I started over from scratch and just took the raw info and put it in lists. How does this look?
http://test.bus.olemiss.edu/departments/marketing/cingene2.asp

Now I am going to start formatting it using CSS.

Josh

Looks much better.

I don't understand what you're saying about the headers ingoring your font properties though - do you have an example?

The headers should really be placed outside the <ul> tags. Of course, this will add space again most likely, but palying with the margins for *both* the header and the lsit will do away with that.

Sorry the post about the header tags ignoring the font properties was before I started over from scratch. I'm not having that problem anymore. Now I am beginning to see how CSS really saves time. It is much easier to read that page now than it was before. Thanks for the help.


Josh

CSS is truly a beautiful thing.

Of course, it also works best with well strcutred mark-up. Understandably, in your situation you don't have full control, but remember going forward that the more properly structred and 'semantically correct' you can make your mark-up, the better control you will have, and the better you CSS can interact with the page.


For more CSS info and resources, check out both the tutorials and the links at the Gurus Network:
http://development.gurusnetwork.com/tutorials/coding/css/
http://development.gurusnetwork.com/links/15/date/

Here is a page a redid tonight. I wasn't for sure how to do this page without tables but I just decided to use a lot of inline lists. I'm sure this isn't the best way b/c there seems like a lot of code but it's the only way I would think of getting everything to line up right since just about every item in every list is a different length. Any suggestions on how to do this a different way for future reference? Also I want to put all the attributes for this faculty directory page in their own CSS file b/c that is a lot of stuff to load when I won't ever use it on any other page. Can I just link to the sheet at the top of the factory profile page just after include statement?

Josh

sorry forgot to post the link again.
http://test.bus.olemiss.edu/departments/marketing/directory.asp

josh

What's rather funny in this case, is that this is a *perfect* example of when a table is the appropriate tag =)

This is about as solid an example of 'tabular data' as you could ask for.

The push for web standards and for 'semantically correct' mark up is not about excluding the use of tables altogether, but rather about using the right tags for the right reasons.

So tables should ideally not be used for general page layout, but *should* be used to display this type of information.

Hope that helps

=)

quote:

---

Can I just link to the sheet at the top of the factory profile page just after include statement?

---

Yes, you can link to as many style sheets as you'd like technically. I persoanlly find it can get pretty messy if you start breaking your stylesheets up though.
I generally stick with one 'standard' stylesheet, one print stylesheet, and occasionally some other 'special purpose' stylesheet.

You should be able to condense, consolidate, and minimize the content of the stylesheet by making some generic classes. You can call more than one class for any given element, which makes that aspect easier.

For example, I *always* have these in my stylesheets -

.pad

	{

	padding:5px;

	}

	

.nopad

	{

	padding:0;

	}



.margin

	{

	margin:5px;

	}



.nomargin

	{

	margin:0;

	}

	

.alignc

	{

	text-align:center;

	margin:0 auto;

	}

	

.alignl	{text-align:left;}

.alignr	{text-align:right;}

	

.floatl

	{float:left;}

	

.floatr

	{float:right;}



.clear	{

	clear:both;

	}



.border

	{border:#000 1px solid;}

Or some variation thereof.