Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][HTML]pozycjonowanie div
Forum PHP.pl > Forum > Przedszkole
Johnas
15.02.2012, 15:35:27
Witam mam problem. otóż nie mogę wy pozycjonować dwóch divów.

Mój css wygląda tak:
[CSS] pobierz, plaintext 
  1. /* Getting the new tags to behave */
  2. article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video {display:block;}
  3. mark, rp, rt, ruby, summary, time {display:inline;}
  4.  
  5.  
  6.  
  7. body { 	 
  8. 	font-family:Arial, Helvetica, sans-serif;
  9. 	font-size:100%; 
  10. 	color:#fff;
  11. 	background:url(../images/bg.png) center 0 no-repeat #000;
  12. 	width:800px;
  13. 	font-size:0.75em;
  14. 	line-height:1.5em;
  15. }
  16. .logo {
  17. 	width:300px;
  18. 	position:absolute;
  19. 	margin-right: 0 auto;
  20. 	top:280px;
  21. }
  22. .box_home {
  23. 	background: url('../images/ramka.png')  no-repeat center top;
  24. 	width: 230px;
  25. 	height: 140px;
  26. 	float: left;
  27. 	padding: 15px 15px 15px 15px;
  28. 	margin: 0 3px 0 3px !important;
  29. 	margin: 0 2px 0 2px;
  30. 	border: none;
  31. }
  32.  
  33. .box_home a{
  34. 	position: relative;
  35. 	display: block;
  36. 	z-index: 100;
  37. 	border: 0px;
  38. }
  39.  
  40. .box_home img{
  41. 	border: none;
  42. }
  43.  
  44. .tree_frame {
  45. 	width:800px; 
  46. 	height: 100px;
  47. 	position:absolute; 
  48. 	top:300px;
  49. }
  50.  
  51. .lewo {
  52. 	float:left;
  53. }
  54.  
  55. .prawo {
  56. 	float:right;
  57. }
  58.  
  59. .center	{
  60. 	margin-right: auto;
  61. 	margin-left: auto;
  62. }
[CSS] pobierz, plaintext


kod HTML tak:
[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. 	<title>dbomb</title>
  4. 	<meta charset="utf-8">
  5. 	<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
  6. </head>
  7. <body>
  8. 	<img src="images/lg.png" border="0" class="logo"/>
  9. 	<div style="tree_frame">
  10. 		<div class="box_home">
  11. 			<a href="/klubGaleria.html" title="Kalendarz Imprez"> <img src="images/ki1.png" onmouseover="src='images/ki2.png'" onmouseout="src='images/ki1.png'" alt="Kalendarz Imprez" /> </a>
  12. 		</div>
  13. 		<div class="box_home">
  14. 			<a href="http://www.forum.clubara.pl" title="Forum"> <img src="images/box_wedrowka.jpg" alt="Forum" /> </a>
  15. 		</div>
  16. 		<div class="box_home">
  17. 			<a href="/__wedrowka.html" title="Wędrówka po salach klubu"> <img src="images/box_wedrowka.jpg" alt="Wedrowka po Clubie" /> </a>
  18. 		</div>
  19. 	</div>
  20. </body>
  21. </html>
[HTML] pobierz, plaintext


a wygląda wszystko tak:


Co chce? Chcę aby klasa "tree_frame" była na środku i na wysokości 300 pikseli od góry "top:300px;" a klasa logo była na środku. Niestety wszystkie sposoby jakie robie nie działają jak by coś blokowało.
rocktech.pl
15.02.2012, 15:41:43
Witam.

[CSS] pobierz, plaintext 
  1. body {
  2.     position:relative;
  3. }
[CSS] pobierz, plaintext

Johnas
15.02.2012, 15:54:07
nie pomogło.
rocktech.pl
15.02.2012, 16:00:50
Chyba wszystko jasne?
[HTML] pobierz, plaintext 
  1. <!--<div style="tree_frame">-->
  2. <div class="tree_frame">
[HTML] pobierz, plaintext
Johnas
15.02.2012, 16:34:46
a wyśrodkowanie?
wNogachSpisz
15.02.2012, 16:37:38
grid960 rozwiąże Twoje problemy.
Johnas
15.02.2012, 16:53:14
niestety grid tez nie daje rady smile.gif
by_ikar
15.02.2012, 17:06:24
Ten obrazek który masz pod spodem, który w zasadzie nie wiem w jakim celu zrobiłeś jako zwykły obrazek z pozycją absolutną.. :|

Robisz tak, dla body ustawiasz tło, któremu nadajesz pozycje, następnie tworzysz jeden kontener, który wyśrodkowujesz. Coś tam w tych stylach można zauważyć (klasa center), ale te klasy są niewykorzystane. Nie trzeba do tego żadnego grid, oraz żadnego pozycjonowania absolutnego/relatywnego.

Jak nie chcesz mieć jakichś komplikacji, to dorzuć doctype do swojego dokumentu, bo wykorzystujesz składnie xhtml'o podobną, a html5 (co sugeruje brak doctype) w którym pojedynczych tagów nie trzeba zamykać (img, input, br i tym podobne), więc ich nie zamykaj.

A ten onmouseover to po kiego grzyba tam jest? Przecież takie rzeczy to się w css robi..

Wrzuć online jakoś ten swój layout, tak żeby miał dostęp do obrazków, to ci będę mógł pokazać jak to mniej więcej powinno, lub może wyglądać.
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.