CODEWITHSUNDEEP
htmlcss
avasin
avasin

Reputation: 9726

Line under text with spaces. Is it possible via html & css?

I've spent hours on this. I tried to describe issue on attached image. It is necessary to wrap text by white lines with some spaces between lines & texts.

enter image description here

First solution i thought about - just to put text on line using smth line "margin-top:-20px;" and give the text container custom background (for example, gray). But it's not a solution, because container's background is transparent :(

I thought to make smth like this (using "float:left"):

<div class="line"></div>
<div class="text">TEXT</div>
<div class="line"></div>
<div class="text">TEXT</div>
<div class="line"></div>

but if i use float:left for all elements there is anouther issue: white line should end at the right side of container.

Maybe there are some css best-practices for this issue, or somebody could give some advice..? Any ideas will be helpful :)!

Upvotes: 8

Views: 11671

Answers (5)

Nikola K.
Nikola K.

Reputation: 7155

HTML:

<div class="line"></div>
<div class="text">TEXT</div>
<div class="line"></div>

CSS:

.line {
    width: 100px;
    padding-top: 15px; /* font-size / 2  = (30/2=15) */
    border-bottom: solid 1px #000;
    float: left;
}
.text {
    font-size: 30px;
    font-weight: bold;
    color: #000;
    float: left; 
}

enter image description here

Live demo: jsFiddle

jQuery method:

HTML:

<div id="container">
    <div class="line"></div>
    <div class="text">TEXT</div>
    <div class="line"></div>
</div>

CSS:

#container
{
    width: 1000px; 
}
.line {
    padding-top: 15px; /* font-size / 2  = (30/2=15) */
    border-bottom: solid 1px #000;
    float: left; 
}
.text {
    font-size: 30px;
    font-weight: bold;
    color: #000;
    float: left; 
}

JavaScript:

var text_width = parseInt($(".text").css("width"));
var container_width = parseInt($("#container").css("width"));
var line_width = (container_width - text_width) / 2;    
$("div").find(".line").css("width", line_width+"px");

Upvotes: 0

0b10011
0b10011

Reputation: 18795

http://jsfiddle.net/Q8yGu/5/

HTML

<header><div><span class="spacer"></span><h1>Text</h1><span class="spacer"></span><h1>Text</h1><span class="spacer"></span></div></header>
<header><div><span class="spacer"></span><h1>100% Container Width</h1><span class="spacer"></span></div></header>

CSS

body {
    background:yellow;
}
header {
    display:table;
    width:100%;
    max-width:100%;
}
header div {
    display:table-row;
    line-height:1.5em;
    font-size:2em;
    white-space:nowrap;
}
header h1 {
    font-size:inherit; /* Change font-size in header */
    overflow:hidden;
    display:table-cell;
    vertical-align:middle;
    width:1px;
}
header span.spacer {
    display:table-cell;
}
header h1 {
    padding:0 10px;
}
header span.spacer:after {
    display:inline-block;
    width:100%;
    content:".";
    font-size:0;
    color:transparent;
    height:2px;
    background:#000;
    vertical-align:middle;
    position:relative;
    top:-1px;
}
header > a {
    font-size:.4em;
    vertical-align:middle;
    background:#25a2a4;
    color:#fff;
    text-transform:uppercase;
    font-family:monospace;
    border-radius:.5em;
    padding:.3em .5em;
    text-decoration:none;
}

Note: To add support for IE8, either use an element other than header or use html5shiv.

Upvotes: 5

mohammad falahat
mohammad falahat

Reputation: 748

check this one:

<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function(){
    $(window).resize(function(){
        $('.line').width(($(window).width() - $('.text').width()*2) / 3 - 8);
    });
    $('.line').width(($(window).width() - $('.text').width()*2) / 3 - 8);
})
</script>
<style>

.line{
    margin-top:9px;
    border:1px solid silver;
    float:left;
}

.text{
    margin:auto;
    float:left;
}

</style>
<body>
<div class="line"></div>
<div class="text">text 1</div>
<div class="line"></div>
<div class="text">text 2</div>
<div class="line"></div>
</body>
</html>

Upvotes: 0

jackwanders
jackwanders

Reputation: 16020

to really do what you want, to have lines interspersed with text to take up 100% of the parent container, with the blocks of text evenly spaced, is most likely going to require the use of javascript. A jQuery plugin could be created for such a purpose.

Here's an extremely crude version of code that could be the start of such a solution

http://jsfiddle.net/jackwanders/XJNpz/

But even here, maintaining the proper width for the lines is not ideal, as quickly making the viewport smaller will result in one line breaking down.

Upvotes: 1

Paulo R.
Paulo R.

Reputation: 15609

I gave an answer to this same question yesterday. Here, take a look -> How to have a horizontal line at the middle of a html heading with CSS?

It relies on a linear gradient. If you're not supporting old IEs it works perfectly.

Upvotes: 0

Related Questions