PDA

View Full Version : Gallery Navigation HTML/CSS woes


Blue_Vision
07-26-2009, 02:03 AM
I want to create a navigation menu like the basic one I attached. I was thinking it was simple and just create it from a list as you do other navigational menu's. The # part works fine that way but I need to get those little arrows on each side. I inserted their image tags into the first and last list html which puts the arrows there... but they don't line up centered vertically with the numbers.

Is this how I should be creating this? If not what is the alternative? If so then how can I get the arrows to center vertically with the numbers?

Thanks!

http://img140.imageshack.us/img140/5531/picture6nzl.png (http://img140.imageshack.us/i/picture6nzl.png/)

domedia
07-26-2009, 05:51 PM
No it sounds about right what you're doing. Use CSS for margins etc and you should be able to control this across browsers.

Blue_Vision
07-28-2009, 06:32 AM
Ok, well I'm using a UL in CSS. It appears there is no way to vertically center text in CSS properly so I'm now doing it via adjusting the line height. Here is the CSS:

#portfolio ul {
text-align: center;
width: 500px;
margin: 0px;
padding: 0px;
line-height:2em;
font-family: Arial, Helvetica, sans-serif;
background-color:#F3C;

For my images I'm doing it like this:

<ul id="portfolio">
<a href="#"><img src="left.jpg" width="14" height="19" valign="middle" /></a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">7</a>
<a href="#">8</a>
<a href="#">9</a>
<a href="#">10</a>
<a href="#">11</a>
<a href="#">12</a>
<a href="#">13</a>
<a href="#">14</a>
<a href="#">15</a>
<a href="#">16</a>
<a href="#">17</a>
<a href="#">18</a>
<a href="#">19</a>
<a href="#">20</a>
<a href="#">21</a>
<a href="#">22</a>
<a href="#">23</a>
<a href="#">24</a>
<a href="#">25</a>
<a href="#"><img src="right.jpg" width="14" height="19" /></a>

I got the text centered ok for the #'s but the images are attempting to center but slightly off for some reason? See the example and remember that I only centered the left side arrow vertically.
http://img515.imageshack.us/img515/9761/picture9j.png (http://img515.imageshack.us/i/picture9j.png/)
(yes, its ugly and bad images for testing purposes)

Any ideas how to get the images to center vertically properly?

Thanks!

Blue_Vision
07-29-2009, 07:31 AM
*repost from Adobe Forum*

html:


<ul id="portfolio">
<a href="#"><img src="left.jpg" width="14" height="19" valign="middle" /></a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">7</a>
<a href="#">8</a>
<a href="#">9</a>
<a href="#">10</a>
<a href="#">11</a>
<a href="#">12</a>
<a href="#">13</a>
<a href="#">14</a>
<a href="#">15</a>
<a href="#">16</a>
<a href="#">17</a>
<a href="#">18</a>
<a href="#">19</a>
<a href="#">20</a>
<a href="#">21</a>
<a href="#">22</a>
<a href="#">23</a>
<a href="#">24</a>
<a href="#">25</a>
<a href="#"><img src="right.jpg" width="14" height="19" valign="middle" /></a>
</ul>

css:

#portfolio ul {
text-align: center;
margin: 0px;
list-style: none;
font-family: Arial, Helvetica, sans-serif;
background-color:#red;
padding: 0px;
line-height: 2em;

}
#portfolio a:link, #navlist a:visited {
color: #333;
text-decoration: none;
font-size: 12px;
font-style: normal;
font-weight: 400;

}

attached is my result. I can't for the life of me get the arrows to be centered with the numbers. There seems to be a slight padding on the top making it impossible to center. When I take off the line-height then my numbers come off centered and there is still a tiny padding on the top. Does any of this make sense? I've got it all ugly for testing purposes so ignore the design please...LOL.

Thanks!

http://img199.imageshack.us/img199/6097/picture10p.png (http://img199.imageshack.us/i/picture10p.png/)

domedia
07-29-2009, 03:26 PM
You cannot write HTML like that.
A UL can only contain LI's

edbr
07-30-2009, 01:17 AM
have you looked at using pagination? just a thought

coloeagle
07-30-2009, 02:17 AM
I started to make a post explaining one way of doing this. It got on the rather long side so I decided to just make a page doing what I think you are after.

Since I'm a few hundred miles from my desktop and using my laptop, I've only tested it in FireFox 3, should work in the other browsers.

http://validwebdesigns.com/construction/nav-list.html

In brief what I've done is make the arrow images the same height as the containing div and placed everything in an unordered list. Next I used position:relative for both the image's and the text, setting the top distance as needed to center the text and image's.

Corrosive
07-30-2009, 06:18 AM
I can confirm that works nicely in up-to-date Chrome as well. Good one Colo.

Blue_Vision
08-17-2009, 02:54 AM
Genius! Thanks so much and sorry for the late reply. Works perfectly! Only tested in Safari and FF on a mac so far but sounds like corrosive tried crome so we are looking good.

I'm sure I'll hit more troubles as usual but thanks alot for this and going so far out of your way!