Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [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:


--------------------
Zapraszam na mojego devbloga

Używasz Firefoxa? Skracaj linki jednym kliknięciem!
Go to the top of the page
+Quote Post
koderrr
post
Post #2





Grupa: Zarejestrowani
Postów: 255
Pomógł: 16
Dołączył: 4.07.2007

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

float:left dla obu divow ?

float:left dla obu divow ?
Go to the top of the page
+Quote Post
korro
post
Post #3





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

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

div2 musi zostać centralnie. div1 przylegać do niego.


--------------------
Zapraszam na mojego devbloga

Używasz Firefoxa? Skracaj linki jednym kliknięciem!
Go to the top of the page
+Quote Post
seth-kk
post
Post #4





Grupa: Zarejestrowani
Postów: 444
Pomógł: 79
Dołączył: 26.05.2009

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

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;

Ten post edytował seth-kk 22.11.2009, 14:14:53


--------------------
Krzysztof Kotlarski
Go to the top of the page
+Quote Post
ziqzaq
post
Post #5





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
koderrr
post
Post #6





Grupa: Zarejestrowani
Postów: 255
Pomógł: 16
Dołączył: 4.07.2007

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

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


Ten post edytował koderrr 22.11.2009, 15:00:03
Go to the top of the page
+Quote Post
korro
post
Post #7





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

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

@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.


--------------------
Zapraszam na mojego devbloga

Używasz Firefoxa? Skracaj linki jednym kliknięciem!
Go to the top of the page
+Quote Post
« Następny starszy · Po stronie przeglądarki · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 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: 21.08.2025 - 23:15
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn