Jump to content

Archived

This topic is now archived and is closed to further replies.

outtareach

Top And Bottom Padding on body

Recommended Posts

outtareach    3
outtareach

I have a background image that is basically a visual container for the site but I want the top and bottom to have some breathing room.  Right not the image is flush with the top of the page and changing in background options isnt working and when I add padding to anything else(site warp, body) it worked but I get a white space instead of background color.  Any insight is appreciated.

Share this post


Link to post
Share on other sites
Rob    547
Rob

You could use min-height, margin-top and margin-bottom or padding-top or padding-bottom to control the spacing so that your image is wrapped. Try to make sure you're setting these values with % or em and not px.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
outtareach    3
outtareach

I fixed it by uploading the image to the top section and not in the global options but doing it this way till not bring up my background on all pages unless I add it through the each top section which is counterproductive.  When I add it to the global options it is flush on top and anything I do gives it space but the space isnt the color of the background and just white space. I basically want the body tag to move the background image down some so that its not at the top and anything I do will not do that if I put the image as the main background.

Share this post


Link to post
Share on other sites
outtareach    3
outtareach

adding padding to the body just gives me this, you can see the white space on the top as well.

 

padding.png

Share this post


Link to post
Share on other sites
Rob    547
Rob

I can't see the intended attachment.  You have to use "More Reply Options" (upload tools under the edit area) to include images. 


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
outtareach    3
outtareach

sorry the image got deleted because the instagrid plugin crashed my site and I had to reupload/reinstall wordpress and pagelines so the online file was deleted.  Whenever I try to use the image upload here I get an error so I just upload and show it that way.  here it is again.
padding.pngpadding.pngpadding.png

Share this post


Link to post
Share on other sites
Rob    547
Rob

It seems you need a combination of background color PLUS background position.  See http://www.w3schools.com/css/css_background.asp

 

When you add the image using our settings, you can add a Custom Class.  Write code to match that custom class and position the background image like this: background-position:center 20px;  

 

That code centers the background, and sets a padding top of 20px.  Of course you can change my code as desired.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
outtareach    3
outtareach

thanks but what if I want a pattern image under for the background instead of the black?  If I put a background image in "color/style" I cannot put a pattern

Share this post


Link to post
Share on other sites
Rob    547
Rob

Okay, you can apply backgrounds to different visible parts, using CSS. 

 

Each container has its own custom class field in DMS.  Each custom class can assign a background color and image.  You do this with CSS.

[attachment=1541:containers.png]

 

As you can see from the image above, each container can display different CSS.

 

You can see each container in DMS has a custom class field.  And I believe we've previously covered naming classes.  But for our example, to get the yellow background in the Column section, click the pencil icon, and add

my-yellowbg1

 

Then, to make it appear with just yellow as a color background, just add:

.my-yellowbg1 {background-color: yellow;

padding: 20px;

margin: 40px;}

 

http://www.w3schools.com/css/css_background.asp can help you with how to apply colors, images, and position things.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
outtareach    3
outtareach

thanks a bunch, I figured if I put the pattern as the background then put my actual background in the background for a section or header that it works but wasnt sure if that was the proper way to do it.  its just that sometimes you want more than a plain color as your framing for the site so I wanted to put a background image which is now working correctly.  I appreciate the help and will continue supporting.

Share this post


Link to post
Share on other sites
Rob    547
Rob

Happy to help.   You can always add a bg image using CSS to any one of those sections/containers.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
outtareach    3
outtareach

still trying to add simple margin to the top of the body but still getting white space, not sure how to remedy this issue without using an image in the header even if its a color just to be able to apply padding to it.  How would I just do this to the main div?

Share this post


Link to post
Share on other sites
Danny    1,327
Danny
To achieve this kind of layout, using Boxed Mode would be better than full width, then you can apply a margin-top to the .boxed-wrap class, like so:
 
 
However, if you do so and use the Fixed Nav, you will need to apply the same margin-top as you do to the .boxed.wrap class but instead use the negative value. For example, if you have used margin-top: 4em on .boxed-wrap, then you will need to use margin-top: -4em; on the Fixed Nav class too.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites

  • Similar Content

    • lbhansen
      By lbhansen+
      I am slowly getting closer to something I like for the general appearance of my site. What's currently nagging me is trying to remove the top and bottom padding/margin from the image in the header. It seems that I've done what I want with the menu but there was dead space above the image and between the image and menu.
      Trying out padding and margin settings, I got something that came close to what I want but saw odd behavior along the way. Changing either the top or bottom padding to 0 (from blank), removed all padding from the top and sides but left a small band between the image and menu.
      Setting all eight padding and margin settings to 0 removed all except the band between image and menu. (But it seems that entering 0 in only the top or bottom padding option is all that was needed.)
      So, heading into the twilight zone, I changed the bottom margin to -1. That removed the band but allowed the menu to slightly overlap the image. AND, narrowing the browser, or viewing on a phone, caused the band to reappear.
      Perhaps there's also a problem with the menu but I don't see it.
      So that's where it stands at the moment: http://756.a44.myftpupload.com 
      I seems to me that if there is a default padding value, setting it to 0 should be all that's needed to get the two sections to meet perfectly on any device/browser width.
    • Perry
      By Perry+
      Hello There, 
      I am working with Platform 5 and have run into an unnerving problem. I am trying to position my clients picture along the bottom of the container, so that it sits right on the bottom. After a good hour of googling and messing with the CSS I figured I would ask the question here. Below is my screenshot displaying my problem. I will need to do this frequently in the future. 
      My Problem Image
      Unlike in DMS, when I add a margin to an embed or image box it simply makes the container larger while keeping the padding, I cannot have any padding or any space whatsoever on the bottom of my clients image.  Is there a way to remove all padding from the container so I can have this work across screen sizes? If not is there anyway to position an element directly at the bottom of another element in Platform 5? This seems like a basic feature and was easily attainable within DMS. 
      I cannot create an image combining all these elements as it will not scale well on mobile and will make my clients logo unreadable and her face incredibly small. 
       
      Thank you for any help,
      Perry
    • chamois_blanc
      By chamois_blanc+
      Hello,
      I am a bit confused about the usage of percentages for section padding/margin settings in the PL5 UI. Percentages don't scale well for mobile devices (especially in height), so those settings are pretty much useless. Case in point, the defaults are expressed in rem units, not percentages:
      .pl-sn-pad { padding: 1rem; ... } Why force the user to use percentages in the PL5 section UI when it would have been as easy to let the user specify the unit?
    • Kempston
      By Kempston+
      Good day
      How do I indent textbox content so that it's not flush against the side of the screen on mobile devices?
      When I view Kempston Truck Hire East London on my phone, the text is aligned against the side of the screen and doesn't look right.
      Many thanks
      Rob
    • JawDesigns
      By JawDesigns
      Hi to all,
      I always have this problem and I'm unhappy with the fix I usually apply for aligning columns at the bottom (see attached).
      For example: I use two text boxes side by side. Both text columns have a background colour. Text column 1 has 200 words and text column 2 has 300 words.
      How do I easily get them to align at the bottom without using a min-height declaration? I want to get text column 1 with 200 words to fit the height of text column 2 if that makes sense?
      Thanks for any help on this!
      Cheers,
      James

×