Jump to content

(Css) Underlining The Whole Span


Recommended Posts

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 :P . 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>

Link to comment
Share on other sites

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. :D

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...