Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Wickham

Privileged
  • Joined

  • Last visited

Everything posted by Wickham

  1. Edit like this:- #nav ul ul { position: absolute; top: 30px; width: 276px; visibility: hidden; } #nav ul li li { float: left; width: 90px; } /*new style added to bottom of nav styles in head section style tag*/ This works in Firefox but you need to add a doctype to get it to work in IE. Add this right at the top of your code, before the <html> tag:- <!doctype html> The 276px width is the width of three sub-level li tags plus borders (and padding and margins if you have them). If you have any more problems, consider a menu like this and edit it:- http://www.cssplay.co.uk/menus/dd_valid_2.html'>http://www.cssplay.co.uk/menus/dd_valid_2.html or one of the other dropline menus on http://www.cssplay.co.uk/menus/
  2. I don't worry about specificity much, it hardly ever happens and if it does I hunt for the problem. HTMLDog says It may not seem like something that important, and in most cases you won't come across any conflicts at all, but the larger and more complex your CSS files become, or the more CSS files you start to juggle with, the greater likelihood there is of conflicts turning up. If the selectors are the same then the latest one will always take precedence. Basically, it's the level of importance, not the order of importance, so div p { color: red; } p { color: blue; } The color in a div p tag will be red even though the color blue is coded and processed last because the div p {} has a greater importance as it's more precisely defined.
  3. Domain Name: BIZZTEAMS.COM Registrant: N/A Andrey (dilgi.uss@gmail.com) Yavorskaya st. 142 Yoshkar Ola Mariy El - Respublika,120001 RU Tel. +7.9105231912 Creation Date: 25-Oct-2010 Expiration Date: 25-Oct-2012 Domain servers in listed order: sky.earth.orderbox-dns.com sky.mars.orderbox-dns.com sky.mercury.orderbox-dns.com sky.venus.orderbox-dns.com
  4. On second thoughts, I suppose br and span won't work because they break the inline content, so the column gets narrower. It's possible that a javascript code might work to identify all the text heights and equalise them by adjusting widths, but my javascript isn't good enough. Normal javascript code just identifies the highest column and makes the others the same height.
  5. First, edit your stylesheet id from #content-right to #content_right to match the markup and it will stay on the right. Secondly, add form { clear: both; } to the bottom of the stylesheet and the text beginning "First, we'd like to thank you..." will stay where it should. I do'nt know why you are using a form as there's no action and no submit, but adding the code above works to stop the box going over to the right.
  6. I don't think it's possible to adjust width according to text content, but it is possible to make all columns the same height for backgrounds, but then some will have less height of text than others inside those columns. If tables do what you want, carry on using tables, it's not illegal, though it is generally recommended not to use tables for page structure but in this case you probably have no option. You will have to use several <p> tags or <br> to create space between sections of text instead of using several divs in the <td> tags or possibly span tags with display: block; margin-top: ??px; to avoid using several <br> tags in any single place. It's not good practice to use divs inside <td> cells. You could have the same result by using divs with display: table code instead of tables but IE6 and IE7 don't process display: table.
  7. Wickham replied to skippers's topic in Frontend
    Mike's solution suggests not having the text in the mobile version coded first and uses javascript (not for the mobile version - I think some mobiles don't process javascript - but for the desktop version to load the text, which is OK), except that some people have javascript disabled, so you would need a noscript in the desktop code to tell them some text is hidden. I suppose this means:- Original code for mobile - no text Desktop @media code - brings in javascript/Ajax with text noscript - this would have to be in the original code for the mobile but in a hidden class in a @media breakpoint for the mobile as it can't be it the javascript text as that won't show to a desktop user with javascript disabled, but it's only a few words extra to download in the mobile version. Am I correct?
  8. ul#ddmenu li {}/*all li levels;*/ ul#ddmenu li li {float: left; width: ??px;} /*sub level which will be processed after the previous style and supersede it*/ Add the float to the parent li too, if you want those side by side. You might have to add display: inline; in addition to float: left; but it isn't usually necessary.
  9. The style ul#ddmenu li will style parent and sub levels unless you add a later style only for the sub-level:- ul#ddmenu li {}/*all li levels*/ ul#ddmenu li li {} /*sub level which will be processed after the previous style and supersede it*/
  10. Good point but I don't think it makes any difference in this case whether you use .inc or .php for the "include" file as he only wants to repeat delivery options or warranty text which will show in the source file of the main pages after the include file is processed and inserted. It would matter if you wanted to process something like checking a password in the include file, which should then be .php
  11. I think .net should be reserved for internet/computer/software/web design/tutorial related sites.
  12. You may find teh php.net page difficult to understand if you are a beginner. Simply, Open up Notepad or a text editor (not Word) and cut the code that repeats in every page completely (as much or as little as you want, without doctype, html, head or body tags) and paste it into Notepad and save as an "include" file called menu.inc in the same folder as the main pages. You then have only one file to edit if the menu changes. Substitute the code you have cut out with PHP code <?php include ("menu.inc"); ?> in the main file and save it with .php filename extension instead of .html or .htm. [Most important] Do the same with other main pages where the menu repeats and name them with .php extension. Put the .inc "include" file in the same folder/directory as the main files. You can have several "include" files inserted in a page, just edit the filename and save separately.
  13. Wickham replied to skippers's topic in Frontend
    You can use display: none; or visibility: hidden; for a class and apply it to an image or any other element and set the class in the @media query for that break point.
  14. Do you mean a dropline menu like this? http://www.cssplay.co.uk/menus/dd_valid_2.html'>http://www.cssplay.co.uk/menus/dd_valid_2.html Have a look at others here http://www.cssplay.co.uk/menus/ but I don't think you can combine a dropline menu with breadcrumbs.
  15. You have at least one double margin bug (IE6 doubles a margin on the same side as a float; ie margin-left; float: left; or margin-right; float: right;) so halve the margin only on the same side as a float in your IE6 stylesheet, for instance you have one in:- #search a#cat-button{.....float:left;.....margin-left:8px;..........} which probably increases the total width to beyond the width of a parent so the div drops down. There may be other instances.
  16. Using your index2.html codes, just delete position: absolute; from the #footer style and the footer will always be below the content. If you want a "sticky footer" that sticks to the bottom of the window if there's little content above, but stays below content if the content uses all the page height so you scroll to see the footer, use http://www.cssstickyfooter.com/using-sticky-footer-code.html
  17. Wickham replied to chris_p's topic in Frontend
    I used to have that problem when I tried to code drop down menus myself. In older IE (not IE9) there is a small space between the top level and the drop down level and when the mouse passes over the gap it loses its connection. I found it very hard to cure. Basically, get rid of all top and bottom margins and padding in your dropdown styles at first. The result will look terrible but add back padding one at a time until it breaks again. You may also have to set the line-height the same as the font size at first and gradually increase that. Another trick is to code a 1px negative top margin to the drop down level to drag it up a little. It might be because you need the top and bottom padding on the ul.dropdown ul or ul.dropdown ul li style instead of the ul.dropdown a style. I get round the problem now by using a menu from cssplay http://www.cssplay.co.uk/menus/ and editing it.
  18. Remember the King of Tonga? HUGE. Too much of some carbohydrate diet, is it Soya? They make good rugby players, though. http://nymag.com/nymetro/news/people/columns/intelligencer/11276/ And their diet? SPRING: Fipi. Fipi? F-I-P-I. It’s the name for mutton flaps. These things are caked in a layer of fat. OVERTON: It’s something that we would maybe eat once. SPRING: It’s a sign of status to get a lot of food. For royalty, if they can’t stand up, that’s good. OVERTON: [The local farmers] grow food to sell so they can buy the greasy American food
  19. Kenya for me - just like all those healthy athletic Olympic runners (I used to go Hashing (a heavy-drinking club which went cross-country running to build up a thirst) but I haven't done that for years. The effect must have lasted.
  20. If you code your background-image to the body style with top center it will stay centered in any resolution, but get cut off equally both sides. If you want it to fit the width of any resolution you can use background-size: cover; as these tutorials http://www.standardista.com/css3/css3-background-properties/ http://www.w3.org/TR/css3-background/#the-background-size but that will only work in modern browsers that support the new CSS3 property. It may be better to use position: fixed; left: 0; right: 0; z-index: -1; to tie the image to both sides of the window (no height so that the height remains proportional) and this image would be a img src image the first item in the body section, not a background-image. This will work in older browsers. See http://www.wickham43.net/backgroundfullwidthflexible.html Then code a page wrapper with position: relative; width:??px; margin: 0 auto; and the page wrapper will show in the middle of a larger window with equal margins both sides.
  21. Get rid of the iestyles.css and the conditional comment for NOT IE and just have one stylesheet link:- Delete these:- <!--[if IE]> <link rel="stylesheet" type="text/css" href="iestylesforprofile.css"> <![endif]--> <![if !IE]> <link rel="stylesheet" type="text/css" href="profileb.css"> <![endif] and add in one stylesheet link so the head section looks like this:- <head> <link rel="stylesheet" type="text/css" href="profileb.css"> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <meta name="generator" content="Adobe GoLive"> <title>PJMay Design - Profile</title> </head> Then both IE and other browsers should look the same, and you can make other edits which should affect all browsers equally. IE conditional comments should only be used as a last resort and only for one or two different styles, not a complete replication. I expect your problem was because you had different styles in the two stylesheets. Your first post had iestyles.css in the IE conditional comment but your online page has a link to iestylesforprofile.css so perhaps you were editing the wrong IE stylesheet.
  22. You haven't coded a height for #profile and the #profile_image inside has height: 320px; It's difficult to help you because we haven't got the images. It helps to see your page online where we can download all your files for testing, including images and css files and then you tell us exactly which div or image needs to move where. You really need to use an online tutorial like http://htmldog.com/guides/ and learn the basics.
  23. You could just use a chat box plugin http://www.cbox.ws/ to show in part of your page. You could update this from the webpage (restricted to admin only) and the update would show immediately. (I think previous entries could be shown or deleted according to settings applied by restricting to one chat entry).
  24. Here's a tutorial for the PHP If and Get that Glowbridge decribed. http://www.wickham43.net/showform.php#phpnewsbox You can just see that the News Box does expand when you click the Football link - it blocks another line of text on its left as it increases in height so the box is in effect expanding as more content is displayed inside it.
  25. There are too many problems with your coding to know where to start; perhaps you should start by checking in this validator http://validator.w3.org/ and try to correct those first. Then spell absolute; not aboslute; in your iestyles.css file which changes the position of the div a lot. You have the wrong code for the IE conditional comment, it should be <!--[if IE]>....<![endif]--> but the NOT IE conditional comment code is correct. http://www.javascriptkit.com/howto/cc2.shtml However, you shouldn't need these, just use one css file without any conditional comment. If you really do need a conditional comment for IE, code the css file without a conditional comment for other browsers first, then add the IE conditional comment after it which will only hold a few styles that are different, not a complete set of styles. Try to avoid mixing position: absolute with position: relative. Try to avoid negative margins as the browser will move the element but leave a space where it would have been.

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.