More CSS/HTML Questions

[simX]

Hey, Rower, I've got another CSS question for you (or anybody else, too! ), since you were so helpful last time. The old post already got archived, though, so I had to start a new thread.

Anyway, here goes. Back in the old thread, you showed how to do columns using just CSS in the very last post. Well, what I'm wondering is, what's the best way to get a horizontal line to appear between every line of text? I'm trying to make a table, and the horizontal lines always help so you know that you're matching up the right row between columns.

You can see a test page to get a feel for what I'm trying to do, and to view the source. Given that CSS seems to be really powerful (and this new way to make tables seems much easier), I don't doubt that there's probably a way to do this, other than putting an HR tag between each line. Right?

By the way, if I want the columns to not go down to the next page, is that as simple as doing the same thing as last time (i.e.: using auto for "margin-left" and "margin-right" and setting a width, or setting the display mode to table)?

Let me know.

 

[AnotherMortal]

Horizontal lines with CSS

I made a side menu on my website that used JavaScript to dynamically draw a menu using an Array (for the contents of the menu) and then DIVs to position the menu and each element. I then set the border of each DIV to have a solid thin line. But I didn't use CSS (though you easily could)

I wish I could find where I put that code...

EDIT:

Okay I hammered out something. Goto www.anothermortal.com/menu.html

Is that what you were looking to do? A table with nested cells?

 

[AnotherMortal]

CSS with nested cells

www.anothermortal.com/foils.html

is that what you wanted?

I created two additional classes for you, a header, and a inner class. Header is for, well, headers, and inner is for each inner cell.

Oh, and I think Safari has some issues with using "Auto" properties. But I can't remember the context of the website I read that at, or if it applied to Version 1.0 or the betas.

 

[simX]

Well, yeah, that's what I wanted, but I was hoping there was a way to do it without having to nest each and every element in the column list inside a DIV tag.

 

[zim]

you could do something like this (i redefined the p tag but you could easily make a custom style out of it):

p {
border-bottom-width: thin;
border-bottom-style: solid;
border-bottom-color: #000000;
}

what will happen is that every time you have a return and a new paragraph, you get a thin black line. i believe that this is closer to what you were looking for. let me know if it is.

 

[bobindashadows]

Originally posted by simX
Well, yeah, that's what I wanted, but I was hoping there was a way to do it without having to nest each and every element in the column list inside a DIV tag.

Warning: I don't know much at all about CSS.

I'm pretty darn sure there's a "border:bottom" CSS tag. I know there is, in fact. I don't know if it would result in what you want... I know you can underline text that way. I've seen it in action, doing dotted lines, full lines, thick lines, skinny lines,all kinds of wonderful things.

 

[simX]

Originally posted by zim
you could do something like this (i redefined the p tag but you could easily make a custom style out of it):

p {
border-bottom-width: thin;
border-bottom-style: solid;
border-bottom-color: #000000;
}

what will happen is that every time you have a return and a new paragraph, you get a thin black line. i believe that this is closer to what you were looking for. let me know if it is.

Closer. Doesn't that still require that you nest each element in the CSS table with a P tag set? I'd just like a black line to be placed in between each lines every time there is a BR tag. In other words, sort of like an underline, but that extends to the sides of the columns in the CSS table.

 

[zim]

Originally posted by simX
Closer. Doesn't that still require that you nest each element in the CSS table with a P tag set? I'd just like a black line to be placed in between each lines every time there is a BR tag. In other words, sort of like an underline, but that extends to the sides of the columns in the CSS table.

I don't think that you are going to be able to do this with the br tag, the best bet is the paragraph, p, tag. You could also do the same thing by making each line a div and assigning the same class to each of them, but that gets you back to where you did not want to go. I think that your best bet is to use the p tag, it will span across the entire page or sides of your columns. Is there any reason why you would not want to use it?

If you do not wish to assign the p tag the style due to it being used else where then define the p only for the div that it is in.

example:

div#content p {
border-bottom-width: thin;
border-bottom-style: solid;
border-bottom-color: #000000;
}

in your html you would have:

<div id="content">
<p>a</p>
<p>b</p>
<p>c</p>
</div>

any p tags outside of that div will act as normal p tags. but you can not use duplicate ids within the same document so you could use a class if needed, simply replace the # with a .

see if that is any better.

 

[simX]

Well, the only reason I didn't want to use the P tag was to avoid having to put the P tag set on each line... I was hoping to just put the data each on their own line and have the whole class add a separator line in between each data line; but since I'm putting a BR tag on each line, I suppose it's not that much more effort to put a P tag set on each line.

 

[simX]

One more problem I've run into: I've added padding inside the CSS columns, but when using a bottom border as was suggested, the lines don't go across the column padding. Is there any way to change that so it goes all the way to the edge of the column DIV?

 

[zim]

You could add the padding to the p tag as well.

example:

p {
padding-left: 1em
border-bottom-width: thin;
border-bottom-style: solid;
border-bottom-color: #000000;
}

i put in 1em for the padding for the font, moving it in from the left, you could substitute that for px or any other measurement. the border will stay flush to the sides. depending on how the rest of the styles are set up, this may not be the best place to add in the text padding.

 

[simX]

I actually fixed most of my problems by changing to a row format instead of a column format, which has the added benefit of grouping data for the same item together.

However, now I'm having a different problem. In Mozilla, the table simply shows up as a dark rectangle with no space for the content. How do I fix that? It shows up fine in Safari and IE.

I tried running it through the HTML validator, but all I got was a stupid error that said that the closing HEAD tag was an error since an existing HEAD tag wasn't open, and that the opening BODY tag didn't belong there. What's up with that? And how do I fix the aforementioned problem?

 

[simX]

One more question

I fixed the problem with the tables in Gecko-based browsers. It seems that I just had to change the overflow behavior from "hidden" to "auto", and it works fine.

Now a completely separate question: how do you ensure that other elements and text don't appear behind an absolutely, fixed, positioned element? For example, I'm fixing the position of a picture on a page. When I do so, though, all the other normal elements start getting rendered behind the image, which is not useful at all. How do I fix this?