[HTML/CSS]affiancare 2 div su IE e FF

Pubblicità
Ansem

Ansem

Utente Èlite
Messaggi
3,197
Reazioni
31
Punteggio
58
SAlve,qualcuno mi sa dire come si fa ad affiancare due div su IE e firefox?,ho provato a cercare,ma non ci sono riuscito ho provato con l'overflow,float left/right,padding.l'unico che ha fatto qualcosa era il display:inline,ma poi si vede male lo stesso
Vi metto il testo dei tre div che mi interessano.Content è quello che contiene i due div menù(il div a sinistra) e galleria(quello a destra)
.content {width:600px;
position:relative;
left:350px;
margin-top:10px;
display:inline;}

#menu {margin-top:10px;
width:200px;
height:400px;
top:30px;
font-family:arial,verdana,sans-serif;
line-height:19px;
float:left;}

#galleria{position:relative;
width:154;
height:430;
float:left;
left:200px;
top:50px;
padding-left:200px;}
Clicca per espandere...
 
In poche parole vorresti vere il menu a sinistra ed il contenuto della galleria a destra, tutto dentro un div class="content", giusto?...

Allora, anche se non rispetto la tua notazione nel css, ecco un esempio del foglio di stile:
Codice: 
/* per regolare l'head */
*{margin:0; padding:0;}
ul{list-style:none;}
body{  font-family:arial; font-size:11px; line-height:14px; color:#555555;/*687075;*/ background: url(images/fill.gif) 0 0 repeat-x #4F5762;}
img { border:0;}

.main {width:100%; margin:auto;}

/* ..... */
.side_bar { float:left; width:241px; margin:0 0 0 -241px;}
.column_center{float:left; width:100%;}
.indent_center { padding:0 0 0 0; margin:0 241px 0 0;}
.clear{clear:both;}
.w100 { width:100%;}
.h100 { height:100%;}

.content { background:#3C424C; margin:0 71px 0 73px;}
.content .indent { margin:0 7px 0 7px; padding:33px 30px 27px 50px; background:#FFFFFF;}

.side_bar .inside{ padding:2px 3px 0 3px; background:#E1F0F7;}

.widget_style { margin:0 0 0 0; padding:0 0 35px 0;}
#categories.widget_style ul {margin:20px 0 0 18px;}
#categories.widget_style li { font-size:1.18em; line-height:1.01em; color:#555555;/*687075;*/ background:url(images/arr.gif) 0 0 no-repeat; padding:3px 0 18px 25px;}
#categories.widget_style li a { font-size:1.01em; line-height:1.01em; color:#555555;/*687075;*/ text-decoration:none;}
#categories.widget_style li a:hover { text-decoration:underline;}


/*.....*/

...e adesso un esempio dell'html (col menu a destra):

Codice: 
<!-- da qui inizia la tua pagina, subito dopo <body> -->
<div class="main">

<!-- qui potresti inserire altri div -->

        <div class="content"> 
            <div class="indent"> 
                <div class="w100">
<!-- main content start -->
             <div class="column_center"> 
                <div class="indent_center">
                [MAIN]
                </div> 
            </div> 
<!-- main content end -->

<!-- side content start -->
        <div class="side_bar"> 
            <div class="inside"> 
                <div class="w100"> 
            		<div class="widget_style" id="categories"> 
                	[MENU_DX]
            		</div>
		</div> 
    	</div> 
	</div>
<!-- side content end -->
                    <div class="clear"></div> 
                </div> 
            </div>

<!-- qui potresti inserire altri div -->

</div>
<!-- qui finisce la tua pagina, segue </body>-->

Come hai già notato, [MAIN] si traduce come la parte in quale dovresti inserire il tuo contenuto principale e [MENU_DX] si traduce come parte menu situato a destra. Se vuoi invertire la parte sinistra con la destra, basta mettere quello che ho indicato come "side content" sopra "main content" e dovrebbe andare a posto. Per ulteriori customizzazioni basta cambiare i valori nel ".side_bar { float:left; width:241px; margin:0 0 0 -241px;}" per quello che riguarda width e margin (come noti, hai un margin negativo uguale al valore width)...

PS: spero di non aver lasciato per strada qualche id o class...
 
Pubblicità
Pubblicità
Indietro
Top