Sunday, October 26, 2008
Monday, October 6, 2008
Cursor Control
Here's a standard Blogger upload, positioned in the center by selecting "center" during the upload.
The image is centered as the column width changes, but the cursor switches to a hand while it is anyplace on the image's line (unless you are using the world's most advanced browser.)
When "center" is selected, the image, which is normally an inline element, is converted to a block element. That allows an 'auto' margin: auto means equal left and right margins.
When an element is 'block', it owns the line. In normal flow, it is alone on the line, and there is a line-break before and after the element. So, maybe the cursor's behavior makes sense.
Can the behavior be modified? There may be a real way to do it, but that means wading through Html and css specs, which is a lot like reading legal writings: the truth may be there, but where?
I change the code a little. I will say that I am not a coder, but I hand-markup all Html that I do, so I may look at things differently than many Bloggers.
Give it a good test and I'll tell you how I did it.
When you upload to Blogger using 'center', the code looks something like this, and I am trimming some unneeded code:
<a href="http://blogspot.com/snow_line_200.jpg">
<img style="margin: 0px auto 10px; display: block;
text-align: center; cursor: pointer;"
src="http://3.bp.blogspot.com/_TUd2gQn_l3o
/SMtKAqTzHWI/AAAAAAAAAsc/oHQy7Wfq2kw/s400
/snow_line_200.jpg" alt="" id="BLOGGER_PHOTO_ID_
5245367566220860770" border="0" /></a>
The important part is in red, with some surrounding code in blue. Notice how the image is changed to a block element. Reading the margin: top=0px; right/left=equal; bottom=10px.
To limit the hand to the image only, I wrap the full image code in a <div> and move the margins into the <div>s style. I also limit the width of the <div> to the total of the image width + the padding + the border width. In this case I just make it the image width of 200px. Many templates set padding of 4px and a border of 1px. So, that would be 200 + 8 + 2 for a <div> width of 210px. The <div> is centered, and the image is an inline element in the <div>. If the width is not set, the image will not center.
Also, the image is no longer a block element, so remove from the image's style. Here's the code for the second image:
<div style="width:200px;margin: 0px auto 10px;">
<a href="http://blogspot.com/snow_line_200.jpg">
<img style="text-align: center; cursor: pointer;"
src="http://3.bp.blogspot.com/_TUd2gQn_l3o/SMtKAqTzHWI
/AAAAAAAAAsc/oHQy7Wfq2kw/s400/snow_line_200.jpg" alt=""
id="BLOGGER_PHOTO_ID_5245367566220860770" border="0" />
</a></div>
Notice the closing </div> at the end, there is no 'display: block' in the <div> style, as it is a block element already.
The image is centered as the column width changes, but the cursor switches to a hand while it is anyplace on the image's line (unless you are using the world's most advanced browser.)
When "center" is selected, the image, which is normally an inline element, is converted to a block element. That allows an 'auto' margin: auto means equal left and right margins.
When an element is 'block', it owns the line. In normal flow, it is alone on the line, and there is a line-break before and after the element. So, maybe the cursor's behavior makes sense.
Can the behavior be modified? There may be a real way to do it, but that means wading through Html and css specs, which is a lot like reading legal writings: the truth may be there, but where?
I change the code a little. I will say that I am not a coder, but I hand-markup all Html that I do, so I may look at things differently than many Bloggers.
Give it a good test and I'll tell you how I did it.
When you upload to Blogger using 'center', the code looks something like this, and I am trimming some unneeded code:
<a href="http://blogspot.com/snow_line_200.jpg">
<img style="margin: 0px auto 10px; display: block;
text-align: center; cursor: pointer;"
src="http://3.bp.blogspot.com/_TUd2gQn_l3o
/SMtKAqTzHWI/AAAAAAAAAsc/oHQy7Wfq2kw/s400
/snow_line_200.jpg" alt="" id="BLOGGER_PHOTO_ID_
5245367566220860770" border="0" /></a>
The important part is in red, with some surrounding code in blue. Notice how the image is changed to a block element. Reading the margin: top=0px; right/left=equal; bottom=10px.
To limit the hand to the image only, I wrap the full image code in a <div> and move the margins into the <div>s style. I also limit the width of the <div> to the total of the image width + the padding + the border width. In this case I just make it the image width of 200px. Many templates set padding of 4px and a border of 1px. So, that would be 200 + 8 + 2 for a <div> width of 210px. The <div> is centered, and the image is an inline element in the <div>. If the width is not set, the image will not center.
Also, the image is no longer a block element, so remove from the image's style. Here's the code for the second image:
<div style="width:200px;margin: 0px auto 10px;">
<a href="http://blogspot.com/snow_line_200.jpg">
<img style="text-align: center; cursor: pointer;"
src="http://3.bp.blogspot.com/_TUd2gQn_l3o/SMtKAqTzHWI
/AAAAAAAAAsc/oHQy7Wfq2kw/s400/snow_line_200.jpg" alt=""
id="BLOGGER_PHOTO_ID_5245367566220860770" border="0" />
</a></div>
Notice the closing </div> at the end, there is no 'display: block' in the <div> style, as it is a block element already.
Friday, September 12, 2008
Image Test
First attempt at float off — align right. It didn't work because float remained on.
Float on — center
Monday, September 1, 2008
Background Image 3
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut a sapien. Aliquam aliquet purus molestie dolor. Integer quis eros ut erat posuere dictum.
Image over background – floated right.
This image hangs below the post content and background image. If background repeat is on, it starts over, if not, this background will the post's normal background color. This low-hanging <div> must have its height set.
Suspendisse potenti. Cras ut mi sit amet quam consequat consequat. Aenean ut lectus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse vel sapien. Nullam non turpis. Pellentesque elementum pharetra ligula. In rhoncus. Aliquam vel enim consequat sem aliquet hendrerit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam felis.
Small Background
I finally faded this background image, so it's closer to what I would really use in a post. In the top paragraph, I have repeat on and if it happens to be in a stretch template when you look, you'll notice that the background repeats to exactly fill the background of the paragraph.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut a sapien. Aliquam aliquet purus molestie dolor. Integer quis eros ut erat posuere dictum. Curabitur dignissim. Integer orci. Fusce vulputate lacus at ipsum. Quisque in libero nec mi laoreet volutpat. Aliquam eros pede, scelerisque quis, tristique cursus, placerat convallis, velit. Nam condimentum. Nulla ut mauris. Curabitur adipiscing, mauris non dictum aliquam, arcu risus dapibus diam, nec sollicitudin quam erat quis ligula. Aenean massa nulla, volutpat eu, accumsan et, fringilla eget, odio. Nulla placerat porta justo. Nulla vitae turpis. Praesent lacus.
In the following paragraph I use the same image with no-repeat.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam ultricies lacus eu dui. Duis viverra risus et eros. Aenean odio dolor, tristique quis, commodo id, posuere sit amet, dui. Pellentesque velit. Aliquam erat volutpat. Duis sagittis nibh sed justo. Sed ultrices nisl sed pede. Sed tempor lorem in leo. Integer gravida tincidunt nunc. Vivamus ut quam vel ligula tristique condimentum. Proin facilisis. Aliquam sagittis lacinia mi. Donec sagittis luctus dui. Maecenas quam ante, vestibulum auctor, blandit in, iaculis in, velit. Aliquam at ligula. Nam a tellus. Aliquam eu nulla at turpis vulputate hendrerit. Proin at diam. Curabitur euismod.
Background Image
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut a sapien. Aliquam aliquet purus molestie dolor. Integer quis eros ut erat posuere dictum. Curabitur dignissim. Integer orci. Fusce vulputate lacus at ipsum. Quisque in libero nec mi laoreet volutpat. Aliquam eros pede, scelerisque quis, tristique cursus, placerat convallis, velit. Nam condimentum. Nulla ut mauris. Curabitur adipiscing, mauris non dictum aliquam, arcu risus dapibus diam, nec sollicitudin quam erat quis ligula. Aenean massa nulla, volutpat eu, accumsan et, fringilla eget, odio. Nulla placerat porta justo. Nulla vitae turpis. Praesent lacus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque vel erat eget diam consectetuer iaculis. Cras ante velit, suscipit et, porta tempus, dignissim quis, magna. Vivamus viverra, turpis nec rhoncus ultricies, diam turpis eleifend nisl, a eleifend ante felis ac sapien. Integer bibendum. Suspendisse in mi non neque bibendum convallis. Suspendisse potenti. Sed sit amet purus at felis adipiscing aliquam. Vivamus et nisl sit amet mauris aliquet molestie. Integer tortor massa, aliquam a, lacinia nonummy, sagittis nec, eros. Nunc non mauris id eros venenatis adipiscing. Cras et lectus ut nisl pharetra ornare. Proin leo risus, elementum eget, ultrices vitae, molestie sed, erat. Curabitur et lectus in tellus egestas hendrerit. Sed dapibus ipsum. Quisque sit amet ligula. Suspendisse odio dolor, semper id, feugiat quis, sodales id, mauris. Curabitur id ligula ac libero malesuada pharetra.
Suspendisse potenti. Cras ut mi sit amet quam consequat consequat. Aenean ut lectus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse vel sapien. Nullam non turpis. Pellentesque elementum pharetra ligula. In rhoncus. Aliquam vel enim consequat sem aliquet hendrerit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam felis.Thursday, August 7, 2008
Subscribe to:
Posts (Atom)