|
I'm doing a site redesign and have been passed a mockup from our (non-web) graphic designer that has a portfolio display in a three column grid, with the images of some projects in the portfolio spanning two columns - it looks nice, but the main feature we're redesigning for is being able to filter through projects by several different criteria and I have no idea how to even begin implementing that sort of design while having the list be able to resort itself arbitrarily so that there aren't blank squares, either dynamically or through forcibly refreshing the page. It strikes me as a really nice visual element someone else might have solved though. Does anybody have any ideas?
|
# ¿ Jul 4, 2013 01:13 |
|
|
# ¿ Apr 28, 2024 18:05 |
|
kedo posted:I'm not sure if it's intentional or not, but the carousel on that site is fast enough that I couldn't finish reading half the quotes. Are they just being meta? I don't know!
|
# ¿ Jul 18, 2013 05:53 |
|
Transmogrifier posted:Seems some developers are working on a new web design app that will function more as a designer tool than a coding tool. They just posted a sneak peek of the app in action, starting from a blank canvas to the actual HTML and CSS output. It's called Macaw and it's looking really promising.
|
# ¿ Jul 24, 2013 05:58 |
|
Suspicious Dish posted:If you do the math of when upgrades were released and what an upgrade usually costs, it's actually cheaper month to month. They're no longer planning major versions you have to upgrade to anymore; they release features when they're done.
|
# ¿ Jul 24, 2013 22:09 |
|
Quick question - I'm using jQuery .toggle to show/hide divs based on their class as part of a filter and I've come onto a stumbling block on alphabetical filtering because the divs are assigned a single letter class but the page design has the filters covering a range like A-B and J-L. The code I have at the moment is code:
I'm completely brainfarting on whether there's a way that isn't like 25 ifs and an else to conglomerate the alphabetical categories and whether it would be better to handle it during the PHP substr or in the jQuery. The categories are kind of arbitrary because the designer was trying to split the actual content evenly across the alphabet so it's A-B, C, D-H, J-L, M, N-R, S and T-Y.
|
# ¿ Aug 22, 2013 05:26 |
|
Depressing Box posted:Hmm. Maybe a regular expression? Then you could check for a range of letters (e.g. [a-h]):
|
# ¿ Aug 23, 2013 03:44 |
|
Out of unskilled curiosity - I have a page with a dozen or so identical static elements (publications with author/date/blurb) that will conceivably stretch to a couple of dozen over time, and this is the third revision of exactly how they would be presented. I have no CMS or MYSQL, so how batshit is it for me to write it so the actual text is just a series of php arrays passed into a function that dumps them into the current design structure of <div><img=""><p> etcetera?
|
# ¿ Oct 10, 2013 06:23 |
|
fidel sarcastro posted:You could pretty easily make a PHP (or whatever language your host supports, really) template that loops through your array and creates the html for each item. You probably don't even need to write a function, honestly. How are you getting the data into the array in the first place? Basically I have a page full of these code:
code:
Oh My Science posted:You could skip all the PHP and use http://jekyllrb.com/
|
# ¿ Oct 10, 2013 23:28 |
|
That should do it; bearing in mind that it will only apply those properties to the object relative to the container that it's in. If its container has margins, paddings and positioning of its own then the auto margin will centre your <ul> within the space those allow it. On my own front - anybody know anything about handling Google Toolbar? Its pop-up blocker is blocking all our website's PDFs from opening that use target="_blank" and I can't figure out if that's intended behaviour or if there's something I can do to avoid triggering it. I wouldn't normally worry, but our industry fairly widely uses a few Google products that 'helpfully' include it as an opt-out on install, and our consultants keep submitting them as broken links because all the toolbar does to indicate it's blocked a "pop-up" is put a little exclamation marker on the pointer.
|
# ¿ Oct 23, 2013 05:01 |
|
If that's literally your HTML I'd say your first problem is that you aren't declaring the <ul> or its <div> as a .center
|
# ¿ Oct 23, 2013 05:27 |
|
You want position:absolute rather than relative (relative means it is the anchor to position things in relation to) At best inference from the K-Create blog, if your <img src> is placed next to the existing dinosaur head then it should position itself somewhere underneath the dinosaur head, at which point you just add in top: -100px and left: 1px to position it correctly over the existing elements. So code:
|
# ¿ Nov 4, 2013 02:23 |
|
supermikhail posted:Hopefully, this is enough. Anyway, in CSS I "display" all divs as inline-block and give the slider-area height of 100% which should make it as tall as the scale which doesn't happen and for some reason slider-area behaves as if it's limited by the bottom "p" in the completely unrelated div, and it's stuck at the bottom of the scale. I can increase the height manually, but it will only go down. In other words, I want to expand slider-area to the height of scale, but can't. What am I missing? It goes down because inline-blocks share the baseline of the last inline element, so you need to set vertical-align: top; for #slider-area.
|
# ¿ Dec 5, 2013 02:40 |
|
^^^ depending on how you're dynamically creating the images, $(window).load should fire after the page has finished loading all its elements. I have a Rewrite conundrum. I have a site (https://www.url.com) that serves a different language version under https://www.url.com/china/ - I currently have code:
e: also how do I post example urls without them being encased in BBcode
|
# ¿ Dec 17, 2013 01:24 |
|
Inline-block is kind of dumb, in that it's useful but it has a bunch of special cases and weird logic to it. Anyway, the issue is that you're floating the search box right which is loving up the text-flow that inline-block demands. Quick fix for the alignment issues: #header { text-align: right; } #search { And the bonus is you can delete .space entirely because now that you're no longer floating #header it will correctly detect the height of #search.
|
# ¿ Dec 17, 2013 06:31 |
|
kedo posted:Out of all of the new CSS pre/postprocessors coming out every drat day, this is about the only one that's seemed intriguing to me: http://www.myth.io/
|
# ¿ Dec 17, 2013 23:31 |
|
Yes. The icons you're thinking of are just graphical symbols being used on your desktop to navigate to programs in much the same way you might use Wingdings arrow characters on a webpage to navigate pages - which is why the overlap in terminology. Essentially it's just a stock or even custom font that you serve up with the webpage and then pull symbols out of it rather than individually link to an image of that symbol or use CSS to position an image of every symbol so that only one is visible.
|
# ¿ Jan 10, 2014 02:28 |
|
MondayHotDog posted:1. How do I make the content of images show up in Google searches? Would just adding alt text work? 2. Put the next, previous and strip images inside a <div> the same width as the comic strip and then set the next/previous to float:left and float:right.
|
# ¿ Jan 26, 2014 11:25 |
|
Does anybody know anything about Lync integration into web sites? I'm having trouble turning up good resources to see if what I want to achieve is possible, but basically our company has moved to Office365 and I've been secretly porting our intranet from CMSMS into Wordpress so I'm looking to see if there's a way to integrate Lync into the staff directory so that it's automatically updated rather than relying on a single person in the company to manually keep it up to date. I found some bits and pieces mentioning that Lync integrates into SharePoint, but I can't seem to find anything about really whether it's only SharePoint that can access Lync features (or even what features it can); whether the whole site needs to be on SharePoint or, if I can tunnel to it from another platform.
|
# ¿ Jan 30, 2014 05:41 |
|
I'm pretty sure it's in the HTML4 specification, if not as a hard rule then as a guideline. I've done it for years simply because it makes structural sense to me and it works.
|
# ¿ Feb 7, 2014 22:40 |
|
Lt Moose posted:I'm having some issues with CSS and IE7. I'm working on a page for an intranet site, and unfortunately IE8 defaults to using compatability mode for all intranet pages. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> I don't know what most of that really means because I'm a poo poo coder Also, I recall that when IE goes into compatibility mode it sets its browser mode to the previous version because someone at Microsoft decided that intranets will always be updated less often than new browser versions are deployed (ha!) - so IE8 in compatibility is reporting itself as IE7 and thus not triggering that [if IE 8]
|
# ¿ Feb 9, 2014 09:20 |
|
stoops posted:I'm trying to work with css3 filters on images, mainly hue-rotate.
|
# ¿ Feb 11, 2014 04:47 |
|
That's not a grid system, it's a plea for euthanasia.
|
# ¿ Mar 4, 2014 04:26 |
|
Red Robin Hood posted:I just need to be pointed in the right direction. Every form I'm finding online seems to have the user fill out a contact form but just generates an email after they press submit. I'd like it to just send an email to the specified email address after they press submit so that they don't see where it goes and they don't have to even have an email client. Unfortunately I can't find the reference I used to build the code I'm using for validation.
|
# ¿ Mar 9, 2014 23:03 |
|
Since you only want it sometimes rather than every time and you have existing margin/paddings on the <p>, I'd say your best bet is either a paragraph class like <p class="ultofollow"> removing the bottom margin/padding and then something like p.ultofollow+ul to remove the ul's upper margin/padding; or, a ul class with a negative top margin to fudge it by overlapping the blocks.
|
# ¿ Mar 10, 2014 02:46 |
|
Your selector just worked fine for me in 27 and then I was prompted to update to 28 where it also worked.
|
# ¿ Mar 23, 2014 21:20 |
|
Jeherrin posted:Would this be the thread to ask about SharePoint? Backstory: a client is using Office365's SharePoint to host his public website. I am designing and developing it. I am familiar with HTML/CSS, not really a problem there. The design is done, and now I'm onto the development. And I just finished porting the entire thing to Wordpress
|
# ¿ May 21, 2014 06:58 |
|
I need to bone up on like basic web management stuff - best practices, version control, what I should look for in hosts, security measures, that sort of thing - as I've basically being promoted from defacto intranet/internet maintainer because I can code into being in charge of the technical web strategy under guidance by Marketing. I have pretty much only experience doing personal projects where I didn't have to give a poo poo about being hacked or social media, and I have no clue how to scale this into a corporate environment. Work is willing to upskill me, but the only courses I can find are in the area of "this is how you make HTML and use FTP" and "spend 70 hours a week crash-coursing Ruby on Rails". I was hoping people here knew of a certification that might cover this type of stuff, or any good web resources where I can start getting my head around how you actually manage a web site rather than just update and code it.
|
# ¿ Jun 10, 2014 00:39 |
|
nav li .active was just an example - the easiest way to do it is to simply track down what rule it is obeying, then either make your intended behaviour one that is one level higher in specificity or reduce that base rule by a level of specificity; which is best is dependent on what the rest of your rules are doing around it.
|
# ¿ Jun 13, 2014 14:01 |
|
Pollyanna posted:except that the height of the panel is equal to that of the button. And it's also not a panel, it's just text. From what I can gather you just want some text next to a button without a linebreak, in which case you either float the text element or position it absolutely within the container. As Kobayashi says, it's a lot easier to code to a design rather than a description - if it's suitable you can wholesale steal that grid code if you want, because the white spaces between groups is just margin: 0 0 1.25em; applied to the button elements.
|
# ¿ Jul 15, 2014 01:30 |
|
cbirdsong posted:Is it not obvious that this is more significant than a simply rearranging things? Four things you can do are immediately accessible and visible, and lead you straight to something labeled "More" where you can find the rest of the stuff you can do. This is a lot more clear about the options available than when everything is hidden behind a single unlabeled icon. It's much harder to elegantly implement this on a web site, but that doesn't mean it isn't easier for users. I agree it's a better design but at no point did they remove or move away from the TWO hamburgers they have, which makes it a terrible example to post on a Kill The Hamburger Button article. Ghostlight fucked around with this message at 23:43 on Jul 15, 2014 |
# ¿ Jul 15, 2014 23:40 |
|
Subjunctive posted:We did move away from it, in that we replaced an "all nav" affordance with an "other nav" affordance. Putting the hamburger icon on the "more" tab, f.e., really changed the way test users navigated. Much more so than I would have predicted.
|
# ¿ Jul 16, 2014 22:48 |
|
Your ability to weather somewhat insane decisions like using HTML and CSS as a mode of interacting with Word and InDesign documents.
|
# ¿ Jul 25, 2014 13:07 |
|
I'm interested if more experienced developers can weigh in on it - but: Everything I read says that you should obscure email addresses from crawlers, but also that basic text processing was part of what crawlers did so simply replacing the @ with 'at' doesn't do anything but inconvenience people because as soon as it became a way to confuse harvesting scripts, harvesting scripts were written to read it. When we put emails on our website I was told they had to have obfuscation but it was left to me how to do it, so they're currently being served up by javascript in rot13 and then unjumbled. I don't know how good that actually is (certainly better than AT DOT), but we didn't get the expected spike in raw spam numbers after putting emails up.
|
# ¿ Jul 29, 2014 23:59 |
|
It's because Height: 100% inheritable all the way to <HTML> is setting the initial viewport as the height, since that is the parent element. When the content reaches this limit it just spills on down over. On a full screen, depending on resolution, you can see that #message and #photo aren't actually filling the space they're given, and resume is always below the fold. If you want to retain that behaviour, just add a clear: left rule to #resume to force it below any spillover content.
|
# ¿ Aug 14, 2014 01:29 |
|
jackpot posted:Resetting the base font size would break things in ways that would be seen pretty quickly. The whole purpose of em is so that everything maintains its design relativity to the other elements, as opposed to pixels which are an absolute "it's this big, deal with it" and run into issues with mobile devices that misreport their resolutions and people who have increased their font-size for readability.
|
# ¿ Sep 4, 2014 05:44 |
|
I think a quick way to tidy it up would be to leverage the tabbed design your Popular Posts section 'establishes' by moving all your other sections up into a tabbed section next to your Articles. It would give your other sections more visibility by rescuing their headers from below the fold, increase the available size for them as they could then occupy the same space as Articles without bloating it, and you already have the tab-style graphics done on their headers.
|
# ¿ Sep 19, 2014 07:47 |
|
Bob Morales posted:Does anyone actually use Dreamweaver other than kids in web development classes?
|
# ¿ Oct 10, 2014 12:58 |
|
I believe the phrase is first-class mobile experience
|
# ¿ Oct 29, 2014 04:07 |
|
I think what they mean is that they know, as a developer, that a small-6 is half of whatever it is in; but, they worry that the creative team will have a tendency to think that every small-6 is a half of the document, and the question is if there's any way to 'fix' it so that nested column classes aren't relative to their container. I'm not that familiar with Foundation, but I'm fairly sure the answer is no.
|
# ¿ Nov 14, 2014 02:22 |
|
|
# ¿ Apr 28, 2024 18:05 |
|
I've got a solution to a problem but it's basically hacking around a bush with a machete and I was wondering if there's a really easy and elegant solution I'm completely overlooking. I've got a php function php:<? function Images($mode,$article,$youtube = NULL) { $thumbsGlob = glob("images/$mode/$article/$article*g.jpg"); natsort($thumbsGlob); if($youtube) { array_unshift($thumbsGlob,$youtube); } return $thumbsGlob; }?> Is there a nice succinct way to tell php to use the base directory for pathing regardless of what directory the function is called in while also providing a URL to the resource that doesn't require cleaning up before sending back for use?
|
# ¿ Feb 9, 2015 22:10 |