Forum Moderators: not2easy
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
CSS --------------------------------
#pages {
margin-top: 12px;
float: right;
margin-right: 125px;
font: normal 14px "Century Gothic","Trebuchet MS",Arial,Helvetica,sans-serif;
color: #000;
}
#pages ul {
list-style-type: none;
margin: 0;
padding: .5em 0;
display: inline;
}
#pages li a {
display: block;
width: 1.5em;
height: 1.5em;
padding: 0;
text-align: center;
vertical-align: text-middle;
text-decoration: none;
}
#pages a:link, #pages a:visited {
margin: 0 10px 0 10px;
text-decoration: none;
color: #000;
}
#pages a:link#pagescurrent, #pages a:visited#pagescurrent {
border-bottom: 1px solid #000;
background: transparent;
color: #000;
}
#pages a:hover {
background-color: #949494;
color: #fff;
}
HTML --------------------------
<div id="pages">
<ul>
<li><a href="#" id="pagescurrent" title="next slide">1</a></li>
<li><a href="#" title="next slide">2</a></li>
<li><a href="#" title="next slide">3</a></li>
<li><a href="#" title="next slide">4</a></li>
</ul>
</div>
2) Set:
#pages ul li {
display: inline;
3) Note: This is half of the fix. You will not see a change in rendering.
4) Change #pages li a to: display: inline-block;
And the lock clicks open. You now have a horizontal list.
5) Go back and reverse the display: inline: on <ul> and <li> to see that it needs to be set for <li>.
6) Note that you are essentially 'resetting' the list to a block display when declaring <a> to block level. inline-block will take care of that.
7) Note: Not declaring a width on #pages will generate a warning when validating the CSS. Best practice is to declare a width, though it can be a hassle depending upon the situation. I see no issues here however. Just make a percentage decision.
In (x)HTML+CSS, floated elements need to have a width declared. Only elements with an intrinsic width (html, img, input, textarea, select, or object) are not affected
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>
</title>
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
#pages {
margin-top: 12px;
float: right;
margin-right: 125px;
font: normal 14px "Century Gothic", "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #000;
}#pages ul {
list-style-type: none;
margin: 0;
padding: .5em 0;
/*display: inline;*/
}#pages ul li {
display: inline;
}#pages li a {
display: inline-block;
width: 1.5em;
height: 1.5em;
padding: 0;
text-align: center;
vertical-align: text-middle;
text-decoration: none;
}#pages a:link, #pages a:visited {
margin: 0 10px;
text-decoration: none;
color: #000;
}#pages a:link#pagescurrent, #pages a:visited#pagescurrent {
border-bottom: 1px solid #000;
background: transparent;
color: #000;
}#pages a:hover {
background-color: #949494;
color: #fff;
}
</style>
</head>
<body>
<div id="pages">
<ul>
<li><a href="#" id="pagescurrent" title="next slide">1</a></li>
<li><a href="#" title="next slide">2</a></li>
<li><a href="#" title="next slide">3</a></li>
<li><a href="#" title="next slide">4</a></li>
</ul>
</div>
<!--##########
I'm hoping I can get a bit of help addressing the display of an unordered list which is all but complete, save for thevertical alignment. I'm trying to view the list horizontally, and not vertically. Here is the code, and thanks in advance
-->
</body>
</html>
BTW - It's a lot faster to bang out a fix if the code sample is 'drop in' ready.
* * * If it were me, (or I - I never know which?), I would retitle the <a> titles to something that says more. "Niagara Falls, slide 1 of 12." - and so forth and such.
