willtudorevans
-
Posts
16 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Downloads
Gallery
Store
Posts posted by willtudorevans
-
-
I made a rookie error. I cropped out an image from my PS doc, and then quit and saved the file. As a result I am only left with the cropped image when I reload the doc.
Is there anyway to recover my initial full PS image?
Many thanks in advance
-
Thanks TKG, this seems to have worked.
-
Hi Guys,
I'm learning to use PS at the moment, with the help of the KS tutorials.
I've been having a problem with my slicing. It keeps cutting bits off.
I begin by marking out my guides, and then (with snap on) I fill an area with a coloured box for where I want my picture to go. I think position the picture over the area and use the highlighted square to create my mask.
I also then create a border ('inside').
Everything looks great.
When it comes to slicing it, though, my slicer doesn't seem to get a perfect fit on the photo; despite the guides and the snap being on. Usually the border has been clipped on at least one of the sides.
Manually adjusting it is an option (with the snap feature off) but this also doesn't seem to get the right results. I also have a lot of photos to prepare.
N.B. my snap is 'fully' on with everything ticked. Is this right?
Even if I don't put the border on, I seem to have problems.
Any help with this would be much appreciated.
Many thanks in advance
Percy
-
Hi Guys,
I feel my current selection of fonts on PS is pretty limited. How can I get hold of more?
Many thanks in advance,
Percy
-
Hi guys,
Whilst I'm learning CSS, I'm also trying to understand it. Why certain code does what it does.
Something I can't get my head around though is the code:
HTML:
<div class = "clear"> </div>
CSS
.clear {clear: both;}
I used this to get my footer to the bottom of the page beyond my two columns (it didn't before). I placed it after the divs for my columns.
Apparently this is necessary when you float the columns above it. Can someone please explain to me why the footer gets out of place and how this code resolves it?
Many thanks
Percy
-
Just to follow this thread up. I recently watched a Chris Coyle video of a solution to this problem on CSS tricks.
He proposed creating a photoshop picture of the desired background colour for the nav bar (with a right-lip of the background colour of the content div), and then in the body:
background: url (images/navbar.png) repeat-y left;
This worked out ok, but I feel the solution proposed by Ben is much cleaner and quicker.
Am I missing something? Are there advantages to CC's methods that I haven't considered?
-
Hi guys,
I'm currently developing a banner in the style demonstrated in Chris Coyle's first video podcast.
The banner is appearing fine until I try to go into live view/preview mode, when the image completely disappears and I'm just left with the background. Any thoughts on why this might be?
Here is the css I'm using:
* {
margin: 0px;
padding: 0px;
}
body {
text-align:center;
background: url(images/repeatxbanner.png) repeat-x top #F2F2F2;
}
#banner{
margin: 0 auto;
background: url(images/banner_image.jpg) no repeat;
width: 892px;
height: 284px;
}
And the 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" />
<link href ="job.css" rel="stylesheet" type="text/css" />
<title>JOB</title>
</head>
<body>
<div id="banner">
</div>
</body>
</html>
Any thoughts on why the image just disappears upon preview would be much appreciated.
Percy
Doh! I was missing a dash between 'no' and 'repeat'.
-
Hi guys,
I'm currently developing a banner in the style demonstrated in Chris Coyle's first video podcast.
The banner is appearing fine until I try to go into live view/preview mode, when the image completely disappears and I'm just left with the background. Any thoughts on why this might be?
Here is the css I'm using:
* {
margin: 0px;
padding: 0px;
}
body {
text-align:center;
background: url(images/repeatxbanner.png) repeat-x top #F2F2F2;
}
#banner{
margin: 0 auto;
background: url(images/banner_image.jpg) no repeat;
width: 892px;
height: 284px;
}
And the 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" />
<link href ="job.css" rel="stylesheet" type="text/css" />
<title>JOB</title>
</head>
<body>
<div id="banner">
</div>
</body>
</html>
Any thoughts on why the image just disappears upon preview would be much appreciated.
Percy
-
You will probably have to separate the buttons into 2 different files and then recombine them, as the method I am giving you will affect the whole image. If you overlay orange you might get the top button to the shade you want, but the bottom button if it's a darker color might not give you want you want. If you split the images into 2 different ones you can overlay color and adjust the Blend mode individually.
Open the image
Go to Layer - Layer Style (or fx at the bottom of the layers palette)
Open Color Overlay
Choose your color
Change the blend mode to Screen
Adjust the Opacity to show the gradient.
Thanks Virtual!
-
Problem solved!
Thanks so much guys.
I'm back again!
I'm looking to manually change the colour of the buttons to suit my website.
I've downloaded the png files, and I've loaded them up in photoshop. I have a specific hex colour in mind, how do I make the orange buttons go #103959?
Thanks as always
-
If you are using the code from Chris Coyier's site, in the a tag of your button add the width you need, then in the a span tag use text-align: center; to get the text to center within the button.
Problem solved!
Thanks so much guys.
-
I don't think we have a video on this, actually. This is roughly the code I usually work with: http://css-tricks.com/snippets/css/perfect-css-sprite-sliding-doors-button/
Basically, you have an <a> element with a background image and display:block set. On hover, you use CSS to move the position of the background image to add the hover effect.
Thanks for this Ben. That hover effect is quite clever!
I'm putting these buttons in my left hand navigation div column which currently has a width of 188px. I can't get these buttons to fill the width of the column without adding text to bulk them out. I thought the 'clear' option might resolve this but it doesn't seem to. Any suggestions?
Currently my buttons are stacking alongside each other when there is room to fit two in one line. Something tells me the 'inline' feature comes in to play here to. Probably way off though!
Many thanks in advance.
-
Hi Guys,
I am full subscriber to the KS library and I was wondering if there any tutorials on how to design buttons? I can't seem to locate any and would like to introduce them to my website.
Many thanks in advance,
Percy
-
There isn't really a way to do that automatically unfortunately. It is possible with Javascript, but I personally try to avoid that if possible. In most cases, I'll have a div that surrounds the two columns, and give that an image background that repeats down the page to create the side column. Something like:
<div class="content_wrapper">
<div class="content"></div>
<div class="sidebar"></div>
</div>
.content_wrapper { background: url(your_bg_image.jpg) top right repeat-y; }
This article does a pretty good job of explaining the process: http://www.alistapart.com/articles/fauxcolumns/
Thanks for this Ben, helped a lot!
-
Hi Guys,
I've recently taken the Dreamweaver CSS course on KS and I have a question.
I have a two column template with a navigation sidebar and a 'main' section for my content. Both of these have been set up with divs.
The height of my main section is dependent on the amount of content on each page. How do I get the navigation sidebar to automatically adjust its height to mimic the height of the main section? I want to have them both clearing to the footer at the bottom of the page (or to at least look like that's what's happening).
If this is not possible, are there any good ways around it? I guess I could have the body div background colour the same as the nav bar colour (or just not have a nav bar colour), but I would like to have them different.
I hope this all sense.
Many thanks in advance for your help.
Percy
ps the KS course was great by the way, taught me a lot. I'm now a full member of the library.
Aaaah! Please help with previous version recovery
in Photoshop
Posted
No luck with that unfortunately.
Thank you both for taking the time to try to help out.
Mea culpa.