Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [HTML][CSS] Wyśrodkowanie w pionie diva, Wiem ze juz byl temat ale u mnie nic nie dziala :/
InosU31
post 23.10.2010, 21:53:05
Post #1





Grupa: Zarejestrowani
Postów: 221
Pomógł: 14
Dołączył: 11.03.2009
Skąd: Lubaczów

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
Naito
post 24.10.2010, 07:07:44
Post #2





Grupa: Zarejestrowani
Postów: 2
Pomógł: 0
Dołączył: 20.05.2010
Skąd: Norway

Ostrzeżenie: (0%)
----- 

[CSS] pobierz, plaintext 
  1. vertical-align: middle;
[CSS] pobierz, plaintext

To służy do wyśrodkowywania w pionie.


--------------------
Pacem cum hominibus, bellum cum vitiis habe!
Go to the top of the page
+Quote Post
InosU31
post 24.10.2010, 11:15:11
Post #3





Grupa: Zarejestrowani
Postów: 221
Pomógł: 14
Dołączył: 11.03.2009
Skąd: Lubaczów

Ostrzeżenie: (0%)
-----

to nie dziala nic sie nie dzieje nadal ta stopka przylega do gornej czesci bloku nadrzednego :/
Go to the top of the page
+Quote Post
modern-web
post 24.10.2010, 12:00:25
Post #4





Grupa: Zarejestrowani
Postów: 763
Pomógł: 117
Dołączył: 15.03.2010
Skąd: void

Ostrzeżenie: (0%)
-----

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


--------------------
Pomogłem? Kliknij `Pomógł`. To nic nie kosztuje, a mnie usatysfakcjonuje! ;)
Go to the top of the page
+Quote Post
InosU31
post 24.10.2010, 14:44:42
Post #5





Grupa: Zarejestrowani
Postów: 221
Pomógł: 14
Dołączył: 11.03.2009
Skąd: Lubaczów

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
netoperz
post 24.10.2010, 21:04:51
Post #6





Grupa: Zarejestrowani
Postów: 7
Pomógł: 2
Dołączył: 15.08.2010

Ostrzeżenie: (0%)
-----

Dla diva nadrzednego podaj np
[XML] pobierz, plaintext 
  1. padding-top:10px;
  2. padding-bottom:10px
[XML] pobierz, plaintext


Go to the top of the page
+Quote Post
Naito
post 26.10.2010, 08:20:15
Post #7





Grupa: Zarejestrowani
Postów: 2
Pomógł: 0
Dołączył: 20.05.2010
Skąd: Norway

Ostrzeżenie: (0%)
-----

Zobacz ten temat: Temat: div wysrodkowanie


--------------------
Pacem cum hominibus, bellum cum vitiis habe!
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 12.07.2025 - 05:44
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn