Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [HTML] Proste pytanie
-ptacz-
post 28.05.2008, 20:09:48
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 28.05.2008, 20:16:59
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 28.05.2008, 20:24:36
Post #3





Goście
Strzelaj dalej
Go to the top of the page
+Quote Post
Misiur66
post 28.05.2008, 20:33:05
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 smile.gif
Go to the top of the page
+Quote Post
-ptacz-
post 28.05.2008, 20:37:23
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 28.05.2008, 20:42:35
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.


--------------------
I would love to change the world, but they won't give me the source code.
My software never has bugs. It just develops random features.
Go to the top of the page
+Quote Post
-ptacz-
post 28.05.2008, 20:45:45
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 28.05.2008, 20:47:03
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.


--------------------
I would love to change the world, but they won't give me the source code.
My software never has bugs. It just develops random features.
Go to the top of the page
+Quote Post
-ptacz-
post 28.05.2008, 20:56:47
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 28.05.2008, 21:44:49
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
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: 24.07.2025 - 16:04
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn