(CSS) szablon allegro - problem z DIV

[4R8EN]

Witam

Jest to mój pierwszy post, dlatego chciałbym pozdrowić wszystkich forumowiczów.

Od pewnego czasu próbuję, z różnym skutkiem, tworzyć szablony do moich aukcji allegro.
O ile z szablonami bez CSS nie miałem problemów, to niestety gdy wstawiam CSS do moich szablonów to cała strona się "sypie". Nie jestem profesionalistą, a w temacie tworzenia stron jestem mało doświadczony, dlatego zwracam się o pomoc.

Szablon pobrałem ze strony z darmowymi szablonami HTML, pozmieniałem obrazki i dodałem parę rzeczy (obrazki-linki w "headimg"). Po wstawieniu do allegro szablon się "przemieszcza", jest to prawdopodobnie problem z div'ami, ale próbowałem i niestety nie mogę sobie poradzić z tym.

Poniżej umieszczam kod szablonu:

Kod:

<style type="text/css"><!--
body {
margin-top:29px;
text-align:center;
background-image:url('http://img23.imageshack.us/img23/6383/bodybgnr.jpg');
background-color:#000000;
font-family:Tahoma, sans-serif;
font-size:11px;
color:#eeeeee;
}
#wrapper {
width:702px;
margin:0 auto;
background-image:url('http://img710.imageshack.us/img710/9451/wrapperbgd.jpg');
text-align:left;
}
#header {
float:left;
width:702px;
height:83px;
background-image:url('http://img88.imageshack.us/img88/7111/headerbgya.jpg');
}
h1 {
margin:0px;
padding:0px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:30px;
color:#980f0f;
}
h2 {
margin:0px;
padding:0px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:18px;
color:#980f0f;
}
h3 {
margin:0px;
padding:0px;
font-family:Tahoma, sans-serif;
font-size:11px;
color:#cccccc;
font-weight:normal;
}
.cleaner {
clear:both;
height:0px;
font-size:0px;
border:none;
margin:0; padding:0;
background:transparent;
}
#header h1 {
margin-top:25px;
margin-left:25px;
}
#header h3 {
margin-top:-6px;
margin-left:25px;
}
#topnavi {
float:left;
width:702px;
height:29px;
background-image:url('http://img853.imageshack.us/img853/6321/topnavibg.jpg');
}
#topnavi ul {
margin:0px;
padding:0px;
list-style-type:none;
margin-left:8px;
margin-right:8px;
}
#topnavi ul li.norm {
float:left;
height:29px;
background-image:url('http://img834.imageshack.us/img834/1552/topbuttonnorm.jpg');
background-position:right;
}
#topnavi ul li.select {
float:left;
height:29px;
background-image:url('http://img818.imageshack.us/img818/3346/topbuttonselect.jpg');
background-position:right;
}
#topnavi ul li.norm a {
display:block;
padding-right:24px;
padding-left:24px;
line-height:28px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
color:#FFFFFF;
font-size:10px;
text-decoration:none;
}
#topnavi ul li.select a {
display:block;
padding-right:24px;
padding-left:24px;
line-height:28px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
color:#FFFFFF;
font-size:10px;
text-decoration:none;
}
#topnavi ul li.norm a:hover {
display:block;
padding-right:24px;
padding-left:24px;
line-height:28px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
color:#FFFFFF;
font-size:10px;
text-decoration:underline;
}
#topnavi ul li.select a:hover {
display:block;
padding-right:24px;
padding-left:24px;
line-height:28px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
color:#FFFFFF;
font-size:10px;
text-decoration:underline;
}
#headimg {
float:left;
width:702px;
height:147px;
background-image:url('img/headimg_bg.jpg');
}
#bodybox {
float:left;
width:702px;
background-image:url('http://img718.imageshack.us/img718/3876/bodyboxbg.jpg');
background-repeat:no-repeat;
}
#subnavi {
float:left;
display:inline;
margin-left:18px;
margin-top:2px;
padding-top:26px;
padding-bottom:26px;
width:180px;
background-color:#1e1d1e;
background-image:url('http://img836.imageshack.us/img836/5359/subnavibg.jpg');
background-position:bottom;
}
#subnavi ul {
margin:0px;
padding:0px;
list-style-type:none;
margin-left:13px;
margin-right:13px;
}
#subnavi ul li.norm, #subnavi ul li.select {
height:24px;
background-image:url('http://img72.imageshack.us/img72/9328/subnavibutton2.gif');
}
#subnavi ul li.norm a {
display:block;
line-height:23px;
padding-left:20px;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#eeeeee;
text-decoration:none;
}
#subnavi ul li.norm a:hover {
display:block;
line-height:23px;
padding-left:20px;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#eeeeee;
text-decoration:underline;
}
#subnavi ul li.select a {
display:block;
line-height:23px;
padding-left:20px;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#980f0f;
text-decoration:none;
}
#subnavi ul li.select a:hover {
display:block;
line-height:23px;
padding-left:20px;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#980f0f;
text-decoration:underline;
}
#subnavi h2 {
margin-left:17px;
margin-bottom:6px;
}
#content {
float:left;
display:inline;
width:440px;
margin-left:27px;
margin-right:27px;
padding-top:26px;
padding-bottom:26px;
}
#content p {
color:#eeeeee;
}
#content ul {
list-style-image:url('img/list_li.gif')
}
#content a {
color:#980f0f;
text-decoration:none;
}
#content img.pic {
float:right;
margin-left:8px;
margin-bottom:8px;
border:1px solid #333333;
padding:2px;
}
#content a:hover {
color:#980f0f;
text-decoration:underline;
}
#footer {
float:left;
width:702px;
height:49px;
background-image:url('http://img191.imageshack.us/img191/8546/footerbgix.jpg');
text-align:center;
color:#cccccc;
font-family:Tahoma, sans-serif;
font-size:9px;
line-height:42px;
}
#footer a {
color:#cccccc;
text-decoration:none;
}
#footer a:hover {
color:#cccccc;
text-decoration:none;
}
--></style>
<div id="wrapper">
<div id="header">
<h1 style="font-weight: bold; color: red; margin-top: 16px; height: 42px;"><img alt="KURORA" src="http://img825.imageshack.us/img825/4794/kurora.png" style="width: 230px; height: 34px;" /></h1>
<h3><big><big>Drukarki do laptop&oacute;w - Akcesoria - Serwis</big></big></h3>
</div>
<div id="topnavi">
<ul>
<li class="select"><big><big><a href="http://allegro.pl/sklep/3378989_kurora_drukarki_do_laptopow" target="_blank" rel="nofollow">SKLEP</a></big></big></li>
<li class="norm" style="width: 120px;"><a href="http://allegro.pl/show_user.php?uid=3378989">KOMENTARZE</a></li>
<li class="norm"><a href="http://allegro.pl/my_page.php?uid=3378989">O NAS</a></li>
</ul>
</div>
<div id="headimg" style="text-align: right;">&nbsp;<a href="http://allegro.pl/sklep/3378989_kurora_drukarki_do_laptopow?category=62993&amp;id=3378989"><img alt="drukarki" src="http://img21.imageshack.us/img21/4717/drukarki.png" style="border: 0px solid; width: 137px; height: 147px;" /></a><a href="http://allegro.pl/sklep/3378989_kurora_drukarki_do_laptopow?category=70258&amp;id=3378989"><img alt="tusze" src="http://img706.imageshack.us/img706/552/tuszb.png" style="border: 0px solid; width: 61px; height: 147px;" /></a><a href="http://allegro.pl/sklep/3378989_kurora_drukarki_do_laptopow?category=70257&amp;id=3378989"><img alt="akcesoria" src="http://img135.imageshack.us/img135/892/akcesoria.png" style="border: 0px solid; width: 146px; height: 147px;" /></a></div>
<div id="bodybox">
<div id="subnavi">
<h2 style="color: #cc0000;">KONTAKT</h2>
<ul style="text-align: left;">
<li class="select" style="font-family: Arial Narrow;"><big><big>[email protected]</big></big></li>
<li class="norm" style="font-family: Arial Narrow;"><big><big>tel. 601-698-601</big></big></li>
<li class="norm" style="font-family: Arial Narrow;"><big><big>GG 16191057</big></big></li>
</ul>
</div>
<div id="content">
<h2 style="font-weight: bold;"><img alt="IP90" src="http://img192.imageshack.us/img192/5576/ip90.png" style="width: 440px; height: 156px;" /></h2>
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div>
</div>
<div id="footer" style="font-weight: bold;">&copy; Copyright 2012 KURORA</div>
<div class="cleaner"></div>
</div>

Szablon wyświetla się prawidłowo w Internet Explorer i w Operze


Oto jak wyświetla się w Allegro (header i footer sie przemieściły, powstała "czarna dziura" z prawej strony?)


Pozdrawiam i z góry dziękuję za wszystkie odpowiedzi.

[Kartofelek]

#subnavi {....display:inline;....} to nie jest element inline. To jest block albo inline-block

[4R8EN]

dzieki kartofelek.
poprawiłem na display:block
nadal pozostaje jednak problem przesuniecia poszczególnych elementow szablonu.

[camelrafal]

ciężko tutaj się dokopać o co tutaj chodzi
chyba nie opłaca się dochodzić do tego co gra a co nie gra bo może zająć to sporo czasu

generalnie podejrzewam że to wina allegro
na allegro wstawiasz stronę przechodzisz do edycji i nagle widzisz jakiś dodatkowy kod który allegro dodało samo z siebie...
allegro ma na dzień dzisiejszy dużo "bugów" i jest bardzo nie dopracowane jeżeli chodzi o wstawianie własnych szablonów

jeżeli naprawde zależy Ci na tym szablonie skopiuj sobie gdzieś grafikę i zrób stronę na tabelkach albo staraj się omijać floaty jak tylko możesz
no i oczywiście pod żadnym pozorem nie korzystaj z position:absolute... na pewno się rozleci

na allegro trzeba robić jak najprostrze strony bez kombinowania bo sie rozlatuja

[4R8EN]

dzięki za odpowiedz camelrafal
Zobaczę czy jestem w stanie oprzeć szablon na tabelkach, chyba, że jest możliwość zastąpienia "position" i "float", czymś bardziej kompatybilnym z Allegro ?

[camelrafal]

jeżeli chodzi o ten stary szablon to
dodaj do wrappera padding:0;
to sie nie będzie rozjeżdzał środek ale za cholere nie wiem dlaczego wrapper zmienia szerokość na 980 zamiast 702 hmm

[4R8EN]

dziekuję ponownie camelrafal.

Rzeczywiście po dodaniu padding:0; szablon w końcu się trzyma w całości.
Co do szerokości - to próbowałem w edytorze html zmniejszyć szerokość wrappera, ale bez względu na wpisaną szerokość allegro i tak poszerza na 980.
Dochodzę do wniosku, że najłatwiej bedzie poszerzyć wrappera do 980 i dostosować (poszerzyć do 980) resztę grafiki.

Właśnie znalazłem coś bardzo ciekawego: postanowiłem sprawdzić (w dragonfly'u opery) kod szablonu po "uzupełnieniu" przez allegro i znalazłem dwie części kodu: div#wrapper - max width: 1200px; i min width: 980 px.
Przeszukałem cały moj kod i nigdzie nie znalazłem tych "dodatków" do wrappera, stąd podejrzewam, że jest to jakaś wewnętrzna zasada dotycząca wyświetlania div'ów w samym allegro.
Ewentualnie może jest to poprostu tylko informacja o tym jak wyświetla się strona w danym momencie.

Co ciekawe szablon wyświetla się poprawnie po tym jak w dragonfly'u odznaczyłem "min width: 980px"

Poniżej screen:

[Kartofelek]

To jest styl allegrowy. Oni przecież też jakoś muszą zbudować swój layout.
Dlatego jak robisz szablony pod allegro dawaj do swoich klas np przedrostek. A najlepiej rób stylowanie kaskadowe
.moj_szablon .wrapper {....}

[camelrafal]

aha! czyli to ten min width tutaj nam psuje wszystko
zaraz się tym zajmę
brb

---

tak jak pisze kartofelek wystarczy zmienić nazwe wrapper na cos innego i wszystko hula i smiga

Kod:

<style type="text/css"><!--
body {

margin-top:29px;
text-align:center;
background-image:url('http://img23.imageshack.us/img23/6383/bodybgnr.jpg');
background-color:#000000;
font-family:Tahoma, sans-serif;
font-size:11px;
color:#eeeeee;
}
#mojwrapper {
padding:0;
width:702px;
margin:0 auto;
background-image:url('http://img710.imageshack.us/img710/9451/wrapperbgd.jpg');
text-align:left;
}
#header {
float:left;
width:702px;
height:83px;
background-image:url('http://img88.imageshack.us/img88/7111/headerbgya.jpg');
}
h1 {
margin:0px;
padding:0px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:30px;
color:#980f0f;
}
h2 {
margin:0px;
padding:0px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:18px;
color:#980f0f;
}
h3 {
margin:0px;
padding:0px;
font-family:Tahoma, sans-serif;
font-size:11px;
color:#cccccc;
font-weight:normal;
}
.cleaner {
clear:both;
height:0px;
font-size:0px;
border:none;
margin:0; padding:0;
background:transparent;
}
#header h1 {
margin-top:25px;
margin-left:25px;
}
#header h3 {
margin-top:-6px;
margin-left:25px;
}
#topnavi {
float:left;
width:702px;
height:29px;
background-image:url('http://img853.imageshack.us/img853/6321/topnavibg.jpg');
}
#topnavi ul {
margin:0px;
padding:0px;
list-style-type:none;
margin-left:8px;
margin-right:8px;
}
#topnavi ul li.norm {
float:left;
height:29px;
background-image:url('http://img834.imageshack.us/img834/1552/topbuttonnorm.jpg');
background-position:right;
}
#topnavi ul li.select {
float:left;
height:29px;
background-image:url('http://img818.imageshack.us/img818/3346/topbuttonselect.jpg');
background-position:right;
}
#topnavi ul li.norm a {
display:block;
padding-right:24px;
padding-left:24px;
line-height:28px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
color:#FFFFFF;
font-size:10px;
text-decoration:none;
}
#topnavi ul li.select a {
display:block;
padding-right:24px;
padding-left:24px;
line-height:28px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
color:#FFFFFF;
font-size:10px;
text-decoration:none;
}
#topnavi ul li.norm a:hover {
display:block;
padding-right:24px;
padding-left:24px;
line-height:28px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
color:#FFFFFF;
font-size:10px;
text-decoration:underline;
}
#topnavi ul li.select a:hover {
display:block;
padding-right:24px;
padding-left:24px;
line-height:28px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
color:#FFFFFF;
font-size:10px;
text-decoration:underline;
}
#headimg {
float:left;
width:702px;
height:147px;
background-image:url('img/headimg_bg.jpg');
}
#bodybox {
float:left;
width:702px;
background-image:url('http://img718.imageshack.us/img718/3876/bodyboxbg.jpg');
background-repeat:no-repeat;
}
#subnavi {
float:left;
display:inline;
margin-left:18px;
margin-top:2px;
padding-top:26px;
padding-bottom:26px;
width:180px;
background-color:#1e1d1e;
background-image:url('http://img836.imageshack.us/img836/5359/subnavibg.jpg');
background-position:bottom;
}
#subnavi ul {
margin:0px;
padding:0px;
list-style-type:none;
margin-left:13px;
margin-right:13px;
}
#subnavi ul li.norm, #subnavi ul li.select {
height:24px;
background-image:url('http://img72.imageshack.us/img72/9328/subnavibutton2.gif');
}
#subnavi ul li.norm a {
display:block;
line-height:23px;
padding-left:20px;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#eeeeee;
text-decoration:none;
}
#subnavi ul li.norm a:hover {
display:block;
line-height:23px;
padding-left:20px;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#eeeeee;
text-decoration:underline;
}
#subnavi ul li.select a {
display:block;
line-height:23px;
padding-left:20px;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#980f0f;
text-decoration:none;
}
#subnavi ul li.select a:hover {
display:block;
line-height:23px;
padding-left:20px;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#980f0f;
text-decoration:underline;
}
#subnavi h2 {
margin-left:17px;
margin-bottom:6px;
}
#content {
float:left;
display:inline;
width:440px;
margin-left:27px;
margin-right:27px;
padding-top:26px;
padding-bottom:26px;
}
#content p {
color:#eeeeee;
}
#content ul {
list-style-image:url('img/list_li.gif')
}
#content a {
color:#980f0f;
text-decoration:none;
}
#content img.pic {
float:right;
margin-left:8px;
margin-bottom:8px;
border:1px solid #333333;
padding:2px;
}
#content a:hover {
color:#980f0f;
text-decoration:underline;
}
#footer {
float:left;
width:702px;
height:49px;
background-image:url('http://img191.imageshack.us/img191/8546/footerbgix.jpg');
text-align:center;
color:#cccccc;
font-family:Tahoma, sans-serif;
font-size:9px;
line-height:42px;
}
#footer a {
color:#cccccc;
text-decoration:none;
}
#footer a:hover {
color:#cccccc;
text-decoration:none;
}
--></style>
<div id="mojwrapper">
<div id="header">
<h1 style="font-weight: bold; color: red; margin-top: 16px; height: 42px;"><img alt="KURORA" src="http://img825.imageshack.us/img825/4794/kurora.png" style="width: 230px; height: 34px;" /></h1>
<h3><big><big>Drukarki do laptopów - Akcesoria - Serwis</big></big></h3>
</div>
<div id="topnavi">
<ul>
<li class="select"><big><big><a href="http://allegro.pl/sklep/3378989_kurora_drukarki_do_laptopow" target="_blank" rel="nofollow" rel="nofollow">SKLEP</a></big></big></li>
<li class="norm" style="width: 120px;"><a href="http://allegro.pl/show_user.php?uid=3378989">KOMENTARZE</a></li>
<li class="norm"><a href="http://allegro.pl/my_page.php?uid=3378989">O NAS</a></li>
</ul>
</div>

<div id="bodybox">
<div id="subnavi">
<h2 style="color: #cc0000;">KONTAKT</h2>
<ul style="text-align: left;">
<li class="select" style="font-family: Arial Narrow;"><big><big>[email protected]</big></big></li>
<li class="norm" style="font-family: Arial Narrow;"><big><big>tel. 601-698-601</big></big></li>
<li class="norm" style="font-family: Arial Narrow;"><big><big>GG 16191057</big></big></li>
</ul>
</div>
<div id="content">
<h2 style="font-weight: bold;"><img alt="IP90" src="http://img192.imageshack.us/img192/5576/ip90.png" style="width: 440px; height: 156px;" /></h2>
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div>
</div>
<div id="footer" style="font-weight: bold;">© Copyright 2012 KURORA</div>
<div class="cleaner"></div>
</div>

[4R8EN]

dzieki kartofelek i camelrafal.
Sam nigdy bym nie rozwiązał problemu, a dzięki Wam szablon działa i wygląda świetnie.
Pozostało mi tylko wystawienie jakiejś aukcji i sprawdzenie jak szablon wyświetla się na różnych przeglądarkach.
Jeszcze raz dzięki i pozdrawiam