Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Exit
osgood_
LEGEND
osgood_
LEGEND
Activity
‎Dec 04, 2016
08:51 AM
1 Upvote
Probably beacuse you have your image set at a specific width/height, right? If you are wanting to create a responsive website then remove the width and height attribute from the image and use the css below: img { max-width: 100%; height: auto; } Also you are using the incorrect tag to house your image, instead of <article> you should be using the <figure></figure> tag: <figure class="left_article"> <img src="pictures/boxes/haarentfernung_sucre.png" width="267" height="189" alt=""/> </figure> You need to zero the figure tags margin and padding default setting in your left_article css. margin: 0; padding: 0;
... View more
‎Dec 04, 2016
08:29 AM
paulk7737514 wrote: I can see the background image is rendered using inline CSS, I just don't get why I can't right click to view it. If I right click I can see the exact location of the image file, otherwise I have to view page source and search for it. You cant right click and view it because the image you alluded to earlier with the curve is sitting over the top of it.....so you can only get to that image. A bit like what they do on Flickr - try right clicking any of their images and you get nothing but the image they care to superimpose over the top of the image you really want to see or download. In the case of Flickr I have no idea why because you cant protect anything which is on the web. In the case of the website you are talking about well that's just the way they have done it to create the curve and [profanity removed by Mod] ugly coding as well, typical Wordpress generated garbage.....who'd have guess it. 14 stylesheets and I lost count of the javascript files 25ish....what animal came up with that, not a developer but some ignorant designer. Nice design hugley bad coding.
... View more
‎Dec 02, 2016
05:46 AM
This could be the result of default margin and padding on your <h> tags or you may need to set to header image to display: block; I would first initially zero out all the margin and padding on you <h> tags. Instead of spliting everything like you have below: margin-right: auto; margin-left: auto; margin-top: 5px; Intially set all the margins and padding on your <h> tags to zero and see if the space goes away: margin: 0 0 0 0; /*top, right, bottom, left/ * padding: 0 0 0 0; *top, right, bottom, left/ * if it doesnt the next thing to try is setting the image to display: block; header img { display: block; } Having said all of the above and relooking at your css I see you have the height of the header set to height: 150px; and yet the image is only 123px high. It's best practice not to set heights on your html, left the container adjust to the height of its content, then if you want some space you can add some margin or padding to the container. Try the below code: (you don't use pt for sizing text on the web you use px or em or %) <!DOCTYPE html> <html> <head> <meta ="charset=UTF-8" /> <title>Untitled Document</title> <style> body { margin: 0; } .header { width: 956px; margin: 0 auto; border-width: 2px; border-style: solid; border-color: #FFFFFF #FFFFFF #000000 #000000; background-color: #EAE6EB; overflow: hidden; } .h1 { float: left; color: #000000; font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif; font-size: 40px; margin: 5px 0 0 25px; font-weight: 200; text-shadow: 0px 3px 4px #433A3A; letter-spacing: 15px; } #logo { float: right; margin: 5px 25px 0 0; } .h2 { color: #000000; width: 956px; background-color: #EAE6EB; border-width: 2px; border-style: solid; border-color: #FFFFFF #FFFFFF #000000 #000000; font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif; font-size: 35px; font-weight: 100; text-align: center; letter-spacing: 15px; text-shadow: 0px 3px 4px #433A3A; margin: 0 auto; padding-bottom: 20px; clear: both; } </style> </head> <body> <header class="header"> <h1 class="h1">AETHERSOUP</h1> <img src="images/aethersoup-can.png" alt="Aethersoup Logo." width="60" height="123" id="logo" title="Aethersoup Logo."/> </header> <h2 class="h2">Web Design</h2> </body> </html>
... View more
‎Nov 29, 2016
10:50 AM
That would be easy on mobile but as goofy as a goose on desktop because you simply have nowhere for the nav tabs to go as soon as the brower window starts to narrow you would have to go to mobile format. This kind of menu where the logo is centered between the navigation tabs ls not practical now we are in the mobile age. It doesnt look nice as you have different spacing between the tabs on account you have a 4/3 split. Unless your client has specifically requested the layout you would be better advised to keep the logo and the tabs seperate.
... View more
‎Nov 28, 2016
10:50 AM
Nancy OShea wrote: Oh, it's there if you know where to look. My husband uses a Firefox Add-on called NoScript Security Suite. So when he says to me, "such & such" isn't working on my site, I know it's because of that wretched NoScript add-on. You can tell the add-on to make exceptions and allow scripts for certain web sites but it doesn't really run the scripts. You have to disable the add-on. I have wasted hours chasing down solutions to problems that don't really exist except for people like my husband who have their JS disabled. The NoScript add-on has over 2 million users. Unfortunately, it's not the only add-on of this kind. There are many, many more. And a lot of people use them. Nancy Must be a beautiful experience using the internet with javascript disabled. You can disable it in Safari and Chrome in their Preferences - at least with Firefox you need to use an Add-on, which makes it more problematical for most users. Do they have an add-on for disabling html and css....go the whole way, why not.
... View more
‎Nov 28, 2016
10:15 AM
Nancy OShea wrote: If JavaScript is disabled in the end user's browser, your client-side scripts won't DO anything. This is always a big concern to developers who need reliable data. PHP is reliable because processing occurs on the server, not the client-side browser. Nancy The whole of the web would practically be a car-crash given how many websites rely on javascript to function correctly. I think days of worrying about the small minority who might have javascript disabled are long gone. As far as Im aware most browsers dont even offer that option any longer, at least I could'nt see it in Firefox when I last took a look?
... View more
‎Nov 28, 2016
02:08 AM
Sorted it - It's under 'Profiles' - Creating a new profile. Thought you must be able to produce multiple widgets.
... View more
‎Nov 28, 2016
01:48 AM
Anyone using this to create social share buttons for their website/s? How does one generate more that one widget to use on several different sites. Each widget has a 'unique' bit of code to identify it but I only seem to have the option of creating the one widget - surely the client can't be responsible for signing up to produce the widget code? Hummm......... don't this work like Google Analytics whereby the developer can create several unique tracking widgets? Cheers Os
... View more
‎Nov 24, 2016
07:38 AM
Rob Hecker2 wrote: I think the problem with video, any kind of video, is that it takes much longer to communicate something with video than with a photo and a paragraph of text. That's my problem with video training, I get impatient waiting for the instructor to get to the point. I dont really see how a static image and a line of text can convey as much information or create as much impact as a video to be honest. I guess everyone has their own views on this. This video will be showing a process as this is an engineering company making intricate milling products, so I think it will convey the message rather nicely.
... View more
‎Nov 23, 2016
11:26 PM
Whats the deal here. Just to crank it up a bit I'm considering using a full page homepage video for one of my clients - good or bad idea? I don't see that many in terms of the number of websites available to be viewed, so I'm skeptical, but those examples I do see work fine for me. Of course I would need to change the concept for tablet and smartphone. Whats the general view here? Any suggestions for the max time for the video? I'm thinking a 30-60 second clip to keep it smallish. Any feedback welcome. Os
... View more
‎Nov 23, 2016
11:00 PM
ALsp wrote: osgood_ wrote: Sure BUT for now I'd rather play safe and use the prefixing. I'm sure one of the browsers you mention above for sure needed a prefix for flex-wrap: wrap; on my Mac, maybe Safari I think. I understand and apologize for not being clear. I was referring to fallbacks for browsers that have absolutely no support for flexbox...prefixed or otherwise. This is the container rule I would use most often and it certainly does require a couple of webkit-prefixed declarations: -webkit-flex-flow: row wrap; flex-flow: row wrap; display: -webkit-box; display: flex; But it's not really that hard for folks to get their heads around. Personally I dont really care much about those browsers that have absolutely no support for Flexbox. One has to make the decision to move on at some point and drop those older browsers much like as its been for ages. Of course thats up to the individual to decide when that is right for them. I would rather be using current techniques that work in modern browsers NOW rather than wait for some framework to catch up or another solution which is still light years away in terms of support and stability. For some it must be a bit like saying 'I'll stick with tables instead of using <divs> (floats) for layout because I know eventually Flexbox will arrive. I dont know what these problems with Flexbox are that some people speak of - I haven't encountered any negative sides as yet in a production environment situation. The only grip I have is as I've already stated, the amount of prefixes still needed but this will eventually recede.
... View more
‎Nov 23, 2016
12:30 PM
ALsp wrote: osgood_ wrote: The only downside is you do have to use a preprocessor or convert online to toss out all the ugly requirements needed by various browers. By various browsers? There are no issues with Firefox, Edge, Chrome or Safari: the dominant browsers in today's market, and ones that are kept up-to-date by nearly 100% of their users. For those needing to support older versions of IE, the solutions are very simple. But that's part of the learning curve in using such a unique specification. The legacy workarounds are likewise unique 🙂 Sure BUT for now I'd rather play safe and use the prefixing. I'm sure one of the browsers you mention above for sure needed a prefix for flex-wrap: wrap; on my Mac, maybe Safari I think.
... View more
‎Nov 23, 2016
12:12 PM
Nancy OShea wrote: osgood_ wrote: You may as well ask if they use Jade, Bitters, Sweets or Bourbon Don't change the subject. You're avoiding the question . Nah I just answered it while you were posting. I also wanted to add: I can re-order any element, upside down back to front any which way with a single line of code.........theres probably more I just cant think of them at the moment. All I can say is its provided me with another level of freedom to manipulate layouts easier and I'd say with more conviction whereas in the psst I might have settled for second best.
... View more
‎Nov 23, 2016
11:46 AM
1 Upvote
Probably better asked in a forum like Sitepoint....the average Joe in this forum don't know their <h1> tag from their <h5> tag. Asking questions like that in a forum which is mostly populated by amatuers is pointless. You may as well ask if they use Jade, Bitters, Sweets or Bourbon. I'm not using Flexbox in a purist kind of way, I'm taking bits of it that I think suit my worflow and using those. Mostly I do not use stuff like flex: 1; etc unless I need to push an element all the way to the foot of its parent container, which help line buttons up quickly or balance a design up quite nicely. With Flexbox you can easily change the flow from a row to a column which makes responsive design easy. You can spread out columns without having to declare any margins or any silly minus values on the parent container to get the elements to line up with the content above or below. You can vertically center align 2 adjacent elements without having to hack or use margin or padding which fails if the text size is enlarged without using Flexbox. I can center elements using a couple of lines of code intead of using hacks etc etc.........all of the above has become so much more simple than it previously was. The only downside is you do have to use a preprocessor or convert online to toss out all the ugly requirements needed by various browers.
... View more
‎Nov 23, 2016
06:05 AM
It sounds like you are trying to use an awful lot of content in the blocks, which a sliding panel is not really meant for - does it do this if you use less content? Maybe just remove the hide sliding panels code: hidePanels.slideUp();
... View more
‎Nov 21, 2016
11:05 PM
Tray adding return false; as below: <script> $(document).ready(function(){ var hidePanels = $(".panel").hide(); $(".flip").click(function(){ hidePanels.slideUp(); $(this).next(".panel").slideToggle(); return false; }); }); </script> or another way add the 'event' handler: <script> $(document).ready(function(e){ var hidePanels = $(".panel").hide(); $(".flip").click(function(){ hidePanels.slideUp(); $(this).next(".panel").slideToggle(); e.preventDefault(); }); }); </script>
... View more
‎Nov 21, 2016
10:38 AM
1 Upvote
Nancy OShea wrote: You can adjust the icon's font-size in your CSS code, but it doesn't really make them thinner, just smaller. .glyphicon-chevron-left, .glyphicon-chevron-right {font-size: 11px} Or you can try Font-Awesome icons instead of Glyphicons. Add this CSS link to your <head> tag. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> Font Awesome Directional Icons I always find that the font awesome icons are rather on the 'chunky' side as well! Not sure why they did'nt produce them in different weights. I use them because they are clean and fast to implement BUT if you have a 'fussy' client you could be in trouble. EDITED Actually the angle ones arent bad but the rest are a bit on the heavy side. fa fa-angle-left fa fa-angle-right
... View more
‎Nov 18, 2016
11:58 AM
Try the version below for your submenus: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Untitled Document</title> <link href="https://fonts.googleapis.com/css?family=Titillium+Web:300,400,600" rel="stylesheet"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script> $(document).ready(function(){ // Open slide panel $('.close_slide_panel').hide(); $('.open_slide_panel').css('cursor' , 'pointer').click(function(){ $('.open_slide_panel').hide(); $('.close_slide_panel').show(); if ($(window).width() > 768) { $('.slide_panel').animate({"right":"0px"}, "fast"); $('.page_wrapper').animate({"right":"20%"}, "fast"); } else { $('.slide_panel').animate({"right":"0px"}, "fast"); } }); // Close slide panel $('.close_slide_panel').css('cursor' , 'pointer').click(function(){ $('.close_slide_panel').hide(); $('.open_slide_panel').show(); if ($(window).width() > 768) { $('.slide_panel').animate({"right":"-20%"}, "fast"); $('.page_wrapper').animate({"right":"0px"}, "fast"); } else { $('.slide_panel').animate({"right":"-100%"}, "fast"); } }); }); </script> <script> $(document).ready(function(){ // Open sublinks $('.slide_panel li a').css('cursor' , 'pointer').click(function(){ var panel = $(this).attr('dir'); $(panel).animate({"right":"0px"}, "fast"); }); // Close sublinks $('.close_sublink').css('cursor' , 'pointer').click(function(){ $(this).parents('ul').animate({"right":"-100%"}, "fast"); }); }); </script> <style> /* ZERO ALL PADDING */ * { box-sizing: border-box; } html, body { height: 100%; margin: 0; } .page_wrapper { height: 100%; background-color: #CCC; position: absolute; width: 100%; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; } /* SLIDE PANEL */ .open_slide_panel { position: absolute; right: 30px; color: #666; font-size: 20px; z-index: 4000; display: flex; align-items: center; } .open_slide_panel span { background-color: #00598f; color: #fff; padding: 15px; } .open_slide_panel span:hover { background-color: #57b7df; } .open_slide_panel i { padding: 0; margin: -5px 0 0 0; font-size: 25px; color: #fff; } .close_slide_panel { position: absolute; right: 30px; top: 0; padding: 15px; color: #fff; font-size: 20px; z-index: 5000; display: flex; align-items: center; background-color: #57b7df; } .slide_panel { height: 100%; width: 20%; background-color: #00598f; opacity: 0.9; position: fixed; z-index: 3000; top: 0; right: -20%; color:#F90; padding-top: 80px; } @media only screen and (max-width : 768px) { .slide_panel { height: 100%; width: 100%; right: -100%; } } .slide_panel ul { margin: 0; padding: 0; } .slide_panel li { position: relative; margin: 0; padding: 15px; list-style: none; border-bottom: 1px solid #ccc; } .slide_panel a { margin: 0; padding: 0; text-decoration: none; color: #fff; font-size: 17px; display: inline-block; } /*SUBLINKS */ .sublinks { position: absolute; top: 0; right: -100%; background-color: #00598f; z-index: 8000; width: 100%; } .slide_panel .close_sublink { text-align: right; color: #fff; } </style> </head> <body> <div class="page_wrapper"> <h1>Page Content Goes Here</h1> </div> <!-- end page_wrapper --> <section class="slide_panel"> <div class="close_slide_panel"><i class="fa fa-times" aria-hidden="true"></i></div> <ul> <li><a href="#" dir=".one">Link 1 <i class="fa fa-caret-right" aria-hidden="true"></i></a> <ul class="sublinks one"> <li class="close_sublink"><i class="fa fa-times" aria-hidden="true"></i></li> <li><a href="#">Sublinks 1</a></li> <li><a href="#">Sublinks 1</a></li> <li><a href="#">Sublinks 1</a></li> <li><a href="#">Sublinks 1</a></li> <li><a href="#">Sublinks 1</a></li> <li><a href="#">Sublinks 1</a></li> </ul> <ul class="sublinks two"> <li class="close_sublink"><i class="fa fa-times" aria-hidden="true"></i></li> <li><a href="#">Sublinks 2</a></li> <li><a href="#">Sublinks 2</a></li> <li><a href="#">Sublinks 2</a></li> <li><a href="#">Sublinks 2</a></li> <li><a href="#">Sublinks 2</a></li> <li><a href="#">Sublinks 2</a></li> </ul> <ul class="sublinks three"> <li class="close_sublink"><i class="fa fa-times" aria-hidden="true"></i></li> <li><a href="#">Sublinks 3</a></li> <li><a href="#">Sublinks 3</a></li> <li><a href="#">Sublinks 3</a></li> <li><a href="#">Sublinks 3</a></li> <li><a href="#">Sublinks 3</a></li> <li><a href="#">Sublinks 3</a></li> </ul> <ul class="sublinks four"> <li class="close_sublink"><i class="fa fa-times" aria-hidden="true"></i></li> <li><a href="#">Sublinks 4</a></li> <li><a href="#">Sublinks 4</a></li> <li><a href="#">Sublinks 4</a></li> <li><a href="#">Sublinks 4</a></li> <li><a href="#">Sublinks 4</a></li> <li><a href="#">Sublinks 4</a></li> </ul> </li> <li><a href="#" dir=".two">Link 2 <i class="fa fa-caret-right" aria-hidden="true"></i></a></li> <li><a href="#" dir=".three">Link 3 <i class="fa fa-caret-right" aria-hidden="true"></i></a></li> <li><a href="#" dir=".four">Link 4 <i class="fa fa-caret-right" aria-hidden="true"></i></a></li> </ul> </section> <!-- end slide_panel --> <div class="open_slide_panel"><span><i class="fa fa-bars" aria-hidden="true"></i></span></div> </body> </html>
... View more
‎Nov 18, 2016
09:49 AM
Nothing as fancy as that freaking beauty but you could possibly adapt something I posted earlier. Its not Bootsrap but you dont have to use Bootstrap - you can use anyting inside of a Bootstrap grid - there are more options and more choices and if you can write some code all the better. <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Untitled Document</title> <link href="https://fonts.googleapis.com/css?family=Titillium+Web:300,400,600" rel="stylesheet"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script> $(document).ready(function(){ // Open slide panel $('.close_slide_panel').hide(); $('.open_slide_panel').css('cursor' , 'pointer').click(function(){ $('.open_slide_panel').hide(); $('.close_slide_panel').show(); if ($(window).width() > 768) { $('.slide_panel').animate({"right":"0px"}, "fast"); $('.page_wrapper').animate({"right":"20%"}, "fast"); } else { $('.slide_panel').animate({"right":"0px"}, "fast"); } }); // Close slide panel $('.close_slide_panel').css('cursor' , 'pointer').click(function(){ $('.close_slide_panel').hide(); $('.open_slide_panel').show(); if ($(window).width() > 768) { $('.slide_panel').animate({"right":"-20%"}, "fast"); $('.page_wrapper').animate({"right":"0px"}, "fast"); } else { $('.slide_panel').animate({"right":"-100%"}, "fast"); } }); }); </script> <style> /* ZERO ALL PADDING */ * { box-sizing: border-box; } html, body { height: 100%; margin: 0; } .page_wrapper { height: 100%; background-color: #CCC; position: absolute; width: 100%; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; } /* SLIDE PANEL */ .open_slide_panel { position: absolute; right: 30px; color: #666; font-size: 20px; z-index: 4000; display: flex; align-items: center; } .open_slide_panel span { background-color: #00598f; color: #fff; padding: 15px; } .open_slide_panel span:hover { background-color: #57b7df; } .open_slide_panel i { padding: 0; margin: -5px 0 0 0; font-size: 25px; color: #fff; } .close_slide_panel { position: absolute; right: 30px; top: 0; padding: 15px; color: #fff; font-size: 20px; z-index: 5000; display: flex; align-items: center; background-color: #57b7df; } .slide_panel { height: 100%; width: 20%; background-color: #00598f; opacity: 0.9; position: fixed; z-index: 3000; top: 0; right: -20%; color:#F90; padding-top: 80px; } @media only screen and (max-width : 768px) { .slide_panel { height: 100%; width: 100%; right: -100%; } } .slide_panel ul { margin: 0; padding: 0; } .slide_panel li { margin: 0; padding: 15px; list-style: none; border-bottom: 1px solid #ccc; } .slide_panel a { margin: 0; padding: 0; text-decoration: none; color: #fff; font-size: 17px; display: inline-block; } /* END SLIDE PANEL */ </style> </head> <body> <div class="page_wrapper"> <h1>Page Content Goes Here</h1> </div> <!-- end page_wrapper --> <section class="slide_panel"> <div class="close_slide_panel"><i class="fa fa-times" aria-hidden="true"></i></div> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> <li><a href="#">Link 5</a></li> <li><a href="#">Link 6</a></li> </ul> </section> <!-- end slide_panel --> <div class="open_slide_panel"><span><i class="fa fa-bars" aria-hidden="true"></i></span></div> </body> </html>
... View more
‎Nov 18, 2016
05:49 AM
BenPleysier wrote: This is going way off the rails as per usual. I'll be over your way come March and April and we can war it out over a game of chess, a glass of cognac and a big Cuban cigar. Maybe that will stop your stalking. For now it's bye, bye. You should be so lucky........let me know the dates and I'll make sure I've left the country.
... View more
‎Nov 18, 2016
04:48 AM
BenPleysier wrote: You are boring me. I'm boring you because you anwsered very inappropriately as usual the question asked. How does 100k relate to anything they asked? Not sure actually why even Bootstrap gets a mention....maybe its your total obsession...you like to mention it inappropriately everywhere and anywhere you get the oppoortuniity. As you say Ben 'Bring it on'....
... View more
‎Nov 18, 2016
04:39 AM
1 Upvote
This may help: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Untitled Document</title> <link href="https://fonts.googleapis.com/css?family=Titillium+Web:300,400,600" rel="stylesheet"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script> $(document).ready(function(){ // Open slide panel $('.close_slide_panel').hide(); $('.open_slide_panel').css('cursor' , 'pointer').click(function(){ $('.open_slide_panel').hide(); $('.close_slide_panel').show(); if ($(window).width() > 768) { $('.slide_panel').animate({"right":"0px"}, "fast"); } else { $('.slide_panel').animate({"right":"0px"}, "fast"); } }); // Close slide panel $('.close_slide_panel').css('cursor' , 'pointer').click(function(){ $('.close_slide_panel').hide(); $('.open_slide_panel').show(); if ($(window).width() > 768) { $('.slide_panel').animate({"right":"-30%"}, "fast"); } else { $('.slide_panel').animate({"right":"-100%"}, "fast"); } }); }); </script> <style> /* ZERO ALL PADDING */ * { box-sizing: border-box; } /* SLIDE PANEL */ .open_slide_panel { position: absolute; right: 0; top: 300px; color: #666; font-size: 20px; z-index: 4000; display: flex; align-items: center; } .open_slide_panel span { background-color: #00598f; color: #fff; padding: 15px; } .open_slide_panel span:hover { background-color: #57b7df; } .open_slide_panel i { padding: 0; margin: -5px 0 0 0; font-size: 25px; color: #fff; } .close_slide_panel { width: 55px; position: fixed; top: 40px; right: 15px; color: #fff; font-size: 25px; z-index: 4000; } .slide_panel { height: 100%; width: 30%; background-color: #00598f; opacity: 0.9; position: fixed; z-index: 3000; top: 0; right: -30%; color:#F90; padding: 100px 50px; } @media only screen and (max-width : 768px) { .slide_panel { height: 100%; width: 100%; right: -100%; } } .slide_panel ul { margin: 0; padding: 0; } .slide_panel li { margin: 0; padding: 15px; list-style: none; border-bottom: 1px solid #ccc; } .slide_panel a { margin: 0; padding: 0; text-decoration: none; color: #fff; font-size: 20px; display: inline-block; } /* END SLIDE PANEL */ </style> </head> <body> <section class="slide_panel"> <div class="close_slide_panel"><i class="fa fa-times" aria-hidden="true"></i></div> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> <li><a href="#">Link 5</a></li> <li><a href="#">Link 6</a></li> </ul> </section> <!-- end slide_panel --> <div class="open_slide_panel"><span><i class="fa fa-bars" aria-hidden="true"></i></span></div> </body> </html>
... View more
‎Nov 18, 2016
02:28 AM
BenPleysier wrote: You are making no sense. Makes perfect sense. 'I try to keep my images below 100kb but certainly not above 400k' - what does that actually mean? I'l help you out here: You try and keep you small to meduim size image below 100k whilst your large hero image may be anything up to 400k. The OP was taliking about a World map so to suggest that could be below 100kb and readable is quite simple ridiculous. BenPleysier wrote: As you have stated, you don't care about the end user yet, according to all of your other posts, you do care about warning against a so-called 'bloated' Bootstrap framework. I care about visual impact as that it the single most important aspect of sustaining a user on most wbesites other than shite governnment site which dont have to compete - I certainly could'nt care less about providers of bandwith its up to them to offer unlimited plans. They could right now but why when they are making a killing - eventually one will like what happened with broadband. BenPleysier wrote: Which makes me wonder. Why did you single my post out for criticism? Having a hard time coming back to reality? Bring it on! I thought, given the context of the question being asked about large images (a World map) mentioning 100k images was out of context.
... View more
‎Nov 18, 2016
12:05 AM
That image is relatively small in this day and age of large hero images which may need to fit large screens - so you have already exceeded your 100k UNLESS of course you retsrict the visual impact....as for the first image being 514k at that size, well that's just a daft example.
... View more
‎Nov 17, 2016
01:06 PM
Below 100k thats just plain insane these days........for any website that wants to leave a lasting impression. Am l worried about uses on limited download plans, no way and neither are 99% of all companies producing websites. Those that do are just wasting their time by delivering inane boring content, instantly forgetable.
... View more
‎Nov 09, 2016
11:29 PM
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script> $(document).ready(function(){ var hidePanels = $(".panel").hide(); $(".flip").click(function(){ hidePanels.slideUp(); $(this).next(".panel").slideToggle(); }); }); </script> <style> .panel, .flip { padding: 5px; text-align: center; background-color: #e5eecc; border: solid 1px #c3c3c3; } .panel { padding: 50px; display: none; } </style> </head> <body> <div class="flip">Trigger 1</div> <div class="panel">Panel 1</div> <div class="flip">Trigger 2</div> <div class="panel">Panel 2</div> <div class="flip">Trigger 3</div> <div class="panel">Panel 3</div> </body> </html>
... View more
‎Nov 08, 2016
01:06 AM
1 Upvote
BenPleysier wrote: My apologies for having been too subtle for you. What my answer was eluding to is the fact that JavaScript requiring jQuery to function, was loaded before the jQuery library. AFTER I think you mean. No I understood loud and clear what you where refering to on account of loading the jQuery library before the lightbox.js BUT if you did you homework it still does not work - there is something else wrong with the set up. Also the lightbox is not 'truely' responsive I edited my last post to include the below but as you had already posted the edit was not allowed. 'Ok I see what is going on now - the lightbox is only responsive on the device you are viewing on. If I narrow the browser window on desktop the lightbox window remains the same width it was when initially opened...........humm a little annoying perhaps so it would kill it for me. If you check out Fancybox fancyBox - Fancy jQuery Lightbox Alternative that's what I'd expect a true responsive lightbox to do - to re-act to the narrowing/widening of the browser window.'
... View more
‎Nov 08, 2016
12:44 AM
Doormats & More wrote: Does anyone know why the Lightbox display is not working on the following page: Doormats & More - Detail Page I have all of the .js. & .css files attached - I have the rel="lightbox" attached to the rows of thumbnail image links - but the scripting does not pull up the lightbox display I have used this feature on several sites before & have it set up in the same way, as far as I can tell so I am stumped... Thanks. Something not quite right about your current lightbox js and css files, not sure where you got them from. If you follow the instructions on the plugins page for the script it works. Add the following 2 lines of code AFTER the link to your jQuery library at the bottom of your page: <script src="http://www.lokeshdhakar.com/projects/lightbox2/js/lightbox.js"></script> <link rel="stylesheet" href="http://www.lokeshdhakar.com/projects/lightbox2/css/lightbox.css"> Delete these 2 lines of code at the top of your page which link to the 'lightbox.js' and 'lightbox.css' : Change rel="lightbox" on all the <a> tags to: data-lightbox="example-set" Then it works. Not sure what Ben is refering too but unless my eyes are decieving me this lightbox solution is NOT responsive. Its not been updated in a while according to the link to the page that Ben provided.
... View more
‎Nov 07, 2016
11:21 PM
BenPleysier wrote: osgood_ wrote: I would'nt waste time on this lightbox solution unless you know how to make it responsive. The lightbox is already responsive. Not this one that you linked to though? Lightbox
... View more
Copyright © 2024 Adobe. All rights reserved.
AdChoices