The Web Design & Development Megathread

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

me your dad: Jul 25, 2006

I'm putting together a dead simple landing page for a friend to serve as placeholder while he gets me some additional content. This is the first time I've tried to adapt a site to a mobile layout, and I'm hitting a puzzling roadblock.

My goal is to expand the #container div to 100% width and height of the window in both portrait and landscape view, with all content centered. I currently have the body color set to brown just to distinguish it from the container. I've tried various things and the only thing that will expand the container div is using a specific pixel width. But that defeats the purpose of a fluid layout.

There also seems to be a horizontal line in the body beneath the #container div. I have no idea where it's coming from.

I'm testing using the Chrome browser on a Galaxy S3. I ran an iPhone emulator and the results were even worse.

This is what I see on the S3:

What am I doing wrong?

Site: http://trailstrim.com/

Relevant CSS:

code:

@media (max-device-width: 600px) {
body {
background-image:none;
background-color:#633B1C;
}
#container {
width:100%;
border:none;
background-color:#343839;
}
#logo {
width:100%;
margin:0 auto;
padding:20px 0;
}
#logo img {
margin:0 auto;
}
#header h2  {
color:#D0E0EB;
font-size:2.5em;
font-family: 'Fjord One';
letter-spacing:7px;
text-align:center;
font-weight:bold;
text-transform:uppercase;
}
}

# ¿ Jul 23, 2013 02:42

Adbot: ADBOT LOVES YOU

# ¿ May 2, 2024 11:37

me your dad: Jul 25, 2006

Oh My Science posted:

I'm pretty sure the offending element is the img, try setting its width to a percentage when viewing in portrait or landscape mode.

I even made a thing, http://mobilelanding.herokuapp.com/, which I think does exactly what you want minus any fancy styling. It uses the portrait and landscape media queries to target mobile devices. Note that it doesn't do anything when using your desktop browser.

Thanks - I used your media queries for the screen size and now things are looking better.

But for some reason the img inside the #logo div won't center in portrait or landscape.

And a weird thing - when I go from landscape to portrait, the phone doesn't recognize the media query and uses the default styles. A page refresh sets it back to the mobile css.

# ¿ Jul 23, 2013 12:04

me your dad: Jul 25, 2006

cbirdsong posted:

To use margin: 0 auto on an <img> tag, you have to make it a block-level element. You could also just apply text-align: center to the #logo div, or in your case, the entire body tag, not just the elements containing text.

You should also add max-width: 100% to the #logo img style, so this doesn't happen:

Thanks - I can't believe I didn't think to use text-align on the body.

Regarding this problem:

I set #logo img to max-width:100% and it's still exhibiting that behavior when I go from landscape to portait. From portrait view, I go to the site and it looks fine. I rotate to landscape and it looks fine. I rotate back to portait and it seems to ignore the media query, producing what is pictured above. The mobile version doesn't have the wood background or the border, and the body background is set to the slate color.

Sorry to have so many stupid/annoying questions. I'm still pretty new to all this.

# ¿ Jul 23, 2013 16:34

me your dad: Jul 25, 2006

I'm designing an email template and I've gotten myself way bogged down in nested tables. In the layout below, I'm trying to get the top of the 'Lead Story Headline' box to align with the top of the 'Skyscraper Ad' box, but the two should not reflect each other's height. The 'Lead Story' headline will contain a line of text and the 'Skyscraper Ad' will contain a 600px high image. I need them to be independent of each other, but top-aligned.

What am I doing wrong here?

Here's the result of the code below (colored cells just to make things visible)

What it needs to look like when cells are populated with content (MS Paint mock)

code:

code removed to clear page length

me your dad fucked around with this message at 17:05 on Aug 29, 2013

# ¿ Aug 29, 2013 16:48

me your dad: Jul 25, 2006

Oh My Science posted:

I would say very few people use a browser at that height, have you considered editing the image and offering a high-res download instead?

This might be silly but I try to edit all images in a lightbox to a set height so that they match and the animations are less jarring.

I had a couple other images that I cropped to meet the height restriction, but I was hoping to keep this one in particular the original height. It seems like there should be a way in the css file to override the height but I can't find it.

# ¿ Oct 4, 2013 02:46

me your dad: Jul 25, 2006

Oh My Science posted:

It's hard to help without seeing code :/ I noticed that version 2.6 is out now, maybe an upgrade will correct the issue?

You could PM a link to me if it comes down to that.

I made a test page. The first image is fine. The second one is tall, and causes problems:

[website removed for now]

I'm a little nervous to update versions in case it breaks anything. I need this ready by Monday.

Edit: Curiously, the overlay fills the screen in IE8, but not Chrome or Firefox.

Edit 2: The div isn't centered in IE8 for some reason :suicide:

me your dad fucked around with this message at 23:30 on Oct 4, 2013

# ¿ Oct 4, 2013 12:25

me your dad: Jul 25, 2006

excidium posted:

If you want a hacky way of doing it in only CSS, add this:

height: 2300px !important to #lightboxOverlay in lightbox.css.

This will make the page height the largest for all page sizes the largest of all your images. Without this you'll need to hack around in the JS for the lightbox to ensure that the document height isn't calculated and applied until after the image is loaded into the DOM so that it accounts for the additional height.

Thanks - I'll give this a shot when I get home.

# ¿ Oct 4, 2013 15:41

me your dad: Jul 25, 2006

pipes! posted:

I hate to be a noodge about this, but you might want to might want to update the lightbox to something that's responsive/touch-friendly, and also kill the transition animations. Nobody has the time or desire to wait for that stuff to fire off while paging through your work.

Thanks for the feedback. Got any recommendations for a touch/responsive option?

I'll likely keep it as-is for now, since this will be for an interview on Monday, and I won't have a lot of time to redevelop everything. I'm not saying I won't try, but getting something in working order is my main priority right now.

(I do email marketing, so my HTML/CSS isn't as sharp as a full-on web designer/developer)

me your dad fucked around with this message at 18:06 on Oct 4, 2013

# ¿ Oct 4, 2013 17:52

me your dad: Jul 25, 2006

What do brackets indicate in a CSS file, as seen below in the table id?

code:

table[id="Container"]{
	max-width:550px !important;
	width:100% !important;
		     }

# ¿ Nov 1, 2013 21:52

me your dad: Jul 25, 2006

caiman posted:

Brackets are for targeting a certain attribute of the element, such as href, alt, etc.

VVVV I assume he means the "[]"s, not the "{}"s.

Thanks!

cbirdsong posted:

As far as examples go, this is a pretty weird use of that selector, since table#Container or just #Container would do the exact same thing.

I've found this to be a pretty good overview of the weirder CSS selectors: http://coding.smashingmagazine.com/2009/08/17/taming-advanced-css-selectors/

And thanks! I'll read up on that Smashing page.

# ¿ Nov 2, 2013 01:05

me your dad: Jul 25, 2006

HTML email question (hooray)

I'm sending a test email to Outlook 2013.

code:

 <p>
<span style="color:#635D9D !important; font-size:16px; font-weight:bold; letter-spacing:normal; 
margin-top:0;margin-right:0;margin-bottom:15px !important;margin-left:0;text-align:left;">
This text should be a shade of purple</span><br />

...more stuff... and then </p>

That purple text in the span is coming out black in Outlook 2013. The 'View in web browser mode' displays it purple. Gmail displays it correctly as well.

Here's a snippet from the style in the <head> for the paragraph tag. There are no rules set up dictating elements.

code:


p {
font-family:Helvetica, Arial, Sans-Serif;
line-height:150%;
padding-bottom: 5px;
}

loving Outlook.

Does anyone know how I might fix that?

[edit: broke code lines up to avoid breaking tables]

me your dad fucked around with this message at 18:37 on Dec 6, 2013

# ¿ Dec 6, 2013 18:31

me your dad: Jul 25, 2006

kedo posted:

code:
 

This text should be a shade of purple 

...more stuff... and then 
Welcome back to 90's web development where is still a thing! You might be able to find some crafty CSS workaround, but sadly that old, piece of crap tag still has the widest support in my experience.

Your problem is especially weird because Outlook 2013 supports CSS color, so who knows. Treat Outlook like the idiot program it is and feed it ancient code.

God I loath html emails.

Thanks - the tag worked beautifully. I'm taking over this stuff from a designer who uses heavy CSS in emails, causing all sorts of problems.

I've got to keep in mind to de-modernize things as I go along.

# ¿ Dec 6, 2013 20:51

me your dad: Jul 25, 2006

HTML EMAIL :fuckoff:

Sorry the code is a bit messy. I had to break lines to prevent it from displaying all hosed up on the forums.

The code below has two div elements within two nested tables, and each div contains some code to render a button. Unfortunately only the first button displays in Outlook 2013, despite the fact that both <!--[if mso]> statements seem to be the same.

Any ideas? I'm about at wit's end on this.

code:

<table width="100%" cellpadding="0" border="0" cellspacing="0" style="border-collapse:collapse 
!important;mso-table-lspace:0pt;mso-table-rspace:0pt;background-color:#FFFFFF;border-top-width:0;
border-bottom-width:0;">
<tr>
<td>
<table width="100%" cellpadding="0" border="0" cellspacing="0" 
style="border-collapse:collapse !important;mso-table-lspace:0pt;mso-table-rspace:0pt;
background-color:#FFFFFF;border-top-width:0;border-bottom-width:0;">
<tbody>
<tr>
<td><p>Tuesday, April 22, 2014<br />
10 a.m. &ndash; 11 a.m. ET
</p>

<div style="margin-bottom:20px; letter-spacing:1px;">
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" 
xmlns:w="urn:schemas-microsoft-com:office:word" href="#" style="height:30px;v-text-anchor:middle;width:150px;" 
arcsize="10%" strokecolor="#193d6d" fillcolor="#059dd6"><w:anchorlock/>
<center style="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">REGISTER</center></v:roundrect><![endif]-->
<a style="background-color:#059dd6;border:1px solid #193d6d;border-radius:4px;color:#ffffff;
display:inline-block;font-family:sans-serif;font-size:14px;font-weight:bold;line-height:30px;
text-align:center;text-decoration:none;width:150px;-webkit-text-size-adjust:none;mso-hide:all;" href="#">REGISTER</a></div>
</td>
</tr>
</table>
</td>
<td>

<table width="100%" cellpadding="0" border="0" cellspacing="0" style="border-collapse:collapse !important;
mso-table-lspace:0pt;mso-table-rspace:0pt;background-color:#FFFFFF;border-top-width:0;border-bottom-width:0;">
<td><p>Thursday, May 15, 2014<br />
7 p.m. &ndash; 8 p.m. ET</p>


<div style="margin-bottom:20px; letter-spacing:1px;">
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" 
xmlns:w="urn:schemas-microsoft-com:office:word" #" 
style="height:30px;v-text-anchor:middle;width:150px;" 
arcsize="10%" strokecolor="#193d6d" fillcolor="#059dd6"><w:anchorlock/>
<centerstyle="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">REGISTER</center></v:roundrect><![endif]-->
<a style="background-color:#059dd6;
border:1px solid #193d6d;border-radius:4px;color:#ffffff;
display:inline-block;font-family:sans-serif;font-size:14px;font-weight:bold;line-height:30px;
text-align:center;text-decoration:none;width:150px;-webkit-text-size-adjust:none;mso-hide:all;" href="#">REGISTER</a></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>

# ¿ Mar 25, 2014 16:25

me your dad: Jul 25, 2006

EAT THE EGGS RICOLA posted:

Seems to work here?

http://jsfiddle.net/N3RJb/

Yeah it works fine in a browser, just not in Outlook 2013 (and a couple other versions - deleted my Litmus results) when the email is delivered. It's really weird.

# ¿ Mar 25, 2014 16:38

me your dad: Jul 25, 2006

I use the Zurb email inliner for email markup. They always output the <style> tags in the body of the HTML. Isn't that incorrect? I always move it back up into the <head> section but I was just curious why they'd do it specifically for emails.

# ¿ Apr 11, 2014 19:38

me your dad: Jul 25, 2006

I give up and I'm desperate and I could really use some help :cry:

I created a simple email newsletter using the INK boilerplate but for some reason the two columns at the bottom just won't stack when tested for mobile viewing through Litmus. Instead of stacking they just cram together.

It stacks when viewed in Firefox when manually resizing the window. The original INK media query had a max-width of 600px and I changed it to 320px, thinking that was the problem but it's still not working.

Also, when they stack in the browser, a gap appears between them. Is there a way to eliminate this gap so the list looks seamless when stacked?

I have a JSFiddle here: http://jsfiddle.net/8gnK6/3/

I'm under pressure to get this working and I'd appreciate any help. ~~I'll buy the first person to get it stacking with no gap between them a forum upgrade of your choice or Paypal you $10.~~ Edit: I worked out a solution on my own.

EDIT: Here's how the columns look on an iPhone when viewed in Litmus:

me your dad fucked around with this message at 20:55 on Jun 21, 2014

# ¿ Jun 20, 2014 19:08

me your dad: Jul 25, 2006

gmq posted:

Try this: http://jsfiddle.net/8gnK6/4/

Thanks, but I'm getting the same result on mobile:

When viewing it in a browser and resizing the window the gap between columns is now seamless but the mobile part remains a problem. Also, the top of the columns are no longer even in mobile (right column is positioned higher). They look fine on desktop.

# ¿ Jun 20, 2014 20:28

me your dad: Jul 25, 2006

gmq posted:

Did you add a viewport=device-width meta tag to the html?

Here's what's in the head section:

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width" />
  </head>

That's copied directly from their site. Is the viewport meta tag there legit?

Jake Blues posted:

http://jsfiddle.net/8gnK6/5/

I made each of those tables "two columns" instead of "six columns".
Screenshot is from Chrome window resized for 400x800.

Thanks, but that's not going to work. The INK boilerplate relies on a twelve column structure. There can be many columns but their sum needs to add up to twelve. That's why I had two six-column elements. In other words, if you used two sets of two columns, you'd need eight more columns to make twelve.

# ¿ Jun 21, 2014 01:11

me your dad: Jul 25, 2006

KARMA! posted:

Why can't you use two two eight with an empty third column?

It'll cram everything to the left, like in the screenshot above. The goal is to have two evenly spaced columns on desktop, which stack vertically without separation on mobile. Having two six column tables *should* make that possible.

EDIT: I just grabbed one of their pre-built templates (Sidebar Hero, here and plugged it into an email and sent it to Litmus for client rendering. It had two columns that failed to stack too. INK just doesn't seem to work.

My template isn't too complicated. I may give it a go from scratch this weekend. I just can't find any reliable boilerplates.

me your dad fucked around with this message at 16:32 on Jun 21, 2014

# ¿ Jun 21, 2014 02:23

me your dad: Jul 25, 2006

We send HTML emails using a URL shortener for links. Someone forwarded one of our emails to us, and the link looked like this:

http://ow.ly/xxxx<http://tracking-url-from-our-email-marketing-platform>

When I create the emails, I insert the ow.ly links into the HTML. When the email is sent, our email marketing platform does its magic and plugs their tracking URL into the code.

What is it called when an email client 'extracts' and displays a destination URL from a link like the example above?

Never mind - I think I figured it out. I think the HTML email was converted to plain text at some point and the links were stripped out as a result.

me your dad fucked around with this message at 18:13 on Oct 16, 2014

# ¿ Oct 16, 2014 14:54

me your dad: Jul 25, 2006

If a web page has an image that is resized through the CSS, does the image file size stay the same?

In other words, if a hosted image is 1000x1000px but the CSS says it's 200x200, will the file size reflect the original large image or the smaller one?

# ¿ Dec 1, 2014 18:27

me your dad: Jul 25, 2006

Diabolik900 posted:

The file size stays the same.

Thanks - I figured that was the case but I wanted to make sure before making myself look stupid (not too difficult).

# ¿ Dec 1, 2014 18:56

me your dad: Jul 25, 2006

What CSS property would I use to prevent words from breaking and hyphenating in different display sizes? Basically, if a word is too long, it should break to a new line.

I'm seeing instances where a period at the end of a sentence is breaking into its own line, which leaves things looking pretty bad. Longer words at the end of a line are breaking with a hyphen, where I would rather the whole word simply shift down a line.

# ¿ Apr 17, 2015 16:59

me your dad: Jul 25, 2006

Thanks. To make matters worse, it's for an email :negative:

I fixed part of it but some clients, like Apple Mail and Outlook 2011 are hyphenating a word which in other clients is just moved entirely to its own line.

# ¿ Apr 17, 2015 19:39

me your dad: Jul 25, 2006

nevermind. it was depressing to think about.

me your dad fucked around with this message at 05:07 on May 10, 2015

# ¿ May 9, 2015 21:27

me your dad: Jul 25, 2006

I'm building a simple site for a friend. For some reason, the two middle elements of the navigation appear white on white in IE 11. When I hover over them, they appear in their hover state. Before I completely start over I figured I'd see if anyone here might spot something strange in my markup and CSS

Screenshot:

The HTML:

code:

	<div id="nav">
		<ul class="navbar">
			<li><a href="index.html">Home</a></li>
			<li><a href="about.html">About Me</a></li>
			<li><a href="services.html">My Services</a></li>
			<li><a href="forms.html">Forms</a></li>
		</ul>
	</div>

CSS

code:


/*including the main #content div in case it's helpful*/

#content {
width:900px;
margin:0 auto;
background-color:#ffffff;
padding:0px;
overflow:hidden;
border:1px solid #ffffff;
}

#nav {
background-color:#2FB8AC;
padding:0px;
width:100%;
margin: 0 auto;
text-align:center;
}

ul {
    list-style-type: none;
    background-color:#2FB8AC;
    margin: 0;
    padding: 0;
    overflow: hidden;
    text-align:center
}

li {
    float: left;
}

.navbar a:link, a:visited {
    display: block;
    width: 205px;
    font-weight: bold;
    color: #fff;
    background-color: #2FB8AC;
    text-align: center;
    padding: 8px 10px;
    text-decoration: none;
    text-transform: uppercase;
}

.navbar  a:hover, a:active {
 background-color: #309292;
}

me your dad fucked around with this message at 12:46 on Jun 24, 2015

# ¿ Jun 24, 2015 12:43

me your dad: Jul 25, 2006

obstipator posted:

.navbar a:link, .navbar a:visited {

thats probably it. The a:visited was applying everywhere instead of just on the navbar. Same with all the other spots in the CSS with .navbar

I'm at work and can't access the file, but when I go through the inspector and remove background-color:#2fb8ac, it did indeed make it visible. Thanks for the insight. When I get home I'll update the file and see what happens.

I still don't understand why removing that greenish background-color would suddenly make it appear though.

What's really strange is that it's only affecting the two middle elements. And at work, only the second element appears like that.

# ¿ Jun 24, 2015 14:36

me your dad: Jul 25, 2006

So I have this table (I do email design, leave me alone).

The table is 600px wide and is divided into three equal width cells which contain a nested table and some text. The text is not uniform in length, so everything ends up balanced to the left (see jsFiddle below).

Is there a good way to even out the spacing on these so everything looks truly balanced?

Here's a link to a jsFiddle with my markup: https://jsfiddle.net/zo6k5j15/6/

Rules: No use of floats, no use of margins.

# ¿ Jul 30, 2015 15:26

me your dad: Jul 25, 2006

kedo posted:

You could give those container <td>s a slightly different width each so that their width is related to their text (ie. twitter would be the narrowest), then align "PD EXPRESS BLOG" to the left, and "TWITTER" to the right. Or in short: eyeball it and gently caress with the widths.

I know there's an elegant, old hack that allowed you to justify inline-block items somehow to achieve this, but I'm pretty sure it used floats and the fact that it's a hack means it probably won't stand up well in email clients.

Thanks for the suggestion. I had previously tried varying the cell widths and changing alignment but it still looked off.

# ¿ Jul 30, 2015 16:55

me your dad: Jul 25, 2006

I'm trying to help create a printer-friendly style sheet. The page in question has a background image, with a header image overlaid on top of the background image. The client wants the header image to print (no problem). However, the existing header image has a lot of transparent areas, making it not print well.

Is there a way, strictly via CSS, to replace the header image? I have a non-transparent image to replace it with. I've done some reading and it seems it may be possible, but seemingly only if there's no background image already in place.

From what I read I tried:

code:

#HeaderImage1 {
content:url("http://www.sprisemedia.com/wp-content/uploads/2014/07/header_poly.jpg") !important;
}

It did not work. (That image is just a random thing found online - not what I'm using)

This is the immediate HTML around the image:

code:

<div style="background-color:#;">
	<img border="0" src="http://placehold.it/900x100" alt="" title="" id="HeaderImage1">
</div>

I do not have access to the HTML.

# ¿ Sep 28, 2015 14:37

me your dad: Jul 25, 2006

Munkeymon posted:

Like this? http://jsfiddle.net/ra3us67c/

It works great in the fiddle but when I try it on the page it doesn't print the replacement image.

This gives me a good start though. Thanks - I'll keep plugging away. This is for a page we use on Cvent (a meetings platform) and maybe they have something odd going on that would prevent it from functioning.

# ¿ Sep 28, 2015 15:25

me your dad: Jul 25, 2006

Munkeymon posted:

In Chrome, at least, the debugger/page inspector works on the print UI, too. It's a great way to remove ads from tickets before printing them, for example

All the 'Printer Friendly' button does is:

java script:window.print();

Which just opens the printer dialogue window so I don't get to preview the page with the styles.

# ¿ Sep 28, 2015 17:04

me your dad: Jul 25, 2006

Due to limitations beyond my control, I had to muck around with the print-friendly CSS on a live event and I was just forwarded an email from someone who wound up with 130 pages of nothing but the header image I was trying to replace :derp:

Needless to say I'm done. It's for an internal client and they can rethink the way they set up these pages in the future.

(the problem was only happening when printing to PDF. when actually sent to the printer, it was fine.)

me your dad fucked around with this message at 20:05 on Sep 28, 2015

# ¿ Sep 28, 2015 19:56

me your dad: Jul 25, 2006

I sometimes see padding shortened to only three elements:

code:

padding: 20px 20px 0px

How does this work? Is it because a value is set to zero and it's the same as doing this:

code:

padding:20px

I'm used to seeing four values when written shorthand and I'm trying to understand.

# ¿ Oct 22, 2015 19:15

me your dad: Jul 25, 2006

ddiddles posted:

The first value is top, the middle is left and right, and the third is bottom.

Thanks. This is much clearer.

# ¿ Oct 22, 2015 19:26

me your dad: Jul 25, 2006

Can anyone give me a good free online text editor? I'm doing a training session at my work and I need to have a room of people able to access a text editor. I only need it for HTML and CSS.

Needs to include syntax highlighting and a renderer so people can see the results of the markup.

I need it to be online because I don't want 40 employees to ask our IT department to install Notepad++

# ¿ Mar 5, 2019 15:41

Adbot: ADBOT LOVES YOU

# ¿ May 2, 2024 11:37

me your dad: Jul 25, 2006

-Anders posted:

Something like https://codepen.io/pen ?

That is perfect, thanks!

# ¿ Mar 5, 2019 16:36

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