Ocena wątku:
  • 0 głosów - średnia: 0
  • 1
  • 2
  • 3
  • 4
  • 5
Jak wygląda kod ?
#1
Shy 
Skonczyłem prawie kodowac pewien layout prosze ocenic kod co mozna by zmienic,jak oceniasz. KOD: CSS
Kod:
/****** Global ******/

/* Body */
body {
    background: url('images/bg.png') repeat;
    color: #868686;

    font-family: sans-serif;
    font-size: 12px;

    margin: 0 auto;

    width: 1024px;
    padding: 0;
}
img {

    border:0 none;
}

#wrap{
    margin: 0 auto;
    padding:0;
    width:999px;
}

/* Paragraphs */
p {
    margin: 0;
    line-height: 240%;
    font-size: 10px;
}

/* Top */

#top {
    margin: 0 auto;

    width: 999px;
    height: 190px;
}

#top .logo {
    float: left;
    background: url('images/logo.png') no-repeat;
    width:220px;
    height: 82px;
    margin: 70px 0 0 55px;
}

#top .panel{
    float: right;
    background: url('images/panel.png') no-repeat;
    width:253px;
    height: 119px;
    margin: 50px 65px 0 0;
}

#menubg{
    float: left;
    background: url('images/menubg.png') repeat-x;
    width:999px;
    height: 55px;
    margin: 1px 0 0 0;
}

.menu ul{
    list-style: none;
    margin: 0px;
    padding: 0px;

}
.menu li{
    float:left;
}
.menu li a{
    float:left;
    display:block;
    text-decoration:none;
    text-indent:-999999em;
    outline: none;

}
.menu ul li a#home{background: url(images/home.png) no-repeat;float:left;width:127px;height:55px;}
.menu ul li a#home:hover{background: url(images/home_h.png) no-repeat;float:left;width:127px;height:55px;}
.menu ul li a#forum{background: url(images/forum.png) no-repeat;float:left;width:70px;height:55px;}
.menu ul li a#forum:hover{background: url(images/forum_h.png) no-repeat;float:left;width:70px;height:55px;}
.menu ul li a#liga{background: url(images/liga.png) no-repeat;float:left;width:56px;height:55px;}
.menu ul li a#liga:hover{background: url(images/liga_h.png) no-repeat;float:left;float:left;width:56px;height:55px;}
.menu ul li a#onas{background: url(images/onas.png) no-repeat;float:left;width:66px;height:55px;}
.menu ul li a#onas:hover{background: url(images/onas_h.png) no-repeat;float:left;width:66px;height:55px;}
.menu ul li a#sponsorzy{background: url(images/sponsorzy.png) no-repeat;float:left;width:93px;height:55px;}
.menu ul li a#sponsorzy:hover{background: url(images/sponsorzy_h.png) no-repeat;float:left;width:93px;height:55px;}
.menu ul li a#kontakt{background: url(images/kontakt.png) no-repeat;float:left;width:84px;height:55px;}
.menu ul li a#kontakt:hover{background: url(images/kontakt_h.png) no-repeat;float:left;width:84px;height:55px;}

/* Center */

#center{
    background-color: #FFF;
    width: 1000px;    
    height: 844px;
}
#obramowanie{
    float: left;
    background: url('images/obramowanie.png') no-repeat;
    width:553px;
    height: 623px;
}
#belka1 {
    float: left;
    background: url('images/belk1.png') no-repeat;
    width:999px;
    height: 17px;    
}    

.bg1 {
    float: left;
    background: url('images/bgmecz.png') no-repeat;
    width: 233px;
    height: 119px;
}

.bg2 {
    float: left;
    background: url('images/bgmecz.png') no-repeat;
    width: 233px;
    height: 119px;
    margin: 0 0 0 12px;
}


.sponsorzy {
    float: left;
    width: 470px;
    height: 122px;
    margin: -5px 0 0 25px;
}


#belka2 {
    float: left;
    background: url('images/belk2.png') no-repeat;
    width:999px;
    height: 17px;    
}

#lewa {
    float: left;
    width:400px;
    height: 558px;
}

/* ~~~ LEWA STRONA ~~~ */
.news1 {
    float:left;
    width:264px;
    height: 250px;
    font-size: 9px;
    font-family: Tahoma;
}

.news2 {
    float:left;
    width:264px;
    height: 250px;
    margin: 0 0 0 20px;
    font-size: 9px;
    font-family: Tahoma;
}

.news3 {
    float:left;
    width:264px;
    height: 250px;
    margin: 95px 0 0 0;
    font-size: 9px;
    font-family: Tahoma;
}

.news4 {
    float:left;
    width:264px;
    height: 250px;
    margin: 95px 0 0 20px;
    font-size: 9px;
    font-family: Tahoma;
}

.reklama {
    float:left;
    width:552px;
    height:0px;
    margin: 30px 0 0 40px;
}

.spotkania {
    float:right;
    width:432px;
    height:154px;
    margin: 30px 0 0 40px;
}

#prawa{
    float: right;
    width:420px;  
    height: 620px;
    margin: 0 0 0 40px;
}

/* ~~~ PRAWA STRONA ~~~ */
.mecz {
    float:left;
    background: url('images/mecz.png') no-repeat;
    width:370px;
    height:151px;
    margin: 0 40px 0 0;
}

.ankieta {
    float:left;
    width:206px;
    height: 160px;
    margin: 10px 0 0 0;
}

.media{
    float:right;
    width:206px;
    height: 160px;
    margin: 10px 4px 0 0;
}

.partner {
    float:left;
    width:208px;
    height: 200px;
    margin: 40px 0 0 0;
}

.stats {
    float:right;
    width:206px;
    height: 200px;
    margin: 50px 5px 0 0;
}

/* Stopka */

#stopka{
    float: left;
    background: url('images/stopka.png') no-repeat;
    width: 1000px;    
    height: 63px;
}
KOD HTML:
Kod:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<?
include("_mysql.php");
include("_settings.php");
include("_functions.php");
?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
    <meta http-equiv="Content-type" content="text/html; charset=iso-8859-2">
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta name="author" content="portfolio, dawid, grafika, kodowanie, killer, darmowe" />
    <title> <? echo PAGETITLE; ?>  </title>
    <link href="_stylesheet.css" rel="stylesheet" type="text/css">
    <script src="js/bbcode.js" language="jscript" type="text/javascript"></script>
    <link href="killer.css" rel="stylesheet" type="text/css" />
</head>    

<body>
<div id="wrap">
    <div id="top">
        <div class="logo"></div>
        <div class="panel"><? include("login.php"); ?> </div>

    </div>    
    
    <div id="center">
        <div id="menubg" class="menu">
        <ul>
            <li><a id="home" href="index.php" class="">Strona glowna</a></li>
            <li><a id="forum" href="index.php?site=forum" class="">Forum</a></li>
            <li><a id="liga" href="#" class="">Liga></li>
            <li><a id="onas" href="#" class="">O nas</a></li>
            <li><a id="sponsorzy" href="index.php?site=sponsors" class="">Sponsorzy></li>
            <li><a id="kontakt" href="index.php?site=contact" class="">Kontakt</a></li>
        </ul>
        </div>
        
    <div id="belka1"></div>
            <div class="bg1">
                <p><? include("sc_results.php"); ?></p>

            </div>
            
            <div class="bg2">
                <p><? include("sc_headlines.php"); ?></p>

            </div>
            <div class="sponsorzy">
                <img src="images/sponsor.png">
                <img src="images/sponsor.png">
            </div>
            
    <div id="belka2"></div>
         <div id="lewa">
            <div id="obramowanie">
                <div class="news1">
                <img src="images/news2.png">
                        
                    <?
                    if(!isset($site)) $site="news";
                    $invalide = array('/','/\/',':','.');
                    $site = str_replace($invalide,' ',$site);
                    if(!file_exists($site.".php")) $site = "news";
                    include($site.".php");
                    ?>
                    
                </div>
                <div class="news2">
                    <img src="images/news2.png">
                        <div style="float:left;margin:5px 0 0 60px;">
                            Napisał: <a style="color:#6b8a11;">Evenement</a> Data: <a style="color:#6b8a11;">01.20.10</a></div>
                    <img src="images/linia.png"> <center>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin
                        nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel
                        lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla
                        ac diam. Quisque semper justo at risus. Donec venenatis, turpis
                        vel hendrerit interdum, dui ligula ultricies purus, sed posuere
                        libero dui id orci. Nam congue, pede vitae dapibus aliquet,
                        elit magna vulputate arcu, vel tempus metus leo non est.
                        Etiam sit amet lectus quis est congue mollis. Phasellus congue
                        lacus eget neque. Phasellus ornare, ante vitae consectetuer
                        consequat, purus sapien ultricies dolor, et mollis pede metus
                        eget nisi. Praesent sodales velit quis augue. Cras suscipit, urna
                        at aliquam rhoncus, urna quam viverra nisi, in interdum massa
                        nibh nec erat.</center>
                </div>
                <div class="reklama">
                    <img src="images/baner.png">
                </div>
                <div class="news3">
                    <img src="images/news2.png">
                        <div style="float:left;margin:5px 0 0 60px;">
                            Napisał: <a style="color:#6b8a11;">Evenement</a> Data: <a style="color:#6b8a11;">01.20.10</a></div>
                    <img src="images/linia.png"> <center>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin
                        nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel
                        lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla
                        ac diam. Quisque semper justo at risus. Donec venenatis, turpis
                        vel hendrerit interdum, dui ligula ultricies purus, sed posuere
                        libero dui id orci. Nam congue, pede vitae dapibus aliquet,
                        elit magna vulputate arcu, vel tempus metus leo non est.
                        Etiam sit amet lectus quis est congue mollis. Phasellus congue
                        lacus eget neque. Phasellus ornare, ante vitae consectetuer
                        consequat, purus sapien ultricies dolor, et mollis pede metus
                        eget nisi. Praesent sodales velit quis augue. Cras suscipit, urna
                        at aliquam rhoncus, urna quam viverra nisi, in interdum massa
                        nibh nec erat.</center>
                </div>
                
                <div class="news4">
                    <img src="images/news2.png">
                        <div style="float:left;margin:5px 0 0 60px;">
                            Napisał: <a style="color:#6b8a11;">Evenement</a> Data: <a style="color:#6b8a11;">01.20.10</a></div>
                    <img src="images/linia.png"> <center>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin
                        nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel
                        lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla
                        ac diam. Quisque semper justo at risus. Donec venenatis, turpis
                        vel hendrerit interdum, dui ligula ultricies purus, sed posuere
                        libero dui id orci. Nam congue, pede vitae dapibus aliquet,
                        elit magna vulputate arcu, vel tempus metus leo non est.
                        Etiam sit amet lectus quis est congue mollis. Phasellus congue
                        lacus eget neque. Phasellus ornare, ante vitae consectetuer
                        consequat, purus sapien ultricies dolor, et mollis pede metus
                        eget nisi. Praesent sodales velit quis augue. Cras suscipit, urna
                        at aliquam rhoncus, urna quam viverra nisi, in interdum massa
                        nibh nec erat.</center>
                </div>
            </div>
        </div>
        
        <div id="prawa">
            <div class="mecz">    
            </div>
            
            <div class="ankieta">
                    <img src="images/ankieta.png">
                        <div style="float:left;margin:5px 0 0 60px;">
                        <? include("poll.php"); ?></div>
    
            </div>
            
            <div class="media">
                    <img src="images/media.png">
                        <div style="float:left;margin:5px 0 0 60px;">
                        Czy <a style="color:#6b8a11;">Stopro</a> jest fajne ?</div>
    
            </div>
            <div class="partner">
                    <img src="images/partner.png">
                        <div style="float:left;margin:5px 0 0 60px;">
                        <? include("partners.php"); ?></div>
    
            </div>
            <div class="stats">
                    <img src="images/stats.png">
                        <div style="float:left;margin:5px 0 0 60px;">
                        <? include("counter.php"); ?></div>
    
            </div>
            
        </div>
            
    </div>                    
                
            <div id="stopka"></div>

        
        
        

            
    
    </body>
    </html>
DEMO: http://skypedesign.xaa.pl/dawid/kr/ Nie moge wciskac entera jak pisze dziwne..
Odpowiedz
#2
aha fajnie ;]
O czymś nie zapomniałeś?
Odpowiedz
#3
Hehehe Big Grin
Wcześniej były dwa posty, jeden z linkiem, drugi bez. Skasował chyba nie tego co trzeba.
Odpowiedz
#4
FAIL

kod niespodzianka?
Odpowiedz
#5
Poprawione. PS. Wy takze nie mozecie uzywac entera jak tutaj piszecie ?...
Odpowiedz
#6
Z rzeczy które rażą to na pewno budowa głównego menu. Chodzi o bardzo ważny szczegół - pozycja menu powinna mieć tylko 1 obrazek, na hover, powinna się zmieniać tylko jego pozycja, a nie cały obrazek. Takie rozwiązanie ma kilka zalet, a co najwazniejsze eliminuje mignięcie, podczas pierwszego najechania na menu.
Odpowiedz
#7
Nie rozumie jak powinna sie zmieniac tylko pozycja
Odpowiedz
#8
90% kodu zajmuje 90% czasu,
pozostałe 10% zajmuje drugie tyle
Odpowiedz
#9
Mniej więcej chodzi o to, że częśc przycisku, która ma się pojawic po najechaniu, znajduje się poza kontenerem, a w momencie, w którym najeżdżasz na przycisk, ta częśc się wysuwa i wypycha tą widoczną przed najechaniem.
Rzeczywiście to lepsze rozwiązanie niż prosta zmiana obrazka, chyba że do tej prostej zamiany obrazka zastosujesz funkcje jquery (np. fade-in/fade-out) Smile.
Odpowiedz


Podobne wątki…
Wątek: Autor Odpowiedzi: Wyświetleń: Ostatni post
  tabela inaczej wygląda w różnych przeglądarkach faust 3 2,835 25-01-2012, 04:35
Ostatni post: Kartofelek
  [CSS]Strona inaczej wygląda po wrzuceniu na serwer faust 6 4,856 05-02-2010, 20:22
Ostatni post: faust

Skocz do:


Użytkownicy przeglądający ten wątek:
Sponsorzy i przyjaciele
SeoHost.pl