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.

JD.CoolPenguin

Members
  • Joined

  • Last visited

  1. So, I have always used a php file for my download links - sent them to a file that forced a download by setting the content-disposition to attachment and the content-type to application/octet-stream. However most recently I stumbled onto a post about doing it in the .htaccess file by simply adding: AddType application/octet-stream .mp3 Now, I know absolutely nothing about htacces, but this seems fairly simple to me. That obviously forces the content-type for all mp3 files to octet-stream. Which got me wondering (because I know forcing the content-type isn't enough, some browsers still open it in the browser), is there a way of using htaccess to also set the content-disposition. After a bit of googling around, I didn't find anything that was as simple as that, but have found this: <FilesMatch "\.(?i:mp3)$"> ForceType application/octet-stream Header set Content-Disposition attachment </FilesMatch> Which is working a treat on the wordpress site I've just set up - BUT, I just wanted to stop by and ask, is this the best way of doing it? Thanks, JD.
  2. Sorry, didn't read that last bit. You want to achieve the same look but still have different pages, rather than all on one page? I'm not sure how to do that. Penguin.
  3. I believe that is what she was suggesting, and it would work on desktop, though I don't like them on vertical lists, and I would agree it might not be particularly great on mobile devices. I would personally remove them from the navigation bar, and just provide a submenu (somewhere near the top) on the pages they are relevant to. See the attached image for a quick idea of where I would put the submenu, I've used your 'discrimination' page as an example, note how it's not in the sidebar navigation anymore either. To actually remove the submenu completely from the navigation on all pages, in your pages code, all you have to do is remove the child lists, and change the link a little. You currently have: <ul id="widget-collapspage-3-collapsPageList" class="collapsing pages list"> <li style="display:none"><script type="text/javascript"> // <![CDATA[ /* These variables are part of the Collapsing Pages Plugin * version: 0.6.1 * revision: $Id: collapsPageList.php 255729 2010-06-22 03:02:20Z robfelty $ * Copyright 2007-2009 Robert Felty (robfelty.com) */ var expandSym="<img src='http://www.suemyboss.co.uk/wp-content/plugins/collapsing-pages/img/expand.gif' alt='expand' />";var collapseSym="<img src='http://www.suemyboss.co.uk/wp-content/plugins/collapsing-pages/img/collapse.gif' alt='collapse' />";; // ]]> </script></li> <li id="agency-workers-nav" class="collapsing pages item"><a href="http://www.suemyboss.co.uk/agency-workers/" title="Agency Workers">Agency Workers</a> </li> <!-- ending page subcat count = 0--> <li id="breach-of-contract-nav" class="collapsing pages item"><a href="http://www.suemyboss.co.uk/breach-of-contract/" title="Breach of Contract">Breach of Contract</a> </li> <!-- ending page subcat count = 0--> <li id="bullying-at-work-nav" class="collapsing pages item"><a href="http://www.suemyboss.co.uk/bullying-at-work/" title="Bullying at Work">Bullying at Work</a> </li> <!-- ending page subcat count = 0--> <li id="tupe-and-business-transfers-nav" class="collapsing pages item"><a href="http://www.suemyboss.co.uk/tupe-and-business-transfers/" title="Business Transfers (TUPE)">Business Transfers (TUPE)</a> </li> <!-- ending page subcat count = 0--> <li id="constructive-dismissal-nav" class="collapsing pages item"><a href="http://www.suemyboss.co.uk/constructive-dismissal/" title="Constructive Dismissal">Constructive Dismissal</a> </li> <!-- ending page subcat count = 0--> <li id="data-protection-and-workplace-monitoring-nav" class="collapsing pages item"><a href="http://www.suemyboss.co.uk/data-protection-and-workplace-monitoring/" title="Data Protection">Data Protection</a> </li> <!-- ending page subcat count = 0--> <li class="collapsing pages "><span title="Click to collapse" class="collapsing pages collapse" onclick="expandCollapse(event, "+", "—", 0, "collapsing pages"); return false"><span class="sym">—</span></span><a class="self" href="http://www.suemyboss.co.uk/discrimination-in-the-workplace/" title="Discrimination">Discrimination</a> <ul id="collapsPage-623" style="display:block;"> <li class="collapsing pages item"><a href="http://www.suemyboss.co.uk/discrimination-in-the-workplace/age-discrimination/" title="Age Discrimination">Age Discrimination</a></li> <li class="collapsing pages item"><a href="http://www.suemyboss.co.uk/discrimination-in-the-workplace/disability-discrimination/" title="Disability Discrimination">Disability Discrimination</a></li> <li class="collapsing pages item"><a href="http://www.suemyboss.co.uk/discrimination-in-the-workplace/race-discrimination/" title="Race Discrimination">Race Discrimination</a></li> <li class="collapsing pages item"><a href="http://www.suemyboss.co.uk/discrimination-in-the-workplace/religious-discrimination/" title="Religion or belief discrimination">Religion or belief discrimination</a></li> <li class="collapsing pages item"><a href="http://www.suemyboss.co.uk/discrimination-in-the-workplace/sex-discrimination-and-equal-pay/" title="Sex Discrimination">Sex Discrimination</a></li> <li class="collapsing pages item"><a href="http://www.suemyboss.co.uk/discrimination-in-the-workplace/sexual-orientation-discrimination/" title="Sexual Orientation Discrimination">Sexual Orientation Discrimination</a></li> </ul><!-- subpagecount = 6 ending subpage --> </li><!-- subpagecount = 6 ending subpage --> <li id="drug-testing-at-work-nav" class="collapsing pages item"><a href="http://www.suemyboss.co.uk/drug-testing-at-work/" title="Drug Testing at Work">Drug Testing at Work</a> </li> <!-- ending page subcat count = 0--> <li id="employment-contracts-nav" class="collapsing pages item"><a href="http://www.suemyboss.co.uk/employment-contracts/" title="Employment Contracts">Employment Contracts</a> </li> <!-- ending page subcat count = 0--> <li id="employment-tribunals-nav" class="collapsing pages item"><a href="http://www.suemyboss.co.uk/employment-tribunals/" title="Employment Tribunals">Employment Tribunals</a> </li> <!-- ending page subcat count = 0--> <li id="flexible-working-nav" class="collapsing pages item"><a href="http://www.suemyboss.co.uk/flexible-working/" title="Flexible Working">Flexible Working</a> </li> <!-- ending page subcat count = 0--> <li id="grievance-procedures-nav" class="collapsing pages item"><a href="http://www.suemyboss.co.uk/grievance-procedures/" title="Grievance Procedures">Grievance Procedures</a> </li> <!-- ending page subcat count = 0--> <li class="collapsing pages "><span title="Click to expand" class="collapsing pages expand" onclick="expandCollapse(event, "+", "—", 0, "collapsing pages"); return false"><span class="sym">+</span></span><a href="http://www.suemyboss.co.uk/health-and-safety/" title="Health and Safety">Health and Safety</a> <ul id="collapsPage-650" style="display:none;"> <li class="collapsing pages item"><a href="http://www.suemyboss.co.uk/health-and-safety/accidents-in-the-workplace/" title="Accidents in the workplace">Accidents in the workplace</a></li> <li class="collapsing pages item"><a href="http://www.suemyboss.co.uk/health-and-safety/employers-health-and-safety-responsibilities/" title="Employers’ health and safety responsibilities">Employers’ health and safety responsibilities</a></li> <li class="collapsing pages item"><a href="http://www.suemyboss.co.uk/health-and-safety/health-and-safety-representatives/" title="Health and safety representatives">Health and safety representatives</a></li> <li class="collapsing pages item"><a href="http://www.suemyboss.co.uk/health-and-safety/safe-computer-use/" title="Safe computer use">Safe computer use</a></li> <li class="collapsing pages item"><a href="http://www.suemyboss.co.uk/health-and-safety/safe-manual-work/" title="Safe manual work">Safe manual work</a></li> </ul><!-- subpagecount = 5 ending subpage --> </li><!-- subpagecount = 5 ending subpage --> <li id="maternity-leave-nav" class="collapsing pages item"><a href="http://www.suemyboss.co.uk/maternity-leave/" title="Maternity Leave">Maternity Leave</a> </li> <!-- ending page subcat count = 0--> <li id="national-minimum-wage-nav" class="collapsing pages item"><a href="http://www.suemyboss.co.uk/national-minimum-wage/" title="National Minimum Wage">National Minimum Wage</a> </li> <!-- ending page subcat count = 0--> <li id="night-workers-nav" class="collapsing pages item"><a href="http://www.suemyboss.co.uk/night-workers/" title="Night Workers">Night Workers</a> </li> <!-- ending page subcat count = 0--> <li id="parental-leave-nav" class="collapsing pages item"><a href="http://www.suemyboss.co.uk/parental-leave/" title="Parental Leave">Parental Leave</a> </li> <!-- ending page subcat count = 0--> <li id="paternity-leave-nav" class="collapsing pages item"><a href="http://www.suemyboss.co.uk/paternity-leave/" title="Paternity Leave">Paternity Leave</a> </li> <!-- ending page subcat count = 0--> <li id="pregnancy-nav" class="collapsing pages item"><a href="http://www.suemyboss.co.uk/pregnancy/" title="Pregnancy">Pregnancy</a> </li> <!-- ending page subcat count = 0--> <li id="redundancy-nav" class="collapsing pages item"><a href="http://www.suemyboss.co.uk/redundancy/" title="Redundancy">Redundancy</a> </li> <!-- ending page subcat count = 0--> <li id="sickness-absence-nav" class="collapsing pages item"><a href="http://www.suemyboss.co.uk/sickness-absence/" title="Sickness Absence">Sickness Absence</a> </li> <!-- ending page subcat count = 0--> <li id="stress-nav" class="collapsing pages item"><a href="http://www.suemyboss.co.uk/stress/" title="Stress">Stress</a> </li> <!-- ending page subcat count = 0--> <li id="sunday-working-nav" class="collapsing pages item"><a href="http://www.suemyboss.co.uk/sunday-working/" title="Sunday Working">Sunday Working</a> </li> <!-- ending page subcat count = 0--> <li id="unfair-dismissal-nav" class="collapsing pages item"><a href="http://www.suemyboss.co.uk/unfair-dismissal/" title="Unfair Dismissal">Unfair Dismissal</a> </li> <!-- ending page subcat count = 0--> <li id="whistleblowing-nav" class="collapsing pages item"><a href="http://www.suemyboss.co.uk/whistleblowing/" title="Whistleblowing">Whistleblowing</a> </li> <!-- ending page subcat count = 0--> <li id="working-time-limits-nav" class="collapsing pages item"><a href="http://www.suemyboss.co.uk/working-time-limits/" title="Working Time Limits">Working Time Limits</a> </li> <!-- ending page subcat count = 0--> <li id="workplace-monitoring-nav" class="collapsing pages item"><a href="http://www.suemyboss.co.uk/workplace-monitoring/" title="Workplace Monitoring">Workplace Monitoring</a> </li> <!-- ending page subcat count = 0--> </ul> You would want to change it to this: <ul id="widget-collapspage-3-collapsPageList" class="collapsing pages list"> <li style="display:none"><script type="text/javascript"> // <![CDATA[ /* These variables are part of the Collapsing Pages Plugin * version: 0.6.1 * revision: $Id: collapsPageList.php 255729 2010-06-22 03:02:20Z robfelty $ * Copyright 2007-2009 Robert Felty (robfelty.com) */ var expandSym="<img src='http://www.suemyboss.co.uk/wp-content/plugins/collapsing-pages/img/expand.gif' alt='expand' />";var collapseSym="<img src='http://www.suemyboss.co.uk/wp-content/plugins/collapsing-pages/img/collapse.gif' alt='collapse' />";; // ]]> </script></li> <li id="agency-workers-nav" class="collapsing pages item"><a href="http://www.suemyboss.co.uk/agency-workers/" title="Agency Workers">Agency Workers</a> </li> <!-- ending page subcat count = 0--> <li id="breach-of-contract-nav" class="collapsing pages item"><a href="http://www.suemyboss.co.uk/breach-of-contract/" title="Breach of Contract">Breach of Contract</a> </li> <!-- ending page subcat count = 0--> <li id="bullying-at-work-nav" class="collapsing pages item"><a href="http://www.suemyboss.co.uk/bullying-at-work/" title="Bullying at Work">Bullying at Work</a> </li> <!-- ending page subcat count = 0--> <li id="tupe-and-business-transfers-nav" class="collapsing pages item"><a href="http://www.suemyboss.co.uk/tupe-and-business-transfers/" title="Business Transfers (TUPE)">Business Transfers (TUPE)</a> </li> <!-- ending page subcat count = 0--> <li id="constructive-dismissal-nav" class="collapsing pages item"><a href="http://www.suemyboss.co.uk/constructive-dismissal/" title="Constructive Dismissal">Constructive Dismissal</a> </li> <!-- ending page subcat count = 0--> <li id="data-protection-and-workplace-monitoring-nav" class="collapsing pages item"><a href="http://www.suemyboss.co.uk/data-protection-and-workplace-monitoring/" title="Data Protection">Data Protection</a> </li> <!-- ending page subcat count = 0--> <li id="discrimination-in-the-workplace-nav" class="collapsing pages item"><a href="http://www.suemyboss.co.uk/discrimination-in-the-workplace/" title="Discrimination">Discrimination</a> </li><!-- ending page subcat count = 0--> <li id="drug-testing-at-work-nav" class="collapsing pages item"><a href="http://www.suemyboss.co.uk/drug-testing-at-work/" title="Drug Testing at Work">Drug Testing at Work</a> </li> <!-- ending page subcat count = 0--> <li id="employment-contracts-nav" class="collapsing pages item"><a href="http://www.suemyboss.co.uk/employment-contracts/" title="Employment Contracts">Employment Contracts</a> </li> <!-- ending page subcat count = 0--> <li id="employment-tribunals-nav" class="collapsing pages item"><a href="http://www.suemyboss.co.uk/employment-tribunals/" title="Employment Tribunals">Employment Tribunals</a> </li> <!-- ending page subcat count = 0--> <li id="flexible-working-nav" class="collapsing pages item"><a href="http://www.suemyboss.co.uk/flexible-working/" title="Flexible Working">Flexible Working</a> </li> <!-- ending page subcat count = 0--> <li id="grievance-procedures-nav" class="collapsing pages item"><a href="http://www.suemyboss.co.uk/grievance-procedures/" title="Grievance Procedures">Grievance Procedures</a> </li> <!-- ending page subcat count = 0--> <li id="health-and-safety-nav" class="collapsing pages item"><a href="http://www.suemyboss.co.uk/health-and-safety/" title="Health and Safety">Health and Safety</a> </li><!-- subpagecount = 0 --> <li id="maternity-leave-nav" class="collapsing pages item"><a href="http://www.suemyboss.co.uk/maternity-leave/" title="Maternity Leave">Maternity Leave</a> </li> <!-- ending page subcat count = 0--> <li id="national-minimum-wage-nav" class="collapsing pages item"><a href="http://www.suemyboss.co.uk/national-minimum-wage/" title="National Minimum Wage">National Minimum Wage</a> </li> <!-- ending page subcat count = 0--> <li id="night-workers-nav" class="collapsing pages item"><a href="http://www.suemyboss.co.uk/night-workers/" title="Night Workers">Night Workers</a> </li> <!-- ending page subcat count = 0--> <li id="parental-leave-nav" class="collapsing pages item"><a href="http://www.suemyboss.co.uk/parental-leave/" title="Parental Leave">Parental Leave</a> </li> <!-- ending page subcat count = 0--> <li id="paternity-leave-nav" class="collapsing pages item"><a href="http://www.suemyboss.co.uk/paternity-leave/" title="Paternity Leave">Paternity Leave</a> </li> <!-- ending page subcat count = 0--> <li id="pregnancy-nav" class="collapsing pages item"><a href="http://www.suemyboss.co.uk/pregnancy/" title="Pregnancy">Pregnancy</a> </li> <!-- ending page subcat count = 0--> <li id="redundancy-nav" class="collapsing pages item"><a href="http://www.suemyboss.co.uk/redundancy/" title="Redundancy">Redundancy</a> </li> <!-- ending page subcat count = 0--> <li id="sickness-absence-nav" class="collapsing pages item"><a href="http://www.suemyboss.co.uk/sickness-absence/" title="Sickness Absence">Sickness Absence</a> </li> <!-- ending page subcat count = 0--> <li id="stress-nav" class="collapsing pages item"><a href="http://www.suemyboss.co.uk/stress/" title="Stress">Stress</a> </li> <!-- ending page subcat count = 0--> <li id="sunday-working-nav" class="collapsing pages item"><a href="http://www.suemyboss.co.uk/sunday-working/" title="Sunday Working">Sunday Working</a> </li> <!-- ending page subcat count = 0--> <li id="unfair-dismissal-nav" class="collapsing pages item"><a href="http://www.suemyboss.co.uk/unfair-dismissal/" title="Unfair Dismissal">Unfair Dismissal</a> </li> <!-- ending page subcat count = 0--> <li id="whistleblowing-nav" class="collapsing pages item"><a href="http://www.suemyboss.co.uk/whistleblowing/" title="Whistleblowing">Whistleblowing</a> </li> <!-- ending page subcat count = 0--> <li id="working-time-limits-nav" class="collapsing pages item"><a href="http://www.suemyboss.co.uk/working-time-limits/" title="Working Time Limits">Working Time Limits</a> </li> <!-- ending page subcat count = 0--> <li id="workplace-monitoring-nav" class="collapsing pages item"><a href="http://www.suemyboss.co.uk/workplace-monitoring/" title="Workplace Monitoring">Workplace Monitoring</a> </li> <!-- ending page subcat count = 0--> </ul> That, should do the trick. HOWEVER. That entire code is there because of the expanding/collapsing items, if you're not using the collapsing and expanding lists, most of that code is pointless and could be replaced with a simple list: This would create the list: <ul id="navi"> <li><a href="link1.html" title="List item 1">List item 1</a></li> <li><a href="link2.html" title="List item 2">List item 2</a></li> <li><a href="link3.html" title="List item 3">List item 3</a></li> <li><a href="link4.html" title="List item 4">List item 4</a></li> <li><a href="link5.html" title="List item 5">List item 5</a></li> <li><a href="link6.html" title="List item 6">List item 6</a></li> <li><a href="link7.html" title="List item 7">List item 7</a></li> <li><a href="link8.html" title="List item 8">List item 8</a></li> <li><a href="link9.html" title="List item 9">List item 9</a></li> </ul> Obviously replace List item 1-9 to an appropriate text and change link1-9.html to the correct url's. Then all you'd have to do is change your css to have these styles (which I've just taken from your existing list): #navi {list-style-type: none;} #navi li { background-repeat: no-repeat; padding-left: 22px; background-position: 0 1px; padding-bottom: 3px; background-image: url(../../images/icons/bulletgr.png); } #navi li a { color: #000; text-decoration: none; } Any questions, just ask. Penguin.
  4. I am a web designer willing to work, and if that is what you want please PM me, and I will give you more details, BUT first... let's see if we can't help you to solve your own problem. The way you pose your question, it sounds like you have made a website before, you just haven't got the skills to turn it into a fluid site. Is that the case? If that is the case, can you be more specific about the problems you are encountering? You say you can't get your images to look good on a fluid design, but, what are the images being used for? Backgrounds, borders, content? What's wrong with them? Are they stretching, do they not fill the space, are they not appearing where you would expect them to appear? If you are editing your website live, can you post a link to it, so we can take a look? Penguin.
  5. I know I'm new here, but it seems that this would belong in the Website Reviews and Feedback section
  6. To build it yourself would be THE best way - always is, but it is also the most challenging - there would be lots to learn if you don't already know it, and it would take a long time (depending on how much time you have to dedicate to the project). - If you were thinking about doing it yourself, it may be worth considering not starting from scratch and using a CMS - Wordpress has already been endorsed by Teodora, but I would further that endorsement, it is a great starting point for any project (I've never made a website that's had more than a couple hundred users, so I wouldn't know how it coped with something like that). Getting a developer to do it would produce the best results, but it would be very expensive. You did say you've already looked at prebuilt scripts, it's probably worth to keep looking, and consider what features you may be willing to compromise on.
  7. My response: 1 - It Defeats User Expectation It might not be what they expected, but so long as the experience FEELS the same, users won't be disappointed. His main problem he outlines is when things aren't where he expects them to be (such as navigation links) - well, that's not because it's a responsive site, that's because it's been poorly designed! 2 - It Costs More and Takes Longer So do all good things. 3 - Non-Responsive Designs Usually Work He's using an iPhone, one of the best phones on the market, what about those on cheaper devices with a different OS, they often don't work as well, PLUS, they usually require the user to click more - zoom in on content, zoom out again to find the navigation, zoom in again because you can't click the right link in a list (you keep clicking the one above or below), which is a bad user experience. 4 - There is Often No Load Time Benefit So? There isn't a time disadvantage, it's usually the same. So? 5 - It's a Compromise A compromise of what? What's the ideality? And if that ideality is not obtainable, is a compromise not better than the non-ideal original? Penguin. EDIT: This interests me: I've been doing web design for years (HTML + CSS) just for fun, not as a profession, I learnt Javascript and jQuery in January with the intention of doing a little Web Design work, I've not used Ajax before, and wasn't planning on learning it, but, this post has made me think about it. Does anyone have a link to an article about using Ajax in responsive design? If I found it necessary, I would use display:none, though, off the top of my head, I can't remember a time I've done that, I aim to simply restyle the content depending on the width of the window, rather than actually hiding or replacing any content. Thanks, Penguin.
  8. I know I'm new here, but it seems that this would belong in the Website Reviews and Feedback section Sorry, wrong post.

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.