0
div{
background:0 10px url(bkcontentwrap.png) repeat-y;
background-size: 800px auto;
	overflow:hidden;
	
	}
.profile{
	text-align:center;
	}

the width of div and .profile is the same , but i want to change the width of .profile without changing the width of the background

2
Contributors
10
Replies
11
Views
6 Years
Discussion Span
Last Post by Arkinder
0

btw the text content of .profile is not <p>


i cant change it if its not in <p> unless i change the width of the whole .profile which is a problem because the background width changes along with the text

0

If .profile is a child of the division then it's going to have the same width because you haven't set any widths, unless .profile in an inline element (I'm assuming not since you're using text-align: center; )

So once again, assuming:

div {
    background: 0 10px url(bkcontentwrap.png) repeat-y;
    background-size: 800px auto;
    overflow: hidden;
    position: relative;
}
.profile {
    text-align: center;
    position: absolute;
    width: 2000px;
}

Regards
Arkinder

0
<body><div class="nav">&nbsp;juan_crisostomo</div><div class="profile">idle: 0s<br/> activity:&nbsp;Viewing own Profile<br/></div>

<a <div class="footer">&copy; 2006 - 2011 <a class="footerlink" href="http://pinoywap.net">pInOyWaP</a></div></body>

its from other site, the site gives option to change your desired css. I want to make the background size of .profile be fix and the content text in different width size

0
.nav {
    position: relative;
}
.profile {
    position: absolute;
    width: 2000px;
}

position: absolute; will remove the element from the normal flow of the page and move to the top-left edge of the document. The position: relative; makes it begin at the top-left edge of that element instead of the document. Now you should be able to freely adjust the width of either element respectively.

Regards
Arkinder

0

Thank you for the screen shots, they make my life so much easier. One thing you could try.

<div id="profile_info"><!-- the container for the page -->
<div id="profile_info_container">
<!-- the container for the content; it will have the border shown in your screen shots, and it will have the width that displays both pages -->

    <div id="pic_left_page">
    <!-- will hold the content of the left page. A set width will prevent the issue in your first screen shot -->
    </div>

    <div id="pic_right_page">
    <!-- will hold the content for the right page -->
    </div>

</div>
</div>

If the layout makes sense then the CSS shouldn't be a problem for you. If you're still having an issue, or don't want to edit your markup. Message me a test user account.

Regards
Arkinder

0

the problem is I dont own the page , so I cant edit the html. it just gives me a privilege to edit some css

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.