www.webdeveloper.com
Results 1 to 8 of 8

Thread: Photoshop 'save for web' leaves gaps.

  1. #1
    Join Date
    Aug 2012
    Posts
    3

    Angry Photoshop 'save for web' leaves gaps.

    Ive designed and sliced a layout in photoshop and as i cant code full html i decided to just leave it and 'save for web'. When i do some finishing touches such as links in the 'live mode' of dreamweaver it looks fine, but when i look at it in a browser all of the images have gaps. I had an attempt with using div's and float:left; or float:right; and the same thing happens. To see the image go to www.musicouk.net/problem.jpg or www.musicouk.net/newsite/home/ to see the site (if you click on a link make sure you manually add /newsite/ because they are coded to /page/).

    There shouldnt be a problem in the actual coding because i validated the html.
    This is the css file:
    Code:
    #feat-title {
    	background-image: url(images/feat-title.png);
    	padding: 5px;
    	clear: both;
    	height: 41px;
    	width: 276px;
    	font-family: Verdana, Geneva, sans-serif;
    	font-size: 20px;
    	font-style: normal;
    	font-weight: bold;
    	font-variant: small-caps;
    	text-transform: none;
    	color: #000;
    	text-align: center;
    	vertical-align: middle;
    	float: right;
    }
    #feat-cont-title {
    	font-family: "Arial Black", Gadget, sans-serif;
    	font-size: 10px;
    	font-style: normal;
    	line-height: normal;
    	font-weight: bold;
    	font-variant: small-caps;
    	text-transform: none;
    	color: #acd100;
    	background-image: url(images/feat-cont-title.png);
    	padding: 5px;
    	clear: both;
    	height: 21px;
    	width: 310px;
    	float: right;
    }
    Thanks

  2. #2
    Join Date
    Apr 2012
    Posts
    27
    Try to make much better, adjust you design according to different web browser

  3. #3
    Join Date
    Feb 2008
    Location
    NW Washington State
    Posts
    1,856
    I'd suggest that you skip this part:
    sliced a layout in photoshop
    slicing an image is really old school... used to make it look like something was happening when Internet connection speeds were really slow.
    Now days, that's really not needed... and it will save you a lot of work if you use just one image as the background image for your main container <div>.
    You DON"T need to slice the image!
    Then, you can use CSS to position text and/or other images as needed over the top of the background image.
    http://www.w3schools.com/cssref/pr_background-image.asp
    Best wishes,
    Eye for Video

  4. #4
    Join Date
    Mar 2011
    Posts
    1,160
    The page you posted doesn't have a <!DOCTYPE> statement. Without a complete <!DOCTYPE> statement, browsers will render pages using their default settings, which will vary significantly from one browser to the next and cause the kinds of problems you're seeing. You need to use a complete <!DOCTYPE> statement to set browsers to "Standards Compliance Mode" so that they will do their best to follow the W3C Standards for rendering. Search on "doctype switch" for some good advice.

  5. #5
    Join Date
    Aug 2012
    Posts
    3

    Question .

    Quote Originally Posted by Eye for Video View Post
    I'd suggest that you skip this part:

    slicing an image is really old school... used to make it look like something was happening when Internet connection speeds were really slow.
    Now days, that's really not needed... and it will save you a lot of work if you use just one image as the background image for your main container <div>.
    You DON"T need to slice the image!
    Then, you can use CSS to position text and/or other images as needed over the top of the background image.
    http://www.w3schools.com/cssref/pr_background-image.asp
    Best wishes,
    Eye for Video
    Will I still be able to make it expandable, and do you have a good tutorial/source of information about positioning text on css?

  6. #6
    Join Date
    Sep 2006
    Location
    new york
    Posts
    267

    slicing is BAD

    <TABLE>layouts are BAD. Slicing an image creates a filled <TABLE><tr><td>content</td></tr>></TABLE> so if you try to add anything, the <TABLE> structure gets knocked out of whack.

    Unless you are very skilled with the slice tool, you end up with extraneous slices to fill in the gaps.

    The gaps are NOT created by File>Save for Web and Devices , nor by Dreamweaver.

  7. #7
    Join Date
    Aug 2012
    Posts
    3

    REPLY: Photoshop 'save for web' leaves gaps

    Quote Originally Posted by auntnini View Post
    <TABLE>layouts are BAD. Slicing an image creates a filled <TABLE><tr><td>content</td></tr>></TABLE> so if you try to add anything, the <TABLE> structure gets knocked out of whack.

    Unless you are very skilled with the slice tool, you end up with extraneous slices to fill in the gaps.

    The gaps are NOT created by File>Save for Web and Devices , nor by Dreamweaver.
    How else would i go about coding it then?

  8. #8
    Join Date
    Feb 2008
    Location
    NW Washington State
    Posts
    1,856
    Using a background image can be expandable... which is more than can be said for a single sliced up image.
    Review the background image property here:
    http://www.w3schools.com/cssref/pr_b...und-repeat.asp
    and notice that the image can be repeated for only the x axis, only the y axis, or repeated for both.
    So if you do plan to make your page content longer (meaning that you now need a taller image of undetermined height).... here is where you would cut the page in half and then take a very small section of the middle of the image as wide as the page but only a few pixels high.
    Now, you'll need 3 <div>s for the background, the top... which doesn't change, the bottom which also doesn't change, and a middle which expands.
    Another option is to use 100% for the background image... just keep in mind that the image is being stretched and some distortion can occur.
    http://stackoverflow.com/questions/1...-with-css-only
    Basic CSS layout:
    http://www.w3schools.com/css/css_intro.asp
    works with basic HTML:
    http://www.w3schools.com/html/html_basic.asp
    The default action of a <div> is to expand to contain all the content.. so additions to the page are easily handled.
    Instead of Tables, use container elements like the <div>.
    http://www.w3schools.com/html/html_layout.asp
    Many elements can be used without wrapping them in a <div>, but using <div>s can be a good way to organize the page... each section neatly in it's own little box.
    You may also need to "float" items from time to time:
    http://www.w3schools.com/css/css_float.asp
    This allows you to place containers side by side or move (float) them to a special place on the page.
    Best of luck,
    Eye for Video

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles