Sarah Palin vLog

Frightening… But I couldn’t avert my eyes.

And the last one

Be sure to watch the rest… And don’t take your positions too seriously ;)

On a side note, I thought the Keith Olbermann piece was particularly hilarious. I do watch him on MSNBC, but it was still really funny.

8 thoughts on “Sarah Palin vLog

  1. I’M PRINCESS OF THE WORLD.

    Bahahahahaha.

    By the way, I’ve been forgetting to ask you a question related to your previous entries about div organization. Is there any particular tool that you use which actually visualizes the div layouts in your browser? I’m writing a few websites and having some problems getting all the divs to cooperate. I’ve been using the FF plugin “Web Developer” ( https://addons.mozilla.org/en-US/firefox/addon/60 ) and using the “Outline Block Elements” and the “Display Div Order” options, but they’ve been somewhat opaque at best.

  2. I prefer to use Notepad or some simple editor to start first.
    This way, I can quickly make changes and refresh the browser to see the change.

    I find the best way is to add “style” tags to a div and give each one a different background. Light blue – Dark blue. This way each “level” is nicely contrasted. And after the layout is complete, I delete the extra style tags on divs. If two divs are on the same level, they have the same background shade.

    I don’t know if this system will work for you, but I find that’s the easiest way to determine where the divs are and how they are nested. The lighter the background the closer it is to the bottom.

    After the basics are complete, I use a visual editor to cleanly tab my code and add any embellishments. I have Dreamweaver and Visual Studio only because those are the tools used by my co-workers. Sometimes there are two or three of us on one project so it’s easier to have the same tools they use than to force them to learn something new. But as I said, these only come out when the basic scaffolding is complete.

    And see if you can move imagery to the background. Sometimes, it’s best to create the illusion of columns rather than having a div extend 100%. You can do this by having a background image repeat vertically that has the column background for each side embedded in it. It might even be possible to cut down on the number of divs.

    Hope that helps out.

    Just remember…
    When in doubt, take a break. Come back when you’re not bothered by what you see. This way you’re more likely to spot something in the code.

  3. I’m not exactly sure what you mean by creating an “illusion” of columns. I move my images to the backgrounds of div’s and repeat the image vertically, but it seems like I still have to specify that the div have a min-height of 100% in order for the column to extend fully down the length of the page. This does indeed create quite a few divs, many of which are simply of the form:

    <div class=”something”></div>

    Thanks for the help! Paying more attention to the scaffolding is already having huge payoffs.

  4. If you have one image where each side is a different color, by having the image repeat vertically, you can give the “illusion” of a column.

    I.E.
    <div class=”content”>
       <div class=”leftcolumn”>Left stuff</div>
       <div class=”rightcolumn”>Right stuff</div>
       <hr />
    </div>

    The “content” background is repeated vertically.
    This background is just a single image with the “leftcolumn” side one color and “rightcolumn” side another color. The “leftcolumn” side of this single image is the exact width of that column. The same for the “rightcolumn”

    This way you give the illusion of columns without having to specify width.

    Of course the <hr /> is presented as…

    hr { clear:both; }

    … In your CSS. This makes sure that the columns extend the full length of your content. No need to specify height.

    The rest of the CSS :

    div.content { background:url(‘background.png’) top left repeat-y; }
    /* Notice the image is repeated in the ‘y’ axis */

    div.leftcolumn { width:500px; float:left; }
    div.leftcolumn { width:300px; float:left; }

    Now you just have to make sure the left side of “background.png” is one color and exactly 500px (or whatever you set in your CSS) and the right side is exactly 300px and a different color.

    And viola! Columns.

  5. This is incredibly helpful. But if I may test your patience, I have one last question…

    I have somewhat of an asymmetric layout, in that the double-column only exists in the scaffolding. The two columns consist of a “sidebar” and a main content area. The sidebar exists on a vertical column that stretches down to the bottom of the browser. Is there any way to have it stretch down without specifying “height: 100%;” ?

    (as a side note, I just discovered that adding in a DOCTYPE statement, for some reason, renders the “height” and “min-height” directives utterly ineffectual. do you have any insights here as to what’s going on?)

    Thank you again for all your help!

  6. An addendum to the Doctype issue…

    Yes, that does have a huge impact on how the browser renders the page. But… It depends on which browser.
    When the doctype is specified as XHTML 1.1 the min-height won’t work on most browsers where the element is floated to one side or another. In this case, as in the example above, the best way to avoid using min-height (as far as I can see) is to use the background image seperator trick.

    I left comments in the CSS file to better explain how the columns are created without specifying min-height.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s