Web design help - expect a lot of questions!

magpieant

Suspended / Banned
Messages
2,043
Edit My Images
No
Hi guys ....

First up, I have decided to re design my web site. Currently using Dreamweaver.

Trying to type something into a webpage and it will not let me go more than one space away from the previous character.

Eg. I want a home and a contat us link to look like this ..

HOME CONTACT US

But I can't get a big enough spece in between so it looks like this ...

HOME CONTACT US.

Any offers? Bet it's something simple.

Cheers

Anth.
 
Weird ..... even on here it has not left the space!!!

Should read

HOME.................CONTACT US
 
Try creating a table and place the text in the various cells.

Never used Dreamweaver though, so there may be other ways around this.
 
Insert this html the line where you want it between the body tags. Table width is your choice. alignment of tables and text here is center.

<table width="200" align="center">
<tr>
<td><div align="center">Home </div></td>
<td><div align="center">Contact Us</div></td>

</tr>
</table>

OR if the "contact us" is to be your email address then replace it with
<a href="mailto:youremailaddress@youremailaddress.com">Contact Us</a>
 
html treats [lots of spaces] as [one space]
unless you use &nbsp
that is all 5 characters

so for three spaces &nbsp&nbsp&nbsp

hth

(it stands for non-breaking space btw)
 
If using the &nbsp method remember to add the ; after the p otherwise it wont work.
 
Use css in a seperate file instead of adding lots of code in html, you will have greater control of how your webpages look and also your site will load faster.

html code:

<div class="menu">
<a href="index.html">Home</a>
<a href="contact.html">Contact Us</a>
</div>


css:

.menu {
width: 800px;
background: #999;
font-family: Arial, Helvetica, sans-serif;
}

.menu a{
color: #FFF;
text-decoration: none;
padding: 10px;
}

.menu a:hover{
background: #333;
color: #FF0000;
text-decoration: underline;
}

.menu - controls how the div will look, .menu a - controls how the link will look, .menu a:hover - controls how the link will look on mouseover. Notice I have added 10px of padding to .menu a, this will give you the space you wanted ;) try doing that with tables and you will see how bloated your html soon gets
 
OR if the "contact us" is to be your email address then replace it with

<a href="mailto:youremailaddress@youremailaddress.com ">Contact Us</a>

But then anyone like me who doesnt have an email client linked to there web browser will get an error and have no way to contact..

This is better
<a href="mailto:youremailaddress@youremailaddress.com ">youremailaddress@youremailaddress.com</a>

Then we can copy the email :)
 
A contact form with a captcha can be made up using two extra php files like so:

the html: add this to your contact page

<form method="post" action="sendmail.php">
<label for="name">Your Name</label><input id="name" name="name" type="text" ></input><br />
<label for="address">Address</label><textarea id="address" name="address" rows="2" cols="1" ></textarea><br />
<label for="country">Country</label><input id="country" name="country" type="text" ></input><br />
<label for="email">Your Email</label><input id="email" name="email" type="text"></input><br />
<label for="phone">Phone No.</label><input id="phone" name="phone" type="text"></input><br />
<label for="contact">Contact me by</label><select id="contact" name="contact"><option value="Email">Email</option><option value="Phone">Phone</option></select><br />
<label for="subject">Subject</label><input id="subject" name="subject" type="text"></input><br />
<label for="message">Message</label><textarea id="message" name="message" rows="5" cols="1"></textarea><br />
<div id="cap"><img src="captcha_image.php" alt="Cap" /></div>
<label for="captcha">Enter Code</label><input id="captcha" name="captcha" type="text"></input><br />
<div id="button"><input name="Send" type="submit" id="Send" value="Send"></input></div>
</form>

the mail php: create a file called 'sendmail.php' in your root and insert this code making the changes as needed.

<?
session_start();

if ($_POST["captcha"] == $_SESSION["pass"])
{

$mailuser = "enquiries@yourwebsite.com "; //put your email address here

$header = "Return-Path: ".$mailuser."\r\n";
$header .= "From: Website Enquiry <".$mailuser.">\r\n";
$header .= "Content-Type: text/html;";

$mail_body = '
Your Name: '. $_POST[name] . '<br>
Address: '. $_POST[address] . '<br>
Country: '. $_POST[country] . '<br>
Your Email: '. $_POST . '<br>
Phone: '. $_POST[phone] . '<br>
Contact: '. $_POST[contact] . '<br>
Subject: '. $_POST[subject] . '<br>
Message: '. $_POST[message] . '<br>'
;
mail ($mailuser, 'Form sent', $mail_body, $header);

//redirect to desired page
header("Location: http://yourwebsite.com/thanks.html"); //redirect to a page saying thanks for the message

} else {

header("Location: http://yourwebsite.com/wrongcode.html"); //redirect to a page saying wrong code entered

}
?>


[B]The captcha image generator: create a file called 'captcha_image.php' in your root and add this code:[/B]

<?

session_start();
header("Content-Type: image/jpeg");
die(create_image());
function create_image()
{
$md5 = md5(rand(0,9999));
$pass = substr($md5, 10, 5);

$_SESSION["pass"] = $pass;

$image = ImageCreatetruecolor(100, 21);

$clr_white = ImageColorAllocate($image, 255, 255, 255);
$clr_black = ImageColorAllocate($image, 150, 150, 150);
$clr_grey = ImageColorAllocate($image, 220, 220, 220);

imagefill($image, 0, 0, $clr_black);

imagefontheight(18);
imagefontwidth(18);

imagestring($image, 5, 30, 3, $pass, $clr_white);

imageline($image, 4, 1, 40, 20, $clr_grey);
imageline($image, 60, 1, 96, 20, $clr_grey);

return imagejpeg($image);

imagedestroy($image);
}
?>



You now have a securish lol contact form on your website, mailto: gets picked up very easy by spambots and your inbox will be filled with thousands of spam mails. Happens very quickly if your site becomes popular and people start linking to it
 
Add something like this to your css file to control how the form looks:


#form label {display:block; float:left; width:200px; margin-right:20px; text-align:right; margin-bottom:0.5em;}
#form input {border:1px solid #7F9DB9; background:#fff; width:220px; padding-left:2px; margin-bottom:0.6em;}
#form textarea {border:1px solid #7F9DB9; background:#fff; width:220px; padding-left:2px; margin-bottom:0.6em;}
#form select {border:1px solid #7F9DB9; background:#fff; width:224px; padding-left:2px; margin-bottom:0.6em;}
#cap {margin:5px 0px 10px 280px}
#button {margin-left:290px}
#button input{width:80px;}
 
Was'nt sure how to set this script up Wanderingmind but I like it better. Think I'll have a play around with it and see if I can get it to work. don't think my own isp has php script (free webspace) But I have access to another server that has it all.

Cheers
 
Hi guys ....

First up, I have decided to re design my web site. Currently using Dreamweaver.

Trying to type something into a webpage and it will not let me go more than one space away from the previous character.

Eg. I want a home and a contat us link to look like this ..

HOME CONTACT US

But I can't get a big enough spece in between so it looks like this ...

HOME CONTACT US.

Any offers? Bet it's something simple.

Cheers

Anth.


Sounds like you want a "Non Breaking Space". Its very quick and easy in Dreamweaver. Hold CTRL + Shift, and then press the space bar. Do it for as many consecutive spaces as you need. In HTML view it looks like this &nbsp; (in case the form breaks it: & n b s p ; ) remove the spaces from my example.
 
Was'nt sure how to set this script up Wanderingmind but I like it better. Think I'll have a play around with it and see if I can get it to work. don't think my own isp has php script (free webspace) But I have access to another server that has it all.

Cheers

Hey Frank,

Iv'e knocked up a quick demo so you can see it running, try entering the right code and it redirects to a thank you, try again with the wrong code entered:

http://www.wanderingmind.co.uk/contact.html

Iv'e also zipped up all the files I quickly wrote so you can download them and see how it all goes together :)
It will need to be uploaded to see the php part running, give it a try :)

http://www.wanderingmind.co.uk/form.zip
 
Note that it's a better practice to use
PHP:
<?php
// lots of php code
?>

instead of
PHP:
<?
// lots of php code
?>

as the latter might be deprecated in later versions of php (think v. 6 - soon to come, unless they've changed their mind... again).

The final
PHP:
?>
can be omitted if you use it in an script dragged in by include or require, but it's not a very good practice either.
 
Wow!

Lots of very very technical answers there!!! I'm not that advanced yet!

Anyway, I followed the example above using CTRL SHIFT and spacebar - and it worked to create the space i want. However, the 2 words now appear to have the same hyperlink - changing one seems to change the other too - any ideas ?

Cheers.

Anth
 
Either use Wandering minds method or use the table method I described, each cell can have it's own hyperlink. just copy /paste the table method or download the zip file he kindly put together for me .
 
Wow!

Lots of very very technical answers there!!! I'm not that advanced yet!

Anyway, I followed the example above using CTRL SHIFT and spacebar - and it worked to create the space i want. However, the 2 words now appear to have the same hyperlink - changing one seems to change the other too - any ideas ?

Cheers.

Anth


Sounds like the links are joined, the space is inside the </a> tag. Can you post a snippet of your html code?
 
Lots of very very technical answers there!!! I'm not that advanced yet!

Hope you don't mind if I make plea for you to try Wandering minds code

...it really is dead simple .. and will stop you getting loads and loads of junk mail ...and it looks professional.

I'm hoping this is more in laymans terms.. and its not intended to patronize.

In dreamweaver...make 2 new pages and name them exactly as hes suggested, (.php not .html) cut and paste his code into them ... save.

In dreamweaver...Stick the html form code above into your contacts page where you want it to appear (either use the table code above to hold...or (much better) use the css code ...save

If your using the css code you'll need to make another blank page in dreamweaver and name it stylecontact.css ...cut and paste the css code bit above in to it ...save

... also if using the css code insert this code between the meta and head tags at the top of the contactus.html page (or whatever you've called it)
<link rel="stylesheet" type="text/css" href="css/stylecontact.css" />
...this code calls the css to be used on that page...or any page where you insert it.

Then just upload all those saved pages to your root folder (usually the same place as your index page...usually the starting folder)

done.
 
Hey Frank,

Iv'e knocked up a quick demo so you can see it running, try entering the right code and it redirects to a thank you, try again with the wrong code entered:

http://www.wanderingmind.co.uk/contact.html

Iv'e also zipped up all the files I quickly wrote so you can download them and see how it all goes together :)
It will need to be uploaded to see the php part running, give it a try :)

http://www.wanderingmind.co.uk/form.zip

Thanks wanderingmind it works a treat.
 
Back
Top