Forum PHP.pl > [CSS][PHP]Prosty wygląd strony

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [CSS][PHP]Prosty wygląd strony

prantan

22.02.2014, 23:55:50

Cześć. Kiedyś miałem krótki epizod z pisaniem stron, rzuciłem to ale postanowiłem powrócić. Przerobiłem teorię, ale jak wiadomo trudno zapamiętać wszystko i przechodząc w praktykę trzeba się uczyć na bieżąco. Stąd moje pytanie. Na sam początek postanowiłem stworzyć prostą stronę. Strona składa się z pasków na całą szerokość z kolorami. Dajmy na to że jest tych pasków kilka, ale ja przedstawię na przykładzie 4 pasków poziomych rzecz jasna.

Mam taki kod w HTML, w body oczywiście

CODE

<div id=pasek1></div>
<div id=pasek2><p class=napis>Jakiś sobie napis widnieje.</p></div>
<div id=pasek3></div>
<div id=pasek4></div>

Tu kawałek kodu z CSS:

CODE

p.napis {
color: #;
font-size: 100px;
text-align: center;
font-family: Ściągnięta czcionka WEBFONT;

#pasek1 {
width: 100%;
height: 50px;
background-color: #;
}

#pasek2 {
width: 100%;
height: 250px;
background-color: #;
}

#pasek3 {
width: 100%;
height: 100px;
background-color: #;
}

#pasek4 {
width: 100%;
height: 100px;
background-color: #;
}

Kolory tła oraz nazwa czcionki są nieistotne. Ważny jest schemat.

Chodzi o to że jak wciskam Ctrl+Plus (czyli przybliżam widok), to napis wyśrodkowany w jednym z tych divów rozjeżdża się. Co powinienem zmienić by nie dochodziło do tego? Wejdźcie sobie na stronę wp.pl i wciśnijcie ctrl+plus. Strona przybliża się jak przy zoomowaniu aparatem i chcę uzyskać podobny efekt, tymczasem u mnie przy przybliżaniu strony tekst rozjeżdża się i z jednego tła wchodzi na drugi i robi się burdel. Pewnie jest to proste do rozwiązania, ale ja póki co tego nie czaję.
Czy fachowo taka strona nazywa się responsywna? Z tego co wiem responsywna potrafi łamać tekst, który nie wykracza poza określony obręb. A mi chodzi o to by po prostu dawało efekt przybliżenia. Nie wiem.

W międzyczasie idę przeszukiwać kursy może znajdę odpowiedź na nurtujące mnie pytanie, ale jak ktoś zna rozwiązanie to niech śmiało napisze

pzdr

krzysztof_kf

23.02.2014, 00:09:10

Do końca nie rozumiem ciebie ale ok, dodaj do podklasy p

[CSS] pobierz, plaintext 
white-space:nowrap;
[CSS] pobierz, plaintext

rad11

23.02.2014, 00:27:24

Na wp sie nie rozjeżdża bo contener ma prawdopodobnie szerokość 960px, a wtedy podczas oddalania i przybliżania poprzez twój sposób nic się nie rozjedzie.

prantan

23.02.2014, 00:40:39

Dzięki. Dałem to

Cytat

white-space:nowrap;

i zadziałało.

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.