Probleme avec un design

Question

nux02160

20 Apr 2010 à 13:30

Bonjour , toujours pour continuer mon apprentissage je me suis lancé dans un nouveau design sans image pour le moment ... Mais j'ai un soucis d'agrandissement d'un conteneur lorsque le texte devient plus important.Je tiens a preciser que je connais trés bien le php j'ai encore beaucoup de mal avec le css ...

Le site en cours de réalisation

http://ups.imagup.com/09/1271810430.png

le probleme en question

http://ups.imagup.com/09/1271810483.png

le code avec le css directement dans la page


<!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>Bienvenue sur ma premiére page web !</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name="description" content="La description de ma premiére page web" />
        
        <link rel="stylesheet" media="screen" href="general.css" />
        <style type="text/css" media="screen">
		/* Feuille de styles interne */
		
                
/* General */
            body {
                padding-top:0px ;
                margin:1px 0px 6px 0px;
                font-size:12px;
                font-family:Georgia;
                background: #C79F4B ;
                color:#3B0405;
                
            }
            
            h1 {
                text-align:center;
                
            }
            
            em {
                text-transform:capitalize;
                font-weight: bold ;
                font-size:18px;
                padding:4px;
            
            }
            
/* Conteneur global principal*/
            #global {
                min-width:700px;
                max-width:950px;
                padding:10px;
                margin:auto ;
            
            }
            
 /* Conteneur logo */           
            #logo {
                height: 100px;
                margin:auto;
                background:#663E10;
                margin-bottom:0px;
            
            }

/* texte du logo */                         
            #textlogo a {
                font-family:Georgia;   
                font-size:65px;
                text-decoration: none ;
                font-weight: bold ;
                line-height: 100px ;
                padding:30px;
                color:#A67E2E;
            
            }

/* texte du logo au survole*/               
            #textlogo a:hover{
                color:#C79F4B ;
            
            }

/* Menu */              
            #menu {
                height: 50px ;
                background:#3B0405;
                padding:10px;
            
            }
 
            #menu ul li {
                float: left ;
                text-align: center ;
                 width: 140px ;
                line-height: 30px ;
                font-size: 1.5em ;
                font-weight: bold ;
                letter-spacing: 2px ;
                color: #fff ;
                list-style-type: none ; 
            }
            
            #menu li a {
                display:block;
                font-weight: bold ;
                letter-spacing: 2px ;
                color: #C79F4B ;
                text-decoration: none ;
            
            }
            
            #menu  li a:hover {
                color:#A67E2E;
                border-bottom: 6px solid #A67E2E ;
            }

/*Conteneur des deux colonnes */            
            #corps {
                min-height:850px;
                border-right:solid 2px #663E10;
                border-left:solid 2px #663E10;
                border-bottom:solid 3px #663E10;
                padding:5px;
                font-size:95%;
                background:#fff;
            }

/*Colonne de droite */            
            #page {
                clear:both;
                float:left;
                min-height:430px;
                width:480px;
                padding:10px;
                border-right:solid 2px #663E10;
                border-left:solid 2px #663E10;
                border-bottom:solid 2px #663E10;
                border-top:solid 2px #663E10;
                margin:10px;
            }
            
            #page p {
                text-align: justify ;
                text-indent: 2em ;
                line-height: 1.7em ;
            } 

/* Colonne de gauche */
            #page2 { 
            margin-top:30px;
            margin-left:530px;
            margin-right:10px;
            margin-bottom:0px;
              
            }
            
            #page2 p {
                padding-top:0px;
                margin:10px 10px 0px 10px;
                text-align: justify ;
                text-indent: 2em ;
                line-height: 1.2em ;
                font-size:12px;
                
            }
            
            #page2  em {
            line-height: 2.3em ;
            
            }

            .arrondi{
                -moz-border-radius: 10px;
                -webkit-border-radius: 10px;
            
            }
            
            .arrondi2 {
                -moz-border-radius: 10px;
                -webkit-border-radius:10px;
                border-right:solid 2px #663E10;
                border-left:solid 2px #663E10;
                border-bottom:solid 2px #663E10;
                border-top:solid 2px #663E10;
                margin:-8px 0px 0px 430px;
                padding:10px;
            }
            
/* Pied de la page */            
            #pied {
                clear:both;
                margin: 3px;
                padding:10px;
                line-height: 23px ;
                text-align: right ;
                color: #3B0405 ;
                background: #C79F4B ;
                font-size:15px;
                
            }
</style>

</head>
<body>
<div id="global">
    <div id="logo">
       <span id="textlogo"><a href="#">Mon premier site !</a></span>
    </div>
    <div id="menu">
        <ul>
            <li><a href="#">Accueil</a></li>
            <li><a href="#">News</a></li>
            <li><a href="#">A Propos</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
 </div>
   
    <div id="corps">
                <h1>Bienvenue sur mon site</h1>
    <div class="arrondi" id="page">
    <span><em>Les 5 dernieres News</em></span>
    <p>Victus universis caro ferina est lactisque abundans copia qua sustentantur, et herbae multiplices et siquae alites capi per
    aucupium possint, et plerosque mos vidimus frumenti usum et vini penitus ignorantes.</p>
    
    <p>Alios autem dicere aiunt multo etiam inhumanius (quem locum breviter paulo ante perstrinxi) praesidii adiumentique causa,
    non benevolentiae neque caritatis, amicitias esse expetendas; itaque, ut quisque minimum firmitatis haberet minimumque virium,
    ita amicitias appetere maxime; ex eo fieri ut mulierculae magis amicitiarum praesidia quaerant quam viri et inopes quam opulenti et calamitosi
    quam ii qui putentur beati.</p>
    
    <p>Nihil morati post haec militares avidi saepe turbarum adorti sunt Montium primum, qui divertebat in proximo,
    levi corpore senem atque morbosum, et hirsutis resticulis cruribus eius innexis divaricaturn sine
    spiramento ullo ad usque praetorium traxere praefecti.</p>
    <p>Nihil morati post haec militares avidi saepe turbarum adorti sunt Montium primum, qui divertebat in proximo,
    levi corpore senem atque morbosum, et hirsutis resticulis cruribus eius innexis divaricaturn sine
    spiramento ullo ad usque praetorium traxere praefecti.</p>
        <p>Nihil morati post haec militares avidi saepe turbarum adorti sunt Montium primum, qui divertebat in proximo,
    levi corpore senem atque morbosum, et hirsutis resticulis cruribus eius innexis divaricaturn sine
    spiramento ullo ad usque praetorium traxere praefecti. Nihil morati post haec militares avidi saepe turbarum adorti sunt Montium primum, qui divertebat in proximo, levi corpore senem atque morbosum, et hirsutis resticulis cruribus eius innexis divaricaturn sine
    spiramento ullo ad usque praetorium traxere praefecti.
        Nihil morati post haec militares avidi saepe turbarum adorti sunt Montium primum, qui divertebat in proximo,
    levi corpore senem atque morbosum, et hirsutis resticulis cruribus eius innexis divaricaturn sine eius innexis divaricaturn sine eius innexis divaricaturn sine eius innexis divaricaturn sine

</p>
    </div>
    
        <div id="page2">
           <p class="arrondi2">  
            <em>Mon compte</em><br/>
            Nihil morati post haec militares avidi saepe turbarum adorti sunt Montium primum, qui divertebat in proximo,
        levi corpore senem atque morbosum, et hirsutis resticulis cruribus eius innexis divaricaturn sine
        spiramento ullo ad usque praetorium traxere praefecti.
        Nihil morati post haec militares avidi saepe turbarum adorti sunt Montium primum, qui divertebat in proximo,
        levi corpore senem atque morbosum, et hirsutis resticulis cruribus eius innexis divaricaturn sine
        spiramento ullo ad usque praetorium traxere praefecti.<br/>
            Nihil morati post haec militares avidi saepe turbarum adorti sunt Montium primum, qui divertebat in proximo,
        levi corpore senem atque morbosum, et hirsutis resticulis cruribus eius innexis divaricaturn sine
        spiramento ullo ad usque praetorium traxere praefecti.
        Nihil morati post haec militares avidi saepe turbarum adorti sunt Montium primum, qui divertebat in proximo,
        levi corpore senem atque morbosum, et hirsutis resticulis cruribus eius innexis divaricaturn sine
        spiramento ullo ad usque praetorium traxere praefecti.
        </p>
           <p class="arrondi2">
            <em>Les derniers commentaires</em><br/>
            Nihil morati post haec militares avidi saepe turbarum adorti sunt Montium primum, qui divertebat in proximo,
        levi corpore senem atque morbosum, et hirsutis resticulis cruribus eius innexis divaricaturn sine
        spiramento ullo ad usque praetorium traxere praefecti.
Nihil morati post haec militares avidi saepe turbarum adorti sunt Montium primum, qui divertebat in proximo,
    levi corpore senem atque morbosum, et hirsutis resticulis cruribus eius innexis divaricaturn sine
    spiramento ullo ad usque praetorium traxere praefecti.
    Nihil morati post haec militares avidi saepe turbarum adorti sunt Montium primum, qui divertebat in proximo,
    levi corpore senem atque morbosum, et hirsutis resticulis cruribus eius innexis divaricaturn sine
    spiramento ullo ad usque praetorium traxere praefecti. ullo ad usque praetorium traxere praefecti.
        </p>
        </div>

</div><!-- on ferme Global  -->
<div id="pied">
    <p>Design by n3o </p>
<p>All rights reserved ® 2010<p>
</div>
</body>
</html>

Par avance Merci a vous !!!
Modifié par nux02160 (20 Apr 2010 - 13:31)

Mikachu

20 Apr 2010 à 13:36

Salut,

Probablement un dépassement d'élément flottant Smiley cligne

nux02160

20 Apr 2010 à 15:14

Bonjour merci a vous mais je pense que j'ai bien placer un clear both pour evité cela.

Chok71

20 Apr 2010 à 15:24

Met un overflow: hidden à #corps ou #page.

nux02160

20 Apr 2010 à 15:49

Avec overflow sur corps sa passe Smiley smile

je vais regarder a quoi ça sert merci a vous

nux02160

20 Apr 2010 à 16:12

En faite je me rend compte que mon css et peut etre pas terrible quand meme j'aurais peut etre du creer de div colonne en float left dans la div de gauche recréer un div avec un attribut class arrondi et dans la div de droite faire un div colonne avec deux div a l'interieur ayant une classe arrondi peut etre plus clair niveau organisation ?

Sujet clos

CSS et mise en forme, CSS3

Probleme avec un design