1

I new in CSS 3 but I so confuse with css when I try to design it follow my template

Example my title css in my template will be:

T-Shirt--------------------------more----

But when Title is too long

T-Shirt for Kid ----------------------------------more----

My border will be long too. I want my boder auto fix with my title it mean when title too long my border will be fix with my width.

Example my width is 700px; title is load from database and my border width is 550px;

and when title is

T-Shirt--------------------------more----

when title too long my border will be fix

T-Shirt For Kid-----------------more----

Like this

How can I do it?

pearcoding
  • 1,149
  • 1
  • 9
  • 28
Bronx
  • 23
  • 1
  • 5

2 Answers2

1

It sounds as if you're trying to reimplement a <fieldset>.

Neil
  • 54,642
  • 8
  • 60
  • 72
0

I'm not sure waht your html structure is like, but try this...

<div id="main">
    <span class="title">Tshirt</span>
    <span class="more">more</span>
</div>

your css

#main {position: relative; border-top: 2px solid #000; width: 700px;}

.title {position: absolute; top: 0; left: 0; margin-top: -10px;}

.more {position: absolute; right: 20px; top: 0; margin-top: -10px;}

Hope this helps.. you can move it around by modifying "top, left, right, and "margin-top".

Josh
  • 605
  • 2
  • 8
  • 16
  • in this way text be hidden by border - how can i do it without hidden – Bronx May 27 '12 at 06:20
  • Try adjusting the numbers. Margin-top: -15px, etc.. play around with the code and you will see what does what. – Josh May 27 '12 at 11:16
  • hi @Josh i try it, thank you very much but if i use it in foreach all title will be the same line. i have no-idea to deal with it :( – Bronx May 29 '12 at 14:03
  • change
    to
    and stick that div inside the foreach
     – Josh May 30 '12 at 05:47
  • hi @Josh thank for u quick reply but i did it and it till not work my title appear in the same place i need it loop line by line :( – Bronx May 31 '12 at 06:39
  • Add "height: 30px" to .main {}.. -- considering you changed #main to .main – Josh Jun 01 '12 at 07:48
  • sorry for reply late because i got fever some days ago. Ok now i solve my problem with this question http://stackoverflow.com/questions/5214127/css-technique-for-a-horizontal-line-with-words-in-the-middle thank you too for help me Josh! – Bronx Jun 04 '12 at 13:52