Forum Moderators: not2easy
I have used fixed width and I want to make all pages constant looks, no compressing and no expanding but could not figure out the cause on this.
Could anyone help me for this?
Thank you all for your kind help
Sheru
Could you please post some relevant code?
case is: News and contacts pages contains no images... so behaviour is of same type but projects page contains images.
Thank you all for your great response.. one more time to bother you all.
Yes, I have hover defined menu but then if I removed hover part, behavior is still same. No success..
I have container as shown below
#maincontainer {
position:relative;
width: 1000px;
\width: 1000px;
w\idth: 1000px;
min-height: 300px;
margin-left:auto;
margin-right:auto;
margin-top:-17px;
padding:0px;
padding-top:1px;
padding-bottom:1px;
background-color: #fff;
border: 1px solid #369;
/* overflow:auto; */
}
WHAT I FOUND THAT IS, IN BODY CSS SHOWN BELOW IF I ADD position:relative; width: 1000px; THESE TWO LINES entire website becomes left align BUT THERE IS NO COMPRESS AND EXPAND. That means success a bit.
PROBLEM NOW IS: I Can't make enter website centered. Is there any way that i can make whole site centered?
body {
background-image: url();
margin:0px;
font-family: Arial, Helvetica, Verdana, "Lucida Grande", Tahoma;
font-size: 12px;
text-align: justify;
line-height: 16px;
color: #4F5155;
border:2px solid green;
}
Any Suggestions..
It's urgent.
Thank you all for your kind help
If both 'margin-left' and 'margin-right' are 'auto', their used values are equal. This horizontally centers the element with respect to the edges of the containing block.Since from your code, #maincontainer already has left and right margins set to 'auto', I'd guess that #maincontainer is not a block element. If #maincontainer is a block element and the browser is IE, then body{text-align:justify} may be interfering. If #maincontainer is not a block element (?), you can do this and see if it helps: #maincontainer{display:block}.
I question the width hacks.
I question negative margin. I don't know what you are trying to achieve but negative margin doesn't make sense.
#maincontainer padding could more simply be {padding:1px 0}
Edit: fixed error in padding property.
[edited by: MarkFilipak at 5:11 am (utc) on Mar. 27, 2008]
and can you post the html for the body/#maincontainer/nav outline please
the width hacks do indeed look unnecessary seeing as they're all setting the same width anyway but that shouldn't affect the centering
sounds like your images are acting like a 'prop' which might indeed suggest an inline container, or a table without width set?
HTML should help thanks
I will explain my senario..
<body>
<div id="header"></div>// banner & width:1000px
<div id="headtext"></div>//just below banner eg.logged as Samu & width:1000px
<div id="maincontainer"></div>
</body>
AND I HAVE REPLACED THOSE LINES BELOW FROM #maincontainer, #header and #headertext and #footer.
margin-left:auto;
margin-right:auto;
WITH THE margin-left:180px;
Status: Now it seems in middle and SHOWS NO COMPRESSION AND NO EXPANDS IN WIDTH.
NOW MY QUESTION: Is this the right way to fix this kind of problem? Please need your suggestion. Does it have any problem with windows resolution size while viewing pages with different resolution, like
800x600 px or may be 1280x960 so on..
Thank you for your help
As I test by compressing whole window from right to left, winow just stops at margin 180px from left with background only. That means my whole container stops at 180px from left.
Here is my html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
<div id="header"></div>
<div id="headertext">
<div style="float:right;margin-right:1px">
current language: english <img src="http://localhost:8888/images/flags/english_current.gif" style="border:0" />
<img src="http://localhost:8888/images/flags/dutch.gif" style="border:0" /></a></div>
<div style="float:center;margin-left:415px;padding-bottom:2px">
current theme: default <a href="http://localhost:8888/theme/default" title="default">default</a> <a href="http://localhost:8888/theme/clean" title="clean">clean</a> <a href="http://localhost:8888/theme/black" title="black">black</a></div><!--- theme -->
<div style="float:left; padding-left:20px;margin:-18px">
Logged in as, test <a href="http://localhost:8888/logout" title="Logout">Logout</a><br>
</div><!--- logged as -->
</div><br><!--- headertext -->
<div id="maincontainer">
<div style="clear:both"></div>
<div id="navcontainer">
<div id="sidebarmenu">
<ul>
<li><a>Areas on Menu</a>
<ul>
<li><a href="">test1</a></li>
<li><a href="">test2</a></li>
<li><a href="">Donate</a></li>
<li><a href="">test3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div><br><!--- sidebarmenu -->
</div><!--- navcontainer -->
<div class="contentbox"><div>
</div> </div><!--- maincontainer -->
</div>
<div id="footer">Rendered in 0.0179 seconds ; </div>
</body>
</html>
You have too many
</li>and
</ul>and your
divopening and closing tags don't match -- either not enough
<div>or too many
</div>.
Please be careful. Please, take the time to create a TEST PAGE just for us. Then TEST IT. Then copy it here.
<style>
#header{width:1000px;margin:0 auto;background-color:red}
#headertext{width:1000px;margin:0 auto;background-color:red}
#maincontainer{width:1000px;margin:0 auto;background-color:red}
#footer{width:1000px;margin:0 auto;background-color:red}
</style>
<style>
#centerMe{
width:1000px;
left:0;
margin:0 auto;
position:expression('absolute'); /* IE */
left:expression(String((document.body.offsetWidth-1000)/2) +'px') /* IE */
}
#header,#headertext,#maincontainer,#footer{width:100%}
</style>
<body>
<div id='centerMe'>
...your-content-here...
</div>
</body>
the margin: 0 auto; method of centering will work with the provided doctype in IE6 and 7, if you want centering/support in IE5.5 too then use the text-align workaround.
body {
text-align: center; /* IE5.5 center */
}#wrapper {
width: 1000px;
margin: 0 auto;
text-align: left; /* override IE center, put your justify here if that's your pref */
border: 2px solid green;
}
-Suzy
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<style>
#maincontainer {
position:relative;
width: 1000px;
\width: 1000px;
w\idth: 1000px;
min-height: 300px;
margin-left:auto;
margin-right:auto;
margin-top:-17px;
padding:0px;
padding-top:1px;
padding-bottom:1px;
background-color: #fff;
border: 1px solid #369;
/* overflow:auto; */
}
body {
background-image: url();
margin:0px;
font-family: Arial, Helvetica, Verdana, "Lucida Grande", Tahoma;
font-size: 12px;
text-align: justify;
line-height: 16px;
color: #4F5155;
border:2px solid green;
}
#centerMe{
width:1000px;
left:0;
margin:0 auto;
/* --- COMMENTED OUT
position:expression('absolute');
left:expression(String((document.body.offsetWidth-1000)/2) +'px')
COMMENTED OUT -- */
}
#header,#headertext,#maincontainer,#footer{width:100%}
</style>
<body>
<div id="centerMe">
<div id="header">
</div>
<div id="headertext">
<div style="float:right;margin-right:1px">
current language: english
<img src="english_current.gif" style="border:0" />
<img src="dutch.gif" style="border:0" /></a>
</div>
<div style="float:center;margin-left:415px;padding-bottom:2px">
current theme: default
<a href="#" title="default">default</a>
<a href="#" title="clean">clean</a>
<a href="#" title="black">black</a>
</div><!--- theme -->
<div style="float:left; padding-left:20px;margin:-18px">
Logged in as, test <a href="#" title="Logout">Logout</a><br>
</div><!--- logged as -->
</div><br><!--- headertext -->
<div id="maincontainer">
<div style="clear:both">
</div>
<div id="navcontainer">
<div id="sidebarmenu">
<ul>
<li><a>Areas on Menu</a>
<ul>
<li><a href="">test1</a></li>
<li><a href="">test2</a></li>
<li><a href="">Donate</a></li>
<li><a href="">test3</a></li>
</ul>
</li>
</ul>
</div><br><!--- sidebarmenu -->
</div><!--- navcontainer -->
<div class="contentbox">
<div>
</div>
</div><!--- maincontainer -->
<div id="footer">Rendered in 0.0179 seconds ;
</div>
</div>
</body>
</html>
[edited by: SuzyUK at 6:49 pm (utc) on Mar. 27, 2008]
[edit reason] minimised sidescroll [/edit]
Because without the expressions, the content is not centered in IE6. Try it yourself:
I did, and it is centering just fine in IE6 without the expression?
and there is still a lot of unnecessary widths in the CSS..
edit because the closing maincontainer tag was confusing me, it's not the one it says it is.. and I think it should be inside the footer? although that makes no difference to the centering..
[edited by: SuzyUK at 6:54 pm (utc) on Mar. 27, 2008]
margin: 0 auto;no matter, talk has already turned to not supporting IE5.x so I'd rather use the text-align: center; which is only for IE5.x (back hack/workaround) and then rely on what I know about 6 instead?
will post some compare code in a bit if you or samu12 want but either way will work and it's still about choice
I don't understand your reply, Suzy. (I _am_ talking about IE6. The code I posted needs the expressions to display centered in IE6... at least, my copy of IE6.)
Re, IE5/5.5: Gee, how many web pages these days will even show up in them? I'd have thought that IE5.x users would have been forced to upgrade long ago.
As per the suggestion, I am trying to work out.. IF success or Even Failure, I will come to this forum.
Once My heartfelt thanks to Both
I tested by removing things like #header,#headertext, #footer and #maincontainer
NOW, I HAVE
<body>
<?php echo $content?>// WITH THIS ALSO SAME PROBLEM WHERE NO DIV,NAV EXITS.
</body>
and noticed that in my page that
Behaviour patter are same for less content in a page(menu for front end and back) where there is not horizontal scroll bar produced.(width of entire web remains same)
Behaviour patter becomes different for large content in a page where there is horizontal scroll bar produced.(Some menu has less content and others large)
Of all Large content menu --- Same width
Of all Small content menu --- Same width
Now pattern differs here
While moving from Large content to Small content menu OR VICE-VERSA, there appears
width compressing and expands
NO JOY,
ANY SUGGESTIONS..
Can you restate your problem? I don't understand what you wrote.
For me Seems problem fixed. Just now did this way in my body part..
body {
position:relative;
width:1000px;
margin-left:auto;
margin-right:auto;
font-family: Arial, Helvetica, Verdana, "Lucida Grande", Tahoma;
font-size: 12px;
text-align: justify;
line-height: 16px;
color: #4F5155;
border:none;
overflow:scroll; // Actually this property Fixed my problem.
}
I have tested in Camino browser(MacOs) and will try in IE and others
NOW WITH JOYOUS HEART
Thank you Both
Hope to keep in touch in this forum
Samu
