cssfreakie
-
Posts
1,674 -
Joined
-
Last visited
Everything posted by cssfreakie
-
Sliding doors buttons works great but I need a larger image
cssfreakie replied to wright67uk's topic in CSS Help
I marked your topic solved (button left bottom corner) is that correct? -
page1 adopts css of page2 when being included via php
cssfreakie replied to meltingpoint's topic in CSS Help
well it depends a bit. I would say use other specific id's or classes for page1 and set a style to those. -
Sliding doors buttons works great but I need a larger image
cssfreakie replied to wright67uk's topic in CSS Help
very good. Those lines don't have any dimensions indeed, but, Those show you the selectors/id/classes that need to be looked for. ANyway try out firebug indeed very good tool. At my blog I have a small video on how to use it. (5min) check it out if your having difficulties -
Welcome aboard the php party train If your eager to learn this is the right place. Don't hesitate to help others out with what you know
-
Sliding doors buttons works great but I need a larger image
cssfreakie replied to wright67uk's topic in CSS Help
You should change the dimensions of the element to which you assigned the background. if you look at your commented code: ul.blue li a.current, ul.blue li {background: url(grey.png) no-repeat top right;color: #0d5f83;} /*STANDARD STATE right side of rectangle*/ ul.blue li a.current span, ul.blue li span {background: url(grey.png) no-repeat top left;} /*STANDARD STATE left side of rectangle*/ Those are the elements you assigned a background to so those are the ones you have to change the dimensions for. Easiest way to do this or to solve this is just use firebug (for firefox) right click on the element and inspect them and play a little with the values such as height (font-size too) width and padding. Those are the ones that directly effect the dimension on which the background is shown -
well, the -moz- and -webkit- are prefixes that target specific brands of browsers (there is even -o- for opera). And border-radius is a css3 property. No need to worry about that. The reason why you don't have to worry about it is because other browsers that don't support it will just ignore it. It will not cause any problems.
-
Thanks for your help, I appreciate it. I'll check out htmldog.com when I get a chance. :3 Something else you must have a look at is, alternative to tables for making a website template. <Divs> are for more Superior for doing so. A nice tutorial for creating a more logical layout by using the properties float, and clear can be found here. Ones you mastered that you will be a happy man. http://css.maxdesign.com.au/floatutorial/
-
I am not sure what you meant to say with the previous 3 responses. but if it didn't work. make sure your browser is ready for box-shadow. All recent versions of firefox chrome and IE support it.
-
Need help validating after using like buttons
cssfreakie replied to $php_mysql$'s topic in HTML Help
Read the error message you got. It describes precisly what you should do. Use the proper doctype. If the error than still exists even with the use of the proper doctype, such as weird attributes which FB and Google use. just ignore it. As for frames no they are not deprecated: http://www.w3.org/TR/html401/present/frames.html -
you might want to consider instead of using those empty divs left and right to use a padding left and right of 7 px on the middle div. Saves mark up and makes more sense if you look at the boxmodel.
-
Oh i just played abit with css3 boxshadow and that is a possibility too, it seems. try it: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title></title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style type="text/css"> .line { box-shadow: 0 3px 1px -3px #000; display: inline-block; line-height: 10px; width: 50%; } </style> </head> <body> g<span class="line">o</span> </body> </html>
-
you can draw lines with html5 canvas. With css, you require a background image (and than position it so it just touches the 'o') if you want to come close to what you have in your attachment. otherwise text-decoration or border-bottom could work, but that would create a greater gap.
-
Before I forget. <input> is an inline element, to give it dimensions other than by adding a value. You need to display it block or inline-block. Ones you've done that you can style it the way you want. So that is what i did in the example given above. good luck!
-
I am not sure what you mean with label a button, but if you want to set your own background image to a submit button (which is independent of javascript) try the following: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title></title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style type="text/css"> .fancybutton{ display:block; /* use inline block if you want it to behave inline */ width:116px; height:21px; border:none; cursor:pointer; /* little hand to show it's a button */ background: url('round_corner.gif') no-repeat; } </style> </head> <body> <form action="" method="post"> <input type="submit" name="submit" class="fancybutton"/> </form> </body> </html> notice I gave submit a class and in css I set the properties for it instead of in the html itself. That way you separate concerns. Ones you played with this and want a something more advanced, like a stretching button. Google for css sliding doors. -edit: if you also validate your html/css most basic errors can easily be fixed
-
If I post my code here, can you help me figure out what each part is doing? Debbie I might if i find some spare time Most of those functions are pretty descriptive though
-
Mr. blogger, I am not sure what you're thinking but at least i hope you are. Your concept of receiving help is a bit odd. You should provide the code, not us. We should not even have to ask for it.. And if we do (4 times) it says enough) Why..? because it makes sense if you think about it, and since it makes sense you can even read it in the forum guidelines (just in case). In a nutshell (for the 4th time): We must be able to recreate the problem don't we?? If we can't recreate it, we can't help, unless we have special powers which i don't. As for you interesting statement that you gave all the code. No, You didn't!! Don't believe me, compare them and hopefully you see it directly! if not change careers. Want to report me again? I can't be arsed
-
Have a look at this article. http://devzone.zend.com/article/686 It's a great introduction into prepared statements, explained in a decent manner with some nice examples. If I am correct there is a second part of that one.
-
You just don't get it do you... I certainly hope there are some visionaries out there that are able to help you. Just read this post in a few months and try to replicate the problem with the code you gave. If you succed in that i'll eat my 24" flatscreen for breakfast
-
Look, i am going to say this 1 more time. your code is not sufficient to replicate the problem you have... To make it work to a certain degree i added a body and html tag like below. But that still is not sufficient since i do not have any comments or any other relevant stuff to recreate it. So again that is why we need relevant code or even better a link. And don;t hide behind what you now have is better or has a doctype. You post your stuff here, that is what we use we are no visionaries. We just want to help, but if you don't provide the very basics we can't help. this is all i could do with what you gave, run that, see .... no captcha no replication of your problem. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title></title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style type="text/css"> #main { background: #A6D7EE; border: 1px solid #92CFEB; border-radius: 2px; width: 46.1%; margin-top: 35px; float: left; left: 27.5%; position: relative; } #main .post { background: #F4F8FA; padding: 2px; text-align: left; } #topic { background: #A6D7EE; border: 1px solid #92CFEB; border-radius: 2px; width: 46.1%; margin-top: 5px; float: left; left: -18.7%; position: relative; } #topic .discussion { background: #F4F8FA; padding: 4px; text-align: left; } #topic .user { margin-top: 2px; /* spelling error magin instead of margin*/ padding: 2px; } </style> </head> <body> <div id="navigation"> <a href="index.html">Home</a> • <a href="comments.html">Comments</a> • <a href="contact.html">Contact</a> • <a href="poll.html">Poll</a> • <a href="copyright.html">Copyright</a> </div> <div id="main"> <h3>Welcome to my Project!</h3> <div class="post"> <form action="" method="post"> <table> <tr> <td><input id="text" size="25" name="user" value="Username.." /> </td> </tr> <tr> <td><input id="text" size="25" name="message" value="Message.." /> </td> </tr> <tr> <td> <script type="text/javascript"> var RecaptchaOptions = { theme : 'white' }; </script> </td> </tr> <tr> <td><input type="submit" value="Submit Comment" /></td> </tr> </table> </form> </div> <div class="copyright">Copyright to <a href="http://myblogger.co/project">Mr. Blogger</a></div> </div> <div id="topic"> <div class="topic"> <div class="user"> </div> </div> <div class="discussion"> </div> </div> </body> </html>
-
This may sound obvious, but the reason I asked for your relevant html is to be able to replicate what you have in order to solve it. The code you provided again does not do that. Anyway I found a link that helped me out: http://myblogger.co/project/comments.html (next time just give that, saves use some minutes wasted). If I view that in chrome ff and IE I see no problem. What I do see is that you are missing a doctype. PLease have a look at the sticky of this forum, and see why you need that. ALso make sure you validate your css, there are some spelling errors in there.
-
Well I did say in my first post. It is my comments are hovering over my entire comment box. It is the comments not the recaptcha or anything.. Behind the 'test' comments in it is the comment fill out box. The comments should be below that entire thing not in front of it. your right you did say comments above, other stuff. Missed that one in the hurry. Anyway the answer is exactly the same. We need HTML + css to help. The reason for this is because css without html is useless. Got an online example so we can have a look ??
-
Although you did not define what your actual problem was. My best guess is that you want the captcha to be displayed in front of that table. In that case, you need to play around with the z-index. I say play around, because with the code you provided us we can't do crap. Either show a link to an online example. Or the relevant html + css or have a google for css and z-index how to...
-
Look I didn't say 'without any modification' ... Also the context in which I said it is working was when i proposed to use a generator (upload your .ttf, download zip, test out file, voila it works) Now, Those characters I haven't got a clue where those come from. But I am about 5000% sure css has nothing to do with that. Why would it?? unless you use the content property which you don't. Did you try: http://www.fontsquirrel.com/fontface/generator ?? If you did, you would have found out that it worked. cheers of to the pub!
-
maybe you want to try out one of the standard generators. I can get it working on my computer, so I am pretty sure so can you. Use this generator: http://www.fontsquirrel.com/fontface/generator Since i don't have a license I won't link to the zip file this thing creates, but you can do that yourself of course. takes 1 min max.
-
did you remove that single quote? and did you validate your css? What you showed apart from the extra single quote should just work (if the file is there and the browser supports @font-face) does this link maybe help extra? http://www.evotech.net/blog/2010/01/font-face-browser-support-tutorial/