[css] Czy to jest dobrze pociete?, Dziala, pytam tylko o to czy tak jest dobrze. Opcje

[Dariusz2]

Pocialem sobie szablon i dziala zarowno pod IE jak i Mozilla.
Szablony tne od ~2 tygodni i pocialem ich okolo 20.
I wszystkie w identyczny sposob chce wiedziec czy tak jak to robie czy jest dobrze.
Lub jakie robie bledy.

Sa to szablony TOP a ponizej Lewy Panel i Tresc.
Prosty Uklad.


oto kod :

CSS

Kod

body {background: url(http://www.masterq.masternet.pl/nowe/1/images/index_03.jpg); background-repeat:repeat-x;  margin-top:0px;}
img { border:0px; }
a { display:block; text-decoration:none; }

.calosc { width:781px;}
.top {width:781px; height:300px;}
.toplewo  { background-image: url(http://www.masterq.masternet.pl/nowe/1/images/index_04.jpg); width:82px; height:300px; float:left;}
.topmenu { width:148px; height:300px; float:left;}
.topsrodek  { background-image: url(http://www.masterq.masternet.pl/nowe/1/images/index_06.jpg); width:261px; height:300px; float:left;}
.topprawo  { background-image: url(http://www.masterq.masternet.pl/nowe/1/images/index_07.jpg); width:289px; height:300px; float:left;}

.omnie { background-image: url(http://www.masterq.masternet.pl/nowe/1/images/index_05.jpg); width:148px; height:63px;}
.inneaukcje { background-image: url(http://www.masterq.masternet.pl/nowe/1/images/index_09.jpg); width:148px; height:60px;}
.komentarze { background-image: url(http://www.masterq.masternet.pl/nowe/1/images/index_10.jpg); width:148px; height:58px;}
.spod { background-image: url(http://www.masterq.masternet.pl/nowe/1/images/index_11.jpg); width:148px; height:119px;}

.panellewy { width:269px; float:left;  font-size:12px;}

.kontakt { background-image: url(http://www.masterq.masternet.pl/nowe/1/images/index_13.jpg); width:269px; height:56px;}
.przesylka { background-image: url(http://www.masterq.masternet.pl/nowe/1/images/index_18.jpg); width:269px; height:60px;}
.platnosci { background-image: url(http://www.masterq.masternet.pl/nowe/1/images/index_22.jpg); width:269px; height:56px;}

.trescpanelu { background: url(http://www.masterq.masternet.pl/nowe/1/images/index_15.jpg); background-repeat: repeat-y;  width:269px; padding-left:20px;}
.trescpanelu2 { background: url(http://www.masterq.masternet.pl/nowe/1/images/index_19.jpg); background-repeat: repeat-y;  width:269px;  padding-left:20px;}
.dol { background-image: url(http://www.masterq.masternet.pl/nowe/1/images/index_17.jpg); width:269px; height:32px;}
.dol2 { background-image: url(http://www.masterq.masternet.pl/nowe/1/images/index_21.jpg); width:269px; height:31px;}

.wpanelu { width:240px;}

.tresc { width:500px; float:left; font-size:12px; padding-left:10px;}
.trescaukcji { width:500px; float:left; }

.ponizej { width:780px; float:left;}

Kod html :

Kod

<div class="calosc">
     <div class="top">
     <div class="toplewo"></div>
         <div class="topmenu">
             <a href="#" title="O mnie"><div class="omnie"></div></a>
             <a href="#"title="Inne Aukcje"><div class="inneaukcje"></div></a>
             <a href="#" title="Komentarze"><div class="komentarze"></div></a>
             <div class="spod"></div>
         </div>
     <div class="topsrodek"></div>
     <div class="topprawo"></div>
     </div>
     <div class="ponizej">
         <div class="panellewy">
                 <div class="kontakt"></div>
                 <div class="trescpanelu"><div class="wpanelu">
                 <center> tekst </center>
                 </div></div>
                 <div class="dol"></div>
                
                 <div class="przesylka"></div>
                 <div class="trescpanelu2"><div class="wpanelu">
                 <center> tekst </center>
                 </div></div>
                 <div class="dol2"></div>

                 <div class="platnosci"></div>
                 <div class="trescpanelu2"><div class="wpanelu">
                 <center> tekst </center>
                 </div></div>
             <div class="dol2"></div>
         </div>
         <div class="tresc"><div class="trescaukcji">
         <center> tekst </center>
         </div></div>
    

     </div>
</div>

[Lion_87]

może jeszcze używa więcej P, UL LI, mniej DIV.

[Dariusz2]

Czyli np w miejscu gdzie mam diva "w panelu" tam uzywac P ? i dawac do niego styl ? bo tam chodzi o to ze mi wychodzilo za prawa krawedz to uzywac padding-right? i np Menu moge robic zamiast obrazki w divach to w img . Czy o to chodzi?


Do czego uzywac ul i li ? o ile dobrze wiem to ul i li to 'listowanie' :
-
-
-

cos takiego ?

[Skie]

może jeszcze używa więcej P, UL LI, mniej DIV.

To znacznika P się jeszcze w ogóle używa? Myślałem, że przestał być używany tak samo jak font itp. Ja osobiście proponuje używać span zamiast p :-)

[robar12]

<center></center> jest na pewno nie mile widziany w html 4
W3C html 4

[Dariusz2]

tego <center>tekst</center> uzylem tylko po to zeby cos sie na stronie wyswietlalo.


Jesli mozecie napisac kiedy i gdzie uzywac span ?

[decha-design]

To znacznika P się jeszcze w ogóle używa? Myślałem, że przestał być używany tak samo jak font itp. Ja osobiście proponuje używać span zamiast p :-)

większej bzdury nie słyszałem. <p> używa się do stosowania akapitów tekstu ...

[HTML] pobierz, plaintext 
<div id="test"><p class="normal">dupa dupa dupa</p><p class="next">nastepny akapit</p></div>
[HTML] pobierz, plaintext 

pomiędzy p a span jest zasadnicza rożnica - p jest wyświetlane blokowo, a span w linii

Jesli mozecie napisac kiedy i gdzie uzywac span ?

span dla tekstu, gdzie chcesz ... ale pamiętaj, że span ma domyślnie display: inline ... chyba, że określisz inaczej

[HTML] pobierz, plaintext 
<p class="normal">dupa <span class="red">dupa</span> dupa</p>
[HTML] pobierz, plaintext 

tego <center>tekst</center> uzylem tylko po to zeby cos sie na stronie wyswietlalo.

zamiast tego <center> polecam text-align: center bądź margin: 0 auto dla divów czy czegoś tam o znanej szerokości

ogolnie rzecz biorąc

Ten post edytował decha-design 27.03.2009, 23:29:35

[Dariusz2]

Dziekuje bardzo za odpowiedź.

A czy mógłby mi ktoś jeszcze napisać czy tak jak tne strone;>
to czy tak jest dobrze? chodzi mi o sama grafike juz nie patrzcie na miejsca gdzie jest tekst ;>



bo działać o dziwo działa, ale nie chce by TYLKO działało ale było poprawnie posklejane ;>

[korek_a]

ze względów estetycznych używaj tez czasami ID do dużych elementów a do innych id na początku nie z zerowałeś wszystkich elementów a przynajmniej tych używanych chociaż używasz tylko divy nie musisz używać adresów bezwzględnych w css

.trescpanelu { background: url(http://www.masterq.masternet.pl/nowe/1/images/index_15.jpg); background-repeat: repeat-y; width:269px; padding-left:20px;}

znacznie szybciej sie pisze i estetycznie wygląda taki zapis


.trescpanelu {background:url (images/index_15.jpg) repeat-y; width:269px; paddingt:0 0 0 20px; }

dominując rozmiarem czcionki jest 12px masz go w dwóch miejscach i to znaczy że o jeden raz za dużo zamiast go wpisywać co chwile w miejscu gdzie pojawia się tekst wystarczy go wpisać do body po elemencie float nie następuje element clear co prawda u ciebie działa ale jak bys rozbudowywał stronę i zapomniał o tym to byś mókł mieć trochę problemów nie widzą u ciebie w menu nigdzie pseudo selektora a on by na 100% ożywił lekko menu

co do struktury html
to jak już z tu pisano że istnieje inne znaczniki niż div i warto z nich korzystać bo po to są i znacznik <p> tonowy akapit czyli tekst a <span> to nic taka zapchaj dziura jak potrzebujesz dodać jakiś element który nie jest standardowy np chcesz dać kreskę ale <hr/> ci nie paś dajesz sobie <span> wysokości szerokości kolor i masz krechę menu to lista to tez przyjęte jest żeby menu wstawiać w znaczniki listy <ul>,<li>

[Dariusz2]

próbuje zrobić to menu na ul i li i niestety wszystko sie psuje :x tzw robią sie zbędne paski pomiedzy obrazkami .



robie w taki sposób :

Kod

<ul>
            <li><img src="http://www.podliski.pl/szablony/2/images/index_05.jpg"></li>
            <li><img src="http://www.podliski.pl/szablony/2/images/index_09.jpg"></li>
            <li><img src="http://www.podliski.pl/szablony/2/images/index_10.jpg"></li>
            <li><img src="http://www.podliski.pl/szablony/2/images/index_11.jpg"></li>
            </ul>

a css :

Kod

ul, ul li {
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 148px;
    float:left;
    
}

ul li {
    
    margin:0;
}

[korek_a]

a dałeś img{margin:0;}a po za tym obrazek wstaw jako tło do css

[Dariusz2]

noo teraz to już kompletnie się pogubiłem

mam w css :

Kod

img { border:0px; margin:0; }

piszesz żebym obrazek wstawił jako tło w css?
tylko w jaki sposób? bo tutaj za bardzo nie rozumiem.

wcześniej miałem w divie jako tło a teraz jak ma być?

[danny6]

Koledze chodzi abyś obrazek wstawił w tło znacznika <li> lub np. <a>


i poczytaj troche o semantyce, przyda ci się do cięcia

Ten post edytował danny6 28.03.2009, 14:01:14