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?

CRSED: F.O.A.D. ↗
Brutale sparatutto MMO in cui vince l'ultimo giocatore che resta in vita nell'arena! Ogni giocatore sarà accompagnato da armi realistiche e magie!

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);

Left to Survive ↗
Left To Survive è un gioco FPS con un'ambientazione post-apocalittica in cui gli Zombi hanno schiavizzato la Terra e ne hanno preso il controllo!

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.

Dominion Gdr ↗
In una NY con un tessuto sovrannaturale nascosto, la Reggenza Vampirica e il Queens dei Lupi ribollono sotto il Dominio dei Bokor. Quanto durerà la pace?

quota

Discussione seguita da › atlantis_staff

Pagine → 1

Rispondi alla Discussione Aggiungi ai Preferiti Inoltra Discussione Forum Programmazione, GDRCD, Open Source, Hosting Elenco Forum

Articoli, Interviste e altre Risorse!

Giochi di Carte

I giochi Card Game (conosciuti anche come Trading Card Game o Giochi di Carte Collezionabili) consentono di giocare in versione digitale!

MondoMago

Intervista ai gestori di MondoMago.. il play by chat potteriano! Scatena la tua magia!

Vampire GdR

Intervista al gestore di Vampire Gdr il play by forum ambientato nel World of Darkness

Asce e Mazze

Breve manuale sull'utilizzo di asce e mazze nei giochi di ruolo da leggere se utilizzate queste armi distruttive!

risoluzioni e css

Articoli, Interviste e altre Risorse!

Pubblicità

Ultime dal Portale

Pubblicità

Articoli

Pubblicità