View Full Version : Looking for a layout not listed
scrupul0us
04-15-2008, 11:40 PM
I need a layout such that:
1) the header is 38px high, 100% across
2) left column 150px wide and fills the rest of the vertical space
3) area right of column takes up the rest of the page and scrolls if content is too big (only this area should scroll, not the entire page)
if you can help id appreciate it... thanks
Alright, I made a picture of what you wanted and just wanted to clarify that this is what you wanted, because, it doesn't look so hot.
http://localhostr.com/files/a01fd9/layout.png
scrupul0us
04-15-2008, 11:54 PM
yea thats right... cept all the lines would meet up nicer :)
doesnt look so hot?
Alright, this layout works in every browser except SeaMonkey 1.1.8, Windows XP but I dunno why
<html>
<head>
<title>Layout</title>
<style type="text/css">
#header {
width: 100%;
height: 38px;
float: left;
background-color: red;
border: 1px solid black;
margin: 5px;
}
#left {
width: 15%;
height: 50%;
float: left;
background-color: red;
border: 1px solid black;
margin: 5px;
}
#content {
width: 82.4%;
height: 50%;
float: right;
background-color: red;
border: 1px solid black;
margin: 5px;
}
</style>
</head>
<body>
<div id="header"></div>
<div id="left"></div>
<div id="content"></div>
</body>
</html>
scrupul0us
04-16-2008, 01:05 AM
well in theory its just about right
the two columns below the header dont fill the rest of the browser window... there also doesnt seem to be functionality for the right column to handle oversized content... i tried adding overflow:auto; and it didnt behave as expected
thanks for the code so far :)
This works perfectly for me:
<html>
<head>
<title>Layout</title>
<style type="text/css">
#header {
width: 995px;
height: 38px;
float: left;
background-color: red;
border: 1px solid black;
margin: 5px;
font-size: 40px;
color: white;
font-family: arial;
text-align: center;
}
#left {
width: 185px;
height: 50%;
float: left;
background-color: red;
border: 1px solid black;
margin: 5px;
text-align: center;
}
#left a {
color: white;
font-size: 26px;
text-decoration: none;
font-family: arial;
}
#left a:hover {
color: lightblue;
}
#content {
width: 795px;
height: 50%;
float: right;
background-color: red;
border: 1px solid black;
margin: 5px;
color: white;
text-indent: 20px;
padding: 2px;
font-family: arial;
overflow: auto;
}
</style>
</head>
<body>
<div id="header">Header</div>
<div id="left"><a href="#">Home</a></div>
<div id="content">Nullam facilisis metus ac pede. Aliquam metus arcu, condimentum a, facilisis venenatis, volutpat eu, odio. Nam iaculis, massa quis sodales rhoncus, elit lacus sodales justo, non aliquam turpis mauris a tellus. Fusce ut pede sed magna molestie iaculis. Fusce arcu purus, tincidunt sit amet, hendrerit at, porta eu, nibh. Duis ut nisl. Curabitur vulputate imperdiet diam. Aliquam varius viverra dui. Nunc scelerisque nulla et dolor. Sed eget mi. Aenean quis justo nec tellus posuere condimentum. Sed magna orci, dapibus at, aliquet vel, posuere a, dolor.
Donec mi. Quisque gravida aliquam pede. Nullam pretium ante sit amet erat. Donec commodo porttitor velit. Donec dapibus. Mauris in ligula id metus pretium laoreet. Etiam justo nulla, dignissim sed, placerat at, gravida ac, eros.Nullam facilisis metus ac pede. Aliquam metus arcu, condimentum a, facilisis venenatis, volutpat eu, odio. Nam iaculis, massa quis sodales rhoncus, elit lacus sodales justo, non aliquam turpis mauris a tellus. Fusce ut pede sed magna molestie iaculis. Fusce arcu purus, tincidunt sit amet, hendrerit at, porta eu, nibh. Duis ut nisl. Curabitur vulputate imperdiet diam. Aliquam varius viverra dui. Nunc scelerisque nulla et dolor. Sed eget mi. Aenean quis justo nec tellus posuere condimentum. Sed magna orci, dapibus at, aliquet vel, posuere a, dolor. Donec mi. Quisque gravida aliquam pede. Nullam pretium ante sit amet erat. Donec commodo porttitor velit. Donec dapibus. Mauris in ligula id metus pretium laoreet. Etiam justo nulla, dignissim sed, placerat at, gravida ac, eros.Nullam facilisis metus ac pede. Aliquam metus arcu, condimentum a, facilisis venenatis, volutpat eu, odio. Nam iaculis, massa quis sodales rhoncus, elit lacus sodales justo, non aliquam turpis mauris a tellus. Fusce ut pede sed magna molestie iaculis. Fusce arcu purus, tincidunt sit amet, hendrerit at, porta eu, nibh. Duis ut nisl. Curabitur vulputate imperdiet diam. Aliquam varius viverra dui. Nunc scelerisque nulla et dolor. Sed eget mi. Aenean quis justo nec tellus posuere condimentum. Sed magna orci, dapibus at, aliquet vel, posuere a, dolor. Donec mi. Quisque gravida aliquam pede. Nullam pretium ante sit amet erat. Donec commodo porttitor velit. Donec dapibus. Mauris in ligula id metus pretium laoreet. Etiam justo nulla, dignissim sed, placerat at, gravida ac, eros.Nullam facilisis metus ac pede. Aliquam metus arcu, condimentum a, facilisis venenatis, volutpat eu, odio. Nam iaculis, massa quis sodales rhoncus, elit lacus sodales justo, non aliquam turpis mauris a tellus. Fusce ut pede sed magna molestie iaculis. Fusce arcu purus, tincidunt sit amet, hendrerit at, porta eu, nibh. Duis ut nisl. Curabitur vulputate imperdiet diam. Aliquam varius viverra dui. Nunc scelerisque nulla et dolor. Sed eget mi. Aenean quis justo nec tellus posuere condimentum. Sed magna orci, dapibus at, aliquet vel, posuere a, dolor. Donec mi. Quisque gravida aliquam pede. Nullam pretium ante sit amet erat. Donec commodo porttitor velit. Donec dapibus. Mauris in ligula id metus pretium laoreet. Etiam justo nulla, dignissim sed, placerat at, gravida ac, eros.Nullam facilisis metus ac pede. Aliquam metus arcu, condimentum a, facilisis venenatis, volutpat eu, odio. Nam iaculis, massa quis sodales rhoncus, elit lacus sodales justo, non aliquam turpis mauris a tellus. Fusce ut pede sed magna molestie iaculis. Fusce arcu purus, tincidunt sit amet, hendrerit at, porta eu, nibh. Duis ut nisl. Curabitur vulputate imperdiet diam. Aliquam varius viverra dui. Nunc scelerisque nulla et dolor. Sed eget mi. Aenean quis justo nec tellus posuere condimentum. Sed magna orci, dapibus at, aliquet vel, posuere a, dolor. Donec mi. Quisque gravida aliquam pede. Nullam pretium ante sit amet erat. Donec commodo porttitor velit. Donec dapibus. Mauris in ligula id metus pretium laoreet. Etiam justo nulla, dignissim sed, placerat at, gravida ac, eros.</div>
</body>
</html>
Since this is an update to my previous, I havn't checked to see if it works in SeaMonkey 1.1.8, Windows XP. But I'll check later.
scrupul0us
04-16-2008, 11:20 AM
well i see the content and left is still set to 50% height... it doesnt take up the rest of the page.. setting to 100% causes the entire page to overflow
Alright, try this:
<html>
<head>
<title>Layout</title>
<style type="text/css">
#header {
width: 98.8%;
height: 38px;
background-color: red;
border: 1px solid black;
margin: 5px;
font-size: 40px;
color: white;
font-family: arial;
text-align: center;
}
* html #header {
width: 99%;
}
#left {
width: 15%;
height: 50%;
float: left;
background-color: red;
border: 1px solid black;
margin: 5px;
text-align: center;
}
#left a {
color: white;
font-size: 26px;
text-decoration: none;
font-family: arial;
}
#left a:hover {
color: lightblue;
}
#content {
width: 795px;
height: 88%;
float: right;
background-color: red;
border: 1px solid black;
margin: 5px;
color: white;
text-indent: 20px;
padding: 2px;
font-family: arial;
overflow: auto;
padding-left: 5px;
}
* html #content {
margin: 5px 15px;
}
</style>
</head>
<body>
<div id="header">Header</div>
<div id="left"><a href="#">Home</a></div>
<div id="content">Nullam facilisis metus ac pede. Aliquam metus arcu, condimentum a, facilisis venenatis, volutpat eu, odio. Nam iaculis, massa quis sodales rhoncus, elit lacus sodales justo, non aliquam turpis mauris a tellus. Fusce ut pede sed magna molestie iaculis. Fusce arcu purus, tincidunt sit amet, hendrerit at, porta eu, nibh. Duis ut nisl. Curabitur vulputate imperdiet diam. Aliquam varius viverra dui. Nunc scelerisque nulla et dolor. Sed eget mi. Aenean quis justo nec tellus posuere condimentum. Sed magna orci, dapibus at, aliquet vel, posuere a, dolor.
Donec mi. Quisque gravida aliquam pede. Nullam pretium ante sit amet erat. Donec commodo porttitor velit. Donec dapibus. Mauris in ligula id metus pretium laoreet. Etiam justo nulla, dignissim sed, placerat at, gravida ac, eros.Nullam facilisis metus ac pede. Aliquam metus arcu, condimentum a, facilisis venenatis, volutpat eu, odio. Nam iaculis, massa quis sodales rhoncus, elit lacus sodales justo, non aliquam turpis mauris a tellus. Fusce ut pede sed magna molestie iaculis. Fusce arcu purus, tincidunt sit amet, hendrerit at, porta eu, nibh. Duis ut nisl. Curabitur vulputate imperdiet diam. Aliquam varius viverra dui. Nunc scelerisque nulla et dolor. Sed eget mi. Aenean quis justo nec tellus posuere condimentum. Sed magna orci, dapibus at, aliquet vel, posuere a, dolor. Donec mi. Quisque gravida aliquam pede. Nullam pretium ante sit amet erat. Donec commodo porttitor velit. Donec dapibus. Mauris in ligula id metus pretium laoreet. Etiam justo nulla, dignissim sed, placerat at, gravida ac, eros.Nullam facilisis metus ac pede. Aliquam metus arcu, condimentum a, facilisis venenatis, volutpat eu, odio. Nam iaculis, massa quis sodales rhoncus, elit lacus sodales justo, non aliquam turpis mauris a tellus. Fusce ut pede sed magna molestie iaculis. Fusce arcu purus, tincidunt sit amet, hendrerit at, porta eu, nibh. Duis ut nisl. Curabitur vulputate imperdiet diam. Aliquam varius viverra dui. Nunc scelerisque nulla et dolor. Sed eget mi. Aenean quis justo nec tellus posuere condimentum. Sed magna orci, dapibus at, aliquet vel, posuere a, dolor. Donec mi. Quisque gravida aliquam pede. Nullam pretium ante sit amet erat. Donec commodo porttitor velit. Donec dapibus. Mauris in ligula id metus pretium laoreet. Etiam justo nulla, dignissim sed, placerat at, gravida ac, eros.Nullam facilisis metus ac pede. Aliquam metus arcu, condimentum a, facilisis venenatis, volutpat eu, odio. Nam iaculis, massa quis sodales rhoncus, elit lacus sodales justo, non aliquam turpis mauris a tellus. Fusce ut pede sed magna molestie iaculis. Fusce arcu purus, tincidunt sit amet, hendrerit at, porta eu, nibh. Duis ut nisl. Curabitur vulputate imperdiet diam. Aliquam varius viverra dui. Nunc scelerisque nulla et dolor. Sed eget mi. Aenean quis justo nec tellus posuere condimentum. Sed magna orci, dapibus at, aliquet vel, posuere a, dolor. Donec mi. Quisque gravida aliquam pede. Nullam pretium ante sit amet erat. Donec commodo porttitor velit. Donec dapibus. Mauris in ligula id metus pretium laoreet. Etiam justo nulla, dignissim sed, placerat at, gravida ac, eros.Nullam facilisis metus ac pede. Aliquam metus arcu, condimentum a, facilisis venenatis, volutpat eu, odio. Nam iaculis, massa quis sodales rhoncus, elit lacus sodales justo, non aliquam turpis mauris a tellus. Fusce ut pede sed magna molestie iaculis. Fusce arcu purus, tincidunt sit amet, hendrerit at, porta eu, nibh. Duis ut nisl. Curabitur vulputate imperdiet diam. Aliquam varius viverra dui. Nunc scelerisque nulla et dolor. Sed eget mi. Aenean quis justo nec tellus posuere condimentum. Sed magna orci, dapibus at, aliquet vel, posuere a, dolor. Donec mi. Quisque gravida aliquam pede. Nullam pretium ante sit amet erat. Donec commodo porttitor velit. Donec dapibus. Mauris in ligula id metus pretium laoreet. Etiam justo nulla, dignissim sed, placerat at, gravida ac, eros.</div>
</body>
</html>
Any rest, I'm sure you can fix. But post if you can't :D
And this works in all browsers but:
MSIE 8.0
Windows XP
and
Safari 1.3.2
Mac OS X 10.3
So I hope this helps, I don't know how I would make it work in all browsers.
molendijk
04-17-2008, 09:19 AM
Maybe this is what you are looking for:
<html>
<head>
<style type="text/css">
body
{
margin: 0;
padding: 38px 0 0 0;
background-color: white;
font: normal 85% Georgia, Arial;
overflow-y: hidden;
}
div.content
{
margin: 0 0 0 160px;
padding: 0 1em 0 0;
height: 100%;
overflow: auto;
}
div.header
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 38px;
border-bottom:1px solid red;z-index:1;
}
div.side
{
position: absolute;
top: 38px;
left: 0;
width: 150px;
height: 150%;
border-right:1px solid red;
}
div.header, div.side
{
text-align: center;
background-color: #ccc;
}
</style>
</head>
<body>
<div class="header"><p><b>Header</b></p></div>
<div class="side"><p><b>Side</b></p></div>
<div class="content"><br>
'À' ou 'dans'?<br>
Cliquez ici pour l'organigramme correspondant à ces pages
I. Les phrases non-directionnelles
(qui ne contiennent aucune idée de direction)
Localisation exacte ou 'approximative':
À a une valeur localisatrice 'vague', alors que dans est beaucoup plus exact. Si la phrase n'est pas censée localiser exactement l'entité, on se sert donc de 'à'. On dit:
Jean est à Paris
parce que, en utilisant cette phrase, on n'affirme pas positivement que Pierre est nécessairement dans la ville même au moment où on énonce la phrase.
La situation est différente dans:
Jean se promène dans Paris
parce que si on fait une promenade dans une ville, on est nécessairement dans la ville même.
'Lieux' tridimensionnels:
Si l'entité à localiser, ou une de ses parties essentielles, est entièrement entourée du site (= l'endroit où 'se trouve' l'entité), on se sert de dans. Si (toutes les parties essentielles de) l'entité est/sont située(s) hors du site, on se sert de à.
Exemples:
une balle dans la tête;
une pipe à la bouche (la partie où on met le tabac n'est pas 'entourée' de la bouche);
la clef est dans la serrure (la partie (essentielle) de la clef qui pénètre dans la serrure est 'entourée' de la serrure)
Note: mais on ne se sert pas de dans si la phrase renvoie à une activité liée au contenu sémantique du site, voir la règle suivante.
Activités spécifiques et sites tridimensionnels:
Dans:
Pierre est aux toilettes
on se sert de à parce que la phrase est censée renvoyer à ce que fait Pierre plutôt que de localiser Pierre. Dans:
Pierre a trouvé la souris; elle était dans les toilettes
au contraire, la phrase ne renvoie pas à une activité spécifique exécutée par la souris. La phrase localise simplement la souris dans les toilettes.
Cf. aussi:
le curé est à l'égliseà l'église (si on veut dire: 'il prêche', ou quelque chose de semblable) vs:
' le criminel est dans l'église.
Sites plats:
Si le site est LINGUISTIQUEMENT conçu comme ayant des bornes(= site plat 'circonscrit'), on se sert de dans. La réponse à la question de savoir si c'est le cas nous est fournie par le test suivant: si le nom en question peut se construire avec 'entrer dans', 'mettre dans', 'sortir de', 'tirer de', le site est conçu comme ayant des bornes (sinon cette possibilité linguistique n'existerait pas).
Si le site n'est pas circonscrit (auquel cas le test échoue), on se sert de à.
Nous avons donc:
dans le désert (on peut entrer dans le désert)
mais:
à la campagne ('entrer dans la campagne' est bizarre).
Sites abstraits:
La règle donnée pour les sites plats s'applique également aux 'sites abstraits'. On est
dans la misère
parce qu'on peut dire: 'tirer quelqu'un de la misère', 'mettre quelqu'un dans la misère, etc.
L'entité à localiser est un élément constitutif du site:
Si l'entité à localiser est un élément constitutif du site, on sert de 'dans'. Exemples:
Pierre est dans l'enseignement' (Pierre fait parie de tout ce qui constitue l'enseignement);
Je cherchais une sagesse dans ses propos' (le mot sage qu'on cherche fait partie des propos)
II.Les phrases directionnelles
Comme on l'a vu, le sens de
à est assez vague. On ne s'etonne donc pas que cette préposition soit incapable d'exprimer la direction à elle seule. Il faut pour cela qu'elle se combine avec un verbe directionnel: aller à, se rendre à, accompagner quelqu'un à, etc.
Si le verbe n'est pas directionnel (danser, par ex.), la combinaison avec à produit une expression non-directionnelle: danser à la sortie ne signifie pas 'aller à la sortie en dansant', mais 'danser près de la sortie'.
Les verbes directionnels se reconnaissent par le fait que dans 'verbe + quelque part', l'adverbe (quelque part) signifie 'ergens heen', non pas simplement 'ergens'. Se rendre est donc directionnel, parce que se rendre quelque part signifie 'ergens HEEN gaan'. Danser quelque part, au contraire, signifie 'ergens dansen'. De même, se promener quelque part signifie 'ergens wandelen' (ce qui implique donc que se promener est non-directionnel).
Comme le nombre des verbes directionnels est très restreint en français, on peut se demander comment on exprime la direction en français dans des phrases correspondant à 'hij wandelt naar', 'hij danst naar (de uitgang)'. Plusieurs solutions se présentent:
- on utilise 'verbe directionnel + gérondif ou autre expression adverbiale':
il va à Amsterdam à pied; il va à la sortie en dansant/en titubant etc. ('danst naar', wankelt naar')
- si le verbe est ponctuel (entrer, disparaître, etc.), on se sert de dans 'par anticipation':
il disparut dans sa chambre ('verdween naar')
- dans certains cas, on peut utiliser jusqu'à ou vers en combinaison avec un nombre assez
restreint de verbes (verbes semi-directionnels): nager, marcher, galoper, patiner, tituber, ramer:
il nageait/marchait etc. vers l'autre côté
NOTE IMPORTANTE:
Le choix de dans 'par anticipation' s'impose également si le site fait partie d'un complexe. On dit
aller dans la cuisine/dans sa chambre
etc. parce que la cuisine et la chambre font partie du complexe qui est la maison. Si ce complexe contient aussi un garage, on dit donc:
aller dans le garage.
(Mais s'il s'agit d'un garage qui ne fait pas partie du complexe, on dit
aller au garage
(pour faire réparer sa voiture, etc.).
Exercices
Choisissez la préposition qu'il faut. Motivez votre choix:
1. Une clef ... une serrure, une pipe ... la bouche, une fleur ... un vase, toute une quantité de balles ... ventre.
2. ... le désert, ... la banlieue, ...pôle Nord, ... la campagne, ... la plage, s'enfermer ... la campagne.
3. Rôder ... marché, courir ... champs.
4. Travailler ... l'enseignement, elle ne se plaît pas ... sa nouvelle place.
5. Être ... coma, être ... merde
6. L'idée était ... l'air, il y a de l'orage ... l'air.
7. ... un fauteuil, ... un canapé, ... son lit, ... lit de mort.
8. Se contredire plusieurs fois ... une seule et même page.
9. ... une île, ... un pays.
10. De la haine ... yeux.
11. Lire ... Balzac. Cela se trouve ... Balzac.
12. Etre ... Paris, être complètement perdu ... Paris, ... tout Paris, il n'y a aucun etc.
13. S'envelopper ... un châle, être ... bras de quelqu'un.
14. Être engagé ... une attaque générale, elle cherchait une sagesse ... mes propos confus.<br><br>
</div>
</body>
</html>
Arie Molendijk.
rangana
04-17-2008, 09:23 AM
Neither of the examples has had DTD (http://alistapart.com/articles/doctype), without those, you are putting IE into quirksmode...:)
molendijk
04-17-2008, 09:42 AM
Neither of the examples has had DTD (http://alistapart.com/articles/doctype), without those, you are putting IE into quirksmode...:)
Here is the page with doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body
{
margin: 0;
padding: 38px 0 0 0;
background-color: white;
font: normal 85% Georgia, Arial;
overflow-y: hidden;
}
div.content
{
margin: 0 0 0 160px;
padding: 0 1em 0 0;
height: 100%;
overflow: auto;
}
div.header
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 38px;
border-bottom:1px solid red;z-index:1;
}
div.side
{
position: absolute;
top: 38px;
left: 0;
width: 150px;
height: 150%;
border-right:1px solid red;
}
div.header, div.side
{
text-align: center;
background-color: #ccc;
}
</style>
</head>
<body>
<div class="header">
<p><b>Header</b></p>
</div>
<div class="side">
<p><b>Side</b></p>
</div>
<div class="content">'À' ou 'dans'?<br>
Cliquez ici pour l'organigramme correspondant à ces pages I. Les phrases non-directionnelles (qui ne
contiennent aucune idée de direction) Localisation exacte ou 'approximative': À a une valeur
localisatrice 'vague', alors que dans est beaucoup plus exact. Si la phrase n'est pas censée localiser
exactement l'entité, on se sert donc de 'à'. On dit: Jean est à Paris parce que, en utilisant
cette phrase, on n'affirme pas positivement que Pierre est nécessairement dans la ville même au moment où
on énonce la phrase. La situation est différente dans: Jean se promène dans Paris parce que
si on fait une promenade dans une ville, on est nécessairement dans la ville même. 'Lieux'
tridimensionnels: Si l'entité à localiser, ou une de ses parties essentielles, est entièrement entourée du
site (= l'endroit où 'se trouve' l'entité), on se sert de dans. Si (toutes les parties essentielles de)
l'entité est/sont située(s) hors du site, on se sert de à. Exemples: une balle dans la tête;
une pipe à la bouche (la partie où on met le tabac n'est pas 'entourée' de la bouche); la clef est dans la
serrure (la partie (essentielle) de la clef qui pénètre dans la serrure est 'entourée' de la
serrure) Note: mais on ne se sert pas de dans si la phrase renvoie à une activité liée au contenu
sémantique du site, voir la règle suivante. Activités spécifiques et sites tridimensionnels: Dans:
Pierre est aux toilettes on se sert de à parce que la phrase est censée renvoyer à ce que fait Pierre
plutôt que de localiser Pierre. Dans: Pierre a trouvé la souris; elle était dans les toilettes au
contraire, la phrase ne renvoie pas à une activité spécifique exécutée par la souris. La phrase localise
simplement la souris dans les toilettes. Cf. aussi: le curé est à l'égliseà l'église (si on
veut dire: 'il prêche', ou quelque chose de semblable) vs: ' le criminel est dans l'église. Sites plats:
Si le site est LINGUISTIQUEMENT conçu comme ayant des bornes(= site plat 'circonscrit'), on se
sert de dans. La réponse à la question de savoir si c'est le cas nous est fournie par le test suivant: si
le nom en question peut se construire avec 'entrer dans', 'mettre dans', 'sortir de', 'tirer
de', le site est conçu comme ayant des bornes (sinon cette possibilité linguistique n'existerait pas). Si
le site n'est pas circonscrit (auquel cas le test échoue), on se sert de à. Nous avons donc:
dans le désert (on peut entrer dans le désert) mais: à la campagne ('entrer dans la campagne' est
bizarre). Sites abstraits: La règle donnée pour les sites plats s'applique également aux 'sites
abstraits'. On est dans la misère parce qu'on peut dire: 'tirer quelqu'un de la misère', 'mettre quelqu'un
dans la misère, etc. L'entité à localiser est un élément constitutif du site: Si l'entité à
localiser est un élément constitutif du site, on sert de 'dans'. Exemples: Pierre est dans l'enseignement'
(Pierre fait parie de tout ce qui constitue l'enseignement); Je cherchais une sagesse dans
ses propos' (le mot sage qu'on cherche fait partie des propos) II.Les phrases directionnelles Comme on l'a
vu, le sens de à est assez vague. On ne s'etonne donc pas que cette préposition soit
incapable d'exprimer la direction à elle seule. Il faut pour cela qu'elle se combine avec un verbe
directionnel: aller à, se rendre à, accompagner quelqu'un à, etc. Si le verbe n'est pas directionnel
(danser, par ex.), la combinaison avec à produit une expression non-directionnelle: danser à la sortie ne
signifie pas 'aller à la sortie en dansant', mais 'danser près de la sortie'. Les verbes
directionnels se reconnaissent par le fait que dans 'verbe + quelque part', l'adverbe (quelque part)
signifie 'ergens heen', non pas simplement 'ergens'. Se rendre est donc directionnel, parce que se
rendre quelque part signifie 'ergens HEEN gaan'. Danser quelque part, au contraire, signifie 'ergens
dansen'. De même, se promener quelque part signifie 'ergens wandelen' (ce qui implique donc que se
promener est non-directionnel). Comme le nombre des verbes directionnels est très restreint en français,
on peut se demander comment on exprime la direction en français dans des phrases correspondant
à 'hij wandelt naar', 'hij danst naar (de uitgang)'. Plusieurs solutions se présentent: - on utilise
'verbe directionnel + gérondif ou autre expression adverbiale': il va à Amsterdam à pied; il va à
la sortie en dansant/en titubant etc. ('danst naar', wankelt naar') - si le verbe est ponctuel (entrer,
disparaître, etc.), on se sert de dans 'par anticipation': il disparut dans sa chambre
('verdween naar') - dans certains cas, on peut utiliser jusqu'à ou vers en combinaison avec un nombre
assez restreint de verbes (verbes semi-directionnels): nager, marcher, galoper, patiner, tituber,
ramer: il nageait/marchait etc. vers l'autre côté NOTE IMPORTANTE: Le choix de dans 'par anticipation'
s'impose également si le site fait partie d'un complexe. On dit aller dans la cuisine/dans sa
chambre etc. parce que la cuisine et la chambre font partie du complexe qui est la maison. Si ce complexe
contient aussi un garage, on dit donc: aller dans le garage. (Mais s'il s'agit d'un garage
qui ne fait pas partie du complexe, on dit aller au garage (pour faire réparer sa voiture, etc.).
Exercices Choisissez la préposition qu'il faut. Motivez votre choix: 1. Une clef ... une serrure, une
pipe ... la bouche, une fleur ... un vase, toute une quantité de balles ... ventre. 2. ... le désert, ...
la banlieue, ...pôle Nord, ... la campagne, ... la plage, s'enfermer ... la campagne. 3.
Rôder ... marché, courir ... champs. 4. Travailler ... l'enseignement, elle ne se plaît pas ... sa
nouvelle place. 5. Être ... coma, être ... merde 6. L'idée était ... l'air, il y a de l'orage ...
l'air. 7. ... un fauteuil, ... un canapé, ... son lit, ... lit de mort. 8. Se contredire plusieurs fois
... une seule et même page. 9. ... une île, ... un pays. 10. De la haine ... yeux. 11. Lire ...
Balzac. Cela se trouve ... Balzac. 12. Etre ... Paris, être complètement perdu ... Paris, ... tout Paris,
il n'y a aucun etc. 13. S'envelopper ... un châle, être ... bras de quelqu'un. 14. Être
engagé ... une attaque générale, elle cherchait une sagesse ... mes propos confus.<br>
<br></div>
</body>
</html>
Arie M.
Maybe this is what you are looking for:
<html>
<head>
<style type="text/css">
body
{
margin: 0;
padding: 38px 0 0 0;
background-color: white;
font: normal 85% Georgia, Arial;
overflow-y: hidden;
}
div.content
{
margin: 0 0 0 160px;
padding: 0 1em 0 0;
height: 100%;
overflow: auto;
}
div.header
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 38px;
border-bottom:1px solid red;z-index:1;
}
div.side
{
position: absolute;
top: 38px;
left: 0;
width: 150px;
height: 150%;
border-right:1px solid red;
}
div.header, div.side
{
text-align: center;
background-color: #ccc;
}
</style>
</head>
<body>
<div class="header"><p><b>Header</b></p></div>
<div class="side"><p><b>Side</b></p></div>
<div class="content"><br>
'À' ou 'dans'?<br>
Cliquez ici pour l'organigramme correspondant à ces pages
I. Les phrases non-directionnelles
(qui ne contiennent aucune idée de direction)
Localisation exacte ou 'approximative':
À a une valeur localisatrice 'vague', alors que dans est beaucoup plus exact. Si la phrase n'est pas censée localiser exactement l'entité, on se sert donc de 'à'. On dit:
Jean est à Paris
parce que, en utilisant cette phrase, on n'affirme pas positivement que Pierre est nécessairement dans la ville même au moment où on énonce la phrase.
La situation est différente dans:
Jean se promène dans Paris
parce que si on fait une promenade dans une ville, on est nécessairement dans la ville même.
'Lieux' tridimensionnels:
Si l'entité à localiser, ou une de ses parties essentielles, est entièrement entourée du site (= l'endroit où 'se trouve' l'entité), on se sert de dans. Si (toutes les parties essentielles de) l'entité est/sont située(s) hors du site, on se sert de à.
Exemples:
une balle dans la tête;
une pipe à la bouche (la partie où on met le tabac n'est pas 'entourée' de la bouche);
la clef est dans la serrure (la partie (essentielle) de la clef qui pénètre dans la serrure est 'entourée' de la serrure)
Note: mais on ne se sert pas de dans si la phrase renvoie à une activité liée au contenu sémantique du site, voir la règle suivante.
Activités spécifiques et sites tridimensionnels:
Dans:
Pierre est aux toilettes
on se sert de à parce que la phrase est censée renvoyer à ce que fait Pierre plutôt que de localiser Pierre. Dans:
Pierre a trouvé la souris; elle était dans les toilettes
au contraire, la phrase ne renvoie pas à une activité spécifique exécutée par la souris. La phrase localise simplement la souris dans les toilettes.
Cf. aussi:
le curé est à l'égliseà l'église (si on veut dire: 'il prêche', ou quelque chose de semblable) vs:
' le criminel est dans l'église.
Sites plats:
Si le site est LINGUISTIQUEMENT conçu comme ayant des bornes(= site plat 'circonscrit'), on se sert de dans. La réponse à la question de savoir si c'est le cas nous est fournie par le test suivant: si le nom en question peut se construire avec 'entrer dans', 'mettre dans', 'sortir de', 'tirer de', le site est conçu comme ayant des bornes (sinon cette possibilité linguistique n'existerait pas).
Si le site n'est pas circonscrit (auquel cas le test échoue), on se sert de à.
Nous avons donc:
dans le désert (on peut entrer dans le désert)
mais:
à la campagne ('entrer dans la campagne' est bizarre).
Sites abstraits:
La règle donnée pour les sites plats s'applique également aux 'sites abstraits'. On est
dans la misère
parce qu'on peut dire: 'tirer quelqu'un de la misère', 'mettre quelqu'un dans la misère, etc.
L'entité à localiser est un élément constitutif du site:
Si l'entité à localiser est un élément constitutif du site, on sert de 'dans'. Exemples:
Pierre est dans l'enseignement' (Pierre fait parie de tout ce qui constitue l'enseignement);
Je cherchais une sagesse dans ses propos' (le mot sage qu'on cherche fait partie des propos)
II.Les phrases directionnelles
Comme on l'a vu, le sens de
à est assez vague. On ne s'etonne donc pas que cette préposition soit incapable d'exprimer la direction à elle seule. Il faut pour cela qu'elle se combine avec un verbe directionnel: aller à, se rendre à, accompagner quelqu'un à, etc.
Si le verbe n'est pas directionnel (danser, par ex.), la combinaison avec à produit une expression non-directionnelle: danser à la sortie ne signifie pas 'aller à la sortie en dansant', mais 'danser près de la sortie'.
Les verbes directionnels se reconnaissent par le fait que dans 'verbe + quelque part', l'adverbe (quelque part) signifie 'ergens heen', non pas simplement 'ergens'. Se rendre est donc directionnel, parce que se rendre quelque part signifie 'ergens HEEN gaan'. Danser quelque part, au contraire, signifie 'ergens dansen'. De même, se promener quelque part signifie 'ergens wandelen' (ce qui implique donc que se promener est non-directionnel).
Comme le nombre des verbes directionnels est très restreint en français, on peut se demander comment on exprime la direction en français dans des phrases correspondant à 'hij wandelt naar', 'hij danst naar (de uitgang)'. Plusieurs solutions se présentent:
- on utilise 'verbe directionnel + gérondif ou autre expression adverbiale':
il va à Amsterdam à pied; il va à la sortie en dansant/en titubant etc. ('danst naar', wankelt naar')
- si le verbe est ponctuel (entrer, disparaître, etc.), on se sert de dans 'par anticipation':
il disparut dans sa chambre ('verdween naar')
- dans certains cas, on peut utiliser jusqu'à ou vers en combinaison avec un nombre assez
restreint de verbes (verbes semi-directionnels): nager, marcher, galoper, patiner, tituber, ramer:
il nageait/marchait etc. vers l'autre côté
NOTE IMPORTANTE:
Le choix de dans 'par anticipation' s'impose également si le site fait partie d'un complexe. On dit
aller dans la cuisine/dans sa chambre
etc. parce que la cuisine et la chambre font partie du complexe qui est la maison. Si ce complexe contient aussi un garage, on dit donc:
aller dans le garage.
(Mais s'il s'agit d'un garage qui ne fait pas partie du complexe, on dit
aller au garage
(pour faire réparer sa voiture, etc.).
Exercices
Choisissez la préposition qu'il faut. Motivez votre choix:
1. Une clef ... une serrure, une pipe ... la bouche, une fleur ... un vase, toute une quantité de balles ... ventre.
2. ... le désert, ... la banlieue, ...pôle Nord, ... la campagne, ... la plage, s'enfermer ... la campagne.
3. Rôder ... marché, courir ... champs.
4. Travailler ... l'enseignement, elle ne se plaît pas ... sa nouvelle place.
5. Être ... coma, être ... merde
6. L'idée était ... l'air, il y a de l'orage ... l'air.
7. ... un fauteuil, ... un canapé, ... son lit, ... lit de mort.
8. Se contredire plusieurs fois ... une seule et même page.
9. ... une île, ... un pays.
10. De la haine ... yeux.
11. Lire ... Balzac. Cela se trouve ... Balzac.
12. Etre ... Paris, être complètement perdu ... Paris, ... tout Paris, il n'y a aucun etc.
13. S'envelopper ... un châle, être ... bras de quelqu'un.
14. Être engagé ... une attaque générale, elle cherchait une sagesse ... mes propos confus.<br><br>
</div>
</body>
</html>
Arie Molendijk.
That uses absolute positioning? Always try to keep your distance from that.
molendijk
04-17-2008, 12:11 PM
That uses absolute positioning? Always try to keep your distance from that.
Please see my last post, with the doctype.
I think that the way I set up the css in that page won't hurt anybody/anything, unless you can convince me of the contrary (in this particular case).
---
Arie M.
I was just giving you a tip. Try to stay away from absolute positioning.
molendijk
04-17-2008, 12:52 PM
I was just giving you a tip. Try to stay away from absolute positioning.
Just tell me why.:confused:
---
Arie.
In different computers you have different screen sizes, for example. My screen resolution is: 1152*864, now if I have an absolute positioning, then say I want it to appear 3 pixels away from the edge, since my screen is bigger, it will place 3pixels away, but now lets say that pixels are different on my other computer, It'll appear differently. And IE also will change, even on the same comp.
molendijk
04-17-2008, 01:27 PM
In different computers you have different screen sizes, for example. My screen resolution is: 1152*864, now if I have an absolute positioning, then say I want it to appear 3 pixels away from the edge, since my screen is bigger, it will place 3pixels away, but now lets say that pixels are different on my other computer, It'll appear differently. And IE also will change, even on the same comp.
I'm not so sure about what you say about pixels. Pixels have absolute width/height, I guess, so positioning something with the help of pixels is independent from using 'position:absolute' or 'position:relative', except, of course, for the fact that 'absolute' is not relative to something else in the same way 'relative' is.
---
Arie M.
scrupul0us
04-17-2008, 10:49 PM
no go... it seems as if i havent conveyed what i want
no margins, padding on the page or the elements.. eveything should appear seemless
i need a fixed header... 38px height and 100% wide
i need a left hand column... 150px wide and of fluid height that always runs to the bottom of the browser (not a fixed height)... if there is overflow it should scroll
i need a content aread to the right of the left column... it should be 100% in its width such that it takes up the rest of the vertical and horizontal space (not a fixed height or width)... if there is overflow it should scroll
the actual page should never scroll... only the elements inside should allow that
scrupul0us
04-17-2008, 10:53 PM
Here is the page with doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body
{
margin: 0;
padding: 38px 0 0 0;
background-color: white;
font: normal 85% Georgia, Arial;
overflow-y: hidden;
}
div.content
{
margin: 0 0 0 160px;
padding: 0 1em 0 0;
height: 100%;
overflow: auto;
}
div.header
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 38px;
border-bottom:1px solid red;z-index:1;
}
div.side
{
position: absolute;
top: 38px;
left: 0;
width: 150px;
height: 150%;
border-right:1px solid red;
}
div.header, div.side
{
text-align: center;
background-color: #ccc;
}
</style>
</head>
<body>
<div class="header">
<p><b>Header</b></p>
</div>
<div class="side">
<p><b>Side</b></p>
</div>
<div class="content">'À' ou 'dans'?<br>
Cliquez ici pour l'organigramme correspondant à ces pages I. Les phrases non-directionnelles (qui ne
contiennent aucune idée de direction) Localisation exacte ou 'approximative': À a une valeur
localisatrice 'vague', alors que dans est beaucoup plus exact. Si la phrase n'est pas censée localiser
exactement l'entité, on se sert donc de 'à'. On dit: Jean est à Paris parce que, en utilisant
cette phrase, on n'affirme pas positivement que Pierre est nécessairement dans la ville même au moment où
on énonce la phrase. La situation est différente dans: Jean se promène dans Paris parce que
si on fait une promenade dans une ville, on est nécessairement dans la ville même. 'Lieux'
tridimensionnels: Si l'entité à localiser, ou une de ses parties essentielles, est entièrement entourée du
site (= l'endroit où 'se trouve' l'entité), on se sert de dans. Si (toutes les parties essentielles de)
l'entité est/sont située(s) hors du site, on se sert de à. Exemples: une balle dans la tête;
une pipe à la bouche (la partie où on met le tabac n'est pas 'entourée' de la bouche); la clef est dans la
serrure (la partie (essentielle) de la clef qui pénètre dans la serrure est 'entourée' de la
serrure) Note: mais on ne se sert pas de dans si la phrase renvoie à une activité liée au contenu
sémantique du site, voir la règle suivante. Activités spécifiques et sites tridimensionnels: Dans:
Pierre est aux toilettes on se sert de à parce que la phrase est censée renvoyer à ce que fait Pierre
plutôt que de localiser Pierre. Dans: Pierre a trouvé la souris; elle était dans les toilettes au
contraire, la phrase ne renvoie pas à une activité spécifique exécutée par la souris. La phrase localise
simplement la souris dans les toilettes. Cf. aussi: le curé est à l'égliseà l'église (si on
veut dire: 'il prêche', ou quelque chose de semblable) vs: ' le criminel est dans l'église. Sites plats:
Si le site est LINGUISTIQUEMENT conçu comme ayant des bornes(= site plat 'circonscrit'), on se
sert de dans. La réponse à la question de savoir si c'est le cas nous est fournie par le test suivant: si
le nom en question peut se construire avec 'entrer dans', 'mettre dans', 'sortir de', 'tirer
de', le site est conçu comme ayant des bornes (sinon cette possibilité linguistique n'existerait pas). Si
le site n'est pas circonscrit (auquel cas le test échoue), on se sert de à. Nous avons donc:
dans le désert (on peut entrer dans le désert) mais: à la campagne ('entrer dans la campagne' est
bizarre). Sites abstraits: La règle donnée pour les sites plats s'applique également aux 'sites
abstraits'. On est dans la misère parce qu'on peut dire: 'tirer quelqu'un de la misère', 'mettre quelqu'un
dans la misère, etc. L'entité à localiser est un élément constitutif du site: Si l'entité à
localiser est un élément constitutif du site, on sert de 'dans'. Exemples: Pierre est dans l'enseignement'
(Pierre fait parie de tout ce qui constitue l'enseignement); Je cherchais une sagesse dans
ses propos' (le mot sage qu'on cherche fait partie des propos) II.Les phrases directionnelles Comme on l'a
vu, le sens de à est assez vague. On ne s'etonne donc pas que cette préposition soit
incapable d'exprimer la direction à elle seule. Il faut pour cela qu'elle se combine avec un verbe
directionnel: aller à, se rendre à, accompagner quelqu'un à, etc. Si le verbe n'est pas directionnel
(danser, par ex.), la combinaison avec à produit une expression non-directionnelle: danser à la sortie ne
signifie pas 'aller à la sortie en dansant', mais 'danser près de la sortie'. Les verbes
directionnels se reconnaissent par le fait que dans 'verbe + quelque part', l'adverbe (quelque part)
signifie 'ergens heen', non pas simplement 'ergens'. Se rendre est donc directionnel, parce que se
rendre quelque part signifie 'ergens HEEN gaan'. Danser quelque part, au contraire, signifie 'ergens
dansen'. De même, se promener quelque part signifie 'ergens wandelen' (ce qui implique donc que se
promener est non-directionnel). Comme le nombre des verbes directionnels est très restreint en français,
on peut se demander comment on exprime la direction en français dans des phrases correspondant
à 'hij wandelt naar', 'hij danst naar (de uitgang)'. Plusieurs solutions se présentent: - on utilise
'verbe directionnel + gérondif ou autre expression adverbiale': il va à Amsterdam à pied; il va à
la sortie en dansant/en titubant etc. ('danst naar', wankelt naar') - si le verbe est ponctuel (entrer,
disparaître, etc.), on se sert de dans 'par anticipation': il disparut dans sa chambre
('verdween naar') - dans certains cas, on peut utiliser jusqu'à ou vers en combinaison avec un nombre
assez restreint de verbes (verbes semi-directionnels): nager, marcher, galoper, patiner, tituber,
ramer: il nageait/marchait etc. vers l'autre côté NOTE IMPORTANTE: Le choix de dans 'par anticipation'
s'impose également si le site fait partie d'un complexe. On dit aller dans la cuisine/dans sa
chambre etc. parce que la cuisine et la chambre font partie du complexe qui est la maison. Si ce complexe
contient aussi un garage, on dit donc: aller dans le garage. (Mais s'il s'agit d'un garage
qui ne fait pas partie du complexe, on dit aller au garage (pour faire réparer sa voiture, etc.).
Exercices Choisissez la préposition qu'il faut. Motivez votre choix: 1. Une clef ... une serrure, une
pipe ... la bouche, une fleur ... un vase, toute une quantité de balles ... ventre. 2. ... le désert, ...
la banlieue, ...pôle Nord, ... la campagne, ... la plage, s'enfermer ... la campagne. 3.
Rôder ... marché, courir ... champs. 4. Travailler ... l'enseignement, elle ne se plaît pas ... sa
nouvelle place. 5. Être ... coma, être ... merde 6. L'idée était ... l'air, il y a de l'orage ...
l'air. 7. ... un fauteuil, ... un canapé, ... son lit, ... lit de mort. 8. Se contredire plusieurs fois
... une seule et même page. 9. ... une île, ... un pays. 10. De la haine ... yeux. 11. Lire ...
Balzac. Cela se trouve ... Balzac. 12. Etre ... Paris, être complètement perdu ... Paris, ... tout Paris,
il n'y a aucun etc. 13. S'envelopper ... un châle, être ... bras de quelqu'un. 14. Être
engagé ... une attaque générale, elle cherchait une sagesse ... mes propos confus.<br>
<br></div>
</body>
</html>
Arie M.
THIS WORKS GREAT!!! THANKS! now to taylor it to my project... hopefully it doesnt die on me :)
Here is an interesting article I was reading today what sounds almost like you are trying to figure out http://www.alistapart.com/articles/conflictingabsolutepositions. Maybe that will help.
molendijk
04-18-2008, 12:33 AM
Here is an interesting article I was reading today what sounds almost like you are trying to figure out http://www.alistapart.com/articles/conflictingabsolutepositions. Maybe that will help.
Jfis, thank you very much for the link. The alistapart-solution is vastly superior to what I posted earlier. I've adapted it to what scrupulOus was asking for, with the following result (valid HTML 4.01 Strict):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
html {
overflow: hidden;
}
body {
overflow: hidden;
padding: 0;
margin: 0;
width: 100%;
height: 100%; background:transparent;
}
#top {
padding: 0;
margin: 0;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 38px;
overflow: hidden;
text-align:center;border-bottom:1px solid red; z-index:2; background:#dedede;
}
#main {
padding: 0;
margin: 0;
position: absolute;
top: 38px;
left: 165px;
right:0;bottom: 0px;
overflow: auto; background:white;
}
#side {
padding: 0;
margin: 0;
position: absolute;
top: 38px;
left: 10px;
bottom: 0px;
width: 140px;
overflow: auto;
border-right:1px solid red; background:lightyellow;z-index:1;
}
</style>
<!--[if lt IE 7]>
<style type="text/css">
#main {
height:expression(document.body.clientHeight-38);
width:expression(document.body.clientWidth-165);
}
#side {
height:expression(document.body.clientHeight-38);
}
</style>
<![endif]-->
</head>
<body>
<div id="top">
<div class="content">
<h2 style="margin:0">Header</h2>
</div>
</div>
<div id="side">
<div class="content">
<h2>Sidebar</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eget elit. Donec
pulvinar. Fusce non est ac libero blandit laoreet. Pellentesque iaculis erat. Cras ullamcorper. Vivamus et
nibh. Quisque vel leo vitae felis hendrerit fermentum. Donec consectetuer, nunc id mattis elementum, lacus
ligula fringilla leo, quis varius lacus turpis sit amet massa. Morbi accumsan ante suscipit ipsum.
Curabitur non tellus nec metus venenatis iaculis. Donec tempor nunc. Mauris sit amet erat. Vestibulum sed
nulla ac nisl dapibus porta. Praesent a nisi quis nisl cursus tempor. Praesent semper laoreet nisl. Donec
id urna.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eget elit. Donec
pulvinar. Fusce non est ac libero blandit laoreet. Pellentesque iaculis erat. Cras ullamcorper. Vivamus et
nibh. Quisque vel leo vitae felis hendrerit fermentum. Donec consectetuer, nunc id mattis elementum, lacus
ligula fringilla leo, quis varius lacus turpis sit amet massa. Morbi accumsan ante suscipit ipsum.
Curabitur non tellus nec metus venenatis iaculis. Donec tempor nunc. Mauris sit amet erat. Vestibulum sed
nulla ac nisl dapibus porta. Praesent a nisi quis nisl cursus tempor. Praesent semper laoreet nisl. Donec
id urna.</p>
</div>
</div>
<div id="main">
<div class="content">
<h2>Main content</h2>
<b>Source: http://www.alistapart.com/articles/conflictingabsolutepositions</b>.<br>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eget elit. Donec
pulvinar. Fusce non est ac libero blandit laoreet. Pellentesque iaculis erat. Cras ullamcorper. Vivamus et
nibh. Quisque vel leo vitae felis hendrerit fermentum. Donec consectetuer, nunc id mattis elementum, lacus
ligula fringilla leo, quis varius lacus turpis sit amet massa. Morbi accumsan ante suscipit ipsum.
Curabitur non tellus nec metus venenatis iaculis. Donec tempor nunc. Mauris sit amet erat. Vestibulum sed
nulla ac nisl dapibus porta. Praesent a nisi quis nisl cursus tempor. Praesent semper laoreet nisl. Donec
id urna.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eget elit. Donec
pulvinar. Fusce non est ac libero blandit laoreet. Pellentesque iaculis erat. Cras ullamcorper. Vivamus et
nibh. Quisque vel leo vitae felis hendrerit fermentum. Donec consectetuer, nunc id mattis elementum, lacus
ligula fringilla leo, quis varius lacus turpis sit amet massa. Morbi accumsan ante suscipit ipsum.
Curabitur non tellus nec metus venenatis iaculis. Donec tempor nunc. Mauris sit amet erat. Vestibulum sed
nulla ac nisl dapibus porta. Praesent a nisi quis nisl cursus tempor. Praesent semper laoreet nisl. Donec
id urna.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eget elit. Donec
pulvinar. Fusce non est ac libero blandit laoreet. Pellentesque iaculis erat. Cras ullamcorper. Vivamus et
nibh. Quisque vel leo vitae felis hendrerit fermentum. Donec consectetuer, nunc id mattis elementum, lacus
ligula fringilla leo, quis varius lacus turpis sit amet massa. Morbi accumsan ante suscipit ipsum.
Curabitur non tellus nec metus venenatis iaculis. Donec tempor nunc. Mauris sit amet erat. Vestibulum sed
nulla ac nisl dapibus porta. Praesent a nisi quis nisl cursus tempor. Praesent semper laoreet nisl. Donec
id urna.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eget elit. Donec
pulvinar. Fusce non est ac libero blandit laoreet. Pellentesque iaculis erat. Cras ullamcorper. Vivamus et
nibh. Quisque vel leo vitae felis hendrerit fermentum. Donec consectetuer, nunc id mattis elementum, lacus
ligula fringilla leo, quis varius lacus turpis sit amet massa. Morbi accumsan ante suscipit ipsum.
Curabitur non tellus nec metus venenatis iaculis. Donec tempor nunc. Mauris sit amet erat. Vestibulum sed
nulla ac nisl dapibus porta. Praesent a nisi quis nisl cursus tempor. Praesent semper laoreet nisl. Donec
id urna.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eget elit. Donec
pulvinar. Fusce non est ac libero blandit laoreet. Pellentesque iaculis erat. Cras ullamcorper. Vivamus et
nibh. Quisque vel leo vitae felis hendrerit fermentum. Donec consectetuer, nunc id mattis elementum, lacus
ligula fringilla leo, quis varius lacus turpis sit amet massa. Morbi accumsan ante suscipit ipsum.
Curabitur non tellus nec metus venenatis iaculis. Donec tempor nunc. Mauris sit amet erat. Vestibulum sed
nulla ac nisl dapibus porta. Praesent a nisi quis nisl cursus tempor. Praesent semper laoreet nisl. Donec
id urna.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eget elit. Donec
pulvinar. Fusce non est ac libero blandit laoreet. Pellentesque iaculis erat. Cras ullamcorper. Vivamus et
nibh. Quisque vel leo vitae felis hendrerit fermentum. Donec consectetuer, nunc id mattis elementum, lacus
ligula fringilla leo, quis varius lacus turpis sit amet massa. Morbi accumsan ante suscipit ipsum.
Curabitur non tellus nec metus venenatis iaculis. Donec tempor nunc. Mauris sit amet erat. Vestibulum sed
nulla ac nisl dapibus porta. Praesent a nisi quis nisl cursus tempor. Praesent semper laoreet nisl. Donec
id urna.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eget elit. Donec
pulvinar. Fusce non est ac libero blandit laoreet. Pellentesque iaculis erat. Cras ullamcorper. Vivamus et
nibh. Quisque vel leo vitae felis hendrerit fermentum. Donec consectetuer, nunc id mattis elementum, lacus
ligula fringilla leo, quis varius lacus turpis sit amet massa. Morbi accumsan ante suscipit ipsum.
Curabitur non tellus nec metus venenatis iaculis. Donec tempor nunc. Mauris sit amet erat. Vestibulum sed
nulla ac nisl dapibus porta. Praesent a nisi quis nisl cursus tempor. Praesent semper laoreet nisl. Donec
id urna.</p>
</div>
</div>
</body>
</html>
ScrupulOus, all you have to do now is to adapt this to your needs.
(By the way, this is a superb demonstration of how you can obtain fixed position without 'position:fixed', and of how you can extract pixels from percentages).
---
Arie Molendijk
Powered by vBulletin® Version 4.2.2 Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.