html/css layout <hr> help wanted!

Index » 喫茶店 (Koohii Lounge)

  • 1
 
Reply #1 - 2012 March 22, 3:53 pm
Mesqueeb Member
From: Japan Registered: 2008-10-14 Posts: 253 Website

Hi, I would like to create a card with a nice looking HTML/CSS based line which has text on it.
Something like this:

-----中国語-----
blablabla
-----日本語-----
blablaa


Can anyone help me? ^^

Thanks!

Reply #2 - 2012 March 22, 6:00 pm
Blahah Member
From: Cambridge, UK Registered: 2008-07-15 Posts: 715 Website

For what program, Anki?

Reply #3 - 2012 March 23, 3:15 am
Mesqueeb Member
From: Japan Registered: 2008-10-14 Posts: 253 Website

How could you guess. ^^

Advertising (register and sign in to hide this)
JapanesePod101 Sponsor
 
JapanesePod101
Reply #4 - 2012 March 23, 9:18 am
Mesqueeb Member
From: Japan Registered: 2008-10-14 Posts: 253 Website

You see, my current

<hr>
日本語
<hr>
blablabla

<hr>
中国語
<hr>
blablabla


takes up way too much space...

Reply #5 - 2012 March 23, 10:36 am
Clasu Member
From: Finland Registered: 2011-07-14 Posts: 51

Found something like this from google, might be what you're looking for:

<div style="height: 1px; background-color: black; text-align: center; margin-top: 20px; margin-bottom:20px">
  <span style="background-color: white; position: relative; top: -0.5em; font-size: 20px">
    日本語
  </span>
</div>

blaablaa

<div style="height: 1px; background-color: black; text-align: center; margin-top: 20px; margin-bottom:20px">
  <span style="background-color: white; position: relative; top: -0.5em; font-size: 20px">
    中国語
  </span>
</div>

blaablaa

Reply #6 - 2012 March 23, 11:33 am
Blahah Member
From: Cambridge, UK Registered: 2008-07-15 Posts: 715 Website

Or you could do this:
css...

Code:

h2 { width:100%; text-align:center; border-bottom: 1px solid #000;
line-height:0.1em; margin:10px 0 20px; } 
h2 span { background:#fff; padding:0 10px; }​

in the card...

Code:

<h2><span>日本語</span></h2>
{{Japanese}}
<h2><span>中国語</span></h2>
{{Chinese}}

Last edited by Blahah (2012 March 23, 11:35 am)

Reply #7 - 2012 March 23, 6:32 pm
Mesqueeb Member
From: Japan Registered: 2008-10-14 Posts: 253 Website

Omg this is perfect!!! My cards look much nicer now!!

http://dl.dropbox.com/u/8876552/Temp/card-layout.png

Cheers!

  • 1