Page 1 of 4 123 ... LastLast
Results 1 to 10 of 32

Thread: css float ?

  1. #1
    Join Date
    Oct 2009
    Posts
    36
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default css float ?

    Hello,

    Working on a new site area and wanted to float an image over the template on right and left side, is this posible?

    The css file I have is rather long, not sure where to place in code, and if this code would work:

    Code:
    }
    Inherited from body.home.page.page-id-202.page-template-default.content-r
    kentuckyweedradio.com/media="screen, projection"
    body {
        color: #cdc9c9;
        font-size: 12px;
        font-family: 'normal';
        position: relative;
        background: url(images/back-body.jpg) top center no-repeat, url(/wp-content/uploads/2014/08/bg-left.png) left top no-repeat fixed, url(/wp-content/uploads/2013/06/bg-right.png) right top no-repeat fixed;
        text-shadow: 1px 1px 1px #202020;
    }
    Or is there something from the:

    CSS Library Image CSS. I can add?

    Thank you in advance.

    ( not sure if I am allowed to add site link, to view my current css coding? )

  2. #2
    Join Date
    Oct 2009
    Posts
    36
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    In the event I am allowed to add my test link:

    http://constructionbannerexchange.com/kwr2/

    If this is not allowed, please remove link and I can upload css file.

    Thank you.
    Last edited by james438; 09-12-2015 at 02:33 AM. Reason: link made to text

  3. #3
    Join Date
    Jan 2007
    Location
    Davenport, Iowa
    Posts
    1,875
    Thanks
    92
    Thanked 97 Times in 95 Posts

    Default

    In general links are ok if it is to post a resource to help a member such as a link to a regular expressions forum or a particular function at php.net or if you want to demonstrate a script you are working on. It is usually required if you need help with a script on your site. The moderators enforce this on a case by case basis. In your case it was a good idea to post your site so that we can get a better idea of what you are referring to.

    Can you give an example of what you are trying to do with your floats? Will they remain stationary when the user scrolls down so that they are always visible or are they more of an extension to your banner or will it overlap the banner to some degree? I notice you are looking for help modifying a wordpress template. Some members here might be knowledgeable about modifying Wordpress templates. Often the people at Wordpress are better equipped to answer those types of questions.
    To choose the lesser of two evils is still to choose evil. My personal site

  4. #4
    Join Date
    Nov 2014
    Location
    On A Scottish Island
    Posts
    432
    Thanks
    0
    Thanked 54 Times in 50 Posts

    Default

    If you're new to Wordpress don't mess with the installed theme CSS. Just add the Simple Custom CSS plugin and put all of your stuff in there.

    Don't forget to make a child theme before you change anything.

  5. #5
    Join Date
    Oct 2009
    Posts
    36
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    I have a site at: http://kentuckyweedradio.com that I am redoing.

    I want the images of the leaves on right and left of template to appear on right and left ( over ) the new site area at:

    http://constructionbannerexchange.com/kwr2/

    Which will later become the main site of first domain.

    @styxlawyer

    If I use the plugin ( without ) a child theme, and add the code, how would I edit what I put in there in the event it comes out incorrectly?

    @james438

    Yes I think stationary is best.

    Thank you in advance.
    Last edited by Comex; 09-14-2015 at 02:37 AM.

  6. #6
    Join Date
    Nov 2014
    Location
    On A Scottish Island
    Posts
    432
    Thanks
    0
    Thanked 54 Times in 50 Posts

    Default

    @styxlawyer

    If I use the plugin ( without ) a child theme, and add the code, how would I edit what I put in there in the event it comes out incorrectly?
    Just access the plugin and it will open a code window so that you can edit you CSS. All the additional CSS you put in will appear on the served page immediately before the </head> tag so will override sttings from any included files.

  7. #7
    Join Date
    Oct 2009
    Posts
    36
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Thank you.

    Dose this look correct to post two images on right and left sides of the template:

    background: url(images/back-body.jpg) top center no-repeat, url(/wp-content/uploads/2014/08/bg-left.png) left top no-repeat fixed, url(/wp-content/uploads/2013/06/bg-right.png) right top no-repeat fixed;
    text-shadow: 1px 1px 1px #202020;
    }

    so they are over the template and stationary with page?

  8. #8
    Join Date
    Nov 2014
    Location
    On A Scottish Island
    Posts
    432
    Thanks
    0
    Thanked 54 Times in 50 Posts

    Default

    Quote Originally Posted by Comex View Post
    Thank you.

    Dose this look correct to post two images on right and left sides of the template:

    background: url(images/back-body.jpg) top center no-repeat, url(/wp-content/uploads/2014/08/bg-left.png) left top no-repeat fixed, url(/wp-content/uploads/2013/06/bg-right.png) right top no-repeat fixed;
    text-shadow: 1px 1px 1px #202020;
    }

    so they are over the template and stationary with page?
    No. CSS3 renders multiple background images in layers from front to back so "back-body.jpg" would be in front of the two other images, which isn't what you are trying to achieve. "back-body.jpg should be the last image in the list.

    This page might help.

  9. #9
    Join Date
    Nov 2014
    Location
    On A Scottish Island
    Posts
    432
    Thanks
    0
    Thanked 54 Times in 50 Posts

    Default

    Quote Originally Posted by Comex View Post
    .
    I want the images of the leaves on right and left of template to appear on right and left ( over ) the new site ....
    .
    I just reread your post #5 and see that you actually want the two leaf images to appear on top of the rest of the site. You cannot do that with CSS background, so you'll have to place the images in the page and use CSS "z-index" to bring them to the front. You need to be aware that "z-index" only works on elements which have a "position" applied to them.

    A good reference to "z-index" can be found here.

  10. #10
    Join Date
    Oct 2009
    Posts
    36
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    I am so lost now?

    Does this look anywhere near what I am looking for?

    Code:
    div {
      width: 200px;
      height: 200px;
      padding: 20px;
    }
     
    .one, .two,  {
      position: absolute;
    }
      
    .one {
      background: http://imagefile name;
      outline: 5px solid #000;
      top: 100px;
      left: 200px;
      z-index: 10;
    }
      
    .two {
      background: http://imagefile name;
      outline: 5px solid #000;
      top: 100px;
      right: 100px;
      z-index: 100;
    }
    Last edited by james438; 09-16-2015 at 05:55 AM. Reason: minor formatting

Similar Threads

  1. Float?
    By Vernier in forum CSS
    Replies: 1
    Last Post: 05-26-2012, 01:41 PM
  2. Resolved Help with float margin bug fix
    By jhatter in forum CSS
    Replies: 1
    Last Post: 01-11-2010, 02:35 PM
  3. Resolved subtracting float
    By abs0lut in forum JavaScript
    Replies: 27
    Last Post: 01-12-2009, 12:11 PM
  4. Replies: 0
    Last Post: 11-21-2007, 04:41 PM
  5. Float bar...
    By pedroz in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 03-03-2006, 09:40 AM

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •