Zaloguj się

imperiusz · 04-12-2009, 21:44

Witam,

szukałem tego problemu wszędzie, przez ostatnie dwa dni, przy okazji próbując dojść do czegoś sam, niestety chyba brakuje mi wyobraźni...

Mój problem:
Być może wynika to z tego, że do tej pory tabelki były dla mnie Bogiem i idealnym rozwiązaniem dla każdej strony. Zmieniłem jednak podejście i spróbowałem na divach... Domyślam się, że popełniam jakiś błąd przy założeniach, ale ...
mój kod css:

Kod:
html, body {

background-image: url(tlo.jpg);

background-position: center;

font-family: Arial;

font-weight: normal;

color: #ffffcc;

margin-top: 0;

}

#megagora {

margin: 0;

padding: 0;

}

#megasrodek {

width: 836px;

margin-left: 6px;

padding: 0;

}

#megadol {

margin: 0;

padding: 0;

Mój kod [ xhtml ]

Kod:
(...)

<link href="data/style.css" rel="Stylesheet" type="text/css" media="screen" />

</head>

<body>

<div id="megagora"><img src="data/mega_pasek_gora.jpg" alt="" width="836" height="6" /></div>

<div id="megasrodek"><img src="data/zdjecie_glowne.jpg" alt="" width="824" height="345" /></div>

<div id="megadol"><img src="data/mega_pasek_dol.jpg" alt="" width="836" height="6" /></div>

</body>

</html>

Zamierzony efekt powinien pokazywać 3 obrazki pod sobą, bez żadnych przerw. Okazuje się jednak, że ( o dziwo ) IE pokazuje dobrze, ale FF daje ciała...
Efekt w IE:
http://img69.imageshack.us/i/45973453.jpg/
Niepożądany efekt w FF:
http://img21.imageshack.us/i/96775220.jpg/

Potrzebuje też takiej możliwości, aby wstawiać treść właśnie w takie półokrągłe ramki. Ale jeżeli na razie mam tu problem to i tak nie ruszę dalej.

Mam nadzieję, że wyjaśniłem swój problem. Pozdrawiam serdecznie.

**Labsta.com** · 04-12-2009, 21:56

Spróbuj może:

Kod:
#megasrodek img {margin: 0px; paddning: 0px; }

gwarancji nie daję. Dobry zwyczaj to resetowanie CSS np. tym http://meyerweb.com/eric/tools/css/reset/

imperiusz · 04-12-2009, 22:03

Cytat:
(04-12-2009, 21:56)Labsta.com napisał(a): Spróbuj może:

Kod:
#megasrodek img {margin: 0px; paddning: 0px; }

Niestety nic to nie zmienia poza nie pożądanym efektem.

Cytat:gwarancji nie daję. Dobry zwyczaj to resetowanie CSS np. tym http://meyerweb.com/eric/tools/css/reset/

Co oznacza resetowanie CSS? Smile

**Labsta.com** · 04-12-2009, 22:10

Spróbuj jeszcze tak:

Kod:
#megasrodek img {margin: 0px; paddning: 0px; display: block;}

Resetowanie domyślnych ustawień CSS przeglądarki, bardzo przydatna rzecz.

imperiusz · (Ten post był ostatnio modyfikowany: 04-12-2009, 22:36 przez imperiusz.)

Niestety... IE robi wszystko dobrze. FF daje ciała....

Na wszelkie wypadek pokazuję mój zamysł:
http://img51.imageshack.us/img51/9868/70212367.jpg

CEL:
"Główne zdjęcie" objęte jest w taką ramkę, jak na zdjęciu ( jasno zielona ).

Dodatkowo każdy inny element strony ( treści ) w założeniu też ma mieć taką ramkę, albo innego koloru... Te ramki miały by się znaleźć pod spodem tej dużej ( mega ) ramki...

Obecnie leżę i kwiczę, dodatkowo wiedząc, że na ramkach już bym skończył :/ ale nie chce dać za wygraną.

Ok. Udało się za pomocą tego drugiego. Jeżeli teraz kolega pomógł mi dokładnie wszystko rozszyfrować było by świetnie.
Mianowicie co fizycznie robi opcja display: block. Oraz ten selektor:
# megasrodek img {} dotyczy rozumiem tylko IMG i tylko wtedy gdy jest w DIVie megasrodek tak?
Pozdrawiam i dziękuję serdecznie za pomoc Smile

**Labsta.com** · (Ten post był ostatnio modyfikowany: 04-12-2009, 22:48 przez Labsta.com.)

Ja bym to zrobił tak:

Kod:
<div class="kontener">

  <div class="ktop"></div>

  <img src="data/zdjecie_glowne.jpg" alt="foto"  />

  <div class="kbottom"></div>

</div>

CSS

Kod:
.kontener { background: (kolor zielony) }

.kontener img {padding: 0px; margin 0px auto; display: block; }

.ktop { background: url(data/mega_pasek_gora.jpg) no-repeat; width:836px; height: 6px; }

.kbottom { background: url(data/mega_pasek_dol.jpg) no-repeat; width:836px; height: 6px; }

Pisane z ręki i pewnie wymaga jakiegoś tam dopracowania.

display: block; powoduje, że element z liniowego staje się prostokątem. Natomiast #megasrodek img {} odnosi się do obrazków w #megasrodek, czyli dobrze kumasz Smile

. Raczej nie ryzykowałbym nadawania wszystkim img, bo nie ma sensu. Przetestuj sobie używanie resetu, bo to serio ułatwia życie.
Inna moja uwaga: nie mieszaj elementów wyglądu i treści. Wygląd czyli te zaokrąglone tło dawaj do CSS, obrazek z tymi kolesiami do HTML, w końcu po to rozdzielamy CSS i HTML na osobne pliki, żeby rozdzielać te dwie warstwy.

imperiusz · 05-12-2009, 21:22

witam ponownie.
naprawdę załamuję się tym pozycjonowaniem całym. IE robi dokładnie to czego od niej oczekuje natomiast FF naprawdę działa mi na nerwy. Wygląda jakby dosłownie nie chciał czytać żadnych komend, które dotyczą pozycjonowania, albo czytał je wtedy kiedy ma na to "ochotę". Co może być przyczyną takiej sytuacji...?
Proszę o pomoc, bo dosłownie nie mam możliwości ruszyć z miejsca...

**Labsta.com** · 05-12-2009, 21:36

Hmm.. Sam wiesz, że nie podałeś żadnych szczegółów, więc nic nie można zrobić Smile

Początki zawsze są trudne i trzeba się nauczyć kilku trików. Gwarantuje Ci, że za jakiś czas (prawie) jedyne problemy będzie robić IE6 i IE5.5.
Nie ma co się załamywać, każdy to przechodził Smile

Divy to zupełnie inna filozofia działania i musisz się z tym oswoić. Zdradzę Ci, że większość osób robi tak, że działa po FF (osobiście wybieram Operę), a potem poprawia pod IE.

Pokaż co tam masz.

imperiusz · (Ten post był ostatnio modyfikowany: 05-12-2009, 21:54 przez imperiusz.)

(05-12-2009, 21:36)Labsta.com napisał(a): Pokaż co tam masz.

Mój marny kod css:

Kod:
html, body {

background-image: url(tlo.jpg);

 background-position: center;

margin-top: 0;

text-align: center;

}

#top {

width: 936px;

background-image: url(tlo_top.jpg);

background-position: center;

margin: 0px; 

padding: 0px; 

}

/* MENU */

#menu {

font-size: 23px;

font-family: Arial;

font-weight: bold;

color: rgb(109,109,109);

padding-top: 15px;

}

/* MEGA */

#mega {

width: 836px;

margin-left: 53px;

padding-top: 3px;

}

#megagora img {

margin: 0px; 

padding: 0px; 

display: block;

}

#megasrodek {

width: 836px;

background-image: url(mega_tlo.jpg);

}

#megasrodek img {

margin-left: 6px;

padding: 0px; 

display: block;

}

#megadol img {

margin: 0px; 

padding: 0px; 

display: block;

}

Mój XHTML:

Kod:
<?xml version="1.0" encoding="iso-8859-2"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-type" content="text/html;charset=ISO-8859-2">

<meta name="Keywords" content="paintball, imprezy integracyjne, strzelanie, poligon, markery, zabawa, adrenalina, extreeme, maluchy, sportowe samochody, wyścigi ">

<meta name="Description" content="Zapraszamy do zabawy w "WOJNĘ". strzelamy do ludzi farbą! nowy sport dla każdego! wynajmujemy cały sprzęt. mamy własny poligon. strzelania, imprezy firmowe, zabawa!">

<meta name="Classification" content="Recreating & Sports">

<title>Operacja Paintaball - Strzelamy farbą!</title>

<link href="data/style.css" rel="Stylesheet" type="text/css" media="screen" />

</head>

<body>

<div id="top">

<div id="menu">menu:   start   oferta   teren gry   galerie   forum   kontakt   ceny/promocje <div>

<div id="megagora"><img src="data/mega_pasek_gora.jpg" alt="" width="836" height="6" /></div>

<div id="megasrodek"><img src="data/zdjecie_glowne.jpg" alt="" width="824" height="345" /></div>

<div id="megadol"><img src="data/mega_pasek_dol.jpg" alt="" width="836" height="6" /></div>

</div>

</body>

</html>

1. problem podstawowy. FF nie wyśrodkowuje treści komendą: text-align: center. Co ciekawe nie wyśrodkował wszystkiego, oprócz tekstu, który jest na miejscu.
2. używam kompilatora kED... nie wiem czy to coś zmienia. W nim jest wbudowana przeglądarka IE.
3. Mój zamysł jest taki:
W DIV "top" "wkładam" wszystko inne. Sam "top" odpowiada tylko za takie jakby środkowe tło. Głównym elementem wewnętrznym jest menu, które jest tekstowe, sformatowane stylami. Docelowo ma być na środku.
Potem zazwyczaj duże zdjęcie ( wcześniej przerabiany problem ).
Pod nim z kolei ma być jeszcze:
wersja 1: ramka szeroka ( 2/3 ) ramki " MEGA ". Obok mniejsza ramka ( 1/3 ). Lub ( albo też "i" np niżej ) wersja 2. 3 małe ramki. Pierwsze dwie: po 1/2 z tych wcześniejszych 2/3. Oraz taka sama mała ramka ( 1/3 ) całości.
W tych ramkach, w zależności od potrzeb: grafika lub tekst lub obydwie...

Mam nadzieję, że chociaż w miarę wyraźnie opisałem problem i zamiar. Pozdrawiam

PS. Tak to wygląda w FF:

http://img268.imageshack.us/img268/2116/34019247.jpg

BTW: chciałbym gdzieś poczytać o tej "filozofii". Możesz coś polecić?

**Labsta.com** · 05-12-2009, 21:59

1. text-align służy do tekstu, więc zapomni o tym. Do #top daj margin: 0 auto; jak nie zadziała to jeszcze do body width: 100%;
2. KeD jest dobry, co nie znaczy, że nie można testować równocześnie w FF. BTW KeD to edytor nie kompilator

Tradycyjnie polecam mój ulubiony kurs http://kurs.browsehappy.pl/Kurs/Spis#Kurs

Zaloguj się
Login:
Hasło:	Nie pamiętam hasła
	Zapamiętaj mnie