Szablony aukcyjne allegro, DIV czy Table?
Szablony aukcyjne allegro, DIV czy Table?
O co oprzeć szablon aukcyjny allegro. O DIV, czy o TABLE?
Re: Szablony aukcyjne allegro, DIV czy Table?
Nie ma znaczenia gdzie, zawsze powinno się robić na div'ach i w CSS. Niestety nadal wiele kursów uczy robić na tabelkach.
Re: Szablony aukcyjne allegro, DIV czy Table?
Więc zrobiłem szablon z takim kodem:
W IE wszystko wygląda tak jak trzeba, ale w Firefoxsie wszystko się rozjeżdża. Dlaczego tak jest?
Kod: Zaznacz cały
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2">
<style type="text/css">
body
{
background-image: url(http://img124.imageshack.us/img124/8199/backyw5.jpg);
margin: 0;
padding: 0;
color: orange;
}
#top {
width: 1006px;
margin: 0 ;
}
#1_a
{
float: left;
width: 320px;
height: 165px;
background-image: url(http://img241.imageshack.us/img241/8256/1atp2.jpg);
}
#1_b
{
float: left;
width: 386px;
height: 165px;
background-image: url(http://img241.imageshack.us/img241/246/1bbr8.jpg);
}
#1_c
{
float: right;
width: 300px;
height: 165px;
background-image: url(http://img241.imageshack.us/img241/607/1ccl1.jpg);
}
#1_d
{
float: left;
width: 318px;
height: 67px;
background-image: url(http://img187.imageshack.us/img187/7540/1dbx7.jpg);
}
#1_e
{
float: left;
width: 389px;
height: 67px;
background-image: url(http://img187.imageshack.us/img187/11/1ebt8.jpg);
color: orange;
text-align: center ;
font-size: 20px;
font-align: middle;
}
#tytul
{
margin-top: 20px;
}
#1_f
{
float: right;
width: 299px;
height: 67px;
background-image: url(http://img187.imageshack.us/img187/2306/1fqk8.jpg);
}
#2
{
float: left;
width: 324px;
height: 136px;
background-image: url(http://img187.imageshack.us/img187/8834/44423543dj7.jpg);
}
#3
{
float: left;
width: 115px;
height: 136px;
background-image: url(http://img187.imageshack.us/img187/8135/15440253wv6.jpg);
}
#4
{
float: left;
width: 160px;
height: 136px;
background-image: url(http://img187.imageshack.us/img187/7062/80500211og0.jpg);
}
#5
{
float: left;
width: 155px;
height: 136px;
background-image: url(http://img124.imageshack.us/img124/7175/64204870iu5.jpg);
}
#6
{
float: left;
width: 252px;
height: 136px;
background-image: url(http://img124.imageshack.us/img124/6339/10997845yl3.jpg);
}
#menu
{
float: left;
width: 242px;
height: 1064px;
}
#kontakt
{
width: 242px;
height: 44px;
background-image: url(http://img153.imageshack.us/img153/8751/kontaktja2.jpg);
}
#menu_back
{
width: 242px;
height: 200px;
background-image: url(http://img153.imageshack.us/img153/4765/menubackrx4.jpg);
}
#menu_down
{
width: 242px;
height: 22px;
background-image: url(http://img153.imageshack.us/img153/5272/menudownop8.jpg);
}
#regulamin
{
width: 242px;
height: 44px;
background-image: url(http://img124.imageshack.us/img124/858/regulaminhz0.jpg);
}
#fp
{
width: 242px;
height: 44px;
background-image: url(http://img153.imageshack.us/img153/1000/fpyb1.jpg);
}
#kw
{
width: 242px;
height: 44px;
background-image: url(http://img153.imageshack.us/img153/5913/kwha1.jpg);
}
#opis_up
{
float: left;
width: 764px;
height: 44px;
background-image: url(http://img124.imageshack.us/img124/6913/opisuphc5.jpg);
color: orange;
text-align: center ;
font-size: 20px;
}
#aukcja
{
margin-top: 10px;
}
#opis_back
{
float: left;
width: 764px;
background-image: url(http://img153.imageshack.us/img153/6527/opisbackzl5.jpg);
color: orange;
text-align: center ;
}
#down
{
clear: both;
width: 1006px;
height: 50px;
background-image: url(http://img153.imageshack.us/img153/551/opisdownri6.jpg);
}
</style>
</head>
<body>
<div id="top">
<div id="1_a"></div>
<div id="1_b"></div>
<div id="1_c"></div>
<div id="1_d"></div>
<div id="1_e"><p id="tytul"><opis>Twój tekst.</opis></p></div>
<div id="1_f"></div>
<div id="2"></div>
<div id="3"><a href="http://img187.imageshack.us/img187/8135/15440253wv6.jpg"><img src="http://img187.imageshack.us/img187/8135/15440253wv6.jpg" border="0"/></div>
<div id="4"><a href="http://img187.imageshack.us/img187/7062/80500211og0.jpg"><img src="http://img187.imageshack.us/img187/7062/80500211og0.jpg" border="0"/></a></div>
<div id="5"><a href="http://img124.imageshack.us/img124/7175/64204870iu5.jpg"><img src="http://img124.imageshack.us/img124/7175/64204870iu5.jpg" border="0"/></a></div>
<div id="6"></div>
<div id="menu">
<div id="kontakt"></div>
<div id="menu_back"><p id="tytul"><opis>Twój kontakt.</opis></p></div>
<div id="menu_down"></div>
<div id="regulamin"></div>
<div id="menu_back"><p id="tytul"><opis>Twój regulamin.</opis></p></div>
<div id="menu_down"></div>
<div id="fp"></div>
<div id="menu_back"><p id="tytul"><opis>Formy płatności.</opis></p></div>
<div id="menu_down"></div>
<div id="kw"></div>
<div id="menu_back"><p id="tytul"><opis>Koszty wysyłki.</opis></p></div>
<div id="menu_down"></div>
</div>
<div id="calosc_opis"></div>
<div id="opis_up"><p id="aukcja"><opis>Tytuł aukcji.</opis></p></div>
<div id="opis_back"><p id="tytul"><opis>Opis przedmiotu. Opis przedmiotu.Opis przedmiotu.Opis przedmiotu.Opis przedmiotu.Opis przedmiotu.</opis><br><galeria></galeria></p></div>
</div>
<div id="down"</div>
</div>
</body>
</html>
Re: Szablony aukcyjne allegro, DIV czy Table?
IE wyświetla strony troszkę inaczej niż inne przeglądarki więc zawsze są z tym problemy. Dlatego warto zrobić dwa arkusze styli. Umieść je w zewnętrznych plikach i ten dla IE w komentarz warunkowy.
Re: Szablony aukcyjne allegro, DIV czy Table?
A więc tak. Większość problemów rozwiązana. Mam tylko jeszcze jeden kłopot. Jak zwykle w IE wszystko jest ok, ale w mozilli i Operze między grafiką "Kontakt" i textem "Tówj kontakt" jest ok 20px przerwy. Tak samo jest w przypadku regulaminu, form płatności i kosztów wysyłki. Co z tym zrobić?