Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS] Div obok / przylegający do wyśrodkowanego diva
Forum PHP.pl > Forum > Po stronie przeglądarki
korro
22.11.2009, 13:41:44
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:
koderrr
22.11.2009, 14:04:53
float:left dla obu divow ?

float:left dla obu divow ?
korro
22.11.2009, 14:04:55
div2 musi zostać centralnie. div1 przylegać do niego.
seth-kk
22.11.2009, 14:10:56
raczej cos w stylu
[HTML] pobierz, plaintext 
  1. <div style="width: 700px; margin: 0 auto; overflow: hidden;">
  2.    <div style="float: left; width: 100px;"></div>
  3.    <div style="float: rigth; width: 600px"></div>
  4. </div>
[HTML] pobierz, plaintext

//update zeby szerszy div byl na srodku margin: 0 auto zamien na cos w stylu left: 50%; margin: -400px;
ziqzaq
22.11.2009, 14:42:44
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).
koderrr
22.11.2009, 14:54:19
wstaw jeden div container nadaj mu margin:auto

wstaw swoje dwa divy wewnatrz i ustaw im float:left

marginy zostaw w spokoj przy tych divach-> wywal je


[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.                 float:left;
  12.             }
  13.             #div2 {
  14.                 background-color:red;
  15.                 width:600px;
  16.                 height:400px;
  17.                float:left;
  18.                }
  19.              #div3 {
  20.                 margin:auto;
  21.                 width:700px;
  22.                 height:400px;
  23.  
  24.             }
  25.         </style>
  26.     </head>
  27.     <body>
  28.         <div id="div3">
  29.         <div id="div1"></div>
  30.         <div id="div2"></div>
  31.         </div>
  32.     </body>
  33. </html>
  34.  
  35.  
  36.  
  37.  
  38.  
  39.  
  40.  
  41.  
  42.  
  43.  
  44.  
  45.  
[HTML] pobierz, plaintext
korro
22.11.2009, 15:32:18
@koderrr: chodziło mi o to, żeby centralnie umieszczony był duży div, mały miał być obok. Twoje rozwiązanie centruje całość.

@ziqzaq: dzięki, to właśnie to.
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.