Jump to content

[Solved] Gallery Tutorial Issue


damiancds
 Share

Recommended Posts

I'm talking about the CSS gallery tutorial here : http://www.w3schools.com/css/css_image_gallery.aspand everything works great except when I try to use <sup> tags.when i do, the image container stretches a tad lower, and when the next row of images come up below it, the one that has the <sup> tag in it blocks the one below it so it's like thisX X X XO X X XXwhere the O is an empty space and the X above is the one that has the sup tag.Right now it's not crucial but it does look better to have the "1<sup>st</sup> than the "1st"if anyone's figured this out, I'd appreciate cluing me in.thanks,

Edited by damiancds
Link to comment
Share on other sites

I don't know about anyone else, but I'm having a hard time imagining what your revised code looks like. Descriptions of code almost never work, even when they're based on something we do have access to. Posting the actual code would help a lot. Keeping that in mind will probably get you faster responses in the future, too.

Link to comment
Share on other sites

Sorry it took so long to get the code, there's been a problem with my internet,anyway, the page code is:

<div class="sidebar">Side menu here</div><div class="content"><hr width="350" noshade align="left"><div class="img_gal">  <a href="/Gallery/Markets/">  <img class="folder" src="/Resources/Images/System/folder_empty.png" alt="82nd Street Market" />  </a>  <div class="desc">82<sup>nd</sup> Street</div></div><div class="img_gal">  <a href="">  <img class="folder" src="/Resources/Images/System/folder_empty.png" alt="Tucker Square Market" />  </a>  <div class="desc">Tucker Square</div></div><div class="img_gal">  <a href="">  <img class="folder" src="/Resources/Images/System/folder_empty.png" alt="Cortelyou Market" />  </a>  <div class="desc">Cortelyou</div></div><div class="img_gal">  <a href="">  <img class="folder" src="/Resources/Images/System/folder_empty.png" alt="Stuyvesant Town Market" />  </a>  <div class="desc">Stuyvesant Town</div></div><hr><div class="img_gal">  <a href="">  <img class="folder" src="/Resources/Images/System/folder_empty.png" alt="Central Avenue Market" />  </a>  <div class="desc">Central Avenue</div></div><div class="img_gal">  <a href="klematis4_big.htm">  <img class="folder" src="/Resources/Images/System/folder_full.png" alt="Livingstonville Flea Market" />  </a>  <div class="desc">Livingstonville</div></div><div class="img_gal">  <a href="klematis4_big.htm">  <img class="folder" src="/Resources/Images/System/folder_full.png" alt="Botanical Gardens Market" />  </a>  <div class="desc">Botanical Gardens</div></div><div class="img_gal">  <a href="klematis4_big.htm">  <img class="folder" src="/Resources/Images/System/folder_full.png" alt="Waterford Market" />  </a>  <div class="desc">Waterford</div></div>

and the css is :

div.img_gal  {  margin:2px;  border:1px solid #0000ff;  height:auto;  width:auto;  float:left;  text-align:center;  }div.img_gal img  {  display:inline;  margin:3px;  border:1px solid #ffffff;  }div.desc  {  text-align:center;  font-weight:normal;  width:120px;  margin:2px;  font:13px arial,sans-serif;  }img.folder{height: 96px;width: 96px;border: none;}img.folder a:hover img{border: none;}

and btw, the sidebar and content divs are just to organize a side menu pane and the text portion of the page.I know the problem is coming from the first gallery thumb, the 82nd street one, because when i have the border enabled it is just a tad longer than the others when I'm using the <sup> tagsI thought that if i added a height ( or min / max height) might make the description part of the thumbnail uniform whether there were <sup> tags or not.I'm going to try that quick and see what happens,

Link to comment
Share on other sites

Ok,I just tried adding a height property to the desc div, and it worked, in respect to the fact that it made them all the same length, but the one with the sup tags, the text set a tad lower than the others. I've tried a vertical-align property with all of the possible values and it didn't seem to do the trick.if anyone's got a way to fix this (so they have a uniform height and the description text matches the others (position wise), I'd appreciate it.thanks,EDIT: I've since learned what the vertical-align property actually does, so that wasn't going to work anyway. Right now, I'm satisfied with having them just equal.

Edited by damiancds
Link to comment
Share on other sites

  • 2 weeks later...

I found a solution to this that i like, just using line-height propertyi just set the height and line-height property to the same thing (in em) and the lines were centered nicelythe only problem is that if the line wraps around it doesn't look so good but I'm dealing with pretty much universal linage here.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...