kanaku 60 Posting Whiz

I was going to be a pompous ass and point you to the W3C site... but it's written in Martian so I'll try to humanize it here. =)

clear: both

If you have a couple of floated elements, say div1, div2, and div3, their arrangement will depend on how much content each div has.
For example, if all divs have a simple "Hello world" in them, most likely, the divs will lie horizontally beside each other on a page. Adding a clear attribute to them specifies that a certain side of that floated div shouldn't have certain floated elements beside it:

#div1, #div2, #div3 {display: block; float: left;}
#div2 {clear: left;}

Instead of the divs lying horizontally, div2 and div3 will now lie in a row below div1. This is because you specified that div2's left side shouldn't have left floated elements beside it.

(In truth, the clear: right declaration stumps me. So you need to have someone else explain that)

Specifying clear: both is like saying: I don't want floated elements on BOTH sides of this element. So divs 1, 2, & 3 will lie on different rows altogether.

when it is just margin without left or right

The margin property is a shorthand for the top, right, bottom, left margin properties. It can take a maximum of four values:

margin: 1.0em 2.0em 3.0em 4.0em;

Is like saying:

margin-top: 1.0em;
margin-right: 2.0em;
margin-bottom: 3.0em;
margin-left: 4.0em;

... but it's shorter. =) The …

kanaku 60 Posting Whiz

CSS inheritance works (more or less) in this way:

- checks your main (ie the a:link)
- checks the specific a:hover
- checks inline style

Your external CSS is correct in that it has text-decoration: underline in the a: tags BUT when it comes to rendering, the final say comes from this line of code in your html:

<a href="http://www.yahoo.com" [B]style="text-decoration:none"[/B]><b><font color="#FFFFFF">:: HENRY'S :: </font></b></a>

No matter what you specify in your external stylesheet, the inline CSS you use in your HTML will effectively overwrite everything else.

So remove that offending line in your HTML, and you'll be fine.

kanaku 60 Posting Whiz

This was actually a solution to making divs behave like a table-cell (for those of us who were used to the early-table-like-layouts).

I find them useful for making divs extend all the way down. Because divs with floated elements inside do not display all the way down... so the image floated to the right doesn't really make the 'holding box' display up to the bottom of the image. And the solution is to display it as a table-cell.

There are also table-row and table-column display values available, but they aren't rendered (or they do not affect the display). I think they're just for grouping purposes.

I got this tip from the Sitepoint newsletter by the way. =0

(sorry for the incoherence; got no time to edit)

kanaku 60 Posting Whiz

I'm not sure if you'll like this, but a display: table-cell; attribute-value in your image's block should do the trick (this also works for backgrounds that won't show because the holding block 'collapses' if it's contents are floated.... I hope I'm making sense. Anyway, here is the whole code, with slight modifications:

<!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>UFO does not mean ET</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

<style type="text/css">

.cenx {text-align: center;}
.ceni {clear: both;}
.bxfix {margin: 0; border: none; padding: 0;}

.wfl {width: 100%;}
.hi {margin: 24pt 0;}
.fixim {height: 100%; float: right;}

img {padding: 12px;}
body {background-color: #ffeecc; padding: 5%; font-family: sans-serif;}
table {background-color: #ffffff; vertical-align: top; border: solid 1px #000088;}
th {background-color: #eeffe0; vertical-align: top; border: solid 1px #000088; padding: 4px;}
td {background-color: #ffffff; vertical-align: top; border: solid 1px #000088; padding: 0 4px; font-size: smaller;}
#uppertext
	{
	display: table-cell;
	}
</style>
</head>

<body>
<h1 class="cenx">&quot;UFO&quot; does not mean &quot;ET&quot;</h1>
<div class="hi wfl" id="uppertext">
 <img src="podium.jpg" alt="podium def" class="fixim" />
 <p>People call many things by the wrong names. Here is a list of objects erroneously given the wrong
 names by people who do not know better, and the correct names for them:</p>
</div>
<div class="hi wfl">
 <table class="wfl" cellspacing="0">
  <tr><th>THE CONFUSED WORD</th><th>WHAT IT REALLY MEANS</th><th>THE ERRONEOUS USE</th><th>THE CORRECT WORD TO USE</th></tr>
<tr><td>Podium</td><td>The box an orator stands on<br />(It elevates him higher.)</td><td>The stand in front of an orator</td><td>Lectern or pulpit</td></tr>
  <tr><td>Theory</td><td>A proposal about how things happen<br />(Not …
kanaku 60 Posting Whiz

Yes, and we're asking for the html code. Not the php. =)

kanaku 60 Posting Whiz

Perhaps a 'scrap' of code that can be copy pasted directly (with head, body, etc). Cfa probably wanted to help you, but you should also help us help you (if that makes any sense). After all, unlike you, we're not being paid to do this.

There's also no call for that language/possessiveness over the HTML code... HTML and CSS code are viewable by anyone as long as the site goes live. :D If it were PHP, that would have been different.


Anyway, have you looked at my previous post? Isn't that what you wanted to do (with less div tags)? Make use of labels, they can also be floated, assigned their own 'block' but are more 'semantically' correct for labeling your fields.


For those who want to help out too but can't be bothered to copy, paste, AND edit the code he provided, here's my caveman-html version. Copy-paste directly.

<html>
<head>
<title></title>

<style>
.b {width: 99%; }
.l {width:30%; float:left; text-align:right; margin-right:10px;}
.r {width:30%; float:right; text-align:left; margin-left:10px;}
</style>
</head>

<body>

<div class='b'>
<div class='l'>Prompt for input 1</div>
<input name='1' type='text'></div>

<div class='b'>
<div class='l'>Prompt for input 2</div>
<input name='1' type='radio' value='yes'>Yes <input name='1' type='radio' value='no' checked>No </div>

<div class='b'>
<div class='l'>Prompt for input 3</div>
<input name='3' type='password'></div>

<div class='b'>
<div class='l'>Prompt for input 4</div>
<textarea cols=60 rows=10 name='4'></textarea></div>
<div class='b'>
<div class='l'>Prompt for input 5</div>
<input name='5' type='radio' value='yes' checked>Yes <input name='5' type='radio' value='no'>No </div>
<div class='b'>
<div class='l'>Prompt for input 6</div> …
kanaku 60 Posting Whiz

I read a convincing article that justifies using tables for forms... because they are still 'tabular' info. (2 columns: col1 is field title, col2 is input field)

But if you really want to, you can avoid having to use &nbsp; by setting each label and input to display as a block or inline-block and assigning a padding and margin for them.

Or save this caveman-CSS I whipped up for ya and preview it:

div#form
	{
	background: #000;
	width: 20.0em;
	COLOR: #666;
	}

label
	{
	line-height: 1.0em;
	background: #E0E0E0;
	margin: 0.5em 1.0em;
	width: 8.0em;
	display: inline-block;
	clear: left;
	vertical-align: top;
	}
input, select, textarea
	{
	margin: 0.5em 1.0em;
	width: 8.0em;
	display: inline-block;
	clear: right;
	}

Here is a very-short html code to match

<html>
<head>
<title>FORM</title>
<link rel="stylesheet" type="text/css" href="form-block.css" />
</head>

<body>
<div id="form">
	<label>Field1</label><input type="text" />
	<label>Field2</label><input type="text" />
	<label>Textfield</label><textarea></textarea>
	<label>Dropdown</label><select><option>1</option><option>2</option><option>3</option><option>4</option>





</div>


</body>
</html>

The background color is to show how the elements are placed in their own 'boxes'. The margin or padding applied to the labels and input fields eliminates the need to add &nbsp;'s.

kanaku 60 Posting Whiz

Hallu again rajeesh! SkyVValker had the same problem about limiting the display. His question was already answered here by DiGSGRL. :)

kanaku 60 Posting Whiz

Oh ok. sorry about that... I didn't notice the 'coming out' effect. Here's the code for it:

body
{
background: #FFF url('logo.png') no-repeat 150% -125px;
}

I snooped at the code *hungs head in shame* and played around with the values. The % should be greater than 100. The -125px is the background's distance from the top (you can set it to 0 if you want to observe the behavior of the background as a test subject).

The % value specifies the horizontal position of the background. 0 means left and 100% means right. Since the value is greater than 100%, the background is partially hidden (the rightmost portion of the background is in 115% of the browser's width). For example, if your monitor is 1000px, the background's rightmost part is at 1150px. So 150 pixels of your background is hidden.

Since 115% of 200pixels is less than 115% of 1000 pixels, resizing the browser to 200pixels is like positioning the background's rightmost edge to to (15% of 200) or 30 pixels from the 'end' of the browser. This brings down the 'hidden' portion of your background to 30 pixels (from the initial 150).

I don't understand the exact concept of which exact value to use... For example, if it's really the right-edge that's being positioned, setting a value of 0% should hide the image completely, right? But it positions the background to the left. =/

If you want to play with the values, try …

kanaku 60 Posting Whiz

Cool. (Even if I didn't ask the question)

I always wondered how the check(ed)boxes are passed to the table.


But is it bad practice to create a separate table that holds the checked values for all users (ie an interests table that stores userID and interestID?)

kanaku 60 Posting Whiz

It's a background image set in the document body.

Here's the CSS code for it:

body
{
background-image: url(image.gif);
background-position: top right;
background-repeat: no-repeat;
}

OR a shorthand version

body
{
background: #FFFFFF url(image.gif) no-repeat top right;
}
xander85 commented: Great resource! You are appreciated! +2
kanaku 60 Posting Whiz

Try this link.

It's a copy-paste tutorial. :D

kanaku 60 Posting Whiz

Use a dynamic and static salt combination?
Article from codeigniter -- but the concept is the same.

kanaku 60 Posting Whiz

Here is how to check if an input field is empty (javascript code):

var email = document.getElementById('email').value;

if (email == undefined || email == '')
{
alert('Please enter an email address');
}

First you get the 'value' of the text field and assign it to a variable for convenience (in this example, we used the email variable).
Then you'll check if the email variable is undefined (meaning no value was assigned to it) or if an empty string was assigned to it.

That's basically it. Change the value highlighted in red to the id of the field you want to check.

kanaku 60 Posting Whiz

Recall that you give a 'name' to a group of checkboxes/buttons in your html code like this. To easily loop through all the checkboxes, use the getElementsByName method. Here is a demo using checkboxes and radio buttons.

<html>
<head>
<script type="text/javascript">
function check()
{

	var group1 = document.getElementsByName('interests'); //assigns 'interests' checkboxes to group1 -- it becomes an array
	var checkedbox = false;
	var group2 = document.getElementsByName('gender'); // assigns 'gender' radio buttons to group2
	var checkedbutton = false;


for (i=0; i<group1.length; i++) //loop through 'interests' array
	{
	if (group1[i].checked == true)
	{// do something but for this example:
	checkedbox = true;
	break;
	}
	else
	{
	checkedbox = false;
	}
	}

	for (i=0; i<group2.length; i++) // loop through 'gender' array
	{
	if (group2[i].checked == true)
	{// do something
	checkedbutton = true;
	break;
	}
	else
	{
	checkedbutton = false;
	}
	}

	if (checkedbox == false) alert('Please check at least one box');
	if (checkedbutton == false) alert('Please check at least one button');
}
</script>
</head>
<body>

<form id="carinsurance">
<p>Check one or more[interests]:</p>
Design: <input type="checkbox" name="interests" value="design" /><br />
Sports: <input type="checkbox" name="interests" value="sports"  /><br />
Sleeping: <input type="checkbox" name="interests" value="sleeping"  /><br />

<p>Check one[gender]:</p>
Male: <input type="radio" name="gender" value="M" /><br />
Female: <input type="radio" name="gender" value="F"  /><br />
Its' complicated: <input type="radio" name="interests" value="IC"  /><br />

<input type="button" value="GO" onClick="check()" />
</form>

</body>
</html>

The red code corresponds to the checkbox-related script.
Green code is for the radio buttons.

kanaku 60 Posting Whiz

no .... what i mean there is form the user have to enter all the information but when it com to this question which it asked if he need to add other information ..the user must select yes or no ..if he don't select massage will appear to alert him that he cant submit the form without selecting yes or no...

It wasn't clear the first time.

<html>
<head>
<script type="text/javascript">
function check()
{
	var o = document.getElementById('addyes');
	var t = document.getElementById('addno');
	
	if ( (o.checked == false ) && (t.checked == false ) )
	{

		alert('You must select whether you want additional drivers.');
		document.getElementById('additional').focus();
		return false;
	}
	else return true;
}
</script>
</head>
<body>

<p>Answer Me:</p>
<form id="carinsurance">
<p>Do you want additional drivers: (please check a box)</p>
<input type="radio" name="browser" id="addyes" value="addyes">add YES<br />
<br />
<input type="radio" name="browser" id="addno" value="addno">add NO<br />
<br />

Additional: <input type="text" id="additional" size="20" />

<input type="button" onClick="check()" value="Submit" />
</form>

</body>
</html>

That's just the functionality, you can change what happens inside the conditional. =/

kanaku 60 Posting Whiz

Perhaps you wanted something like this:

<html>
<head>
<script type="text/javascript">
function check()
{
	var o = document.getElementById('addyes');
	var t = document.getElementById('addno');
	
	if ( (o.checked == false ) && (t.checked == false ) )
	{
		var ask = confirm("Would you like to add drivers?");
		
		//if user clicked ok
		if(ask)
		{
		// do something
		document.getElementById('additional').focus();
		return false;
		}
		
		else
		{
		alert("Ok. Suit yourself.");
		}
	}
	return true;
}
</script>
</head>
<body>

<p>Answer Me:</p>
<form id="carinsurance">
<input type="radio" name="browser" id="addyes" value="addyes">add YES<br />
<input type="radio" name="browser" id="addno" value="addno">add NO<br />
<br />

Additional: <input type="text" id="additional" size="20" />

<input type="button" onClick="check()" value="GO" />
</form>

</body>
</html>
kanaku 60 Posting Whiz

Try xampp if you want a quick install of php.

... I second the motion!

Installing php and apache separately might not be convenient for beginners. =)

kanaku 60 Posting Whiz

How did you install PHP? Did you download a package (like XAMPP or EasyPHP) or did you just download the latest version of PHP?

kanaku 60 Posting Whiz

Sadly, no. I just tried right now...

The only Javascript events that apply to the option elements are
1. onFocus (you have to click on it --- since your option tags open the page upon clicking, we can't use this)
2. onBlur (when you 'remove' or 'exit' from focus --- not that useful in this case either

The onChange applies to the <select> element itself... eep... eep eep... I'm stumped.

Yes, that's what I used when I created our pages but I want to show the link of the selected list onMouseover.

The only thing I can think of right now is the title. Why is the title attribute not working for you..?

If you want to have more control over the list, maybe you change it from <option></option> to a normal list <ul><li></li></ul> instead? The list is more flexible, it will let you use that ericmeyer tutorial for the mouseOver, and let you use <a href=""></a> inside your tags for the instant redirection. You can still style the list with CSS such that it will look like the regular <select> you currently have.

Here is a sample code... don't try to dissect it. Copy and past it into notepad first and save as .html.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
			"http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>CSS trial</title>

<style type="text/css">
<!--

div#container
{
width: 500px;
margin: 0 auto;
}

div#links
{
position: absolute; top: 81px; left: 0; width: 166px; height: 700px; font: 10pt …
kanaku 60 Posting Whiz

Yes, that's what I meant. I've tried looking up in the internet but have not found anything yet.

Eep! Are you working with that tutorial or looking for something else? The link I gave you is also a tutorial for that effect.

kanaku 60 Posting Whiz

hehe... ok lang. =)

Link of the selected list...?

Do you want something like this? (Hover on the left menu.)

The tutorial for doing that is the same link. I'm not sure if IE supports it though... *goes to check*

Wow! It works!

kanaku 60 Posting Whiz

Try adding a title attribute to each option...

<select>
<option title="http://www.google.com">Google</option>
<option title="http://philippineonlinedirectory.com/aklan">Aklan</option>
</select>

Whatever's in between the title="" is shown when the mouse hovers the element.

kanaku 60 Posting Whiz

Ok. So have you used the $base_url? This will help you save time when transferring the site or when editing links...

Just define the constant in your header (or somewhere up there) then you can echo it anywhere in your document.

<?php
define ("BASE_URL", "http://www.central-forums.net");
?>
...
...
...

<p>This is <a href="<?php echo BASE_URL; ?>">a link to my homepage</a>. This is <a href="<?php echo BASE_URL;?>/forums">the forums</a>.

... and so on.

kanaku 60 Posting Whiz

When you're in the forums, the links are pointing to http://www.forums.central-forums.net/forums/ and http://www.forums.central-forums.net/about --- which is probably wrong!

Your homepage, however, is working now. Meaning the links are pointing to the proper places http://www.central-forums.net/forums and http://www.central-forums.net/about etc.

The code I gave you is correct. You have to double-check your pages (specially the topmenu in your forums) because you're still 'relative-linking' to the about, donate, forums pages on the url http://forums.central-forums.net.

<li><strong><a href="http://www.central-forums.net">Homepage</a></strong></li>
					<li><strong><a href="http://www.central-forums.net/forums">Forum</a></strong></li>
					<li><strong><a href="http://www.central-forums.net/about">About</a> </strong></li>
					<li><strong><a href="http://www.central-forums.net/donate">Donate</a></strong></li>
					<li><strong><a href="http://www.central-forums.net/contact">Contact </a></strong></li>

Copy and paste that code. When we've got the html working, I'll help you with the $base_url too.

kanaku 60 Posting Whiz

Why won't it work? Does it lead to a 404 error or does it not open at all?

<li><strong><a href="http://www.central-forums.net">Homepage</a></strong></li>
                [COLOR="Green"]<li><strong><a href="forums">Forum</a></strong></li>
                <li><strong><a href="about">About</a> </strong></li>
                <li><strong><a href="donate">Donate</a></strong></li>
                <li><strong><a href="contact">Contact </a></strong></li>[/COLOR]

These links should lead to pages at the very least. Something like forums.php or forums.html...
If you have directories in http://www.central-forums.net then they should have index.php or index.html for this kind of linking to work. The problem is when you're in a directory (say /forums/) the about link is linking to http://www.central-forums.net/

So I suggest that you do this instead:

<li><strong><a href="http://www.central-forums.net">Homepage</a></strong></li>
                <li><strong><a href="http://www.central-forums.net/forums">Forum</a></strong></li>
                <li><strong><a href="http://www.central-forums.net/about">About</a> </strong></li>
                <li><strong><a href="http://www.central-forums.net/donate">Donate</a></strong></li>
                <li><strong><a href="http://www.central-forums.net/contact">Contact </a></strong></li>

But that's tedious if you have many links! If you have a variable/constant for holding http://www.central-forums.net/ --- now is the time to use it. =)

<li><strong><a href="<?php echo $base_url;?>">Homepage</a></strong></li>
                <li><strong><a href="<?php echo $base_url;?>forums">Forum</a></strong></li>
                <li><strong><a href="<?php echo $base_url;?>about">About</a> </strong></li>
                <li><strong><a href="<?php echo $base_url;?>donate">Donate</a></strong></li>
                <li><strong><a href="<?php echo $base_url;?>contact">Contact </a></strong></li>
kanaku 60 Posting Whiz

There is something called 'case expressions' in MS SQL queries...

This article is a bit outdated but it still makes a lot of sense. Jump to the "A more complicated example" section to see how he does it.

kanaku 60 Posting Whiz

I was thinking you could do it by joining the table to itself. But then you have the problem of not knowing if the page you're looking up is in the 3rd or 4th level of 'childhood'.

Anyway, this is the article on joining tables and this is the article on joining a table to itself.

If you decide to work with joins, you'll end up with a query similar to this:

SELECT
 t1.filename AS file,
 t2.filename AS parent1,
 t3.filename AS parent2 FROM files AS t1
INNER JOIN
 files AS t2
 on t2.fileID = t1.parentID
INNER JOIN
 files AS t3
 on t3.fileID = t2.parentID
WHERE
 a1.fileID = 'the file you are looking for';

You'll get a table that looks like this:

FILE | PARENT1 | PARENT2
--------------------------------------------------------------------
corridor_data | bia_walden_point | alaska

*EDIT #2*
This query will work only if there are 2 parent folders... I don't know how to dynamically change the query depending on the level of the file... sorry.

kanaku 60 Posting Whiz

You don't have to reopen the php tags in a heredoc (heredoc is the EOT thing you're using).

So if $ad_row['url'] contains the url, you can just include it as you would any other variable in php:

// HOORAY! SUCCESS!
echo <<<EOT
window.location= "{$ad_row['url']}";
EOT;
destroy();
?>

The curly braces are for the array value.
My source for heredoc info is http://www.hudzilla.org/php/2_6_3.php.

(Tell me if this worked.)

kanaku 60 Posting Whiz

Eep. I think that javascript is the only way to go.

PHP is (I don't know the formal term) but it only works when you 'submit' or 'send' the data. From experience, it's Javascript that handles browser events like onMouseOut, onChange, onClick, etc... (AJAX is still Javascript + PHP) so you're really going to need javascript.

Can you tell us why you can't use javascript? So we can think of a workaround.

(A question for the more informed people... can she use DHTML instead? Or does DHTML also use javascript?)