+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: Jak wygląda kod ? (/thread-jak-wyglada-kod)
Jak wygląda kod ? - dervi3 - 09-01-2011
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:
<!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>RE: Jak wygląda kod ? - Kartofelek - 09-01-2011
aha fajnie ;]
O czymś nie zapomniałeś?
RE: Jak wygląda kod ? - Ancik - 09-01-2011
Hehehe
Wcześniej były dwa posty, jeden z linkiem, drugi bez. Skasował chyba nie tego co trzeba.
RE: Jak wygląda kod ? - Ratatuj1995 - 09-01-2011
FAIL
kod niespodzianka?
RE: Jak wygląda kod ? - dervi3 - 09-01-2011
Poprawione. PS. Wy takze nie mozecie uzywac entera jak tutaj piszecie ?...
RE: Jak wygląda kod ? - fiat125_p - 09-01-2011
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.
RE: Jak wygląda kod ? - dervi3 - 09-01-2011
Nie rozumie jak powinna sie zmieniac tylko pozycja
RE: Jak wygląda kod ? - beny - 12-01-2011
RE: Jak wygląda kod ? - Ancik - 12-01-2011
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)
.