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
Jump to PostIf .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 …
Jump to PostPost your HTML please.
Regards
Arkinder
Jump to Post.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. Theposition: relative;makes it begin at the top-left edge …
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
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
unfortunately .profile is a child of the div. orz
Post your HTML please.
Regards
Arkinder
<body><div class="nav"> juan_crisostomo</div><div class="profile">idle: 0s<br/> activity: Viewing own Profile<br/></div>
<a <div class="footer">© 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
.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
still the same, if I auto the width the output looks like this:
http://img99.imageshack.us/img99/7127/unlednc.png
if i change the width to 500px the result is : http://img233.imageshack.us/img233/8689/unledlo.png
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
the problem is I dont own the page , so I cant edit the html. it just gives me a privilege to edit some css
Alright, then you'll just have to become more familiar with CSS so you can figure out how to edit it on your own. Without access to the page all I can do is guess, which is very ineffective.
Some tutorials: HTML Dog, Mozilla Developer Network, Google Code University
Regards
Arkinder
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.