Jump to content

p, id, and class in divs


IanS
 Share

Recommended Posts

I'm trying to avoid using 'p' inside a div as it causes a line-break and I want the text right at the top of the box.Have font family and style set in outer div using id, which works, but cannot make an inner div (inside the other) recognise the style set in the id for this.Tried using 'span class="mystyle"' here, but this doesn't work either.Can anyone suggest a legal way of doing what I'm trying to do, I'm obviously not getting it at all. (Old-timer still trying to port my brain over from tables...)Been reading through the w3 site and forum for a week now, btw, can't find what I need to know.thanks in advance,IanPS. or if I'm talking nonsense here, please tell what isn't nonsense?! :)

Link to comment
Share on other sites

It's semantically incorrect to not use paragraphs for text (and invalid, I believe). If you don't want the "line-break" (not quite sure what you are referring to), remove it using CSS.

Link to comment
Share on other sites

How do you remove a line-break with CSS?No live link yet. Code below.Okay, this is actually working as far as lining-up the the text with the top of the box is concerned. (It has to line up with the top of the logo on it's left.)However, the second div for text isn't getting the font change defined in the id (#textContainerTWO), its just coming up as default Times.This is so easy, what am I missing?Or is it just so wrong???stylesheet -.....#content { width: 350px; padding: 0 10px 10px 0; margin: 0;}#logoContainer { float: left; width: 107px; height: 89px; margin-bottom: 1px;}#textContainerONE { padding:0; margin:0; font-family: Verdana, sans serif; font-size:9pt; color:#44444; line-height: 1.3;}#textContainerTWO { (-- this one doesn't work) padding:0; margin:0; font-family: "Century Gothic", Verdana, Arial, Helvetica, sans-serif; font-size:10pt; color:#757978; line-height: 1.3;}html -.....<div id=content><div id=logoContainer><img src="index_files/logo1.jpg" border=0></a></div><div id=textContainerONE><b>Title</b><br />sub-title link<br />sub-title link<br />sub-title link<br /></div><div class="clearer"></div><div id=logoContainer><img src="index_files/logo2.jpg" border=0></a></div><div id=textContainerTWO><b>Title</b> <br />sub-title link <br />sub-title link <br />sub-title link <br /></div><div class="clearer"></div></div>

Link to comment
Share on other sites

you should try putting your id's in quotes, as well as any other inline style declarations, and move all your CSS declarations to the stylesheet if possible. check out the validator (see my sig), it can you help you catch little mistakes in your code (which I see a few more of). It's good practice to always declare a size (relative or absolute) for things like line height, border, etc and maybe even good practice to maintain consistency between them, i.e. using all px instead of mixing pixels and points?. You should also avoid using <br> tags, that's what margin and padding are for.

Link to comment
Share on other sites

I routinely set the margin and padding of <p> elements to 0. That eliminates empty space beneath paragraphs, and above the first one. That generally also eliminates the need for <br> elements, since beginning a new <p> now has the same effect. If you DO want space before or (more usually) after a <p> element, set it's margin-bottom property to some positive value.

Link to comment
Share on other sites

I understood that using px to set font size doesn't work in IE? That's why I used pt. (Haven't tried px on IE yet.)Thanks, setting margins, etc., to 0 in p sorted out that problem.I thought it would be something blindingly obvious, but not immediately apparent (hey, that's a good description of CSS for the newbie! Or maybe I should just make it my sig.)cheers,IanPS. Still not sure about 'relative' and 'absolute' or when/how this works...

Link to comment
Share on other sites

It's semantically incorrect to not use paragraphs for text (and invalid, I believe).
Even if the text is inside a div? I know that's not invalid, because I do it and it does validate using a XHTML Strict DTD, but is it really semantically incorrect to put bare text inside a div?
Link to comment
Share on other sites

Don't confuse semantics with structural validity. You can put a footnote in a <h1> element and get validated. Note that Synook tends to be pretty stiff when it comes to semantics. I don't mean that judgmentally. The point being made is simply that text belongs in a text-oriented container, not simply a general-purpose container.FWIW, I have occasionally discovered that I can clear up cross-browser problems by putting "naked" text in a <p> element. List-style drop-down menus come immediately to mind.

Link to comment
Share on other sites

PS. Still not sure about 'relative' and 'absolute' or when/how this works...
relative units of measurement refer to those units who's size is not fixed to anything, more that their size is relative to something else. Examples are %'s and em's, which are relative to their parent element and browser font-magnification/size, respectively.absolute units of measurement are fixed, like pixels. 100px is a 100px, no matter what the screen size is. Resolution is another matter entirely...
Link to comment
Share on other sites

Many thanks allI'll redo the pages to make sure all is as it should be.Better that than run into trouble later and can't figure out why...I only used the 'naked' text in an attempt to get rid of the white space above the paragraph. All sorted now.Actually, this arises from 'design-think' as different from 'coding-think'. I'm a designer by nature, not a coder. So sometimes the creating process is looking for solutions that can get a bit 'off the wall' if there isn't a proper understanding of the coding rules. But I still prefer 'hand-crafting' to drowning in 'dreamweaver' anyday!cheers,IanPS. Trying to mark this one as 'solved' but can't find where to do that.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...