Forum PHP Romania - Discutii despre PHP, MySQL, Javascript, AJAX, etc

dechim

Am :
Cod:
<html>
<head>
<style type="text/css">
.divcontainer
{
position: absolute;
top: 100px;
left: 100px;
width: 200px;
height: 300px;
color: #000000;
background-color: #d0d0d0;
border-collapse: collapse;
border-color: #333333;
border-style: outset;
border-width: 3px;
}
.divsus
{
position: relative;
top: 0px;
left: 0px;
width: 100%;
height: 20px;
color: #ffffff;
background-color: #333333;
border: none;
}
.divcentru
{
position: relative;
top: 0px;
left: 0px;
width: 100%;
height: 80%;
color: #000000;
background-color: #e0e0e0;
border: none;
}
.divjos
{
position: relative;
top: 0px;
left: 0px;
width: 100%;
height: 20px;
color: #000000;
background-color: #f0f0f0;
border: none;
}
</style>
</head>
<body>
<div class="divcontainer">
<div class="divsus"> Text sus </div>
<div class="divcentru"> Text Text Text <br /> Text Text Text</div>
<div class="divjos"> Text jos </div>
</div>
</body>
</html>

As vrea ca "divjos" sa fie la marginea de jos a "divcontainer" iar "divcentru" sa umple tot spatiul dintre "divsus" si "divjos".
Banuiesc ca-i ceva simplu dar nu stiu de ce nu "gasesc" ...
Multumesc anticipat !

olympia · Data înscrierii: 26/Mai/2008 Mesaje: 179

pai dk ii dai

.divjos
{
position: absolute;
top: 280px;
left: 0px;
width: 100%;
height: 20px;
color: #000000;
background-color: #f0f0f0;
border: none;
}

ar trebui sa se alinieze jos. ptr divcentru, dat fiind ca e in interiorul unui div absolut, merge la height sa ii dai exact in px (cam 260px in cazul asta).

structura poate fi si repetitiva, dk ii dai in id la divcontainer, insa nu prea e cross browser. ca sa iti iasa cum trebuie, ar mai fi nevoie de niste hackuri.

dechim · Trimis: Mar Sep 02, 2008 10:09 pm Titlul subiectului:

Merci olympia, e o solutie dar nu-i chiar cea care-mi foloseste, eu schimb width si height style in line cu javaScript si voiam ca div-urile interioare sa se aranjeze singure. Asa trebuie sa calculez si sa le schimb si lor proprietatile.
Nu se poate sa nu aiba CSS-ul o proprietate de a alinia la ce margine vreau, asa ma gandesc !!!

lorand1 · Trimis: Mar Sep 02, 2008 10:28 pm Titlul subiectului:

problema ta sta in calcule

adica 1% din 300 este 3
suma in pixeli la divsus si divjos este 40 px care sunt doar 13,3% din 300 px cat are divcontainer
pt a lungi divcentru la valoarea lui are nevoie de 87% height nu 80% cat ai acuma
dar ca sa te asiguri ca totul merge bine ori lucrezi numai in pixeli ori in procentaje ca altfel da iar cu zecimale neluate in seama si nu iti mai afiseaza ce ai vrut
spor

dechim · Trimis: Mar Sep 02, 2008 10:39 pm Titlul subiectului:

M-a ajutat Gogu, cum spune @mihaitha, exista proprietatea bottom: offset
Cod:
.divjos
{
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 20px;
color: #000000;
background-color: #f0f0f0;
border: none;
}

Deci cu div-ul de jos e rezolvata, mai trebuie cu cel din centru, ma gandesc la width:100% si margin-bottom:20px; margin-top:20px;
Eu vreau ca atunci cand div-ul container isi mareste dimensiunile, divsus sa stea sus si divjos sa stea jos, iar cel din centru sa cuprinda tot containerul mai putin cei 20px de sus si de jos.

olympia · Data înscrierii: 26/Mai/2008 Mesaje: 179

exact la offset ma uitasem si eu acum.

ma gandeam dk ar merge ceva de genul:

Cod:
var divcentru = document.getElementById("divcentru");
divcentru.style.width = 100;
divcentru.style.height = 260;
divcentru.style.position = 'relative';

il poti lua si dupa tag cu document.getElementsByTagName("div")[], si sa ii schimbi valorile dk e nevoie.

in fine, am zis si io asa, k oricum nu am inteles f bine despre ce e vorba :)

//editat
cred ca de fapt tu schimbi stilurile in alte elemente, nu in astea asa cum gresit am inteles. probabil ca vrei ca aceste divuri doar sa se realinieze corect dupa modificarile respective, acu' am inceput sa ma prind :D

Amenthes · Data înscrierii: 12/Dec/2005 Mesaje: 620

Nu-mi place sa fiu eu ala cu vestile proaste dar in IE6 nu merge. Trebuie sa suporti si IE6? In cazul asta as avea o propunere.

olympia · Data înscrierii: 26/Mai/2008 Mesaje: 179

unde a disparut ultima postare man?

dechim · Trimis: Mie Sep 03, 2008 12:22 am Titlul subiectului:

Asta era ultima postare, am crezut c-am rezolvat dar nu incercasem in IE, in FireFox merge
Cod:
<html>
<head>
<style type="text/css">
.divcontainer
{
position: absolute;
top: 100px;
left: 100px;
width: 200px;
height: 300px;
color: #000000;
background-color: #e0e0e0;
border-collapse: collapse;
border-color: #333333;
border-style: outset;
border-width: 3px;
}
.divsus
{
position: absolute;
top: 0px;
width: 100%;
height: 20px;
color: #ffffff;
background-color: #333333;
border: none;
}
.divcentru
{
position: absolute;
top: 20px;
bottom: 20px;
width: 100%;
color: #000000;
background-color: #e0e0e0;
border: none;
overflow: auto;
}
.divjos
{
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 20px;
color: #000000;
background-color: #f0f0f0;
border: none;
}
</style>
<script type="text/javascript">
function aplica()
{
document.getElementById('divcontainer').style.height = parseInt(document.getElementById('ina').value);
document.getElementById('divcontainer').style.width = parseInt(document.getElementById('lat').value);
return true;
}
</script>
</head>
<body>
<div class="divcontainer" id="divcontainer">
<div class="divsus">Text sus </div>
<div class="divcentru"> Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
</div>
<div class="divjos"> Text jos </div>
</div>
Latime <input type="text" id="lat" value="200" onchange="aplica();" /> <br />
Inaltime <input type="text" id="ina" value="300" onchange="aplica();"/>
</body>
</html>

PHPRomania Bot · Mie Dec 26, 2007 7:01 pm