7 Replies - 4436 Views - Last Post: 31 May 2011 - 09:29 AM

#1 eZACKe  Icon User is offline

  • Garbage Collector

Reputation: 120
  • View blog
  • Posts: 1,276
  • Joined: 01-June 09

Line Separator?

Posted 29 May 2011 - 09:10 PM

I'm not exactly sure how to do this with CSS, and I'm having trouble googling about it too because I'm not sure what it's called.

What I want to do is have a line going across my div separating different elements of text. Basically, what I am going for is exactly how the DIC comments section is set up on your profile page.

Is this a special element or do they use an image? I'd really like to do it without an image, is this possible?

Thanks for the help!

Is This A Good Question/Topic? 0
  • +

Replies To: Line Separator?

#2 Martyr2  Icon User is offline

  • Programming Theoretician
  • member icon

Reputation: 3873
  • View blog
  • Posts: 11,407
  • Joined: 18-April 07

Re: Line Separator?

Posted 29 May 2011 - 09:19 PM

This is a border-bottom CSS style applied to a div element.

div {
   border-bottom: #c0c0c0 solid 1px;
}



The above statement will put a gray line across the bottom of a div element, makes it solid and 1px wide.

:)
Was This Post Helpful? 2
  • +
  • -

#3 eZACKe  Icon User is offline

  • Garbage Collector

Reputation: 120
  • View blog
  • Posts: 1,276
  • Joined: 01-June 09

Re: Line Separator?

Posted 29 May 2011 - 09:30 PM

Oh that was simple enough! :bigsmile:

Thanks for the help!
Was This Post Helpful? 0
  • +
  • -

#4 eZACKe  Icon User is offline

  • Garbage Collector

Reputation: 120
  • View blog
  • Posts: 1,276
  • Joined: 01-June 09

Re: Line Separator?

Posted 30 May 2011 - 08:49 AM

I've tried doing that, and I'm not getting exactly what I want.

Here's my HTML and CSS (with a little php thrown in to print comments):

<div id="thecomments">
		<?php
		for($j = 0; $j < $viewnumberComments; ++$j)
		{
			echo '<span class="commentformat">' . ${viewcommenterbox.$j} . "<br/>" . ${viewtimebox.$j} . "<br/>" . ${viewcommentbox.$j} . "<br/><br/></span>";
		}
		?>
		</div>



#thecomments {
	position: relative;
	left: 30px;
	top: 30px;
}

.commentformat {
	border-bottom: #c0c0c0 solid 1px;
	width: 200px;
	/*background-color: gray;*/
}



Right now it's underlining everything between the commetformat class tags. I want just one line underneath each comment.

Here's what it's doing:
Posted Image
Was This Post Helpful? 0
  • +
  • -

#5 Shane Hudson  Icon User is offline

  • D.I.C Technophile
  • member icon

Reputation: 341
  • View blog
  • Posts: 1,281
  • Joined: 06-December 09

Re: Line Separator?

Posted 31 May 2011 - 02:17 AM

Personally I would have each peice of data (such as viewcommentbox) in separate divs or spans. This allows you to easily restyle them later as well as to add the border to the last one.
Was This Post Helpful? 0
  • +
  • -

#6 nerd323  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 13
  • Joined: 27-March 11

Re: Line Separator?

Posted 31 May 2011 - 03:33 AM

I would actually just put a <hr /> tag, that would be so much easier.
Was This Post Helpful? 1
  • +
  • -

#7 eZACKe  Icon User is offline

  • Garbage Collector

Reputation: 120
  • View blog
  • Posts: 1,276
  • Joined: 01-June 09

Re: Line Separator?

Posted 31 May 2011 - 06:46 AM

I didn't evem know the <hr /> tag existed. Thanks for pointing that out, it's exactly what I was looking for!
Was This Post Helpful? 0
  • +
  • -

#8 calebjonasson  Icon User is offline

  • $bert = new DragonUnicorn(); $bert->rawr();
  • member icon

Reputation: 198
  • View blog
  • Posts: 973
  • Joined: 28-February 09

Re: Line Separator?

Posted 31 May 2011 - 09:29 AM

It is still better to wrap each thing in divs. This is best practice because it allows for one step styling with a style sheet and will allow simple tweaks in the style sheet when it comes time to test against browser.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1