18041 sujets

Questions générales et questions de débutants

Paragraphe et mise en page

Bonjour

Voilou il y a encore certaines choses que j'ai du mal à faire en CSS.
Voici un exemple de mise en page faite avec des tableaux, mais j'aimerais la faire totalement en CSS.
Après plusieurs essais je n'arrive pas du tout à obtenir le même résultat.
Je ne pense pas que ça soit difficile, mais là je tourne en rond!!!

Help i need somebody help

Thanxxx
Modifié par Bouh (16 Dec 2006 - 17:26)
Bonjour,

Un truc comme ça ?

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Test</title>
<style type="text/css">
<!--
body {
margin: 0px;
padding: 0px;
}
#conteneur{
width:500px;
margin: auto; 
border: 1px solid black;
position: relative;
}
.date{
position: absolute;
width: 100px;
}
.texte {
margin-left: 110px;

}

-->
</style>
</head>

<body>
<div id="conteneur">
<p class="date"> date</p>
<p class="texte"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla diam risus, vestibulum a, consequat vel, lacinia at, eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean et risus. Nulla lobortis tempor metus.
</p>

<p class="date"> date</p>
<p class="texte"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla diam risus, vestibulum a, consequat vel, lacinia at, eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean et risus. Nulla lobortis tempor metus.
</p>

<p class="date"> date</p>
<p class="texte"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla diam risus, vestibulum a, consequat vel, lacinia at, eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean et risus. Nulla lobortis tempor metus.
</p>
</div>
</body>
</html>
Merci ghost pour cette réponse.

Dans la solution que tu m'as doné il y a juste quelque chose d'embetant. Dans ma solution finale, il y aura très peu d'espace entre la date et le texe, comme dans cet exemple. Hors si l'utilisateur grossit le texte, il y aura un moment ou la date et le texte vont se superposer.
Perso j'ai essayé ça, ca marche sous IE6, mais pas du tout sur Firefox (et je ne sais pas sousIE7).

Si vous avez d'autres propositions...
Modifié par Bouh (16 Dec 2006 - 19:53)
Il suffit de :

#conteneur{
width:15em;
margin: auto; 
border: 1px solid black;
position: relative;
}
.date{
position: absolute;
width: 3em;
left: 0;
}
.texte {
margin-left: 3em;

}

width a regler en fonction de tes besoins.

<edit> autant pour moi, j'avais oublié le left: 0; pour IE6 (7?)</edit>
Modifié par ghost (16 Dec 2006 - 20:10)
Salut, vu ton code, je ne pense pas que tu connais bien le html.

Une balise inline <p></p> ne peut pas contenir une balise bloc <div></div>

Je te conseille de reprendre par le début html, et apres d'apprendre les css, car au sinon tu ne t'en sortiras pas facilement.
Super_baloo8 a écrit :


Une balise inline <p></p> ne peut pas contenir une balise bloc <div></div>



GROUIOUIOUIOUIRKKKkkkkkkkkkkkkkkkkkkkkkkkkkkkk !!!!!!!!!!!!!!!!!!! .......


depuis quand <p> est une balise inline ? Smiley eek Smiley eek Smiley eek

Smiley cligne
Eldebaran a écrit :
Belle bête. Smiley smile


Ben oui, tout le monde sait ça...

...

... Le cri fait la bête comme l'habit fait le moine...

Smiley lol
Modifié par clb56 (20 Dec 2006 - 23:25)
clb56 a écrit :

depuis quand <p> est une balise inline ? Smiley eek Smiley eek Smiley eek

Smiley cligne


Euh, je ne sais pas, qui à dis ca ? Mais ... qui me parles ? Moi dires des bêtises ? Jamaiiiisssss
Sujet clos
Aller à