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. Since the index.html file is in there, I expect that directory is the root directory, so create new sub-directories and upload files and see what happens. You can always delete them later if it's wrong.
  2. I'm not sure why she has a problem either. All she should need is the url for the ftp like ftp://www.your-domain.com/ or sometimes numbers like ftp://168.24.245.27:2093 and a username and password. There might be a warning about a certificate being out of date, which I usually ignore. Is the hosting service one of the major ones or a private hosting service? If you can access the server, does it have a control panel like cPanel? If so you could look for a menu for ftp access and see if you can set up another account with username and password.
  3. Are you using sprite images (combined images with the hover image above or below or at the side of the main image, like this one http://www.cssplay.c...nus/veg/veg.jpg )? from this menu http://www.cssplay.c...e_dropdown.html
  4. CSSplay menus are free for personal websites and some are free for commercial websites, (ask permission for commercial use and pay a small donation). Menus are designed for you to copy CSS and markup from the source code.
  5. CSSplay have lots of drop down menus, all pure CSS (no javascript) and here is one with dropdown and rollover images: http://www.cssplay.c...ropdown-v4.html or this one which has rollovers for the drop down tabs http://www.cssplay.co.uk/menus/image_dropdown.html and look for others in http://www.cssplay.co.uk/menus/ See if you can work out how they did it and use the code for your menu.
  6. Wickham replied to gcrest's topic in Frontend
    Yes, it is normal because all the pages have been visited, so they all have green links. You also have to remember that IE treats active differently from other browsers. Read up on using a:focus for use in other browsers as older versions IE6 IE7, don't process focus, they use active instead, although IE8 and above do process focus. http://reference.sit...eudoclass-focus
  7. Without seeing all your page and being able to download and test, it's difficult to say. Sometimes using padding instead of margin works, sometimes a top margin to the parent element helps; or even a larger line-height which will keep the text in the middle, therefore lowering it. It depends on how you want to do it.
  8. Wickham replied to CraigRyder's topic in Frontend
    The usual order for link styling is a:link, a:visited, a:hover, a:active (LoVe, HAte) and you have hover before visited so the visited will take priority over hover (after you have visited a page). Placing hover after link and visited means that hover will work whether the page is visited or not. There is some debate about where to place a:focus but you aren't using that style.
  9. Wickham replied to phabion's topic in Frontend
    Well done! I make sure I never duplicate styles, so I never come across that situation. If I use two or three classes, it's for different reasons, say one for font, one for position, one for background, etc.
  10. Wickham replied to phabion's topic in Frontend
    No, It's always true in the html markup whatever the order in the stylesheet. You could have .colmask after .threecol in the stylesheet and .threecol after colmask here in the markup and .threecol will take priority. You are thinking of two similar styles in the stylesheet for say .colmask covering the same style where the later one will take priority, so it's then important to consider the order in the stylesheet where the same style name is repeated.
  11. First of all, make the bottom negative margin equal to the push and footer heights. then clear the floats in the image conatiner which your images have created: .wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -30px;/*-4em;*/ } .productcontainer { overflow: hidden; /*added*/ padding:10px; margin-left: auto; margin-right: auto; width:750px; text-align:center } Also, but not connected to the above, validate your page. As you are using html 4.01 you need to remove the / when closing a tag <link rel="stylesheet" href="xtyles.css"> and you must have a title tag: <title>Your Page Title</title> Add an alt: <img src="images/logo.png" id="logo" alt="Logo">
  12. Wickham replied to phabion's topic in Frontend
    class="colmask threecol" is just applying two classes, colmask and threecol. You can have more than two. Styles for colmask will be overwritten if any similar styles are in threecol. You can't have two or more in an id.
  13. You don't need CS6, it's merely the way you code your CSS file, see http://www.html5rock...espeed=noscript
  14. PDf files can be set to prevent copying. I remember a government document which lots of us wanted to quote from, but it was protected. Lots complained and it was republished the same day with copy protection disabled.
  15. NO - you must use tables for html emails, (with inline styles, no CSS stylesheet and no head section style tags).
  16. Where you have styles like this:- #nav a:link,a:visited { #nav a:hover,a:active { } you must repeat the id or class:- #nav a:link, #nav a:visited { #nav a:hover, #nav a:active { } There may be other places where you need to do this, otherwise a simple a:active {} will apply everywhere. I can't see anything wrong with this background to a p tag, but check the path and case, the image filename should be in lower case: #logo p{ text-decoration: none; border: 0; margin: 0; padding: 0; height: 63px; width: 234px; background: url(images/logo.png) no-repeat 0 0; } You could try moving the width, height and background image to the #logo style instead of the #logo p style. I think the link won't work because you have pushed the "a" tag off left with -9999px. This may work:- <p><a href="index.html"><span>2ISFA labs</span></a></p> CSS: #logo a{ display: block; height: 63px; /*text-indent: -9999px;*/ } #logo a span{ display: block; height: 63px; text-indent: -9999px; } Edit: my comment about adding the span tag is unnecessary if you use text-indent, but is necessary if you use margin-left: -9999px for the "a" tag instead.
  17. Good point. One method is to put some text inside the "a" tag and set it with text-indent: -9999px; which will make it read in a screen reader but won't show over the menu background image. You may have to use display: block; for a span tag around the text link to make the text-indent work.
  18. IE10 and IE9 have developer tools that enable you to check IE8 and IE7. You can also use http://caniuse.com/#index which shows which browsers support which feature.
  19. I tested your code with your own images. 436px is correct but there is left side padding and at first I could only get it to fit using width: 476px for the #menu div. This shows the importance of using a reset css http://meyerweb.com/...ools/css/reset/ In your case I just added a style to the ul tag for speed: ul { margin: 0; padding: 0; } ul.menu-item li { list-style: none; display: inline; float: left; } ul.menu-item li a { display: block; height: 35px; text-decoration: none; background-position: 0px 0px; } ul.menu-item li a:hover { background-position: 0 -35px; } #menu { width: 436px; /*476px;*/ background: lime; height: 35px; } When I had it with width: 476px; background: lime; for #menu I could see the left padding. I also thought that the a:hover offset should be -35px as you want to raise the background-image to show the lower green font which means a negative top margin, but both 35px and -35px work, which seems odd to me. The menu appeared cut in half vertically is probably because you didn't use a reset. My code doesn't cut it in half. If you use Meyer's reset you will have to set margins and padding individually for a lot of tags like h1 to h6, p, etc. because they will all be 0, but it helps to get all browsers the same first. Remember to use a doctype.
  20. If you mean that you want to turn it into HTML, then I suggest that you google for a free web page or free website and you will probably find something similar as it looks fairly conventional. Use a tutorial like http://htmldog.com/guides/ or http://www.w3schools.com/ to edit the template.
  21. /cgi-bin/bnbform.cgi is not usually a directory and file that a developer places on the hosts's server so contact the host as there may have been some upgrade that deleted it and you will have to ask for it to be reinstated or what an alternative is. However, it nay have originated with the form code that you installed from somewhere so go back to the website where you got the form code from. You could recreate it yourself if you have a copy somewhere (unlikely).
  22. Title tags for a link or image link will cause a tooltip in most browsers which many developers dislike, You don't have to use the title and it won't affect SEO for a link (although the title in the head section is different and you should have it there as the title is what shows in a browser title bar).
  23. The very simplest method is this: CSS: <style type="text/css"> .background { display: block; width: 100%; position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: -1; } </style> HTML markup: <img class="background" src="image.jpg" alt="Your image"> Put the html markup code immediately after the <body> tag, before all your content. It will make the image fit the whole wimdow without cropping the sides because the position: fixed will be fixed to all the sides. However, it will distort the image which will look odd if you have a photo, but may be OK if you have a pattern. Omit bottom: 0; and the image will keep its aspect ratio but won't reach the bottom of the window at certain window sizes.
  24. This tutorial may help you: http://css-tricks.co...ckground-image/ but if your image is only 200px wide in one direction it will look pixellated if stretched too much in a large resolution. The first solution using CSS3 won't work in older browsers. I've used the position: fixed method for many years and haven't bothered to change to the CSS3 method yet.
  25. As Dap says, you don't need to use divs. If you want to place an inline element like "img" or "a" element somewhere on your page you can make it a block element and use positioning, margin, padding, etc. Many people get "divitis", using far too many divs especially lots of levels of nested divs. However, divs are a good idea if you want to hold blocks of items together so that you can apply positions or backgrounds to all of them as a group, for instance a header div (which in the new HTML5 can now be the new header element instead of a div with id or class of header) then a content div then a footer div, each containing lots of different elements.

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.