HTML - Sliced Graphic / Navigation Improperly Displayed

Hi all.

I'm having a little bit of trouble with putting sliced images on my website and was wondering if you could help me out?

I've made a very basic menu design in photoshop. I sliced the image using Photoshop then opened the resulting html file in Frontpage. When I opened the page in preview mode, the sliced images had moved slightly away from each other which is giving me gaps between the slices. Its also doing this when I view the page in a normal web browser, but not in photoshop

Is this because I am using frontpage or could it be some kind of options setting in photoshop? Sorry if this is posted in the wrong forum btw....Any help would be great

Thanks

Ok so I made a kinda complex layout in photoshop by slicing and I'm using hte code they gave me to put it all together. I've switched the images from being in the table to being the background of the table. Everything seems to work great. But I'm trying to make it so that when I type too much in the body function the body will just roll down and repeat itself and the links on the left side will stay and do nothing. But at the same time I want it so when I get too many links I want the links bar to continue to roll down and repeat itself while the body does nothing. Well right now when the body rolls down there are gaps in every break in images on the links side. I've tried valigning them all to the top and it works on the first one but the 2nd 3rd and 4th image still have gaps between them. Any suggestions?

Hello folks,

I'm having trouble with the code for a sliced background image, and am hoping someone can help.

You can see the design at this url: http://www.magicalwonders.com/graphicslice1/

There are two problems that I'm having difficulty with.
1. I have included a repeating background tile for the right hand sidebar, and although the tile is diplaying O.K. my graphic is breaking at the top of the page when there is text overflow.
http://www.magicalwonders.com/graphicslice2/

2. Second problem. Although I have a repeating tile created for the left hand sidebar, I'm not sure how to include it in the code, as I'm already using a background image referenced by CSS. I need the image for the left side bar to be a background image, as I need to add nav buttons to the page.

At the moment, the graphic for the left side bar is just repeating itself, which doesn't look too good as it is a graduated colour.

My html is as follows:
Code:

<table id="Table_01" width="100%" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td>
			<img src="images/headerleft.jpg" width="168" height="126" alt=""></td>
		<td>
			<img src="images/headermiddle.jpg" width="456" height="126" alt=""></td>
		<td>
			<img src="images/headerright.jpg" width="166" height="126" alt=""></td>
	</tr>
            </table>

<table width="100%"  border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td>
			<img src="images/top_left.jpg" width="147" height="24" alt=""></td>
		<td>
			<img src="images/top_middle.jpg" width="468" height="24" alt=""></td>
		<td>
			<img src="images/top_right.jpg" width="175" height="24" alt=""></td>
	</tr>
	<tr>
		<td id="leftsidebar">
			</td>
		<td valign="top">
			Content goes here...

</td>
		<td id="rightsidebar">
			<img src="images/sidebar_right.jpg" width="175" height="386" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/footer_left.jpg" width="147" height="64" alt=""></td>
		<td>
			<img src="images/footer_middle.jpg" width="468" height="64" alt=""></td>
		<td>
			<img src="images/footer_right.jpg" width="175" height="64" alt=""></td>
	</tr>
</table>
</body>
</html>

And my CSS is:
Code:

#leftsidebar {
background-color: #fead01;
background-image: url(images/sidebar_left.jpg);
}

#rightsidebar {
background-color: #fead01;
background-image: url(images/sidebar_repeat_right.jpg);
background-repeat: repeat-y;
}

Any help or advice would be much appreciated.

Many thanks

Myles

Hi,

I sliced my web layout in PS. So far so good, I've done about 4 or 5 pages and it's gone fairly smoothly. However I'm having trouble with some coding on a particular page.

I want to have a contact form on my contact page. But it's an HTML table and so are the slices. I've tried a couple of different ways to see if I could get it to 'lay' on top of the background image slice, but no luck.

Take a look for yourselves: http://www.beemerphotography.com/contact.html

Code:

<form name="contactform" method="post" action="contact.php">
<table width="450px">
</tr>
<tr>
 <td valign="top">
  <font color="#FFFFFF"><label for="name">Name</label></font>
 </td>
 <td valign="top">
  <input  type="text" name="name" maxlength="50" size="30">
 </td>
</tr>

<tr>
 <td valign="top">
  <font color="#FFFFFF"><label for="email">Email Address</label></font>
 </td>
 <td valign="top">
  <input  type="text" name="email" maxlength="80" size="30">
 </td>

</tr>
<tr>
 <td valign="top">
  <font color="#FFFFFF"><label for="telephone">Telephone Number</label></font>
 </td>
 <td valign="top">
  <input  type="text" name="telephone" maxlength="30" size="30">
 </td>
</tr>
<tr>
 <td valign="top">
  <font color="#FFFFFF"><label for="comments">Comments (Type of session(s): engagement, wedding, family, etc. | Booking date if applicable)</label></font>
 </td>

And I've tried this:
Code:

<table background="http://www.beemerphotography.com/contact/images/info.gif" width="409" height="467">

And also, I have another page that is just not displaying for some reason. I have gone over the code, redone the slicing, redone the coding, and I can't figure it out for the life of me why it isn't displaying anything: http://www.beemerphotography.com/abo...ng/prints.html

I'm starting to develop a (rudimentary) website for my sis. I've noticed a little graphic glitch in IE only. What's the best forum to post my question? HTML? CSS?

Here's the page in question:

http://www.coldvalleyfarm.com/sheep.htm

In IE only, at the bottom of the left row of pictures, there's a small white square with a white dot in the middle. Any idea what could be causing that? I've validated the pages, but I know IE isn't always compliant. This is with IE 7.0, btw.

Thanks in advance!

I'm attempting to center the logo / table located at the top of the page. I tried several various forms of alignment commands, all with no success. Any help is appreciated.

Site: http://blog.camhabib.com

Hi

Am here to look for some help about a problem I can't seem to "overcome" in the layout of my website.

I put the background in bright pink so the problem kinda "jumps" to the eye. It is available here :

http://www.guitarbattle.fr/gb_test.html

or you can also copy and paste this code in an HTML document and see how it behaves (this is a full copy of the source code of that page linked above) :

HTML Code:

<HTML>

<HEAD>
	<TITLE>Guitar Battle</TITLE>
</HEAD>
<body  bgcolor=ff00ff>
	<br><br>
<center>
<table CELLSPACING="0" CELLPADDINg="0" BORDER="0">
	<tr>	
			<TD colspan="5"> <img src="http://www.guitarbattle.fr/interface_haut.jpg"> </TD>
	</tr>		
	<tr>
			<TD rowspan="2"> <img src="http://www.guitarbattle.fr/interface_gauche.jpg"> </TD>
			<TD> 			  <img src="http://www.guitarbattle.fr/interface_situ.jpg"> </TD>
			<TD> 			  <img src="http://www.guitarbattle.fr/interface_prin.jpg"> </TD>
			<TD rowspan="2"> <img src="http://www.guitarbattle.fr/interface_video.jpg"> </TD>
			<TD rowspan="2"> <img src="http://www.guitarbattle.fr/interface_droite.jpg"> </TD>
	</tr>		
	<tr>
			<TD colspan="2"> <img src="http://www.guitarbattle.fr/interface_part.jpg"> </TD>
	</tr>	
	<tr>	
			<TD colspan="5"> <img src="http://www.guitarbattle.fr/interface_bas.jpg"> </TD>
	</tr>
</table>
</center>
</HTML>

I hope someone can tell me what mistake I did that makes the various parts not well aligned and loosing 1 to 3 pixels here and there.

Thanks a lot !

On some websites where you type in the link and you are on the site in front of the link where normally E for the internet they change it to an image. Here is an example http://www.bf2player.com click on the link and look at the address bar.

HOW CAN I DO THAT. Please Help MCBGamer.

Hi guys,

I'm very new here - literally just searched the web for help on this problem which has been plaguing me for some time...

I'll post the code below, but basically, the div_id centre_image, the body text and the right hand side graphics are correctly formatted just in the wrong place! I need them to be to the right hand side of the Left hand menu... I'm hoping I make sense!? There is CSS as well but not sure whether or not this is a CSS issue or html!

I would be really greatful if someone could help me out. I'm fairly new to website design but am trying my best using various tutorials on the web and compile something half decent!

Thanks in advance,

Graham.

Code:

<!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>Double Glazing | Windows | Doors | Conservatories | Rooftrim</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="header">
<div id="email_header"><a href=" mailto: xxxx@zurichtitanium.com">xxxx@zurichtitanium.com</a></div>
</div>

<div id="blue_banner">

  <h1>Double Glazing Worcester</h1>
</div>
<div class="cleaner"></div>

<div id="menu_wrap">


<div id="tabs">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Windows</a></li>
<li><a href="#">Doors</a></li>

<li><a href="#">Conservatories</a></li>
<li><a href="#">Rooftrim</a></li>
<li><a href="#">Get a Quote</a></li>
</ul>
</div>

</div>

<div id="holder">
<div id="lhs_menu_wrap">

<div id="windows_menu">
<ul>
<li><a href="#">Sleek White</a></li>
<li><a href="#">Woodgrain Collection</a></li>
<li><a href="#">Specialist Finishes</a></li>
<li><a href="#">Security</a></li>
<li><a href="#">Energy Saving</a></li>
<li><a href="#">Maintenance Free</a></li>
<li><a href="#">The Logical Choice</a></li>
</ul>
</div></div>  
    
    
    
<div id="centre_image">
	<div id="centre_LHS_pic"></div>
    <div id="centre_RHS_pic"></div>
    <div id="getquote_button"><a href="#">Get a Free Quote...</a></div>
</div>


<div id="RHS_Content">

<div id="rhs_window_offer">Double Glazed Windows...<div id="win_text1"><a href="#">Get Quote</a></div></div>
<div id="rhs_cons_offer">Your New Conservatory...<div id="win_text2"><a href="#">Get Quote</a></div></div>
<div id="rhs_trim_offer">Transform Your Roofline...<div id="win_text3"><a href="#">Get Quote</a></div></div>

<div class="guarantee_logo"></div>
</div>


<div id="body_text">
  If you are considering enhancing your home, you owe it to yourself to  get a professional consultation. At Zurich Titanium we pride ourselves  on giving you exactly what you want. Whether it be treating yourself and your home to new <h2>double glazing windows</h2>, <h2>doors</h2> 
  or a <h2>conservatory</h2>, invite us to show you what we can do. We guarantee you won't be disappointed.
  <p>We offer a fully customisable suite of Home Improvement Products, tailor made for your home, to ensure you get what you want and need, and not wasting money on features you'll never use. With our own highly skilled installers, we are able to keep quality control in house, enabling us to give, as standard, the unrivalled <b>Zurich Titanium 10 Year Guarantee</b> on all work undertaken.</p> <p>Our bespoke quotation service, available totally free of charge, will allow you to design the windows or doors, conservatory or roofline, most suited to your home, give you an accurate assessment of the work involved, and of course an exact price.</p>

<div id="body_footer"></div>
</div>

</div>

<div id="footer">Zurich Titanium Home Enhancements Ltd, Registered in England and Wales xxxxxxxx. xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.</div>


</body>
</html>

And CSS to follow... It may be somewhat rough around the edges; different hints and tips put together from across the web!

Thanks so far Michael...

In Opera, IE 8, and Chrome, a single graphic image on my webpage apprears distorted.
It looks fine in Firefox.

The website is the main page of cousincouples.com and the problem is the yellow pixels/yellow line at the very bottom left of the page (Left of the copyright information). One of the graphics appears to wrap within the cell!

If anyone could point me in the right direction, I would appreciate it.

OK what I need to do is find a way to make a specific graphic change automatically on a certain date and change again on another date.

A client of mine is having me design his logo so that the logo resembles the season eg:

On Christmas his logo would include a Santa Clause and on Halloween there would be a pumpkin within his logo etc...

You get the idea... I want to design each logo and have them change at the appropriate time of year.

Thank you all in advance

Hey guys I'm having a terrible time getting some graphic logos to layout. I know the coloring right now is not looking up to par either so don't judge me too bad I have a header div with a nav div inside and then a content div below this with a swf slide show inside. Basically inside the header div I have 5 graphics and then a nav div nested inside below that. My problem is that I want 2 of the logos aligned to the left and close to centered up/down inside the header div, then I want the main masthead logo centered in the middle of the header div up/down and left/right, and finally I want the other 2 logos floated right and centered up/down. I'm trying various methods and the best I have so far shows the middle masthead logo not correctly centered, and the 2 left logos floating left, but the far 2 right logos do not show up at all. The page is located at http://www.atlanta-web.com and I'll past all of my code below.

index.html snippet
Code:

<body  bgcolor="#FFFFFF"  text="#000000" link="#0000FF" vlink="#000080"  alink="#800000" leftmargin="0"  topmargin="5" marginleft="0" margintop="5">

<script type="text/javascript" src="fsmenu_commented.js"></script>
<script type="text/javascript" src="menuset.js"></script>

<link rel="stylesheet" type="text/css" href="listmenu_h.css" />
<link rel="stylesheet" type="text/css" href="listmenu_h_settings.css" />

<style type="text/css">

#navitoolbarcontainer a {
	line-height: 16px;
	}

</style>

<div id="header">
<img class="award1" src="nahb.gif" /><img class="award2" src="gahomebuilders.gif" />
<center><img src="Jhomes.jpg" /></center>
<img class="award3" src="southernlivingmember_sm.gif" /><img class="award4" src="lobb.gif" />


<!-- START TOP TOOLBAR -->
<!--<div id="heightcontainer"></div>-->

<div style="width: 100%;" id="navitoolbarcontainer">
<div style="margin: 0px; padding: 0px; width: 100%;">
		  <div id="navitile" style="width: 100%;">
				<ul class="menulist" id="listMenuRoot" style="height:22px;">

				 <li style="margin-top:0px;">
				  <a class="gt" href="index.html" style="font-size: 10px; font-family: arial,verdana,helvetica; text-decoration:none;"> <b>Jeffery Homes Inc.</b> </a>
				  <ul id="listMenu-id-1">

.
.
.
     NAV Bar HTML Cut for space sake

.
.
.

		<div style="margin-top: 0px;" id="lightgrey">

		</div>
	</div>
	</div>
	</div>


</div>

<div id="content" style="width: 100%; background-color: #6B6637">

<div id="slideshow">
<object width="600" height="350">
<param name="movie" value="slideshow1.swf" wmode="transparent">
<embed src="slideshow1.swf" width="600" height="350" wmode="transparent">
</embed>
</object>
<br />
<br />
</div>

</div>


<!-- END TOP TOOLBAR -->

css file1
Code:

@charset "UTF-8"; 

a.gt{ text-decoration:none}

a.gt:hover{text-decoration:none}

a.gt:visited{text-decoration:none}

a.gt:link{text-decoration:none}

a.gt:active{text-decoration:none}

#header { margin: 0px; padding: 0px; width:100%; min-width:830px; width:100%; background-color: #AFAB73; position: absolute; left: 0px; top:0px;  font-family: arial, verdana, helvetica; font-size: 8px; white-space: nowrap; z-index: 0}

.award1 { float:left }

.award2 { float:left }

.award3 { float: right }

.award4 { float: right }

#navitile{width:820px; margin-left:0px; height:22px; background-repeat:repeat-x; position:absolute; color: #F2FFE4; left:0px; top: 0px; font-family:arial,verdana,helvetica; font-size:8px; white-space:nowrap; }

#navtile a{ color: #F2FFE4 }

#navitoolbarcontainer{width:100%; min-width:830px; width:100%; height:22px; position:absolute; top: 100px; left:0px; font-family:arial,verdana,helvetica; font-size:8px; background-image:url('background_end_fixed.png'); background-repeat:repeat-x; white-space:nowrap; margin:0px; padding:0px; z-index:1000}

#navitoolbarcontainer a{color: #F2FFE4}

#content {margin: 0px; padding: 0px; width:100%; min-width:830px; width:expression('100%'); position: absolute; left: 0px; top: 122px; font-family: arial, verdana, helvetica; font-size: 8px; white-space: nowrap; z-index: 1}

#slideshow {
margin: 0 auto;
position: relative;
top: 30px;
height: 480px;
width: 600px;
}

#heightcontainer{position:relative; height:17px; width:99%; background:transparent;}

#globalform{padding:0px; margin:0px}

#lightgrey{text-align:left; color: #F2FFE4; text-indent:5px;     background-image:url('background_end_fixed.png')}

#lightgrey .inputglobal{font-size:9px; font-size:expression('8px'); text-align:left; margin-top:0px; margin-left:2px;  background-repeat:no-repeat}

#lightgrey .inputglobal:hover{font-size:9px; text-align:left; margin-top:0px; background-color:#ccc}

#lightgrey a{font-family:sans-serif; text-decoration:none; color: #F2FFE4; text-decoration:none; FONT-SIZE:10px; padding:0px; top:1px; top:expression('-2px'); position:relative}

#lightgrey a:link{text-decoration:none; color: #F2FFE4; text-decoration:none; FONT-SIZE:10px}

#lightgrey a:visited{display:inline; text-decoration:none; color: #F2FFE4; text-decoration:none; FONT-SIZE:10px; padding:0px; margin:0px}

#lightgrey a:active{display:inline; text-decoration:none; color: #F2FFE4; text-decoration:none; FONT-SIZE:10px; padding:0px; margin:0px}

#lightgrey a:hover{display:inline; text-decoration:none; color:#fcf2ca; text-decoration:none; FONT-SIZE:10px; padding:0px; margin:0px}

A lot of this css is for the menus that i found on a site and have highly modifed, but I've used class/id's for most of everything so it should be easy to see what is what.

Thanks for any help that you all can provide. This site has been a godsend for getting help.

Hi,

In accordance to an old reputation of my here, I'm bringing a new problem to the table that may or may not be able to be explained. ( Hi again Scoutt! )

There are certain form field backgrounds on this page that are displaying completely different colors than what's in the code and if that wasn't odd enough, it's only happening on some computers. The issue is not related to OS, browser or anything else we can pin down. The link just mentioned should have blue text and blue field backgrounds to all of the form entities.

Now, reference the screen shot that they sent me.

Here is a portion of the code for your reference:
PHP Code:
           <form method="post" action="/app.php">
<fieldset id="contactform" style="width:300px;">
<legend id="legend" style="color:red;font-weight:bold;">NGL Event Application</legend>
<label style="color:red;font-weight:bold;">All Fields must be filled in.</label><br /><br />
<label style="color:#369;" for="lastname">Last Name:</label><br />
<input type="text" size="50" name="lastname" id="lastname" value="" maxlength="100" /><br />
<label style="color:#369;" for="firstname">First Name:</label><br />
<input type="text" size="50" name="firstname" id="firstname" value="" maxlength="100" /><br />
<label style="color:#369;" for="email">eMail Address:</label><br />
<input type="text" size="50" name="email" id="email" value="" maxlength="100" /><br />
<label style="color:#369;" for="address">Address:</label><br />
<input type="text" size="50" name="address" id="address" value="" maxlength="100" /><br />
<label style="color:#369;" for="city">City:</label><br />
<input type="text" size="50" name="city" id="city" value="" maxlength="100" /><br />
<label style="color:#369;" for="state">State:</label><br />
<input type="text" size="50" name="state" id="state" value="" maxlength="100" /><br />
<label style="color:#369;" for="zip">Zip:</label><br />
<input type="text" size="50" name="zip" id="zip" value="" maxlength="100" /><br /> 


What is happening here?

Hi, I hope someone can help. Could you possible tell me whether there is a way to determine what text is displayed in google results. At the moment it selects text from my websites front page, but I wanted to display something specific like the following.

Back Garden Moths - A true community website..

Can this be done in within the html code on the home page?

Thanks

Simon

Hello,

Just found out these forums, they are great! I have a small problem, but haven't find an answer yet. I'd like to have a text box in my webshop only diplayed if a customer selects a specific option. Please see the code below.

The text box should remain hidden until a customer selects 'Color other'. Then the text box should appear, allowing the customer to enter the color he wishes. How can this be done?

Many thanks for your help in advance!

Marco


Quote:
<tr>
<td width="30%" align="left" valign="middle">Color:</td>
<td width="70%" align="left" valign="middle">
<select size="1" name="product3" onChange="mmCalc(this.form)" class="CLASS2">
<option value="Color blue:0" selected>blue</option>
<option value="Color red:0" selected>red</option>
<option value="Color other:0" selected>other</option>
</select>
</td>
</tr>
<tr>
<td width="30%" align="left" valign="middle"></td>
<td width="70%" align="left" valign="middle">
<input type="text" name="productItem" class="CLASS2">
</td>
</tr>