Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Wyśrodkowanie strony [pojawiające sie odstępy od krawędzi]
Forum PHP.pl > Forum > Po stronie przeglądarki
xfilip1985
26.04.2010, 15:53:39
Witam mam taki problem ze jak wyśrodkowywuje strone za pomocą stylu css

#body{
position:relative;
margin-right:auto;
margin-left:auto;
margin top:0px;
witdh:800px
height:800px
}

To przeglądarka ladnie wyśrodkowywuje mi stronę ale dodaje mi jeszcze od górnej i dolnej krawędzi odtępy na około 5-10px
co mi bardzo przeszkadza ponieważ chce mieć przyciski menu przylegające do górnej krawędzi (0px odstępu) sciana.gif , nie mam kompletnie pojęcia dlaczego tak sie dzieje.

Cytat
<style type="text/css">
<!--

#body {
position:relative;
margin-left:auto;
margin-right:auto;
margin top:0;
width:800px;
height:800px;
}

#id300-01_ {
position:absolute;
left:0px;
top:0px;
width:439px;
height:43px;
}

#id300-02_ {
position:absolute;
left:439px;
top:0px;
width:114px;
height:43px;
}

#id300-03_ {
position:absolute;
left:553px;
top:0px;
width:120px;
height:43px;
}

#id300-04_ {
position:absolute;
left:673px;
top:0px;
width:120px;
height:43px;
}

#id300-05_ {
position:absolute;
left:793px;
top:0px;
width:7px;
height:43px;
}

#id300-06_ {
position:absolute;
left:0px;
top:43px;
width:177px;
height:709px;
}

#id300-07_ {
position:absolute;
left:177px;
top:43px;
width:617px;
height:42px;
}

#id300-08_ {
position:absolute;
left:794px;
top:43px;
width:6px;
height:709px;
}

#id300-09_ {
position:absolute;
left:177px;
top:85px;
width:617px;
height:667px;
}

#id300-10_ {
position:absolute;
left:0px;
top:752px;
width:800px;
height:48px;
}

-->
</style>
<!-- End ImageReady Styles -->
</head>
<body style="background-color:#FFFFFF;">
<!-- ImageReady Slices (Filip_103.psd) -->
<div id="body">
<div id="id300-01_">
<img id="id300_01" src="images/300_01.jpg" width="439" height="43" alt="" />
</div>
<div id="id300-02_">
<img id="id300_02" src="images/300_02.jpg" width="114" height="43" alt="" />
</div>
<div id="id300-03_">
<img id="id300_03" src="images/300_03.jpg" width="120" height="43" alt="" />
</div>
<div id="id300-04_">
<img id="id300_04" src="images/300_04.jpg" width="120" height="43" alt="" />
</div>
<div id="id300-05_">
<img id="id300_05" src="images/300_05.jpg" width="7" height="43" alt="" />
</div>
<div id="id300-06_">
<img id="id300_06" src="images/300_06.jpg" width="177" height="709" alt="" />
</div>
<div id="id300-07_">
<img id="id300_07" src="images/300_07.jpg" width="617" height="42" alt="" />
</div>
<div id="id300-08_">
<img id="id300_08" src="images/300_08.jpg" width="6" height="709" alt="" />
</div>
<div id="id300-09_">
<img id="id300_09" src="images/300_09.jpg" width="617" height="667" alt="" />
</div>
<div id="id300-10_">
<img id="id300_10" src="images/300_10.jpg" width="800" height="48" alt="" />
</div>
</div>
<!-- End ImageReady Slices -->
</body>
</html>


Błagam niech mi kots pomoże sciana.gif z gory dzięki za wszelką pomoc sciana.gif
hieroshima
26.04.2010, 15:56:38
Zresetuj ogólne style przeglądarki

[HTML] pobierz, plaintext 
  1. *{
  2. margin: 0 auto;
  3. padding: 0;
  4. outline: none;
  5. }
[HTML] pobierz, plaintext


i raczej nie stosuje się określonej wysokości strony, jeśli chcesz mieć minimalną wysokość, która może się później powiększać to zastosuj min-height: 800px;
krzysztof_kf
26.04.2010, 16:08:32
body nie służy do środkowania zawartości strony czyli 

[CSS] pobierz, plaintext 
  1.  
  2. body { 
  3. margin: 0;
  4. }
  5.  
[CSS] pobierz, plaintext


wyśrodkowanie strony daj selektora na początek zamiast body 

[CSS] pobierz, plaintext 
  1.  
  2. #top { 
  3. width: 800px;
  4. height: 800px;
  5. margin: 0 auto;
  6.  
  7.  
[CSS] pobierz, plaintext


xfilip1985
26.04.2010, 16:51:30
hmm dry.gif a Mógłbys mi napisac jak dokładnie powinien wyglądac mój #body i ten #top który ma w sobie pozneij zawierać body?? a musze w ogóle wpisywac Position? i jaki relative absolute?? gdy stosuje absolute to nigdy mi sie nie wyśrodkowywuje, a gdy wpisuje relative to zawsze mam te wredne odstępy w kolorrze tła( na dole i na górze) ehhh;// sciana.gif
pedro84
26.04.2010, 16:58:53
Cytat(xfilip1985 @ 26.04.2010, 17:51:30 ) *
hmm dry.gif a Mógłbys mi napisac jak dokładnie powinien wyglądac mój #body i ten #top który ma w sobie pozneij zawierać body?? a musze w ogóle wpisywac Position? i jaki relative absolute?? gdy stosuje absolute to nigdy mi sie nie wyśrodkowywuje, a gdy wpisuje relative to zawsze mam te wredne odstępy w kolorrze tła( na dole i na górze) ehhh;// sciana.gif

Przecież Ci podał. Nie potrafisz dodac kilku linijek do CSS? Ludzie, trochę inwencji!

Cytat
gdy stosuje absolute to nigdy mi sie nie wyśrodkowywuje,

No...dziwi Cię to?

Cytat
a gdy wpisuje relative to zawsze mam te wredne odstępy w kolorrze tła( na dole i na górze)

No to dodaj do body "te wredne" margin:0; i będzie po kłopocie...
krzysztof_kf
26.04.2010, 16:59:30
Bez position
hieroshima
26.04.2010, 17:25:12
ale przeciez body ma dobrze ? troche zły zapis ale ogólnie znacznik html ma body i ma tez div body nazwa diva moze byc jaka chce przeciez? i w css ma tez dobrze bo ma #body a nie body

zresetowałeś style przeglądarki tak jak CI pisałem ?
xfilip1985
26.04.2010, 19:29:07
Działa biggrin.gif Działa :DDziała biggrin.gif Dzięki hieroshima biggrin.gif jestes wspaniały haha, pozdro chłopaki ide dalej robić....
hieroshima
26.04.2010, 19:39:24
pozdro winksmiley.jpg ale te body moglbys zmienic bo razi w oczy winksmiley.jpg
xfilip1985
26.04.2010, 19:50:18
Chodzi ci o wysokośc?? czy o samą nazwę "BODY"?? to tak naprawde nazywało sie "#Tabela_01" bp tp wygenerowane przez Photoshopa, tylko ja zmieniłem na Body żeby każdy zczaił szybciej jaki mam problem haha.gif
hieroshima
26.04.2010, 20:13:00
no jak widzisz każdy się nie zczaił, a pomylił przez to winksmiley.jpg ja też dopiero później zobaczyłem, że w sumie masz dobrze bo body występuje 2 razy a w cssie dobre body miales co nie zmienia faktu ze sam sie pomylisz jak wrocisz do tej strony za rok. O wysokość też w zasadzie, raczej nie określa się wysokości strony prędzej stosuje się minimalną wysokość strony, a później im więcej tekstu tym strona się wydłuża. Jak się myle to niech mnie ktoś poprawi bo może źle mówie winksmiley.jpg Pozdrawiam

P.S nie generuj kodu Photoshopem, raczej pisz go sam będą bardziej przyjazne i czytelne nazwy
xfilip1985
26.04.2010, 21:57:13
To jest kod wygenerowany odrazu przez PSa pokazałem go aby po to żeby każdy zczaił szybko jak mi pomóc, mam tę samą strone w PHP (pociachany kod na kawałki -php include tongue.gif ) i ze zmieniającymi sie przyciskami (onmouseover onmouseout:P), jak generuje w PSie kod (css wg id) to odrazu wywalam niepotrzebne DIVy i cssy itd, tak w ogole dopiero nie dawno zacząłem swoją przygode z PHP biggrin.gif ale dział przedszkole ma w tej chwili zablokowane posty:P Choć ci co w tym dłużej siedzą mówią mi że nie ma sensu uczyć sie czystego PHP tylko odrazu przejść do FRAMEWORKÓW rolleyes.gif przerabiam książke o SYMFONY ale jeszcze nie próbowałem podpinac pod to własnej wygenerowanej stronki snitch.gif
pedro84
26.04.2010, 22:33:18
Jeśli chcesz robić strony (frontend) to poucz się najpierw HTML + CSS, bo masz braki i to duże smile.gif

Co do PHP...najpierw podstawy (poznaj dobrze!), potem obiektowe.

Nie doczytałem tego:
Cytat
ale dział przedszkole ma w tej chwili zablokowane posty:P Choć ci co w tym dłużej siedzą mówią mi że nie ma sensu uczyć sie czystego PHP tylko odrazu przejść do FRAMEWORKÓW

Ale jak Ty chcesz pracować używając frameworków nie znając podstaw? Dłużej w tym wypadku = dwa tyodnie dłużej od Ciebie? winksmiley.jpg
hieroshima
26.04.2010, 23:34:41
Cytat(xfilip1985 @ 26.04.2010, 22:57:13 ) *
Choć ci co w tym dłużej siedzą mówią mi że nie ma sensu uczyć sie czystego PHP tylko odrazu przejść do FRAMEWORKÓW rolleyes.gif przerabiam książke o SYMFONY ale jeszcze nie próbowałem podpinac pod to własnej wygenerowanej stronki snitch.gif


to widać nie za długo w tym siedzą, to jest tak samo jakby Ci powiedzieli, że nie ma sensu iść do podstawówki od razu idz na studia, albo jakbyś dom zaczynał budować od dachu;) podstawy to podstawy, to fundament całej reszty i chcąc nie chcąc musisz przez to przejść
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.