Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS] Rozwiazania graficzne
Forum PHP.pl > Forum > Przedszkole
Carveth
14.04.2010, 17:17:25
Witam!

Mam pewien problem dot. laya - niby ze wszystko ok ale okazuje sie ze z powodu trudnego ulozenia ciezko bedzie mi ustawic dobrze laya

Oto obrazek budowy laya


Kolorem srebrnym oznaczylem tabele o szerokosci 100% siegajacej gdzies do polowy wysokosci str (bez suwaka!), jest tam pocieta grafika z ktora nie bylo problemu wstawic na strone

Kolorem czarnym zaznaczylem pole w ktorym jest tekst ale ze bedzie to tabela ktora wychodzi poza ta powyzsza str i mam zamiar ja zrobic divem

bialym oznaczylem pole w ktorym powinien byc obraz rozciagajacy sie na szerokosc str - ale nie mam pojecia w jaki sposob zrobic rozciagliwosc na cala strone jako tlo

fioletowym kolejna rzecz wystajaca z czarnego ktora pewnie tez bedzie trzeba dac divem

Jak uporac sie z takim layem?
Prosze o pomoc
pedro84
14.04.2010, 17:23:31
Pozycjonowanie relatywne + absolutne się zapewne przyda. Trudno tak ze schematu wywróżyć. W tym szarym bloku też będą jakieś dane?
Carveth
14.04.2010, 17:26:41
Tak - ma byc tam tekst i prawdopodobnie bedzie sie tam rozciagal
pedro84
14.04.2010, 17:31:23
No to tak jak mówię, relative + absolute i nie powinno być żadnego problemu. Jak dobrze zakodujesz (w sensie, bez tabel jak nie masz danych tabelarycznych i dobry CSS będziesz miał) to nawet IE nie powinno mieć problemów.
krzysztof_kf
14.04.2010, 17:33:17

Proszę grafike wrzuć sobie sam tongue.gif
[CSS] pobierz, plaintext 
  1. <!DOCTYPE html
  2.         PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  3.         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
  5. <head>
  6.    <title>Test ! </title>
  7.    </head>
  8.    <body>
  9. <style>
  10. body {
  11. margin: 0;
  12. background: #00ff00;
  13. }
  14.  
  15. #header {
  16. height: 200px;
  17. background: #3399ff;
  18. }
  19.  
  20. #top {
  21. width: 800px;
  22. margin: 0 auto;
  23. }
  24.  
  25. #content {
  26. width: 500px;
  27. height: 400px;
  28. margin: 100px 0 0 0;
  29. float: left;
  30. background: #fff;
  31. }
  32.  
  33. #content-sidebar {
  34. width: 250px;
  35. height: 300px;
  36. margin: 200px 0 0 50px;
  37. background: #ff0000;
  38. float: left;
  39. }
  40.  
  41. </style>
  42.  
  43. <div id="header">
  44. <div id="top">
  45. <div id="content">
  46. </div>
  47. <div id="content-sidebar">
  48.    </div>
  49. </body>
  50.    </html>
[CSS] pobierz, plaintext
Carveth
16.04.2010, 18:58:48
mm ten szablon okazal sie wielce przydatny winksmiley.jpg

mam jednak kolejny problem - menu jest jedna grafika i nie wiem jak do divow (pustych pol) przypisac link - tak to wyglada

<div style="position: relative; background-image: url('xxx'); width:450px; height:32px">
<div style="top: 5px; left: 13px; position: absolute; width: 100px; height: 20px;"></div>
<div style="top: 5px; left: 157px; position: absolute; width: 60px; height: 20px;"></div>
<div style="top: 5px; left: 258px; position: absolute; width: 70px; height: 20px;"></div>
<div style="top: 5px; left: 373px; position: absolute; width: 65px; height: 20px;"></div>
</div>
krzysztof_kf
16.04.2010, 19:26:50
Przykładowe menu powinno wyglądać tak 

[CSS] pobierz, plaintext 
  1. .menu {
  2. width: 780px;
  3. height: 30px;
  4. margin: 0 auto 0 auto;
  5. }
  6.  
  7. .menu ul, ul li {
  8. height: 30px;
  9. display: inline;
  10. list-style: none;
  11. margin: 0;
  12. padding: 0;
  13. }
  14.  
  15. .menu ul {
  16. float: left;
  17. margin: 0 0 0 8px;
  18. }
  19.  
  20.  
  21. .menu ul a {
  22. padding: 6px 6px 6px 6px;
  23. line-height: 1.8em;
  24. font-size: 1em;
  25. text-decoration: none;
  26. font-weight: bold;
  27. color: #ffffff;
  28. }
  29.  
  30. .menu ul a:hover {
  31. color: #000000;
  32. background: url(grafika.png) repeat-x;
  33. }
  34.  
  35. .menu ul li {
  36. padding-left: 6px;
  37. background: url(grafika.png) no-repeat left;
  38. }
  39.  
[CSS] pobierz, plaintext


i 

[HTML] pobierz, plaintext 
  1. <div class="menu">
  2. <ul>
  3. <li><a href="twoj link ">Home</a></li>
  4. <li><a href="twoj link">Oferta</a></li>
  5. <li><a href="twoj link">Formularz kontaktowy</a></li>
  6. </ul>
  7. </div>
[HTML] pobierz, plaintext
Carveth
18.04.2010, 19:13:00
Nie o to chodzi... chce by linkiem bylo puste pole diva w odpowiednim polozeniu np o szerokosci 100 wysokosci 20 a nie tekst
pedro84
18.04.2010, 19:19:31
Cytat(Carveth @ 18.04.2010, 20:13:00 ) *
Nie o to chodzi... chce by linkiem bylo puste pole diva w odpowiednim polozeniu np o szerokosci 100 wysokosci 20 a nie tekst


No to ukrywasz to za pomcoą ujemnego text-indent i już.
Carveth
18.04.2010, 19:31:07
mozna prosic o przykladowy kod?
krzywy36
18.04.2010, 19:35:19
może po prostu 
[HTML] pobierz, plaintext 
  1. <a href="#"><div></div></a>
[HTML] pobierz, plaintext

?
pedro84
18.04.2010, 19:37:03 
[CSS] pobierz, plaintext 
  1. text-indent:-999em;
[CSS] pobierz, plaintext


@up: Diva w a? Oszalałeś? Element blokowy wewnątrz liniowego? Znasz cos takiego jak display:block? I sztywne ustawienie rozmarów?
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.