28173 sujets

CSS et mise en forme, CSS3

Probleme colonne "Transcender CSS"

Bonjour à tous !

Je suis en train de potasser le bouquin "Transcender CSS" et je teste sa mise en page css à 2 colonnes, entete et pied de page.

code html :
<!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>

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

<link rel="stylesheet" type="text/css" href="layout.css" />

<style type="text/css">
@import url(color.css);
@import(typography.css);
</style>

<title>Cookr! | Raisin Bread</title>
</head>

<body id="cookr-co-uk" class="recipe">
 
    <div id="content">
    
        <!-- 3. Contenu principal -->
        <div id="content_main">
        
            <h2>Raisin bread</h2>
            
            <p>Tea breads, halfway between bread and a cake, are popular for teap>
            
            <h3>Instructions</h3>
            
            <p>I worked on 9 strands at a time, letting the relax before rolling and stretching them a bit further.p>
            
            <p>Bread Basket chef baked them in a hot oven until dough set, the removed the metal bowls, and inverted p>
            
            <h3>Ingredients</h3>
            
            <ul>
                <li>5<sup title="Millilitres">ml</sup> bicarbonate of soda</li>
                <li>2,5<sup>ml</sup> cream of tartar</li>

            </ul>
            
        </div>
        
        <!-- 4. Contenu secondaire -->
        <div id="content_sub">
        
            <h3>Similar recipes</h3>
            
            <ul>
                <li>
                <h4><a href="#">Challah</a></h4>
                <p>For the challah, we mixed up a very tacky dough the clung to the bowl, 
                the hook and the table. Mindful of Chef's instructions to use as little flour
                as possible.</p>
                </li>
                
            </ul>
            
            <h3>You might also like</h3>
            
            <ul>
                
                <li>
                <h4><a href="#">Brown Berry Tower</a></h4>
                <p>For the final class of this course, we made a tall cake, with brownie layers
                sandwiching two kinds of cream and strawberries.</p>
                </li>
            </ul>
        
        </div>
    
    </div>


</body>
</html>


code css : 
html 	{ text-align : center;  }

body { 
position : relative; 
width : 770px; 
margin : 0 auto; 
text-align : left; }

div#content { 
position : relative; 
width : 100%; }


div#content_main {
left : 0; 
width : 50%; 
padding : 1em 0; }
  
div#content_sub { 
left : 50%;  
width : 50%; 
padding : 1em 0; }


Des colonnes devraient se former mais nan, rien n'y fait. Quelqu'un pourrait il m'expliquer le pourquoi du comment ?

Merci d'avance
Modifié par SugataSan (11 Dec 2007 - 12:26)
Merci pour ta réponse ultrarapide Smiley cligne

Je vais aller potasser ton article.

Mais content_main et content_sub sont bien mis hors du flux
par le position: relative du div parent ?
Modifié par SugataSan (11 Dec 2007 - 12:38)
SugataSan a écrit :

Je suis en train de potasser le bouquin "Transcender CSS" et…

Juste un petit hs à ce propos:
Ce livre n'est pas mal du tout, il y a même de très bonnes choses en terme de positionnements avancés… mais il blesse là où ça fait mal dans sa vision réduite de l'accessibilité — je pense d'ailleurs avoir croisé une remarque de Laurent Denis à ce propos.
Le point le plus critique est l'utilisation à tout va de remplacements d'images à coups de text-indent rendant l'information parfaitement inaccessible dans un mode de restitution, certes, peu fréquent, mais réel (css actif, images désactivées). Une parenthèse à ce sujet aurait été grandement appréciable de la part d'Andy…
SugataSan a écrit :
Mais content_main et content_sub sont bien mis hors du flux
par le position: relative du div parent ?

Non.
Bon ca s'éclaircit un peu:

Il faut ajouter un position: absolute au #content_main et #content_sub, qui se placeront hors du flux, mais par rapport au dernier ancêtre positionné qui est #content.

J'ai bon ?
SugataSan a écrit :
Il faut ajouter un position: absolute au #content_main et #content_sub, qui se placeront hors du flux, mais par rapport au dernier ancêtre positionné qui est #content.

J'ai bon ?

Oui, c'est déjà beaucoup mieux. Smiley smile
Sujet clos
Aller à