creating a small bar

[Destramic]

hey guys...i want to create a bar for my password strength script...but the code below wont shw anything if anyone can help

 

<div class="bar" id='bar' style="background-color:#ff9900; border: 1px solid white; font-size: 1px; height: 5px; width: 120px;"></div>

 

also do you just use <span> tags for text?

 

thanks

[cssfreakie]

first of all, some organization named the w3c, has a great manual. I bet your question on the span is documented. But to answer that in a more general way, It's always good to put text in a suitable element. for instnace a <p> <h1> <span>  etc.  (buy a good m8, it saves you loads of time)

 

 

The code you provide works, not sure what your whole script looks like, but if you have an online example we can have a look.

 

Now your code has some weird things, first of all inline style, Don't use it, 99 out of 100 it's redundant and in fact inline style is slower than styles inherited from an external stylesheet. Furthermore why would you use inline style if you already giving the div a class and on top of that an id? Those id's and classes are designed to target the element and set style to it.

 

Hope this helps a bit, but really books are worth there weight in gold.

[Destramic]

the css is normally in a style sheet its just in the div for a example of the code...but the div code abve doesnt display anything...alll i want it to do is just display a small like about 5 px tall 150 px wide

[cssfreakie]

I works at my place and the code is not wrong,

so i just repeat:

The code you provide works, not sure what your whole script looks like, but if you have an online example we can have a look.

[crmamx]

buy a good mate, it saves you loads of time

That's illegal in our country except for Nevada...

[cssfreakie]

buy a good mate, it saves you loads of time

That's illegal in our country except for Nevada...

lol aweswome, I meant buy a good book. haha

[Destramic]

@cssfreakie i understand i need to buy a book...but ive only written on this forum for help...and if you dont want to offer any help then dont reply back to my posts...simple

 

now ive tried this on firefox and ie and div doesnt appear...but if i put text in between the tags then it shows...but for this div i dont want any text in it...i just want the bar

 

<div style="background-color:#ff9900; border: 1px solid white; height: 25px; width: 200px;"></div>

 

thanks

[cssfreakie]

Look, I am here to help, and if you see this specific forum, you might have noticed I do this just because i like to help. For some 'odd' reason it works with most people.

But  you just don't seem to get that quite some things can happen to your code. let me explain this:

Your page contains more than just this div, like I already said in my first post That's why i asked you for the fourth time do you have an online example. Because this little snippet you give works, period.

I can give all the possibilities  how this could happen, for instance maybe there is a div overlapping with a high z-index. or this div is inside a div with overflow hidden and this divs gets cut off, maybe there is a javscript or a stylesheet setting this specific div to display:hidden et cetera et cetera.  I hope you understand this. (just aside Why on earth would I ask for an online example if I could have just said buy a book.... Because i want to help you out. )

 

So for the fourth time, SHOW US ALL YOUR CODE or even better an online example or search for a forum with  people with visionary  skills because no one can help you here without seeing all the code!!

 

[crmamx]

@cssfreakie i understand i need to buy a book...but ive only written on this forum for help...and if you dont want to offer any help then dont reply back to my posts...simple

You may have just shot yourself in the foot.

 

He happens to be one of the nicest and most helpful people on this forum. And may be the best at css.

 

He just has this hangup about books.... :D

[Destramic]

well it certianly didnt come accross that way...maybe we have misunderstood each other here.

 

anyways i cant see how any other code would interupt my div from working but here is the page...excuse the mess im just trying to get script working before added into my framework

 

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/library/jquery.js"></script>
<style type="text/css">
div 
{
display : inline;
}
.invalid_text
{
color : #FF0000;
font-size : 10px;
font-family : Verdana, Arial, Helvetica, sans-serif;	
}
.valid_text
{
color : #228b22;
font-size : 10px;
font-family : Verdana, Arial, Helvetica, sans-serif;	
}

.password_minimum_characters
{
font-size : 9px;
font-family : Verdana, Arial, Helvetica, sans-serif;
}
.password_too_short_text
{
color : #FF0000;
font-size : 10px;
font-family : Verdana, Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<script>	
$(document).ready(function()
{
function match_validation(selector, selector2, field_label)
{		
	selector  = $('#' + selector);
	selector2 = $('#' + selector2);

	$(selector).change(function()
	{	
		var field_value  = $(selector).val().toLowerCase();
		var field2_value = $(selector2).val().toLowerCase();

		if (field_value.length == 0 ||
			field2_value.length == 0)
		{
				$('div#match_validation_message').text('');
		}
		else if (field2_value.length !== 0)
		{
			if (field_value !== field2_value)
			{
				$('div#match_validation_message').text(field_label + " doesn't match");
				$('div#match_validation_message').removeClass("valid_text").addClass("invalid_text");
			}
			else
			{	
				$('div#match_validation_message').text(field_label +   " matches");
				$('div#match_validation_message').removeClass("valid_text").addClass("valid_text");
			}
		}
	});

	$(selector2).change(function() 
	{
		var field_value  = $(selector).val().toLowerCase();
		var field2_value = $(selector2).val().toLowerCase();

		if (field_value.length == 0 ||
			field2_value.length == 0)
			{
				$('div#match_validation_message').text('');
			}
		else if (field_value.length !== 0)
		{
			if (field_value !== field2_value)
			{
				$('div#match_validation_message').text(field_label + " doesn't match");
				$('div#match_validation_message').removeClass("valid_text").addClass("invalid_text");
			}
			else
			{	
				$('div#match_validation_message').text(field_label +   " matches");
				$('div#match_validation_message').removeClass("valid_text").addClass("valid_text");
			}
		}
	});

	$(selector).change();
}

function password_strength(password, minimum_character_size)
{
	password        = $('#' + password);

	$(password).after('<br /><div id="password_minimum_characters" class="password_minimum_characters">Minimum number of characters is ' + minimum_character_size + '</div>');

	$(password).change(function() 
	{
		var password_length = password.val().length;

		if (password_length < minimum_character_size)
		{
			$(password).after('Too Short');
		}

		// very weak > mimimum characters
		// weak 3
		// medium 6
		// strong numbers
		// very strong contains higher case
	});
        
}

match_validation('email', 'confirm_email', 'E-mail Address');
password_strength('password', ;
});
</script>
<form method="post">
<label for="username">Username :</label>
<input id="username" name="username" value="" type="text" /><br />
<label for="email">E-mail Adresss :</label>
<input id="email" name="email" value="" type="text" /><div id="match_validation_message"></div><br />
<label for="confirm_email">Confirm E-mail Address :</label>
<input id="confirm_email" name="confirm_email" value="" type="text" /><br />
<label for="password">Password :</label>
<input id="password" name="password" value="" type="text" /><br />
<div style="background-color:#ff9900; border: 1px solid white; height: 25px; width: 200px;"></div>
<input type="submit" value="Submit">
</form>
</body>
</html>

[cssfreakie]

No problem, (I sometimes get impatient if I need to say things more often than needed)

but just to remind you we are here to help, and anything we say pretty often is for a reason.

 

IN this case:

<div style="background-color:#ff9900; border: 1px solid white; height: 25px; width: 200px;"></div>

just works!....

 

but your code which we didn't see before (line 6) has a style applied to this div which makes this div behave as an inline element instead of a block element.

div{
display : inline;
}

 

Unfortunately You can't set the width and height of an inline element. Nor is it smart to set the general div to display inline with the selector div{property:xxx;}

 

So if you remove that line from your code your good to go. If you need that display inline for any of your javascript or any other purpose, use either an id or class depending on the situation. As a matter of fact I just wrote an article on this 

 

And there you have it, the proof i want to help, and the proof that we need to see all your code or an online example in the css and html fora.

 

Good luck!

 

[Destramic]

thanks alot that worked a treat...also i read your atricle which is very inteteresting especially for someone like me as i dont know that much about css....but one last question whats the best way to view mysql database rows?...tables or is there a good method with div?...thanks again

[cssfreakie]

but one last question whats the best way to view mysql database rows?...tables or is there a good method with div?...thanks again

good one! Destramic glad you asked

 

A lot of data from a database,  is a typical example of raw data, in case you order it like a spreadsheet, so that is multicolumn, tables are perfect for that. In case it's just a simple list (1 collumn), rather use an <ul> a <dd> or a <ol> for it, depending on the situation

 

The thing is, tables use quite some extra mark up (and are less readable), which is in case of 1 column is not needed. Besides that tables are often abused for layout. Even the friends of microsoft use it. (why? only they know)

 

Anyway good question. (post it at my blog haha, love to answer it there to because it's nice in addition to the article)

 

Cssfreakie

[Destramic]

Well i'll make a post tomorrow on your blog and maybe you could answer in fully there...maybe a example how rows can be implemented in a style other than a table (if possible)...would make a very useful and interesting article i'm sure

[cssfreakie]

thanks, although the above is pretty much the core

 

in a nutshell:

got data?

is it multi-column: use a table;

name:    place:      date:        monkeys:
---------------------------------------------
johny |northpole| 01/01/2011| 12
mooo |northpole| 01/01/2011| none
maaa |northpole| 01/01/2011| 22
waaa |northpole| 01/01/2011| none

ist it single column: use a list;

John Miller
Johny Cash
Elvis Presley
God Zilla

 

[stevengreen22]

Just to piggy back in on this.  You know already that I've used tables on my site and it's being changed...but...I've a couple of tables that are quite important, for example the one that is used for changing . dsplaying member info or the one i have on the main page for displaying the chitchat section.

 

are these simple to recreate? At a guess...would you need to create another 'box model thingys' and have the details in there? but then... how can it pull through the php? agh!! too many questions!!! Must read!!!

 

When you mention displaying data from sql...I've got a lot ofthat in my site...now, I don't want to get mixed up, php server side, sql dbase, html markup and css styling so...the css used to create the area that the comntent is displayed in and then the html within the area drags through the php wich on turn hoks up to the dbase?  Logic trying to kick in.