Wyśrodkowanie strony - wypróbowane wszystkie sposoby POMOCY!

[rumsztyk]

stronę rzeczywiście poprawiłeś ale zlekceważyłeś totalnie tomaśka - nieładnie. Poczytałeś o margin: auto? - nawet na tym forum było!
W css powstawiałeś gdzie się dało margin :auto - header - auto, foot - auto itd. czyli bez poczytania wstawiłeś ślepo niewłaściwie.
margin: auto oznacza marginesy z góry, z prawej, z dołu, z lewej na auto. W temacie edytor nvu masz podane jak należy użyć margin auto - google zwraca tyle wyników że mała bania.
Co do menu to jest ustawione jako position: absolute od lewej 0px więc nie ma co się dziwić że nachodzi na stronę przy węższych rozdzielczościach position: absolute oznacza że wyciągasz element z normalnego położenia jakie wynika z miejsca usadowienia go w kodzie html i ustawiasz względem lewej górnej krawędzi okna przeglądarki oczywiście tam też wstawiłeś swoje ślepe margin: auto... i dla body dodałeś (pewnie dla sportu) padding: auto (po co?). Wstawianie czego się da gdzie się da nie jest dobrym sposobem na zrobienie strony www
1. Poczytaj o float,
2. lub o position: relative
3. i cała strona - główna zawartość + menu musi mieć max szer. 800px
będziesz musiał teraz poprawić html aby układ sie uporządkował, jesteś na dobrej drodze ale unikasz czytania literek jak możesz - nie masz czasu? Motywacji? - o co Ci chodzi strona wyświetla się tak jak o to poprosiłeś poczytaj więcej a Twoje prośby względem przeglądarki będą bliższe Twoim oczekiwaniom...

[Johnny]

Dzięki wielkie za odpowiedź. Powiem tak to jest moja pierwsza i raczej oststania stronka. Nie będę się tym zajmował chodzi mi tylko żeby zrobić właśnie tą jedną pod firmę. Włąsnie troche nie mam czasu ale tez kasy zeby zapłacić komuś za stronke prof. Dlatego podjąłem się tego, chociaz byłęm zupełnie zielony w tym temacie. Więc licze się z tym ze moge zadawać czasami głupie lub banalne pytania, z drugiej strony pisze z myślą uzyskania jakieś pomocy od specjalistów. Stronę pisałem sam, moje próby w css wynikają z pracy nad stronką (wolałem sam próbować a potem pytać). Dzięki za udzieloną pomoc ale oczywiscie jestem jeszcze daleki od rozwiązania mojego problemu. Pozdrawiam

[rumsztyk]

to za przeproszeniem "olej" menu po lewej stronie i wstaw je nad nagłówek ogrodomania w taki sposób:

Kod: Zaznacz cały

html
<ul id="nav_box">
<li><a href="adres">link 1</a></li>
<li><a href="adres">link 2</a></li>
<li><a href="adres">link 3</a></li>
</ul>
css
ul#nav_box {text-align: center;}
ul#nav_box li {position: relative;
float: left;
margin: 5px;}

nikt nie napisze strony za Ciebie, a to ułatwi Ci pracę - żeby utrzymać Twój układ trzeba by mocno "przemeblować" kod

[Gość]

W sumie udało mi sie ustawić to menu że juz nie zachodzi na inne elementy. Ustawiałem marginesy dla poszczeglnych elementów i zmieniłem pozycje manu na relative. Ale to nie jest to stronka nadal nie jest wycentrowana... .To menu które polecasz... gdybym sie zdecydowal na inne nie męczył bym się z tym tu jeszcze na stronie bedzie logo i jakieś tło wiec mniej wiecej mam juz w głowie jak to rozplanować. Ale czy teraz takiego układu nie da rady wyśrodkowąc??: www.ogrodomania.yoyo.pl

[Tomek]

stronę rzeczywiście poprawiłeś ale zlekceważyłeś totalnie tomaśka - nieładnie. Poczytałeś o margin: auto? - nawet na tym forum było!

Dzięki za wsparcie

3. i cała strona - główna zawartość + menu musi mieć max szer. 800px

Błąd. przy rozdzielczości 800x600 będzie pasek przewijania. Musisz odliczyć około 10 px na obramowanie przeglądarki + ok 15 px na pasek przewijania = 800-25= 775

[rumsztyk]

da radę - wszystko da radę - kwestia czasu. Ja nie mam go na tyle, żeby przepisać Ci cały sajt. Poza tym dalej strzelasz na oślep to:

Kod: Zaznacz cały

margin-left:auto;
   margin-right:auto;
   margin-top:auto;
   margin-bottom:auto;

to to samo co to:

Kod: Zaznacz cały

margin: auto;

gdybyś zerknął tam gdzie wskazał tomasiek lub w temat na tym forum który Ci zasugerowałem wiedział byś że wyśrodkować sajt za pomocą margin: auto należy zrobić tak. Chcesz wyśrodkować ten układ?
Musisz zawrzeć menu w głównym pojemniku dla całej strony. Czyli kolejność czynności:
1. Oblicz ile px zajmie cała strona (menu+główna zawartość)
2. Stwórz odpowiednio duży pojemnik i wycentruj go
3. Całość przesuń w lewo, żeby to główna zawartość była wyśrodkowana a menu z lewej strony.
Jesteś tak naprawdę w martwym punkcie z którego można się tylko cofnąć żeby wybrnąć lub "przemeblowac" kod.
Ja bardzo rzadko używam "auto" wolę rozwiązanie bazujące na position: absolute i ujemnych marginesach dla głównego pojemnika ale to wymagałoby całkowitej zmiany Twojego kodu zarówno html i css. Tak więc zrozum, że kompleksowa pomoc w Twoim wypadku nie obyłaby się bez nakładów finansowych na czas temu poświęcony - a to nie to forum... (pociesz się, że wyczyściłeś html z błędów co dla początkujących już jest dużym sukcesem).
Oczywiście wykazujesz dużą inicjatywę więc powodzenia (szczerze)

P.S. wykasuj height dla div#lpanel bo przy powiększeniu czcionki zawartość wylatuje poza pojemnik

[rumsztyk]

Błąd. przy rozdzielczości 800x600 będzie pasek przewijania. Musisz odliczyć około 10 px na obramowanie przeglądarki + ok 15 px na pasek przewijania = 800-25= 775

@tomasiek - aptekarstwo - ale oczywiście masz rację

[Johnny]

No i juz myślałem ze sie udało strone wyśrodkowałem podzieliłem pojemnik ii fajnie mozilla otwiera bez problemu ale IE oczywiście nie. Masakra chyba nigdy tego nie zrobie:)

[rumsztyk]

masz jeden </div> za dużo - idzie Ci naprawdę dobrze! Nie przejmuj się to że IE coś paprze to nie Twoja wina - popraw błąd - zobaczymy co dalej

[Johnny]

No przejrzałęm kod i poprawiłem. Próbowałem ustawić strone pod programem kED zeby była dobrze wyswietlana pod IE. Nie da się! Jak nawet sie udawało to były problemy z elementem który jest na dole <footer>. Pomożecie coś bo męcze się z tym wszytskim juz długo

[rumsztyk]

nastrzelałeś marginów i paddingów to teraz masz
html

Kod: Zaznacz cały

...
Tel kom. 791096293<br>
      <a href="mailto:ogrodomania@gmail.com">wyślij email</a></font>

css

Kod: Zaznacz cały

body #lpanel {float: left;
  background-color: #FFF;
  border: 1px solid #DDD;
  width: 145px;
}

wstaw to dla IE korzystając z komentarzy warunkowych
stary numer IE i domyślnych marginesów, wcięć każdej przeglądarki

[Johnny]

Uzyłem tych komentarzy
w sposób taki:
html:

<h3>Ogrodomania</h3> <font size="1">ul.Tyrmanda 34/12<br />
54-608 Wrocław<br />
Tel kom. 501672098<br />

<!--[if IE]>
Tel kom. 791096293<br />
<a href="mailto:ogrodomania@gmail.com">ogrodomania@qmail.com</a></font>
<![endif]-->

oraz css


body #lpanel {float: left;
padding:3px;
margin-right:5px;
background-color: #FFF;
border: 1px solid #DDD;
width: 145px;
display:table-cell;
}
<!--[if IE]>
body #lpanel {float: left;
background-color: #FFF;
border: 1px solid #DDD;
width: 145px;
}
<![endif]-->

Dobrze??
Poskutkowało tym że elementy się rozłożyły w pojemniku niby ok (menu po lewej a tekst po prawej) , ale..
1.Pod mozillą i oprą nie wyświetla mi adresu emial zawartego w komentarzu warunkowym w kodzie html
2.Menu ni estanowi osobną cześć a znajduje sie razem z tekstem na jednej kartce oodatkowo jest brzydko obramowane jakąś cienką linią.
3. Tekst pod przeflądarką mozilla i opera zachodzi na siebie.

Więc ogólnie bałgan na stronie nie nadający sie do zamieszczenia w necie.
Tracę wiarę że uda się to zrobić...

[Johnny]

Sory za błedy w tekście. Wykonczony jestem ta stronką:)

[Johnny]

Więc nie ma możliwości tego ustawinie. Źle wyświetla w mozilli i operze:(
www.ogrodomania.yoyo.pl

[Tomek]

W CSS nie używa się komentarzy warunkowych.
Przekombinowałeś z tymi komentarzami już kompletnie.
Przykład jak to zrobić już podał rumsztyk... ale jeszcze raz:
<div id="lpanel">
(tu treść....)
</div>

W body wstawiasz:
<link rel="stylesheet" type="text/css" href="css/2208_screen.css" media="screen, print" />
<!--[if IE]><link rel="stylesheet" type="text/css" href="css/styl_dla_ie.css" /><![endif]-->

Koniecznie w tej kolejności. Po czym tworzysz sobie plik styl_dla_ie.css i w nim dopiero wpisujesz:
body #lpanel {float: left;
background-color: #FFF;
border: 1px solid #DDD;
width: 145px;
}


To co teraz zrobiłeś - to podobne do tego co robiłeś z margin:auto - wcisnąłeś to wszędzie bez rozmysłu.
W CSS komentarze warunkowe nie są interpretowane. W html są dostępne jedynie dla IE - inne przeglądarki zgodnie ze specyfikacją myślą że jest to komentarz i go nie wyświetlają na stronie.

Jakie jest rozwiązanie dla ciebie? Najlepiej - ściągnij ten szablon jeszcze raz. Powoli i dokładnie nadaj odpowiednią szerokość i margin:auto, potem jak już strona będzie działać - powoli dodawaj swoje treści.


A! I wyjaśnijmy jedno - TO MOZILLA I OPERA PRAWIDŁOWO WYŚWIETLAJĄ TĄ STRONĘ. TO IE BŁĘDNIE INTERPRETUJE KOD.

[Tomek]

Widzę że się dopisałeś...
Teraz znowu masz błędy na stronie - i to dość ważne - niezamknięte divy... i na dodatek błędy przy znaczkach walidacji... wstyd

Ale stronka jest wyśrodkowana... tylko nakładanie się tego maila jest chyba teraz problemem... bo on się po prostu nie mieści nadaj większą szerokość dla lpanel:
#lpanel {
.....
width: 180px;
.....
}

180 powinno wystarczyć.

[Grzegorz]

Uzyłem tych komentarzy
w sposób taki:
html:

<h3>Ogrodomania</h3> <font size="1">ul.Tyrmanda 34/12<br />
54-608 Wrocław<br />
Tel kom. 501672098<br />

<!--[if IE]>
Tel kom. 791096293<br />
<a href="mailto:ogrodomania@gmail.com">ogrodomania@qmail.com</a></font>
<![endif]-->

Tylko czemu adres e-mailowy ma być widoczny tylko dla użytkowników IE?!

[rumsztyk]

dlatego zaproponowałem skrócenie adresu go i zamienienia na tekst wyślij e-mail (i tak jest mailto), który jest krótszy i tym samym mieści się w elemencie #lpanel... czasem rozwiązanie problemu wymaga sprytu - nie wiedzy

[tygryzek]

Witam, mam ogromną prośbę o pomoc. Chce wyśrodkowac caly tekst strony, próbuje to zrobic ustawiając marginy na auto, ale to mi nie chce dzialac. Adres do stronki: tygryzek.prv.pl, zeby wejsc dalej trzeba kliknac w bramy. Mam nadzieje, ze mi ktos pomoze...bo mnie juz glowa od tego rozbolala. Robilam inne stronki, takie cwiczeniowe i wtedy marginy ladnie dzialaly, a teraz nie chca. Pliska, pomozcie...

[dexter]

Kod: Zaznacz cały

*{
margin: 0;
padding: 0;
float:left;
}

Usuń float:left, a resztę stylu dla dowolnego elementu przenieś na początek.