(Css) Underlining The Whole Span

[2bigpigs]

I've been searching for a while but haven't found what i need.

I'd like to achieve something like this:

The underline continues even if the ____________________________________________

line ends and it spans the whole div/span________________________________________

 

( ^ Cheap trick . I hope i was clear enough. I really appreciate all the help )

 

Edit:

Temporary fix i found for myself:

li
{width:100%;
border-bottom-style:solid;
border-bottom-width:1px;
list-style-type: none;
padding-bottom:4px;
border-bottom-color:black;
}

 

This is a pain since i need PHP to wrap each line in <li>

[viclou]

You should add this to ensure compatibility across many browsers:

display:inline-block;

[2bigpigs]

I hate the IPB3 WSYISWYG editor.

 

Thanks, viclou.

[Wizard]

Maybe span isn't the element you're looking for. What's the application?

[2bigpigs]

Actually, I've switched from span to using a table and lists.

My aim is to give a ruled-book feel to the page so it's easier to read / more original.

 

And my method isn't working properly, Here's an example page:

http://www.slamsite.....php?entry_id=1

 

The lines appear only after a new line (<br/>) but not if the line was wrapped ( which is understandable since it's a border-bottom). It messes up on 'Favorite song' and 'Favorite Quote'.

If you'll look at the site banner, You can see what i'm aiming for

 

The site is still very much in development but i'd like to get this part right.

 

This is the code what i'm currently using:

 

<?php

//Deep inside a class...
$this->query( " SELECT fields_data FROM table WHERE page_id = $id");
$assoc = $this->DB->get();
$this->fields = explode( "\0" ,$assoc['fields_data'] ) );


//Later on

echo '<table class="page">';

$i = 0;
foreach($this->fields as &$n)
{echo '<tr><td>
<field>' , $n ,':</field></td>
<td  class="entry"><li>' ,
str_replace("\n", '</li><br/><li>', ( htmlentities(trim($this->field_data[$i])) ))  ,'</li></td></tr>';

$i++;
}
echo '</table>';
?>

 

 

CSS:

 

.page li
{display:inline-block;
width:100%;
border-bottom-style:solid;
border-bottom-width:2px;
list-style-type: none;
padding-bottom:4px;
border-bottom-color:black;
}

 

 

The whole background, Fields and data are all dynamic so they'll vary from page to page.

[anush]

2bigpigs are't you preparing for your exams.it seems you are busy with coding man you can do it after 26 march.

[Ice IT Support]

Unless you set word-wrap to none, causing unneeded page stretching, CSS can't help. You will have to tell PHP to insert a <br> / <li> / whatever tag after x amount of characters.

[2bigpigs]

But that may require me to know how large the user's screen is going to be or we could have a lot of wasted space on larger screens.. It's a good idea that's bound to work but i don't mind trying all sorts of stuff to get this to work.

Plus the more independent it is, the easier it is for me to change stuff around without breaking. I was planning on adding fonts and font-sizes after my exams ( Which would be in may )

 

I had another approach: Underline the text.

But that stops when the text ends. Is there a way to stretch it across ( using a HUGE tab ( "\t" ) ) or right aligning a blank space so that it stretches?

 

@Anush: I don't code much anymore. It's usually half an hour at night.

[anush]

Ok @2bigpigs best of luck

[2bigpigs]

Same to you

I've got a huge list of things to do when the exams are over...

[anush]

Ok man the same here

[alemaopb]

Nice shot !