Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS] 3 kolumnowy uklad strony z logiem
Forum PHP.pl > Forum > Przedszkole
silesian
30.07.2008, 22:31:24
Witam,
dopiero zaczynam uczyc sie robic strony i juz napotkalem problem.
Z tego co wyczytalem(m. innymi na tym forum) jak robic taki uklad to nalezy zrobic jeden duzy div, ktory chce by byl jednej ustalonej szerokosci i dlugosci i byl zawsze byl wypozycjonowany na samym srodku strony niezaleznie od tego czy ktos oglada ta strone na monitorze 17 calowym czy 24 calowym. W tym duzym divie chcialbym umiescic 4 mniejsze, jeden u gory i caly ten div zajmowaloby zdjecie bedace logiem. Pozostale 3 divy bylyby kolumnami, dwa divy tej samej wielkosci po bokach,w ktorych bylby tekst, i jeden duz wiekszy pomiedzy nimi i w nim bylyby zdjecia badz tekst. Pod tymi divami chcialbym umiescic jeszcze jeden ze stopka.
Czy ktos moglby mi podac jakas wskazowe jak to zrobic?
Bo jak sam probowalem to robilem jeden duzy div, a w nim jeszcze jeden nadawalem mu taka sama szerokosc jak duzemu divowi i wstawialem zdjecie,takie sajmej szerokosci, a wszystko i tak nie wygladalo tak jak chcialem, nie mowiac juz o tym, ze nie udalo mi sie nawet dobrze ustawic tego duzego diva by byl po srodku.
JoShiMa
30.07.2008, 22:42:40
Polecam na początek lekturę obowiązkową.
neverever
30.07.2008, 22:51:42
Gotowce znajdzies tu: http://www.google.com/search?hl=pl&cli...=Szukaj&lr= -zobacz jak są zrobione.

Całość rozbija się o odpowiednie wymiarowanie i wyrównanie floatem.
silesian
31.07.2008, 09:50:50
Dobra dzieki stronie, ktora joshima pdales, zrobilem 3 kolumnowy uklad strony.
2 bocznych kolumnach dalem jakis tam background-color lecz chce by ten kolor zajmowala cala kolumne od loga do stopki, a nie tylko ten obszar, w ktorym jest tekst w tej kolumnie. Jak to zrobic?
Oraz mam jeszcze taki problem, ze w divie po srodku, w ktorym ma byc jakas tam tresc strony, umiescilem zdjecie, lecz gdy chce dodac background-color do tego diva wyskakuje obok obrazka tylko mala cienka kreska z tym kolorem, jak zrobic by caly ten div mial tlo koloru takiego jaki okresle w css?
JoShiMa
31.07.2008, 09:56:31
Cytat(silesian @ 31.07.2008, 10:50:50 ) *
Dobra dzieki stronie, ktora joshima pdales

Podałaś exclamation.gif!


Cytat(silesian @ 31.07.2008, 10:50:50 ) *
2 bocznych kolumnach dalem jakis tam background-color lecz chce by ten kolor zajmowala cala kolumne od loga do stopki, a nie tylko ten obszar, w ktorym jest tekst w tej kolumnie. Jak to zrobic?

Aaaa. To już wyższaśzkoła jazdy:
http://perfectionorvanity.com/2007/03/07/r...ny-layoutu-css/
http://perfectionorvanity.com/2006/08/08/b...a-kolumn-w-css/


Cytat(silesian @ 31.07.2008, 10:50:50 ) *
Oraz mam jeszcze taki problem, ze w divie po srodku, w ktorym ma byc jakas tam tresc strony, umiescilem zdjecie, lecz gdy chce dodac background-color do tego diva wyskakuje obok obrazka tylko mala cienka kreska z tym kolorem, jak zrobic by caly ten div mial tlo koloru takiego jaki okresle w css?

Musiałes się machnąć. Pokaz kod.
silesian
31.07.2008, 22:30:32
Z tymi kolumnami to se dam spokoj, bo nie dam rady tego zrobic;]
Natomiast mam inny problem chcialbym dac jakis background image w divie tresc ale no nie wyswietla mi go jak wpisze background-image: url(tutajadresobrazka);
Tutaj kod:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  4.   <title></title>
  5.   <style type="text/css">
  6.   html, body {
  7. 	background-color: #fff;
  8. 	color: #000;
  9. 	margin: 0;
  10. 	padding: 0;
  11. }
  12. #top {
  13. 	width: 920px;
  14. }
  15.  
  16. #NAGLOWEK {
  17. 	background-color: #888;
  18. }
  19.  
  20. #MENU {
  21. 	width: 150px;
  22. 	float: left;
  23. 	overflow: hidden;
  24. 	background-color: #ccc;
  25. }
  26.  
  27. #INFORMACJE {
  28. 	width: 150px;
  29. 	float: right;
  30. 	overflow: hidden;
  31. 	background-color: #ccc;
  32. }
  33.  
  34. #TRESC {
  35. 	width: 480px;
  36. 	float: left;
  37. 	overflow: hidden;
  38. 	background-image:url("obrazek.jpg");
  39. 	}
  40. #STOPKA {
  41. 	clear: both;
  42. 	width: 100%;
  43. 	background-color: #888;
  44. }
  45.  
  46.  
  47.   </style>
  48.   <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
  49. </head>
  50. <body>
  51. <div id="top">
  52. 	<div id="NAGLOWEK"><img src="panorama.jpg" /> </div>
  53. 	<div id="MENU">
  54. menu nawigacyjne
  55. 	</div>
  56. 	<div id="INFORMACJE">
  57. Dodatkowe informacje	
  58. 	</div>
  59. 	<div id="TRESC"></div>
  60. 	<div id="STOPKA">Stopka serwisu</div>
  61. </div>
  62. </body>
  63. </html>
[HTML] pobierz, plaintext
Pilsener
1.08.2008, 07:44:45
Div TOP jest zbędny - po to jest html+body. Zamiast diva nagłówek lepiej dać <h1>, a <img src="panorama.jpg" /> wywalić do CSS - stałe elementy laya powinny być w CSS, img służy do wstawiania obrazków do treści. Jak chcesz układ 3-kolumnowy to na moim blogu masz taki - musisz tylko nadać body stałą szerokość jeśli nie chcesz, aby strona się dostosowywała do rozdzielczości.

Cytat
nie wyswietla mi go jak wpisze background-image:
- a jak dasz background-color to też nic nie ma? Jakie wymiary ma div TRESC? Widać dokładnie tyle tła, ile x na y ma obiekt, w którym się znajduje. Jeśli obiekt jest większy do tła to tło zacznie się powtarzać (lub nie, bo to też możemy ustawić, podobnie jak pozycję tła).
JoShiMa
1.08.2008, 07:48:07
A ten obrazek co ma być tłem jest w tym samym katalogu co css?
silesian
1.08.2008, 09:34:28
Tak jest na sto procent w tym samym katalogu.
Pilsener moglbys podac link?
silesian
1.08.2008, 22:32:37
Po dodaniu do divu tresc background-color: black; nie zapelnia sie caly div kolorem czany, tylko niewielka linia.
Moze to przez to nie moge dodac obrazka jako background-image?
Tak to wyglada:
silesian
1.08.2008, 22:33:42
Sorry za double posta ale jako gosc nie moge edytowac. Oczywiscie to wszystko co jest biale miedzy kolumnami to powinien byc div tresc.
silesian
2.08.2008, 20:16:17
Naprawde nikt nie wie dlaczego nie moge tego obrazka wstawic?
JoShiMa
4.08.2008, 09:03:44
Na tej miniaturce naprawdę nie widać o co Ci chodzi.
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.