Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: problem z divami w css
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
szypi1989
Witam .Otóz mam problem oto trochę z kodu html:



  1. <div id="cont">
  2.  
  3. <div id="arrowleft">
  4. <div id="arrowleftimage"></div>
  5. </div>
  6. <div id="contimage">
  7. <div id="image1"></div>
  8. <div id="image2"></div>
  9.  
  10. </div>
  11. <div id="arrowright"></div>
  12. </div>
  13.  



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:
  1. margin-left: auto;
  2. margin-right: auto;


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%;
szypi1989
no fakt pochrzaniłem coś,dokładnie chodzi mi teraz o ten przykład:
  1. <div id="cont">
  2.  
  3. <div id="arrowleft" >
  4.  
  5. <div id="arrowleftimage" >
  6.  
  7.  
  8. </div>
  9. </div>
  10. <div id="contimage">
  11. <div id="image1"></div>
  12. <div id="image2"></div>
  13.  
  14. </div>
  15. <div id="arrowright" >
  16.  
  17. <div id="arrowrightimage" >
  18.  
  19.  
  20. </div>
  21. </div>
  22. </div>


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ćquestionmark.gif 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
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.