html/css layout <hr> help wanted!

html/css layout <hr> help wanted! - Printable Version

+- kanji koohii FORUM (http://forum.koohii.com)
+-- Forum: Learning Japanese (http://forum.koohii.com/forum-4.html)
+--- Forum: Off topic (http://forum.koohii.com/forum-13.html)
+--- Thread: html/css layout <hr> help wanted! (/thread-9222.html)

html/css layout <hr> help wanted! - Mesqueeb - 2012-03-22

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!

html/css layout <hr> help wanted! - Blahah - 2012-03-22

For what program, Anki?

html/css layout <hr> help wanted! - Mesqueeb - 2012-03-23

How could you guess. ^^

html/css layout <hr> help wanted! - Mesqueeb - 2012-03-23

You see, my current

<hr>
日本語
<hr>
blablabla

<hr>
中国語
<hr>
blablabla

takes up way too much space...

html/css layout <hr> help wanted! - Clasu - 2012-03-23

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

html/css layout <hr> help wanted! - Blahah - 2012-03-23

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}}

html/css layout <hr> help wanted! - Mesqueeb - 2012-03-23

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

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

Cheers!