I'd like to style the title of my image gallery created with nyromodal.
I've styled it to overlap the image and it should read, with line breaks:
Title of Gallery (bold)
Title of Image (italic)
Reference Number (italic)
The html looks more or less like this:
<html>
<body>
<div id="bgd">
<a href="image.jpg" class="nyroModal" title="Title of Gallery<br
/><em>Title of Image</em><br /><em>Reference Number</em>" rel="gal">Image 1</a>
</div>
</body>
...and it works when the modal first comes up. But, it falls apart and is
read literally as "Title of Gallery<br /><em>Title of Image</em><br
/><em>Reference Number</em>" when the browser window is resized.
windowResize is set to 'true' in this case.
The css for the title is:
h1#nyroModalTitle {
margin: 0;
padding: 0;
position: absolute;
top: 30%;
left: 50%;
font-size: 16px;
font-weight:bold;
color: #444;
z-index: 106;
}
What's the best way to style the title so that it looks the way I want it
to or add a description that can be styled below the title? Thanks.