PDA

Click to See Complete Forum and Search --> : Repeating Images

rwhite
06-17-2005, 12:05 PM
NONE
toicontien
06-17-2005, 01:05 PM
If the image is merely decorative, place the image as a background. If the image relates directly to the content, keep it as an <img> tag. If the image is a logo, either keep it as an <img> tag (least amount of code) or create the following markup structure:

<h1 id="logo">
<span id="logoText">What normally would be placed in the alt=""</span>
<span id="logoImage">&nbsp;</span>
<a id="logoLink" href="#">&nbsp;</a>
</h1>


And then the following CSS:

#logo,
#logoImage,
#logoLink,
#logoText {
height: ###px; /* Height of logo */
left: 0;
position: absolute;
top: 0;
width: ###px; /* Width of logo */
}

#logo {
position: relative;
}

#logoImage {
background: transparent url(URL/to/logo.gif) no-repeat scroll 0 0;
z-index: 2;
}

#logoLink {
z-index: 3;
}

#logoLink:link,
#logoLink:active,
#logoLink:visited,
#logoLink:hover,
#logoLink:focus {
text-decoration: none;
}

#logoText {
font-size: 1em;
z-index: 1;
}
Sanim
06-17-2005, 02:16 PM
toincontien, there's a much easier image replacement method than all that CSS you just used. Example XHTML page:

<!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-us">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>A page with Image Replacement</title>
<style type="text/css">
<![CDATA[
h1#logo {
width: 400px; /* width of image */
height: 200px; /* height of image */
display: block;
background: url(YourImageHere) no-repeat;
}

h1#logo a {
text-indent: -5000px; /* so the text in the link doesn't appear */
display: block;
margin: 0;
padding: 0;
width: 400px; /* width of image */
height: 200px; /* height of image */
/* IE 5 hack */
overflow: hidden;
/* end hack */
text-decoration: none;
]]>
</style>
</head>
<body>
<h1 id="logo"><a href="/">Site Logo</a></h1>
</body>
</html>
rwhite
06-17-2005, 08:44 PM
NONE
rwhite
06-17-2005, 11:24 PM
NONE
design
07-01-2005, 02:54 AM
NONE
toicontien
07-05-2005, 11:30 AM
You've got to paste things in the correct spots. The first chunk of code is HTML and should be placed in the <body> of an HTML document. The second chunk is CSS, which must either be placed in an external CSS document and linked-to, or placed in the <head> of the document inside <style> tags: Learning about CSS from W3Schools (http://www.w3schools.com/css/default.asp) might be a good start.