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.
jahanas 0 Newbie Poster
Recommended Answers
Jump to PostLet'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 …
Jump to PostYou 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 …
Jump to PostTo 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. …
Jump to PostOP 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 …
Jump to PostOP 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 …
All 20 Replies
simplypixie 123 Posting Pro in Training
Please post your code so we can help
jahanas 0 Newbie Poster
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> simplypixie 123 Posting Pro in Training
Please edit your post and put your code into code tags so it can be read more easily.
Dandello 8 Posting Whiz in Training
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/'
jahanas 0 Newbie Poster
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.
Dandello 8 Posting Whiz in Training
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.
jahanas 0 Newbie Poster
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> simplypixie 123 Posting Pro in Training
Sorry but I am completely confused - exactly what text is showing up that you don't want to see??
jahanas 0 Newbie Poster
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> simplypixie 123 Posting Pro in Training
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.
Dandello 8 Posting Whiz in Training
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?
stbuchok
Please try to show a screenshot or something. A picture is worth a thousand words, so far, yours haven't been very clear.
jahanas 0 Newbie Poster
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.
Dandello 8 Posting Whiz in Training
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.
simplypixie 123 Posting Pro in Training
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
ansaripk 0 Newbie Poster
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.
Airshow 416 WiFi Lounge Lizard Team Colleague
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
Airshow 416 WiFi Lounge Lizard Team Colleague
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
Airshow 416 WiFi Lounge Lizard Team Colleague
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
Dandello 8 Posting Whiz in Training
Nor will I.
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.