Posts by Arkinder Page 9

Arkinder 93 Posting Pro in Training

14 Years Ago

Twitter is using a simple text input. The rounded borders are from the CSS3 border-radius property.

<input value="" placeholder="Search" name="q" id="search-query" type="text">

The magnifying glass is the background image of an element, and they are absolutely positioning it with a right: 0; Regards, Arkinder

UI / UX Design image seo social-media web-design

Arkinder 93 Posting Pro in Training

14 Years Ago

Re: Problem with website when resize the window

It's a jQuery error that is returning a width of 0 for your division with the id "mask". The error is in this line of code var val = targ[pos]; . The JavaScript file is jquery.scrollTo.js - here is the full if else statement with the error.

if( settings.over[pos] )
                        // Scroll to a fraction of its width/height
                        attr[key] += targ[axis=='x'?'width':'height']() * settings.over[pos];
                }else{ 
                    var val = targ[pos];
                    // Handle percentage values
                    attr[key] = val.slice && val.slice(-1) == '%' ? 
                        parseFloat(val) / 100 * max
                        : val;
                }

I do not know jQuery, but I'm sure someone in the JavaScript section of the forums can help you.

Regards, Arkinder

UI / UX Design web-design

Arkinder 93 Posting Pro in Training

14 Years Ago

Re: Problem with website when resize the window

Accidental post - will correct in a moment.

UI / UX Design web-design

Arkinder 93 Posting Pro in Training

14 Years Ago

Re: Wordpress theme affecting the style of the post

It looks like a width issue, but without the complete markup or a link to the page with that template it's difficult to tell.

Thanks, Arkinder

UI / UX Design web-design wordpress

Arkinder 93 Posting Pro in Training

14 Years Ago

Re: How I display output in same page on click in link

This cannot be done with HTML or CSS. However, it can be accomplished in several other languages. I suggest asking here.

Thanks, Arkinder

UI / UX Design web-design

Arkinder 93 Posting Pro in Training

14 Years Ago

Re: Negative webpage

All of this depends on your elements, and how you have styled them. This cannot be done in HTML or CSS alone. However, it can be easily done with JavaScript. I haven't used JavaScript actively in a few years; and I haven't made an effort to keep up with it, so I don't know if any of the code is deprecated or working in IE.

<!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">

	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<script type="text/javascript">
		<!--//
		function negative () {
			if (document.body.style.backgroundColor != "black" && document.getElementById("container").style.color == "" ) {
				document.body.style.backgroundColor = "black";
				document.getElementById("container").style.color = "white";

			} else {
				document.body.style.backgroundColor = "white";
				document.getElementById("container").style.color = "";

			}
		}
		//-->
		</script>
	</head>
	
	<body>
	
	<div id="container">

		<a href="#" onclick="negative()">Toggle negative</a>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

	</div>
	
	</body>
	
</html>

If you would like anything in the code explained feel free to ask. As I said before, whether this works or not depends on you current CSS.

Thanks, Arkinder

UI / UX Design web-design

Arkinder 93 Posting Pro in Training

14 Years Ago

Re: How to take printout by button of php webpage

You would need a separate stylesheet with the CSS for the printed section you would like. For more information on stylesheets for print, go here. As for just printing the ICard and adding a message to the page, to my knowledge it cannot be done with HTML or CSS alone.

Regards, Arkinder

UI / UX Design php web-design

Arkinder 93 Posting Pro in Training

14 Years Ago

Re: web design tools

You're question is a little vague to me. Some quick Googling comes up with things like this, and this. As far as what the best things to have are is really just a matter of preference. However, two things I would say that every web developer needs is a good text editor and Firebug. Firebug is originally a Firefox add-on. They describe themselves as,

Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.

It is also available in Safari, Chrome, Opera, and IE6+

Regards, Arkinder

UI / UX Design web-design

Arkinder 93 Posting Pro in Training

14 Years Ago

Re: Problem CSS display banner

To add to Borzoi's post,

Typically the background-image property should have single quotes surrounding the destination - background-image: url('images/fond.png'); If you are trying to center the text and inline elements on your page, then use text-align: center; .

Otherwise if you are trying to center the body itself, it would be more logical to use a containing division.

<div id="container"></div>

#container {
    width: 760px;
    margin: 0 auto; /*this will center the division in the middle of the page*/
    margin-top: 20px;
    margin-bottom: 20px;
    background-image: url('images/fond.png');
}

As Kraai and Borzoi both said, without more information it is difficult to help you.

Regards, Arkinder

UI / UX Design html-css web-design

Arkinder 93 Posting Pro in Training

14 Years Ago

Re: Adding Form to AP divs

Every browser, by default adds margin and padding to different elements. Set this to 0 by using this CSS rule.

* {
    margin: 0;
    padding: 0;
}

This is known as the universal rule or selector, and It affects every element on the page.

Regards, Arkinder

UI / UX Design web-design

Arkinder 93 Posting Pro in Training

14 Years Ago

Re: z-index and iframe

No problem, and good luck.

UI / UX Design web-design

Arkinder 93 Posting Pro in Training

14 Years Ago

Re: issues with drop down menu form select

Please post the full markup or a link to a test page. Otherwise it is extremely difficult to help you.

Thanks, Arkinder

UI / UX Design web-design

Arkinder 93 Posting Pro in Training

14 Years Ago

Re: Expansion of a HOME PAGE

Please use code tags when posting code. Most of the code you're using is deprecated. For example:

<body bgcolor="#660066" background="Images/2335.jpg" text="#9966CC" link="#9966CC">

Can be done with CSS.

body {
    background-color: #660066;
    background-image: url('Images/2335.jpg');
    background-repeat: no-repeat;
    color: #9966CC;
}

a:link {
    color: #9966CC;
}

Here is a list of deprecated elements. Also, you have the body element twice - this is not aloud. I'm not sure what you want that image to do, but I can provide an alternate way to accomplish it if you would like.

Regards, Arkinder

UI / UX Design web-design

Arkinder 93 Posting Pro in Training

14 Years Ago

Re: border radius problem in ie6

This should explain everything you need to know about the border-radius property.

Regards, Arkinder

UI / UX Design web-design

Arkinder 93 Posting Pro in Training

14 Years Ago

Re: z-index and iframe

I was born in Hamilton County so I hope you don't mind if I offer another work around. One that doesn't require z-index at all (this is based off of the code you provided - not the link). :)

Let's begin with your division that has the id "containterI".

Remove the align attribute. It's deprecated and not really doing anything.
Remove the 'position: relative;' from your CSS. You'll notice the division is centered while the content is not.

Now remove the position style from the following divisions, listed by their corresponding id.

LayerID
LayerBnr
LayerNavH
LayerNavV
LayerSlgn
and LayerContentI

At this point a few elements are thrown all over the place, and we'll get to that in a moment. For now let's do a little housekeeping.

In your division "LayerID"s CSS remove the float property.
In your division "LayerNavH"s CSS remove the clear property. Since there is no longer a floating element this isn't really needed.
In your .navTbls rule remove the 'left: 2px;' and 'top: 30px', but leave 'position: absolute;'. This will keep the changing divisions in the same place.

Now your division with the id "LayerNavV" is positioned where we would like it, but now we need to make it play well with the other elements on the page. Specifically your division with the id "LayerSlgn". We are simply going to add 'float: left;" into "LayerNavV"s CSS. Now if "LayerSlgn" was visible it would be exactly where we …

UI / UX Design web-design

Arkinder 93 Posting Pro in Training

14 Years Ago

Re: z-index and iframe

I accidentally posted before finishing. I'll edit with completed post in a moment.

UI / UX Design web-design