Zaloguj się

suppositoria · 18-04-2009, 01:21

WItam
Tym razem mam problem z Allegro:
Stworzylem szablon aukcji dziala pod IE 6 pod firefoxe ale gdy wrzuce na allegro wszystko sie rozwala nie wspomne o tym ze allegro rozwala moj kod na strzepy jest tam pelno encji. Juz wlosy sobie rwe z glowy i nie moge wpasc o co chodzi.
Ponizej przedstawiam kod:

Kod:

<style type="text/css">



#cont {margin: 0px; padding: opx;}



body {

text-align: center;}



#cont {

width:840px;

margin-left:auto;

margin-right:auto;

text-align:left;}



#head{

height: 100px;

background-image: url("http://directdesign.pl/allegro/banerthin.jpg");

}

#inhead{

padding:20px 45px

}







#right{

margin-top:5px;

float: right;

width: 77%;

height: 600px;

Background:#dfe9ee;}



#left{

margin-top:5px;

height: 600px;

width:23%;

float:left}



#top{

height:200px;

Background:#dfe9ee url(http://directdesign.pl/allegro/banerek.jpg) repeat-x;

margin-right:5px;

padding:3px;}



#down{

height:200px;

Background:#dfe9ee url(http://directdesign.pl/allegro/banerek.jpg) repeat-x;

margin: 5px 5px 0px 0px;

padding:3px;}





#intop{padding:5px;}

h1{

font: bold small-caps 3em arial, sans-serif;

color:#ffffff;

letter-spacing:-.05em}

h4{

font: bold small-caps .8em arial, sans-serif;

color:#ffffff;}



ul{font: .8em arial, sans-serif;}

  

</style>







</head>



<body>





<div id="cont">

    

            <div id="head">

                    <div id="inhead">    

                        

                        <h1>Lorem ipsum dolor sit</h1>



                    </div>

            </div>

    

    <div id="left">

            

            

            

            

            <div id="top">

            <h4>Kontakt:</h4>

            <div id="intop">

            <ul>

                <li>Tel. 667-137-343</li>

                <li>GG <IMG SRC="http://www.gadu-gadu.pl/users/status.asp?id=8622329"> 8622329</li>

                <li>Mail [email protected]</li>

            </div>

            <br />

            

            </div>

            <div id="down">

            <div id="indown">

            

            <h4>Płatność i Wysyłka:</h4>

            <ul>

                <li>Ze względu na gabaryty przedmiotów odbiór wyłacznie osobisty w Krakowie</li>

            <br />

            </div>

            </div>



    </div>

    

    

    <div id="right">

    

            <div id="inright">

            </div> 

    </div>

    

</div>

</body>

</html>

**dziamber** · 18-04-2009, 01:34

Masa błędów:
Linijka 2: zamiast "padding: opx;" ma byc "padding: 0px;"
Linijka 13: zamiast "padding: 20px 45px" ma byc "padding: 20px 45px;"
Linijka 25: zamiast "float: left}" ma byc "float: left;}"
Linijka 39: zamiast "letter-spacign:-.05em}" ma byc "letter-spacing: 0,5em;}"
To wszystko do arkusza stylów css.
I wydaje mi się, że za dużo o jeden "</div>" na końcu kodu

suppositoria · 18-04-2009, 01:51

hmm zawsze robie mase bledow przy pisaniu Sad

Jak wy to robicie ze zauwazacie wszystko i nie robicie bledow? Czy to kwestia wprawy czy poprostu nie nadaje sie do tworzenia stron

**Labsta.com** · (Ten post był ostatnio modyfikowany: 18-04-2009, 01:56 przez Labsta.com.)

Pomiń html i body zamiast tego daj np. <div id="kontener> + w CSS (height:100%; width: 100%; ) bo strona aukcji ma już przecież i body i html.

Co do letter-spacing wartość to chyba -0.5em

Allegro i tak doda Ci #user_field do każdego elementu CSS. I robi się kicha jak zaczynasz edytować. Zostaje testowanie do bólu.

Zobacz źródło mojej aukcji może coś Ci się rozjaśni (to nie jest reklama) http://allegro.pl/item593739867_gotowy_projekt_logo_branza_foto_nowosc.html

Śmiga z tego co testowałem też na IE 5.5 i 6

Jak coś tam popoprawiasz to daj znać, co zostało.

P.s. Wiadom, że kopiowanie kodu i grafiki zabronione.

Co do błędów, to cudze lepiej widać, bo jak klepiesz kod godzinami to łatwo się w nim pogubić. Na szczęście są walidatory, podświetlania składni itd.

**dziamber** · 18-04-2009, 02:02

Ten adres powinien zagościc w zakładce ulubione: http://validator.w3.org/ - walidacja html i css, czy testujesz lokalnie czy testujesz w sieci. Bardzo pomaga bo czepia się każdej pierdoły

suppositoria · 18-04-2009, 16:20

Ok zwalidowalem moja stronke i poprawilem bledy jedyny blad to brak deklaracji rozmiaru obrazka w statusie gg ale to nie jest powod rozjezdzania sie strony.
wywalone sa rowniez body i head kod wyglada tak:

Kod:

<style type="text/css">



* {margin: 0px; padding: 0px;}







#cont {

width:840px;

margin-left:auto;

margin-right:auto;

text-align:left;}



#head{

height: 100px;

background-image: url("http://directdesign.pl/allegro/banerthin.jpg");

}

#inhead{

padding:10px 45px

}







#right{

margin-top:5px;

float: right;

width: 77%;

height: 600px;

Background:#dfe9ee;}



#left{

margin-top:5px;

height: 600px;

width:23%;

float:left}



#top{

height:200px;

Background:#dfe9ee url(http://directdesign.pl/allegro/banerek.jpg) repeat-x;

margin-right:5px;

padding:3px;}



#down{

height:200px;

Background:#dfe9ee url(http://directdesign.pl/allegro/banerek.jpg) repeat-x;

margin: 5px 5px 0px 0px;

padding:3px;}



#indown{padding:10px 20px;}

#intop{padding:10px 20px;}



h1{

font: bold small-caps 3em arial, sans-serif;

color:#ffffff;

letter-spacing:-.05em}



h4{

font: bold small-caps .8em arial, sans-serif;

color:#ffffff;}



ul{font: .8em arial, sans-serif;}

  

</style>

















<div id="cont">

    

            <div id="head">

                    <div id="inhead">    

                        

                        <h1>Lorem ipsum dolor sit</h1>



                    </div>

            </div>

    

    <div id="left">

            

            

            

            

            <div id="top">

            <h4>Kontakt:</h4>

            <div id="intop">

            <ul>

                <li>Tel. 667-137-343</li>

                <li>GG<img src="http://www.gadu-gadu.pl/users/status.asp?id=8622329"/> 8622329</li>

                <li>Mail [email protected]</li>

            </ul>    

            </div>

        </div>

        <div id="down">

            

            <h4>Płatność i Wysyłka:</h4>

            

            <div id="indown">

            

                

                <ul>

                <li>Ze względu na gabaryty przedmiotów odbiór wyłacznie osobisty w Krakowie</li>

                </ul>

            </div>

        </div>



    </div>

    

    

    <div id="right">

    

            <div id="inright">

            </div> 

    </div>

    

</div>

Problem z allegro polega chyba na tym ze wrzuca swoje marginesy i dopelnienie. Niestety zerowanie nie dziala

Kod:
* {margin: 0px; padding: 0px;}

Zastanawiam sie jak wyzerowac domyslne marginesy (te narzucone przez allegro) w miom kontenerze skoro allegro dodaje jak pisal Labsta.com #user_field do kazdego elementu CSS

**Labsta.com** · (Ten post był ostatnio modyfikowany: 18-04-2009, 17:30 przez Labsta.com.)

Spróbuj tak jak mówiłem, czyli

Kod:
<div id="kontener">

cały kod html który masz teraz (od <div id="cont"> do końca)

</div>

CSS

Kod:
#kontener {

margin: 0px; 

padding: 0px;

text-align: center; //dla centrowania w IE

width: 100%;

overflow: hidden; //żeby rozciągało diva

}

P.S. udajemy, że "kontener" to body

suppositoria · Liczba postów: 24 Liczba wątków: 11 Dołączył: 03-03-2009 Reputacja: 0

Zrobilem to co mowiliscie efekt dalej marny np naglowek wyjezdza mi poza kontener head mimo iz marginesy i paddingi ustawione sa na zero.
Kod w tym momencie wyglada tak:

Kod:

<style type="text/css">











#cont {

width:840px;

margin: 0px;

padding: 0px;

text-align: center; 





}



#head{

height: 100px;

background-image: url("http://directdesign.pl/allegro/banerthin.jpg");

}

#inhead{

padding:10px 4px

}







#right{

margin-top:5px;

float: right;

width: 77%;

height: 417px;

Background:#dfe9ee;}



#left{

margin-top:5px;

height: 600px;

width:23%;

float:left}



#top{

height:200px;

Background:#dfe9ee url(http://directdesign.pl/allegro/banerek.jpg) repeat-x;

margin-right:5px;

padding:3px;}



#down{

height:200px;

Background:#dfe9ee url(http://directdesign.pl/allegro/banerek.jpg) repeat-x;

margin-right:5px;

margin-top:5px;

padding:3px;}





h1{

font: bold small-caps 3em arial, sans-serif;

color:#ffffff;

letter-spacing:-.05em}



h4{

font: bold small-caps .8em arial, sans-serif;

color:#ffffff;}



ul{font: .8em arial, sans-serif;}

#inright{

padding: 1px 15px 15px 15px;

font-family: arial, sans-serif;}  

</style>

















<div id="cont">

    

            <div id="head">

                    <div id="inhead">    

                        

                        <h1>Lorem ipsum dolor sit</h1>



                    </div>

            </div>

    

    <div id="left">

            

            

            

            

            <div id="top">

            <h4>Kontakt:</h4>

            <div id="intop">

            <ul>

                <li>Tel. 667-137-343</li>

                <li>GG<img src="http://www.gadu-gadu.pl/users/status.asp?id=8622329"/> 8622329</li>

                <li>Mail [email protected]</li>

            </ul>    

            </div>

        </div>

        <div id="down">

            

            <h4>Płatność i Wysyłka:</h4>

            

            <div id="indown">

            

                

                <ul>

                <li>Ze względu na gabaryty przedmiotów odbiór wyłacznie osobisty w Krakowie</li>

                </ul>

            </div>

        </div>



    </div>

    

    

    <div id="right">

    

            <div id="inright">

            <h2>Lorem ipsum dolor sit amet</h2>

            <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus,At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

 omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.



</p>

            

            

            </div> 

    </div>

    

</div>

Dziwne jest rowniez to ze mam obok siebie dwa kontenery "left" i "right" kazdy ma z nich ustawiony margin-top: 5px; a jeden jest nizej od drugiego
PS Nie chce rozciaganej strony tylko uklad dwukolumnowy o stalej szerokosci.
Zastanawiam sie czy jednak nie prosciej z Allegro na tabelkach robic Sad

**Labsta.com** · 20-04-2009, 02:33

Zobacz mój ostatni post.
Nie dodałeś kontenera obejmującego wszystko.

Kod:
<style type="text/css">

#kontener {

margin: 0px; 

padding: 0px;

text-align: center; //dla centrowania w IE

width: 100%;

overflow: hidden; //żeby rozciągało diva

}

#cont {

width:840px;

margin: 0px auto;

padding: 0px;

text-align: left; 

}

...

html

Kod:

<div id="kontener">

<div id="cont">

    

            <div id="head">

                    <div id="inhead">    

                        

                        <h1>Lorem ipsum dolor sit</h1>



                    </div>

            </div>

    

    <div id="left">

            

            

            

            

            <div id="top">

            <h4>Kontakt:</h4>

            <div id="intop">

            <ul>

                <li>Tel. 667-137-343</li>

                <li>GG<img src="http://www.gadu-gadu.pl/users/status.asp?id=8622329"/> 8622329</li>

                <li>Mail [email protected]</li>

            </ul>    

            </div>

        </div>

        <div id="down">

            

            <h4>Płatność i Wysyłka:</h4>

            

            <div id="indown">

            

                

                <ul>

                <li>Ze względu na gabaryty przedmiotów odbiór wyłacznie osobisty w Krakowie</li>

                </ul>

            </div>

        </div>



    </div>

    

    

    <div id="right">

    

            <div id="inright">

            <h2>Lorem ipsum dolor sit amet</h2>

            <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus,At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.



</p>

            

            

            </div> 

    </div>

    

</div>

</div>

A co do tabelek to wiadomo że łatwiej, pewnie 95% szablonów jest tak zrobione. Jednak jak dasz radę z divami to masz plus, bo szybciej będzie się ładować, a to jest bardzo pożądane na allegro. Wynika to ze sposobu ładowania tabel.

suppositoria · Liczba postów: 24 Liczba wątków: 11 Dołączył: 03-03-2009 Reputacja: 0

Przepraszam wkleilem zly kod ten jest prawidlowy:

Kod:

<style type="text/css">



* {margin: 0px; padding: 0px;}



#calosc {

margin: 0px;

padding: 0px;

text-align: center;

width: 100%;

overflow: hidden;}



#cont {

width:840px;

margin-left:auto;

margin-right:auto;

text-align:left;}



#head{

margin: 0px;

height: 100px;

background-image: url("http://directdesign.pl/allegro/banerthin.jpg");

}

#inhead{

padding:0px 45px

}







#right{

margin-top:5px;

float: right;

width: 77%;

height: 600px;

Background:#dfe9ee;}



#left{

margin-top:5px;

height: 600px;

width:23%;

float:left}



#top{

height:200px;

Background:#dfe9ee url(http://directdesign.pl/allegro/banerek.jpg) repeat-x;

margin-right:5px;

padding:3px;}



#down{

height:200px;

Background:#dfe9ee url(http://directdesign.pl/allegro/banerek.jpg) repeat-x;

margin: 5px 5px 0px 0px;

padding:3px;}



#indown{padding:10px 20px;}

#intop{padding:10px 20px;}



h1{

margin: 0px;

font: bold small-caps 3em arial, sans-serif;

color:#ffffff;

letter-spacing:-.05em}



h4{

margin: 0px;

font: bold small-caps .8em arial, sans-serif;

color:#ffffff;}



ul{font: .8em arial, sans-serif;}

  

</style>











<div id="calosc">





<div id="cont">

    

            <div id="head">

                    <div id="inhead">    

                        

                        <h1>Lorem ipsum dolor sit</h1>



                    </div>

            </div>

    

    <div id="left">

            

            

            

            

            <div id="top">

            <h4>Kontakt:</h4>

            <div id="intop">

            <ul>

                <li>Tel. 667-137-343</li>

                <li>GG<img src="http://www.gadu-gadu.pl/users/status.asp?id=8622329"/> 8622329</li>

                <li>Mail [email protected]</li>

            </ul>    

            </div>

        </div>

        <div id="down">

            

            <h4>Płatność i Wysyłka:</h4>

            

            <div id="indown">

            

                

                <ul>

                <li>Ze względu na gabaryty przedmiotów odbiór wyłacznie osobisty w Krakowie</li>

                </ul>

            </div>

        </div>



    </div>

    

    

    <div id="right">

    

            <div id="inright">

            </div>

    </div>

    

</div>

</div>

Dalej rozwala

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