CODEWITHSUNDEEP
htmlcss
Brandon Hansen
Brandon Hansen

Reputation: 826

Dash surrounding text

Design I need to convert to markup / css

Given the above dynamically generated text (meaning that I can't just use an image), I am trying to recreate the design using just html and css selectors.

I would like to just use a single h4 with the containing text, but am open to other solutions. I would prefer to not use absolute positioning, but again, if that is the only way, then so be it.

I have tried surrounding with span tags, but those are inline elements that don't have an inherent width.

The h4 will be nested within a div, though not always of the same class or id.

Any ideas or resources to get me started?

Upvotes: 1

Views: 242

Answers (2)

Mo Valipour
Mo Valipour

Reputation: 13496

What you can do is to wrap your text with a span and put it inside a container div.

<div id='container'>
    <span id='text'>EVENT SCHEDULE</span>
</div>​

Then give your container border-bottom and less height than your text (half size should give you the effect you are looking for).

#container {border-bottom:solid 1px #333; text-align:center; height:10px;}
#text { background:#fff; padding:0 20px; }​

You can see the live example here: http://jsfiddle.net/vzjxA/13/

Upvotes: 1

ledgeJumper
ledgeJumper

Reputation: 3630

Check out how they do the text underneath Contact me on this form. Pretty clean and simple. http://www.onextrapixel.com/examples/html5-css3-contact-form/

Here is the actual CSS that does it:

h1 {
font-family: 'Questrial', Verdana, sans-serif;
text-align:center;
font-size:40px;
padding:0;
margin:0 0 20px 0;
position:relative;
color:#8C8C8C;
}

/** have a nice ampersand **/
h1:after {
font-size:25px;
color:#D6CFCB;
content: '&';
text-align:center;
display:block;
width:100%;
font-family: 'Alice', Verdana, serif;
text-shadow: 0px 1px 0px #fff;
}

/** create the gradient bottom **/
h1:before {
position:absolute;
bottom:15px;
content: ' ';
text-align:center;
display:block;
height:2px;
width:100%;
background: linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(182,180,180,0.7)     42%,rgba(180,178,178,0) 43%,rgba(168,166,166,0) 50%,rgba(180,178,178,0)  57%,rgba(182,180,180,0.7) 58%,rgba(238,237,237,0.3) 90%,rgba(255,255,255,0) 100%); /* W3C */
}

Sorry for yet another edit, but here is an explanation. h1 { ... } styles the actual text, so "Event Schedule" for you, and h1:before { ... } does the cool line effect. h1:after { ...} does the ampersand, so this is actually where you would put your text i suppose

Upvotes: 2

Related Questions