Jump to content

cssfreakie

Staff Alumni
 View Profile  See their activity

  • Posts

    1,674

  • Joined

  • Last visited

 Content Type 

Posts posted by cssfreakie

    Sliding doors buttons works great but I need a larger image

    in CSS Help

    Posted

    Thankyou I shall look at firebug.

    Those particular lines of code do not directly have any widths, line heights etc that you talk about.  I pressume you mean I need to look at their patents?

    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

    Sliding doors buttons works great but I need a larger image

    in CSS Help

    Posted

    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

    Validator ?

    in CSS Help

    Posted

    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.

    Problem with browser compatibility.

    in CSS Help

    Posted

    Broken link: W3 Validator testresults. No less than 49 errors, with a number of them serious ones...

     

    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/

    Drawing a line

    in CSS Help

    Posted

    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.

    Drawing a line

    in CSS Help

    Posted

    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>

    Drawing a line

    in CSS Help

    Posted

    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.

    to label a button

    in HTML Help

    Posted

    Great!

     

    Thank you very much cssfreakie, I really appreciate your help!

     

    visitor

     

    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!

    to label a button

    in HTML Help

    Posted

    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

    Don't know what I did wrong..

    in CSS Help

    Posted

    Alright then all he had to do was ask for the view source. But then again I did give him all of the html/css..

    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

     

    Don't know what I did wrong..

    in CSS Help

    Posted

    Edit: Actually I made a mistake asking for support here actually thinking I was going to get help you're judging my new design based on the link that was in my new design from my old design. So you're thinking my problem is with my OLD design. When i'm talking about my NEW design. So i'll actually ask for support some where else.

    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

    Don't know what I did wrong..

    in CSS Help

    Posted

    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>

    Don't know what I did wrong..

    in CSS Help

    Posted

    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.

    Don't know what I did wrong..

    in CSS Help

    Posted

    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...

     

    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 ??

    Don't know what I did wrong..

    in CSS Help

    Posted

    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...

    I want to use Tamil font in my web page.

    in CSS Help

    Posted

    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!

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.