IRC Logs

Network: freenode Channel: #html

	Enter your search terms Submit search form
	Web www.irclog.org

[16:13]<lrsxcgypn_>but that's not good either
[16:14]<lrsxcgypn_>as you're prolly trying to get the wrapper content on top of those 3 backgrounds?
[16:14]<mgrfn>yep
[16:15]<lrsxcgypn_>why not apply bg when needed?
[16:15]<lrsxcgypn_>you have div header/nav/
[16:15]<lrsxcgypn_>arrange your page so your divs have correct bg's?
[16:16]<mgrfn>haha, sorry i don't undersatnd
[16:16]<lrsxcgypn_>what's your site supposed to look like?
[16:16]<lrsxcgypn_>lightblue background all over?
[16:16]<mgrfn>hang on ill up a jpg
[16:16]<lrsxcgypn_>k
[16:17]<mgrfn>http://www.followingparis.com/sample.jpg
[16:20]<lrsxcgypn_>and you're fumbling with the gradient bg?
[16:20]<mgrfn>yep!
[16:21]<lrsxcgypn_>to start
[16:21]<lrsxcgypn_>make an empty document (preferably xhtml 1.1 strict)
[16:21]<lrsxcgypn_>give your body tag these styles:
[16:22]<lrsxcgypn_>margin: 0px;
[16:22]<lrsxcgypn_>padding: 0px;
[16:22]<lrsxcgypn_>background-color: #ffffff;
[16:22]<lrsxcgypn_>but instead of white, you select the lowest row of color brown pixels
[16:22]<lrsxcgypn_>that particular color
[16:22]<lrsxcgypn_>because that will be used to fill up blank space if users have screens that are higher in resolution than your background
[16:23]<mgrfn>one problem is.. im being qutie picky about the colours - i coudln't find the proper the html colours
[16:23]<lrsxcgypn_>open your image in photoshop
[16:23]<lrsxcgypn_>zoom in on lowest area
[16:23]<lrsxcgypn_>take the picker tool (or dropper or what is it)
[16:23]<lrsxcgypn_>to get the color
[16:24]<mgrfn>okay
[16:24]<lrsxcgypn_>make the canvas of the image the same height as it now is, but 1 px wide
[16:25]<lrsxcgypn_>this way, you get a 1px but heigh image that we're going to repeat horizontally <-->
[16:25]<lrsxcgypn_>background-image: url("gradientbackground.jpg");
[16:25]<lrsxcgypn_>background-repeat: repeat-x;
[16:25]<lrsxcgypn_>background-position: fixed;
[16:25]<lrsxcgypn_>so it will not scroll up/down
[16:26]<lrsxcgypn_>still with me so far?
[16:26]<mgrfn>yep
[16:26]<lrsxcgypn_>am i still on track too?
[16:26]<mgrfn>sorry lil slow @ the switcing programs, but yep i am.. just doing the 1px bit
[16:26]<lrsxcgypn_>k
[16:27]<mgrfn>is jpg or gif better?
[16:28]<lrsxcgypn_>doesn't matter, as long as your quality is good
[16:28]<lrsxcgypn_>if the gradient uses less than 256 colors, gif is ok
[16:28]<lrsxcgypn_>you know what? make it a png
[16:28]<mgrfn>okay
[16:28]<lrsxcgypn_>ready for the future
[16:29]<mgrfn>haha the future?
[16:29]<gjss>jpg is lousy for gradients.
[16:29]<lrsxcgypn_>png is the future in webgraphics yes
[16:29]<mgrfn>ahh okay
[16:29]<lrsxcgypn_>jpg amount of colors + transparency levels
[16:30]<lrsxcgypn_>noss, on 72dpi?
[16:30]<lrsxcgypn_>don't think anyone even notices
[16:30]<lrsxcgypn_>anyway MGale make it a png
[16:30]<mgrfn>for the background img - do you want it in its own css doc?
[16:30]<mgrfn>okay done
[16:30]<gjss>Lashknife_: i notice easily.
[16:31]<lrsxcgypn_>so what is better than? if not png or jpg?
[16:31]<gjss>png and gif is good.
[16:31]<lrsxcgypn_>gif is limited to 256 colors right?
[16:31]<mzzch_uc>yes
[16:32]<gjss>the eye is limited to about 250 shades as well.
[16:32]<mzzch_uc>lol
[16:33]<gjss>it is a bit more sensitive to green, but it cant really tell the transition between shades when they're divided into 250 steps
[16:33]<lrsxcgypn_>so why are we using jpg then?
[16:33]<lrsxcgypn_>i mean
[16:33]<gjss>it is excellent for photos.
[16:33]<lrsxcgypn_>jpg gives fluent transitions (or called blurry whatever)
[16:34]<lrsxcgypn_>where gif is pixel per pixel sharp
[16:34]<lrsxcgypn_>does an avg gradient have more than 256 tints?
[16:34]<mzzch_uc>use png
[16:34]<mzzch_uc>they have better properties than both the forementioned formats
[16:35]<gjss>gif or png for gradients.
[16:35]<mzzch_uc>png fullstop
[16:35]<gjss>jpg for photos, unless you have clipart in the photos, then you need a non-lossy format.
[16:35]<mzzch_uc>true for photos
[16:35]<mzzch_uc>anything else png
[16:35]<gjss>doesnt really matter.
[16:36]<mzzch_uc>alpha channels on png
[16:36]<mzzch_uc>not avail on gif
[16:36]<mzzch_uc>:p
[16:36]<gjss>not important if it isnt used.
[16:36]<lrsxcgypn_>MS coming up with a new format to kill jpg
[16:36]<lrsxcgypn_>called wmp windows media picture
[16:36]<lrsxcgypn_>jpeg 6:1 compression, wmp 12:1 without additional loss
[16:37]<gjss>yah, but they will probably patent it and nobody will use it.
[16:37]<lrsxcgypn_>=)
[16:38]<mgrfn>:]
[16:39]<mgrfn>so... lash
[16:41]<mgrfn>lashknife: i got <body margin: 0px; padding: 0px; background-color:#e0cb9e;> and the css page.. what next?
[16:41]<wwjww>how to make nice 3d tabs?
[16:41]<mzzch_uc>errr
[16:41]<mzzch_uc>your missing quotes on that
[16:41]<mzzch_uc>and a style="
[16:41]<mzzch_uc><MGale> lashknife: i got <body margin: 0px; padding: 0px; background-color:#e0cb9e;> and the css page.. what next? < FIX IT
[16:41]<lrsxcgypn_>don't use inline styles
[16:42]<mzzch_uc><body class="bodyClass">
[16:42]<lrsxcgypn_>put that in the head part of your code or in an external css file
[16:42]<lrsxcgypn_>don't even make a class
[16:42]<lrsxcgypn_>there is only 1 bg

Back to #html
Or go to some related logs:
#suse
#ubuntu
#php
#blender
#gentoo