CSS: largeur variable et blockquote

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : CSS: largeur variable et blockquote

LeRiton

Bonjour à tous,

J'utilise une page à largeur variable. Pour simplifier, on peut dire qu'il y a un menu à gauche, et un contenu à la droite du menu.

Pas de soucis, sauf si je rajoute un blockquote. Là, selon la taille de ce dernier, le positionement de mon bloc de guauche se fait soit à gauche du menu, soit en bas.

Voici le code simplifié de la page:

Code :

<!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" lang="fr">
<head>
<title>Titre de ma page</title>
<link rel="stylesheet" href="classic.css" />
</head>
<body>
<div id="page">
<ul id="menu">
<li><a href="index.html" title="Index du site">Accueil</a></li>
<li><a href="members.html" title="Liste et présentation des membres">Membres</a></li>
<li><a href="galleries.html" title="Galleries de photos par thème">Galleries</a></li>
<li><a hreF="links.html" title="Liens divers">Liens</a></li>
<li><a href="about.html" title="Informations sur le site">A Propos</a></li>
</ul>
<div id="content">
<h2>Titre h2</h2>
<blockquote title="Une citation">
Texte de la citation: c'est de sa longueur que dépend l'affichage de la page. Donc, je repete cette phrase. Texte de la citation: c'est de sa longueur que dépend l'affichage de la page. Donc, je repete cette phrase. Texte de la citation: c'est de sa longueur que dépend l'affichage de la page. Donc, je repete cette phrase. Texte de la citation: c'est de sa longueur que dépend l'affichage de la page. Donc, je repete cette phrase.
</blockquote>
<p id="author">
<cite>Anonyme</cite>
</p>
<h3>Titre en h3</h3>
<p>BlaBla</p>
</div>
</div>
</body>
</html>

Et pour la CSS:

Code :

body {
margin: 0;
padding: 0;
background: #666666;
font: 1.2em 0.9em/1em verdana;
color: #B1B1B1;
text-align: center;
}
/*Balise englobant tout le body*/
#page {
width: 70%;
margin: 0 auto;
padding: 0;
background: #858585;
border: 3px solid #FFFFFF;
}
#menu {
margin: 20px 0 0;
padding: 0 0 20px 0;
float: left;
width: 150px;
text-align: center;
background: #858585;
border-right: 3px solid #414141;
}
#content {
float: left;
margin: 0;
padding: 20px;
background: #FFFFFF;
text-align: left;
}
#content p {
text-indent: 1em;
padding-left: 1em;
text-align: justify;
background: #EEDDAA;
}
#content blockquote {
margin: 0;
padding: 0;
font-style: italic;
background: #4499FF;
}
#content #author {
text-align: right;
background: #EEAA55;
}
#content cite {
text-align: right;
font-style: normal;
background: #7711AA;
}
#content h2 {
font-size: 1.5em;
color: #FF6600;
padding-left: 0.5em;
border-left: 1px solid #FF6600;
border-bottom: 1px solid #FF6600;
background: #22AAFF;
}
#content h3 {
font-size: 1.2em;
color: #FF6600;
margin-left: 1em;
padding-left: 1.5em;
padding-top: 0.2em;
background: url(big.jpg) no-repeat;
border-bottom: 1px solid #FF6600;
}

Merci d'avance.

Publicité

LeRiton

Personne?

Problème insoluble ou question bête qui n'a aucun sens?

Je peux apporter des précisions, il suffit de demander !

gatsusat

c'est pas déprécié blockquote ?

LeRiton

Biiiin, j'ai vérifié ici:

http://giminik.developpez.com/xhtml/blockquote.html

Ca a pas l'air...

gatsusat

okii

masklinn

í dag viðrar vel til loftárása

gatsusat a écrit :

c'est pas déprécié blockquote ?

Heuu non, c'est le seul moyen de faire des quotes en blocs [:petrus75]

avec <q> en quotes inlines et <cite> en citations

Message édité par masklinn le 30-06-2005 à 15:52:16

---------------
I mean, true, a cancer will probably destroy its host organism. But what about the cells whose mutations allow them to think outside the box by throwing away the limits imposed by overbearing genetic regulations? Isn't that a good thing?

LeRiton

Au fait, entre temps, j'ai rajouté un <p> dans le blockquote, w3c n'en voulait pas sinon, ce qui donne:

Code :

<blockquote>
<p>
Ici ma citation.
</p>
</blockquote>

:bounce:

Message édité par LeRiton le 30-06-2005 à 16:17:33

LeRiton

Autre question (qui n'exclue pas l'autre ) qui ne me bloque pas, mais que j'aimerais comprendre. Sur le même code, dans le #content

Code :

<p id=author>
<cite>Nom de l'auteur</cite>
</p>

avec le CSS

Code :

#content #author {
text-align: right;
/*si je specifie l'alignement ici, ca passe*/
}
#content cite {
text-align: right;
/* si je le met ici, ca ne marche pas */
}

En gros, je pensais que text-align fonctionnai également sur les éléments en ligne, ca n'a pas l'air d'être le cas ici.

Quelqu'un pour m'éclairer?

Bien sûr, mon premier soucis est plus que jamais d'actualité :bounce:

FlorentG

Pour qu'un élément puisse avoir son text aligné par exemple à droite, il faut que sa largeur soit plus grande que le texte. Or, un élément inline aura toujours pour largeur la largeur du texte dedans. Donc impossible d'aligner à droite, vu qu'il n'y a pas d'espace. Solution : un ch'ti display: block;, ou alors mettre le text-align dans le p

LeRiton

OK, c'est très clair, merci!

J'abuse, mais toujours pas d'idée pour mon premier problème?

En modifiant la largeur du blockquote, on attenue (retarde) l'effet jusqu'a un certain rétrécissement de la page, mais je trouve pas ca très propre:

Code :

#content blockquote {
...
width: 95%;
}

Publicité

FlorentG

Il n'y a pas grand chose à faire, à part mettre des pourcentages pour tout le monde

LeRiton

Pourtant, <blockquote> est dans mon <div id="content">, donc il ne devrait pas dépasser de sa largeur (non?).

Pour preuve, tous les <p> du #content ne posent aucun problème, alors que je ne leur spécifie aucune largeur.

FlorentG

Ca dépend, il faut que ton #content a une width lui aussi, sinon le blockquote se dimensionnera par rapport au premier ancêtre dimensionné trouvé dans la hiérarchie

LeRiton

/me un poil largué... :sweat:

Pourquoi ce n'est pas le cas avec le <p> alors?

Ils ont le même premier ancetre si je ne m'abuse?

FlorentG

Comme dit, s'ils ont un width définit dans le CSS

LeRiton

Non, dans mon code, ils n'ont pas de width défini.

J'ai raté le coche?

FlorentG

Voilà, donc si aucun n'a de width, vraiment personne, le pourcentage se fera par rapport à la taille de la fenêtre

LeRiton

Ca d'accord, je reprend juste parceque je crois qu'il y a confusion.

Comme dans mon code, j'ai une div #page qui englobe tout le code, et qui est la seule à avoir un width spécifié (ici 70%). Dans cette div, j'ai mon menu #menu et le contenu de la page #content.

#menu est en width 150px float: left. Dans mon content, si je retire le blockquote, je n'ai que des <p> (toujours pas d'autre width). L'affichage se fait correctement à droite du menu. Si avant le <p>, je met le blockquote (toujours pas de width), là, l'affichage est plus aléatoire, selon la taille que prend ma fenetre, le blockquote (et par conséquent tout le #content) peut s'afficher en dessous du menu.

Voila ce que je ne comprend pas, car dans les 2 cas, je ne spécifie pas de width pour les éléments de #content, pas plus que pour le #content lui-même.

En esperant avoir été clair.

FlorentG

Donc le blockquote se fera par rapport à #content. Donc imagine que les 70% de ton #content font 1000 pixels. Alors tes 95% du blockquotes feront 950 pixels, ce qui ne laissera que 50 pixels pour ton #menu, ce qui est forcément pas top...

FORUM HardWare.fr

Programmation

HTML/CSS

CSS: largeur variable et blockquote

Sujets relatifs
Pb CSS pour un affichage de menus fixe à droite	script batch comment parser une variable
Contenue variable Sting pour nom d'une nouvelle variable	envoyer variable PHP a du Flash
Jsp: variable représentant le chemin du serveur	Tableau à multi dimension "variable
CSS : question sur l'avenir	Insertion flash et CSS
Convertir une variable en majuscule.	CSS pour impression
Plus de sujets relatifs à : CSS: largeur variable et blockquote

Page générée en 0.067 secondes