Thank you so much. Now I'm back to excitement to implement this. It will take me a couple of days though as I'm immersed in code on several pages.
When i was reading the thread from 2011, I thought, why does this feel like a conversation from 2005??? How could only 2 years have gone by??? Then - "mimicry" for learning only goes so far, doesn't it, as I see much of his early code is exactly what you gave me. {shakes head ruefully}
Thank you so much. Now I'm back to excitement to implement this. It will take me a couple of days though as I'm immersed in code on several pages.
When i was reading the thread from 2011, I thought, why does this feel like a conversation from 2005??? How could only 2 years have gone by??? Then - "mimicry" for learning only goes so far, doesn't it, as I see much of his early code is exactly what you gave me. {shakes head ruefully}
Looking at your current site (HTML/CSS code), I don't see the extra div. Doesn't matter now, as long as you use the code I gave you.
Yes, I may have decided that as it was, that gallery content was okay with the text.
One question before I spend 4 hours modifying my page (because I actually have boxes inside boxes, not just one layer), in this, the RED:
Yes, I may have decided that as it was, that gallery content was okay with the text.
One question before I spend 4 hours modifying my page (because I actually have boxes inside boxes, not just one layer), in this, the RED:
this content can be html, right? "Text here" is not being literal, as in "plain text".
No HTML/CSS there, just plain old text. For that page, you should only have one HTML/CSS box.
No HTML/CSS there, just plain old text. For that page, you should only have one HTML/CSS box.
I'm so glad I asked - but - confusion sets in. Yes, I have only one HTML content block.
But in the HTML, I have multiple boxes with content.
The narrative is coded with HTML.
In the link I gave you to that page, that is HTML too.
GASP that is not good.
So sorry.
Does the attached image help?
The question is, you see the text inside the blue and yellow areas. Doesn't this extra div that jfriend wrote, apply to this content? I'm unclear why you are saying only plain text can be inside the Div.
HTML:
[html]
<div id="stained-glass-window">
<div class="large-box">
<div class="large-box-text">
<p>Here is text on the stained glass window box.</p>
</div>
<div class="small-box">
<div class="small-box-text">
<p>This is text on top box of the stain glass window box.</p>
</div>
</div>
<div class="large-box-text">
<p>Here is text on the stained glass window box below another box.</p>
</div>
<div class="small-box">
<div class="small-box-text">
<p>This is text on top box of the stain glass window box.</p>
</div>
</div> <div class="small-box">
<div class="small-box-text">
<p>This is text on top box of the stain glass window box.</p>
</div>
</div>
</div>
</div>
[/html]
Can I make the border an oval?
Merry Christmas to you too, Mike.
I am about 2 pages and some misc. checking away from switching. I counted 110 major projects I completed.
:wow
I have one of the multiple boxes on one page, that is broken. I have done extensive checking and no can find the error. After I unveil I might ask you to look at the page?
One question on the simple banner, can I make the rectangle, an oval? W3schools is currently down.
I found the oval code....
I separated the box from the background image in order to reduce the width of the box to accommodate the oval, and discovered in doing that that your original code, which was this:
caused the two parts to top-align.
In making the oval larger, the rectangle box is no longer centered vertically.
How would I bring the text box to center in the oval?
I might have figured it out. It looks good on my screen but I have no idea if the relative relationship between the graphic and the box will sustain itself everywhere.
Lefty I need you
Quark, I am one inch away from unveiling.
But there's a huge "black scar" on the entire site which is that the navbar code is broken.
I will post it separately. I don't think I can bring myself to show people a site with rotten tomatoes jaggedly thrown onto it. I have got to get the navbar fixed.
Comments
HTML
[html]
<div class="photo-box">
<div class="box">
<div class="box-text">text here</div>
</div>
</div>
[/html]
CSS:
.photo-box { background-image: url('http://www.joinrats.com/photos/1206527101_eXWDV-L.png'); padding: 20px; } .box { background: #fff; opacity: 0.8; -ms-filter: "progidXImageTransform.Microsoft.Alpha(Opacity=80)"; /* For IE8 */ filter: alpha(opacity=80); /* For IE5-7 */ } .photo-box, .box { width: 800px; height: auto; margin: 0 auto; } .box-text { margin: 0; padding: 5px; font-size: ; color: #000; }Images in the Backcountry
My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
When i was reading the thread from 2011, I thought, why does this feel like a conversation from 2005??? How could only 2 years have gone by??? Then - "mimicry" for learning only goes so far, doesn't it, as I see much of his early code is exactly what you gave me. {shakes head ruefully}
Looking at your current site (HTML/CSS code), I don't see the extra div. Doesn't matter now, as long as you use the code I gave you.
Images in the Backcountry
My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
One question before I spend 4 hours modifying my page (because I actually have boxes inside boxes, not just one layer), in this, the RED:
this content can be html, right? "Text here" is not being literal, as in "plain text".
No HTML/CSS there, just plain old text. For that page, you should only have one HTML/CSS box.
Images in the Backcountry
My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
I'm so glad I asked - but - confusion sets in. Yes, I have only one HTML content block.
But in the HTML, I have multiple boxes with content.
The narrative is coded with HTML.
In the link I gave you to that page, that is HTML too.
Images in the Backcountry
My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
I have:
Then repeats of these:
I thought in the sections with HTML, jfriend's code would keep the narrative non-opaque?
Well you lost me.
Images in the Backcountry
My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
So sorry.
Does the attached image help?
The question is, you see the text inside the blue and yellow areas. Doesn't this extra div that jfriend wrote, apply to this content? I'm unclear why you are saying only plain text can be inside the Div.
In order:
background image (stained glass)
Images in the Backcountry
My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
HTML:
[html]
<div id="stained-glass-window">
<div class="large-box">
<div class="large-box-text">
<p>Here is text on the stained glass window box.</p>
</div>
<div class="small-box">
<div class="small-box-text">
<p>This is text on top box of the stain glass window box.</p>
</div>
</div>
<div class="large-box-text">
<p>Here is text on the stained glass window box below another box.</p>
</div>
<div class="small-box">
<div class="small-box-text">
<p>This is text on top box of the stain glass window box.</p>
</div>
</div> <div class="small-box">
<div class="small-box-text">
<p>This is text on top box of the stain glass window box.</p>
</div>
</div>
</div>
</div>
[/html]
CSS:
#stained-glass-window { padding: 25px; margin: 10px; background-image: url('http://www.joinrats.com/photos/1206527101_eXWDV-L.png'); border: 5px solid #333; opacity: 0.8; -ms-filter: "progidXImageTransform.Microsoft.Alpha(Opacity=80)"; /* For IE8 */ filter: alpha(opacity=80); /* For IE5-7 */ } .large-box { background: #f00; border: 5px solid #000; padding: 30px; margin: 5px; opacity: 0.8; -ms-filter: "progidXImageTransform.Microsoft.Alpha(Opacity=80)"; /* For IE8 */ filter: alpha(opacity=80); /* For IE5-7 */ } .large-box-text { color: #fff; } .small-box { background: #fff; border: 5px solid #000; padding: 20px; margin: 10px 30px; opacity: 0.8; -ms-filter: "progidXImageTransform.Microsoft.Alpha(Opacity=80)"; /* For IE8 */ filter: alpha(opacity=80); /* For IE5-7 */ } .small-box-text { color: #000; }You can add/remove the HTML (not CSS) .small-box divs to create more boxes or remove boxes.
Example: http://mike.imagesinthebackcountry.com/Test-Page/
Images in the Backcountry
My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
Thank you so much.
You're welcome. Can't wait for the unveil. Merry Christmas!
Images in the Backcountry
My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
Merry Christmas to you too, Mike.
I am about 2 pages and some misc. checking away from switching. I counted 110 major projects I completed.
:wow
I have one of the multiple boxes on one page, that is broken. I have done extensive checking and no can find the error. After I unveil I might ask you to look at the page?
One question on the simple banner, can I make the rectangle, an oval?
I separated the box from the background image in order to reduce the width of the box to accommodate the oval, and discovered in doing that that your original code, which was this:
caused the two parts to top-align.
In making the oval larger, the rectangle box is no longer centered vertically.
How would I bring the text box to center in the oval?
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
Images in the Backcountry
My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
Quark, I am one inch away from unveiling.
But there's a huge "black scar" on the entire site which is that the navbar code is broken.
I will post it separately. I don't think I can bring myself to show people a site with rotten tomatoes jaggedly thrown onto it. I have got to get the navbar fixed.