Page 1 of 2
problems with DIVS
Posted: Thu Jan 22, 2004 6:43 am
by malcolmboston
i have had a few problems with DIVS over the last 4/5 years and have never actually figured out a ways round it even with using CSS
99% of the time i create my sites using pixel based measuring system other the % based equivalent, now whenever a user resizes the window or whatever then the layer is screwed up all over the screen
im not too bothered about this problem but it would be worth knowing the answer too (note: my HTML teacher 4 years ago said it couldnt be done, so i would also like to prove him wrong

)
Posted: Thu Jan 22, 2004 9:15 am
by kendall
malcolm,
i dont know what your question suppose to be but it is much better to use a "%" over a pixel based factor reason being because 25% on any sceen size will always put the div tag 25% in relation to the object where as 25px will be 25px from the screen it self....it think
Kendall
Posted: Thu Jan 22, 2004 9:17 am
by malcolmboston
yeah i know, but it can cause problems when using images on your site
view msn.com for example does this exactly for the reasons ive stated therefore it is not a viable solution in many cases for me unfortunately
from what i am aware DIVS cannot work with having a % based site, if anyone knows any differently please divulge.........
Posted: Thu Jan 22, 2004 9:35 am
by kendall
Dont mean to sound discouraging but....maybe the solutions is to NOT use DIV's?
Kendall
Re: problems with DIVS
Posted: Thu Jan 22, 2004 9:55 am
by Roja
malcolmboston wrote:i have had a few problems with DIVS over the last 4/5 years and have never actually figured out a ways round it even with using CSS
99% of the time i create my sites using pixel based measuring system other the % based equivalent, now whenever a user resizes the window or whatever then the layer is screwed up all over the screen
im not too bothered about this problem but it would be worth knowing the answer too (note: my HTML teacher 4 years ago said it couldnt be done, so i would also like to prove him wrong

)
It's unclear from your description what you are using (pixel based, or %), what the results are based on that (screwed up, or not), and what you want to have happen.
Please, explain more clearly (perhaps some simple example code?), and I'll be happy to try to help.
Posted: Thu Jan 22, 2004 9:56 am
by Roja
malcolmboston wrote:
from what i am aware DIVS cannot work with having a % based site, if anyone knows any differently please divulge.........
Depends on what you mean, exactly.
But yes, you can set styles with % measurements on divs.
Posted: Thu Jan 22, 2004 9:57 am
by malcolmboston
hey like i said im not really bothered, a good designer can always find compromises, just wanted to know if it could be done
Posted: Thu Jan 22, 2004 1:47 pm
by Unipus
Yeah, you're not really being clear here about what your actual question is. any element can be assigned a size in % or fixed width, if that's your question... so that's not your problem. a liquid layout is a bit harder to achieve, but i can't think of any technical reason it can't be done.
Posted: Thu Jan 22, 2004 3:26 pm
by uberpolak
Liquid layouts are a bit tougher to grasp at first, but in many cases are worth it (not always). If you want to use absolute values for your elements, using divs and CSS is a piece of cake. Do you have a sample site so we can try to show you what to change?
Posted: Wed Feb 04, 2004 6:15 pm
by no_memories
I think I have your answer:
Code: Select all
#example {
position: relative;
width: auto;
height: auto;
margin: 0px 175px 20px 205px;
padding: 0px;
background: none;
border: 1px #333 solid;
z-index: 1;
}
Code: Select all
<div id="example">text or stuff goes here</div>
The problem you are facing is margins. Specify the margins to hold the box in a fixed position relative to say the top of the browser. The margins hold the edges in place while the box itself expands.
If you have to look at an example, just check my home page out.
Hope this helps.
Posted: Wed Feb 04, 2004 6:39 pm
by Unipus
relative positioning will take it out of the document flow, though.
Posted: Wed Feb 04, 2004 6:59 pm
by no_memories
true, but the way I did mine was to place an absolute container that held the relative container.
Code: Select all
#container {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: auto;
margin: 0px;
padding: 0px;
}
#example {
position: relative;
width: auto;
height: auto;
margin: 0px 175px 20px 205px;
padding: 0px;
background: none;
border: 1px #333 solid;
z-index: 1;
}
Code: Select all
<div id="container">
<div id="example">text or stuff goes here</div>
</div>
This will keep the document flow while allowing a strecting DIV. If done properly, it will be multi browser compatible.
other absolute containers can be placed inside the top level container for menus and such. These absolute containers will not affect the relative position of the example container.
Posted: Thu Feb 05, 2004 11:45 am
by no_memories
Here is a working example:
Keep in mind for this to look 99% the same in various browsers, you must workin some of the quirks each browser may have.
Mozilla and I.E. see things like padding and borders a wee different. Puting specified pixel boxes inside boxes often compenstates for the failures in I.E. (I.E. is not as W3C compliant as say Mozilla Firebird.
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Stretcher</title>
<style>
#container {
position: absolute;
top: 200px;
left: 0px;
width: 100%;
height: auto;
margin: 0px;
padding-top: 20px;
padding-bottom: 20px;
background: #ccc;
}
#stretcher {
position: relative;
width: auto;
height: auto;
margin: 0px 175px 0px 175px;
padding: 10px;
color: #000;
background: #999;
border: 1px #666 solid;
text-align: justify;
z-index: 1;
}
#list1 {
position: absolute;
top: 20px;
left: 50px;
width: 145px;
height: auto;
margin: 0px;
padding: 0px;
z-index: 1;
}
#list1 h4 {
margin: 0px 0px 5px 0px;
padding: 3px 0px 2px 0px;
}
#list1 dl {
margin: 0px 0px 15px 0px;
padding: 0px;
}
#list1 dl dt {
margin: 0px 0px 10px 0px;
padding: 2px 0px 0px 0px;
}
</style>
</head>
<body>
<div id="container">
<div id="list1">
<h4>Some Links</h4>
<dl>
<dt><a href="#">Link</a></dt>
<dt><a href="#">Link</a></dt>
<dt><a href="#">Link</a></dt>
</dl>
</div>
<div id="stretcher">
<p>Tenet said analysts had varying opinions on the state of Iraq's chemical, biological and nuclear weapons programs and those differences were spelled out in the October 2002 National Intelligence Estimate given to the White House. That report summarized intelligence on Iraq's weapons programs.</p>
<p>Analysts "painted an objective assessment for our policy makers of a brutal dictator who was continuing his efforts to deceive and build programs that might constantly surprise us and threaten our interests, " he said in a speech at Georgetown University.</p>
</div>
</div>
</body>
</html>
Bon Chance!!

Posted: Sat Apr 17, 2004 1:58 pm
by malcolmboston
instead of creating a brand new topic i thought i'd revive this
here is exactly the problem im talking about
first view it at 1024*768, it looks fine
then @ 800*600
Site Here
This is annoying me to death, i took out the Database because i couldnt be bothered creating it on this server
Thanks, any help would be great
Posted: Sat Apr 17, 2004 2:33 pm
by feyd
fix pm'd.