0

I am converting a Photoshop image to HTML and need the images to show but the text not to and I see both. I also only see the image when placed in HTML and not when in CSS.

6
Contributors
20
Replies
22
Views
6 Years
Discussion Span
Last Post by Dandello
0

CSS

@charset "utf-8";
/* CSS Document */

body{
	margin-left:0px;
	margin-top:0px;
	margin-right:0px;
	margin-bottom:0px;
}
.container{
	width:994px;
	margin: 0 auto;
}
.header{
	height:220px;
	width:901px;
	background:url(/images/mockup-2_02.jpg) no-repeat;
}
.navigation{
	float:left;
	height:33px;
	width:994px;
	text-align:center;
	font-family: Arial, Helvetica, sans-serif;
	padding-top:17px;
	word-spacing:70px;
}
.phone{
	float:right;
}
.sidebar{
	float:left;
	height:auto;
	width:300px;
	padding-top:5px;
	padding-right:0px;
	padding-bottom:0px;
	padding-left:30px;
	background:url(/images/mockup-2_08.jpg) no-repeat;
}
.box {
 width: 70px;
 height: 30px;
 border: 1px solid #FFFFFF;
 text-align: center;
}
.contentslider {
  position:relative;
  display:block;
  width:994px;
  height:400px;
  margin:0 auto;
  overflow:hidden;
  background:url(/images/mockup-2_014.jpg) no repeat;
}
.cs_wrapper {
  position:relative;
  display:block;
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  overflow:hidden;
}
.cs_slider {
  position:absolute;
  width:10000px;
  height:100%;
  margin:0;
  padding:0;
}
.cs_cars {
  float:left;
  position:relative;
  top:0;
  left:0;
  display:block;
  width:994px;
  height:400px;
  margin:0 auto;
  padding:0;
}
.footer{
	font-family:Arial, Helvetica, sans-serif;
	font-size:x-small;
	float:left;
	height:250px;
	width:994px;
	color: gray;
	clear:both;
    background:url(/images/mockup-2_018.jpg);
}
.left_footer{
float:left;
padding:10px 0 0 10px;
}
.right_footer{
float:right;
padding:10px 10px 0 0;
}

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ABC Automall</title>
<link href="default.css" rel="stylesheet" type="text/css"/>
</head>

<body>
<div id="container">
	<div id="header"> <img src="images/mockup-2_02.jpg" />
	<h1 class="title"><span>ABC Automall</span></h1>
    <h4 class="address"><span>LOCATED AT: 5575 Douglas Avenue | URBANDALE, IA 53022</span></h4>
    <h4 class="phone"><span class="type">Sales:</span><span title="(888) 555-5555"></span> (888) 555-5555</h4>
    <h4 class="phone"><span class="type">Service:</span><span title="(888) 555-5554"></span> (888) 555-5554</h4>
    </div>
</div>
	<div id="navigation">
	<nav>Home | New Cars | Pre-Owned | Specials | Research | Service/Parts | Finance | Locations | About Us | Contact Us</nav>
    </div>
    <div id="sidebar"> <img src="images/mockup-2_08.jpg" />
    <h4><a href-"#">View Buick Inventory</a></h4>
    <h4><a href-"#">View Cadillac Inventory</a></h4>
    <h4><a href-"#">View GMC Inventory</a></h4>
    <h4><a href-"#">View Hyundai Inventory</a></h4>
        </div>
	<br />
    <h4><span>Inventory Quick Search</span></h4>
    <label class="newInv"><input name="invent" type="radio" value="new"  checked="checked" class="radio"/> New</label>
	<label class="usedInv"><input name="invent" type="radio" value="used"  class="radio" /> Used</label>
    <label class="usedInv"><input name="invent" type="radio" value="certified"  class="radio" /> Certified</label>
	<div>
    <fieldset>
    <h4>
    <select>
  		<option value="Make">- Select Make</option>
    </select></h4>
    <h4><select>
  		<option value="Model">- Select Model</option>
    </select></h4>
  	<h4><select>
		<option value="Trim">- Select Trim</option>
	</select></h4>
    </fieldset>
    </div>
    <div class="box">
  Search
</div>
    </div>
    <div id="document">
    <h4>ABC Automall of Urbandale, Iowa</h4>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
    Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    Lorem ipsum dolor my nibh euismod tincidunt ut lacreet dolor magna aliguam erat voluptat. Ut wisis enim ad minim veniam.</p>
    </div>
    <div id="manspecial">
    <h4>Manager's Specials</h4>
    <div id="contentslider">
    <div class="cs_wrapper">
        <div class="cs_slider">
        <div class="cs_cars">>
    <h2> <a href="#">2002 Chevy Ultra Longname R-15F $12,995.00</a> </h2>
    <a href="#">
        <img src=""
            alt="" /></a>
    <h2> <a href="#">2002 Chevy Ultra Longname R-15F $12,995.00</a> </h2>
    <a href="#">
        <img src=""
            alt="" /></a>
    <h2> <a href="#">2002 Chevy Ultra Longname R-15F $12,995.00</a> </h2>
    <a href="#">
        <img src=""
            alt="" /></a>
    <h2> <a href="#">2002 Chevy Ultra Longname R-15F $12,995.00</a> </h2>
    <a href="#">
        <img src=""
            alt="" /></a>
    <h2> <a href="#">2002 Chevy Ultra Longname R-15F $12,995.00</a> </h2>
    <a href="#">
        <img src=""
            alt="" /></a>
    <h2> <a href="#">2002 Chevy Ultra Longname R-15F $12,995.00</a> </h2>
    <a href="#">
        <img src=""
            alt="" /></a>
    <h2> <a href="#">2002 Chevy Ultra Longname R-15F $12,995.00</a> </h2>
    <a href="#">
        <img src=""
            alt="" /></a>
    <h2> <a href="#">2002 Chevy Ultra Longname R-15F $12,995.00</a> </h2>
    <a href="#">
        <img src=""
            alt="" /></a>
    </div></div></div></div>
	<div id="footer"><img src="images/mockup-2_18.jpg" />
   	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
    Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    Lorem ipsum dolor my nibh euismod tincidunt ut lacreet dolor magna aliguam erat voluptat. Ut wisis enim ad minim veniam.</p>
    <span>2011 ABC AUTOMALL. ALL RIGHTS RESERVED</span>
        <a href="#">Privacy</a>
        <a href="#">Site Map</a>
        <a href="#">Blog</a>
        </div>
    </div>
</body>
</html>

Edited by Ezzaral: Added code tags. Please use them to format any code that you post.

0

Let's see - unless there's a version I'm not aware of, Photoshop is an image program - therefore any text in the image is IN the image and cannot be removed by css. Also, assuming the html page and the css page are in the same directory - '/image/' points to a different place than 'image/'

0

Let's see - unless there's a version I'm not aware of, Photoshop is an image program - therefore any text in the image is IN the image and cannot be removed by css. Also, assuming the html page and the css page are in the same directory - '/image/' points to a different place than 'image/'

No, not text in the image. HTML for the image. I removed the / from the image and it still only shows when I have the image in HTML.

0

Sorry - misunderstood. First, is the css and the html document in the same directory? and second - in the css try

background-image:url(images/mockup-2_08.jpg)

It's a subtle difference, but sometimes that's what it is.

0

I tried something different but now the text shows up and the images are off.

<html>
<head>
<title>ABC Automall</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="default.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
</head>
<!-- Save for Web Slices (mockup-4.psd) --><body onLoad="MM_preloadImages('images/mockup-4_05.jpg')" onmouseover="MM_swapImage('Rotator','','images/mockup-4_05.jpg',1)">
<table id="Table_01" width="1200" height="1034" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="2" rowspan="2">
			<img src="images/mockup-4_01.jpg" width="113" height="176" alt=""></td>
		<td colspan="8">
			<img src="images/mockup-4_02.jpg" width="979" height="175" alt="" target="_blank" onMouseOver="mouseOver()"
			onmouseout="mouseOut()"></td>
            <div id="container">
			<div id="header"> 
			<h1 class="title"><span>ABC Automall</span></h1>
   			<h4 class="address"><span>LOCATED AT: 5575 Douglas Avenue | URBANDALE, IA 53022</span></h4>
    		<h4 class="phone"><span class="type">Sales:</span> (888) 555-5555</h4>
   			<h4 class="phone"><span class="type">Service:</span> (888) 555-5554</h4>
    		</div></div>
            <div id="navigation">
            <nav>Home | New Cars | Pre-Owned | Specials | Research | Service/Parts | Finance | Locations | About Us | Contact Us</nav>
            </div>
		<td rowspan="8">
			<img src="images/mockup-4_03.jpg" width="108" height="1033" alt=""></td>
	</tr>
	<tr>
		<td colspan="4">
			<img src="images/mockup-4_04.jpg" width="250" height="1" alt=""></td>
		<td colspan="2" rowspan="2">
			<img src="images/mockup-4_05.jpg" alt="" name="Rotator" width="717" height="496" id="Rotator"></td>
              <div id="document">
            <h4>ABC Automall of Urbandale, Iowa</h4>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
            Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
            Lorem ipsum dolor my nibh euismod tincidunt ut lacreet dolor magna aliguam erat voluptat. Ut wisis enim ad minim veniam.</p>
            </div>
			<div id="info">
            <nav>Value Your Trade In</nav>
            <nav>Specials & Savings</nav>
            <nav>Read Our Blog</nav></div>
            </div>
		<td colspan="2">
			<img src="images/mockup-4_06.jpg" width="12" height="1" alt=""></td>
	</tr>
	<tr>
		<td rowspan="6">
			<img src="images/mockup-4_07.jpg" width="108" height="857" alt=""></td>
		<td colspan="4">
			<img src="images/mockup-4_08.jpg" width="248" height="495" alt=""></td>
		<div id="sidebar"> 
    			<h4><a href-"#">View Buick Inventory</a></h4>
    			<h4><a href-"#">View Cadillac Inventory</a></h4>
    			<h4><a href-"#">View GMC Inventory</a></h4>
   				<h4><a href-"#">View Hyundai Inventory</a></h4>
        </div>
                <h4><span>Inventory Quick Search</span></h4>
                <label class="newInv"><input name="invent" type="radio" value="new"  checked="checked" class="radio"/> New</label>
                <label class="usedInv"><input name="invent" type="radio" value="used"  class="radio" /> Used</label>
                <label class="usedInv"><input name="invent" type="radio" value="certified"  class="radio" /> Certified</label>
                <div>
                <fieldset>
                <h4>
                <select>
                    <option value="Make">- Select Make</option>
                </select></h4>
                <h4><select>
                    <option value="Model">- Select Model</option>
                </select></h4>
                <h4><select>
                    <option value="Trim">- Select Trim</option>
                </select></h4>
                </fieldset>
                </div>
                <div class="box">
              Search
            </div>
                </div>

		<td rowspan="2">
			<img src="images/mockup-4_09.jpg" width="7" height="519" alt=""></td>
		<td colspan="2" rowspan="4">
			<img src="images/mockup-4_10.jpg" width="12" height="711" alt=""></td>
	</tr>
	<tr>
		<td colspan="4">
			<img src="images/mockup-4_11.jpg" width="248" height="24" alt=""></td>
		<td colspan="2">
			<img src="images/mockup-4_12.jpg" width="717" height="24" alt=""></td>
	</tr>
	<tr>
		<td colspan="3" rowspan="2">
			<img src="images/mockup-4_13.jpg" width="11" height="192" alt=""></td>
		<td colspan="3">
			<img src="images/mockup-4_14.jpg" width="952" height="158" alt=""></td>
		<td rowspan="2">
             <div id="manspecial">
            <h4>Manager's Specials</h4>
            <div id="contentslider">
            <div class="cs_wrapper">
                <div class="cs_slider">
                <div class="cs_cars">>
            <h2> <a href="#">2002 Chevy Ultra Longname R-15F $12,995.00</a> </h2>
            <a href="#">
                <img src=""
                    alt="" /></a>
            <h2> <a href="#">2002 Chevy Ultra Longname R-15F $12,995.00</a> </h2>
            <a href="#">
                <img src=""
                    alt="" /></a>
            <h2> <a href="#">2002 Chevy Ultra Longname R-15F $12,995.00</a> </h2>
            <a href="#">
                <img src=""
                    alt="" /></a>
            <h2> <a href="#">2002 Chevy Ultra Longname R-15F $12,995.00</a> </h2>
            <a href="#">
                <img src=""
                    alt="" /></a>
            <h2> <a href="#">2002 Chevy Ultra Longname R-15F $12,995.00</a> </h2>
            <a href="#">
                <img src=""
                    alt="" /></a>
            <h2> <a href="#">2002 Chevy Ultra Longname R-15F $12,995.00</a> </h2>
            <a href="#">
                <img src=""
                    alt="" /></a>
            <h2> <a href="#">2002 Chevy Ultra Longname R-15F $12,995.00</a> </h2>
            <a href="#">
                <img src=""
                    alt="" /></a>
            <h2> <a href="#">2002 Chevy Ultra Longname R-15F $12,995.00</a> </h2>
            <a href="#">
                <img src=""
                    alt="" /></a>
            </div></div></div></div></div>
        
                <td rowspan="2">
			<img src="images/mockup-4_15.jpg" width="9" height="192" alt=""></td>
	</tr>
	<tr>
		<td colspan="3">
			<img src="images/mockup-4_16.jpg" width="952" height="34" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" rowspan="2">
			<img src="images/mockup-4_17.jpg" width="7" height="146" alt=""></td>
		<td colspan="6">
			<img src="images/mockup-4_18.jpg" width="967" height="84" alt=""></td>
		<td rowspan="2">
                    <div id="footer">
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
                    Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
                    Lorem ipsum dolor my nibh euismod tincidunt ut lacreet dolor magna aliguam erat voluptat. Ut wisis enim ad minim veniam.</p>
                    <span>2011 ABC AUTOMALL. ALL RIGHTS RESERVED</span>
                        <a href="#">Privacy</a>
                        <a href="#">Site Map</a>
                        <a href="#">Blog</a>
                </div>
            </div>

			<img src="images/mockup-4_19.jpg" width="10" height="146" alt=""></td>
	</tr>
	<tr>
		<td colspan="6">
			<img src="images/mockup-4_20.jpg" width="967" height="62" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/spacer.gif" width="108" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="5" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="2" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="4" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="237" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="7" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="708" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="9" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="2" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="10" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="108" height="1" alt=""></td>
	</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
0

This is an example of what I am meaning:

<div id="header">
<h1 class="title"><span>ABC Automall</span></h1>
<h4 class="address"><span>LOCATED AT: 5575 Douglas Avenue | URBANDALE, IA 53022</span></h4>
<h4 class="phone"><span class="type">Sales:</span> (888) 555-5555</h4>
<h4 class="phone"><span class="type">Service:</span> (888) 555-5554</h4>
</div></div>
<div id="navigation">
<nav>Home | New Cars | Pre-Owned | Specials | Research | Service/Parts | Finance | Locations | About Us | Contact Us</nav>
</div>
0

Sorry it still doesn't mean anything - the HTML you have used as an example means that you will have text on your webpage as that is what you have coded.

0

simplypixie is correct - all we're going to see is the text that is coded on the page.

So what - exactly - are you trying to do?

0

Please try to show a screenshot or something. A picture is worth a thousand words, so far, yours haven't been very clear.

0

Please try to show a screenshot or something. A picture is worth a thousand words, so far, yours haven't been very clear.

I mean I need to see the picture only.

0

I can't open the file - how about a jpg?

But if you only want to see the image - then use the image inside the element and no text.

Edited by Dandello: n/a

0

Exactly as I said before - you have text in your HTML so you need to remove it if you don't want to see it or comment it out

0

You are using

<div id="header"> 
....
....
</div>

while you have written header class in css:
.header{
height:220px;
width:901px;
background:url(/images/mockup-2_02.jpg) no-repeat;
}
in this case you should use <div class="header"> </div> instead of <div id="header"></div> so browser can understand and render the header div with background.
Thats all what i have understood.

0

To all you guys trying to help Jahanas (OP),

Reading between the lines, this is the scenario:

  • OP has used Adobe ImageReady (not Photoshop I suspect) to slice up a screenshot, and used the "Save as HTML" option to save a <table>...</table> structure plus corresponding individual image slices. I have done this myself in the dim distant past.
  • OP has then very inexpertly attempted to add his own HTML with, I suspect, the intention of selectively replacing the image slices with HTML markup. Some of what he has added is within the <table>...</table> tags but not within a <tr><td>...</td></tr> structure and will therefore render outside the table.
  • I haven't tried to penetrate the OP's CSS but it can only be to support his own HTML markup. I can only imagine that his use of a background-image is intended to allow markup to overlay an image in one or more table cells.

The OP needs to be encouraged into learning how HTML table/tr/td tags work. Until he grasps this he will not progress.

In a rare foray away from the Javascript/DHTML/Ajax forum
Airshow

0

OP has used Adobe ImageReady (not Photoshop I suspect) to slice up a screenshot, ...

Sorry, my bad. ImageReady was discontinued in 2009. Its functionality was apparently migrated into Creative Suite 3 and/or Photoshop so what the OP says may well be correct.

I won't be throwing my old copy of ImageReady away. Although I don't use it often, it still works fine and is invaluable for image slicing and preparation of animated gifs.

Airshow

0

OP has used Adobe ImageReady (not Photoshop I suspect) to slice up a screenshot, ...

Sorry, my bad. ImageReady was discontinued in 2009. Its functionality was apparently migrated into Creative Suite 3 and/or Photoshop so what the OP says may well be correct.

I won't be throwing my old copy of ImageReady away. Although I don't use it often, it still works fine and is invaluable for image slicing and preparation of animated gifs.

Airshow

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.