CSS positioning with objects scaling to it

Dev Shed Forums Sponsor:

October 9th, 2012, 11:01 AM

Ottolaisner

Registered User

Join Date: Oct 2012

Posts: 2

Time spent in forums: 1 h 13 m 33 sec
Reputation Power: 0

CSS positioning with objects scaling to it

URL

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?

October 9th, 2012, 04:35 PM

danramosd

Registered User

Join Date: Oct 2012

Location: Jersey

Posts: 16

Time spent in forums: 2 h 35 m 46 sec
Reputation 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.

CSS positioning with objects scaling to it

Developer Shed Advertisers and Affiliates