+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: [css] rozjazd grafiki przy korzystaniu z div'ów (/thread-css-rozjazd-grafiki-przy-korzystaniu-z-div-ow)
Strony:
1
2
[css] rozjazd grafiki przy korzystaniu z div'ów - imperiusz - 04-12-2009
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.
RE: [css] rozjazd grafiki przy korzystaniu z div'ów - Labsta.com - 04-12-2009
Spróbuj może:
Kod:
#megasrodek img {margin: 0px; paddning: 0px; }RE: [css] rozjazd grafiki przy korzystaniu z div'ów - imperiusz - 04-12-2009
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?
RE: [css] rozjazd grafiki przy korzystaniu z div'ów - Labsta.com - 04-12-2009
Spróbuj jeszcze tak:
Kod:
#megasrodek img {margin: 0px; paddning: 0px; display: block;}Resetowanie domyślnych ustawień CSS przeglądarki, bardzo przydatna rzecz.
RE: [css] rozjazd grafiki przy korzystaniu z div'ów - imperiusz - 04-12-2009
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
RE: [css] rozjazd grafiki przy korzystaniu z div'ów - Labsta.com - 04-12-2009
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
. 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.
RE: [css] rozjazd grafiki przy korzystaniu z div'ów - imperiusz - 05-12-2009
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...
RE: [css] rozjazd grafiki przy korzystaniu z div'ów - Labsta.com - 05-12-2009
Hmm.. Sam wiesz, że nie podałeś żadnych szczegółów, więc nic nie można zrobić
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ł
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.
RE: [css] rozjazd grafiki przy korzystaniu z div'ów - imperiusz - 05-12-2009
(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ć?
RE: [css] rozjazd grafiki przy korzystaniu z div'ów - Labsta.com - 05-12-2009
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