Comment faire div développer tout le chemin à droite

La page de démonstration: CLICK HEREComment faire div développer tout le chemin à droite

J'ai fait une photo pour montrer: alt text

Comme il est clairement vu dans l'image, il y a un écart de la div left_bg et le div middle_bg. Le left_bg n'a pas de contenu, et sa largeur doit être fluide et s'adapter à l'intérieur de son conteneur div top-container. Juste pour aider à démontrer l'écart que je l'ai mis left_bg à width:500px. Cependant, veuillez noter que la largeur doit être fluide. Le div middle_bg sera également fluide, car il permettra de texte différent plus ou moins long.

Comment puis-je me débarrasser de cet espace et permettre left_bg de s'adapter?

Mise à jour

Je pense que peut-être en utilisant le CSS comme une table accomplirait ce que je suis après. J'ai essayé de peaufiner et déconner mais je ne pouvais pas vraiment le faire fonctionner. J'ai mis 100 rep bounty pour m'aider avec ce problème.

Source

2010-08-28 ParoX

en fait, vous avez un problème beaucoup plus délicat là-bas avec l'arrière-plan derrière les coins arrondis –

thats la prochaine @ Sam question :) – ParoX

Je pense que vous faites peut-être ce plus difficile pour vous-même que besoin d'être, * trois * divs à des fins d'information? –

l'utilisation des tables serait la meilleure façon de le faire

<table cellspacing="0" cellpadding="0" style="width: 100%; padding: 0pt; margin: 0pt;"> 
    <tbody> 
     <tr align="top"> 
      <td style="width: 100%; height: 85px;"> 
       <div class="left_bg"> 
       </div> 
      </td> 
      <td style=""> 
       <div class="middle_bg"> 
        <p> 
         Michicraft Boats</p> 
       </div> 
      </td> 
      <td> 
       <div class="right_bg"> 
       </div> 
      </td> 
     </tr> 
     <tr> 
      <td> 
      </td> 
      <td> 
       <div id="top-container-links"> 
        <a href="#">Find Nearest Dealer</a> | &nbsp;<a href="#">Request a Quote</a></div> 
      </td> 
      <td> 
      </td> 
     </tr> 
    </tbody> 
</table>

et changer votre code CSS à

#top-container .left_bg 
    { 
     background: none repeat scroll 0 0 #A3AFC6; 
     border-color: white -moz-use-text-color white white; 
     border-style: solid none solid solid; 
     border-width: 1px 0 1px 1px; 
     height: 85px; 
     width: 100%; 
     -webkit-border-radius: 20px 0 0 20px; 
     -moz-border-radius: 20px 0 0 20px; 
     border-radius: 20px 0 0 20px; 
     behavior: url(/PIE/PIE.htc); 
    } 
    #top-container .middle_bg 
    { 
     background: none repeat scroll 0 0 #A3AFC6; 
     border-top: 1px solid white; 
     float: right; 
     height: 44px; 
     margin-top: -42px; 
     text-align: center; 
     white-space: nowrap; 
    }

Source

2010-09-01 18:47:41

La largeur doit être fluide. 514px fonctionne quand 'middle-bg' est Michicraft Boats. Mais quand je fais le texte "test" la largeur doit alors être supérieure à 514px ... donc ce n'est pas fluide. – ParoX

ont édité ma réponse, j'ai utilisé des tables qui, selon moi, est le moyen le plus facile d'atteindre ce –

Cela fonctionne. Je peux même utiliser CSS 'display: table' et' display: table-cell' pour imiter cette fonctionnalité. Bien sûr, il ne fonctionne pas pour IE6 et IE7. Je n'aime vraiment pas le balisage supplémentaire de l'utilisation d'une table, mais il semble que la seule option. Je donne cette question un autre jour avant que j'accepte le fait que je dois utiliser les vieilles tables de mode et accepter votre réponse – ParoX

#top-container .middle_bg { 
    width: 263px; 
}

Depuis #top-container est 775px, .left_bg est de 500 avec une marge gauche de 1 et .righ_bg est 10px avec une marge droite de 1.

Source

2010-08-28 10:58:23

Got it bâton à droite en réglant la largeur de #top-container .left_bg à 514px .

Edit:

changement #top-container .middle_bg p de positionnement absolu:

position:absolute; 
right:2px; 
bottom:0px;

et ajouter dans #top-container

position:relative;

également garder #top-container .left_bg largeur 514px.

Source

2010-08-28 11:00:28 Youssef

S'il vous plaît voir modifier :) – ParoX

j'ai édité, s'il vous plaît voir. – Youssef

Votre modification ne fonctionne toujours pas. – ParoX

si vous définissez sa largeur à 514 px, il touche le bleu. si vous voulez aller tout le chemin à droite puis changer # top-conteneur .left_bg

position: absolute; largeur: 773px;

Source

2010-08-28 11:02:40

Je le veux donc il touche le bleu, mais pas dur-coder la largeur po Je veux que le milieu-bg soit fluide. – ParoX

Habituellement, cela se fait en segmentant le div à width: 100% et l'élément lui-même et les éléments à droite flottant.

Source

2010-08-28 11:08:55 2ndkauboy

Cela a du sens, mais cela ne fonctionne pas dans ce cas? – ParoX

Je pense que vous êtes trop compliquer la mise en page de cette zone de navigation.J'ai essayé ceci:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
    <head> 
    <title></title> 
    <style type="text/css"> 
     body, html { 
     background-color: #949dad; 
     padding: 0; 
     } 
     p { 
     margin: 0; 
     padding: 0; 
     } 
     .brand { 
     color:#FFFFFF; 
     background-color: #949DAD; 
     -moz-border-radius:10px 10px 0 0; 
     border:1px solid white; 
     border-bottom-style: none; 
     font-family:Georgia,"Times New Roman",Times,serif; 
     font-size:31px; 
     margin:44px 0 0 0; 
     min-width:215px; 
     padding:5px 10px 0; 
     position:relative; 
     float: right; 
     height: 36px; 
     overflow: visible; 
     } 

     .brand_container { 
     font-size:12px; 
     background-color:#A3AFC6; 
     border: 1px solid white; 
     height:85px; 
     text-align:center; 
     -moz-border-radius:20px 0 0 20px; 
     background:none repeat scroll 0 0 #A3AFC6; 
     float:left; 
     width:800px; 
     padding:0px 5px; 
     margin:0 0 20px 0; 
     } 

     .brand .links { 
     width:100%; 
     float:right; 
     clear:both; 
     margin-top:1px; 
     font-size:11px; 
     font-family:Georgia, "Times New Roman", Times, serif; 
     text-align:center; 
     } 
     .brand .links a{color:#fff; text-decoration:none;} 
     .brand .links a:hover{color:#fff; text-decoration:underline;} 

     .body { 
     margin-top: 105px; 
     width:800px; 
     padding:0px 5px; 
     border: 1px solid white; 
     clear: both; 
     background-color:#A3AFC6; 
     } 
    </style> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
    <script type="text/javascript"> 

    </script> 
    </head> 
    <body> 
    <div class="brand_container"> 
     <div class="brand"> 
     <p>Michicraft Boats</p> 
     <div class="links"><a href="#">Find Nearest Dealer</a> | &nbsp;<a href="#">Request a Quote</a></div> 
     </div> 
    </div> 
    <div class="body"> Content here <br><br><br><br></div> 
    </body> 
</html>

Source

2010-09-02 15:43:15

C'est en effet une approche plus simple si je n'avais pas besoin de la classe 'brand' pour être transparente. À moins qu'il y ait un moyen de forcer un effet de découpe dans CSS, je ne peux pas avoir le 'brand-container' sous la' marque' – ParoX

@BHare, ouais, j'ai vu d'une autre de vos questions que vous allez mettre une image derrière tout ça. Dans ce cas, vous aurez besoin d'une mise en page compliquée. Il pourrait y avoir un moyen de simuler la découpe sans avoir besoin de tant de divs, cependant. –

Comment faire div développer tout le chemin à droite

Répondre

Questions connexes