Wickham
-
Posts
1,114 -
Joined
-
Last visited
-
Days Won
5
Content Type
Profiles
Forums
Events
Downloads
Gallery
Store
Posts posted by Wickham
-
-
The reason why I did that is because those were the instructions when applying the sticky footer. In addition to making the footer sticky, I also made the cartoon sticky so that he would always be standing on the line. Is there a way to make the cartoon always stand on the line and also keep the sticky footer?
I didn't notice that. Since you have .cartoon and #footer both position: fixed; they should be "out of the flow" and therefore you can have the #wrapper </div> tag before or after them.
Position: fixed items need top or bottom (you have coded bottom) and left or right, which are missing. Try adding left: 0; to the styles of .cartoon and #footer. It made a difference to IE7 in my test.
And delete background-repeat:no-repeat in #footer style
.cartoon { text-align: center; margin: 0px; padding: 0px; height: 511px; width:100%; margin:0 auto; position: fixed; bottom: 200px; left: 0; } #footer { /*background-repeat:no-repeat*/ width:100%; border-top-width: 3px; border-top-style: solid; border-right-style: none; border-bottom-style: none; border-left-style: none; border-top-color: #282828; border-right-color: #282828; border-bottom-color: #282828; border-left-color: #282828; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; height: 199px; background-image: url(img/homefootgrad.png); background-position:center; background-repeat: repeat-x; width:100%; height:200px; margin:0 auto; position: fixed; left: 0; bottom: 0px; }There are a lot of duplicated styles and irrelevant styles, but my IE7 looked like Firefox after adding left: 0; twice.
-
Your #wrapper div is closed before the content when I think it should be closed after everything else.
<div id="wrapper"> <!--</div> moved down--> <div class="cartoon"............ ................</object></div> </div> </div><!--moved down from top--> <script................
Check for errors here:-
-
I use Font Squirrel but my css file is different from your's. It has a strange character after the .eot format. The .eot format is for IE (I think) and the others after the strange character are for other browsers. I believe the strange character is important, but I don't know why. It obviously separates the styles into two sections.
@font-face { font-family: 'MatchbookMatchbook'; src: url('Matchbook-webfont.eot'); src: local('☺'), url('Matchbook-webfont.woff') format('woff'), url('Matchbook-webfont.ttf') format('truetype'), url('Matchbook-webfont.svg#webfontilT7vtqy') format('svg'); font-weight: normal; font-style: normal; } -
If you have any divs or other elements with position: absolute you will almost certainly need to add position: relative to the wrap div as position: absolute elements will be unaffected unless you do add it:-
<body> <div style="position: relative; margin: 0 auto; width: 900px;"> Note: set your width to whatever size your framework is. </div> </body>
-
There have been lots of comments that forms don't work on GoDaddy. They want you to use their own form mailer.
Have a look at
http://help.godaddy.com/article/512 (ASP - Windows hosting and webformmailer.asp)
http://help.godaddy.com/article/510 (PHP - Linux and webformmailer.php)
-
You will have to style the img html inside the PHP echo or print.
Put an id in the stylesheet for each image:-
#image1 { display: block; width: ??px; height: ??px; } #image2 { display: block; width: ??px; height: ??px; }and edit the PHP echo or print:-
print "<img id="image1" src='$uploadPath/my57chevy.gif' alt='My 57 Chevy' /> <img id="image2" src='$uploadPath/my57chevy.gif' alt='My 57 Chevy' /> \n";
which should place one image above the other as block elements are usually one above the other. If you want the images side by side, add float: left; to both styles. However, you may need additional styles to position the images more accurately, like margin or padding but we don't know how they are to fit in your page.
-
You can use this to analyze a web page (after you have nearly finished it):-
http://www.websiteoptimization.com/services/analyze/
However, it seems to be an old analyzer and gives comments which seem more directed at old dial-up when saying that the KB for images or some other part of a page are too high. I would say 150KB for a homepage but 400KB for other pages because if someone wants to move from a home page to a page with images they will probably expect a slower download.It's useful, though.
-
wanted to postpone the change-over for over two months
That's not very long, just wait, but perhaps when she says "over two months" she really means "wait for ever".
The Client is always right! "If it ain't broke, don't fix it".
As long as she's paid you, just move on to the next job.
-
Follow the instructions here:-
http://www.miltonbayer.com/font-face/
I meant that where my styles say
.matchbook { font: 24px/27px 'MatchbookMatchbook', arial, sans-serif; letter-spacing: 1px; }you have to change .matchbook to .Biography or .fancy or .glyph_range to match the class names in the html markup.
-
I've only had a quick look, but your Biography page hasn't got styles which have the @font-face styles for several formats and also the class to apply it. This is what I have for my font from Font Squirrel:-
@font-face { font-family: 'MatchbookMatchbook'; src: url('Matchbook-webfont.eot'); src: local('☺'), url('Matchbook-webfont.woff') format('woff'), url('Matchbook-webfont.ttf') format('truetype'), url('Matchbook-webfont.svg#webfontilT7vtqy') format('svg'); font-weight: normal; font-style: normal; } .matchbook { font: 24px/27px 'MatchbookMatchbook', arial, sans-serif; letter-spacing: 1px; }You need to do the same with your font and change the class to whatever matches the markup (Biography or fancy or glyph_range).
-
The coding looks correct provided both files are in the same folder. Make sure that there are no lower case/upper case differences.
Style.css is not the same as style.css
Check your file list and make sure that the css file has been saved as style.css and not as style.css.txt as sometimes the .txt is added automatically when it shouldn't be.
At the moment all you should see is the background color as the other styles have no code.
-
You could use position: fixed; bottom: 0; left: 0; right: 0; which will make the footer stick to the bottom and both sides (but not in IE6).
Or you can use the other type of sticky footer which seems to be more popular than the fixed method. Two similar codes here:-
-
If the image appears on the screen, then someone can download it. Print screen and right click copy can be disabled and may deter some viewers but experts will know how to get round those problems.
You can layer an empty transparent image over the original which may make it difficult for someone because they will download or copy the blank image, but an expert will also know how to get round this.
I have heard of a program which breaks up an image into thousands of small bits which are encrypted and then reassembled on the screen which stops copying, but I don't kbnow how effective it is.
-
You will need a ftp program to upload page code to your future hosting service. I made some notes here:-
http://www.wickham43.net/generaladvice.php#hosting
Your hosting service will probably allow you several email addresses. Look at Dataflame and start by looking at the basic package:-
http://www.dataflame.co.uk/linux_hosting_plans.php?lid=1
As a beginner you would use a shared package to minimise cost. Use a Linux package in case you want to code PHP in future (it doesn't matter whether you have a Windows OS or Linux on your computer, it's what the server uses that matters).
I use Dataflame, a better shared package, they seem reliable but don't just accept what I say without looking at other providers.
The price of the domain name won't change according to the success of your site, but the hosting service might need upgrading (but that is easy and probably some time in the future). You own the domain name for ever, as long as you keep paying for it, so your email addresses will stay the same even if you change host and/or ISP.
What is the best order in which to go about creating a website. I was considering drawing it on pen and paper, laying it out etc. Then purchasing the domain and hosting, designing, testing, then launch?
By all means sketch out the general arrangement with blocked colours, header, logo, menu, content (perhaps in columns) and footer. Then start coding. Dreamweaver is very expensive and using the automatic design view you won't learn anything, so try ordinary Notepad and code manually (don't use Word which carries special function swith certin characters) or use a better text editor like Notepad++ which you can download.
Look at http://www.w3schools.com/ Learn HTML (top left link).
Validate your code at http://validator.w3.org/
Away you go!
-
Error reporting can be turned off by adding this
// Turn off all error reporting error_reporting(0);
immediately after the opening <?PHP code. It's useful to omit this while testing your page but include it in the final page so viewers don't see any error reports, (if there are any remaining).
-
As Andrea says, the alt is not there as a tooltip. It's there to provide information if the image doesn't load. IE incorrectly displays a tooltip.
If you want a tooltip, use title="..." and you must keep the alt
<img src="image.jpg" alt="Image description" title="Image decription" />
-
Without seeing your code, I can't say why the images are spaced apart.
However, have a look at the HTML Email comments under "General advice regarding HTML emails" here:-
http://www.wickham43.net/formhtmlemail.php
Ignore the top of the page which is a PHP form to send emails.
Check your code against the comments. I hope that helps.
-
Ran into another snag. My relative links in my includes are not resolving correctly. Live on my hosts server simply begining the url with "/" works perfect (eg /img/test.jpg). But not so in Wamp.
This might possibly be due to the fact that I'm pointing wamp at my website files and they are not sitting in the wamp/www. directory. Possibly?
Relative links do work in Wamp or from any other local directory PROVIDED that they aren't root-relative links like you have. If a link is a normal relative link like image.jpg or images/image1.jpg then it works locally but if you start with a / like /image.jpg or /images/image1,jpg the browser goes to the root directory and works from there, which is probably C:\ on your computer with lots of subdirectories before you reach the www directory so the file isn't found. On your host's server the root directory is the first you use.
So if you use root-relative links, always test online.
Edit: I've never set up a virtual host to use Wamp (but I normally use normal relative links, not root-relative links).
-
If you only want to target IE6 without using a conditional comment, you can do that all in one main stylesheet read this:-
* html { } Only IE<7 (browsers less than IE7) understand this. The * html tells the CSS parser to look for any element (*) with a child <html> tag. Think about this. The <html> tag is the top level tag, so nothing has it as a child. You can follow this with any other selectors you want. Example: * html p { font-style: italic } means that all font in a <p> tag in IE6 or lower will be italic but not in IE7 or other browsers. Note that * { margin: 0; } or * h4 { margin: 0; } where the * is on its own or followed by anything except html will be operated by all browsers.
* html { font-size: 20px; } * html p { font-style: italic; } -
You can use % widths for every element including % for side margins and side padding, totalling 100%. Unfortunately borders can't be sized in % so leave them in px and make the total of other items 97% or 98%.
Code image widths in %
<img style="width: 25%;" src="image.jpg" alt="Image 1" />
If the image height isn't stated it will adjust in proportion.
If you try to combine % with min-width and max-width you will have a lot of trouble. Everything has to be % (except borders).
It's difficult to get it right for complicated pages as a small window 320px wide will squash everything up and a 1920px window will space it all out too wide.
Most people stick to min-width and max-width for a page container with margin: 0 auto to center it in larger window widths. At least one of the elements inside the page container should have no width stated so that its width is fluid.
-
-
Yes, my file has the lines closed up! It should be
// FORM PROCESSING CODE - USING 'SUPER GLOBALS' - KILLERPHP.COM
which is on two lines in my file but continuous, just breaking at the right side of a small window.
The above is copied from my Notepad file but usually when I copy into a forum post code tags (not just normal text like above) from Notepad it often splits lines with a line space and I try to close them up but missed that one (and possibly others) so not my fault - blame the forum or Notepad!
Sorry
-
Copy/paste my three files, don't try to edit your files because you will make a mistake, then change only the filenames and that should make them work.
In my first file talos110209.php edit the action=".." to action="form_response.php" and edit the query link near the bottom to
<a href="form_query.php?email=videos&name_first=stefan">Query String</a>
and rename the whole file talos_form.php
The second and third of my files only need renaming form_response.php and form_query.php
I remember that you typed name="favorite webite" as a form name and I edited that to name="favorite-website" and that also occurs as $website = $_POST['favorite-website']; in my talosresponse110209.php which is the processing page for the submit button, so is that what's causing the trouble if you still have favorite webite in one file? Line 28 in your form_response.php (my talosresponse110209.php) probably is the website name so it needs to agree with the form name="..." in the main page talos_form.php
You shouldn't need to edit any php settings.
-
I appreciate you letting me know about "@font-face" because I will be needing it for my "BIO" section. If I use an image map, can the word be found in google when searched?
What resolution do you recommend for me to use? 1200 x 1024 or 1024 x 768 ?
Thank you so much for you help...when I posted this late last night, I was feeling so hopeless. I spent all day in the computer lab at school researching and messing around in Dreamweaver. I was just about to give up, but then I thought it would be a good idea to post in the forum first. You have given me a new found hope to design my website!
Text on an image map cannot be seen by a search engine, that's why I said it's bad for SEO, but easy to do.
Edit: Google won't see TEXT on an image but should see LINK TEXT according to this
http://www.webmasterworld.com/forum34/456.htm Don't rely on an alt tag, use the title="..." inside the image map link
<area href="intro12.html" coords="113, 108, 158, 157" shape="rect" target="_top" title="link anchor text" alt="link anchor text"></a> although that may show the ugly yellow tooltip with black text in most browsers.
@font-face is now supported by all major browsers and you would use the decorative image without the text as a body or div background and then use @font-face as hyperlinks in the normal way over the image, but it would be a bit more work and you have to find the font in several formats.
Resolution? Personally I would use a wrap div for the whole page content of 1000px to fit inside the vertical scrollbar of a 1024*768 resolution, and use the width: 1000px; margin: 0 auto; position: relative; to center it in wider widths. It is a matter of choice and depends on what resolution you think most of your viewers will have - old computers with 800px width or Mac computers or modern computers with 1440 or 1366px width?
This http://www.w3schools.com/browsers/browsers_display.asp shows 1024*768 getting less and less but I think many developers are still coding 1000px width because you don't know which higher resolution is most popular and a centered page can still look neat and easy to read without being so wide that your eye has to move over a wide area.
Creating a centered page with restricted dimensions.
in CSS
Posted
The 50% and negative margin method does work in IE6. The problem with it is that if you make the window smaller than the content, the content disappears up over the top where you can't scroll to see it (same if you use the method for centering width, the content goes off to the left where you can't scroll).
See http://www.wickham43.net/centerphotolink.php
So the method is useful if you have a small content width and height which is unlikely to exceed the window size.