Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [CSS] Środkowanie DIVa - ale inaczej
asma1313
post 3.02.2012, 00:22:49
Post #1





Grupa: Zarejestrowani
Postów: 5
Pomógł: 0
Dołączył: 3.02.2012
Skąd: Radom

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

Witam. mam nastepujący problem. Wiem jak wysrodkowac diva za pomocą margin: auto; ale gdy to zrobie wyswietla mi oddatkową linijkę na górze okna, przez co div nie przylega do górnej krawędzi.
Dla lepszego zrozumienia:
Divy przed wyśrodkowaniem:
http://www.fotosik.pl/pokaz_obrazek/pelny/...c035959e93.html
Divy po wyśrodkowaniu:
http://www.fotosik.pl/pokaz_obrazek/pelny/...e779276b7b.html
jak widać wyśrodkowany div "przesunął" się w dół , naszedł na kolejny, ale tez nie trzyma sie górnej krawędzi.
Jak mogę to naprawić?

EDIT: faktycznie, juz wklejam.
CODE

<!--

#Table_01 {
margin: auto;
top:0px;
width:800px;
height:600px;
text-align: center;
}

#index-01_ {
margin: auto;
left:0px;
top:0px;
width:800px;
height:28px;
}

#index-02_ {
position:absolute;
left:0px;
top:28px;
width:800px;
height:100px;
}

#index-03_ {
position:absolute;
left:0px;
top:128px;
width:697px;
height:23px;
}

#index-04_ {
position:absolute;
left:697px;
top:128px;
width:103px;
height:23px;
}

#index-05_ {
position:absolute;
left:0px;
top:151px;
width:800px;
height:22px;
}

#index-06_ {
position:absolute;
left:0px;
top:173px;
width:800px;
height:154px;
}

#index-07_ {
position:absolute;
left:0px;
top:327px;
width:326px;
height:155px;
}

#index-08_ {
position:absolute;
left:326px;
top:327px;
width:474px;
height:155px;
}

#index-09_ {
position:absolute;
left:0px;
top:482px;
width:800px;
height:28px;
}

#index-10_ {
position:absolute;
left:0px;
top:510px;
width:800px;
height:38px;
}

#index-11_ {
position:absolute;
left:0px;
top:548px;
width:800px;
height:52px;
}

-->
</style>

CODE

<body style="background-color:#f38e0d">
<div id="Table_01">
<div id="index-01_">
<img id="index_01" src="images/index_01.gif" width="800" height="28" alt="" />
</div>
<div id="index-02_">
<img id="index_02" src="images/index_02.gif" width="800" height="100" alt="" />
</div>
<div id="index-03_">
<img id="index_03" src="images/index_03.gif" width="697" height="23" alt="" />
</div>
<div id="index-04_">
<img id="index_04" src="images/index_04.gif" width="103" height="23" alt="" />
</div>
<div id="index-05_">
<img id="index_05" src="images/index_05.gif" width="800" height="22" alt="" />
</div>
<div id="index-06_">
<img id="index_06" src="images/index_06.gif" width="800" height="154" alt="" />
</div>
<div id="index-07_">
<img id="index_07" src="images/index_07.gif" width="326" height="155" alt="" />
</div>
<div id="index-08_">
<img id="index_08" src="images/index_08.gif" width="474" height="155" alt="" />
</div>
<div id="index-09_">
<img id="index_09" src="images/index_09.gif" width="800" height="28" alt="" />
</div>
<div id="index-10_">
<img id="index_10" src="images/index_10.gif" width="800" height="38" alt="" />
</div>
<div id="index-11_">
<img id="index_11" src="images/index_11.gif" width="800" height="52" alt="" />
</div>
</div>

</body>


Pozdrawiam i Dziękuję za pomoc.





Ten post edytował asma1313 3.02.2012, 01:03:12
Go to the top of the page
+Quote Post
pablo_83
post 3.02.2012, 00:32:50
Post #2





Grupa: Zarejestrowani
Postów: 200
Pomógł: 16
Dołączył: 11.01.2009
Skąd: wrocław

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

świetnie, wręcz super, tyle że znacznie łatwiej byłoby z jakimś kodem....
Go to the top of the page
+Quote Post
Koldy
post 3.02.2012, 01:25:33
Post #3





Grupa: Zarejestrowani
Postów: 98
Pomógł: 1
Dołączył: 28.06.2009
Skąd: Great Britan

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

ogólnie żeby wyśrodkować div'a to dajesz lewy i prawy margines na auto np:
Kod
margin: 0px auto;
,
Kod
margin: 0px auto 0px auto;

albo
Kod
margin-left: auto;
margin-right: auto;


Ten post edytował Koldy 3.02.2012, 01:26:29


--------------------
$progress++;
Go to the top of the page
+Quote Post
asma1313
post 3.02.2012, 01:34:15
Post #4





Grupa: Zarejestrowani
Postów: 5
Pomógł: 0
Dołączył: 3.02.2012
Skąd: Radom

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

wiem, niestety, gdy tak robiłem efekt mialem jak na drugim zdjeciu.. DIV "odklejał" się od górnej krawedzi przegladarki
Go to the top of the page
+Quote Post
crocodillo
post 3.02.2012, 07:32:57
Post #5





Grupa: Zarejestrowani
Postów: 215
Pomógł: 44
Dołączył: 31.07.2011
Skąd: wrocław

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

Tak jak napisał Koldy wyżej: margin: 0px auto 0px auto; (nie samo margin:auto;) margin:auto ustawia wszystkie marginesy na auto (góra, dół, lewy i prawy). Ew. może być jeszcze ustawiony margines w body, dlatego masz tą przerwę
Go to the top of the page
+Quote Post
by_ikar
post 3.02.2012, 08:28:10
Post #6





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

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

Ale co chcesz dokładnie osiągnąć? Napisałeś że wyśrodkować - ok, wyśrodkowujesz, ale to nie jest efekt którego oczekiwałeś, więc jaki jest efekt którego oczekujesz? Mimo że wróżbitów szuka się tutaj coraz więcej, to niestety jest ich tutaj deficyt. Swoją drogą muszę pomyśleć o zmianie branży, bo widzę dość duży popyt jest we wróżbiarstwie, i przydałoby się ten segment jakoś wypełnić..
Go to the top of the page
+Quote Post
asma1313
post 3.02.2012, 21:31:50
Post #7





Grupa: Zarejestrowani
Postów: 5
Pomógł: 0
Dołączył: 3.02.2012
Skąd: Radom

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

by_ikar próbuję to wyśrodkować, ale uniknąć obniżenia divów, zeby zostały przy górnej krawędzi.
crocodillo i koldy: dzięki, zaraz spróbuję i dam znać czy pomogło

niestety, przy próbie srodkowania, caly czas robi mi odstep:/
ma ktoś jakieś pomysły?
Go to the top of the page
+Quote Post
toaspzoo
post 3.02.2012, 22:40:35
Post #8





Grupa: Zarejestrowani
Postów: 778
Pomógł: 84
Dołączył: 29.07.2010
Skąd: Gliwice / Pławniowice Mistrz niezmordowanej klawiatury.

Ostrzeżenie: (20%)
X----

zrób w stylach na głównym elemencie:

[CSS] pobierz, plaintext 
  1.  
  2. position:relative; // lub fixed, jesli stala pozycja
  3. top: -10px; // przykladowo
[CSS] pobierz, plaintext


lub
[CSS] pobierz, plaintext 
  1. margin-top: -10px; // lub mniej / wiecej
[CSS] pobierz, plaintext


--------------------

LS Easter egg <
Go to the top of the page
+Quote Post
kw95s
post 3.02.2012, 22:58:52
Post #9





Grupa: Zarejestrowani
Postów: 36
Pomógł: 3
Dołączył: 10.07.2011

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

spróbuj ustawić width:100%;
position:static;
margin:auto;
Go to the top of the page
+Quote Post
asma1313
post 3.02.2012, 23:05:33
Post #10





Grupa: Zarejestrowani
Postów: 5
Pomógł: 0
Dołączył: 3.02.2012
Skąd: Radom

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

ok, udało się ustawiając w body:
<div style="width:800px; text-align:left; margin-left:auto; margin-right:auto;">
i w css do kontenera nadrzednego text-align: center;
dziekuje za pomoc, temat do zamkniecia.
Go to the top of the page
+Quote Post
kw95s
post 4.02.2012, 00:13:11
Post #11





Grupa: Zarejestrowani
Postów: 36
Pomógł: 3
Dołączył: 10.07.2011

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

zerknij jeszcze czy w każdej przeglądarce działa.
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · 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 Wersja Lo-Fi Aktualny czas: 13.06.2025 - 01:47
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn