SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2011
    Location
    Sydney, Australia
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Move my box to the right

    Hello,

    My page : http://dev.leadcreation.com.au/home/about/

    I would like to move my box to the right in my footer.

    Look at the screenshot below :

    decallage.png

    Thank you !

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,322
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by bond70 View Post
    I would like to move my box to the right in my footer.
    Just increase the value in red below:

    Code:
    #supplementary #second {
      box-shadow: 0 -1px 5px 1px #3898D4;
      height: 327px;
      margin: 0 0 0 55px;
      overflow: hidden;
      width: 510px;
    }

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2011
    Location
    Sydney, Australia
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have tested but it's not working with :

    Code:
    #supplementary #second {
      box-shadow: 0 -1px 5px 1px #3898D4;
      height: 327px;
      margin: 0 0 0 65px;
      overflow: hidden;
      width: 510px;
    }

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,322
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    That will move it by 10px. It still says 55px online, though.

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2011
    Location
    Sydney, Australia
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes because I have modified the value with Firebug. Not directly in the css.

    I have tested with 58,60,65,70px but the footer burst.

    Test it to know what I mean.

  6. #6
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,423
    Mentioned
    274 Post(s)
    Tagged
    5 Thread(s)
    Removing that 55px will bring the other boxes over from the left and narrow the gap that way. However, I'm seeing other problems with your layout. In Firefox7, Chromium and Epiphany on Linux, the entire footer area is way over to the right, causing a horizontal scroll-bar.
    Attachment 58245

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You have a lot of weird stuff going in there especially the min-width 1900px !!!

    Add these styles to get it back to being more normal:

    Code:
    #supplementary {
    	width:1100px;
    	margin:auto
    }
    #colophon {
    	min-width:1100px;
    	margin:-280px auto 0
    }
    #supplementary #second { margin-left:0; }
    #supplementary { padding:1.625em 0 }
    #access {
    	width:auto;
    	right:-200px;
    }
    #supplementary #third {
    	float:left;
    	margin:0 0 0 10px;
    }
    #triangle2 {
    	position:static;
    	margin:-35px 0 0 170px;
    }
    You can test more easily with css terminal and just paste the code above in there to see the affect more easily than using Firebug:

  8. #8
    SitePoint Enthusiast
    Join Date
    Oct 2011
    Location
    Sydney, Australia
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok thank you, it's good now!

    My last problem is when I resize the browser window : my footer burst

    I have tested with "min-width" but it's the same..

    How I can fix that ?

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    At the bottom of style.css you have media queries set up to change the whole page layout for smaller screens so you need to add rules there to create a variation of the footer that will fit into that smaller space.

    The media queries start here:

    Code:
    @media (max-width: 800px) {
    	/* Simplify the basic layout */
    	#main #content {
    		margin: 0 7.6%;
    		width: auto;
    	}
    In that media query you should be developing your small screen layout which is usually a narrow simplified version of the site.

  10. #10
    SitePoint Enthusiast
    Join Date
    Oct 2011
    Location
    Sydney, Australia
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have tested with :

    @media (max-width: 100px) {
    and it's good now !

    Thank you very much Paul O'B you are the best !


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
  •