Reputation: 6058
I have been trying to get some dotted lines all over my site.
I'm starting to understand the idea but I ran into another problem...
I am making another dotted line, this time between text and an image. This one's a bit different.
I am also getting problems where sometimes the image goes under the lines due to the width changes: when I update my site, etc.
How can I make it here so that I can have the dotted lines' width change to the total width of the h2?
I want the dotted lines not to bother anything and just go smooth through it.
This is the code I'm using, and I need to keep it in the basic principle:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.serviceDesc').hide();
$('.serviceName:first').addClass('active').next().show();
$('.serviceName').click(function(){
if( $(this).next().is(':hidden') ) {
$('.serviceName').removeClass('active').next().slideUp();
$(this).toggleClass('active').next().slideDown();
}
return false;
});
});
</script>
<style>
#servicesContainer {
width: 485px;
height: 400px;
margin: 0 auto;
margin-top: 20px;
}
h2.serviceName {
margin: 0;
margin-bottom: 5px;
margin-top: 5px;
background-image: url(http://i.imgur.com/IcnZl.png);
background-position: right top;
background-repeat:no-repeat;
height: 29px;
line-height: 24px;
width: 480px;
font-size: 18px;
font-weight: bold;
float: left;
color:#000;
}
h2.serviceName a {
color: #000;
text-decoration: none;
display: block;
}
h2.active {
background-position: right bottom;
}
.serviceDesc {
margin: 0 0 10px;
padding: 0;
overflow: hidden;
width: 480px;
clear: both;
}
.serviceDesc .block {
}
.serviceDesc .block p {
color: #413f44;
margin: 0;
font-size:18px;
}
</style>
<div id="servicesContainer">
<h2 class="serviceName"><a href="#">Text...............................................................................</a></h2>
<div class="serviceDesc">
<div class="block">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. </p>
</div>
</div>
<h2 class="serviceName"><a href="#">Text...............................................................................</a></h2>
<div class="serviceDesc">
<div class="block">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
</div>
</div>
<h2 class="serviceName"><a href="#">Text...............................................................................</a></h2>
<div class="serviceDesc">
<div class="block">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.<br />
<br />
</p>
</div>
</div>
<h2 class="serviceName"><a href="#">Text...............................................................................</a></h2>
<div class="serviceDesc">
<div class="block">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
</div>
</div>
<h2 class="serviceName"><a href="#">Text...............................................................................</a></h2>
<div class="serviceDesc">
<div class="block">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. </p>
</div>
</div>
<h2 class="serviceName"><a href="#">Text...............................................................................<br />
</a></h2>
<div class="serviceDesc">
<div class="block">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. </p>
</div>
</div>
<h2 class="serviceName"><a href="#">Text...............................................................................</a></h2>
<div class="serviceDesc">
<div class="block">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
</div>
</div>
<h2 class="serviceName"><a href="#">Text...............................................................................</a></h2>
<div class="serviceDesc">
<div class="block">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
</div>
</div>
</div>
Upvotes: 0
Views: 862
Reputation: 17667
h2.serviceName {
margin: 0;
margin-bottom: 5px;
margin-top: 5px;
position: relative;
height: 29px;
line-height: 24px;
width: 480px;
font-size: 18px;
font-weight: bold;
float: left;
color:#000;
overflow: hidden;
}
h2.serviceName a {
color: #000;
text-decoration: none;
display: block;
}
h2.serviceName a:after {
content : "";
border-bottom: 2px dotted #000;
position: absolute;
width: 100%;
height: 15px;
z-index: -1;
}
h2.serviceName a:before {
content : "";
background-image: url(http://i.imgur.com/IcnZl.png);
width: 30px;
height: 29px;
float: right;
}
It's a little hacky and you can still kinda see the dots on the right... but it gives you a little better idea the power of CSS3
Upvotes: 2
Reputation: 25685
As with the phone/email question, it's the same idea. You can use a background image on the element to create the dotted lines. Since you've already got a background on the <h2>
, add it to the <a>
:
h2.serviceName a {
background: url(dots.gif) repeat-x bottom left;
/* Other CSS styles */
}
Here's an example. As a bonus, it means you can get rid of all your hard coded dots too.
Update: If you want to block the dots from behind the words, add a <span>
element with solid background color that wraps the text:
HTML
<h2>
<a href="">
<span>Juicy text</span>
</a>
</h2>
CSS
a span {
background-color: #fff;
}
This will prevent the dotted background of the <a>
from showing through.
Upvotes: 3