Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [HTML/CSS]Vertical-align tekstu w divie
l0ud
post
Post #1





Grupa: Zarejestrowani
Postów: 1 387
Pomógł: 273
Dołączył: 18.02.2008

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

Od kilku godzin zajmuję się przerabianiem pewnej strony z układu opartego na tabelkach na warstwy. Co dopiero zaczynam, a już napotykam się na problemy wstydnis.gif

Konkretnie: nie umiem osiągnąć wyśrodkowania tekstu w pionie, w divie o określonej szerkokości.

Kod 'ramki treści' w przybliżeniu wygląda tak:

[HTML] pobierz, plaintext 
  1. <div class="contents">
  2. 	<div class="contents_header"><p class="contents_title">Witamy na naszej stronie!</p></div>
  3. 	<div class="contents_row">Treść powitania</div>
  4. </div>
[HTML] pobierz, plaintext

Przy stylu

Kod
DIV.contents {
     border-width: 1px;
     border-style: solid;
     border-color: #B6830A;
     background-color: #FFFDF5;
}

DIV.contents_header {
     background-color: #FFE58B;
     background-image: url('images/contents_h_background.jpg');
     padding: 0px;
     padding-left: 5px;
     padding-right: 5px;
     margin:0px;
     height: 26px;
}

DIV.contents_row {
     border-top-style: solid;
     border-top-color: #F8DA98;
     border-top-width: 1px;
     padding-left: 4px;
     padding-right: 4px;
     padding-top: 4px;
     padding-bottom: 4px;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 11px;
     font-weight: normal;
     color: black;
}

P.contents_title {
     padding:0px;
     margin:0px;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 10pt;
     font-weight: normal;
     color: black;
     text-decoration: none;
     vertical-align: middle;
}


Jakby to było istotne, doctype:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
[HTML] pobierz, plaintext


Vertical-align próbowałem przypisać i do diva, i do p.

Efekt:


Ręce opadają... Co robię źle?

Proszę o pomoc i pozdrawiam smile.gif

Ten post edytował l0ud 2.03.2008, 20:49:52


--------------------
XMPP: l0ud@chrome.pl
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 13)
Misiur66
post
Post #2





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

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

Coż dziś też to robiłem haha.gif
To mi pomogło.
Kod
#div_kotener{
    vertical-align:bottom;
    line-height:80px;
    display: inline;
}

Może pomoże, może nie...
Go to the top of the page
+Quote Post
l0ud
post
Post #3





Grupa: Zarejestrowani
Postów: 1 387
Pomógł: 273
Dołączył: 18.02.2008

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

Co uznać w tym przypadku za 'div_kotener'?


--------------------
XMPP: l0ud@chrome.pl
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----

Tu chodzi o diva rodzica czyli
Kod
<div class="contents_header">
    <p class="contents_title">Witamy na naszej stronie!</p>
</div>

element nadrzędny. Tu oklasie contents header.
Go to the top of the page
+Quote Post
l0ud
post
Post #5





Grupa: Zarejestrowani
Postów: 1 387
Pomógł: 273
Dołączył: 18.02.2008

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

Dodanie tych linijek powoduje... cóż...



Przy różnych kombinacjach są inne efekty, ale nie takie jak zamierzony...

Ten post edytował l0ud 2.03.2008, 21:08:40


--------------------
XMPP: l0ud@chrome.pl
Go to the top of the page
+Quote Post
Misiur66
post
Post #6





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

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

Przepraszam ale chyba Cię wprowadziłem w błąd worriedsmiley.gif sciana.gif
Na moim przykładzie. Tu nie chodzi o kontener. Mam h2 o id "naglowek_c2" a w stylach
Kod
#naglowek_c2{
    vertical-align:[b]middle[/b];
    line-height:80px;
    display: inline;
}

CZyli nie rodzica, tylko element docelowy w twoim wypadku p... Sorka za zamotkę.

BTW: Bottom centruje... ale w dół haha.gif middle - środek.
Edit: I znowu błąd ;X line-height nie musi być 80px; chodzi o określenie wysokości linii.

Ten post edytował Misiur66 2.03.2008, 21:13:46
Go to the top of the page
+Quote Post
hondek
post
Post #7





Grupa: Zarejestrowani
Postów: 355
Pomógł: 50
Dołączył: 20.08.2007
Skąd: Częstochowa

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

obawiam się, że vertical-align mozna przypisac tylko elementom liniowym i komorkom tabeli sad.gif
mozesz zrobic z diva komorke tabeli daj w stylach: display: table-cell; a nastepnie vertical-align;

a sorry ty nie dales do diva middle... wiec zamiast <p> uzyj <span> smile.gif

Ten post edytował hondek 2.03.2008, 21:25:47


--------------------
przetwornik yt na czasie :)
Go to the top of the page
+Quote Post
Misiur66
post
Post #8





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

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

Tak jak mówisz, ale tekst przecież jest elementem liniowym? Z kolei oszukanie CSS przez użycie "tabelki", czasem psuje kompozycje...
Go to the top of the page
+Quote Post
hondek
post
Post #9





Grupa: Zarejestrowani
Postów: 355
Pomógł: 50
Dołączył: 20.08.2007
Skąd: Częstochowa

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

<p> nie jest elementem liniowym.
oszukaniem? zmiana typu elementu to chyba nie oszustwo smile.gif
odsyłam do dokumentacji

Ten post edytował hondek 2.03.2008, 21:30:27


--------------------
przetwornik yt na czasie :)
Go to the top of the page
+Quote Post
l0ud
post
Post #10





Grupa: Zarejestrowani
Postów: 1 387
Pomógł: 273
Dołączył: 18.02.2008

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

Więc tak, zaważyłem, że przypisanie dodatkowo line-height:26px; do P powoduje rozwiązanie problemu. Ostatecznie w ogóle zrezygnowałem z tego elementu (P) i zrobiłem samą warstwę w ten sposób:

Kod
DIV.contents_header {
    background-color: #FFE58B;
    background-image: url('images/contents_h_background.jpg');
    margin:0px;
    padding: 0px;
    padding-left: 5px;
    padding-right: 5px;
    line-height:26px;
    vertical-align: middle;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10pt;
    font-weight: normal;
    color: black;
    text-decoration: none;
}


Działa... Tylko na ile to poprawne?


--------------------
XMPP: l0ud@chrome.pl
Go to the top of the page
+Quote Post
hondek
post
Post #11





Grupa: Zarejestrowani
Postów: 355
Pomógł: 50
Dołączył: 20.08.2007
Skąd: Częstochowa

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

połowiczne rozwiazanie, w różnych przeglądarkach może to dać różne efekty, polecałbym Ci jednak użycie <span>


--------------------
przetwornik yt na czasie :)
Go to the top of the page
+Quote Post
Misiur66
post
Post #12





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

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

Jak działa to się nie martw aaevil.gif Ale na poważnie to chyba dobrze, tylko tam np. jak podajesz margin, to nie piszesz 0px tylko 0 bo jednostka się nie liczy haha.gif
Go to the top of the page
+Quote Post
l0ud
post
Post #13





Grupa: Zarejestrowani
Postów: 1 387
Pomógł: 273
Dołączył: 18.02.2008

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

Ok, punkciki lecą winksmiley.jpg

Cytat
tylko tam np. jak podajesz margin, to nie piszesz 0px tylko 0 bo jednostka się nie liczy


W każdym kursie widzę jednostkę przy margin winksmiley.jpg


--------------------
XMPP: l0ud@chrome.pl
Go to the top of the page
+Quote Post
hondek
post
Post #14





Grupa: Zarejestrowani
Postów: 355
Pomógł: 50
Dołączył: 20.08.2007
Skąd: Częstochowa

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

obydwa zapisy są poprawne smile.gif


--------------------
przetwornik yt na czasie :)
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: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

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

RSS Aktualny czas: 19.08.2025 - 17:02
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn