28173 sujets

CSS et mise en forme, CSS3

Soucis de position ...

Bonjour,
Je viens faire appel a vos connaissances pour m'aider a résoudre un problème
que je n'ai toujours pas résolu Smiley bawling

voici le code html de la partie concernée:
<div id="blocbas">
			<div id="description">
				<div class="bolded">Description:</div> <br />
				<div class="underlined">Nom:</div> Bobby.jpg <br />
				<div class="underlined">Déposé par:</div> bobby <br />
				<div class="underlined">Date d'envoi:</div> 24/07/1985 <br />
				<div class="underlined">Dimensions:</div> 124px * 234px <br />
				<div class="underlined">Poids:</div> 121.45 Ko <br />
				<div class="underlined">Vus:</div> 10 fois <br /><br />
				Commentaires (<div class="bolded">2</div>)<br />
			</div>
				<div id="enlarge">
					<a href="index.html" class="img"><img src="design/test.jpg" style="height:256px;width:256px" /></a>
				</div>

		</div>


et voici le code css:
#blocbas {
	margin: 0px;
	padding: 0px;
	position: relative;
}

#description {
	text-align: left;
	padding: 30px;
	position: relative;
	width: auto;
	height: auto;
}

#enlarge {
	text-align: right;
	position: absolute;
	display: inline;
	margin: 10px 5% auto auto;
	width: auto;
	height: auto;
}


Les données css sont les dernieres que j'ai testé, ce qui donne graphiquement:

http://img229.imageshack.us/img229/4522/probleme2aa.th.jpg

J'ai tenté de jouer avec les floats, les display, les positions, etc... mais rien a faire, je n'y arrive pas.

Si quelqu'un a une solution, et je l'espere bien!

Merci d'avance, amicalement, milouse.
Bonjour Milouse,

Avant de t'apporter une proposition de réponse à ton problème je t'invite à prendre le temps de consulter les tutoriels d'Alsacréations et notamment Comprendre-le-positionnement-des-balises-en-CSS
Ces lectures te seront profitables, aussi bien pour le codage HTML de tes pages que pour l'écriture de tes CSS. Smiley smile

Il n'y a pas que la balise <div> pour coder en html...

Ma proposition :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Untitled</title>
<style type="text/css">
<!--
#blocbas {
border: 1px solid green;
	margin: 0px;
	padding: 0px;
	position: relative;
}
#description {
border: 1px solid red;
	text-align: left;
	padding: 30px;
	float: left;
	position: relative;
	width: 40%;
	height: auto;
}
#enlarge {
border: 1px solid gray;
	text-align: right;
	
	margin-left: 50%;
	width: auto;
	height: auto;
}
.separation {clear: both; visibility: hidden;}
-->
</style>
</head>
<body>
<div id="blocbas">
			<div id="description">
				<div class="bolded">Description:</div> <br />
				<div class="underlined">Nom:</div> Bobby.jpg <br />
				<div class="underlined">Déposé par:</div> bobby <br />
				<div class="underlined">Date d'envoi:</div> 24/07/1985 <br />
				<div class="underlined">Dimensions:</div> 124px * 234px <br />
				<div class="underlined">Poids:</div> 121.45 Ko <br />
				<div class="underlined">Vus:</div> 10 fois <br /><br />
				Commentaires (<div class="bolded">2</div>)<br />
			</div>
				<div id="enlarge">
					<a href="index.html" class="img"><img src="img/top_news.gif" height="256px" width="256px" /></a>
				</div>
				<hr class="separation" />
		</div>
</body>
</html>


A+ Smiley cligne
CoingPomme a écrit :
Bonjour Milouse,

Avant de t'apporter une proposition de réponse à ton problème je t'invite à prendre le temps de consulter les tutoriels d'Alsacréations et notamment Comprendre-le-positionnement-des-balises-en-CSS
Ces lectures te seront profitables, aussi bien pour le codage HTML de tes pages que pour l'écriture de tes CSS. Smiley smile

Il n'y a pas que la balise <div> pour coder en html...


Je te remerci, ca fonctionne, je me suis effectivement servi des différents tutoriels
alsacreations, j'ai réussi à faire tout grace a eux, sauf cette partie, et
javoue ne pas encore bien comprendre pourquoi avec toi ca marche Smiley eek ,

Enfin j'ai compris maintenant il me semble! il faut que je code encore un peu plus pour bien
assimiler quelques détails Smiley cligne

Pour les div, au début je mettais des <p> des <span> mais finalement,
j'aime bien rester sur mes div Smiley lol

Encore merci a toi, bonne soirée,
Milouse.
Modifié par milouse (18 Mar 2006 - 19:14)
Ralfman68 a écrit :
Mdr! mais t'as pas capté le problème je crois, merci de ton aide tout de même...@+


Qui n'a pas capté le problème? en faite je mettais toujours un position absolute quand
jutilisais float, ca doit etre ca mon erreur Smiley rolleyes

Milouse.
Sujet clos
Aller à