http://www.kriesi.at/support/topic/css-help-needed-styling-headlines-with-background-stripes Support Forum - Topic: CSS-Help needed: styling headlines with background stripes en-US Mon, 20 May 2013 06:51:41 +0000 http://bbpress.org/?v=1.0.2 q http://www.kriesi.at/support/search.php http://www.kriesi.at/support/topic/css-help-needed-styling-headlines-with-background-stripes#post-33226 Sun, 27 Nov 2011 14:50:37 +0000 Dude 33226@http://www.kriesi.at/support/ <p>Glad that it works now :) </p> http://www.kriesi.at/support/topic/css-help-needed-styling-headlines-with-background-stripes#post-33219 Sun, 27 Nov 2011 11:34:40 +0000 colorit2 33219@http://www.kriesi.at/support/ <p>ok, thanks a lot, I'm not really so familiar with CSS ;-)</p> <p>I've tried this with the help of SELFHTML (<a href="http://de.selfhtml.org/css/formate/zentrale.htm" rel="nofollow">http://de.selfhtml.org/css/formate/zentrale.htm</a>)</p> <p>If somebody likes to style his headlines in such way, too, here is the code:</p> <p><strong>The CSS:</strong></p> <p><code><br /> h5 {<br /> background: url("../images/shared/stripes.gif") repeat-x scroll center 18px transparent;<br /> float: left;<br /> text-align: center;<br /> width: 100%;<br /> font-size: 12px !important;<br /> letter-spacing: 2px !important;<br /> font-weight: normal !important;<br /> margin-top: 10px;<br /> text-transform: uppercase;<br /> color: #777777;<br /> margin-bottom: 6px;<br /> }</p> <p>.h5background {<br /> background-color: #FFffff;<br /> padding: 0 10px;<br /> }<br /> </code></p> <p>And the code:</p> <p><code>&lt;h5&gt;&lt;span class="h5background"&gt;My latest Projects&lt;/span&gt;&lt;/h5&gt;<br /> </code></p> <p>Works now fine and looks like this:</p> <p><a href="http://i43.tinypic.com/24lqyk5.jpg" rel="nofollow">http://i43.tinypic.com/24lqyk5.jpg</a></p> <p>Thanks for your help! </p> http://www.kriesi.at/support/topic/css-help-needed-styling-headlines-with-background-stripes#post-33203 Sun, 27 Nov 2011 07:05:11 +0000 Dude 33203@http://www.kriesi.at/support/ <p>Hey,<br /> yes - you need to wrap your text into a span and apply a white background color to it.I see no other chance to do this. </p> http://www.kriesi.at/support/topic/css-help-needed-styling-headlines-with-background-stripes#post-33186 Sun, 27 Nov 2011 04:06:13 +0000 johnnysteel 33186@http://www.kriesi.at/support/ <p>you can do this kind of thing by slapping your h5 contents in a span and styling the span </p> http://www.kriesi.at/support/topic/css-help-needed-styling-headlines-with-background-stripes#post-33174 Sat, 26 Nov 2011 19:47:08 +0000 colorit2 33174@http://www.kriesi.at/support/ <p>Hi,</p> <p>I would like to style my h5-headlines with background stripes. Example screenshot:</p> <p><a href="http://i43.tinypic.com/24lqyk5.jpg" rel="nofollow">http://i43.tinypic.com/24lqyk5.jpg</a></p> <p>I have tried it with this CSS:</p> <p><code><br /> h5 {<br /> background: url("../images/shared/stripes.gif") repeat-x scroll center 20px transparent;<br /> float: left;<br /> text-align: center;<br /> width: 100%;<br /> font-size: 12px !important;<br /> letter-spacing: 2px !important;<br /> font-weight: normal !important;<br /> margin-top: 10px;<br /> text-transform: uppercase;<br /> color: #777777;<br /> margin-bottom: 6px;<br /> }<br /> </code></p> <p>But with this, the stripes goes behind the headline text, like this:</p> <p><a href="http://i44.tinypic.com/iedspc.jpg" rel="nofollow">http://i44.tinypic.com/iedspc.jpg</a></p> <p>How can I do it, so that the text is like in the example above left blank from the stripes behind it?</p> <p>Thanks for any help! </p>