Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [HTML][CSS] Div obok / przylegający do wyśrodkowanego diva
korro
post
Post #1





Grupa: Zarejestrowani
Postów: 259
Pomógł: 42
Dołączył: 8.04.2005
Skąd: Mława

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

Witam.

Kod strony:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3.     <head>
  4.         <title></title>
  5.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6.         <style type="text/css">
  7.             #div1 {
  8.                 background-color:blue;
  9.                 width:100px;
  10.                 height:100px;
  11.             }
  12.             #div2 {
  13.                 background-color:red;
  14.                 width:600px;
  15.                 height:400px;
  16.                 margin-left:auto;
  17.                 margin-right:auto;
  18.  
  19.             }
  20.         </style>
  21.     </head>
  22.     <body>
  23.         <div id="div1"></div>
  24.         <div id="div2"></div>
  25.     </body>
  26. </html>
[HTML] pobierz, plaintext

Działająca: http://krr.ayz.pl/forum/1.html

Chciałbym aby czerwony kwadrat był w jednej linii z niebieskim, ale najważniejsze, aby przylegał do niego z lewej strony.
O tak: (IMG:http://krr.ayz.pl/forum/1.png)
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
ziqzaq
post
Post #2





Grupa: Zarejestrowani
Postów: 428
Pomógł: 128
Dołączył: 17.06.2007

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

Witam.
Efekt można osiągnąć też przez position: absolute, nie trzeba dzięki temu dużo kombinować z kodem.
[HTML] pobierz, plaintext 
  1.         <style type="text/css">
  2.             #div1 {
  3.                 background-color:blue;
  4.                 width:100px;
  5.                 height:100px;
  6. 		position: absolute;
  7. 		top: 0;
  8. 		left: -105px;
  9.             }
  10.             #div2 {
  11.                 background-color:red;
  12.                 width:600px;
  13.                 height:1200px;
  14.                 margin: 25px auto;
  15. 		position: relative;
  16.             }
  17.         </style>
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
  1.         <div id="div2">
  2. 		<div id="div1"></div>
  3. 	</div>
[HTML] pobierz, plaintext

Tylko trzeba pamiętać o prawidłowym DOCTYPE bo IE8 się zbuntuje, np:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1 transitional.dtd">
[HTML] pobierz, plaintext

Nie wiem tylko czy IE6 to łyknie (w sumie powinien).

Ten post edytował ziqzaq 22.11.2009, 14:43:21
Go to the top of the page
+Quote Post

Posty w temacie
- korro   [HTML][CSS] Div obok / przylegający do wyśrodkowanego diva   22.11.2009, 13:41:44
- - koderrr   float:left dla obu divow ? float:left dla obu div...   22.11.2009, 14:04:53
- - korro   div2 musi zostać centralnie. div1 przylegać do nie...   22.11.2009, 14:04:55
- - seth-kk   raczej cos w stylu [HTML] pobierz, plaintext <d...   22.11.2009, 14:10:56
- - ziqzaq   Witam. Efekt można osiągnąć też przez position: ab...   22.11.2009, 14:42:44
- - koderrr   wstaw jeden div container nadaj mu margin:auto ws...   22.11.2009, 14:54:19
- - korro   @koderrr: chodziło mi o to, żeby centralnie umiesz...   22.11.2009, 15:32:18

« Następny starszy · Po stronie przeglądarki · 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: Przełącz na: Standardowy · Przełącz na: Linearny+ · Drzewo

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

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