Positionnement left 100%-200px ???

Bonjour !

Petite question sans doute simple, mais j'ai néanmoins du mal à trouver la réponse.

Je souhaiterais aligner un bloc à droite de la page, dont les dimensions sont de 100% de l'espace disponible, sachant que j'aimerais conserver une marge de 200px sur la gauche.
Donc un truc du genre
left : 200px;
width : 100% - 200px;
En fait, il faurait faire le calcul... Mais au sein du CSS, je ne sais pas comment faire. Dans cette hypothèse, sachez que j'ai la largeur d'affichage stocké dans une variable.
Autre hypothèse, le CSS permet peut-être avec des attributs plus pertinents d'obtenir le même résultat...

Merci du coup de pouce :o)

<script type="text/javascript">
lrg = screen.availWidth-200;
document.write("<div style='float:left;width:200px'>&nbsp;</div><div width='"+lrg+"'>");
</script>
Pour exemple aaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaa </div>

La marge de 200 est mise en float left vide. Le reste est rempli avec lrg = screen.availWidth-200; = la largeur d'écran -200.

Salut,

yakou32 a écrit :
dont les dimensions sont de 100% de l'espace disponible, sachant que j'aimerais conserver une marge de 200px sur la gauche.

Je n'ai pas compris, il s'agit de l'espace disponible par rapport à quoi ?

Un peu de code ce serait bien.

Je suis en train d'essayer d'adapter le code de Deny (que je remercie) :

<script language="JavaScript" type="text/JavaScript">
	lrg = screen.availWidth-200;
	document.write("<div style='float:left;width:200px'>&nbsp;</div><div id='blog' class='blog' style='width="+lrg+"'>  <p style='xxlarge'>newsBlog
</p>
  <p style='xxlarge'>&nbsp;  </p>
</div>");
</script>

Il s'agit de créer un div aligné à droite, dont la largeur est de la totalité de l'écran, moins 200px.
On crée donc une marge de 200px à gauche du div.

Finalement, je penche plutôt vers une solution 100% CSS...

Voici le code :

.blog{
	position:absolute;
	float:left;
	top:150px;
	height:70%;
	margin-left:200px;
	margin-right: -200px;
	width:100%;
	background-color: #FFFFFF;
	color: #000000;
}

C'est le margin-right qui me gène : comment retrancher 200px en largeur ?
Modifié par yakou32 (24 Jul 2006 - 16:34)

yakou32 a écrit :

C'est le margin-right qui me gène

Pourquoi ?

yakou32 a écrit :

comment retrancher 200px en largeur ?

En gardant l'élément concerné dans le flux (pas de position:absolute; pas de float) et en lui appliquant la marge souhaitée.

Ben j'ai toujours mon bloc qui dépasse de 200px à droite, et qui engendre donc une barre de défilement horizontale

Salut,

est ce que nos post se répondent, ou bien est ce que tu parles tout seul ?
Je ne sais pas mais j'ai comme un doute là
Modifié par clb56 (24 Jul 2006 - 23:47)

Je réponds aux posts

J'en suis là :
.blog{
top:150px;
height:70%;
margin-left:200px;
margin-right:-200px;
width:100%;
background-color: #FFFFFF;
filter:alpha(opacity=70);
color: #000000;
}
le div est donc dans le flux. Décalé à droite de 200px. Mais le width reste à 100%, sans être affecté par le margin right, et donc ça déborde à droite.

Ah ..............

Si l'élément est dans le flux alors ce n'est pas la peine (au contraire) de lui donner un width:100%;

En n'indiquant rien il prend la valeur par défaut de la largeur d'un élément de type block qui est width:auto; ce qui est très différent du width:100%;

De ce fait tu n'as pas besoin du margin-right négatif et ceci :

.blog {
margin-left:200px;
}

Doit suffire

Super, la solution la plus simple était la bonne !
Ceci dit, le bloc est maintenant bien câlé en horizontal, mais ne respecte pas la distance par raport au haut...
Ni le top, ni le margin-top ne semblent fonctionner...

Sans positionnement le top ne risque pas de fonctionner puisqu'il est associé à cette propriété (position).

Bon en fait là maintenant ce qui serait bien c'est de voir un peu mieux ce que tu cherches.

1. code html
2. image rendu visuel
3. Pas de css (hé oui ^^)
Modifié par clb56 (25 Jul 2006 - 00:23)

ok, j'ai réalisé un petit schéma de l'objectif à atteindre, qui vaut mieux qu'un long discours.
Donc, comme tu l'auras deviné, il s'agit d'un blog. Mais la mise en page change un peu de ce qu'on trouve d'habitude.
De plus, l'idée est d'adapter les dimensions des éléments selon les dimensions de l'écran de l'internaute. En haut et à gauche, les écarts sont figés pour éviter les conflits avec les éléments de navigation, et les futurs éléments de titrage-informations, et devraient tout de même convenir aux faibles résolutions. Par contre, les dimensions vers le bas et la droite sont en % de l'écran, et devraient permettre d'afficher plus de contenu pour les grosses résolutions...

A la base, il n'y a rien de bien compliqué. Cependant, c'est le câlage du div "blog" qui me gène.... Une fois ce div de fond transparent câlé, j'envisageais de superposer un div de même dimension contenant les divs imbriqués pour le contenu (opaque cette fois-ci).
Dans la dernière version, la hauteur de 70% du div blog semble ne pas être bonne, et la position est collée en haut. De plus, il y a conflit avec le fond qui apparait après le blog, plutôt qu'en dessous. Mais je ne me suis pas encore attaché à la meilleure solution de positionnement du fond.

Pour info, voilà le code :

<body>

<!-- GESTION DE L'IMAGE DE FOND -->
<?php
include "scripts/image_fond.php";
?>
  
<div id="blog" class="blog" >
	<p style="xxlarge">newsBlog</p>
</div>

<div id="navcontainervert">
      <?php include 'menu.php' ; ?>
</div>

<!-- les dimensions de l'image de fond ci-dessous sont calculées par le script appelé plus haut, afin de se câler sur la largeur de l'écran -->
<img src="images_fond/<?php echo $image ; ?>" width="<?php echo $newwidth ; ?>" height="<?php echo $newheight ; ?>">
</body>

et le css du div qui pose problème :

.blog{
	margin-top:150px;
	height:70%;
	margin-left:200px;
	background-color: #FFFFFF;
	filter:alpha(opacity=70);
	color: #000000;
}

Rectification :
le margin-top est bien pris en compte, mais pas le height :
Capture ci-jointe :

(pour l'instant je ne bosse que sur IE7, mais je ne perds pas de vue pour la suite Firefox et Netscape)
Modifié par yakou32 (25 Jul 2006 - 01:39)

Bon,
depuis le temps que c'était nécessaire, je profite de l'été calme pour reprendre les bases du CSS depuis le début, je crois que ça me fera pas trop de mal, et ça m'évitera dorénavant de me faire trop de noeuds au cerveau pour des questions simples.
C'est vrai que jusqu'alors j'avais privilégié une approche empirique, zappant du même coup quelques bases

En tout cas, merci du coup de main, et je reviens bientôt avec ma solution !