risoluzioni e css

risoluzioni e css postato il 11/12/2015 14:49:30 nel forum programmazione, gdrcd, open source, hosting e modificato da atlantis_staff il 11/12/2015 14:55:26

sto impazzendo dietro le risoluzioni ed i css, ho fatto un layout su tre colonne classico, ma con una risoluzione 1280x1024:

div#layout-center
{
position: absolute;
top: 0px;
left: 250px;
right: 255px;
height: 98.5%;
}

div#layout-left
{
position: absolute;
left: 0px;
top: 0px;
height: 98.5%;
width: 255px;
}

div#layout-right
{
position: absolute;
right: 0px;
height: 98.5%;
width: 255px;
}

e fin qui tutto bene, il problema mi sorge quando io inserisco elementi all'interno di questi div, esempio nella parte al centro ciò:

div#box-center
{

width: 100%;
height: 100%;
background: url(.....) no-repeat center top;
position: absolute;
z-index: 3;
top: 150px;
right:0px;
}

l'immagine dello sfondo ad esempio mi si soprappone ad altre immagini sempre presenti nel div centrale ed il contenuto di questo div con box-center mi si incasina tutto:

div#maps-principale
{

width: 100%;
height: 100%;
background-image: url(......);
background-repeat: no-repeat;
position: absolute;
z-index: 2;
top: 22px;
left:78px;
}

ed ecco l'html...

ed ecco l'effetto:

cosa sbaglio?

The Coven ↗
Negli scorci di luce delle paludi della Louisiana fioriscono nuove ombre. Estend e la Congrega ti aspettano per vivere emozionanti avventure!

quota

Pagine → 1

dyrr

SCRIVI

11/12/2015 15:56:42

qui c'è una riproduzione del tuo layout aggiungendo solo dei colori di sfondo per rendere evidenti le misure dei vari div:

https://jsfiddle.net/0xrruy9d/ ↗ https://jsfiddle.net/0xrruy9d/

div#maps-principale
{

width: 100%;
height: 100%;
background-image: url(......);
background-repeat: no-repeat;
position: absolute;
z-index: 2;
top: 22px;
left:78px;
}

se dai

width: 100%;
left:78px;

height: 100%;
top: 22px;

il div ti sborderà di sicuro perchè in pratica tu stai dando al div le dimensioni del 100% del contenitore padre e poi lo stai spostando nelle due direzioni.

Se vuoi spostarlo in una direzione e far si che non sbordi dal bordo opporso le soluzioni sono due:

o abbini allo spostamento la proprietà opposta tipo:

left:78px;
right:0;

oppure usi la funzione dei css calc();

left:78px;
width:calc(100% - 78px);

Seconda Era ↗
Vaste terre coperte di ombre e misteri, dove ogni eroe scrive la storia del Mondo di Eidel. Seconda Era, Play By chat

quota

atlantis_staff

SCRIVI

11/12/2015 17:00:30

grazie tanto della risposta, ho fatto un po di prove con quel sito che mi hai dato, è fantastico, ed ho visto che anche gli altri div sbordavano anche se graficamente non si vedevano, adesso non posso provarlo ma lunedi appena posso provo subito, dal sito ho provato cosi

div#layout-center
{
position: absolute;
top: 0px;
left: 250px;
right: 255px;
height: 98.5%;
background-color:rgba(128,128,128,1);
}
div#box-center
{

width: 100%;
height: calc(100% - 153px);
position: absolute;
z-index: 3;
top: 150px;
right:0px;
background-color:rgba(255,0,0,0.5);
}

div#maps-principale
{

width:calc(100% - 83px);
height: calc(100% - 24px);
background-image: url(......);
background-repeat: no-repeat;
position: absolute;
z-index: 2;
top: 22px;
left:78px;
background-color:rgba(0,255,0,0.5);
}

e adesso tutti i div sono ordinati uno dentro l'altro, grazie ancora lunedi ti faccio sapere.