Aller au contenu

Mettre 2 DIV cote à cote....

chocoler

Par chocoler
dans (X)HTML et CSS

 Partager

Sujets conseillés

chocoler

chocoler

Posté
Posté

Bonsoir,

je suis entrain de refaire une page et mon probleme consite à aligner 2 div cote à cote

Sous IE ca fonctionne.

Mais sous FF j'ai un probleme. Et je ne sais vraiment plus comment faire.

Voila la page posant probleme :

http://www.franchuta.info/actualite-17-mad...ut-concert.html

Voila le code

(j'ai mis le style dans les balises pour tester, j'intégrerai tout ca dans ma feuille de style quand j'aurai réussi)

	
<div style="float:left; padding:0 5 0 5;">
	<p>
	<? if ($tabResultat["nws_grande_photo"] != "") {?>
		<div id="cadre-photo" style="float:left">
			<img   hspace="10"  vspace="10"  border="0" src="/news/images/<?=$tabResultat["nws_grande_photo"]?>" alt="<?=$tabResultat["nws_sujet"]?>" >
		</div>
	<?	} elseif ($tabResultat["nws_petite_photo"] != "") {?>
		<div id="cadre-photo" style="float:left">
			<img   hspace="10"  vspace="10" border="0" src="/news/images/<?=$tabResultat["nws_petite_photo"]?>" alt="<?=$tabResultat["nws_sujet"]?>" >
		</div>
	<?
	}
	?>
	<div id="cadre-texte" style="float:left">
		<?=str_replace("\n","<br />",stripcslashes($tabResultat["nws_texte"]))?>
		<br /><br /><br />+ d'infos : <a href="<?=$tabResultat["nws_url"]?>" target="_blank"><?=$tabResultat["nws_url"]?></a>
	</div>
</p>
</div>

Si vous avez des solutions n'hésitez pas

Merci

Nicolas.

Lien vers le commentaire
Partager sur d’autres sites
marcelman

marcelman

Posté
Posté

Est-ce que tu as essayé de mettre un conteneur, puis dedans de mettre des éléments flottants sous la forme suivante 

<div class="conteneur">
<p class="élément flottant">élément 1</p>
<p class="élément flottant">élément 2</p>
...
</div>

?

Regarde le tuto openweb que m'a conseillé slender dans une demande que je faisais à propos de colonnes dans un doc. J'ai repris entièrement mon code et ça fonctionne pas mal.

NB : je n'ai pas encore mis les éléments en ligne.

Lien vers le commentaire
Partager sur d’autres sites
ghost

ghost

Posté
Posté (modifié)

Bonjour,

Je ne voudrais pas être décourageant mais c'est déjà beau que ça fonctionne sous IE !! Si le résultat te convient.

Plus de 20 erreurs (pas de doctype !) pour la valdation html et presque autant pour le css !!

Puis ce mélange de table et de div quelle salade ...

Bon, sinon pour que 2 div cohabitent sur la même ligne même en "flottant" du même côté (left ou right) donnes leur au moins une largeur (width) si ton conteneur fait 750px un div de 500 et l'autre de 250 (attention à l'épaisseurs des bordures).

Attention aussi aux noms que t'utilises, cadre-texte et cadre-image, préfére cadre_texte et cadre_image

ce serait si "facile" de tout reprendre en css, tiens un bon tuto pour bien redémarrer http://www.siteduzero.com/tuto-3-6-0-appre...e-site-web.html

ps : tiens on est presque voisin !! Bon courage

Modifié par ghost
Lien vers le commentaire
Partager sur d’autres sites
chocoler

chocoler

Posté
  • Auteur
Posté (modifié)

salut,

je vais mettre une largeur fixe sur mes 2 div mais le prob c'est que l'image n'a pas de taille fixe.....

donc soit je récupere la taille de l'image et j'affecte cette taille au div, soit j'oblige une taille max de l'image.

ensuite pour la pagaille du site, je suis au courant mais pour le moment je n'ai pas trop le temps de tout reprendre =)

je vais reprendre cette page avec les yeux ouvert du matin :P

merci encore :)

ps : tiens on est presque voisin !! Bon courage

salut varois =), ca embauche par chez toi :P ?

Modifié par chocoler
Lien vers le commentaire
Partager sur d’autres sites
ghost

ghost

Posté
Posté

Bonjour,

essayes ce bout de code vite fait ...



<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<style type="text/css">

.contenu {
width: 800px;
overflow:hidden;
background-color:&H31fc;
border: 1px solid #000;
}

.contenu p {
margin: 10px;

}

.gauche {
float: left;
width: auto;
background-color: #0b00dc;
margin: 10px;
margin-right: 20px;
}

.gauche img {
display: block;
border: 1px solid #000;
}


</style>
</head>

<body>



<div class="contenu">
<div class="gauche"><img src="ton_image1.jpg">
</div>
<p>Nunc quis elit. Nam adipiscing pellentesque velit. In ut augue. Nulla elit ante, ornare non, rutrum a, volutpat et, pede. Curabitur porta. Pellentesque tristique nisi suscipit pede. Sed eu odio. Praesent id augue sed ante dictum semper. Nullam nunc. Fusce congue elit vitae neque. Vestibulum auctor ante vel dolor. Suspendisse nisi nunc, convallis et, hendrerit at, sollicitudin eu, risus.</p>
</div>
<div class="contenu">
<div class="gauche"><img src="ton_image2.jpg">
</div>
<p>Nunc quis elit. Nam adipiscing pellentesque velit. In ut augue. Nulla elit ante, ornare non, rutrum a, volutpat et, pede. Curabitur porta. Pellentesque tristique nisi suscipit pede. Sed eu odio. Praesent id augue sed ante dictum semper. Nullam nunc. Fusce congue elit vitae neque. Vestibulum auctor ante vel dolor. Suspendisse nisi nunc, convallis et, hendrerit at, sollicitudin eu, risus.</p>
</div>

</div>
</body>

A adapter et améliorer biensûr ...

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...