 [HTML][CSS] Bloczki, a w nich tekst. |
  |
| [HTML][CSS] Bloczki, a w nich tekst. |
 23.02.2014, 22:06:32
Post
#1
|
|
|
Grupa: Zarejestrowani Postów: 17 Pomógł: 0 Dołączył: 16.05.2013 Ostrzeżenie: (0%) 
 |
Dobra. Pewnie coś pomieszałem w temacie, ale mniejsza o to.
Mam takie coś: http://jsfiddle.net/danten1/SPyy6/ Chciałbym takie coś:  Trochę info. Mam stronę cała czarna, a w środku przebiega taki pomarańczowy pasek na cała szerokość jak widać width: 100%;. Na tym pasku chciałbym 2 kolorowe bloczki, aby wyróżniały się na tle pomarańczu, a w tych bloczkach sformatowany tekst. Cholera, niedawno przerabiałem kurs i było o tym, ale nie mogę odszukać materiału. Będę jeszcze miał prawdopodobnie problem z wypozycjonowaniem tych bloczków. |
 |
 
|
|
23.02.2014, 22:29:29
Post
#2
|
|
 Grupa: Zarejestrowani Postów: 2 350 Pomógł: 512 Dołączył: 4.01.2009 Skąd: Wrocław / Świdnica Ostrzeżenie: (0%)
|
Źle.
HTML: Kod <blok1> <blok2> <blokA>TEKST</blokA> <blokB>TEKST</blokB> </blok2> </blok1> CSS: Kod blok1 -> czarne tło + ew. nadana szerokoś -> background-color i height blok2 -> pomarańczowe tło, wypozycjonowanie w środku elementu -> background-color, positon, top lub margin-top blokA -> odstęp od krawędzi, kolor tła, lewa strona -> margin, background-color, float blokB -> odstęp od krawędzi, kolor tła, lewa strona -> margin, background-color, float Blok1 i Blok2 to <div>-y blokA i blokB to akapity -> <p> Czekam na pytania, jeśli będziesz miał problem  Pozdrawiam -------------------- |
|
|
|
|
23.02.2014, 23:37:16
Post
#3
|
|
|
Grupa: Zarejestrowani Postów: 17 Pomógł: 0 Dołączył: 16.05.2013 Ostrzeżenie: (0%)
|
To że pomarańczowy pasek jest na środku strony to tylko przykład. Takich pasków może być 10 bo taki mam układ strony. Strona jest złożona z pasków na 100% szerokości z podanymi wysokościami i na tych paskach zamieszczam tekst i w jednym z pasków chcę wypozycjonować bloczki. I tych bloczków może być 6, niekoniecznie 2. Zrobiłem coś takiego
HTML: Kod <div id=gora></div> <div id=pasek> <div id=blok1 class=prost>tekst1<br>tekst1</div> <div id=blok2 class=prost>tekst2<br>tekst2</div> </div> <div id=dol></div> Kod #gora { width: 100%; height: 100px; background-color: black; } #pasek { width: 100%; height: 150px; background-color: orange; } #dol { width: 100%; height: 100px; background-color: black; } div.prost { width: 220px; height: 140px; display: inline-block; } div#blok1 { background-color: #cee0d2; position: relative; left: 8px; top: 5px; } div#blok2 { background-color: #cee0d2; position: relative; left: 8px; top: 5px; } mniej więcej coś takiego: http://jsfiddle.net/danten1/77W8Z/ Jak widać bloczki pozycjonuję od krawędzi. Problem jest taki że jak przybliżam CTRL+PLUS to te bloczki się rozjeżdżają zamiast przybliżać nieruchomo. Do tego szerokość strony jest na 100% nie ma określonej szerokości, nie wiem czy to błąd z mojej strony i nie powinienem tego zmienić. Da radę pozycjonować bloczki od środka strony? Podam na przykładzie napisów. Napis bierzesz centrujesz i po kłopocie. Nie wiem jak ugryźć te bloczki żeby one właśnie były scentrowane do środka w równym rzędzie obok siebie. Zamieszałem? Ja idę chyba w kimono. Do jutra. Pozdrawiam również. P.S Jeszcze raz muszę przetrawić Twój kod bo napis w akapicie <p> z tłem wydaje się sensowniejszy - choć nie wiem  ale pytanie czy da radę pozycjonować takie bloczki, tudzież akapity względem środka, nadal pozostaje otwarte.
Ten post edytował prantan 23.02.2014, 23:43:42 |
|
|
|
|
24.02.2014, 11:57:49
Post
#4
|
|
|
Grupa: Zarejestrowani Postów: 2 350 Pomógł: 512 Dołączył: 4.01.2009 Skąd: Wrocław / Świdnica Ostrzeżenie: (0%)
|
Tak na szybko: http://jsfiddle.net/77W8Z/1/
-------------------- |
|
|
|
|
|
Wersja Lo-Fi | Aktualny czas: 30.04.2025 - 04:56 |
