problems with DIVS

JavaScript and client side scripting.

Moderator: General Moderators

malcolmboston
DevNet Resident
Posts: 1826
Joined: Tue Nov 18, 2003 1:09 pm
Location: Middlesbrough, UK

problems with DIVS

Post 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 :roll: )
User avatar
kendall
Forum Regular
Posts: 852
Joined: Tue Jul 30, 2002 10:21 am
Location: Trinidad, West Indies
Contact:

Post 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
malcolmboston
DevNet Resident
Posts: 1826
Joined: Tue Nov 18, 2003 1:09 pm
Location: Middlesbrough, UK

Post 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.........
User avatar
kendall
Forum Regular
Posts: 852
Joined: Tue Jul 30, 2002 10:21 am
Location: Trinidad, West Indies
Contact:

Post by kendall »

Dont mean to sound discouraging but....maybe the solutions is to NOT use DIV's?

Kendall
Roja
Tutorials Group
Posts: 2692
Joined: Sun Jan 04, 2004 10:30 pm

Re: problems with DIVS

Post 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 :roll: )
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.
Roja
Tutorials Group
Posts: 2692
Joined: Sun Jan 04, 2004 10:30 pm

Post 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.
malcolmboston
DevNet Resident
Posts: 1826
Joined: Tue Nov 18, 2003 1:09 pm
Location: Middlesbrough, UK

Post 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
Unipus
Forum Contributor
Posts: 409
Joined: Tue Aug 26, 2003 2:06 pm
Location: Los Angeles, CA

Post 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.
User avatar
uberpolak
Forum Contributor
Posts: 261
Joined: Thu Jan 02, 2003 10:37 am
Location: Next to the bar

Post 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?
User avatar
no_memories
Forum Contributor
Posts: 145
Joined: Sun Feb 01, 2004 7:12 pm
Location: New York City

Post 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.
Unipus
Forum Contributor
Posts: 409
Joined: Tue Aug 26, 2003 2:06 pm
Location: Los Angeles, CA

Post by Unipus »

relative positioning will take it out of the document flow, though.
User avatar
no_memories
Forum Contributor
Posts: 145
Joined: Sun Feb 01, 2004 7:12 pm
Location: New York City

Post 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 &#123;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: auto;
margin: 0px;
padding: 0px;
&#125;

#example &#123;
position: relative;
width: auto;
height: auto;
margin: 0px 175px 20px 205px;
padding: 0px;
background: none;
border: 1px #333 solid;
z-index: 1;
&#125;

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.
User avatar
no_memories
Forum Contributor
Posts: 145
Joined: Sun Feb 01, 2004 7:12 pm
Location: New York City

Post 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 &#123;
position: absolute;
top: 200px;
left: 0px;
width: 100%;
height: auto;
margin: 0px;
padding-top: 20px;
padding-bottom: 20px;
background: #ccc;
&#125;

#stretcher &#123;
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;
&#125; 

#list1 &#123;
position: absolute;
top: 20px;
left: 50px;
width: 145px;
height: auto;
margin: 0px;
padding: 0px;
z-index: 1;
&#125;

#list1 h4 &#123;
margin: 0px 0px 5px 0px;
padding: 3px 0px 2px 0px;
&#125;

#list1 dl &#123;
margin: 0px 0px 15px 0px;
padding: 0px;
&#125;

#list1 dl dt &#123;
margin: 0px 0px 10px 0px;
padding: 2px 0px 0px 0px;
&#125;

</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!! :)
malcolmboston
DevNet Resident
Posts: 1826
Joined: Tue Nov 18, 2003 1:09 pm
Location: Middlesbrough, UK

Post 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
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

fix pm'd.
Post Reply