How do I add padding/margin?

ChancyRat · December 15, 2013

I spent all day learning the basics to make this happen. From the ground up, A-Z (or maybe A-C is where I am.

It's in the footer on the home page but I'm not sure where it will finally end up or consist of. Now, though, I'm stuck.

How can I add padding, or margin, or whatever it is called so that the transparent yellow on top of the flower image, has flowers on the top and bottom horizontal borders?

This is the best I could come up with.

Any other corrections you can spot would be gratefully welcomed.

<div class="footer">
<div style="font-size: 20px; padding: 15px; color: #000; margin-right: 20px;">
This is a text inside a div element.
We are still in the div element.
</div></div>

div.footer {
  background-color: #FBF2C9;
  opacity: 0.8;
  margin-left: auto ;
  margin-right: auto ;
  width: 820px;
  height: 260px;
  filter: alpha(opacity=80);
  /* For IE8 and earlier */
}

{
  background-image: url('/photos/i-s4c2RzJ/1/S/i-s4c2RzJ-S.jpg');
  background-repeat: repeat;
  /*  background-position: 50% 0, 50% 0 !important;
  */
}

EDIT: This is an HTML block inside the footer, in case that wasn't obvious.

racer · December 15, 2013

Best to add the style to your css, not the html

<div class="footer"></div>

No need for "div" in front of ".footer", you have margin twice, and best to use a gif or png instead of opacity. Margin "0 auto" centers, so now adjust the height and width. Padding or margin your top and bottom if needed

.footer {
font-size: 20px; 
padding: 0 auto; 
color: #000; 
background-color: #FBF2C9;    
margin: 0 auto;  
width: 805px;   
height: 245px;
opacity: 0.8;  
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; /* For IE8 */
filter: alpha(opacity=80);   /* For IE5-7 */ 
}  

{   background-image: url('/photos/i-s4c2RzJ/1/S/i-s4c2RzJ-S.jpg');   
background-repeat: repeat; }

For the background you need to add the background element

ChancyRat · December 17, 2013

Todd, moving this:

<div class="footer"></div>

to the CSS, causes everything to fail.

Moving it back to HTML, and then trying to work with putting the flowers in a DIV, I now have this code. But the Blue should be on top of the flowers (it was on top but adding the DIV moved it to the background), and the margin is still missing from the top. There is also no transparency, but I did change the photo to .png.

<div class="footer">
<div class="flowers">
<div style="padding: 15px; margin-right: 20px;">
This is a text inside a div element.
We are still in the div element.
</div></div></div>

.footer {
  font-size: 40px;
  padding: 0 auto;
  color: gold;
  background-color: #1097FE;
  margin: 0 auto;
  width: 800px;
  height: 200px;
  opacity: 0.9;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
  /* For IE8 */
  filter: alpha(opacity=90);
  /* For IE5-7 */ 
}

.flowers {
  background-image: url('/photos/i-s4c2RzJ/1/S/i-s4c2RzJ.jpg');
  background-repeat: repeat;
}

I realize my coding language is that of an infant but would you direct me towards a solution? Thanks.

ChancyRat · December 17, 2013

What I see:

Hikin' Mike · December 17, 2013

Very difficult to try to help since your site isn't unveiled yet. A few tings I noticed though. There is no 'auto' on padding. I would NOT use inline styles like this:

<div style="padding: 15px; margin-right: 20px;"> This is a text inside a div element. We are still in the div element. </div>

Better to use style the text in the .flower class.

Hikin' Mike · December 17, 2013

Just thinking out loud. You can just add your flower background in your .footer div.

ChancyRat · December 17, 2013

Hikin', thanks, but.... I'm clueless has to how to do what you suggest.

Hikin' Mike · December 17, 2013

HTML:
[html]
<div class="footer">
This is a text inside a div element. We are still in the div element.
</div>
[/html]CSS:

.footer {
    font-size: 40px;    
    color: gold;
    background: #1097FE url('/photos/i-s4c2RzJ/1/S/i-s4c2RzJ.jpg');
    padding: 15px;
    margin: 0 20px 0 auto;
    width: 800px;
    height: 200px;
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    /* For IE8 */
    filter: alpha(opacity=90);
    /* For IE5-7 */ 
}

ChancyRat · December 18, 2013

Thank you, Hikin'. But the transparent overlay is gone and I see only the flowers.
The flower image is a png now, as Todd instructed.
What will bring back the opacity of the blue on top?

Hikin' Mike · December 18, 2013

Sorry about that. I created a test page, so this worked on my page:

HTML:
[html]
<div class="footer">
<div class="flowers">
<p>This is a text inside a div element. We are still in the div element.</p>
</div>
</div>
[/html]

CSS:

.footer {
    background-color: #1097FE;
    width: 800px;
    height: 200px;
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    /* For IE8 */
    filter: alpha(opacity=90);
    /* For IE5-7 */ 
    }
.footer p {
    font-size: 40px;
    color: gold;
    padding: 0 25px;
    }
.flowers {
    background-image: url('/photos/i-s4c2RzJ/1/S/i-s4c2RzJ.jpg');
    background-repeat: repeat;
    height: 200px;
    }

ChancyRat · December 18, 2013

Very very very kind of you to test the code. And, drum roll, it did not work on my site.
I saw only flowers and type. I changed the margins to see if the blue was behind the flowers, and it was.

The older code, I had to put the section in the order of overlay, so I took a chance and reversed both of them (html and css), and VOILA, I got it. Obviously have decisions to make on choice of image and color, but at least I can experiment now.

Did your test achieve an image like this, and why wouldn't the code do so for me?
Would you know how to center the blue within the flowers, all four borders? I also need to figure out why the typeface is not line spaced properly and has no padding from the top of the image.

Here's what I put:

<div class="flowers">
<div class="footer">
<p>This is a text inside a div element. We are still in the div element.</p>
</div>
</div>

.flowers {
background-image: url('/photos/i-cBW463K/0/O/i-cBW463K.png');
background-repeat: repeat;
width: 960px;
height: 200px;
}

.footer {
background-color: #1097FE;
width: 800px;
height: 180px;
opacity: 0.6;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
/* For IE8 */
filter: alpha(opacity=60);
/* For IE5-7 */
}

.footer p {
font-size: 40px;
color: gold;
padding: 0 25px;
}

Thank you for getting me on the right track. :ivar<img src="https://us.v-cdn.net/6029383/emoji/bowdown.gif" border="0" alt="" >ivar

ChancyRat · December 18, 2013

I meant to attach the current image:

ChancyRat · December 18, 2013

Todd, your mysterious comment on opacity
Todd, you said, " best to use a gif or png instead of opacity".

So, does the code in my last comment, completely miss the point you are making?
W3S seems to interchange opacity and transparency in many places, so I am not tuning in to the point.

Are you saying I should make the Blue color, an image with transparency?

This might have been plain as day to everyone but me.

So - never use opacity as the code above does?

Thanks.

Hikin' Mike · December 18, 2013

Try this:

.flowers {
    background-image: url('/photos/i-cBW463K/0/O/i-cBW463K.png');
    background-repeat: repeat;
    }
.footer {
    background-color: #1097FE;
    opacity: 0.6;
    -ms-filter: "progidXImageTransform.Microsoft.Alpha(Opacity=6 0)";
    /* For IE8 */
    filter: alpha(opacity=60);
    /* For IE5-7 */
    }
.footer p {
    font-size: 40px;
    color: gold;
    padding: 0 25px;
    } 
[COLOR=Red].footer,
.flowers {
    width: 800px;
    height: 200px;
    }[/COLOR]

You need to make sure both .flowers and .footer has the same height/width (in red).

ChancyRat · December 18, 2013

You need to make sure both .flower and .footer has the same height/width (in red).

Hmm, I'm not clear. I don't want them the same. I'd like to see the flowers around the perimeter of the entire area. As if the flowers were a frame/border.

ChancyRat · December 18, 2013

I'm always too quick to publish.
So in the image above, I like the bottom border.
The right side "border" is too wide.
There is zero border on the left and top. I'd like there to be a border. Centered like a photo.

Hikin' Mike · December 18, 2013

I guess I don't understand what you're trying to accomplish then.

On your last example (image), is the flower supposed to be a border, with the blue centered?

ChancyRat · December 18, 2013

Hikin' Mike wrote: »

I guess I don't understand what you're trying to accomplish then.

On your last example (image), is the flower supposed to be a border, with the blue centered?

Exactly. Flowers are both a background to the blue, and a border on the outside of the blue.

Hikin' Mike · December 18, 2013

I can't replicate your image on my test page. Just guessing now:

.flowers {
    background-image: url('/photos/i-cBW463K/0/O/i-cBW463K.png');
    background-repeat: repeat;
    width: 960px;
    height: 200px;
    margin: 0 auto;
    }

.footer {
    background-color: #1097FE;
    width: 800px;
    height: 180px;
    margin: 0 auto;
    opacity: 0.6;
    -ms-filter: "progidXImageTransform.Microsoft.Alpha(Opacity=6 0)";
    /* For IE8 */
    filter: alpha(opacity=60);
    /* For IE5-7 */
    }

.footer p {
    font-size: 40px;
    color: gold;
    padding: 0 25px;
    }

ChancyRat · December 18, 2013

You have gone above and beyond Mike, thanks.
I wonder why the code doesn't work for you? I guess that's neither here nor there.
I'm looking at this on FF 25.0.1 but I checked and both IE and Chrome show the same thing.

I have reverted the color to a pale yellow, and the text to a header which defaults to the site font of Buda in black.

Still missing the top "border" of flowers. I just think this is all very odd.

The image is reduced in size for DG's limit.

Hikin' Mike · December 18, 2013

Try this:

HTML
[html]
<div class="footer">
<div class="box">
<p>This is a text inside a div element. We are still in the div element.</p>
</div>
</div>
[/html]

CSS:

.footer {
    background-image: url('/photos/i-cBW463K/0/O/i-cBW463K.png');
    background-repeat: repeat;
    padding: 20px;
    }

.box {
    background: #f00;    
    opacity: 0.6;
    -ms-filter: "progidXImageTransform.Microsoft.Alpha(Opacity=6 0)";
    /* For IE8 */
    filter: alpha(opacity=60);
    /* For IE5-7 */    
    }
.footer, .box {
    width: 960px;
    height: 180px;
    margin: 0 auto;
    }
.box p {
    margin: 0;
    padding: 5px;    
    font-size: 25px;
    color: gold;
    }

ChancyRat · December 20, 2013

barb

barb
That's all I have to say, Mike.

I wasn't able to get to this until I finished work this week, but it took me all of 2 seconds after work ended to get to try this.
THANK YOU.

I reduced the image to fit DG's limit.
The outer yellow border is my site's background color.

I don't know what image I will end up using, or color, but as for getting the code??? =
I'm so happy I can't breathe.

barb

Hikin' Mike · December 20, 2013

ChancyRat wrote: »

barbbarbbarb
That's all I have to say, Mike.

I wasn't able to get to this until I finished work this week, but it took me all of 2 seconds after work ended to get to try this.
THANK YOU.

I reduced the image to fit DG's limit.
The outer yellow border is my site's background color.

I don't know what image I will end up using, or color, but as for getting the code??? =
I'm so happy I can't breathe.

barbbarbbarbbarb

Glad it worked!

ChancyRat · December 24, 2013

Hmmm, a side-effect I would like to not happen: I *think* the text adopts whatever opacity is set. How can I set this so that the text is always full/solid?

Hikin' Mike · December 24, 2013

ChancyRat wrote: »

Hmmm, a side-effect I would like to not happen: I *think* the text adopts whatever opacity is set. How can I set this so that the text is always full/solid?

Doesn't your legacy does the same thing?

ChancyRat · December 24, 2013

Hikin' Mike wrote: »

Doesn't your legacy does the same thing?

No, Mike. And I have a feeling that came from some ancient javascript that Jfriend wrote for me. It has trickled back to me - it was long ago.

ChancyRat · December 24, 2013

I used your code for another page in which there is a background, and paragraphs of text (like the link I sent you, that you referenced above). It was in seeing the outcome of this that I figured out the text fades. I also have a photograph embedded in the text, and it becomes opaque as well.
I 'fixed' this by removing the opacity but then that kind of defeats the purpose. It was in the midst of constructing this page that I remembered angel Jfriend's java.

Hikin' Mike · December 24, 2013

I'm not familiar with any Javascript on your Legacy site that would "fix" that. I copied your Legacy page to my test page and it looks the same.

ChancyRat · December 24, 2013

Hikin' Mike wrote: »

I'm not familiar with any Javascript on your Legacy site that would "fix" that. I copied your Legacy page to my test page and it looks the same.

You can see the javascript on my advanced customization section?

Hikin' Mike · December 24, 2013

ChancyRat wrote: »

You can see the javascript on my advanced customization section?

I'm not a Javascipt person, but I didn't see anything that would "fix" that. Here is my test page. The top one is the one I gave you, just changed the background and colors. The bottom is straight from your old page.

http://mike.imagesinthebackcountry.com/Test-Page/

ChancyRat · December 24, 2013

Thank you for pushing me on my memory, Mike.
Went back into DG's ancient history. My GOD Jfriend was a blessing.
So PLEASE smumug BRING HIM BACK by opening Java to his magical potion-making.

Anyway, grumble grumble, here is the thread on the subject:
http://www.dgrin.com/showthread.php?t=191786&highlight=background

and I did misremember about java. I think the piece I need to focus on is Jfriend's statement from message #19, which I don't follow, I need to settle and stare at the code (hopefully that is all I have to do, lol), but here it is fyi:

You can add an extra div and solve the issue.

<div class="myFrame">
<div class="backgroundContainer">
<div class="myText">
text here
</div>
</div>
</div>

Then, you put the background color on the background container div rather than on the myText div and the background can have a separate opacity for the background from the text.

How do I add padding/margin?

Comments