Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [HTML] Proste pytanie
-ptacz-
post
Post #1





Goście
Pytanie jest proste. Jak zrealizować w html takie 3 wyrównania tekstu w 1 linii



Robiłem już różne cuda z divami spanami i tabelami jednak to nie wychodzi.

Jak widać środek środkowego pola (tekstu) ma być na środku ekranu, niezależnie od długości lewego tekstu

[HTML] pobierz, plaintext 
  1. <div style="position: absolute;">ddasasdasdd1</div> 
  2. <div style="position: absolute; left: 50%;">dasdasdasdasadasdasdsdasdd2</div>
[HTML] pobierz, plaintext


Np coś takiego nie spełnia wymagań bo lewa krawędź środkowego pola by była na środku
Go to the top of the page
+Quote Post
Piotrwusek
post
Post #2





Grupa: Zarejestrowani
Postów: 399
Pomógł: 7
Dołączył: 11.06.2007
Skąd: Poznan

Ostrzeżenie: (20%)
X---- 

[HTML] pobierz, plaintext 
  1. <div style="float: left; width:33%;">1</div>
  2. <div style="float: left; width:33%;">2</div>
  3. <div style="float: left; width:33%;">3</div>
[HTML] pobierz, plaintext


możesz jeszcze dodać text-align


@edit

literówka !

Ten post edytował Piotrwusek 28.05.2008, 20:48:47
Go to the top of the page
+Quote Post
-ptacz-
post
Post #3





Goście
Strzelaj dalej
Go to the top of the page
+Quote Post
Misiur66
post
Post #4





Grupa: Zarejestrowani
Postów: 170
Pomógł: 11
Dołączył: 2.03.2008
Skąd: Lublin

Ostrzeżenie: (10%)
X----

Wymiary w % są często zdeporcjonowane, dlatego lepiej ich nie używać... Zaraz pomyśle nad dobrym sposobem (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)
Go to the top of the page
+Quote Post
-ptacz-
post
Post #5





Goście







 
[HTML] pobierz, plaintext 
  1. <div style="float: left; width:33%; text-align:left">1</div>
  2. <div style="float: left; width:33%; text-align:center">2</div>
  3. <div style="float: left; width:33%; text-align:right">3</div>
[HTML] pobierz, plaintext


Tak zadziała, lecz co zrobić jesli tekst 1,2, i 3 nie jest statyczny. Np tekst 1 będzę długi i zajmie 45% ekranu, a tekst środkowy zajmie 3% ekranu. Wtedy lewy rozwali całą linię
Go to the top of the page
+Quote Post
batman
post
Post #6





Grupa: Moderatorzy
Postów: 2 921
Pomógł: 269
Dołączył: 11.08.2005
Skąd: 127.0.0.1




 
[HTML] pobierz, plaintext 
  1. <div style="float: left; width: 33%;">1</div>
  2. <div style="float: right; width: 33%; text-align: right;">3</div>
  3. <div style="text-align: center; width: 33%; margin: 0 auto;">2</div>
[HTML] pobierz, plaintext

To Ci się nie powinno rozjechać przy dużym tekście.
Go to the top of the page
+Quote Post
-ptacz-
post
Post #7





Goście
Cytat(batman @ 28.05.2008, 20:42:35 ) *
[HTML] pobierz, plaintext 
  1. <div style="float: left; width: 33%;">1</div>
  2. <div style="float: right; width: 33%; text-align: right;">3</div>
  3. <div style="text-align: center; width: 33%; margin: 0 auto;">2</div>
[HTML] pobierz, plaintext

To Ci się nie powinno rozjechać przy dużym tekście.
Go to the top of the page
+Quote Post
batman
post
Post #8





Grupa: Moderatorzy
Postów: 2 921
Pomógł: 269
Dołączył: 11.08.2005
Skąd: 127.0.0.1
Z IE Ci nie pomogę, ponieważ nie mam. To działa w Fx i Operze.
Go to the top of the page
+Quote Post
-ptacz-
post
Post #9





Goście
Cytat(batman @ 28.05.2008, 20:47:03 ) *
Z IE Ci nie pomogę, ponieważ nie mam. To działa w Fx i Operze.


Potwierdzam. działa w FF, nie działa w IE. A więc nie jest to dobre rozwiązanie bo strony muszą być funkcjonalne niestety we wszystkich przeglądarkach.

Ostatnio też nieźle się nameczylem z IE bo robiłem w js+dom i w IE (włącznie z 7) działać nie chciało. Co zrobić trzeba sobie radzić z badziewnym IE
Go to the top of the page
+Quote Post
Inti
post
Post #10





Grupa: Zarejestrowani
Postów: 67
Pomógł: 12
Dołączył: 20.01.2008
Skąd: Toruń

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

Witam

Po pierwsze do ustawiania stylu służy CSS, a nie umieszczanie wszystkiego w tagach HTML'a.

strona.html

[HTML] pobierz, plaintext 
  1. <?xml version="1.0" encoding="iso-8859-2"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5.   <meta http-equiv="Content-type" content="text/html; charset=iso-8859-2" />
  6.  
  7.   <title>Strona</title>
  8.  
  9.   <link rel="stylesheet" href="style.css " type="text/css" />
  10. </head>
  11. <body>
  12.  
  13. <!-- tresc strony -->
  14. <dir id="left">1</dir>
  15. <dir id="center">Jakistamdlugitekst</dir>
  16. <dir id="right">3</dir>
  17.  
  18. </body>
  19. </html>
[HTML] pobierz, plaintext


style.css

[HTML] pobierz, plaintext 
  1. html, body {
  2.     margin: 0px;
  3.     padding: 0px;
  4.     font-size: 14px;
  5.     font-family: verdana, tahoma, arial, helvetica, sans-serif;
  6. }
  7.  
  8. body * {
  9.     margin: 0px;
  10.     padding: 0px;
  11.     font-size: 14px;
  12. }
  13.  
  14. #left {
  15.     text-align: left;
  16.     float: left;
  17.     width: 10%; 
  18.     height: auto !important;
  19.     height: 300px; /* IE */
  20.     min-height: 300px;
  21.     display: inline; /* Ustawienie display: inline zapewnia, że margin-left lub margin-right będzie poprawnie interpretowane przez IE. */
  22.     background: #fff000;
  23. }
  24.  
  25. #center {
  26.     text-align: center;
  27.     float: left;
  28.     width: 80%; /* IE */
  29.     max-width: 80%; /* to dziala pod FF i innymi przegladarkami prawidlowo interpretujacymi style kaskadowe */
  30.     height: auto !important;
  31.     height: 300px; /* IE */
  32.     min-height: 300px;
  33.     display: inline;
  34.     background: #00ff00;
  35. }
  36.  
  37. #right {
  38.     text-align: right;
  39.     float: right;
  40.     width: 10%;
  41.     height: auto !important;
  42.     height: 300px; /* IE */
  43.     min-height: 300px;
  44.     display: inline;
  45.     background: #000fff;
  46. }
[HTML] pobierz, plaintext


Ogólnie i tak musisz ustalić jakąś wielkość LEWEGO i PRAWEGO bloku, a ŚRODKOWEGO najlepiej w pełni dopasować w IE lub ewentualnie może się sam dopasowywać w FF i innych lepszych przeglądarkach.

Powinno chodzić dobrze.

Pozdrawiam
Inti

Ten post edytował Inti 28.05.2008, 21:47:43
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 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 Aktualny czas: 23.08.2025 - 05:18
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn