kanaku 60

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

[quote] clear: both [/quote]
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 [icode]clear[/icode] attribute to them specifies that [i]a certain side[/i] of that floated div shouldn't have [i]certain floated elements[/i] beside it:

[code]

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

[/code]

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

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

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

[quote]when it is just margin without left or right[/quote]
The [icode]margin[/icode] property is a shorthand for the top, right, bottom, left margin properties. It can take a maximum of four values:
[code]
margin: 1.0em 2.0em 3.0em 4.0em;
[/code]

Is like saying:
[code]
margin-top: 1.0em;
margin-right: 2.0em;
margin-bottom: 3.0em;
margin-left: 4.0em;
[/code]
... but it's shorter. =) ...

kanaku 60

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 [icode]text-decoration: underline[/icode] in the a: tags BUT when it comes to rendering, the final say comes from this line of code in your html:

[code]<a href="http://www.yahoo.com" [B][COLOR="Green"]style="text-decoration:none"[/COLOR][/B]>:: HENRY'S ::
[/code]

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

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

I'm not sure if you'll like this, but a [icode]display: table-cell;[/icode] 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:

[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

UFO does not mean ET .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;} [COLOR="Green"]#uppertext { display: table-cell; }[/COLOR]
"UFO" does not mean "ET"
[COLOR="Green"][/COLOR]

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:

THE CONFUSED WORDWHAT IT REALLY MEANSTHE ERRONEOUS USETHE CORRECT WORD TO USE PodiumThe box an orator stands on
(It elevates him higher.)The stand in front of an oratorLectern or pulpit TheoryA proposal about how things happen
(Not proved.)Something that is scientifically ...

kanaku 60

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

kanaku 60

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.
[code]

.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;} Prompt for input 1 Prompt for input 2 Yes No Prompt for input 3 Prompt for input 4 Prompt for input 5 Yes No Prompt for input 6 Prompt ...

kanaku 60

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   by setting each label and input to display as a [icode]block or inline-block[/icode] and assigning a padding and margin for them.

Or save this [I]caveman-CSS[/I] I whipped up for ya and preview it:
[code]
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;
}
[/code]

Here is a very-short html code to match
[CODE]

FORM Field1 Field2 Textfield Dropdown1234


[/code]

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

kanaku 60

Hallu again rajeesh! SkyVValker had the same problem about limiting the display. [URL="http://www.daniweb.com/forums/thread165863.html"]His question was already answered here[/URL] by DiGSGRL. :)

kanaku 60

Oh ok. sorry about that... I didn't notice the 'coming out' effect. Here's the code for it:
[code]
body
{
background: #FFF url('logo.png') no-repeat [COLOR="Green"]150% -125px[/COLOR];
}
[/code]
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 a negative %. ...

kanaku 60

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

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

Here's the CSS code for it:
[code]
body
{
background-image: url(image.gif);
background-position: top right;
background-repeat: no-repeat;
}
[/code]

OR a shorthand version
[code]
body
{
background: #FFFFFF url(image.gif) no-repeat top right;
}
[/code]

xander85 commented: Great resource! You are appreciated! +2

kanaku 60

[URL="http://www.peters1.dk/webtools/javascript/slideshow.php?sprog=en"]Try this link.[/URL]

It's a copy-paste tutorial. :D

kanaku 60

Use a dynamic and static salt combination?
[URL="http://codeigniter.com/blog/P5/"]Article from codeigniter -- but the concept is the same.[/URL]

kanaku 60

Here is how to check if an input field is empty (javascript code):
[code]
var email = document.getElementById('[COLOR="Red"]email[/COLOR]').value;

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

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

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 [icode]getElementsByName[/icode] method. Here is a demo using checkboxes and radio buttons.
[code]

function check() { [COLOR="Green"]var group1 = document.getElementsByName('interests'); //assigns 'interests' checkboxes to group1 -- it becomes an array var checkedbox = false;[/COLOR] [COLOR="Green"]var group2 = document.getElementsByName('gender'); // assigns 'gender' radio buttons to group2 var checkedbutton = false; [/COLOR] [COLOR="Red"]for (i=0; i

kanaku 60

[quote]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...[/quote]
It wasn't clear the first time.

[code]

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; }

Answer Me:

Do you want additional drivers: (please check a box)

add YES

add NO

Additional:

[/code]

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

kanaku 60

Perhaps you wanted something like this:
[code]

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; }

Answer Me:

add YES
add NO

Additional:

[/code]

kanaku 60

[quote]
Try xampp if you want a quick install of php.
[/quote]

... I second the motion!

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

kanaku 60

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

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

The only Javascript events that apply to the [icode]option[/icode] 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 [icode][/icode] element itself... eep... eep eep... I'm stumped.

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

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 [icode][/icode] to a normal list [icode]

[/icode] instead? The list is more flexible, it will let you use that ericmeyer tutorial for the mouseOver, and let you use [icode][/icode] inside your tags for the instant redirection. You can still style the list with CSS such that it will look like the regular [icode][/icode] 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.
[code]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">

CSS trial

kanaku 60

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

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

hehe... ok lang. =)

Link of the selected list...?

Do you want [URL="http://meyerweb.com/eric/css/edge/popups/demo.html"]something like this[/URL]? (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

Try adding a title attribute to each option...
[code]

Google Aklan

[/code]

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

kanaku 60

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.
[code]
[COLOR="Green"]<?php
define ("BASE_URL", "http://www.central-forums.net");
?>[/COLOR]
...
...
...

This is

kanaku 60

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

[URL="http://www.central-forums.net"]Your homepage, [/URL]however, is working now. Meaning the links are pointing to the proper places [icode]http://www.central-forums.net/forums[/icode] and [icode]http://www.central-forums.net/about[/icode] 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 [url]http://forums.central-forums.net[/url].

[code]

  • Homepage
                    <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>

    [/code]

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

  • kanaku 60

    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

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

    [URL="http://www.craigsmullins.com/ssu_0899.htm"]This article is a bit outdated[/URL] but it still makes a lot of sense. Jump to the "A more complicated example" section to see how he does it.

    kanaku 60

    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, [URL="http://www.keithjbrown.co.uk/vworks/mysql/mysql_p5.php"]this is the article on joining tables[/URL] and this is the [URL="http://www.keithjbrown.co.uk/vworks/mysql/mysql_p8.php"]article on joining a table to itself[/URL].

    If you decide to work with joins, you'll end up with a query similar to this:
    [code]
    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';
    [/code]

    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

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

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

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

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

    (Tell me if this worked.)

    kanaku 60

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