|
HTML - Sliced In Photoshop Having Trouble With Tables
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?
Similar TutorialsI and new to the forum - I am a bit disappointed in myself for not solving this myself However any assistance is appreciated I purchased a Template and tweaked the psd file to make a secondary page, I was able to delete some slices to trim the page down to what I want http://www.naturalstone.ca/index_do.html the large white space on the right I would like to remove the reference to the jpg image and insert bgcolor="#5F0401" into the <td rowspan="8> because I plan to add content that will scroll well down that page ------code ------- <td rowspan="8"> <img src="images2/index_do_03.jpg" width="549" height="680" alt=""></td> ----------- Every time I try to edit the <td rowspan="8"> it totally screws up the left menu and the page itself any ionfo appreciated - I am about to eat the keyboard over this ~ian Hey all, new guy here, working on a page for my work place. I work in a call center and all our support documentation we upload to a web-site so its quickly and easily accessible. My predecessor had a very basic setup designed in MS Word but the site has grown way too big for Word now. Its my baby now and I have been designing it over the past couple months as I have had time, complete re-write yah! in any case, after getting the design and setup down, I moved on to the coding using a mix of Dreamweaver and straight up HTML(how I learned in college). Built a frames version and hated it, so after reviewing all the options I opted to go with SSI for the menu. I built the menu, its simply 2 tables, 1 runs the full width along the top, the other floats left. Here is a screen-cap - company logo and other info blocked off. OK, everything is fine, so far, but the main/index page will have to have a lot of links. We have 1 page for every app. IE. Groupwise as shown. The apps are ordered alphabetically and I will need 2 or 3 columns and will need to be able to jump in and add an app in the middle of the list quick and easy. Simple answer: tables. Not so simple though.... most people resize the IE window down so they can keep working on one thing and read off the page... When I tested resizing the window this happens... *again, info removed* Before a scroll-bar appears, the tables drop down BELOW the side menu table from the SSI file... I have tried everything I can think of to fix this and just cannot get it to work... I tried playing with the side menu table height, (currently set to 100% to fill up remainder of page) and have even tried setting the top menu to a set width so that a scroll bar will appear if you do anything but full screen, even then when too small the tables jump down to below the side menu. I even split the side and top menu to 2 seperate SSI files and it does the same thing(and has a big space between the 2)... Plain text will jump down as well, but only after you make the window too narrow to have a single character next to the menu. Any help would be greatly appreciated. Suggestions on what to try? where to look for an answer? or if I am going about this all wrong.... what I should be trying... Thanks in advance! -Tim Hey, I'm trying to create a site in Joomla which uses <div> tags for different effects. This particular effect places a rounded corner border around the 'divided' area. I am trying to create tables within this divided area, tables with no borders, but with the rounded corners as well. Here is a link to a preview page of where I am now: http://site476.mysite4now.net/ericpo...id=20&Itemid=4 I also attached an image of how the content area should be laid out. And I attached a .txt file of the current code written related to the <div> areas and tables within them. Any help is appreciated.... I cannot figure this out for the life of me... I'm starting to think it isn't possible. Please take a look at the image I attached to this post. If you look closely, you can tell that the bottom half of the lightbulb, the "Imaginit" title, and the yellow bar to the left of that is all one image file. Above that is a larger image (part of which has the top half of the lightbulb) that spans the whole page. I'm sure you can tell by the break in the lightbulb and the white borders around the image where this question is going... I'm trying to get rid of those breaks. Currently, the large image on top is in its own span tag. Below that everything else is organized in a table structure. I've messed with border-collapse: collapse, tried setting the margins to negative values (of em, px, & pt), set border widths to 0. Nothing gets rid of those spaces. Setting the background color for the cells I think would work, but the problem there is that the bottom-half-lightbulb/Imaginit image's cell is set to colspan=2, rowspan=2. Is it possible to have the image just be "laid" over four individual cells? Just a thought. I'm doing this in Visual Studio 2005/ASP.NET if that helps any. Thanks for anyone's help. I've got 2 sliced images at a store i've made. I've noticed each image loads one at a time... which really affects the loading time. I've optimized them as good as I can without losing quailty, but still slow loading. Is there any methods to loading all the images simultaneously? (maybe javascript?) The splices range from 300-600bypes in size. not kbs.. bytes (0.3-0.6 kbs) I guessing there is about 5-7 slices on the top, and 10-15 on the side menu. 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 Hey guys, im not sure if anyone has this problem but i have it and im pissing off because of it. I worked on it for over 4 hours to no avail so i decided to get some professional opinion here. I designed my website using Photoshop and save for web and devices, giving me the HTML codes and the entire site is done in tables. I had no problems for buttons whatsoever, i found a way to insert flash banner was by creating a slice and deleting it afterwards to insert my flash banner. The problem: All text, headings, contents appear as image and i would have to reslice the entire website just to change the content and i cant use cutenews etc. So i tried draw ap div, but it is not resolution dependent, it distorts at all kind of resolutions... I tried using Fireworks but to no avail too.. I cant really think of anything else. Something that allows me to do editable content. Please email me if you do not understand what i mean i can show you. molehetoe@live.com or add me in MSN Hi all, I am created a sliced page within Fireworks however I have made a animated gif which I would like to add to the page. I'm lost as to how to do this, when I copy and paste the Gif into the main image page, it just shows up as a standard picture, with no animation. Do I have to slice the page first, then add the animated gif within Dreamweaver, or can I place it as I would any image within Fireworks, then slice the entire page and export with HTML to Dreamweaver? Any help would be great, thanks in advance. 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 created a sliced image / navigation in Fireworks CS5 and implemented it on a page with success. I then attempted to implement the same code to the header of a WordPress theme, giving me some issues. The actions work correctly, but the images are significantly lower, blocking a portion of the remaining page, and not correctly aligned with one another. I checked for conflicts in the CSS, as well as other simple errors, but couldn't really find what the cause was. Any suggestions? Homepage (correctly displayed graphic): http://camhabib.com WordPress (incorrectly displayed): http://blog.camhabib.com What is the best or rather easiest way to learn how to use Photoshop? I have Photoshop 3.0 elements, which I think is different then CS3 correct? I am just not sure where to go for a beginner tutorial on this? Everything I have found so far is for people that already know mostly how to use it.....UGH! Thanks Jeff okay so i dont have dreamweaver or nething like that. i made a website template that is the home page. i want all the other pages to look like that as well except with different writing which i will want to edit with html when i want to my problem is im not sure how to make my template work and upload it to the web. i can do it as a jpeg but not as an actual template. if some one can help me i would greatly appreciate it thanks Hi, I'm trying to create a website with photoshop and dreamweaver. And I want to create 2-3 frames. 1 left side navigation bar and mayber a banner frame at the top, and the middle frame where the text comes. Now my problem was that when I tried to create something like this with dreamweaver it made those ugly looking draggable things. Id want them not to be visible and apply my 1337 design made with photoshop (and cut with the slice tool). If anybody has any idea or any specific site that could help me further please help me! My current site is http://squeezingavocados.urli.net/ But whenever I write something to the iframe and it expands the navigation bar also does, making it look like ****... ok.. im a noob i made my template in photoshop and now what I want to do it put my content in such as information, navigation etc. How to I write over the pics so that the text will be visible. Any help on this matter would be appreciated Cheers Ryan Hi everyone, I'm creating a prototype ipad webapp for uni and I've managed to get stuck when using photoshop slices. Basically whats happened is that when I add a href to a slice a blue border appears and knocks all the slices out of line by a few pixels. I've tried
Code: frameborder="0" but hasnt worked. Is there a solution using html or would I be better off trying CSS? Thanks, Claire Okay so I manage to make a design on photoshop so I then slice most the image to various parts and then had it transfer to dreamweaver so now its an html file. but now I want to add thing to those images like an image placement holder but when I try to add something such as a table or an image placement holder to one of the images that i sliced it keeps on putting the image or table outside the box where I want it to be. here is a video of my problem http://www.youtube.com/watch?v=ONXom...layer_embedded thanks Here's what I currently have on my screen: http://img291.imageshack.us/my.php?i...4169031eq4.jpg What I'm trying to do is Save the Layers as JPEGs so I can place them into Dreamweaver and continue Editing my Webpage. I wasn't able to Edit some of the Images in Dreamweaver so I had to Edit the actual PSD File, but now that I've edited the PSD File, I can't seem to transfer the updated Graphics back to individual JPEG Form, I can only save the entire document as a giant JPEG, and that's not what I want. Slicing isn't viable either, the PSD didn't come with any... I would think it has something to do with those blue lines running across the page, but I don't know what that means? How do I save the Graphics I updated so I can transfer them into Dreamweaver? I would like to create my web navigation using photoshop aswell as other menus but im unsure how to embedd them into html For instance, i remeber seeing tutorial were a guy created a simple vertical blue navigation with slices for each link, then used HTML to put them together in his page. I could not find it so i came here. How do make a curved edge for a table row or table data? Right now my site looks kind of boxy. |
|||||||