Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS] Wyśrodkowanie w pionie diva
Forum PHP.pl > Forum > Przedszkole
InosU31
23.10.2010, 21:53:05
Witam

Mam problem z ustawieniem div'ow w pionie tak zeby wewnetrzne divy byly zawsze na srodku diva nadrzednego - przy zmianie rozdzielczosci. Juz szukalem w google i na tym forum ale nic nie chialo dzialac:/

oto kod - dam tylko kod na stopke bo troche jest tego moze ktos z was bedzie wiedzial jak ta stopke wysrodkowac w pionie tak zeby przy zmienie rozdzielczosci ekranu zawsze byla na srodku w pionie :

[HTML] pobierz, plaintext 
  1.  
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  3. "http://www.w3.org/TR/htm14/loose.dtd">
  4. <html>
  5. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  6. <html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'>
  7.     <head>
  8.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  9.         <title></title>
  10.         <link rel='stylesheet' type='text/css' href='style.css' />
  11.         <!-- compliance patch for microsoft browsers -->
  12.         <!--[if lt IE 7]>
  13.             <link rel='stylesheet' type='text/css' href='multi-column-ie.css' />
  14.             <script src="/ie7/ie7-standard-p.js" type="text/javascript"></script>
  15.         <![endif]-->
  16.     </head>
  17.     <body>
  18.  
  19.     <div id='obramowanie-logo'>
  20.  
  21.       </div>  
  22.  
  23.       <div id='obramowanie-srodek'> 
  24.  
  25.       </div>  
  26.  
  27.      <div id='obramowanie-stopka'>        
  28.         <div id='stopka'>
  29.             <h4>Footer</h4>
  30.         </div>
  31.        </div> 
  32.  
  33.     </body>
  34. </html>
  35.  
[HTML] pobierz, plaintext 


[XML] pobierz, plaintext 
  1. html, body {
  2.     background: white;
  3.     font-family: sans-serif;
  4.     margin: auto;
  5.     padding: auto;
  6.     height: 99%;
  7.  
  8. }
  9. h1, h4 {
  10.     margin: 0;
  11.     font-weight: normal;
  12. }
  13.  
  14.  
  15. div#obramowanie-logo {
  16.     position: relative;
  17.     border: 1px solid gray;
  18.     background: green;
  19.     margin: 0 auto;
  20.     padding: auto;
  21.     height: 32%;
  22.  
  23. }
  24.  
  25.  
  26. div#obramowanie-srodek {
  27.     position: relative;
  28.     border: 1px solid gray;
  29.     background: green;
  30.     margin: 0 auto;
  31.     padding: auto;
  32.     height: 63%;
  33.  
  34. }
  35.  
  36. div#obramowanie-stopka {
  37.     position: relative;
  38.     border: 1px solid gray;
  39.     background: green;
  40.     margin: auto;
  41.     padding: auto;
  42.     height: 6%;
  43.  
  44. }
  45.  
  46. div#stopka {
  47. 	position: relative;
  48.     background: rgb(240, 240, 240);
  49.     border: 1px solid gray;
  50.     min-height: 30px;
  51.     margin: auto;
  52.  
  53. }
  54.  
  55. div#stopka {
  56.     border-top: none;
  57. }
  58.  
  59.  
  60. div#stopka
  61. 		{		
  62. 	max-width: 840px;
  63.     min-width: 780px;	
  64.  
  65. 		}
  66.  
[XML] pobierz, plaintext


pozdrawiam

Naito
24.10.2010, 07:07:44 
[CSS] pobierz, plaintext 
  1. vertical-align: middle;
[CSS] pobierz, plaintext

To służy do wyśrodkowywania w pionie.
InosU31
24.10.2010, 11:15:11
to nie dziala nic sie nie dzieje nadal ta stopka przylega do gornej czesci bloku nadrzednego :/
modern-web
24.10.2010, 12:00:25
W kodzie HTML daj coś takiego...

[HTML] pobierz, plaintext 
  1. <div id="TWOJE_ID" align="center">
  2. </div>
[HTML] pobierz, plaintext


Zadziała smile.gif
InosU31
24.10.2010, 14:44:42
no niestety tylko mi tekst wysrodkowalo:/ poszukalem jak umiescic stopke na dole strony i czesciowo podzialalo:
position: absolute;
bottom: 0;

ale stopka jest do lewej no i na dole a mi trzeba dac na srodek bo logo i caly srodek ma byc na srodku zawsze gdy zmienie rozdzielczosc
netoperz
24.10.2010, 21:04:51
Dla diva nadrzednego podaj np
[XML] pobierz, plaintext 
  1. padding-top:10px;
  2. padding-bottom:10px
[XML] pobierz, plaintext


Naito
26.10.2010, 08:20:15
Zobacz ten temat: Temat: div wysrodkowanie
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.