problem z divami w css Opcje

[szypi1989]

Witam .Otóz mam problem oto trochę z kodu html:

[HTML] pobierz, plaintext 
 <div id="cont">
 
    <div id="arrowleft">
    <div id="arrowleftimage"></div>
    </div>
    <div id="contimage">
    <div id="image1"></div>
    <div id="image2"></div>
 
    </div>
    <div id="arrowright"></div>
    </div>
 
[HTML] pobierz, plaintext 

oto kod css:
div#cont {
display:inline-block;
margin:auto;
width:auto;
height:auto;

text-align: center;
}



div#arrowleft {

float:left;
margin:auto;
width:200px;
height:100%;
background-color:#F00;
text-align: center;
}

div#arrowleftimage {



width:20px;
height:30px;
background-color:#400;
}
div#arrowright {

width:200px;
height:320px;

float:left;
background-color:#0f0;

}
div#contimage{

float:left;

}

Teraz tak chodzi mi o to aby,div CONT chce aby miał szerokość automatyczną,wysokość także i się centrował poziomo(i jest tutaj ok),dalej contimage ,arrowleft,arrowright też mają być wycentrowane poziomo i jest dobrze,ale nie mogę zrobic tak aby arrowleft miał wysokość swojego rodzica auto,i jego dziecko arrowleftimage było wycentrowane pionowo i poziomi(bardziej mi zależy aby chociaż tą drugą czynność się udało zrobić).Proszę bardzo o pomoc

[Damonsson]

Trochę źle podchodzisz do tematu..

1. Żeby móc nadać height: 100%; jakiś rodzic musi mieć określoną wysokość...bo tak robi nam się coś takiego:
Przyjmij height "cont" (nieokreślone więc szukam dalej) ->
przyjmij height "body" (nieokreślone więc szukam dalej) ->
przyjmij height "html", nieokreślone więc pasuje, bo już nie ma wyższego rodzica.

2. Żeby wycentrować w poziomie "arrowleftimage" dodaj:

[CSS] pobierz, plaintext 
margin-left: auto; 
margin-right: auto;
[CSS] pobierz, plaintext 

3. Żeby wycentrować w pionie musiałbyś mieć ustaloną wysokość, ewentualnie możesz się pobawić JS i do podpunktu 1. chyba też musiałbyś użyć JS, skoro ma być dynamicznie generowana szerokość i wysokość DIV. Ewentualnie możesz pokombinować z margin-top: -50%;

Ten post edytował Damonsson 13.01.2012, 19:14:31

[szypi1989]

no fakt pochrzaniłem coś,dokładnie chodzi mi teraz o ten przykład:

[HTML] pobierz, plaintext 
   <div id="cont"> 
 
               <div id="arrowleft" >
 
                   <div id="arrowleftimage" >
 
 
                   </div>
               </div>
               <div id="contimage">
                   <div id="image1"></div>
                   <div id="image2"></div>
 
               </div>
                 <div id="arrowright" >
 
                       <div id="arrowrightimage" >
 
 
                   </div>
                 </div>
             </div>
[HTML] pobierz, plaintext 

div#center2 {

background-image: url("center2.jpg");
width:100%;
height:auto;
background-position: center top;

border-color:none;
text-align: center;

}
div#cont {
display:inline-block;
margin:auto;
width:auto;
height:auto;

text-align: center;
}



div#arrowleft {

float:left;
text-align: center;
width:86px;
height:100%;
margin-top:40px;
background-color:#0F0;
}



div#arrowright {
background-color:#00f;
height:100%;
float:left;
text-align: center;
width:86px;
height:280px;
margin-top:40px;

}
div#contimage{

float:left;

}
div#image1{
margin-top:40px;
margin-bottom:40px;
margin-left:10px;
margin-right:10px;
float:left;
background-image: url("image1.jpg");
border-style:solid;
border-color: #333;
border-width: 5px;
width:280px;
height:280px;
}
div#image2{

margin-top:40px;
margin-bottom:40px;
margin-left:10px;
margin-right:10px;
float:left;
background-image: url("image2.jpg");
border-style:solid;
border-color: #333;
border-width: 5px;


width:280px;
height:280px;
}




Teraz tak chcę aby arrowleft miał wysokość height:100% czyli rodzica,rodzic CONT ma wysokość automatyczną więc lipa,
ale w CONT mieszczą się dzieci które dają wysokość :280px,i właśnie z tego względu chciałbym aby te CONT(który ma wysokość auto) chciałbym aby przyjął wysokość tych dzieci,i potem ten arrowleft który ma 100% przyjął wysokość CONT.Czy da sie to jakoś zrobić mam nadzieje że dobrze wytłumaczyłem ,jeszcze raz:

CONT.height=CONTIMAGE.height(image1.height=280px);
ARROWLEFT.height=CONT;

Potrzebuje to dlatego że chcę wsadzić do arrowleft jakąś grafike ze strzałką i potem wyśrodkować tą strzałke wedłóg wysokości image1.(czyli zdjęć) Proszę o pomoc