Wickham
-
Posts
1,114 -
Joined
-
Last visited
-
Days Won
5
Content Type
Profiles
Forums
Events
Downloads
Gallery
Store
Posts posted by Wickham
-
-
The code in your post has 32 li tags all coded side by side. It will be impossible to fit them all side by side.
You need to restrict the number (as you have done in the page in your link) or use a dropdown menu.
You say you want to combine the menu with the header, but the header image has lots of dark colors so it won't be easy to show text over it.
Your header image is shown in the code in your post as image%202/TCIlogo2.jpg where the %20 indicates that you have a space in the folder/directory name which is a bad thing. Use a - or _ to fill spaces.
A previous thread showed how to make a background-image for the menu links. Your online page at present has a h5 tag with the header image inside, followed by the menu links which isn't the way to code it.
-
Expand/contract or show/hide paragraphs are coded with javascript or jQuery.
Google the above terms.
-
Why are you going back from HTML5 to HTML4?
I realise that the new tags like <header> <aside> <article> <section> cannot be styled in IE because it doesn't recognise the new tags. However, a bit of javascript will add these new tags to the DOM treee so that you can style them with normal (old) attributes like width, height, margin, background, etc. but the javascript won't make new tags like <video> or <canvas> process, so as long as you only want to use the new tags with styling, use this javascript in the head section:-
<!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
It only applies to IE but recent versions of Firefox, Safari, Chrome and Opera already accept styles for most new tags. If you open the link in Notebook you will see which tags are covered.
See also http://blancer.com/tutorials/wp/15301/10-ways-to-make-internet-explorer-act-like-a-modern-browser/
-
It does sound as if it's not a problem with your computer or your coding of the path to the css file because it all works on all browsers eventually.
That points to your hosting service or ISP (I don't know which) because someone may be caching instead of sending the latest file.
The usual test method is to use CTRL+ refresh which should download without looking for a cached version.
Your viewers may not notice a problem if they are downloading the page for the first time, or loading it again after a long period.
-
Don't forget to ad a doctype to the top of your html file code. HTML 4.01 Strict or Transitional would probably suit your page, from here:-
-
I don't normally code menus with display: table for the ul tag and display: table-cell for the li tag but if it works, leave the general styles and edit only the conditional comment for IE. The float: left; for the li tag is correct, so I suggest editing the ul tag (there are two conflicting styles at present):-
<!--[if IE]> <style type="text/css"> #nav ul {display: block; /*display:inline-block;*/} /*#nav ul {display:inline;}*/ #nav ul li {float:left;} #nav {text-align:center;} </style> <![endif]-->Edit: my post is the same time as Ben's and we basically say the same thing, but he suggests editing the general styles instead.
-
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
This is my link to the css page, i copied and pasted it from somewhere else since its one of those things you can copy without it being a copy of someone else's website...
That's correct and should work, but check that it's all lower case in the filename as servers are case sensitive.
Since your all saying some browsers dont work great with html 5 and css 3, do you think they will have updates that will synchronize them together in order to all work with it?
IE9 is still being developed and the other main browsers are virtually OK now. There will of course be newer versions.
Also, does anyone know what Opera uses? On the tutorial i was watching, it refered to
-moz-linear-gradient(
and
-webkit-gradient(
, but does Opera fit into either of these? It is the best browser in my opinion, but i see a lot of online games have trouble with it, and im guessing its through things like this...
Opera uses -o- but I haven't come across a situation where it's needed yet. -khtml- is for Konqueror. The prefix codes should all be in the style first and the standard code last so that if a browser doesn't need the prefix it will process the last style which is the standard, like
-moz-box-shadow: 7px 7px 5px #888888 ; -webkit-box-shadow: 7px 7px 5px #888888; -khtml-box-shadow: 7px 7px 5px #888888; box-shadow: 7px 7px 5px #888888;
As I understand it, the prefixes are just a temporary solution until HTML5 and CSS3 are officially released (as there may still be some changes to the standards) and the browsers can finalise their processing.
Wickham, that website was highly useful, it has shown me that my version of internet explorer doesn't support any of the CSS3 styles, so i guess i am currently downloading the IE9 beta to test this out
Remember that you are coding for other users who may have old versions of IE. Have you tested the javascript with IE6,7 or 8? I have. You get the styles and layout showing correctly but tags like multi-columns and video don't work. In other words the javascript makes IE process pre-HTML5/CSS3 styles for the new tags but not the new HTML5/CSS3 features inside the tags.
On another note, if i want a sidebar for the old html and css, what would i need to edit? The sidebar on Firefox isn't moving to the side like it is on other browsers, so i guess its from the HTML 5 and CSS3 update. All i want this sidebar to do at the moment is move to the right hand side of my text.
My current html code is:<aside> Sidebar </aside>
And my css is:
aside { float: left; width: 200px; background: blue; }Please note, i was practicing the new HTML coding here at first, thats why this is so basic, i understand this makes for a terrible sidebar
Thanks a lot,
Danny
That's correct. You style aside {...} and code <aside>..........</aside> in the markup, but you must then use the javascript for IE or IE won't show the styles and the layout etc. will be wrecked. Remember to use the new doctype <!DOCTYPE html> not a doctype for HTML 4.01 or XHTML 1.0. It does work in Firefox for me.
-
A very useful first post. Congratulations.
I must try items 1 and 2.
-
With modern browsers you can use position: fixed; top: 0; in the header style and the header won't scroll. You need a background for the header to hide lower content scrolling behind it.
IE6 doesn't process position: fixed, so the header will scroll, but if you want a solution for IE6 then there is a complicated wrapper method shown here:-
http://www.wickham43.net/headerfooterfixexample.php
which uses position: absolute for older browsers with body height: 100% and overflow: hidden for the html style so that the position: absolute header doesn't scroll up and a separate stylesheet in a conditional comment just for IE6 which emulates position: fixed in IE6.
-
3. Internet explorer:
This doesn't seem to even notice there is an external css sheet involved,
IE does support a stylesheet, so post your code as you must have made an error.
Re HTML5/CSS3 have a look at browser support, which is pretty good in Firefox, Safari, Chrome, Opera and IE9 beta:-
http://www.findmebyip.com/litmus/
There is a javascript to make earlier versions of IE process the new tags like <header> and <aside> and <video> if you add in teh conditional comment shown here:-
http://blancer.com/tutorials/wp/15301/10-ways-to-make-internet-explorer-act-like-a-modern-browser/
<!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
All the above means that html5/css3 can be used to a very great extent even though HTML5 and CSS3 are still in the development stage. However, the javascript file, as far as I can see, merely allows the new tags to be styled, ie background, size, font, etc. but doesn't allow the new processing that is required for some of the new tags like <video> that require special processing, but there are other ways to make earlier versions of IE process the new features (the object and embed tags for audio and video).
-
It sounds as if you are using a normal html image with the <img... > tag if the text is going below it. For a background-image you need to use
body { background: url(image.jpg) fixed top center no-repeat; }Put the above in a stylesheet or inside head section style tags <style type="text/css">........</style> and it shound cover the body background and then your html markup will show on top of it.
-
1
-
-
The quickest thing to do to make the menu 1050px wide is this:-
#menu{ font-family: arial, sans-serif; line-height: 1.3; color: #000000; font-size: 11px; font-weight: normal; padding:0; margin: 0 auto; /*was margin: 0; the auto will center it in windows over 1050px wide*/ width: 1050px; } #menu ul{ padding:0; margin:0; } #menu li{ width: 131.25px; position: relative; float: left; list-style: none; margin: 0; padding:0; }You have 8 menu tabs (three have no text yet) so 1050 / 8 = 131.25px so use 131.25px. Some browsers will process decimal places, some will use 131px which will mean 2px spare at the right end which you probably won't notice.
-
First, you should check your errors here:-
It shows 9 errors.
After the <body> tag you have a style tag so move all the style tag up so that it's just before the </head> closing tag.
You have three </span> tags at the end of teh <h5> tag when there should only be one.
Do you want the navbar to be over your header image? If so, the new header image should not have so many colors or you won't be able to read teh link text.
You will need to make the new header image a background-image for the h5 style:-
h5 { background: url(images/tsciHeader1.jpeg.jpg) fixed top left no-repeat; }and edit the h5 html markup to delete the img tag:-
<h5 class="style3"><span class="style4"> <a href="index.html">HOME</a> | <a href="2ColumChefDiplomaCourse.html">CHEF DIPLOMA COURSE</a> | <a href="metropolisTokyo.html">METROPOLIS TOKYO</a> | <a href="location.html">LOCATION</a> | <a href="inquire.html"> INQUIRE </a></span></h5>
You now have both style3 and style4 applicable to the h5 tag so you may need to edit this.
Is the filename tsciHeader1.jpeg.jpg correct? Normally the extension is either .jpeg or .jpg, not both (both are the same) but it could be that your file name is tsciHeader1.jpeg and the extension is .jpg in which case it would be correct.
-
Are you talking about a board that only advanced members can post and read?
Stefan
Yes, we had that before, I think it was in the version made by Ben, or perhaps the one before that.
A board restricted to advanced members had its uses from time to time.
-
Did anyone ever use the chat facility? I can't find it now, but the few times I looked, no one was online.
With the old format there was a board for Advanced users where we could post privately, perhaps about other users. I know I'm not a moderator and perhaps there is a separate board for Stefan and Ben, but would you consider resurrecting that?
-
I think Susie is talking about the "Sold" sign which is part of the site's background image.
Believe or not, I never saw the Sold sign at all!! It;s 4000*481px. My screen resolution is 1024*768 and I only see a pale blue background with the grass at the bottom.
That shows why I and Eddie think it should be a separate image which you can position releative to teh content in any resolution.
-
If each title is the title of a house and some are sold, some not sold, why not have a small icon on the left of the Title text inside the H tag. Add it in when a property is sold.
-
Place this code immediately after <style type="text/css"> :-
body { font-family: arial, sans-serif; line-height: 1.3; color: #000000; font-size: 12px; font-weight: normal; }with a color of your choice (#00000 is black) and change the font-size to what you want.
If you only want the font to apply to the menu, change body to #menu
-
That's still not right. You should have something like:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta name="keywords" content="Wickham"> <meta name="description" content="Test items"> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Test</title> <style type="text/css"> #menu{ padding:0; margin:0; } #menu ul{ padding:0; margin:0; } #menu li{ position: relative; float: left; list-style: none; margin: 0; padding:0; } #menu li a{ width:100px; height: 30px; display: block; text-decoration:none; text-align: center; line-height: 30px; background-color: black; color: white; } #menu li a:hover{ background-color: red; } #menu ul ul{ position: absolute; top: 30px; visibility: hidden; } </style> </head> <body> <div id="menu"> <ul> <li><a href="#nogo">Link 1</a> <ul> <li><a href="#nogo">Link 1-1</a></li> <li><a href="#nogo">Link 1-2</a></li> <li><a href="#nogo">Link 1-3</a></li> </ul> </li> <li><a href="#nogo">Link 2</a> <ul> <li><a href="#nogo">Link 2-1</a></li> <li><a href="#nogo">Link 2-2</a></li> <li><a href="#nogo">Link 2-3</a></li> </ul> </li> <li><a href="#nogo">Link 3</a> <ul> <li><a href="#nogo">Link 3-1</a></li> <li><a href="#nogo">Link 3-2</a></li> <li><a href="#nogo">Link 3-3</a></li> </ul> </li> </ul> </div> </body> </html> -
The first set of code should be in the page body section, but the second set beginning #menu{ padding:0; margin:0;} should be in a separate stylesheet or in head section style tags like
<style type="text/css"> (all the code here) </style>
Have you put it all in the body section?
If you want to choose a menu, there are lots at cssplay
-
Should these two lines be used in all webpages exactly as indicated.
Yes, lots of things can be put in the head section, or nearly none, but the title and the charset are essential.
Note that your doctype is incomplete, you need the url to w3.org
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
from here:-
http://www.w3.org/QA/2002/04/valid-dtd-list.html
Try to use the Strict doctype if possible; use the transitional if you get validation errors here http://validator.w3.org/ that may pass the transitional doctype, like target="..." and some deprecated tags.
-
border-radius is a CSS3 (new) feature which isn't supported by IE6, IE7 or IE8.
You can use corner images as item 8a or javascript as item 8b here:-
http://www.wickham43.net/specialeffects.php#roundedcorners
item 8c is the CSS3 border-radius.
Corner images work in all browsers but are more complicated to code.
Javascript corners are easy to code but won't work if javascript/ActiveX is disabled.
-
When Kyle says that HTML and XHTML are vastly different, I think he is referring to "pure" XHTML written with content="application/xhtml+xml in the meta tag. However, everyone using an XHTML doctype for normal websites uses content="text/html; (like this forum) which just results in the page being processed as HTML, so the only difference using a XHTML doctype is that you have to use the coding format like lower case names and closing tags with /> instead of > but the end result is the same.
So whether you use HTML 4.01 or XHTML 1.0, provided you use content="text/html; in the meta tag you will have the code processed as HTML.
It will get more complicated when HTML5 and XHTML2 are issued and also the compromise X/HTML5 which can be either HTML with content="text/html; or XHTML with content="application/xhtml+xml
Complicated ! We recommend using HTML 4.01 on this forum and when HTML5 becomes more widely used you won't have to change closing tags back from /> to >
-
I am correct in saying you could build a site without ID tags and just use Class tags right?
You could but, in addition to what virtual said, using id can help you with editing later. If you have only used id once on a page you can find it more quickly if you want to edit it, whereas looking for all instances where a class has been used can take time and you may miss some.
two div tags on one line?
in CSS
Posted
I can't see your website at the moment, the page is from your web host and says "You are seeing this page because the system administrator of 000webhost.com is currently checking this website for malicious content. This redirect page will be removed once we finish manually checking all files on this account."
To answer your query in general terms, to get divs side by side all of them must have float: left; or float: right.
It's often a good idea to put all the floated divs in a container which has overflow: hidden; or another method to clear the floats to stop lower content moving up into any available space below a floated div that has less content than others. It keeps lower content below the lowest floated div. There are other ways to do this.