Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS] Zakodowanie
Forum PHP.pl > Forum > Przedszkole
Turson
24.07.2010, 00:50:01
Mam takowy element do zakodowania , który odpowiada za główną część strony - oraz sam środek.
Aktualnie ustawiłem to jako tło i nadałem określoną wysokość. I właśnie ona mi się nie podoba, bo jak tekst będzie dłuższy to się nie zmieni a tekst wyjedzie poza nie.
Myślałem o wycięciu góry, zakodowania jakoś (nie wiem jak) i dalej środek jako tło i znów wycięty dół.
pedro84
24.07.2010, 01:27:33
No i tak zrób. Góra + 1px środek + dół. Ewentualnie użyj CSS3.
slightyboy
24.07.2010, 01:38:48
Możesz spróbować z "border-radius" (i odpowiednikami dla różnych przeglądarek), jednak wówczas na starszych browserach zaokrąglenie nie będzie widoczne. Inne rozwiązanie to te, które pokrótce opisałeś - wycięcie części górnej i dolnej, a po środku stworzenie kontenera. smile.gif
!*!
24.07.2010, 08:18:38
Daj sobie spokój ze wsparciem dla starszych przeglądarek. Użyj po prostu css:

[CSS] pobierz, plaintext 
  1. border-radius: 5px; //normalna wartość, działa też dla opery
  2. -webkit-border-radius: 5px; //safari, chrome
  3. -moz-border-radius: 5px; //firefox
[CSS] pobierz, plaintext


Dla IE użyj w komentarzu warunkowym JS, np. mintajax
Turson
24.07.2010, 13:18:44
Cytat(!*! @ 24.07.2010, 09:18:38 ) *
Daj sobie spokój ze wsparciem dla starszych przeglądarek. Użyj po prostu css:

[CSS] pobierz, plaintext 
  1. border-radius: 5px; //normalna wartość, działa też dla opery
  2. -webkit-border-radius: 5px; //safari, chrome
  3. -moz-border-radius: 5px; //firefox
[CSS] pobierz, plaintext


Dla IE użyj w komentarzu warunkowym JS, np. mintajax

Właściwie co to da i jak zastosować?


EDIT
Zrobiłem tak:
[HTML] pobierz, plaintext 
  1. #main {
  2. background: url(bgc.jpg) repeat-x;
  3. vertical-align: top;
  4. width:900px;
  5. height:300px;
  6. margin:0px auto;
  7. padding:0;
  8. border-radius: 5px; //normalna wartość, działa też dla opery
  9. -webkit-border-radius: 5px; //safari, chrome
  10. -moz-border-radius: 5px; //firefox
  11. }
[HTML] pobierz, plaintext

Ale cos nie dziala
Adam_
24.07.2010, 13:35:11
Cytat(TursoN @ 24.07.2010, 14:18:44 ) *
Właściwie co to da i jak zastosować?


EDIT
Zrobiłem tak:
[HTML] pobierz, plaintext 
  1. #main {
  2. background: url(bgc.jpg) repeat-x;
  3. vertical-align: top;
  4. width:900px;
  5. height:300px;
  6. margin:0px auto;
  7. padding:0;
  8. border-radius: 5px; //normalna wartość, działa też dla opery
  9. -webkit-border-radius: 5px; //safari, chrome
  10. -moz-border-radius: 5px; //firefox
  11. }
[HTML] pobierz, plaintext

Ale cos nie dziala



Nie jestem pewny, ale takie zaokrąglenie chyba nie działa, gdy ten div jest wypełniony obrazkiem - wydaje mi się, że działa tylko wtedy kiedy wypełnisz go jednym kolorem lub gradientem w CSS3. Jesli się mylę, to mnie poprawcie.
bastard13
24.07.2010, 13:45:38
Zrób tak, jak ci napisał pedro84, czyli góra, środek, dół.
Nie dużo pracy i brak problemów z wyświetlaniem na różnych przeglądarkach.
Oczywiście możesz kombinować ze stylami i js, ale zapewniam cię, że pochłonie to znacznie więcej pracy i pod jakąś przeglądarką, najprawdopodobniej, będzie wyglądać nie tak, jak byś tego chciał.
glh
24.07.2010, 14:12:33
Jeżeli chodzi o to o czym wspomniałeś, czyli o podział na trzy bloki:

----------------------------------
góra z zaokrąglonymi rogami
----------------------------------

środek z treścią

----------------------------------
dół z zaokrąglonymi rogami
----------------------------------

to można to zrobić tak:

1.Tworzysz trzy obrazki - tła dla bloków o id gora, srodek, dol:
a) blok o id gora: wycinasz np. 13 pikseli(tak żeby było całe zaokrąglenie rogów) z gory i zapisujesz jako gora.png
cool.gif blok i id srodek: wycinasz np. 3 pikselowy prostokąt (lub jednopikselowy , czy jaki tam chcesz)
c) blok o id dol: tak samo jak z blokiem gora, możesz nawet obrócić plik góra.png w pionie jeżeli nie chce Ci się wycinać dolnych 14 pikseli

w kodzie strony dajesz:
[HTML] pobierz, plaintext 
  1. <div id="calosc">
  2.  <div id="gora"></div>
  3.  
  4.   <div id="srodek">
  5.     Tutaj dajesz jakis tekst.
  6.     <br/>Tutaj dajesz jakis tekst.
  7.     <br/>Tutaj dajesz jakis tekst.
  8.    </div>
  9.  
  10.    <div id="dol"></div>
  11.    </div>
[HTML] pobierz, plaintext


W arkuszu stylów:

[HTML] pobierz, plaintext 
  1. #gora
  2. {
  3.  width:851px;
  4.  height:13px;
  5.  background:url(gora.png) no-repeat;
  6. }
  7.  
  8. #srodek
  9. {
  10.  width:851px;
  11.  zoom:1;
  12.  background:url(srodek.png) repeat-y;
  13. }
  14.  
  15. #dol
  16. {
  17.  width:851px;
  18.  height:14px;
  19.  background:url(dol.png) no-repeat;
  20. }
  21.  
  22. #calosc
  23. {
  24.  width:851px;
  25.  zoom:1;
  26.  overflow:visible;
  27. }
[HTML] pobierz, plaintext



Dla IE należy jeszcze dodać !DOCTYPE (koniecznie z adresem www), np:
[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
Turson
24.07.2010, 14:34:27
GLH, wielkie dzięki.

Przy divie srodek mam problem.
Mam tak:
[HTML] pobierz, plaintext 
  1. <div id="main">
  2. <div id="text" class="text">tekst
[HTML] pobierz, plaintext

Div text to bardzo wazna czesc - kolor tekstu, lokalizacja itd.
Wtedy tekst po divie tekst nie wyświetla się w main


txt
[HTML] pobierz, plaintext 
  1. .text {
  2. float:left;
  3. color:white;
  4. font-size:20px;
  5. padding: 0px;
  6. margin-top:40px;
  7. margin-left:50px;
  8. }
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
  1. #main {
  2. width:900px;
  3. zoom:1;
  4. background:url(cent.png) repeat-y;
  5. vertical-align: top;
  6. margin:0px auto;
  7. padding:0;
  8.  
  9. }
[HTML] pobierz, plaintext


HTML
[HTML] pobierz, plaintext 
  1. <div id="gora"></div>
  2. <div id="main">
  3. <div id="text" class="text">
  4. <form method="post" id="upload_form" enctype="multipart/form-data" action="upload.php">
  5.  
  6. 		<input name="userfile[]" type="file" size="50" /> <br />
  7. <input name="userfile[]" type="file" size="50" /> <br />
  8. <input name="userfile[]" type="file" size="50" /> <br />
  9. 		<span id="more_file_inputs"></span> <br />
  10.  
  11.  
  12.                 <br />
  13.  
  14.  
  15. 		<div id="upload" class="upload"><input class="button"  type="button" value="Start"/></div>
  16. 	</p>
  17. </form>
  18. </div>
  19. <div id="textp" class="textp"><center>REKLAMA<br><br>REKLAMA<br><Br>REKLAMA<br><br>REKLAMA</div></center>
[HTML] pobierz, plaintext
krzysztof_kf
24.07.2010, 14:51:21
daj dla selektora main

[CSS] pobierz, plaintext 
  1. overflow: hidden;
[CSS] pobierz, plaintext



jak nie działa wrzuć stronę na jakiś url żeby mieć podgląd .
!*!
24.07.2010, 14:56:30
Niepotrzebnie nakładacie dodatkowy kod, dobrze że jeszcze tabelek nie zaproponowaliście...

To działa bez problemu, również z tłem obrazkowym:

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>Zaokrąglenie</title>
  6. <link rel='stylesheet' href='style.css'/>
  7. <script type="text/javascript" src="mintAjax.js"></script>
  8. <script type="text/javascript">
  9. function round(){
  10. 	mint.fx.Round("text", "all", "normal");
  11. }
  12. window.onload = round;
  13. </script>
  14. </head>
  15. <body>
  16.  
  17. <div id="text">Text</div>
  18.  
  19. </body>
  20. </html>
[HTML] pobierz, plaintext


Do diva text dodaj tylko te parametry które podałem wyżej, oraz wgraj do katalogu plik mintAjax.js który ściągasz ze strony. Dodatkowo kod JS opakuj w komentarze warunkowe dla IE (bo i tak inne przeglądarki wspierają zaokrąglenie rogów, więc dlaczego mają dodatkowo pobierać dane). I nie baw się w budowę dokumentu "góra, środek, dół" to strata czasu, już o przejrzystości kodu nie wspomnę.
Turson
24.07.2010, 17:35:24
Pokombinowałem z tym i było dobrze. Potem nagle nie wiem od czego znów się troche zsypało.
http://turson.pl/a/

W źródle macie css i html kod
Substr
24.07.2010, 18:04:41
Chodzi o to, że ta belka trochę odstaje?

w style.css zamien
[HTML] pobierz, plaintext 
  1. #gora
  2. {
  3.  width:910px;
  4.  height:13px;
  5.  background:url(up.png) no-repeat;
  6.  margin:0px auto;
  7. }
[HTML] pobierz, plaintext

na
[HTML] pobierz, plaintext 
  1. #gora
  2. {
  3.  width:900px;
  4.  height:13px;
  5.  background:url(up.png) no-repeat;
  6.  margin:0px auto;
  7. }
[HTML] pobierz, plaintext


dokładnie wystarczyło zmienić szerokości z 910 na 900 px.

btw. wytnij to jakoś ładnie, bo brzydko wygląda.

ten kawałek możesz spokojnie zmniejszyć do 1 px wysokości.

glh
24.07.2010, 18:08:05
Blok #gora ma szerokość 910px, a powinno być 900px.
Popraw i będzie ok.

Ps. Obrazki, które służą za tło bloków #gora i #dol mają wysokość 22px, więc możesz taką im wysokość ustawić.
Te moje wartości (13 i 14) to takie przykładowe były.
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.