Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    Nov 2009
    Posts
    202
    Thanks
    25
    Thanked 0 Times in 0 Posts

    how do i do this task? it is pretty complex i think

    1. i am trying to know just how i can take the area named categories and move it into the area that contains the rose image (just as I did with the Members Area). That is the first step.

    2. Secondly, I want to have that a wider version of the rose picture span the whole width of the page.

    3. Thirdly, where is the teal background coming from under Categories? I could not lock onto it with firebug.

    4. Alternatively, If I just wanted to keep everything as is and have a wider picture fall beneath the Categories, would I need to break the image into two pieces and "glue" them? Would that even work?

    5. As another alternative, if I wanted to move the categories down below a wider image, how would that be done? That seems like the quickest change I could make.

    for this site: /globalpetals.com/index_main.php



    Thank you.....
    Last edited by cyborg360; 11-01-2011 at 11:09 PM.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello cyborg360,
    #1 should be pretty easy. You would just need to move .contentarea_left into #bannertop. Some CSS might need to be adjusted get it placed where you want.

    #2...

    #3 is contentarea_bg.jpg, the background of .contentarea

    #4 Just repeating the image on the y axis would probably not look so good. Some photoshoping might be called for here?

    #5 Either of these options would take a bit of work. Since the image you have works with what you have now, maybe it would be easiest to work on option #1?
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Regular Coder
    Join Date
    Nov 2009
    Posts
    202
    Thanks
    25
    Thanked 0 Times in 0 Posts
    Oh, thanks for that. Now, I still need to move "Categories" down so that "Member's Area" can come over to the left. But, categories.php is the file that handles the categories and subheading div whereas centermain.php handles the rose image and all the rest. so i think there are two php files within one div (named contentarea). how do i manipulate this?

    Quote Originally Posted by cyborg360 View Post
    1. i am trying to know just how i can take the area named categories and move it into the area that contains the rose image (just as I did with the Members Area). That is the first step.

    2. Secondly, I want to have that a wider version of the rose picture span the whole width of the page.

    3. Thirdly, where is the teal background coming from under Categories? I could not lock onto it with firebug.

    4. Alternatively, If I just wanted to keep everything as is and have a wider picture fall beneath the Categories, would I need to break the image into two pieces and "glue" them? Would that even work?

    5. As another alternative, if I wanted to move the categories down below a wider image, how would that be done? That seems like the quickest change I could make.

    for this site: /globalpetals.com/index_main.php



    Thank you.....

  • #4
    Regular Coder
    Join Date
    Nov 2009
    Posts
    202
    Thanks
    25
    Thanked 0 Times in 0 Posts
    update:

    here's where im at. ive replaced the background image of the entire center with the rose image. i just need to reduce the width of the right side of the center area div and get that image to stop repeating. the issue with the image:

    background:url(banner_top.jpg) top left repeat-x;

    when i remove the top left and repeat-x, or only the repeat-x, the page doesn't display my intended design.

    can someone assist with this?

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    .contentarea {
    background: url("banner_top.jpg") no-repeat;
    margin: 10px 0 0;
    padding: 0 10px 0;
    width: 978px;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    Regular Coder
    Join Date
    Nov 2009
    Posts
    202
    Thanks
    25
    Thanked 0 Times in 0 Posts
    quick followup question:

    how do i remove the gap between div navatop and div contentarea?

    i dont see margins.

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by cyborg360 View Post
    quick followup question:

    how do i remove the gap between div navatop and div contentarea?

    i dont see margins.
    #navtop is 60px high...
    #navtop's background, menu_bg.jpg is only 57px high
    ul and li's included in .navtop are only 57px high as well.

    Fix that gap by changing this bit highlighted in red:
    Code:
    .navtop {
        background: url("menu_bg.jpg") repeat-x;
        border-radius: 0.5em 0.5em 0.5em 0.5em;
        height: 57px;
        width: 960px;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #8
    Regular Coder
    Join Date
    Nov 2009
    Posts
    202
    Thanks
    25
    Thanked 0 Times in 0 Posts
    excellent!

    now, the next thing i want to do is create a red background for those shipping images. i tried creating a new div with background-color but it just didnt work out for me. it instead placed it on top of the contact information but i am pretty sure i placed it after that div. is there a rule with footers that does not allow placement of divs after them?

    please help me out.
    Last edited by cyborg360; 11-02-2011 at 05:48 AM.


  •  

    Posting Permissions

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