MozillaPL.org - polskie centrum Mozilli

Główne menu:

Centrowanie (pionowe) tekstu w DIV'ie - jak?

Jak tworzyć strony WWW zgodnie ze standardami

Moderator: Pomocy?!

Odpowiedz

Centrowanie (pionowe) tekstu w DIV'ie - jak?

Postautor: yarek » 27 grudnia 2005, 19:47

Przeglądarka: Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.8) Gecko/20051111 Firefox/1.5

Witam,

Tym razem nie podaje kodu ... Sprawa jest prosta: jak wycentrować (oczywiście pionowo, dla przypomnienia poziomo wystarczy text-align: ) tekst w divie ? Męcze się i męcze, może to trochę głupie i proste dla niektórych pytanie ... :wink:

Btw: szkoda, że vertical-align: tego nie załatwi :(
yarek
 
Na górę

Postautor: harp » 27 grudnia 2005, 20:44

Przeglądarka: Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.8) Gecko/20051111 Firefox/1.5

Spróbuj padding-top: auto; padding-bottom: auto;
harp
 
Posty: 8
Z nami od: 22 grudnia 2005, 16:12
Na górę

Postautor: yarek » 27 grudnia 2005, 20:48

Przeglądarka: Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.8) Gecko/20051111 Firefox/1.5

Niestety nie działa :(
yarek
 
Na górę

Postautor: harp » 27 grudnia 2005, 21:09

Przeglądarka: Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.8) Gecko/20051111 Firefox/1.5

Musisz pokombinować. Np ustawić margin-top: ; w elemencie w divie w procentach lub pikeselach lub ustawić jego pozycje: position: relative; top: xx px;. Zasadniczo vertical-align nie działa;)
harp
 
Posty: 8
Z nami od: 22 grudnia 2005, 16:12
Na górę

Postautor: yarek » 27 grudnia 2005, 21:55

Przeglądarka: Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.8) Gecko/20051111 Firefox/1.5

Cała rzecz w tym, że robie "stopkę". Mam do niej przypisane tło i chcę aby tekst był na samym środku. Gdyby nie zła implementacja Box Model to mógłbym dać zwykłe padding :(
yarek
 
Na górę

Postautor: harp » 27 grudnia 2005, 22:09

Przeglądarka: Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.8) Gecko/20051111 Firefox/1.5

Jeśli masz tekst w jednej linii ustaw: line-height: x px; gdzie x=wysokość diva.
harp
 
Posty: 8
Z nami od: 22 grudnia 2005, 16:12
Na górę

Postautor: rafalzaq » 27 grudnia 2005, 22:27

Przeglądarka: Mozilla/5.0 (X11; U; Linux i686; pl; rv:1.8) Gecko/20051111 Firefox/1.5

Sprawdź coś takiego. Nie próbowałem ale może zadziała.
rafalzaq
 
Posty: 334
Z nami od: 22 sierpnia 2005, 15:41
Lokalizacja: Gliwice
Na górę

Postautor: yarek » 27 grudnia 2005, 23:02

Przeglądarka: Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.8) Gecko/20051111 Firefox/1.5

Dobra. Lepiej żebyście zobaczyli wreszcie kod :P

http://www.yds.neostrada.pl/problem/index.html
yarek
 
Na górę

Postautor: harp » 27 grudnia 2005, 23:28

Przeglądarka: Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.8) Gecko/20051111 Firefox/1.5

W index.html:

<div id="bottom">
<div id="tekst">
Jarek
</div>
</div>

W style.css:

#tekst {
line-height: 46px;
}

Swoją drogą taki układ strony możesz zrobić bez użycia elementów graficznych.
harp
 
Posty: 8
Z nami od: 22 grudnia 2005, 16:12
Na górę

Postautor: JBG » 28 grudnia 2005, 00:41

Przeglądarka: Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.8) Gecko/20051111 Firefox/1.5

yarek pisze:Cała rzecz w tym, że robie "stopkę". Mam do niej przypisane tło i chcę aby tekst był na samym środku. Gdyby nie zła implementacja Box Model to mógłbym dać zwykłe padding :(

No i sprawa okazuje się prosta nie czepiając się box modelu ;), ponieważ ustawiłeś i wysokość elementu i jednoczesnie dałeś wartość dla line-height:
Kod: Zaznacz cały
#bottom {
   width: 650px;
   height: 46px;
   margin: 0 auto;
   background-image: url('img/bottom.gif');
   line-height: 46px;
   font: 11px Tahoma;
   }

przez co żadną miarą tekst nie mógł znaleźć się na środku.
Aby tekst był po środku spróbuj w taki sposób:
Kod: Zaznacz cały
#bottom {
   width: 650px;
   font-size: 0.8em;
   padding: 6px;
   line-height:20px;
   margin: 0 auto;
   background: url('img/bottom.gif');
   }

Nie ma height, za to wysokość regulujesz zmieniając wartości line-height lub padding (oczywiście w kodzie podane są tylko przykładowe).
Szaleniec nie jest człowiekiem, który utracił rozsądek. Szaleniec utracił wszystko, poza rozsądkiem.
JBG
 
Posty: 142
Z nami od: 17 marca 2005, 12:57
Lokalizacja: Dobre Miasto
Na górę

Postautor: yarek » 29 grudnia 2005, 20:11

Przeglądarka: Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.8) Gecko/20051111 Firefox/1.5

No dobra, teraz to już totalnie sfiksowałem :( Nie zakładam już nowego tematu żeby nie zaśmiecać forum, ale mam kolejny problem. Również chodzi o layout. Strona znajduje się tutaj: http://www.yds.neostrada.pl/jog/index.html

O co chodzi? Robie sobie layout do Joggera (mój pierwszy :D ). Próbuje zmajstrować jakoś normalnie wyglądającego laya - menu po prawej, wpisy po lewej. Chodzi wyłącznie o diva z id="middle". Postanowiłem jako menu zrobić pare list, dodac w środku jakiegoś diva, a potem wszystkiemu nadać float:. Próbowałem już na wiele sposobów i wyszła z tego totalna sieczka ... Macie pomysl jak to wykonać?
yarek
 
Na górę

Postautor: Zajec » 29 grudnia 2005, 21:39

Przeglądarka: Opera/8.51 (X11; Linux i686; U; en)

ID jest niepowtarzalne, na jeden stronie może zostać użyte tylko raz. Zrób coś takiego:
Kod: Zaznacz cały
#entries {
float: left;
}
#category1 {
float: right;
}
#category2 {
float: right;
clear: right;
}
#category3 {
float: right;
clear: right;
}


I dobrze radzę, że używaj "font: " bo się można przy tym nieźle zamotać ;-) Rozbij to na font-family, font-size, line-height itp.
Zajec
 
Posty: 167
Z nami od: 17 grudnia 2004, 22:32
Lokalizacja: Włocławek
Na górę

Postautor: yarek » 29 grudnia 2005, 22:31

Przeglądarka: Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.8) Gecko/20051111 Firefox/1.5

Zastrzelcie mnie, ale za Chiny nie mam pojęcia jak to zrobić. Oto co mi wyszło: http://www.yds.neostrada.pl/jog/index.html . Odziwo pod IE wygląda normalnie, ale pod Gecko ... to trzeba zobaczyć. Coś dziwnego się z tym dzieje ...
yarek
 
Na górę

Postautor: JBG » 29 grudnia 2005, 22:34

Przeglądarka: Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.8) Gecko/20051111 Firefox/1.5

Wobec tego masz pełen kod:
Kod: Zaznacz cały
<body>
<div id="glowny">
<div id="top">
<h1>top </h1>
<h2>nagłówek h2</h2>
</div>
 <div id="middle">
<h2>middle</h2>
  <p>tekst</p>
</div>
<div id="lewy">
<h3>lewy</h3>
   <ul class="catalog">
   <li>link</li>
   <li>link</li>
   <li>link</li>
  </ul>
<h3>lewy</h3>
  <ul class="catalog">
   <li>link</li>
   <li>link</li>
   <li>link</li>
  </ul>
</div>
 <div id="bottom">
 tekst
</div>
</div>
</body>

oraz css:
Kod: Zaznacz cały
body {
   background: #66B3CC;
   font: 10pt Tahoma,Verdana, Arial, Helvetica, sans-serif;
   text-align: center;
   margin: 25px 0 25px 0;
   }
   
#glowny {
   margin: 0 auto;
   width: 770px;
   background: #fff;
   padding: 0 4px;
   text-align: left;
   }
   
#top {
   background:#D6EDF5;
   border-bottom: 4px solid #fff;
   border-top: 4px solid #fff;
   }
   
#lewy {
    float:right;
    width:160px;
    padding:0;
margin:0;

}

#lewy h3{
display:block;
font-size:11pt;
margin:10px 8px 10px 0;
text-align:left;
}
.catalog {
   list-style: none;
   margin: 0;
   padding: 0;
   font: 9pt 'Courier New', monospace;
   }
   
.catalog a{padding-left: 10px;
text-decoration: none;
color: #000000;  }
.catalog a:hover{text-decoration: none;
color: #000000;}
              
#middle {float:left;
width:600px;
min-height: 500px;
padding:0;
   
   }
   
#bottom {
clear:both;
width:770px;
padding:5px 0;
margin:0 1px 2px 0;
font: 9pt 'Courier New', monospace;
color:#f0f0f0;
background:#2E5C6B;
border-bottom: 4px solid #fff;
   }
   
#bottom a { text-decoration: none;
color: #FFFFFF; }
#bottom a:hover { text-decoration: none;
color: #DBDBDB; }


Powinno zadziałać :D Oczywiście wszystko możesz dowolnie sobie zmieniać podług własnych wizji estetycznych!
Szaleniec nie jest człowiekiem, który utracił rozsądek. Szaleniec utracił wszystko, poza rozsądkiem.
JBG
 
Posty: 142
Z nami od: 17 marca 2005, 12:57
Lokalizacja: Dobre Miasto
Na górę

Postautor: Zajec » 29 grudnia 2005, 22:50

Przeglądarka: Opera/8.51 (X11; Linux i686; U; en)

Podam krótsze, bardziej przejrzyste rozwiązanie ;-) Dodaj do arkusza CSS:
Kod: Zaznacz cały
#middle:after { display: block; clear: both; content: ""; }

#entries { float: left; width: 600px; }
.cat { float: right; width: 100px; }
.cat2 { float: right; clear: right; width: 100px; }
Zajec
 
Posty: 167
Z nami od: 17 grudnia 2004, 22:32
Lokalizacja: Włocławek
Na górę

Postautor: yarek » 29 grudnia 2005, 23:00

Przeglądarka: Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.8) Gecko/20051111 Firefox/1.5

Szczerze Ci powiem, że mnie zaskoczyłeś :D Nie wiedziałem o takim rozwiązaniu ... :) Dzięki serdeczne za pomoc :D Kurde, musze się jeszcze sporo nauczyć :-?
yarek
 
Na górę
Odpowiedz

Wróć do Tworzenie stron WWW

Kto jest online

Zarejestrowani użytkownicy: Baidu [Spider], Bing [Bot], Google [Bot]

Powered by phpBB® Forum Software © phpBB Group
Przejdź do powiązanej strony

Nawigacja:

Stopka: