28173 sujets

CSS et mise en forme, CSS3

Problème de largeur avec un layout relatif/absolu

Salut,

Est-ce que quelqu'un pourrait m'aider? Je cherche un moyen de faire en sorte que le contenu (libelé & radios) de mon 'popup' rose ne s'affiche que sur une seule ligne sans specifier une largeur pour le div parent car ce contenu va varier en fonction du contexte.

Voici mon code :


<!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>
	<style>
		* {
			padding:0;
			margin:0;
		}
		body {
			font-size: 11px;
		}
		select, input, caption, label, td, th, span, table, form, fieldset {
			font-family: Arial,Helvetica,sans-serif;
		}
		#menubar {
			margin-top: 15px;
			background-color: rgb(238, 238, 238); 
			border: 1px solid rgb(170, 170, 170); 
			padding: 3px; 
			width:500px;
		}
		.spacer {
			clear: both;
		}
		.button .button_left,
		.button .button_right {
			float:left;
			height:22px;
			width:1px;
			background-color: lightblue;
		}
		.button .button_middle {
			float:left;
			height:22px;			
			background-color: lightblue;
		}
		.button p {
		    font-size: 11px;
		    font-weight: normal;
		    padding: 4px 8px;
		}
		.popup_placeholder {
			position: absolute;
			top: 10px;
			right: 10px;			
		}
		.popup_placeholder .popup_outer {			
			border: 1px solid gray;
			-moz-box-shadow: 4px 5px 6px rgba(0, 0, 0, 0.3);
			-webkit-box-shadow: 4px 5px 6px rgba(0, 0, 0, 0.3);
		}
		.popup_placeholder .popup_inner {
			background-color: lightgray;
			padding:10px;
			/*width: 200px;
			height: 50px;*/
		}		
	</style>
  </head>
  <body>
	<div id="menubar">
		<div style="float:left;">	
			<a href="#">
				<div class="button">
					<div class="button_left"></div>
					<div class="button_middle">
						<p><span>Button1</span></p>
					</div>
					<div class="button_right"></div>
					<div class="spacer"></div>
				</div>
			</a>		
		</div>
		<div style="position:relative; float:right;">	
			<a href="#">
				<div class="button">
					<div class="button_left"></div>
					<div class="button_middle">
						<p><span>Button2</span></p>
					</div>
					<div class="button_right"></div>
					<div class="spacer"></div>
				</div>
			</a>
			<div class="popup_placeholder">
				<div class="popup_outer">
					<div class="popup_inner">
						<div style="background-color: pink; padding:5px;">
							<h3>dsqdq</h3>
							<div>
 
<span style="float:left;">Choose!</span>
 
<span style="float:left;">
									<div style="float: left;">
										<input id="first" type="radio" value="0" checked="checked" name="option">
										<label for="first">Option1</label>
									</div>
									<div style="float: left;">
										<input type="radio" id="second" value="1" name="option">
										<label for="second">Option2</label>
									</div>
								</span>
 
	<div class="spacer"></div>
							</div>							
						</div>	
					</div>
				</div>
			</div>		
		</div>
		<div style="margin: 0 5px; float:right;">	
			<a href="#">
				<div class="button">
					<div class="button_left"></div>
					<div class="button_middle">
						<p><span>Button3</span></p>
					</div>
					<div class="button_right"></div>
					<div class="spacer"></div>
				</div>
			</a>		
		</div>
		<div class="spacer"></div>
	</div>	
 
  </body>
</html>


Merci d'avance,

CN
Attention, l'élément <span>, qui est de type en ligne, n'accepte pas d'élément de type bloc comme enfant.
Et encore, avec un style en ligne ainsi tu fonce droit vers le mur !

Révise ton code pour commencer, ce sera plus facile ensuite.
Oui dans ma version la plus récente j'ai remplacé les spans mais ça ne change rien Smiley decu

En fait j'ai l'impression que la largeur du 'popup' absolu se limite à celle du div parent (dans ce cas le boutton). De ce fait ça marche si je place le 'popup' dans le div de la barre de menu (car il fait 500px) mais en faisant ceci sa position est relatif à la barre de menu et non au boutton. Peut-être qu'avec du Javascript il y a un moyen positionner son top et right en fonction d'un autre div que le parent...

(edit:) Autre problème : Sous IE les bouttons dans le popup se comportent de façon bizarre!


<html xmlns="http://www.w3.org/1999/xhtml">
<head>


    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            font-size: 11px;
        }

        select, input, caption, label, td, th, span, table, form, fieldset {
            font-family: Arial, Helvetica, sans-serif;
        }

        #menubar {
            margin-top: 15px;
            background-color: rgb(238, 238, 238);
            border: 1px solid rgb(170, 170, 170);
            padding: 3px;
            width: 500px;
        }

	.spacer:after
	{
		content: ".";
		display: block;
		visibility: hidden;
		clear: both;
		height: 0;
		font-size: 0.1em;
		line-height: 0;
	}

    
        .button .button_left,
        .button .button_right {
            float: left;
            height: 22px;
            width: 1px;
            background-color: lightblue;
        }

        .button .button_middle {
            float: left;
            height: 22px;
            background-color: lightblue;
        }

        .button p {
            font-size: 11px;
            font-weight: normal;
            padding: 4px 8px;
        }

        .popup_placeholder {
            position: absolute;
            top: 10px;
            right: 10px;
        }

        .popup_placeholder .popup_outer {
            border: 1px solid gray;
            -moz-box-shadow: 4px 5px 6px rgba(0, 0, 0, 0.3);
            -webkit-box-shadow: 4px 5px 6px rgba(0, 0, 0, 0.3);
        }

        .popup_placeholder .popup_inner {
            background-color: lightgray;
            padding: 10px;
            /*width: 200px;
               height: 50px;*/
        }
    </style>
</head>
<body>
<div id="menubar">
    <div style="float: left;">
        <a href="#">
            <div class="button">
                <div class="button_left"></div>
                <div class="button_middle">
                    <p><span>Button1</span></p>
                </div>
                <div class="button_right"></div>
                <div class="spacer"></div>
            </div>
        </a>
    </div>
<div style="margin: 0pt 0 0 5px ; float: right;">
        <a href="#">
            <div class="button">
                <div class="button_left"></div>
                <div class="button_middle">
                    <p><span>Button3</span></p>
                </div>
                <div class="button_right"></div>
                <div class="spacer"></div>
            </div>
        </a>
    </div>
    <div style="position: relative; float: right;">
        <a href="#">
            <div class="button">
                <div class="button_left"></div>
                <div class="button_middle">
                    <p><span>Button2</span></p>
                </div>
                <div class="button_right"></div>
                <div class="spacer"></div>
            </div>
        </a>

        <div class="popup_placeholder">
            <div class="popup_outer">
                <div class="popup_inner">
                    <div style="background-color: pink; padding: 5px; width: 200px;">
                        <h3>dsqdq</h3>

                        <div>

                            <div style="float: left;">Choose!</div>
								
				<div style="float: left;">
				    <div style="float: left;">
                                        <input type="radio" id="first" value="0" checked="checked" name="option">
                                        <label for="first">Option1</label>
                                    </div>
				    <div style="float: left;">
                                        <input type="radio" id="second" value="1" name="option">
                                        <label for="second">Option2</label>
                                    </div>
					<div class="spacer"></div>
				</div>
				<div class="spacer"></div>
                        </div>
                    </div>
                    <div style="background-color: PeachPuff; padding: 5px;">
               	
                       
<div style="float:left;"> <a href="#">
            <div class="button">
                <div class="button_left"></div>
                <div class="button_middle">
                    <p><span>Button2</span></p>
                </div>
                <div class="button_right"></div>
                <div class="spacer"></div>
            </div>
        </a></div> 
<div style="float:left;margin-left:5px;"> <a href="#">
            <div class="button">
                <div class="button_left"></div>
                <div class="button_middle">
                    <p><span>Button2</span></p>
                </div>
                <div class="button_right"></div>
                <div class="spacer"></div>
            </div>
        </a></div>      
	<div class="spacer"></div>		

</div>
                    
                </div>
            </div>
        </div>
    </div>
    <div style="margin: 0pt 5px; float: right;">
        <a href="#">
            <div class="button">
                <div class="button_left"></div>
                <div class="button_middle">
                    <p><span>Button3</span></p>
                </div>
                <div class="button_right"></div>
                <div class="spacer"></div>
            </div>
        </a>
    </div>
    <div class="spacer"></div>
</div>

</body>
</html>

Modifié par ChambreNoire (17 Dec 2010 - 11:40)
J'ai souligné le problème du span dans le but que tu corriges des erreurs dans ton code avant de penser à débugger. C'est la première chose à faire.

Je crois que le mieux dans ton cas c'est de revoir le positionnement de tes blocs. De plus, il y a dans ton code des float: left inutiles et sans avoir tout analysé par manque de temps, j'ajouterais des div inutiles...

Faire quelques lectures pour réviser ton ça.
Guide de survie du positionnement css
Float, le grand bluff
Merci pour les liens. C'est vrai que mes connaissances css ne sont pas très pointus! Je vais lire tout ça puis revoir mon code. Par-contre si tu pourrais m'indiquer les float superflus que tu as remarqués ce serait cool.

CN Smiley confus
Bah, pour les superflus, il te suffit de tester en les enlevant un à la fois et tu verras le résultat. Smiley cligne
Sujet clos
Aller à