Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 11
  1. #1
    Junior Member Pxl_Buzzard's Avatar
    Join Date
    Sep 2007
    Posts
    8
    Member #
    15790
    Hey everyone, I've been wrestling with this issue in a custom CSS style (http://userstyles.org/styles/14180, needs Firefox with the Stylish addon). I can't get the two div's, "quickbar" and "main," to center themselves next to each other. I'd prefer to stay away from doing it with margins; can someone please help me out?

  2.  

  3. #2
    Senior Member diddy's Avatar
    Join Date
    Jun 2008
    Location
    Sydney, Australia
    Posts
    502
    Member #
    16955
    I can't see what divs your talking about.

    But I'd do margins. It's easy. What's keeping you away from that method?

    Of course you could create a parent div and set a width to that and to text-align: center; but that's not how you're meant to do it.

  4. #3
    Junior Member Pxl_Buzzard's Avatar
    Join Date
    Sep 2007
    Posts
    8
    Member #
    15790
    Quote Originally Posted by diddy
    I can't see what divs your talking about.

    But I'd do margins. It's easy. What's keeping you away from that method?

    Of course you could create a parent div and set a width to that and to text-align: center; but that's not how you're meant to do it.
    I'm trying to stay away from margins because I want this to work on multiple screen resolutions, and using margins makes it only work great for my resolution.

    And no, I can't do a parent div (I don't think), because I can only change the CSS of the site, otherwise I'm sure it would be easier like you said.

  5. #4
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Any chance we could see some actual code?

  6. #5
    Junior Member Pxl_Buzzard's Avatar
    Join Date
    Sep 2007
    Posts
    8
    Member #
    15790
    You can view all the code at the link I provided (http://userstyles.org/styles/14180), but here's the code anyways:

    Code:
    @namespace url(http://www.w3.org/1999/xhtml);
    
    @-moz-document domain("tweakguides.com") {
    
    div[id="adbar"] {
    
      display: none !important;
    
      }
    
    
    
    div[id="main"] {
    
      
    
      z-index: 0 !important;
    
      max-width: 850px !important;
    
      margin-left: auto !important;
    
      margin-right: auto !important;
    
      }      
    
    
    
    ul[id="nav"] {
    
    
    
      font-size: 20px !important;
    
      padding: 0 165px 7px !important;
    
      }
    
    
    
    div[id="guide"] {
    
    
    
      width: 800px !important;
    
      margin: 0 !important;
    
      margin-left: auto !important;
    
      margin-right: auto !important;
    
      border: 2px solid black !important;
    
      -moz-border-radius: 10px !important;  
    
      }
    
    
    
    div[id="quickbar"] {
    
    
    
      z-index: 1 !important;
    
      margin-left: auto !important;
    
      margin-right: auto !important;
    
      border: 2px solid #000 !important; 
    
      -moz-border-radius: 10px 10px 10px 0 !important; 
    
      }        
    
    
    
    div[id="sidebar"] {
    
        
    
      margin: -11px 0 10px 15px !important;
    
      border: 2px dashed #81A6D3 !important;  
    
      }
    
    
    
    h1 {
    
        
    
      font-size: 15px !important;  
    
      }
    
    
    
    h2 {
    
        
    
      font-size: 9px !important;  
    
      }
    
    
    
    a:hover {
    
        
    
      background: #C0F0F0 !important;
    
      color: #41576F !important;  
    
      -moz-border-radius: 2px !important; 
    
    }
    }

  7. #6
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    Let me get this straight. You can only change the css? Not the markup? It will be guessing on our part to solve your problem without seeing the markup.

    Also, I'm not sure I understand your question. Do you want them to stay together in all resolutions or divide evenly in larger monitors? Your going to probably have to wrap them in one div. Can you show us the markup?

  8. #7
    Junior Member Pxl_Buzzard's Avatar
    Join Date
    Sep 2007
    Posts
    8
    Member #
    15790
    Quote Originally Posted by aeroweb99
    Let me get this straight. You can only change the css? Not the markup? It will be guessing on our part to solve your problem without seeing the markup.

    Also, I'm not sure I understand your question. Do you want them to stay together in all resolutions or divide evenly in larger monitors? Your going to probably have to wrap them in one div. Can you show us the markup?
    The site I'm attempting to edit through a Firefox addon (Stylish) is TweakGuides.If you look through the site code, you can see that the two div's have no relation to each other in the code itself, so I need to get them to have the same properties (centered) without overlapping each other within the CSS. Does that help?

  9. #8
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    Ok that's a different link than before. I think your terminology is a little off. "Overlapping within css" has me baffled a little. Your going to have to wrap those two divs up if you want this to work. If you can't alter the markup then maybe we can find a different solution.

    Just so we are clear, you want them to line up like the "after" screen shot from the link in your first post?

  10. #9
    Junior Member Pxl_Buzzard's Avatar
    Join Date
    Sep 2007
    Posts
    8
    Member #
    15790
    Yes, that's how the site looks on my computer if I use margins, but I want it to look that way on every computer, not just mine.

  11. #10
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    Can you alter the markup (not the css, the code)? The css you have now is centering these divs relative to the elements on each side of the div, so they will stretch and leave gaps. If you can alter the markup, then it's any easy fix, if not, then it will take some tinkering.


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 05:27 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com