|
CSS - Css For Photo Credit Attributions
Hello,
Using tables and CSS or CSS alone (NO Javascript is allowed!), I am trying to figure out a want to display an image and directly underneath it display the Photographer's name even with the left margin and the company (or other source) of the image flush right. one complication is that the image sizes are not constant (i.e., 546x700, 1100x453, etc.) So, tables seem to be desired but when I tried class="text-lf" and class="text-rt" setting the text-align:left; and text-align:right; they both just aligned on the left edge. Mock up of typical case.... +-------------------------+ | ------------------------- | | ------------------------- | | ------------------------- | | ------------------------- | | ------------------------- | +-------------------------+ Photog. --------------- Coma. Code:
.imgsrc_lf {font-size:70%;text-align:left;}
.imgsrc_rt {font-size:70%;margin-left:10%;text-align:right;}
Code: <div class="center"> <table width="100%" summary="Image Block"> <tr> <td> <a href="images/hurll_tuscan_frontispiece_clr.jpg"><img src="images/hurll_tuscan_illus01.jpg" width="383" height="499" border="0" alt="IL MARZOCCO (DONATELLO)" /></a><a href="images/hurll_tuscan_illus01.jpg"><img src="images/magnify.gif" width="33" height="33" border="0" alt="magnify" /></a><br /> <span class="imgsrc_lf">Alinari, photo.</span><img src="images/cleardot.gif" alt=" " width="1" height="1" /><span class="imgsrc_rt">John Andrew & Son, Sc.</span> <tr> <td colspan=2 class="center">IL MARZOCCO (DONATELLO)<br /><i>National Museum, Florence</i><br /><br />Click on the above image to view a modern color image of the bronze copy.<br /></td> </tr> </table> </div> Any assistance is appreciated! Similar TutorialsHi, I am currently learning CSS and javascript and I'm trying to make a simple photogallery box containing photo's(horizontally). Here is my code: Code:
<script language="JavaScript" src="person.js" type='text/javascript'></script>
<style type="text/css">
body {background-color:#900;}
.box {position:relative;
top:200px;
left:200px;
width:500px;
border:2px;
border-color:green;
background-color:blue;
overflow:hidden;
}
.photo{
margin-top:5%;
margin-left:10%;
margin-right:10%;
}
img{
width:100px;
height:100px;
}
</style>
</head>
<body>
<div class="box">
<div class="photo">
<img src="1.jpg" />
<img src="2.jpg" />
<img src="3.jpg" />
<img src="4.jpg" />
</div>
</div>
</body>
Here are my problems: below the box i am trying to get a little box with buttons to the left and right. In the box the photo's must go horizontally next to each other and if there is no spice it must dissapear at the side box so i can press the buttons left or right to get the photo's in the middle. But now the 3 photo's are horizontally and the next is on a new line instead of in going away at the side of the box. Can anyone give me some advice and tips please thnx! I am wanting to do a photo gallery section like http://www.passionforpaintings.com/...rtists/overview. The problem is it is in html and I been looking for css gallery tutorials and can not find anything like this. Could anyone give me some help or point me in the right direction please? Many thanks in advance. I've got a photo gallery loaded and working well but I would like to load the first photo of the gallery without the user having to click the thumbnail. Right now the photo holder is blank until the user clicks the first one. Any help is greatly appreciated. Steve a.gallery, a.gallery:visited { display:block; display:inline-block; color:#000; text-decoration:none; border:1px solid #000; width:75px; height:47px; float:left; margin:4px; } a.slidea {background:url(../img/index/tlc1.jpg);} a.slideb {background:url(../img/index/tlc2.jpg);} a.slidec {background:url(../img/index/tlc3.jpg);} a.slided {background:url(../img/index/lc4.jpg);} a.slidee {background:url(../img/index/lc5.jpg);} a.slidef {background:url(../img/index/lc6.jpg);} a.slideg {background:url(../img/index/lc7.jpg);} a.slideh {background:url(../img/index/lc8.jpg);} a.slidei {background:url(../img/index/lc9.jpg);} a.slidej {background:url(../img/index/lc10.jpg);} a.gallery em, a.gallery span {display:none;} a.gallery:hover {border:1px solid #fff;} a.slidea em {background:url(../img/index/lc1.gif) 5px 5px no-repeat;} a.slideb em {background:url(../img/index/lc2.gif) 5px 5px no-repeat;} a.slidec em {background:url(../img/index/lc3.jpg) 5px 5px no-repeat;} a.slided em {background:url(../img/index/lc4.jpg) 5px 5px no-repeat;} a.slidee em {background:url(../img/index/lc5.jpg) 5px 5px no-repeat;} a.slidef em {background:url(../img/index/lc6.jpg) 5px 5px no-repeat;} a.slideg em {background:url(../img/index/lc7.jpg) 5px 5px no-repeat;} a.slideh em {background:url(../img/index/lc8.jpg) 5px 5px no-repeat;} a.slidei em {background:url(../img/index/lc9.jpg) 5px 5px no-repeat;} a.slidej em {background:url(../img/index/lc10.jpg) 5px 5px no-repeat;} /* styling for gallery */ #container_right { float:left; width:100%; height:300px; position:relative; background-color:#839BAE; background-image: } #container_right img { border:0; } #container_right .thumbs { width:170px; position:absolute; right:32px; top:6px; } #container_right a.gallery:hover span { display:block; position:absolute; width:402px; height:50px; top:260px; left:-520px; padding:5px; font-style:italic; color:#fff; z-index:100; } #container_right a.gallery:hover span:first-line { font-style:normal; font-weight:bold; font-size:1.1em; color:#CCCCCC; } #container_right a.gallery:active, #container_right a.gallery:focus { border:1px solid #000; } #container_right a.gallery:active em, #container_right a.gallery:focus em { display:block; position:absolute; width:510px; height:275px; top:1px; left:-525px; padding:5px; color:#000; z-index:50; } Seems to work just fine in IE 5.5+, however in Mozilla 1.5 the text just drops below the photo. Here is the page: http://www.sdtars.com/development/events/days.php Here is the sites CSS: http://www.sdtars.com/development/styles/layout.css Any help would be much appreciated. Thanks. What is a way to add rounded corners to photos using just CSS? What is a way to add rounded corners to photos using just CSS? Ideally, a PHP script would implement it. In other words, people submit photos online, and a script causes them to have rounded corners when they're on the website on display. In any case, I just need the CSS for creating rounded corners on photos. I'm not sure if this is related to CSS or not, but I have a blog that gives the option of changing the background colors by submitting a hex color code. I have seen other blogs that have pictures instead of color and I know that this function is available to me at this points and time, I simply have no clue how to activate it. Is there any way to convert a picture in my harddrive to fit a code, or should I just ask the site's maintenance and my fellow bloggers? I am having a minor problem with a photo gallery on a site that I am working on. Here is a link: http://fieldspianos.com/new/store/p...em_number=14275 In all browsers except IE6, when a thumbnail is hovered over, the image is displayed larger in the preview box. In IE6, however, this occurs properly, but once you roll over an image more than once it will not display anymore. For example, if I roll over the 1st thumbnail, the image displays, then I roll over the 2nd thumbnail, the image displays, but if I roll over the 1st thumbnail again, nothing happens. Included below is my css and html. This was made without javascript and I would like to keep it that way if at all possible. HTML Code:
<div id="sitebody">
<div id="tabsheader">
<ul id="primary">
<li><?php print "<a href=\"information.php?item_number=" . $item_number . "\">"; ?>Information</a></li>
<li><?php print "<a href=\"description.php?item_number=" . $item_number . "\">"; ?>Description</a></li>
<li><span>Photo Gallery</span></li>
<li><?php print "<a href=\"video.php?item_number=" . $item_number . "\">"; ?>Video</a></li>
<li><?php print "<a href=\"moreinfo.php?item_number=" . $item_number . "\">"; ?>More Info...</a></li>
</ul>
</div>
<div id="main">
<div id="contents">
<h2>Photo Gallery</h2>
<p class="note">Hover over the photos below to see larger images.</p>
<br />
<div id="photogallery">
<div id="thumbnails">
<ul class="hoverbox">
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img1.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img1.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img2.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img2.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img3.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img3.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img4.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img4.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img5.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img5.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img6.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img6.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img7.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img7.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img8.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img8.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img9.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img9.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img10.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img10.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img11.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img11.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img12.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img12.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img13.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img13.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img14.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img14.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img15.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img15.jpg" alt="description" class="preview" /></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
CSS Code:
/*Photo Gallery*/
div#photogallery {
position: relative;
width: 662px;
border: 1px solid #000;
padding: 1px;
padding-bottom: 2px;
height: 404px;
}
div#thumbnails {
width: 243px;
}
div#thumbnails ul {
margin-left: 0px;
padding-left: 0px;
}
.hoverbox
{
cursor: default;
list-style: none;
}
.hoverbox a
{
cursor: default;
}
.hoverbox a .preview
{
display: none;
}
.hoverbox a:hover .preview
{
display: block;
position: absolute;
top: 2px;
left: 247px;
z-index: 1;
}
.hoverbox img
{
background-color: #FFFFFF;
border-color: #000;
border-style: solid;
border-width: 1px;
color: inherit;
padding: 1px;
vertical-align: top;
width: 75px;
height: 75px;
}
.hoverbox img:hover
{
background-color: #000000;
border-color: #000;
border-style: solid;
border-width: 1px;
color: inherit;
vertical-align: top;
width: 75px;
height: 75px;
}
.hoverbox li
{
display: inline;
float: left;
margin: 1px;
}
.hoverbox .preview
{
border-color: #000;
width: 409px;
height: 399px;
}
|
|||||||