• Home
• About
• Mom’s Birthday 2008
• RSS
• Skip

Im Voraus

1. Kristen 09.23.08 / 3am

   TMDDR

   Too many diagrams.
2. Conor 09.23.08 / 7am

   Oh man, I think I actually took some out! Some didn’t have bright, pretty colors.
3. cihan 09.23.08 / 7am

   I hope you won´t get blown away…And to “stay in” in a house that might be pretty looking like the ones you shown me on your pics won´t help you if the Typhoon really hits taiwan…I guess
4. Heliologue 09.23.08 / 9am

   .inside img {
   max-width: 100%;
   }
5. Conor 09.23.08 / 10am

   I laughed. I have tons of black space on either side of the post; I guess I should pay more attention to the resolutions people are browsing this at!

   I’ve tried to add this but don’t know enough about CSS. I’ll have to create a new image class (or div figure or whatever it’s called in CSS) and call that the img, right?

   There’s a lot of stuff I want to add to the CSS of this dated Wordpress theme I found online. I’ll add this to the list, and bump the list up on my lists of lists. This weekend will be CSS seminar!
6. Heliologue 09.23.08 / 11am

   Actually, it has very little to do with resolution (I’m on a wide screen).

   The single pages (like the one I’m typing on now) is fine. But your index has two columns, and the pictures are way to big for them.

   See, you have a main column (div class=”inside”) which is set to 90% of the screen’s width, but has a “max-width” of 90em (which ends up computing to about 990px).

   Within the div.inside, you have two columns which effectively split that width, being about 45em, minus padding and margin and whatnot (so, about 475px).

   Your pictures are 640px wide, and so they burst out of the boundaries of their containing columns.

   So you have a number remedies for this problem:

   1.
   
.inside img {
max-width: 100%;
}


   This works exactly as it’s typed: it means that any img tag contained with the center “inside” column will be resized to the maximum width of its column if it is bigger.

   2. Find this declaration (located on line #9 of your CSS file):

   
.inside {
margin: 0 auto;
max-width: 90em;
min-width: 65em;
width: 90%;
}


   And remove the part about “max-width”.

   Ideally, you could do both. For people with big screens, the two columns on the index page would use as much space as allowed; for people with smaller screens, for whom the columns would still be too small to hold the full pictures, they would be resized to fit the columns.
7. Will 09.23.08 / 11am

   I didn’t make it past the pictures, I hope there was nothing that you actually wanted to convey in this post.
8. Conor 09.23.08 / 3pm

   @Helio: Thanks so much for the careful walk-through. I’ve implemented the change.

   My garbage CSS file is formatted on a single line. I’ve compared it with others I’ve grabbed from the web, and perhaps I can parse it by hand in the coming days.

   Right now I’m working on getting the images to resize proportionally. From what I’ve seen so far I’ll have to make a PHP function to do this, but it doesn’t look terribly complicated. I want to be absolutely sure, though, that there isn’t a much easier way to do this within just the CSS file.
9. Heliologue 09.24.08 / 5am

   http://heliologue.com/host/conor_style.css

   Should be nice and formatted.

   When you say “resize proportionally,” do you mean that *new* images are generated? Or simply that they scale to a particular percentage of their containing columns? Doesn’t “max-width: 100%” already do that (even if IE doesn’t support it)?

   The other option is to do a quick jQuery function to grab the dimensions of the image and the dimensions of the column, and run some function thereupon.
10. Emily 09.24.08 / 10am

    did you just get owned?

    are you still alive after the storm?

    if yes, where on that map do you live?

    is there going to be a storm every weekend?

    why did simone pick this place?

    are you sure this program is a “privilege” and not Drexel’s Australia?
11. Emily 09.24.08 / 10am

    i want an edit button. i thought of funnier phrasings. alas.

Created by miloIIIIVII flavored with Hemingway for Wordpress.

Top | Sidebar | Entries RSS | Comments RSS