CSS <hr>

[Brends]

Hi Anybody that can help :)

xldesign.co.za/New/index.html

The two lines above the text at the top under the banner have been done using a table but I really do need an hr tag to do this further down the page. I need the hr to look exactly like the line or table border being just the top and the bottom of that table. Hope I'm making sense. I would also prefer to use a hr tag instead of the table. Less code.

Please brilliant people I'm on a deadline for this site and struggling! Thinking of starting again and raw coding using just html and tables. Seems like that might be going backwards though.

Brends

[Beverleyh]

Do you just mean a coloured, 1px line?


hr { height:0; border:solid #E2D8CF 0; border-top-width:1px; }

[Brends]

Beverleyh you are an absolute star. Yay yay yay. :) Thank you so much :) One last quesiton. Where do I stipulate the width? in the css or in the actual html page? and if I want to make it 900px wide can you please give me that as well. Am I being lazy?

[Beverleyh]

You would just add the width to the CSS definitions;
hr { height:0; border:solid #E2D8CF 0; border-top-width:1px; width:900px; }Or, it it's contained within something else, let the parent element dictate the width.

You might also want to throw margin:auto; in there too to make it align centrally.

[Brends]

My client wants everything to be fixed. So can't let parent element dictate. have to specify to be on the safe side I think. I actually did this in the <hr> tag <hr width="850px" align=center> and it seems to be working fine :) Thanks for your help I really appreciate it.

[Beverleyh]

Your using an HTML5 doctype though so its best to remove width="850px" and align=center and do it with CSS instead - they're invalid attributes in HTML5.

Hope that helps.

[Brends]

Beverleyh can I ask one last question. Can you have another look for me please. xldesign.co.za/New/index.html. Do you see the text below Cobblewalk and Agrimark. Why can't I get it to line up with the rest of the site. i.e. the text seems to go over. I have set the width of those tables and they are all the same. If you look at the Lielenfontein one the text ends just where its supposed to. Sorry to be asking so many questions but I just don't understand it? does it have something to do with it being justified?

[Beverleyh]

I *think* I understand but I'm not 100% sure. Do you mean how the Agrimark/Cobble Walk text is a bit wider than the peachy title bars?

I think that's because of default cell-spacing and cell-padding in tables - if you don't define them yourself, browsers will add their own, and they are different depending on which you're using. You used to be able to (re)set those in HTML4 like this;
<table border="0" cellspacing="2" cellpadding="2" width="100%">But sadly that doesn't work in HTML5. It has to be done in the CSS, which is probably a good idea so you can explicitly define the paddings that you want on the actual <td>s afterwards.

Try this in your stylesheet;
table { width:100%; border-spacing:0; border-collapse:collapse; border:0; }And then on the table cells you can define your own paddings which should then be the same in all browsers - eg;
td { padding:2px 4px; }

[Beverleyh]

ps - For the benefit of others reading this thread, it's worth noting that these table attributes doesn't work in HTML5 either;
<td valign="middle" align="center">You would need to move those to the CSS too. Something like;
td { vertical-align:middle; text-align:center; }You've already done that Brends, but I'm just putting it in this thread for future reference.

[Brends]

Yes I mean the Agrimark/Cobble Walk text is a bit wider than the peachy title bars? I can't seem to get the padding to work? Not sure how to move forward? I"m sure you are right but possibly I'm putting it all in the wrong place? Can you have a look at my styles.css? its at the bottom of the page. and then I also put padding:2px in the actual <td>. But nothing is changing.

[Beverleyh]

A 2px padding is probably too small to do anything noticeable. Plus doing it that way below would be changing the padding on ALL tds.

If you only want to affect the padding for that one td, you can either give it a class and define specific CSS for it in the stylesheet, OR you can add an inline-style along with your others - about 10px on the left and right look like they would do it;
<td style="vertical-align: top; text-align: justify; width: 850px; padding-right: 10px; padding-left: 10px;" class="">How do you marry a niche rural agri brand with the world of social media? With an interactive, informative and social facebook page! The Agrimark facebook page has grown to a community of almost 10 000 members in just 20 months and is growing by the day.</td>

[Brends]

Beverleyh did I tell you I love you? Thank you so much. That was a very simple solution and 12px does it for me :) Thanks so much and have a fabulous day.

[Beverleyh]

:D No problem - spreading the love is what makes DD such a nice place to visit.

Have a great day also.