cssfreakie

mark it solved

Hi Co.Ador to vertical align a caption that consists of just 1 line (like in your case) You can set the Line height of the text to the height of the image. to align to the center, you need a block element such as a <p> or a <div> and put text-align: center on it. so in your case. Note though by default a <p> element has margin at the top and bottom. so it's easier to use a div, unless you use a reset.css (see sticky)

if you use css3 for such elemental things realise than quite a large audience will not experience your website as you might want. the same is for html 5

suggestion: get firefox and install firebug. after installation: Right click, inspect element, left is the mark-up right side is the style used.

This topic has been moved to PHP Freelancing. http://www.phpfreaks.com/forums/index.php?topic=331231.0

there is no such thing as images as border. also the link you provided leads to a domain park. to set a border you need to create a box with several div's depending on the layout.

Your making this design much more difficult than needed. Your template if you look closely can be split up in 3 parts a header a middle piece and a footer. see attached image Also your tables use inline images that do not increase if the table cells increase. I am not sure what this ebay template is about, but if your allowed to use something different than tables (div's for instance) i would go for that. a much simpler mark up for this design could be <div id="wrapper"> <div id="header"></div> <div id="middle"> <h2>description</h2> <p></p> <h2>pictures</h2> <p></p> <h2>postage</h2> <p></p> <h2>policy</h2> <p></p> </div> <div id="footer"></div> </div> [attachment deleted by admin]

that's not what overflow does or should do. You need to set the width of the footer to 100% and than repeat-x the image it could look like this html <div id="footer"> </div> css: #footer{ width:100%; height:120px; background: url(../images/gradient.png) repeat-x; }

than you certainly should check out Yslow and smush.it http://developer.yahoo.com/yslow/ http://www.smushit.com/ysmush.it/

lol yeah there is an organisation called the W3C http://www.google.nl/#sclient=psy&hl=en&source=hp&q=css+documentation&aq=1&aqi=g5&aql=&oq=&pbx=1&fp=b1c8d725ce21dc8a keywords: css documentation for php it php.net

well they are ranked high with certain keywords: http://www.google.nl/#sclient=psy&hl=en&source=hp&q=border+shadow+css+3&aq=f&aqi=g1&aql=&oq=&pbx=1&fp=a5a1dc2b443f77b1 border shadow css 3

do you mean the shadow border around the image, or the elements inside the image. Anyway the answer to both is yes you can do this with css. As far as the shadow border this can be done with CSS3 and otherwise with a css combined with a shadow border image this is the css3 way: http://www.css3.info/preview/box-shadow/

you load it up, it's easier to fix stuff that way, since we have to guess the dimension of the images here otherwise And we can use nifty tools to inspect it. And as far as tabular design yes old school( 1997) they are indeed.

I am not a real fan of tables because they are often used for things they are not meant for. (like layout) The layout you have here can be made much easier by using other things than tables. If you like help with that let me know. I rather not spend time on tabular design. Got this design somewhere online so i can have a look at it?

Okay so if i understand you correctly you want a box to pop up ones you hover over an image? if that is the case you don't even need an in line image, you can set the A element to display block and set a background image to it. for instance: <style type="text/css"> a#popup1{ /* i would normally use a parent id or class for this, and make only the background unique with an ID but it seems you can't use classes which is a bigger mystery than ufo's to be honest */ display:block; width:50px; height:50px; background: url(../images/your-image1.png) no-repeat top left; } a#popup1:hover{ width:200px; height:200px; background: url(../images/your-image2.png) no-repeat top left; } </style> <a id="popup1" href=""></a> I have no idea what you mean with that: distorted..? in your browser?,.. your editor, in ...? I never heard this one. But if you can't use classes at all i would not even bother styling things to be honest. classes just like id's and selectors are vital to target elements. That's what css is all about. Separate concerns, by using external stylesheets javascript, using a template and include your php in it. Hope this helps! really love to know what that class distorting is though, sounds freaky -edit: changed the code a bit, was a small error in it.

just a few things? which block do you mean. Since you use a div and a span displayed block. Also some other things are wrong with your code. 1) <style> make it <style type="text/css"> 2) you have a } too many in your style declaration. at the very bottom. 3) stop using style tags or in line style it's chaotic, redundant, slower and harder to fix since it overwrites everything. 4) do you realise that the style you set in your style tags is meant for a hover state (of the A element)? just mouse over it and you will see. (so it depends on the A element and not on the span element...) edit: maybe just say what you want to do (in a more precise manner, also start working with id's classes selectors in an external style sheet) edit2: in addition to the above is this maybe more as you like it? !!notice i removed the div and the span. and added the display block allready to the normal state of the a element <style type="text/css"> a.block{ display: block; width: 350px; height: 100px; } a.block:hover { position: relative; /*this is the key*/ padding: 0px; margin: 10px; z-index:6; color:#FFFFFF; text-align:center; /* for IE */ filter:alpha(opacity=100); /* CSS3 standard */ opacity:1; font-size:12px; font-family:Arial, text-align:center; background-color:#15317E; -moz-border-radius: 5px; border-radius: 1px; -moz-box-shadow: 5px 5px 5px #ccc; -webkit-box-shadow: 5px 5px 5px #ccc; box-shadow: 5px 5px 5px #ccc; } /* } this is wrong */ </style> <a class="block" href="tree.php?id=child"> <img src="images/Icon.png" alt="" width="50" height="50" /> <span>Some content.</span> </a>

use the new css3 border-radius (and or -moz-border-radius) for that, saves you a hack of a time. Unless your client insists that they want rounded corners on all browsers P.s. don't forget to mark your topic solved, saves others reading through and find out it's fixed already

well that looks good, so up next step 2 z-index bug.

Hi nuv, this probably is the z-index bug for IE. Depending on your use of a valid doctype, all versions of IE may be affected by this. No valid doctype means IE goes in to: I am IE 5 mode (simple said) So do you have a valid doctype? if not include one at the top. That is not rocket science just copy paste one. Second, and that should be the remedy for the bug. In a nutshell if you use a z-index in lower versions of IE, you need to give a z-index also to the parent(container) item. otherwise you end up with what you have. some info can be found here: http://ltslashgt.com/2007/05/16/relative-zindex-and-ie/#comments or here: http://www.gobdg.com/blog/2009/04/positionrelative-z-index-ie-bug/ But if you use google and type in z-index bug you will get tons of hits. p.s. I find it a nice habit to include a conditional comments for different versions of IE instead of using browser specific hacks.

using an ID selector or class really depends on the situation. With the little code you showed it could very well be a good practice to use an #id. Although it might seem weird at first. As you might know id's are unique and you can only use them ones, but that doesn't mean you can't use them more them ones to select inner elements. Say I want to give each paragraph inside a specific div a padding of 10px; Now you probably think ok so those <p>'s are not unique so I should use a class. Well Those paragraphs may not be unique but the container holding all those paragraphs is unique, because they all have a padding of 10 px, while other paragraphs in a different div don't have that padding. So instead of doing this: <div> <p class="my-padding-class"> heloo</p> <p class="my-padding-class"> heloo</p> <p class="my-padding-class"> heloo</p> <p class="my-padding-class"> heloo</p> </div> with a style of .my-padding-class{ padding:10px 0; } which seem okay, but if you look closely it's redundant. you can better do: <div id="wicked-paragraph"> <p> heloo</p> <p> heloo</p> <p> heloo</p> <p> heloo</p> </div> with a style in the style sheet of #wicked-paragraph p{ padding:10px 0; } which selects all p's inside the #id's of wicked-paragraph So do not underestimate id's! combine id's, selectors and classes until you have the most efficient mixture. But keep in mind Id's are unique, so only apply them ones to the specific element that holds it.

I agree with Mens, Say for instance you live in a house with 30 students and you all have the same ip-address, If you only allow 1 you miss 29 potential customers. If you want to block certain content, or automated bots. use other methods like captcha,

as far as i know without refreshing the page this needs to be done with AJAX. You might want to have a look in a jquery ajax. it's a premade class library

it depends on what you want with that info really. You can't prevent it for everyone. But that's the same as with security, it's never 100% waterproof.

ah okay

what did you try? got code? online example? by the way do you mean with c symbol the copyright notice?