Question

I’m sure this goes back to basic web 101 and I’m feeling ashamed to ask, but I’ve got an ordered, number list that I’ve set under an image. When you click on any of the numbers, the image changes to a different image.

Everything works perfect until I resize my browser window – the numbers remain where they are (their position is relative) and everything else moves to be centered with the page (because I want it to do that).

Here’s a link to the page live – http://thewiredlife.net/kelseytest/fish.html

<div id="sectionwrap" class="svw">
<ul>
<li><img src="images/fish_full.png" width="1024" height="602" alt="fish"></li>
<li><img src="images/fish_full_2.png" width="1024" height="602" alt="jj"></li> 
</ul></div>

#sectionwrap {
width: 1024px;
height:340px;
margin-left: auto;
margin-right: auto;
margin-top:20px;}

.svw {width: 50px; height: 102px;}
.svw ul {position: relative; left: -999em;}

.stripViewer {
position: relative;
overflow: hidden;
margin: 0 0 1px 0;
}
.stripViewer ul
margin: 0;
padding: 0;
position: relative;
left: 0;
top: 0;
width: 1%;
list-style-type: none;
}
.stripViewer ul li {
float:left;
}
.stripTransmitter {
overflow: auto;
width: 1%;
}
.stripTransmitter ul {
margin-top:6px;
margin-left: 60px;
padding: 0;
list-style-type: none;
}
.stripTransmitter ul li{
width: 20px;
float:left;
margin: 0 1px 1px 0;
}
.stripTransmitter a{
font-family: 'OpenSansLight', Helvetica, Arial, sans-serif;
font-size:14px;
text-align: center;
line-height: 22px;
color: #BCBCBC;
text-decoration: none;
display: block;
}

Any solutions to make the numbers follow the rest of the content when the window is resized? Thanks 🙂

Answer 1

First- your numbers are not in the class you posted above, take a look at your source. Your numbers are inside stripTransmitter0. I would suggest making those numbers stand out a little more. Second – you’ve given it a witdh, now add a margin: 0 auto to center stripTransmitter0 just like sectionwrap.