Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [CSS][HTML]pozycjonowanie div
Johnas
post
Post #1





Grupa: Zarejestrowani
Postów: 650
Pomógł: 16
Dołączył: 5.07.2010
Skąd: Ściśle Tajne

Ostrzeżenie: (0%)
-----

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:
(IMG:http://iv.pl/images/10275645150599185557.png)

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.
Go to the top of the page
+Quote Post
rocktech.pl
post
Post #2





Grupa: Zarejestrowani
Postów: 587
Pomógł: 131
Dołączył: 8.02.2010

Ostrzeżenie: (0%)
-----

Witam.

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

Go to the top of the page
+Quote Post
Johnas
post
Post #3





Grupa: Zarejestrowani
Postów: 650
Pomógł: 16
Dołączył: 5.07.2010
Skąd: Ściśle Tajne

Ostrzeżenie: (0%)
-----

nie pomogło.
Go to the top of the page
+Quote Post
rocktech.pl
post
Post #4





Grupa: Zarejestrowani
Postów: 587
Pomógł: 131
Dołączył: 8.02.2010

Ostrzeżenie: (0%)
-----

Chyba wszystko jasne?
[HTML] pobierz, plaintext 
  1. <!--<div style="tree_frame">-->
  2. <div class="tree_frame">
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
Johnas
post
Post #5





Grupa: Zarejestrowani
Postów: 650
Pomógł: 16
Dołączył: 5.07.2010
Skąd: Ściśle Tajne

Ostrzeżenie: (0%)
-----

a wyśrodkowanie?
Go to the top of the page
+Quote Post
wNogachSpisz
post
Post #6





Grupa: Zarejestrowani
Postów: 1 233
Pomógł: 87
Dołączył: 6.03.2009

Ostrzeżenie: (40%)
XX---

grid960 rozwiąże Twoje problemy.
Go to the top of the page
+Quote Post
Johnas
post
Post #7





Grupa: Zarejestrowani
Postów: 650
Pomógł: 16
Dołączył: 5.07.2010
Skąd: Ściśle Tajne

Ostrzeżenie: (0%)
-----

niestety grid tez nie daje rady (IMG:style_emoticons/default/smile.gif)
Go to the top of the page
+Quote Post
by_ikar
post
Post #8





Grupa: Zarejestrowani
Postów: 1 798
Pomógł: 307
Dołączył: 13.05.2009
Skąd: Gubin/Wrocław

Ostrzeżenie: (0%)
-----

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ć.
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 24.08.2025 - 00:37
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn