I need some help with this site im making

mnx12

26-10-2005 22:14:52

Here is a link
http//dhost.info/afitribute/therest/index.html

[code16831a3c28d]<html>
<head>
<title>The Rest</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body{ background-color: #262626; color: #CCC; margin: 0; }
img{ border: 0; }
#container{ background: #1A1A1A; color: #CCC; margin: 0 30% 0 10%;
width: 746px; height: 140%; }
#container img{ display: block; }
#links{ padding: 50px 0 0 25px; border: 0; margin: 0; }
#links a{ display: block; }
</style>
</head>
<body>
<div id="container">
<img src="therest.gif">
<div id="links">
<a href="home.html"><img src="home.gif" alt="Home" /></a>
<a href="forums.html"><img src="forum.gif" alt="Forum" /></a>
<a href="news.html"><img src="news.gif" alt="News / Tour" /></a>
<a href="bio.html"><img src="bio.gif" alt="Bios / Links" /></a>
<a href="music.html"><img src="music.gif" alt="Music" /></a>
<a href="videos.html"><img src="videos.gif" alt="Videos" /></a>
<a href="lyrics.html"><img src="lyrics.gif" alt="Lyrics" /></a>
<a href="gallery.html"><img src="gallery.gif" alt="Gallery" /></a>
</div>

</div>
</body>
</html>[/code16831a3c28d]

So here is what I need help with. First of all, the links work fine in IE, but in Firefox, they go across the rest of the page. I need to fix it so that it links just the image like it does in IE. Secondly, I dont know how to setup the content so that it is in the large dark blue space to the right of the links. Thank you!

drummer_kew_03

26-10-2005 22:18:21

I'm not seeing a difference between IE and FF on the page.

mnx12

26-10-2005 22:19:11

[quote0620c310d1="drummer_kew_03"]I'm not seeing a difference between IE and FF on the page.[/quote0620c310d1]The links, in IE are only on the images. In FF, they go to the right along the whole page.

Avenger55

26-10-2005 22:31:54

Change
#links a{ display block; } in your CSS from block to table

There may be another one that's more suitable for what you're doing though.

mnx12

26-10-2005 22:39:52

[quotee97e46cb0b="Avenger55"]Change
#links a{ display block; } in your CSS from block to table

There may be another one that's more suitable for what you're doing though.[/quotee97e46cb0b]Thank you!! That worked out perfectly +1 karma! So can someone help me out with my second issue?

mnx12

26-10-2005 22:46:26

Anyone?? Im pretty sure this is simple, I just cant figure it out!

Avenger55

26-10-2005 22:51:40

You could possibly use a floating div, something like this
[code147d4cdcc47]
<html><head><title>The Rest</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body{ background-color: #262626; color: #CCC; margin: 0; }
img{ border: 0; }
#container{ background: #1A1A1A; color: #CCC; margin: 0 30% 0 10%;
width: 746px; height: 140%; }
#container img{ display: block; }
#links{ padding: 50px 0 0 25px; border: 0; margin: 0; }
#links a{ display: table; }
#main { border: solid red; float: right; height: 500px; width: 550px; }
</style></head>

<body>
<div id="container">
<img src="index_files/therest.gif">
<DIV id="main">testtest
</DIV>
<div id="links">
<a href="http://dhost.info/afitribute/therest/home.html"><img src="index_files/home.gif" alt="Home"></a>
<a href="http://dhost.info/afitribute/therest/forums.html"><img src="index_files/forum.gif" alt="Forum"></a>
<a href="http://dhost.info/afitribute/therest/news.html"><img src="index_files/news.gif" alt="News / Tour"></a>
<a href="http://dhost.info/afitribute/therest/bio.html"><img src="index_files/bio.gif" alt="Bios / Links"></a>
<a href="http://dhost.info/afitribute/therest/music.html"><img src="index_files/music.gif" alt="Music"></a>
<a href="http://dhost.info/afitribute/therest/videos.html"><img src="index_files/videos.gif" alt="Videos"></a>
<a href="http://dhost.info/afitribute/therest/lyrics.html"><img src="index_files/lyrics.gif" alt="Lyrics"></a>
<a href="http://dhost.info/afitribute/therest/gallery.html"><img src="index_files/gallery.gif" alt="Gallery"></a>
</div>

</div>
</body></html>
[/code147d4cdcc47]

You can remove the border from the CSS, it just helps you see the div layer.

mnx12

26-10-2005 22:59:59

That looks really good, but i want it down aligned with "Home" and more to the right.

Avenger55

26-10-2005 23:09:02

[code1a9618c4b8a]
<html><head><title>The Rest</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body{ background-color: #262626; color: #CCC; margin: 0; }
img{ border: 0; }
#container{ background: #1A1A1A; color: #CCC; margin: 0 30% 0 10%;
width: 746px; height: 140%; }
#container img{ display: block; }
#links{ padding: 0px 0 0 25px; border: 0; margin: 0; }
#links a{ display: table; }
#main { border: solid red; float: right; height: 500px; width: 525px; }
</style></head>

<body>
<div id="container">
<img src="index_files/therest.gif">
<br>
<br>
<DIV id="main">testtest
</DIV>
<div id="links">
<a href="http://dhost.info/afitribute/therest/home.html"><img src="index_files/home.gif" alt="Home"></a>
<a href="http://dhost.info/afitribute/therest/forums.html"><img src="index_files/forum.gif" alt="Forum"></a>
<a href="http://dhost.info/afitribute/therest/news.html"><img src="index_files/news.gif" alt="News / Tour"></a>
<a href="http://dhost.info/afitribute/therest/bio.html"><img src="index_files/bio.gif" alt="Bios / Links"></a>
<a href="http://dhost.info/afitribute/therest/music.html"><img src="index_files/music.gif" alt="Music"></a>
<a href="http://dhost.info/afitribute/therest/videos.html"><img src="index_files/videos.gif" alt="Videos"></a>
<a href="http://dhost.info/afitribute/therest/lyrics.html"><img src="index_files/lyrics.gif" alt="Lyrics"></a>
<a href="http://dhost.info/afitribute/therest/gallery.html"><img src="index_files/gallery.gif" alt="Gallery"></a>
</div>

</div>
</body></html>
[/code1a9618c4b8a]

Changing the width in main will shrink it more to the right.

mnx12

26-10-2005 23:09:45

Thank you, thank you, thank you. I would +karma for you again, but I cant hehe.

Here is the updated site
http//dhost.info/afitribute/therest/index.html

Avenger55

26-10-2005 23:13:17

Also if you don't like it being up flush against the right side, you can add a margin-right #px to #main to move it to the left.

You're welcome. )