28220 sujets

CSS et mise en forme, CSS3

[Résolu] Div de news

Je débute en css et je ne sais pas comment prendre le problème par le bon bout pour avoir quelque chose d'approchant Smiley decu

http://forum.alsacreations.com/upload/3961-div-news.png

A votre bon coeur, un peu d'aide svp ?

Mon html :
<div class="date">Div Date</div>
<div class="news"><strong>div news 1 : ici le texte de ma news qui prend tout le reste de la longueur</strong> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</div>

Modifié par globy (08 Nov 2005 - 14:31)
Xavier a écrit :
Bonjour,

tu peux utiliser un flottant pour div date, et un padding gauche pour div news

ma css actuelle avec tes suggestions.
<style type="text/css">
.news {
	width: 100%;
	background-color: #FFFF99;
	float: left;
	padding-left: 20px;
}
.date {
	border: 1px solid #000000;
	background-color:#CC0066;
	width: 30px;
	float: left;
	height: 40px;
}
</style>


Le padding-left décale juste le texte, pas la div ?
C'est .date qui doit flotter, ce n'est pas nécessaire pour .news.

Par ailleurs si .date fait 31px (with+border) il vaudrait mieux avoir un padding-left sur .news un peu supérieur.

a écrit :
Le padding-left décale juste le texte, pas la div ?
Exact, .new occupera toute la largeur, mais tous ses contenus (dont les textes) seront décalés du padding-left.
Je viens de comprendre ce qui clochait aussi et surtout dans mon code : j'avais mélangé les unités en pix et en % Smiley rolleyes
D'ailleurs je crois qu'il est préféré les em ?

Par contre je sais pas trop comment définir la taille du bloc1 en largueur fixe et que le reste soit ocupée par l'autre div...

Mon code de chantier lol :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
border: 0;
font-family: sans-serif;
font-size: 1em;
font-weight: normal;
font-style: normal;
text-decoration: none;
}
.bloc1 {
background-color: blue;
height: 50px;
width: 100px;
float: left;
}
.bloc2 {
background-color: green;
height: 50px;
width: 400px;
float: left;
margin-left: 0px;
}
</style>
</head>

<body>
<div class="bloc1">Div Date</div>
<div class="bloc2"><strong>div news 1 : ici le texte de ma news qui prend tout le reste de la longueur</strong> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</div>
</body>
</html>

Modifié par globy (07 Nov 2005 - 17:27)
Je crois que tu attendais ceci (remplacer éventuellement padding-left par margin-left si le pavé bleu ne doit pas recouvrir le vert):
<style type="text/css">
* {
margin: 0;
padding: 0;
border: 0;
font-family: sans-serif;
font-size: 1em;
font-weight: normal;
font-style: normal;
text-decoration: none;
}
.bloc1 {
background-color: blue;
height: 50px;
width: 100px;
float: left;
}
.bloc2 {
background-color: green;
margin-left:100px;
}
</style>
</head>
<body>
<div class="bloc1">Div Date</div>
<div class="bloc2"><strong>div news 1 : ici le texte de ma news qui prend tout le reste de la longueur</strong>
bla bla bla bla bla bla bla bla bla bla bla bla 
bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla 
bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla 
bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
</div>
</body>
Sujet clos
Aller à