Skocz do zawartości

Zdjęcie
* * * * * 1 głosy

Wyśrodkowanie tekstu w pionie wewnątrz diva o szerokości wyrażonej w wartościach procentowych.


7 odpowiedzi w tym temacie
  • Zaloguj się, aby dodać odpowiedź
Novante

    Nowy użytkownik

  • 6 postów
    • Czas spędzony online: 1h 48m 10s
-1
Neutralna

Napisano 20 września 2014 - 07:51

#1
Witam. Podczas rozpoczynania pracy nad szablonem typu One Page, napotkałem problem dotyczący wyśrodkowania tekstu wewnątrz diva, który nie posiada wysokości ustalonej w pikselach lecz w procentach, próbowałem szukać informacji w Google lecz i tam nic nie znalazłem. Znalazłby się ktoś kto by był w stanie mi pomóc?
Plik index.html:
 <!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>OnePage Theme</title>
  <link rel="stylesheet" href="layout/stylesheets/style.css">
 </head>
 <body>
  <div id="wrapper">
   <section>
    <span>Lorem ipsum 1</span>
   </section>
   <section>
    <span>Lorem ipsum 2</span>
   </section> 
  </div>
 </body>
</html> 
Plik style.css
 * {
	margin: 0;
	padding: 0;
	-moz-box-sizing: border-box;
 	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
html, body {
	background: rgb(20,20,20);
	height: 100%;
}
#wrapper {
	height: 100%;
}
#wrapper section {
	width: 100%;
	min-height: 100%;
	background-color: rgb(255,99,99);
	position: relative;
	overflow: hidden;
	margin-bottom: 2px;
} 

Użytkownik Novante edytował ten post 20 września 2014 - 07:52

  • -1

zonic

    WT Elite

  • 2 911 postów
    • Czas spędzony online: 134d 2h 28m 23s
472
Znakomita!
  • LocationToruń

Napisano 20 września 2014 - 08:31

#2
#wrapper section span{
    position: absolute;
    top: 50%;
}

Powinno pomóc ;)

UPDATE:

Mała uwaga. Do tego typu kawałków kodu proponuję wrzucać demka: http://jsfiddle.net/9qp18bef/


  • 0

Novante

    Nowy użytkownik

  • 6 postów
    • Czas spędzony online: 1h 48m 10s
-1
Neutralna

Napisano 20 września 2014 - 08:40

#3
Twój sposób działa lecz co będzie jeżeli tekst będzie dłuższy? Niezbyt to będzie się prezentowało. Nie ma jakiegoś sposobu z marginami? Do tej pory żaden taki nie chciał u mnie działać.
  • 0

Zimistrz

    Stary wyjadacz

  • 465 postów
    • Czas spędzony online: 14d 2h 42m 38s
116
Znakomita!

Napisano 21 września 2014 - 20:25

#4

Onepagera tworzysz w z góry określonych ramach i rozmiarach konkretnych elementów, z tekstem który nie będzie zarządzalny.

W przeciwnym razie chybiłeś z wyborem prawidłowego rozwiązania.


  • 1

unbreak

    WT Elite

  • 1 937 postów
    • Czas spędzony online: 27d 8h 43m 36s
506
Znakomita!
  • Location/home/unbreak

Napisano 22 września 2014 - 08:08

#5


Onepagera tworzysz w z góry określonych ramach i rozmiarach konkretnych elementów, z tekstem który nie będzie zarządzalny.
Nope.

One page - takie prawdziwe, jeszcze z parallaxem, tworzy się na zasadzie że każdy 'box' jest rozmiaru okna przeglądarki, czyli jak ktoś zmniejszy okno to i jeden 'box' się zmniejsza i tak dalej.

 

Jeżeli robisz taką pro trendową stronę to pewnie też lejesz na stare IE, w takim razie zalecam HTML5: http://slides.html5r...com/#flex-box-2


  • 0

webDeveloper


Zimistrz

    Stary wyjadacz

  • 465 postów
    • Czas spędzony online: 14d 2h 42m 38s
116
Znakomita!

Napisano 24 września 2014 - 13:31

#6

Co z dopasowaniem gdy wkleję w warstwę kilometr tekstu* ?

Tylko bez wykrętów że się js-owy suwak dołoży* :)

 

*poza tym że to dalej chybia o kilometr od konceptu onepagera


  • 0

unbreak

    WT Elite

  • 1 937 postów
    • Czas spędzony online: 27d 8h 43m 36s
506
Znakomita!
  • Location/home/unbreak

Napisano 24 września 2014 - 14:59

#7

No to sorry, źle to ująłem :)

Każdy box jest wysokości co najmniej wysokości okna :D Choć teoretycznie powinien być nie mniejszy, nie większy. Jak masz za dużo tekstu to nie robisz takich stron, są one bardziej do prezentowania czegoś, niż opisywania, albo rozbijasz na różne sekcje i robisz np coś a'la slider czy inny paginator.


  • 0

webDeveloper


Zimistrz

    Stary wyjadacz

  • 465 postów
    • Czas spędzony online: 14d 2h 42m 38s
116
Znakomita!

Napisano 24 września 2014 - 16:24

#8

unbreak: "generowanie" onepagerów opanowałem już sporo czasu temu (imo: nie podoba mi się ta "technologia"), ale polemizujemy tutaj o możliwość zarządzania treścią kontenerów ;)

Co zatem robisz z fantem, gdzie raz będzie 1 zdanie ( z założenia projektowego: niestandardowy font ok 20pt) a po miesiącu edytor będzie próbował załadować w to miejsce tekst >A4 ?

 

hint: bombardując to JS-em położymy przeglądarkę przy evencie wywoływanym nonstop do sprawdzania rozmiaru okna przy próbie operacji na wielkości i sytuowaniu tekstu B)


  • 1





Podone tematy Collapse

Użytkownicy przeglądający ten temat: 0

0 użytkowników, 0 gości, 0 anonimowych