Alignement de blocs côte à côte et tailles variables

Bonjour,

J'ai quelques difficultés à construire un site qui prend toute la largeur et la hauteur de l'écran (quelque soit sa taille). J'ai pas mal avancé et suis content de moi mais j'ai quand même quelques questions :

tout d'abord, voici le lien du site.

Problème (lien xxxxxxxxxx)
Le BlocNavigation (bloc orange à droite) est toujours à gauche. Et à sa droite, en bas, je suis censé avoir un BlocTexte qui prend toute la largeur restante de l'écran.
Le problème, vous le constatez grâce au lien plus haut, est que le BlocTexte passe par-dessous le BlocNavigation .
J'ai pourtant suivi les conseils d'un des gurus du site sur ce fil.

Voilà, j'espère que ce que je demande n'est pas totalement farfelue.
Merci d'avance de votre aide
Modifié par cevichero (12 Nov 2010 - 11:59)

En y réfléchissant, j'aurais plus de chances d'obtenir une réponse si je fournis le code
Le code xhtml :

<div class="contenu">
	<div class="navigation">
		<?php include('includes/logo.php'); ?>
		<?php include('includes/menu.php'); ?>
	</div>
	<!-- ICI la Diapo <div>...........</div> -->
	<div class="blocTexte">
		<div class="paddingTexte">Le Lorem Ipsum...</div>
	</div>
</div>

et le CSS :

html, body {
	margin:0; padding:0;
	height:100%;
	overflow: hidden;
}
body {
	background-color: #333;
	font-family: Verdana, Geneva, sans-serif;
	color: #FFF;
}

/* NAVIGATION */
div.navigation {
	float: left;
	background-color: #EA640C;
	width: 375px;
	height: 100%;
	padding: 0;
	margin: 0;
}

/* CONTENU */
div.contenu {
	background-image: url(../images/.jpg);
	background-position: top right;
	background-repeat: no-repeat;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
}
div.blocTexte {
	background-image: url(../images/bck_blocTexte.png);
	background-repeat: repeat;
	padding: 0;
	margin: 0;
}
div.blocTexte div.paddingTexte {
	text-align: justify;
	text-shadow: 0 0 2px #000;
	padding: 30px;
}

ça, c'est pour mon problème de la Page Type1 (lien xxxxxxxxx)
Si quelqu'un pouvait me donner un coup de main, ce serait sympa
Merci
Modifié par cevichero (12 Nov 2010 - 13:20)

Hello,
Je me permets une petite relance, au cas où...
merci

Bonjour,

Par rapport au fil de discussion cité dans ton premier post, tu ne suis pas l'indication donnée par Raphaël, à savoir faire flotter le block orange puisque tu utilises le positionnement absolu
Modifié par Igor (12 Nov 2010 - 12:07)

Oui, tu as raison Igor, j'avais très mal regardé apparemment
J'ai corrigé le CSS et le fichier et ça fonctionne mieux mais du coup le BlocTexte n'est plus collé au bas de la page mais en haut. Visible ici
J'ai mis à jour le code de mon 2e post.

Il y a bien une solution trouvée chez pompage mais il recommande de mettre le bloc en absolute. Je tourne en rond...
Il y a-t-il un moyen de contourner cela ?
Merci

EDIT : je m'aperçois qu'en fait le BlocTexte (et le bloc paddingTexte) prend toute la largeur de l'écran, il n'y a que le texte d'exemple qui est se place à droite du blocNavigation, est-ce normal, ou j'ai mal fait quelque chose ?
Modifié par cevichero (08 Dec 2010 - 17:57)

Bonjour,

J'ai peut-être trouvé une solution. ça fonctionne en tout cas sur Firefox et IE6,7 et 8 (avec quelques css conditionnelles pour IE6 et 7)
> Voir lien sur post précédent
Le css

div.blocTexte {
	position: absolute;
	background-image: url(../images/bck_blocTexte.png);
	background-repeat: repeat;
	bottom: 0;
	padding: 0;
	margin: 0 0 0 375px; /*le bloc de Gauche fait 375px*/
}
div.blocTexte div.paddingTexte {
	text-align: justify;
	text-shadow: 0 0 2px #000;
	padding: 30px;
}

J'aimerais savoir svp, si tout cela est correct et valide ?
merci
Modifié par cevichero (15 Nov 2010 - 12:29)