28172 sujets

CSS et mise en forme, CSS3

Alignement des elements css avec position relative et absolute

Bonjour,
en cours de dev pour site internet que je souhaite développer avec div et css.
J'ai donc une div midsection qui contient un div midleft et un div midright (droit et gauche donc).
Jusque la, pas de soucis. Par contre, j'ai besoin pour raison de mise en page d'avoir le div midright en 'position:relative' pour que les contenus du div "orangemenu" soient en position:absolute;.
Tout fonctionne et s'aligne comme souhaité jusqu'à ce que l'on passe dans les div qui suivent en dessous :
Le div "lowersection" vient s'afficher juste en dessous de mon "presentation" sans tenir aucunement compte de la hauteur du "orangeMenu" malgré un div clear both entre les deux, rien y fait, c'est comme si l'orange menu n'existait pas.

Bref, gros soucis, Qu'est-il advenu de nos bonnes vieilles tables?


<body>
    
    <div class="midSection">
    <div class="midLeft">
    	<!-- menu !-->
    	<div>
            Menu
    	</div>
        
        <!-- content -->
        <div>
        Presentation
        </div>
        
    <!-- ends midLeft -->
    </div>
    
    <div class="midRight">
    
   	  <div class="OrangeMenus">
    
    		<div class="orangeArrow"><img src="../source/images/arrowOrange.png" width="100%"alt="qualivox arrow" />
    		<!-- ends div orange arrow -->
    		</div>
        
    		<div class="orangeInfo">
    			<a class="link">Les actus</a><br />
        		<a class="link">Les t&eacute;moignages clients</a><br />
        		<a class="link">Autres liens</a>
        	<!-- ends div orange info -->
        	</div>
        <div class="orangeArrow3"><img src="../source/images/arrowOrange.png" width="100%"alt="qualivox arrow" />
    		<!-- ends div orange arrow -->
    	</div>
        
        <div class="orangeInfo2">
    			<a class="link">Nous contacter</a><br />
        		<a class="link">Postuler</a><br />
        		<a class="link">Connectez-vous</a>
        	<!-- ends div orange info -->
        	</div>
    	<!-- ends orange menu -->   
      </div>
    <!-- ends midRight -->  
    </div>

    <!-- ends midsection -->	
    </div>
    <div style="clear:both;"></div> 
           
<div class="lowerSection">lowerSection</div>
</body>
</html>


@charset "UTF-8";
/* CSS Document */


/* layout */
body {
	background-image:url(../source/backgroundStripes.jpg);
	background-color:#666;
	background:no-repeat;
	width:90%;
	margin:auto;
	font-size:.9em;
	margin-top:10px;
}

.banner{
	width:90%;
	margin:auto;
	clear:both;
}
.midSection{
	width:100%;
	float:left;
	border:1px solid #000;
	clear:both;
	display:block;
}
.lowerSection{
	width:100%;
	float:left;
	clear:both;
	border:1px solid #000;
	display:block;
}
.WhiteBackground{
	width:100%;
	
}
.autoMargin{
	margin-left:7%;
	background-color:#FFF;
}
.orangeInfo{
	position:absolute;
	width:100%;
	top:0;
	left:0;
	background-color:#e74b20;
	text-align:left;
    padding: 10px 0 10px 10px;
	z-index:1000;
}

.orangeArrow{
	position:absolute;
	top:0;
	left:0;
	width:113%;
	z-index:2000;
}
.orangeInfo2{
	position:absolute;
	width:100%;
	top:280px;
	background-color:#e74b20;
	text-align:left;
    padding: 10px 0 10px 10px;
	z-index:1000;
}
.orangeArrow2{
	position:absolute;
	top:140px;
	left:0;
	width:113%;
	z-index:2000;
}
.orangeArrow3{
	position:absolute;
	top:280px;
	left:0;
	width:113%;
	z-index:2000;
}
.cloudtag{
	position:absolute;
	width:100%;
	z-index:100;
	top:70px;
	background-color:#e74b20;
	padding: 10px 0 10px 10px;
	text-align:center;
}
/* class 2  */
.midLeft{
	float:left;
	background-color:#FFF;
	width:55%;
	margin-left:5%;
}
.midRight{
	float:left;
	width:34%;
}
.OrangeMenus{
	position:relative;
}

/* typos  */
.link {
	font-size: 1em;
	font-family: "Tahoma", Trebuchet MS, Arial, sans-serif;
	line-height: 18px;
	color:#FFF
}
upload/49077-sc1.jpg
Si ton "orangemenu" est en absolute, c'est normal qu'il ne soit pas pris en compte par ton footer. Je n'ai pas bien saisi la mise en page que tu recherche, mais moi je ferais ainsi:
<div id="main">
    <div id="content"></div>
    <div id="menuorange">
        <div id="menuhaut"></div>
        <div id="menubas"></div>
    </div>
</div>
<div id="footer"></div>

#main {
    width:900px;
}

#content {
    width:700px;
    display:inline-block;
}

#menuorange {
    width:200px;
    display:inline-block;
}
Sujet clos
Aller à