Jump to content


Image Problem (CSS related I think)


3 replies to this topic

#1 Raven-X

    Young Padawan

  • Members
  • Pip
  • 71 posts
  • Gender:Male
  • Location:New Jersey
  • Interests:I love having fun, programming, web design, graphic design, gaming, anime, manga, and being a student (love learning new software).

Posted 07 July 2008 - 10:17 PM

http://www.anime-coders.com/vibrancy/

Not sure what's going on. The support guy told me I have to link them through my HTML file but on my main site (www.anime-coders.com), I'm linking through my css and it works fine. But nothing shows up on the layout I'm working on, any help? The support guy said it's in the coding but he wouldn't help me at all and I've been at it for days. I'm not even sure if it is the coding...

CSS File:
/*leftmenu styles*/
#leftmenu a:link {color: #eae6e7; text-decoration: none}
#leftmenu a:visited {color: #eae6e7; text-decoration: none}
#leftmenu a:hover {color: #dc0101; text-decoration: none}
#leftmenu a:active {color: #a6a5a5; text-decoration: none}
/*leftmenu styles*/

/*footer styles*/
#footer a:link {color: #FFFFFF; text-decoration: none}
#footer a:visited {color: #FFFFFF; text-decoration: none}
#footer a:hover {color: #540000; text-decoration: none; border-bottom: 1px dashed #540000}
#footer a:active {color: #d0cdcd; text-decoration: none; border-bottom: 1px dashed #d0cdcd}
/*footer styles*/

/*menu navigation link styles*/
.menunav a:link {
color: #FFFFFF; background-color: #101010; 
padding: 5px 7px 16px 6px; margin: 0px -12px 0px 0px; 
text-decoration: none
}

.menunav a:visited {
color: #FFFFFF; background-color: #101010; 
padding: 5px 7px 16px 6px; margin: 0px -12px 0px 0px;
text-decoration: none
}

.menunav a:hover {
color: #230101; background-color: #bfbbbb; 
padding: 5px 7px 16px 6px; margin: 0px -12px 0px 0px; 
text-decoration: none
}

.menunav a:active {color: #FFFFFF; background-color: #696868; 
padding: 5px 7px 16px 6px; margin: 0px -12px 0px 0px; 
text-decoration: none
}
/*menu navigation link styles*/

/*tag styles*/
body {background: #3b3a3a url(images/background.gif);}/*short hand style in use, note that the color and the background image run in the same line*/
/*tag styles*/

/*class styles*/
ul.listimage {list-style-position: outside; list-style-image: url(images/listimage.gif); }

.headline {
font: 35px arial narrow;
letter-spacing: 2px;
color: #2d2c2c;
}
/*class styles*/

/*div styles*/
#container {
height: 647px; width: 845px;
margin: auto; 
position: relative; top: 110px;
border: 3px solid black;
z-index: 2; 
}

#banner {
background-image: url(images/banner.png);
height: 170px; width: 860px;
position: relative; left: -8px; bottom: 153px;
margin: auto; margin-top: 40px; 
z-index: 0;
overflow: hidden; 
}

#menunav {
background-color: #101010;
height: 27px; width: 845px;
z-index: 3;
position: absolute; top: 54px; left: -3px;
padding: 5px 0px 5px 0px;
border: 3px solid black;
font-family: Arial; font-size: 15px; letter-spacing: 3px; text-align: left;
}

#leftmenu {
font: 17px Helvetica;
letter-spacing: 1px;
background-image: url(images/leftmenu.gif);
height: 550px; width: 160px;
position: absolute; top: 97px;
overflow: hidden;  
}

#content {
font: 14px Arial;
background-color: #ffffff;
background-image: url(images/contentbackground.gif);
height: 540px; width: 673px;
position: relative; left: 160px; bottom: 113px;
border-left: 2px solid black; 
z-index: 1;
padding: 5px;
overflow: hidden;
}

#contentholder {
position: relative; left: 16px; top: 10px;
background-image: url(images/contentholder.gif);
height: 505px; width: 630px;
z-index: 2;
padding: 5px;
overflow: hidden;
}


#footer {
font: 16px Helvetica;/*shorthand coding in use*/
text-align: center; color: #FFFFFF;
background-image: url(images/footer.png); background-repeat: no-repeat;
padding-top: 13px; padding-bottom: 10px;
height: 29px; width: 852px;
position: relative; left: -4px; bottom: 110px;
overflow: hidden;
margin-bottom: -10px;
}

/*div styles*/


HTML File:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Vibrancy.com</title>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

</head>

<body>

<div id="container">

<div id="banner"></div>

<div id="menunav" class="menunav">
<a href="http://www.anime-coders.com/vibrancy">Vector</a>
<a href="http://www.anime-coders.com/vibrancy">Abstract</a>
<a href="http://www.anime-coders.com/vibrancy">Digital</a>
<a href="http://www.anime-coders.com/vibrancy">Traditional Media</a>
<a href="http://www.anime-coders.com/vibrancy">Mixed Media</a>
<a href="http://www.anime-coders.com/vibrancy">3D Designs</a>
</div>

<div id="leftmenu">
<ul class="listimage">
<li><a href="http://www.anime-coders.com/vibrancy">Home</a></li>
<li><a href="http://www.anime-coders.com/vibrancy">Updates</a></li>
<li><a href="http://www.anime-coders.com/vibrancy">About Us</a></li>
<li><a href="http://www.anime-coders.com/vibrancy">Contact Us</a></li>
<li><a href="http://www.anime-coders.com/vibrancy">Designs</a></li>
</ul>
</div>

<div id="content"><div id="contentholder">
<span class="headline">Headline</span>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus scelerisque. Pellentesque faucibus, lectus eget vulputate aliquet, magna ipsum dignissim enim, et molestie justo nibh id sem. Cras tortor pede, pretium ac, viverra non, scelerisque at, arcu. Phasellus sed purus in ipsum vestibulum vehicula. Curabitur eget est. Quisque dignissim, eros ac dignissim ullamcorper, nunc risus aliquet magna, in hendrerit libero risus vel pede. In mattis, neque non consequat vestibulum, metus magna venenatis elit, a fermentum dolor ligula id turpis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus nec felis. Aliquam ipsum diam, egestas at, gravida et, aliquam non, ante. Suspendisse pretium, sapien nec interdum tempor, risus urna fermentum sapien, quis consequat urna turpis vel risus. Quisque sodales mauris vel dolor.</p>

<p>Maecenas massa elit, adipiscing id, venenatis sodales, fringilla quis, est. Nunc vehicula, lorem vestibulum congue molestie, ante lorem luctus purus, vel condimentum pede tellus et metus. Cras vitae elit. Donec porta ipsum a sem. Praesent velit. Pellentesque lectus est, hendrerit et, fringilla vitae, posuere vitae, neque. Donec augue eros, auctor in, imperdiet facilisis, malesuada in, mi. Morbi diam tellus, rutrum vel, vestibulum id, eleifend sed, arcu. Fusce hendrerit vestibulum elit. Mauris vitae nisl. Vivamus rhoncus iaculis arcu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed et magna non enim faucibus sollicitudin. Maecenas placerat venenatis tellus. Ut sodales arcu a ante. Duis tincidunt urna eu lacus. Fusce nisl mauris, tempus quis, lacinia ac, vehicula nec, mauris. Vestibulum massa. Etiam tincidunt arcu tincidunt nulla vestibulum tristique.</p>

<p>Praesent aliquam pulvinar eros. Integer eleifend congue odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean nisi libero, blandit id, auctor ac, dictum sed, ipsum. Nullam non purus. Fusce pulvinar, velit venenatis malesuada commodo, magna nulla condimentum massa, eu commodo neque tellus sit amet ligula. Cras pede. Nulla non libero. Suspendisse non orci eget sapien sollicitudin imperdiet. Donec ornare turpis eu magna. Fusce ornare. Donec sit amet dolor sed ligula ullamcorper ullamcorper. Pellentesque nec pede et felis pretium iaculis. Nam turpis nunc, posuere molestie, tempor facilisis, sodales in, dolor. Sed euismod ullamcorper leo. Vestibulum consequat. Nullam pulvinar ultrices orci. Nunc porttitor est sit amet velit. Nulla nunc.</p>
</div>
</div>



<div id="footer">
<a href="http://www.anime-coders.com/vibrancy">Designs</a> |
<a href="http://www.anime-coders.com/vibrancy">Content &copy; Vibrancy.com. All rights reserved.</a> |
<a href="http://www.anime-coders.com/vibrancy">Contact Us</a> 
</div>

</div>

</body>
</html>


#2 MarkB

    Young Padawan

  • Members
  • Pip
  • 26 posts
  • Gender:Male
  • Location:In a land Far Far away: Australia

Posted 08 July 2008 - 04:09 AM

Not exactly sure what you are reffering to with your website but if your talking about the wired stuff that is going on in FF and IE ( doesnt seem to happen in opera :) ) then i would try maybe removing the doctype tag because i have noticed when somthing u can explain happens blame the doctype

#3 N4Z.

    Call me Yoda

  • Members
  • PipPipPipPip
  • 3,016 posts
  • Gender:Male
  • Location:127.0.0.1
  • Interests:Designing, Apple Fan Boy, Music Production and Weekends!

Posted 08 July 2008 - 05:25 AM

The banner image doesn't display because:

http://www.anime-cod...ages/banner.png

So reupload it :)

#4 Raven-X

    Young Padawan

  • Members
  • Pip
  • 71 posts
  • Gender:Male
  • Location:New Jersey
  • Interests:I love having fun, programming, web design, graphic design, gaming, anime, manga, and being a student (love learning new software).

Posted 08 July 2008 - 05:49 PM

That was me testing yesterday, it was changed from that since last night.

http://www.anime-coders.com/vibrancy/

I tried to put an image in the content section but even that image would not show up. I'm not sure what's wrong. I removed the doctype temporarily, I saw no difference. It doesn't make since, everything was working fine and now it's....just not, lol. But what I can see is that only the images are causing the problem.





1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users