• 0

need some quick help!


Question

need some quick help should be super easy for most of you- for me not so much ;)

so im working on this site and there are these 2 pages...

http://www.themindsight.com/taxicab/index.html

and

http://www.themindsight.com/taxicab/images.html

the problem is when you resize the images webpage in a browser the images all stay centered and dont jump down to stay center even at the cost of going off screen so to speak

if you do the same thing with the index webpage the pictures jump down like word wrap

i made both in dreamweaver but cant for the life of me find out whats wrong whats causing the jumping and how i can make the index page images to behave like the images webpage one

i only have a couple of hours left before some progress is due! HELP! :(

Link to comment
Share on other sites

3 answers to this question

Recommended Posts

  • 0

The problem is that you are using a table with a fixed width for the header on your images page, but on the index page (and other pages), the header is all inline and wrapped in a H1 tag (this is not how you use H1 tags btw) with no defined width.

If you want the header on your index page to behave like the images page, then just copy the code you used on your images page and insert it where necessary on the index page.

Like this:

Copy this part of the code from your images page (this constructs your entire header including the navigation, logo and social images):

<table width="1123" height="76" border="0" align="center" cellpadding="1" cellspacing="1">
  <tr>

    <td width="1119" align="center" valign="middle"><div align="center"><a href="index.html"><img src="images/news.png" alt="" width="94" height="34" hspace="10" /></a><a href="http://www.myspace.com/themindsight/music-player?sindex=-1.0&shuffle=false&amix=false&pmix=false&plid=1225414&artid=42792252&sseed=0&ptype=3&stime=0&ap=1&rpeat=false" target="_blank"><img src="images/player.png" alt="" width="112" height="34" hspace="10" /></a> <a href="band.html"><img src="images/band.png" alt="band" width="87" height="34" hspace="10" /></a> <a href="images.html"><img src="images/images.png" alt="ima" width="122" height="34" hspace="10" /></a> <a href="lyrics.html"><img src="images/lyrics.png" alt="" width="113" height="34" hspace="10" /></a> <a href="http://www.indiepool.com/MS2007CD1" target="_blank"><img src="images/store.png" alt="" width="102" height="34" hspace="10" /></a> <a href="contact.html"><img src="images/contact.png" alt="contact" width="150" height="34" hspace="10" /></a> <a href="links.html"><img src="images/links.png" alt="" width="91" height="34" hspace="10" /></a><img src="images/logo.png" alt="" width="830" height="177" /><br />
    <img src="images/youtube.png" alt="" width="71" height="29" hspace="30" /><img src="images/myspace.png" alt="" width="132" height="29" hspace="30" /><img src="images/facebook.png" alt="facebook" width="104" height="29" hspace="30" /><img src="images/twitter.png" alt="" width="102" height="29" hspace="30" /></div></td>
  </tr>
  <tr>
    <td> </td>
  </tr>

  <tr>
    <td> </td>
  </tr>
</table>

Then go to your index page and replace the following code with the one from your images page:

  <h1><a href="index.html"><img src="images/news.png" width="94" height="34" hspace="10" align="absmiddle" /></a><a href="http://www.myspace.com/themindsight/music-player?sindex=-1.0&shuffle=false&amix=false&pmix=false&plid=1225414&artid=42792252&sseed=0&ptype=3&stime=0&ap=1&rpeat=false" target="_blank"><img src="images/player.png" alt="" width="112" height="34" hspace="10" align="absmiddle" /></a>
    <a href="band.html"><img src="images/band.png" width="87" height="34" hspace="10" align="absmiddle" /></a>
    <a href="images.html"><img src="images/images.png" width="122" height="34" hspace="10" align="absmiddle" /></a>

    <a href="lyrics.html"><img src="images/lyrics.png" width="113" height="34" hspace="10" align="absmiddle" /></a>
    <a href="http://www.indiepool.com/MS2007CD1" target="_blank"><img src="images/store.png" width="102" height="34" hspace="10" align="absmiddle" /></a>
    <a href="contact.html"><img src="images/contact.png" width="150" height="34" hspace="10" align="absmiddle" /></a>
    <a href="links.html"><img src="images/links.png" width="91" height="34" hspace="10" align="absmiddle" /></a><img src="images/logo.png" width="830" height="177" align="top" /><br />
  <img src="images/youtube.png" width="71" height="29" hspace="30" /><img src="images/myspace.png" width="132" height="29" hspace="30" /><img src="images/facebook.png" width="104" height="29" hspace="30" /><img src="images/twitter.png" width="102" height="29" hspace="30" /><br />
  </h1>

There are a lot of other things that need correcting in your code, but this is the quick and dirty to get you the results you are looking for right now.

Link to comment
Share on other sites

  • 0

The problem is that you are using a table with a fixed width for the header on your images page, but on the index page (and other pages), the header is all inline and wrapped in a H1 tag (this is not how you use H1 tags btw) with no defined width.

If you want the header on your index page to behave like the images page, then just copy the code you used on your images page and insert it where necessary on the index page.

Like this:

Copy this part of the code from your images page (this constructs your entire header including the navigation, logo and social images):

<table width="1123" height="76" border="0" align="center" cellpadding="1" cellspacing="1">
  <tr>

    <td width="1119" align="center" valign="middle"><div align="center"><a href="index.html"><img src="images/news.png" alt="" width="94" height="34" hspace="10" /></a><a href="http://www.myspace.com/themindsight/music-player?sindex=-1.0&shuffle=false&amix=false&pmix=false&plid=1225414&artid=42792252&sseed=0&ptype=3&stime=0&ap=1&rpeat=false" target="_blank"><img src="images/player.png" alt="" width="112" height="34" hspace="10" /></a> <a href="band.html"><img src="images/band.png" alt="band" width="87" height="34" hspace="10" /></a> <a href="images.html"><img src="images/images.png" alt="ima" width="122" height="34" hspace="10" /></a> <a href="lyrics.html"><img src="images/lyrics.png" alt="" width="113" height="34" hspace="10" /></a> <a href="http://www.indiepool.com/MS2007CD1" target="_blank"><img src="images/store.png" alt="" width="102" height="34" hspace="10" /></a> <a href="contact.html"><img src="images/contact.png" alt="contact" width="150" height="34" hspace="10" /></a> <a href="links.html"><img src="images/links.png" alt="" width="91" height="34" hspace="10" /></a><img src="images/logo.png" alt="" width="830" height="177" /><br />
    <img src="images/youtube.png" alt="" width="71" height="29" hspace="30" /><img src="images/myspace.png" alt="" width="132" height="29" hspace="30" /><img src="images/facebook.png" alt="facebook" width="104" height="29" hspace="30" /><img src="images/twitter.png" alt="" width="102" height="29" hspace="30" /></div></td>
  </tr>
  <tr>
    <td> </td>
  </tr>

  <tr>
    <td> </td>
  </tr>
</table>

Then go to your index page and replace the following code with the one from your images page:

  <h1><a href="index.html"><img src="images/news.png" width="94" height="34" hspace="10" align="absmiddle" /></a><a href="http://www.myspace.com/themindsight/music-player?sindex=-1.0&shuffle=false&amix=false&pmix=false&plid=1225414&artid=42792252&sseed=0&ptype=3&stime=0&ap=1&rpeat=false" target="_blank"><img src="images/player.png" alt="" width="112" height="34" hspace="10" align="absmiddle" /></a>
    <a href="band.html"><img src="images/band.png" width="87" height="34" hspace="10" align="absmiddle" /></a>
    <a href="images.html"><img src="images/images.png" width="122" height="34" hspace="10" align="absmiddle" /></a>

    <a href="lyrics.html"><img src="images/lyrics.png" width="113" height="34" hspace="10" align="absmiddle" /></a>
    <a href="http://www.indiepool.com/MS2007CD1" target="_blank"><img src="images/store.png" width="102" height="34" hspace="10" align="absmiddle" /></a>
    <a href="contact.html"><img src="images/contact.png" width="150" height="34" hspace="10" align="absmiddle" /></a>
    <a href="links.html"><img src="images/links.png" width="91" height="34" hspace="10" align="absmiddle" /></a><img src="images/logo.png" width="830" height="177" align="top" /><br />
  <img src="images/youtube.png" width="71" height="29" hspace="30" /><img src="images/myspace.png" width="132" height="29" hspace="30" /><img src="images/facebook.png" width="104" height="29" hspace="30" /><img src="images/twitter.png" width="102" height="29" hspace="30" /><br />
  </h1>

There are a lot of other things that need correcting in your code, but this is the quick and dirty to get you the results you are looking for right now.

thanks so much for your help! you really saved my butt! :)

im more of a graphic designer and so all this web development stuff is very new to me. Im using dreamweaver and constantly adding stuff without thought to efficent coding so im not surprised that it is more or less a complete mess.

the next thing i need to work on is some kind of a text box on the main page where the band members can post updates live either as a shout box of some kind or a twitter feed. any thoughts?

Link to comment
Share on other sites

  • 0

A twitter feed might be the best bet. It's simple to integrate and I'm guessing the band already has a twitter feed that they are already updating regularly?

Here is the twitter widget page. Just customize it to your liking, then hit "Finish & Grab Code". You then paste the code in to the part of your website where you want it to appear. If you need help with that part, let us know.

http://twitter.com/goodies/widget_profile

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.