|
Instead of having all 3 of those items floated to the left individually, wrap them in something that is floated to the left. So then you just have the two floated objects. At that point it doesn't matter if your sidebar is floated left or right, or not floated at all: http://jsfiddle.net/54buabx3/1/ If the page is going to start getting complex though look into an already established grid framework that will handle responsiveness in an easy way. ( IMO )
|
# ? Feb 12, 2015 13:46 |
|
|
# ? May 16, 2024 19:03 |
|
The Dave posted:Instead of having all 3 of those items floated to the left individually, wrap them in something that is floated to the left. So then you just have the two floated objects. At that point it doesn't matter if your sidebar is floated left or right, or not floated at all: http://jsfiddle.net/54buabx3/1/ Thanks man. That was really obvious. Sometimes I lament the fact my brain can't solve these basic logical problems.
|
# ? Feb 12, 2015 14:36 |
|
darthbob88 posted:It does, and that's actually half the problem. According to my boss, our internal tracking isn't matching the GA data as far as visits from desktop/tablet/phone/telepathy are concerned, so he wants to beef up our tracking to find out where the mismatch comes from. Which means I have to know and log whether somebody's visiting from desktop/tablet/phone/tin cans on a string. I am quite happy to tell him it's impossible/impractical, but if there is a quick and easy way, fuckit, let's add it. Do you know how your internal tracking works? It sounds to me like that's probably the issue. GA is fairly reliable. If it's some custom written system someone in your position previously baked up on their own, it's probably pretty crappy.
|
# ? Feb 12, 2015 16:52 |
|
kedo posted:Do you know how your internal tracking works? It sounds to me like that's probably the issue. GA is fairly reliable. If it's some custom written system someone in your position previously baked up on their own, it's probably pretty crappy. I do not, and yeah it probably is messed up, most likely someplace where I can't easily fix it. Maluco Marinero posted:There really isn't. A web browser can pretend to be whatever the gently caress it wants to be. Chrome calls itself "Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2228.0 Safari/537.36" in its user agent string. The best you can get is rough metrics based on things you can generally measure, and its unlikely you'll find a way to be more accurate than what analytics tells you.
|
# ? Feb 12, 2015 17:19 |
|
Whenever I go to my site, it loads completely but the favicon in my browser remains the spinning circle like it's still loading. It also makes my browser much slower and the page is laggy. I'm not sure what's going on, anyone got feedback? http://www.besiegedownloads.com/ The timeline in Chrome shows it takes about 3 seconds to long, but doesn't show anything going on after that. I know part of the slowness is that I have huge images, I'm working on the PHP to auto-size the images people upload. Also, when you google "besiege downloads", it links to a random page on my site that has no content. What's up with that? hayden. fucked around with this message at 05:15 on Feb 14, 2015 |
# ? Feb 14, 2015 04:59 |
|
I don't get that myself. Usually checking the console or net tab will reveal what's going on. Chrome, IE11, Firefox, I even registered, and it didn't occur. You need a 404 page that works: http://www.besiegedownloads.com/this-not-giving-me-a-404-page-you-idiot I'm assuming that because your homepage content is being served instead of 404s, google is seeing that as duplicate content, freaks out, and down-ranks your index page as duplicate content. Only pages deeper into your site are being ranked nicely as a result. Also try adding some more text, call-to-action type poo poo to your homepage, and its ranking will improve. Also your PNG images are enormous (~1.2mb). You should probably fix that and re-parse them to JPG's with a lower quality. Edit: You can do something like that with either Assetic or Munee. v1nce fucked around with this message at 06:19 on Feb 14, 2015 |
# ? Feb 14, 2015 06:16 |
|
It also probably doesn't help that my test site, on a different domain, somehow got a couple users instead of my live site. Which means Google probably indexed the test site too, and was like "welp this is identical". No idea how people managed to find it, I even emailed a guy who used it asking him how he found it and he said "youtube" but I have no referral traffic from Youtube so I don't know man. You'll be happy to learn that as a result of this, I finally made the transition to developing locally (XAMP) instead of doing everything remotely on test domains (which was already an improvement over just doing live updates [lol]) I'm working on the comment system now, so hopefully that will add more unique content to make Google happy. Thanks for the 404 heads up, never realized it mattered much. Also the site isn't doing the infinite load for me either anymore, not sure what was up. hayden. fucked around with this message at 07:33 on Feb 14, 2015 |
# ? Feb 14, 2015 07:00 |
|
Chris! posted:Hey, thank you for taking a look at this for me! That makes total sense and is a huge help. quote:But if the window size is small, and I hit the Maximize window button (or double click the title bar or whatever), the leftnav doesn't resize at all / it stays small. If I then resize the window manually, it resizes as required. The window.resize event is definitely being recognised, if I put an alert in there it fires as a window.resize event, but it's not resizing the content to match the image height. Any idea what I'm missing here?
|
# ? Feb 14, 2015 13:20 |
|
hayden. posted:It also probably doesn't help that my test site, on a different domain, somehow got a couple users instead of my live site. Which means Google probably indexed the test site too, and was like "welp this is identical". No idea how people managed to find it I'd love to know how Google does this. I've had it index development sites that were running on my cable modem and I was the only person to ever access them.
|
# ? Feb 14, 2015 15:33 |
|
In my case I left the analytics code in there, so I assume that's how.
|
# ? Feb 14, 2015 18:05 |
|
I'm reminded of a question of my own. Recently, I redesigned my personal website and took the step of building the CSS using SASS, which is indeed pretty awesome. Of course I did fall into the beginner trap of nesting styles too much, thinking more about organizing my SASS file neatly than the CSS output, which became needlessly verbose. I was also still using ids as styling hooks rather than classes, which I learned is somewhat frowned upon these days (or at the very least advocated against by a sizeable group). So after some reading up, I decided to rebuild my SASS file and see whether I could reduce the resulting CSS file size. Using class selectors instead of ids did allow me to remove some code to deal with specificity issues and coupled with better nesting the file size came down nicely. I then wondered whether I could leverage SASS' @extend for further efficiency. Unfortunately, I didn't have (m)any elements which were similar enough to really make good use of them. I did realise that I had quite a lot of font and color declarations sprinkled throughout my stylesheet and figured that making placeholders for those and extending these individual declarations might be more efficient. So I gave it a go, ending up with a SASS file that looks roughly like this: code:
In this example, you can tell at a glance that the h2 has the font settings applied for the regular serif font, which is changed to the sans-serif font, has bold applied and the accent color applied. With h2 being a very short selector, adding it to four declarations is more efficient than the other way around. It also makes it easy to apply multiple styles to an element without having to litter the HTML with classes as OOCSS does (which I'm not a big fan of) and it doesn't violate the DRY principle. Admittedly, it does lead to a horrible CSS output where the styles for the h2 are spread across four different declaration statements, but most CSS these days tends to be viewed through a document inspector and I figure that ease-of-use is more important for the actual SASS file than for the minified output anyway. Having said all of this, I still feel like I'm overlooking the reason why the above way of doing this is a terrible idea. I've Googled, but don't really come across any articles where this sort of use is discussed. All @extend examples seem to be about extending a full set of declarations for a standard item and then adding a few individual rules to it. So yeah, to sum up: why is this a terrible idea and shouldn't I be doing this, or alternatively, why is this a pretty good idea and aren't people (discussing) doing this? Leshy fucked around with this message at 18:13 on Feb 14, 2015 |
# ? Feb 14, 2015 18:11 |
|
Leshy posted:I'm reminded of a question of my own. Here's a good set of guidelines to look at. For one, extend doesn't work in media queries at all. They're also a pain in the butt to debug even with document inspectors, and it creates weird relationships between otherwise disparate elements that might confuse anyone who has to maintain/work on the same project. Personally I would just use mixins with default arguments; I can use those in media queries as far as I recall. chami fucked around with this message at 19:41 on Feb 14, 2015 |
# ? Feb 14, 2015 19:36 |
|
Thanks, I knew there had to be some good arguments why the above isn't a good idea. I think there's some points to be made against the relationship argument, insofar that this relationship only ends up existing in the output CSS file, which isn't something that anyone maintaining the project should be working on anyway. The media query limitation equally isn't that much of an issue (for me), but I wasn't aware that gzip compression was so efficient in nullifying the duplicate statements as to nearly negate the file size savings. That pretty much makes the @extend method pretty much useless in itself, especially considering the drawbacks. Thanks for the link, much appreciated. It contained links to a couple other good articles on the subject, so now I'm a little bit wiser than I was before!
|
# ? Feb 14, 2015 23:35 |
|
Font Awesome seems to mess up sometimes on my site: but it's weird because it acts like it completely does not have the font with a few exceptions (the bug, cog, shield, etc) and if I just move my cursor over the error square, the font pops back normal. Any ideas? hayden. fucked around with this message at 01:30 on Feb 15, 2015 |
# ? Feb 15, 2015 01:27 |
|
hayden. posted:Font Awesome seems to mess up sometimes on my site: Does your :hover styling change the font characteristics at all? It's possible that the font doesn't have a particular character with the default font styling for your site, but does have it for the hover styling.
|
# ? Feb 15, 2015 02:12 |
|
Hovering doesn't do anything other than change the background color the pill. I can't reliably replicate it despite plenty of trying. It also seems to happen more on my local copy running on XAMP. If I uncheck the "font" attribute in this screenshot and recheck it, it also fixes the problem (for everything on the page of that class). hayden. fucked around with this message at 03:23 on Feb 15, 2015 |
# ? Feb 15, 2015 03:19 |
|
I googled your site and it displayed the font-awesome icons without any problem. Not sure what's going on with it.
|
# ? Feb 15, 2015 14:40 |
|
I have some elements which need to be 100% of the width/height of the page, including when you scroll horizontally/vertically. As an example, this black bar is set to 100% width: What kind of CSS wizardry do I have to pull to get it to work correctly?
|
# ? Feb 15, 2015 15:59 |
|
ArcticZombie posted:I have some elements which need to be 100% of the width/height of the page, including when you scroll horizontally/vertically. As an example, this black bar is set to 100% width: If you set the black bar to position: fixed; it will be fixed in position even when you scroll, hope this is what you're after? And if you set it to 100vw this will be 100% of the viewport width which I think will be 100% of the initial viewport width even with a horizontal scrolling website (haven't tried that though and I'm on mobile right now so can't test, sorry). Chris! fucked around with this message at 19:10 on Feb 15, 2015 |
# ? Feb 15, 2015 19:07 |
|
Note that vm has limited browser support:http://css-tricks.com/viewport-sized-typography/ posted:IE 10+, Firefox 19+, Chrome 34+, Safari 7+, Android 4.4+, iOS 6+ - Supported Chris! already got it with the position:fixed, but here's a jsfiddle example of the whole shebang: http://jsfiddle.net/127d4y0x/ Interestingly it doesn't matter where you place the fixed element, it still attaches to the absolution position and size of the body: http://jsfiddle.net/127d4y0x/1/
|
# ? Feb 16, 2015 04:27 |
|
Be warned that that isn't universally true. If transform is used on any parents of a fixed element, it resets the context to that transformed element.
|
# ? Feb 16, 2015 07:02 |
|
Hello everyone, super newbie here hope this is the right thread and I have been lurking a bit. I was going to ask a silly question but fixed it myself. However, are ID tags under <div> constrained by scope? And what is the verdict of polymer to create your own elements? Thanks again. Oh and I really ought to learn and use github for easy version control rollback. Hopefully one day I will be more competent and help out github projects. caberham fucked around with this message at 10:32 on Feb 16, 2015 |
# ? Feb 16, 2015 10:24 |
|
caberham posted:However, are ID tags under <div> constrained by scope? ID's are not scoped to the elements in which they appear, no. They are unique to the document.* * I think this is probably not semantically/technically true in html5 but for all intents and purposes here you don't need to worry about that
|
# ? Feb 16, 2015 15:42 |
|
Kekekela posted:* I think this is probably not semantically/technically true in html5 but for all intents and purposes here you don't need to worry about that Pretty sure IDs are not constrained any scope other than window in the HTML 5 dom.
|
# ? Feb 16, 2015 18:35 |
|
Yeah, that's what I thought as well. It's just that my bootstrap modal window wasn't popping out properly when the <div> tag was nested in another tabbable pane The screen was still listening to another java event and leaving the page gave me an alert message. Anyways... That's why people started automating CSS with Sass, less and other frameworks/tools right? I kind of shiver about the thought of managing multiple id tags. So how do the Pro's do it? Just make a class out of a bunch of id's? At what point do you make more classes or switch from Id's? Sorry if my questions are more on the abstract end, I guess I will figure things out the more I practice and learn from other resources. Any has anyone here worked with Django and made Open ERP or Odoo modules? How hard is it working with 3rd party API's for "basic" functionality? Signed up for coursera "An Introduction to Interactive Programming in Python (Part 1)" course. Hopefully I can stick to the end and get something out of it
|
# ? Feb 16, 2015 19:10 |
|
An ID *should* be unique within a document. Libraries like jQuery will just grab the first element and ignore the rest if you have multiple with the same ID. If you need to attach the same behavior to multiple elements, just give them a class. An element can have multiple classes, and you need not specify styling in CSS for every class that exists.
|
# ? Feb 16, 2015 19:27 |
|
caberham posted:Yeah, that's what I thought as well. It's just that my bootstrap modal window wasn't popping out properly when the <div> tag was nested in another tabbable pane The screen was still listening to another java event and leaving the page gave me an alert message. Anyways... caberham posted:That's why people started automating CSS with Sass, less and other frameworks/tools right? I kind of shiver about the thought of managing multiple id tags. So how do the Pro's do it? Just make a class out of a bunch of id's? At what point do you make more classes or switch from Id's? Sorry if my questions are more on the abstract end, I guess I will figure things out the more I practice and learn from other resources. There's probable an article on this somewhere and I am not a designer, but here I go anyway. As Clark Nova said, IDs can (should) only appear once on a page, meaning they are unique to the element they are attached to. Common examples might be "#body-content", "#sidebar-left", "#footer" to name a few. They're also used to connect some basic elements together, like inputs and labels, or tables and headers: code:
code:
In raw CSS you can end up writing a lot of crap like this: code:
The CSS can then look something like this, in SCSS (reader beware: I'm rusty): code:
LESS/SCSS/SASS is still just an intermediate language - it's still compiled out to raw CSS declarations. Various frameworks exist (Foundation, Bootstrap) to make your life easier getting off the ground. They also standardise the various browsers and environments to look and behave as similarly as possible, and they're maintained so any changes to those environments get fixed and everything continues to work as desired. If you're doing it right then you'll come to restyle the framework you're using, giving your site a more unique feel, rather than just another bootstrap clone. You'll also come to dig deeper into the underlying CSS and add changes, tweaks, and new CSS declarations as needs be. When you're writing new CSS rules, namespacing your CSS is one of the most important factors to not making a complete mess, and avoiding the need to use !important all over the place. Personally I find the use of !important an indicator that the designer didn't appropriately constrain their rules, and are fighting their own lack of planning. You can namespace your rules in a variety of ways. The most obvious is by a parent ID, where your CSS is only intended to appear in one specific location on your site, such as in the footer: code:
Another super obvious option is by a container class: code:
code:
code:
code:
I realise I've just made a huge post about suitable approaches to basic CSS. I sure hope that's what you were asking about. caberham posted:Any has anyone here worked with Django and made Open ERP or Odoo modules? How hard is it working with 3rd party API's for "basic" functionality? Signed up for coursera "An Introduction to Interactive Programming in Python (Part 1)" course. Hopefully I can stick to the end and get something out of it
|
# ? Feb 17, 2015 00:11 |
|
I'm looking for some advice wrt javascript frameworks, and maybe more. I work developing websites using ASP.NET Web Forms with DevExpress controls. They're for other companies to submit and manage data and view reports. It's nothing overly complex, but we have some very large pages for data submission with a lot of validation and error messaging events as well as other controls that need to be shown/hidden/otherwise manipulated based on the user's input. Using the current setup, it's very hard to centralize any of the logic, since much of it needs to be executed in code behind as well as javascript, for multiple controls, and multiple pages. It's also difficult to manage the pages' lifecycles and we end up with unintended postbacks and page refreshes that slow the page down considerably. We're about to start a new project doing very similar work, but we have the opportunity to update our technology. We have a lot of freedom in our choice. ASP.NET MVC is the obvious segue, but we have discussed Ruby on Rails too. My question now, though, is about javascript frameworks. None of us have any experience with them, and I'm fairly new to web development as a whole. If we stick with ASP.NET MVC, we won't need something overly complex, so I'm leaning towards React. On the other hand, we'll be dropping DevExpress controls, so it may be swifter to use something like Ember with its handlebars, I think they're called. We'd had Angular in the back of our head based solely on its popularity until the news of Angular 2.0 came out, and it seems too late for us to adopt 1.x, and too early to adopt 2.0. I've been reading the topic and you guys have already discussed frameworks a good bit, I'm just hoping for some more suggestions. I know the problems I'd like to avoid, and my priorities are getting more of our logic onto the clientside, and allowing for more reuse and centralization of code. A move to MVC will already be a big help, as will the inclusion of HTML5 and JQuery, but if we're going to update, we may as well be as cutting edge as we can.
|
# ? Feb 17, 2015 05:30 |
|
Man you guys are so nice, thanks for being so informative. Yeah, you are right, the other tab pane was hidden. Really appreciate the simple approach to CSS. I will be working my way up to sass / less /scss in the future. This is a bit out of the blue, but is it possible to make some sort of spreadsheet/sql/database for CSS styles and just load that up? I'm using http://bootstrap-live-customizer.com/ and it's a bit fun. I do worry that if I over-customize bootstrap then it's no bootstrap anymore and everything breaks. The tutorial I'm using claimed to be boot-strap 3 but the class definitions for the <navba> are really off. Anyways, so much learning so much fun. Bootstrap is a decent framework, making everything responsive and all, but hopefully I can learn how to customize and style it. I'm no designer or artist, but I have a gut feeling that all barebones bootstrap look kind of the same - Navbar, sliders, Well, feature items, contact button, footer. Everything is just so boxy and rectangular. Oh well, I'm just average i guess. I just did a random search for "top websites" and found these guys: http://tribalmedia.co.uk/ Looks snazzy, but their collapsed menu doesn't work Maybe it's just me being a goony goon and spending too much time on the internet to notice these things about web pages.
|
# ? Feb 17, 2015 05:32 |
|
Also, what do people think about two-way data binding? That was one of the main draws of Angular / Ember, but it seems it won't be included in future versions of either technology. It sounds so useful, though, is there any particular reason it's falling out of favor?
|
# ? Feb 17, 2015 06:43 |
|
Because keeping your state well separated becomes more maintainable. The flux architecture is not just popular because it runs fast, its easier to control change and build big applications without getting wires crossed and messing things up.
|
# ? Feb 17, 2015 06:48 |
|
Zero The Hero posted:Also, what do people think about two-way data binding? That was one of the main draws of Angular / Ember, but it seems it won't be included in future versions of either technology. It sounds so useful, though, is there any particular reason it's falling out of favor?
|
# ? Feb 17, 2015 07:08 |
|
Sedro posted:I haven't heard anything like that about ember. Source? I don't have a source, it was just mentioned in a couple of articles I read recently. I could be wrong, but I did see it more than once, so I just assumed it was true. Like I said earlier, I don't know very much about javascript frameworks.
|
# ? Feb 17, 2015 07:16 |
|
Zero The Hero posted:I don't have a source, it was just mentioned in a couple of articles I read recently. I could be wrong, but I did see it more than once, so I just assumed it was true. Like I said earlier, I don't know very much about javascript frameworks. And where are you getting that 2-way binding won't be in future versions of Angular? I've seen nothing to indicate that is true.
|
# ? Feb 17, 2015 09:07 |
|
Sedro posted:I haven't heard anything like that about ember. Source? I can't find the relevant HN thread, but one of the maintainers stated a couple of weeks ago that future versions would have it disabled by default; not removed entirely though.
|
# ? Feb 17, 2015 12:39 |
|
RobertKerans posted:I can't find the relevant HN thread, but one of the maintainers stated a couple of weeks ago that future versions would have it disabled by default; not removed entirely though. The core team proposed this in their The Road to Ember 2.0 RFC Highly recommend you give that a look if you haven't seen it as it elaborates exactly where the core team sees Ember going. Some of the items in the proposal have already been implemented and many more are on the way.
|
# ? Feb 17, 2015 15:34 |
|
Chris! posted:If you set the black bar to position: fixed; it will be fixed in position even when you scroll, hope this is what you're after? And if you set it to 100vw this will be 100% of the viewport width which I think will be 100% of the initial viewport width even with a horizontal scrolling website (haven't tried that though and I'm on mobile right now so can't test, sorry). I guess I wasn't too clear. If you go to the website, you can see the problem in 2 ways. If you make the window narrow enough so you have to scroll horizontally to see the entire board, when you scroll to the right you'll notice the black bar does not extend to cover this area. Likewise, if you make the page short enough that you need to scroll vertically and then press the help button, you'll notice the white background does not extend down into that area.
|
# ? Feb 17, 2015 20:12 |
|
I have a project moving into development that needs to be WCAG 2.0 AA compliant. I'm already aware of all of the requirements and have a few checklist resources, but are there any tools out there to which I can submit pages to see if they meet the standard?
|
# ? Feb 17, 2015 22:28 |
|
This is probably an impossible question, but I've started a new project at work and I haven't touched web design & development in about 4 years. This website has a huge horizontal scrollbar in IE9 and Chrome, a tiny horizontal scrollbar in IE11 and none (intended) in Firefox. I'm digging through the Master Page and CSS to see if anything immediately catches my eye but I really have no idea. Kind of just hoping this is some sort of remotely common issue and someone might have a suggestion where to start?
|
# ? Feb 17, 2015 22:48 |
|
|
# ? May 16, 2024 19:03 |
|
Sab669 posted:This is probably an impossible question, but I've started a new project at work and I haven't touched web design & development in about 4 years. CSS code:
|
# ? Feb 17, 2015 22:53 |