...
PDA

Scale for different resolutions but also have a minimum width?

teamleaf
04-07-2009, 04:39 PM
Is it possible?

If so, what code will help me accomplish this?
abduraooft
04-07-2009, 04:50 PM
The layout given at http://bonrouge.com/2c-hf-fullyfluid.php has that feature, you may check the source to view the code.
timgolding
04-07-2009, 04:56 PM
Yes i have done it before took me ages

CSS:

/* the bodge for IE6 browsers */
* html .minwidth {border-left:657px solid #fff; position:relative; float:left; z-index:1;}

.page
{
position:relative;
min-width:640px;
_margin-left:-657px;
/float:left;
/z-index:2;
padding:5px;
}


HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html id="html" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Your Title</title>
</head>
<body>
<div class="minwidth"><div class="page">

<!-- Put your page content in here -->

</div></div>
</body>
</html>


I included the doctype etc because thats the doctype i used not sure if it works for others. Obviously change the title and charset as required. Not sure. I guess to change the minwidth to desired you need to change

border-left:657px solid #fff;

min-width:640px;
_margin-left:-657px;

those lines
teamleaf
04-08-2009, 09:15 PM
Yes i have done it before took me ages

CSS:

/* the bodge for IE6 browsers */
* html .minwidth {border-left:657px solid #fff; position:relative; float:left; z-index:1;}

.page
{
position:relative;
min-width:640px;
_margin-left:-657px;
/float:left;
/z-index:2;
padding:5px;
}


HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html id="html" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Your Title</title>
</head>
<body>
<div class="minwidth"><div class="page">

<!-- Put your page content in here -->

</div></div>
</body>
</html>


I included the doctype etc because thats the doctype i used not sure if it works for others. Obviously change the title and charset as required. Not sure. I guess to change the minwidth to desired you need to change

border-left:657px solid #fff;

min-width:640px;
_margin-left:-657px;

those lines


Thanks! Works perfectly! Will test it in IE tomorrow, but it should be fine.

I'm still not quite sure what the 657 is for, but i made my min width 1020 so I made the other # into 1037 to keep the extra 17 in there.

Thanks again!
timgolding
04-08-2009, 11:18 PM
cool I looked at this code this morning and realised i left out a div. Well you probably worked that much out it is a div that sits inside <div class="page"> and has width set to 100%.

Here are the full codes.

CSS:

/* the bodge for IE6 browsers */
* html .minwidth {border-left:657px solid #fff; position:relative; float:left; z-index:1;}

.page
{
position:relative;
min-width:640px;
_margin-left:-657px;
/float:left;
/z-index:2;
padding:5px;
}

div#webpage_container
{
text-align:center;
}

div#webpage
{
width:100%;
text-align:left;
margin-left:auto;
margin-right:auto;
}


HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html id="html" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Your Title</title>
</head>
<body>
<div class="minwidth"><div class="page">
<div id="webpage_container">
<div id="webpage">

<!-- Put your page content in here -->

</div></div>
</div></div>
</body>
</html>



Though most of the new stuff here is to center the content. If you don't need to center the content then just use one div with width:100%;
Here is an example if you get stuck with it. http://180.co.uk.

I'm not sure if just adding 17px and keeping the difference the same is what you want its probably proportional. Every time i used this for different widths I seem to remember having to sit and play around with these three numbers till it fits on the different browsers. Just have a play. Anyway glad it helped.
teamleaf
04-09-2009, 02:00 PM
Eh... Firefox and Safari work perfectly. IE 6 & IE 7 break it and both look completely different.


http://teamleaf.org/FootballTest/indextesty.html (http://teamleaf.org/FootballTest/indextesty.html)

Please help!
timgolding
04-09-2009, 03:36 PM
Unfortunately I'm gonna be very busy until the weekend but can have a look then for you.
teamleaf
04-09-2009, 04:45 PM
Unfortunately I'm gonna be very busy until the weekend but can have a look then for you.

Thanks.

Anyone know how I can turn my menu into a drop down?
abduraooft
04-09-2009, 04:52 PM
Anyone know how I can turn my menu into a drop down?You need to add the required htmls elements, nested inside your main navigation items, and then apply some CSS. http://htmldog.com/articles/suckerfish/dropdowns/ is a good resource to learn the trick.
teamleaf
04-10-2009, 12:46 AM
You need to add the required htmls elements, nested inside your main navigation items, and then apply some CSS. http://htmldog.com/articles/suckerfish/dropdowns/ is a good resource to learn the trick.

Okay..l. I went there and got all the code into my page... bu it is always referencing some sfhover thing. What is that? How do I get it? Do I need it?

Check the page to see what it looks like now with the current stuff on it.

http://teamleaf.org/FootballTest/indextesty.html


Thanks guys!
abduraooft
04-10-2009, 10:04 AM
Okay..l. I went there and got all the code into my page... bu it is always referencing some sfhover thing. What is that? How do I get it? Do I need it?
Yes you need it for IE6 (and that little javascript), as it doesn't support :hover pseudo on elements other than anchor.
timgolding
04-11-2009, 02:08 PM
Think i better leave you to sort the menu out before i attempt to fix this.

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum