Problema width di 5 div

**pulpin2004** · 04-09-2010, 15:51

Salve,

Nei siti web che ho realizzato me la sono sempre cavata (qualche volta grazie a lunghe ricerche su internet) ma questa volta, dopo lunghe ricerche, non sono riuscito a risolvere il mio problema (le ho provate in tutti i modi ma non sono riuscito).

il problema è il seguente... avevo in mente un'idea su un template da realizzare ma subito all'inizio mi sono trovato a dover creare un bordo (chiamiamolo così, una cornicetta per intenderci) composta, nel top, da due div alle estremità contenenti gli "angoli" della cornice" (quindi di dimensioni fisse da 20x20 pixel), tra questi due div ce ne sono altri tre.... due senza alcuna larghezza mentre quello centrale con una dimensione fissa di 900x20.

tra questi 5 div, i 3 con le dimensioni fisse contengono come background delle immagini che fanno parte della cornice, quindi la loro dimensione non deve assolutamente variare, insomma, sono di dimensioni fisse... i restanti due con ID top_c_sx e top_c_dx devono occupare lo spazio restante...
questi 5 div sono all'interno di un'altro div la cui larghezza dovrà (per ora è in percentuale ma poi ci lavorerò su) essere di una certa percentuale rispetto la pagina ma non dovrà essere inferiore ad un tot (sulla larghezza minima so che IE si comporta diversamente che dagli altri browser ma non è un problema, e in ogni caso per ora non mi interessa, risolverò dopo quel problema)

il problema sono proprio quei due div fluidi, perchè dovrebbero occupare tutto lo spazio restante ma invece non riesco... dargli un valore in % non li visualizza correttamente, ho provato attraverso i margini ma non sono nemmeno riuscito così...

dato che a spiegarsi risulta fin troppo complesso (eheh :P ) vi posto qui sotto il codice (HTML e CSS) così da lasciare l'interpretazione del codice a voi... nel caso non si capisse bene che volevo fare tenterò di spiegarvelo meglio

grazie in anticipo a chi mi risponderà e/o aiuterà

P.S.: in questi due giorni ho cercato e ricercato su internet ma il problema è restato, ci tengo a precisarlo ;-)

P.P.S.: mi rendo conto che magari dovevo postare nella sezione del CSS però ho anche il sospetto che in questo caso sia più opportuno utilizzare tabelle e non 5 div (preferirei l'utilizzo dei DIV).
nel caso in cui si ritenga più giusta la sezione CSS allora mi scuso in anticipo e spostatemi pure questo topic nell'altra sezione grazie...

HTML:

codice:

<div id="container">

	<div id="top">
		<div id="top_dx"></div>
		<div id="top_c_sx"></div>
		<div id="top_c"></div>
		<div id="top_c_dx"></div>
		<div id="top_sx"></div>
	</div>

</div>

CSS:

codice:

div#container{
	width: 90%;
	height: 50px;
	background-color: red; /*utilizzato solo per visualizzare la grandezza del DIV*/
    margin: 0px auto;   /*centra negli altri browsers*/
    text-align: left;   /*ripristina l' allineamento*/
    }
	
	
	
div#top{
    width: 100%;
	background-color: green; /*utilizzato solo per visualizzare la grandezza del DIV*/
	height: 50px;
    }
	
div#top_dx{
    width: 20px;
	height: 20px;
	background-image: url(img/top_dx.png);
	background-image: no-repeat;
	float: left;
    }
div#top_c_sx{
	height: 20px;
	background-image: url(img/top_c_sx.png);
	background-image: repeat-x;
	float: left;
    }
div#top_c{
    width: 900px;
	height: 20px;
	background-image: url(img/top_c.png);
	background-image: repeat-x;
	float: left;
    }
div#top_c_dx{
	height: 20px;
	background-image: url(img/top_c_dx.png);
	background-image: repeat-x;
	float:left;
    }
div#top_sx{
    width: 20px;
	height: 20px;
	background-image: url(img/top_sx.png);
	background-image: no-repeat;
	float: left;
    }

**bionicoz** · 04-09-2010, 20:31

Se non devi usare background-images trasparenti prova così, in caso contrario devi far ricorso a javascript.

Codice PHP:


<!DOCTYPE html>

<html lang="">

<head>

<meta charset="utf-8">

<title></title>

<meta name="description" content="" />

<meta name="keywords" content="" />

<meta name="robots" content="" />    

<style>

html,body{

        width:100%;

        background-color: black;

}

#container{

    margin: 0 auto;

    width:80%;

    min-width:300px;

    height:400px;

    background-color:grey;

}

#top{ 

        position: relative;

    height:40px;

    width:100%;

    background-color:red;

}

#top_c_dx{

        height:inherit;

        width:50%;

        background-color:yellow;

        float:right;

}

#top_dx,#top_sx,#top_c {

        width:40px;

        background-color:blue;

        height:40px;

}

#top_dx{

        float:right;

}

#top_sx{

        float:left;

}



#top_c {

        position:absolute; left:50%; 

        margin-left: -100px; /*metà della sua larghezza*/

        width:200px;

        height:40px;

        background-color:navy;

}

</style>

</head>

<body>

<div id="container">

    <div id="top">

        <div id="top_sx"></div> 

        <div id="top_c_dx">

            <div id="top_dx"></div>

        </div>

        <div id="top_c"></div>

    </div>

</div>

</body>    

</html>

Ho testato con Safari,Firefox,Opera,Chrome,IE8,IE7,IE6. Qui una versione live.
Ciao, Bio.

**pulpin2004** · 04-09-2010, 20:50

Grazie mille... è proprio quello che mi serviva... ;-)

problema risolto si può chiudere

Discussione: Problema width di 5 div

Strumenti discussione

Ricerca discussione

Visualizza

Problema width di 5 div

Permessi di invio