The Web Design & Development Megathread

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > The Web Design & Development Megathread

«‹›2 »

Ghostlight: Sep 25, 2009; maybe for one second you can pause; try to step into another person's perspective, and understand that a watermelon is cursing me

I don't want you to kick yourself, but looking at your pictures folder the images you mentioned as working work because they are .jpg

The images that are not working do not work because they are linked as .jpg on the index but are, in fact, .JPG

# ¿ Feb 9, 2015 23:22

Adbot: ADBOT LOVES YOU

# ¿ May 14, 2024 06:34

Ghostlight: Sep 25, 2009; maybe for one second you can pause; try to step into another person's perspective, and understand that a watermelon is cursing me

Data Graham posted:

You'll appreciate his favorite technique for building a website that obscures the URL path:

Frames.

Sever.

# ¿ Mar 4, 2015 05:16

Ghostlight: Sep 25, 2009; maybe for one second you can pause; try to step into another person's perspective, and understand that a watermelon is cursing me

The Merkinman posted:

Any idea why an element with a single line of copy and equal heights and line-heights would be vertically aligned in Firefox but not Chrome? I can't just do a fiddle since it might be some other code conflicting. A simple test of the bare minimum is fine

Well if it works fine in isolation then the problem is other code, at which point it could be virtually anything.

# ¿ Mar 5, 2015 23:05

Ghostlight: Sep 25, 2009; maybe for one second you can pause; try to step into another person's perspective, and understand that a watermelon is cursing me

Kobayashi posted:

I want to inline an SVG so that I can style it directly from my stylesheet. The idea is, I work on an asset in Sketch at some huge resolution, export as an SVG, open up the file and copy out the paths, and dump those into an SVG element in my site's template. That way, I don't have to link to another asset, and I can control the size and presentation effects with CSS.

Unfortunately, I'm having trouble figuring out how to set up my container such that the SVG draws scaled to 100% of the parent, without clipping. In the example below, I'm trying to put a circle of arbitrary size in an SVG container that is nominally smaller than the circle itself (think downscaling an @3x Retina asset). I thought ViewBox was the way to go, but my circle is still getting clipped. Same thing with the styled example... Smaller, but clipped. Does anyone know what I am doing wrong?

http://jsbin.com/vavajepuni/1/

You're brainfarting and setting the values for ViewBox width and height at 100 each for a circle that is defined by a radius of 100. Double them and you're fine.

# ¿ Mar 24, 2015 05:21

Ghostlight: Sep 25, 2009; maybe for one second you can pause; try to step into another person's perspective, and understand that a watermelon is cursing me

Kobayashi posted:

Argh, true.

But that does go to illustrate the problem I'm trying to solve: I want to design vector art at a known aspect ration (e.g. 1:1), but not necessarily a known pixel size. I want it to scale like a normal "image," although I gather from subsequent reading that this really isn't easy to do and it's better just to decide on a pixel size and go from there.

I'm not sure if I follow. It's vector art so the pixel size it's designed at is arbitrary, all you need to sort out is how it's displaying. ViewBox tells the browser the actual scale of the SVG, and the browser then looks for a height and width attribute on the SVG or the container and maths out how to draw the SVG based on that. Once you've got your image, the ViewBox should remain static unless you decide you want to, for example, use the <circle> tool to make quarter-circles.

Taking your jsbin, the ViewBox for a full circle would remain constant at "0 0 200 200" because you've already told the browser to draw a 100px radius circle at y100px and x100px. The SVG will scale to 100% of its container or whatever its width and height are, using the ViewBox as a 'ruler' to determine how the measurements of the SVG increase - the actual measurements given are entirely arbitrary, they're just expressed as pixels because that's how browsers work.

These all draw the exact same circle:

code:

<svg viewbox="0 0 2 2"> <circle cx="1" cy="1" r="1" /> </svg>
<svg viewbox="0 0 200 200"> <circle cx="100" cy="100" r="100" /> </svg>
<svg viewbox="0 0 6000 6000"> <circle cx="3000" cy="3000" r="3000" /> </svg>

Because the actual rendered size is determined by size attributes or css styling - <circle> defines what the object is, while viewbox="" tells the browser how to measure the object.

# ¿ Mar 25, 2015 02:37

Ghostlight: Sep 25, 2009; maybe for one second you can pause; try to step into another person's perspective, and understand that a watermelon is cursing me

Kobayashi posted:

Basically I'd like to say viewBox="0 0 100% 100%", where "100%" means exactly as tall and as wide as whatever the child objects require. I don't want to concern myself with whether the circle's radius is specified as 1, 200, or 3000.

(I want it to work more like images and CSS, and less like its own document with its own coordinate system and viewport. I want it to work that way so I can set it and forget it, instead of leaving myself a comment for when I inevitably forget about how and why it works this way when I decide to change something.)

Right, so you just work on a 100 scale then - as I said, it's arbitrary what measurement you use it only matters how they relate to each other. When you have viewBox="0 0 100(%) 100(%)" you define the radius of the circle as 50(%). It doesn't matter what measurements you use, just how they relate to each other - for the viewbox to be 100% of a circle it just needs to be double the circle's radius because that's how circles roll. You need to define a viewbox because an SVG can contain multiple objects of different types and scale, and if you're using them to make a complex picture you'd need to hide some parts of them - it's generally easier to define a circle and hide half of it than 'draw' a semi-circle.

The viewbox can't know how tall and wide it has to be to fit the child objects because the child objects don't have a size until the viewbox is rendered - they are just a collection of co-ordinates defined in relation to the viewbox.

Once you define the object(s) and set the viewbox correctly you should never have to worry about it again - just apply CSS heights and widths to it or its container (SVGs by default scale to 100% of their container). I know Illustrator will define your viewbox for you based on workspace when you export code - Sketch should be able to do the same thing, so it shouldn't be something you actually have to worry about unless you're using the SVG tags to draw raw objects.

# ¿ Mar 26, 2015 04:13

Ghostlight: Sep 25, 2009; maybe for one second you can pause; try to step into another person's perspective, and understand that a watermelon is cursing me

No, it applies to the box.

# ¿ Apr 7, 2015 05:07

Ghostlight: Sep 25, 2009; maybe for one second you can pause; try to step into another person's perspective, and understand that a watermelon is cursing me

The Merkinman posted:

Anyone here try out Spartan in the latest Windows 10 build? The Cortana integration seems neat, but it feels like that's the only site it works on. I've looked at the code and not seen anything special, and in fact it looks pretty sub par as far as code (two #footers, no microdata, etc). Any idea how it works?

It's not in the web code. It's a side panel in Spartan itself that basically just goes off to Bing servers and grabs details from there, the same way Google gives you a map of the business with address details and opentable.com link on the results page for "cuoco seattle" - it's just formatted in a nicer manner and built in to the browser itself rather than a search results page. That's also probably why it doesn't work on basically anything else - it's not actively gathering that stuff on the fly, it's just pinging the server with the domain and asking if there's info there for it.

# ¿ Apr 8, 2015 04:41

Ghostlight: Sep 25, 2009; maybe for one second you can pause; try to step into another person's perspective, and understand that a watermelon is cursing me

They're doing it because you have width: 45% and no flex instructions.

Add flex-grow: 1; to the .index_content css.

# ¿ Apr 15, 2015 06:10

Ghostlight: Sep 25, 2009; maybe for one second you can pause; try to step into another person's perspective, and understand that a watermelon is cursing me

I would argue id="nav" is even more redundant than role="navigation".

# ¿ Apr 16, 2015 00:13

Ghostlight: Sep 25, 2009; maybe for one second you can pause; try to step into another person's perspective, and understand that a watermelon is cursing me

I didn't meant to not use id, but id="nav" is from a pre-nav era and only makes sense when you're targeting div#nav because you need to distinguish the navigation bar from the other divs in order to give it navigation specific stuff, but if you're distinguishing your navigation bar from other navigation bars you should at least use nav#top or something because nav#nav is quite opaque.

# ¿ Apr 16, 2015 00:48

Ghostlight: Sep 25, 2009; maybe for one second you can pause; try to step into another person's perspective, and understand that a watermelon is cursing me

Newf posted:

As you can see, a line break in one of the <td> elements results in that column being properly colored, but the others have their colors chopped off. The problem seems to be that the surrounding <tr> elements have a height of 0, eg, their heights aren't expanding to accommodate the size of the contained column data elements.

Anyone have a suggestion for how to fix this? A normal bootstrap table row has normal height behavior, and I'm not sure what in the custom css here might be interfering with that.

The problem is specifically because all of your <td>s are being rendered as float:left blocks but the <tr>s are non-floating blocks so they don't recognise their children's heights. Setting float: left and width:100% on the <tr>s will also fix the height issue, but your <td>s still aren't going to fill the <tr> height unless you give the row a defined height in pixels - however, either way of fixing the <tr> height will let you anchor the background colour to the <tr> instead.

# ¿ Apr 30, 2015 23:33

Ghostlight: Sep 25, 2009; maybe for one second you can pause; try to step into another person's perspective, and understand that a watermelon is cursing me

It's because your ::after is getting display:inline-block and trying to align itself incorrectly to the surrounding elements, which is a common issue with inline-block elements of differing heights.

If you're married to the text-align:justify fudge you're using for the logo position then you'll need to give the ::after a vertical-align:bottom property.

# ¿ Jul 21, 2015 13:05

Ghostlight: Sep 25, 2009; maybe for one second you can pause; try to step into another person's perspective, and understand that a watermelon is cursing me

I'm looking at migrating a website from their existing hosting, as it seems they bought it in the early 2000s and it's never been reviewed since then so they're paying way above what seems like a fair price ($50/m) and they'll need to pay more to slap on the MySQL database their intended conversion to Wordpress will consume. It's a local business, so three-quarters of their traffic is within New Zealand and their host probably should be as well.

Since I don't expect anybody here to have some really good leads on business hosting in NZ, what are some good guidelines for choosing a host? I've basically just googled local hosting and grabbed a dozen options based on price and features, what are the key things I should keep in mind while whittling these down to a shortlist for proposal?

# ¿ Jul 27, 2015 23:02

Ghostlight: Sep 25, 2009; maybe for one second you can pause; try to step into another person's perspective, and understand that a watermelon is cursing me

kloa posted:

iframes are still a thing in tyool 2015?

You may be thinking of frames.

# ¿ Aug 5, 2015 03:54

Ghostlight: Sep 25, 2009; maybe for one second you can pause; try to step into another person's perspective, and understand that a watermelon is cursing me

My first place to start would be the Emulation tab in IE's F12 Console.
If Vendor Y's platform wraps the site in anything then what could very likely have happened is they're no longer declaring an IE9 recognised Document Mode, or conversely it was designed with specific IE9 hacks that are no longer being recognised in the document because it's served in 11 mode.

Beyond that, it's going to start needing specifics about what the platform is and how different the code being served is to track down the issue.

# ¿ Apr 21, 2016 06:04

Ghostlight: Sep 25, 2009; maybe for one second you can pause; try to step into another person's perspective, and understand that a watermelon is cursing me

Google doesn't distinguish between a 'splash' page and a 'portal' page because they are both the same thing - a no-content page. The only difference is a 'portal' page has an additional "click here to continue" link on it.

# ¿ Apr 29, 2016 05:25

Ghostlight: Sep 25, 2009; maybe for one second you can pause; try to step into another person's perspective, and understand that a watermelon is cursing me

IAmKale posted:

I'm running into a strange...issue...while working with Cloudfront URLs. Basically, when I enter a Cloudfront URL to an image into my address bar and then hit Enter, the image downloads. What tells the browser to automatically download the file? Is there a way to get the image to show up in the browser window as though I were linking to a static asset hosted on a webserver?

The content-type for the files hasn't been set on the server so as far as the browser is concerned it's getting information it isn't designed to display and falls back on simply downloading so you can open it with an appropriate program.

# ¿ Jun 2, 2016 00:37

Ghostlight: Sep 25, 2009; maybe for one second you can pause; try to step into another person's perspective, and understand that a watermelon is cursing me

Anony Mouse posted:

Does this kind of thing actually work? I mean, it seems kind of rudimentary to be honest and too easy to programmatically determine which is the "actual" form.

Yes and maybe no.

I've got one set up like that where it's "Email" <hidden div><input name="email"></div><input name="optionalfield1">, but the amount of spam getting through it has increased notably in the last six months so I think there's at least one tool that has figured it out.

# ¿ Jul 9, 2016 05:43

Ghostlight: Sep 25, 2009; maybe for one second you can pause; try to step into another person's perspective, and understand that a watermelon is cursing me

I'm having to move a site between hosting packages and while I've copied all the files to the new package, it's only accessible through a control panel 'preview', which loads it as the http://server/sitepreview/http/url/?hash and as a consequence the site is actually unusable because all of my links are root-relative and therefore try to load from http://server/

While I know they'll of course work when they're loading from the domain address, I have this problem also with a subsection of the site as it loads from a directory on the testing server but its own URL on the live server, and I was wondering if there's a better way to do links that's more location-agnostic than using root-relative but doesn't involve full-relative where I'd need to put directory navigation ../ into the links?

# ¿ Aug 10, 2016 01:32

Ghostlight: Sep 25, 2009; maybe for one second you can pause; try to step into another person's perspective, and understand that a watermelon is cursing me

YO MAMA HEAD posted:

Went to a Jekyll session at connect-tech last week and the presenter mentioned https://staticsitegenerators.net/. There are literally hundreds of these

I don't understand what niche these really fill, and I say that as someone whose website stuff is almost entirely done in relation to a website running from a flat-file CMS that I wrote.

# ¿ Oct 28, 2016 03:37

Adbot: ADBOT LOVES YOU

# ¿ May 14, 2024 06:34

Ghostlight: Sep 25, 2009; maybe for one second you can pause; try to step into another person's perspective, and understand that a watermelon is cursing me

Just change the image url to be the same. The container doesn't care about how big a background image is.

# ¿ Oct 31, 2016 02:41

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > The Web Design & Development Megathread

«‹›2 »