centrare


vali38


cum sa fac sa centrez si eu chestia asta?

CODE
<head>
<title>Ultra Web Design</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
    margin:30px;
}

div.Table_01 {
    width:1000px;
    height:768px;
}

div.Home {
    position:absolute;
    left:0px;
    top:0px;
    width:326px;
    height:234px;
}

div.Ultra-Web-Design {
    position:absolute;
    left:326px;
    top:0px;
    width:674px;
    height:125px;
}

div.index-03 {
    position:absolute;
    left:326px;
    top:125px;
    width:233px;
    height:643px;
}

div.Ultra-Web-Design004 {
    position:absolute;
    left:559px;
    top:125px;
    width:67px;
    height:23px;
}

div.Oferta {
    position:absolute;
    left:626px;
    top:125px;
    width:86px;
    height:23px;
}

div.Contact {
    position:absolute;
    left:712px;
    top:125px;
    width:78px;
    height:23px;
}

div.index-07 {
    position:absolute;
    left:790px;
    top:125px;
    width:210px;
    height:643px;
}

div.index-08 {
    position:absolute;
    left:559px;
    top:148px;
    width:231px;
    height:620px;
}

div.index-09 {
    position:absolute;
    left:0px;
    top:234px;
    width:326px;
    height:534px;
}

</style>
</head>
<body style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;">
<div class="Table_01" align="center">
    <div class="Home">
        <a href="index.html" target="_self">
            <img src="images/Home.gif" width="326" height="234" border="0" alt=""></a>
    </div>
    <div class="Ultra-Web-Design">
        <a href="index.html" target="_self">
            <img src="images/Ultra-Web-Design.gif" width="674" height="125" border="0" alt=""></a>
    </div>
    <div class="index-03">
        <img src="images/index_03.gif" width="233" height="643" alt="">
    </div>
    <div class="Ultra-Web-Design004">
        <a href="index.html" target="_self">
            <img src="images/Ultra-Web-Design-04.gif" width="67" height="23" border="0" alt=""></a>
    </div>
    <div class="Oferta">
        <a href="oferta.html" target="_self">
            <img src="images/Oferta.gif" width="86" height="23" border="0" alt=""></a>
    </div>
    <div class="Contact">
        <a href="contact.html" target="_self">
            <img src="images/Contact.gif" width="78" height="23" border="0" alt=""></a>
    </div>
    <div class="index-07">
        <img src="images/index_07.gif" width="210" height="643" alt="">
    </div>
    <div class="index-08">
        <img src="images/index_08.gif" width="231" height="620" alt="">
    </div>
    <div class="index-09">
        <img src="images/index_09.gif" width="326" height="534" alt="">
    </div>
</div>
</body>
webc
Toate straturile astea la tine (ma rog -containere, ..."diviziuni logice" dry.gif) arata asa:
QUOTE(vali38 @ Aug 25 2007, 16:50) *
div.nume {
position:absolute;
left:...px;
top:...px;
width:...px;
height:...px;

}
...

N-o sa faci centrare in pagina, daca toate coordonatele sunt absolute la coltul stanga-sus la paginii.
 
vali38
cum mi-ai recomanda sa fac?
m-am gandit sa pun la table_01 top si left si sa-l pun relative
dar tot nu sta la jumatate
webc
QUOTE(vali38 @ Aug 25 2007, 17:28) *
cum mi-ai recomanda sa fac?

De principiu nu sunt adeptul rezolvarilor, cred ca o sugestie ajuta mai mult...
Si oricum, sunt destui p-aici care n-au ce face, ma si mir cum de nu ti-a facut nimeni pana acum tot aranjamentul.

Ideea ar fi sa studiezi un pic imbricarea straturilor, definire absolute vs. relativa, "mostenirea" proprietatilor obiectelor, etc. si sigur o faci...
vali38
stiu cum sta treaba cu absolute si relative dar nu reusesc sa fac centrarea...ma trec toate sudorile de cand tot incerc sa fac chestia asta
sagarion
CODE
div.Table_01 {
width:1000px;
height:768px;
position: relative;
margin: 0 auto;
}


In mod normal, orice div cu pozitionare absoluta ar trebui sa se alinieze de la marginea primului div relativ sau div parinte (Table_01).
Din cate stiu eu, un layer (div cu pozitionare absoluta) se poate centra asa:
#center {
width: 500px;
height: 500px;
position: absolute;
left: 50%; // marginea stanga a div-ului e la jumatate
margin-left: -250px; // scazi jumatate din latimea div-ului pentru ca centrul lui sa fie pe centrul paginii
}
vali38
ms mult
a mers cu primul ex
al doilea l-am vazut si eu dar la linia margin-left: -250px; nu mi-am dat seama ca scad jumatate din latimea divului
 
webc
Nu stiu daca era necesar artificiul asta cu left: 50%, margin-left negativ, si ma indoiesc ca se comporta bine la orice raport latime div/ rezolutie ecran.

Simplu cred ca era:

div.Table_01 {
position:relative;
...
}

si un <center> imediat dupa <body>.
sagarion
QUOTE(webc @ Aug 27 2007, 00:57) *
Nu stiu daca era necesar artificiul asta cu left: 50%, margin-left negativ, si ma indoiesc ca se comporta bine la orice raport latime div/ rezolutie ecran.

Simplu cred ca era:

div.Table_01 {
position:relative;
...
}

si un <center> imediat dupa <body>.


<center> este depreciat (expirat - spune-i cum vrei).
Chestia cu marginea negativa era un exemplu despre pozitionarea unui div absolut pe centru (este bine sa stii cat mai mult, nu-i asa?).
xnoise


cel mai probabil respectivul html este exportat dintr-un program de grafica. renunta le ele.

@webc: artificiul merge pe orice dimensiune a ecranului atata timp cat stii cat are latime site-ul.

@vali38: invata html. in general ceea ce este exportat de diversele programe este un gunoi cu care nu ai ce face. Mai bine te apuci sa inveti html. In al doilea rand, nu cred ca ai nevoie de position:relative sau absolute nicaieri. ceea ce doresti tu se poate face foarte simplu cu pozitii normale.

@webc: "ma rog -containere, ..."diviziuni logice" tot simti nevoia sa te rupi in figuri? ti-as mai zice eu ceva, dar mi-e lene.
vali38
mai am o intrebare...daca pun marginile pe auto cum pot sa mai fac top 0 si bottom 0?
Aceasta este o versiune simplificatã a paginii originale. Pentru a vizita versiunea originala click aici.