#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    2
    Rep Power
    0

    CSS positioning with objects scaling to it




    I'm a new user so I can't post URLs etc.. the link to the .jpg is http://kainor.dk/shot.jpg

    So I have a <center> (the black menu) with this CSS (with opacity just so you can see what I mean):

    Code:
    center {
            background: #000;
            opacity: (0.5);
            width: 160px;
            height: 100%;
            min-height: 100%;
            position: fixed;
            right: 50%;
            margin-right: -80px;
            top:25px;
            color: @white;
            text-align: left;
    
    }
    Which is in the middle of the browser window.

    I have pages showing up on either right or left side of it depends on what menu link you click on. My problem is that when I resize my window the .page-id on either side does not scale in relation to the <center> Menu. But if I do not give it the fixed property then it won't stay in the middle of the screen.

    <center> is supposed to stay there, and not move even if you scroll..

    I'm working with the bones theme if anyone is familiar with it.

    my css code for the left or right side is :

    Code:
    /*********************
    POSTS & CONTENT STYLES
    *********************/
    
    
    section {
            font-size: 12px;
            font-family: 'Open Sans', serif;
            font-weight: 400;
            height: 100%;
            min-height: 100%;
            margin: 25px 25px 25px 25px;
            
    }
    
    
    article {
            background: @grey;
            opacity:(0.9);
            min-height: 100%;
            bottom: 0px;
    }
    
    		.hentry {
    
    			header {
                                    text-align: center;
                                    margin: 25px 25px 25px 25px;
                            }
    
    			footer {}
    
    		} /* end .hentry */
    
    		.single-title,
    		.page-title {
                     }
    
    		.single-title {}
    
    		.page-title {}
    
    		.archive-title { }
    
    		/* want to style individual post classes? Booya! */
    		.post-id, .post-12, .post-25, .post-15, .post-10, .post-7, .post-29, .post-27, .post-17 {
                    min-height: 100%;
                                
                    } 
                    
                    /* post by id (i.e. post-3) LEFT SIDE */
    		#post-12, #post-25, #post-15, #post-10 {
                            float: left;
                            width: 41%;
                            padding: 25px 25px 25px 25px;
                            min-height: 100%;
    
    
    
                    }
    
                    /* post by id (i.e. post-3) RIGHT SIDE */
    		.post-7, .post-29, .post-27, .post-17 {
                            float: right;
                            width: 45%;
                    
    
    
    
                    } 
    
                    /* general post style */
    		.page {} /* general article on a page style */
    		.attachment {} /* general style on an attatchment */
    		.sticky {} /* sticky post style */
    		.hentry {} /* hentry class */
    		.category-slug {} /* style by category (i.e. category-videos) */
    		.tag-slug {} /* style by tag (i.e. tag-news) */
    
    		/* post meta */
    		.meta {
    			color: #444;
    
    			time {}
    		}
    
    		/* post content */
    		.post-content {
    So... The transparent grey behind the Menu should adjust to the Menu and not hide underneath.. That is something with position, but how else do I get it to stay in there?
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Location
    Jersey
    Posts
    16
    Rep Power
    0
    I'm not sure if i 100% understand but here is my best guess. You are using - margins to center the content which will give you some issues. Try using margin: 0 auto; instead.

    Also, if you want an inner element to scale, the parent div (or article in your case) will have to be a computed value with ems or %. If your article is 160px wide, your inner elements will never resize even if it you are using a % because it is always going to be based off the 160px.

    With that being said take a look at this and see if helps.

IMN logo majestic logo threadwatch logo seochat tools logo