Skocz do zawartości
  • Przeglądający   0 użytkowników

    Brak zarejestrowanych użytkowników, przeglądających tę stronę.

krzychu86

Kodowanie-koniec

Promowane odpowiedzi

krzychu86    17

Drugi zakodowany w zyciu layout jestem dumny z siebie ze wogule cos mi wyszło wiem błedów duzo i wgl ale to ze cos sie zrobiło samemu to juz jakas motywacja jedynie czego nie zrobilem to to co zaznacze na sreenie a tutaj prosze linka do zakodwowanej strony:D

Kliknij aby zobaczyc

Nizej podaje autora wykonania graficzengo:

autor: PanicznyWeb

Prosze o jaka kolwiek ocene co poprawic bo jak wiadomo zielony moze nie tak bardzo ale jednak:)

post-25620-1430862133,7422_thumb.jpg

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach
SimLay    118

Pierwsze co to edytuj w CSS body z:

body {
	width: 1920px;
	margin: 0 auto;
	height: auto;
	background: url(images/tlo.png) center ; 
	color:white;
	padding:0px;
	}
NA
body {
	width: 100%;
	margin: 0 auto;
	height: auto;
	background: url(images/tlo.png) center ; 
	color: #fff;
	padding:0px;
	}
Jeśli robisz szablon to nie warto pisać w width szerokość swojego monitora ponieważ psuje to wyswietlanie jej u innych osób. A jeśli dasz 100% to dopasuje się automatycznie do każdego, oczywiście procenty mogą być różne :) Po Drugie w CSS 3 nie piszemy color: white; tylko color: #fff; Ikonki Profesjonalizm, Kim jestem itp nie są w równej lini postaraj się to poprawić. Po Trzecie przy większych sekcjach nie używaj div tylko section! W stopce oraz w menu używaj znaczników

[highlight]ZŁY KOD:[/highlight]

Graphic by PanicznyArt.pl Code by Krzychukuchnik.cba.pl
[/code] [highlight] [b]KODKTÓRY UJDZIE:[/b][/highlight]
[code]Graphic by PanicznyArt.pl Code by Krzychukuchnik.cba.pl
[highlight] W 100% POPRAWNY KOD:[/highlight]
Graphic byPanicznyArt.pl
Code by Krzychukuchnik.cba.pl

Najpierw poucz się troche zanim stworzysz coś nowego bo obecny kod to masakra a został przezemnie przejrzany tylko z 'zewnątrz'.

Jeśli będziesz chciał pomocy napisz na pw :)

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach
krzychu86    17

Ok Stary wielkie dzieki dopiero zajmuje sie kodowaniem od jakis 2 tygodni to wiesz ciesze sie ze wszystkiego ze wgl takie cos udalo mi sie stworzyc i w miare mozliwosci chodzi ale wiem duzo pracy przedemna:) jakby co to sie odezwe;))

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach
SimLay    118

rozwala się dalej ponieważ nie tylko body masz ustawione na width: 1920px; łap CAŁY CSS, pozamieniałem wszystkie pozostałe(dokładnie to 5) wartości width: 1920; na width: 100%;

body {
   width: 100%; 
   margin: 0 auto; 
   height: auto; 
   background: url(images/tlo.png) center ; 
   color: #fff; 
   padding:0px; 
	}
.topbelka{
	width:100%;
	height:166px;
	background-image:url(images/top.png);
	}
.logo{
	width:322px;
	height:68px;
	background-image:url(images/logo.png);
	float:left;
	margin-left:506px;
	margin-top:54px;}
ul.menu2, ul.menu2 li{
	display:block;
	list-style:none;
	}
ul.menu2 li{
	float:left;
	}
ul.menu2 li a{
	display:block;
	outline:none;}
ul.menu2 li a#glowna{
	text-decoration: none ;
	background-image:url(images/stronaglowna.png);
	width:82px;
	height:15px;
	float:left;
	margin-left:155px;
	margin-top:84px;}
ul.menu2 li a#kontakt{
	text-decoration: none ;
	background-image:url(images/kontakt.png);
	width:52px;
	height:13px;
	float:left;
	margin-left:18px;
	margin-top:84px;}
ul.menu2 li a#home{
	text-decoration: none ;
	background-image:url(images/home.png);
	width:34px;
	height:10px;
	float:left;
	margin-left:880px;
	margin-top:50px;
	}
ul.menu2 li a#kontakt1{
	text-decoration: none ;
	background-image:url(images/kontakt.png);
	width:52px;
	height:13px;
	float:left;
	margin-left:18px;
	margin-top:50px;
	}
ul.menu2 li a#galeria{
	text-decoration: none ;
	background-image:url(images/galeria.png);
	width:39px;
	height:10px;
	float:left;
	margin-left:18px;
	margin-top:50px;
	}
ul.menu2 li a#oferta{
	text-decoration: none ;
	background-image:url(images/oferta.png);
	width:40px;
	height:13px;
	float:left;
	margin-left:18px;
	margin-top:84px;}
ul.menu2 li a#oferta1{
	text-decoration: none ;
	background-image:url(images/oferta.png);
	width:40px;
	height:13px;
	float:left;
	margin-left:18px;
	margin-top:50px;
	}
ul.menu2 li a#portfolio{
	text-decoration: none ;
	background-image:url(images/portfolio.png);
	width:53px;
	height:13px;
	float:left;
	margin-left:18px;
	margin-top:84px;}
ul.menu2 li a#facebook{
	text-decoration: none ;
	background-image:url(images/facebook.png);
	width:53px;
	height:13px;
	float:left;
	margin-left:18px;
	margin-top:84px;}
.zoltygora{
	background-image:url(images/zoltygora.png);
	width:885px;
	height:393px;
	margin-left:516px;
	float:left;
	}
.kolotop{
	background-image:url(images/kolotop.png);
	width:538px;
	height:157px;
	float:left;
	margin-left:180px;
	margin-top:237px;
	}
.texttop{
	margin-left:28px;
	margin-top:28px;
	margin-right:28px;}
.belkaoferta{
	background-image:url(images/belkaoferta.png);
	width:121px;
	height:37px;
	float:left;
	margin-left:567px;
	margin-top:-65px;
	text-align:center;}
.textoferta{
	margin-top:10px;}
a{
	text-decoration: none ;
	color:white;}
a.link{
	text-decoration: none ;
	color:efbe14;}
a.link:hover{
	text-decoration: none ;
	color:yellow;}
a.linki{
	text-decoration: none ;
	color:efbe14;}
a.linki:hover{
	text-decoration: none ;
	color:white;}
.gwiazda{
	background-image:url(images/gwiazda.png);
	width:120px;
	height:123px;
	float:left;
	margin-left:-657px;
	margin-top:-310px;
	}
.Profesjonalizm{
	margin-top:140px;}
.ikonakontakt{
	background-image:url(images/ikonakontakt.png);
	width:139px;
	height:133px;
	float:left;
	margin-left:-530px;
	margin-top:38px;
	}
.kimjestem{
	float:left;
	margin-left:-499px;
	margin-top:185px;}
.serce{
	background-image:url(images/serce.png);
	width:128px;
	height:133px;
	float:Left;
	margin-left:1200px;
	margin-top:-360px;
}
.Kreatywnosc{
	float:left;
	margin-left:1225px;
	margin-top:-210px;
	}
.srodek{
	background-image:url(images/srodek.png);
	width:100%;
	height:275px;
	margin-top:393px;
}
.przycisk{
	background-image:url(images/podglad.png);
	width:121px;
	height:37px;
	margin-left:734px;
	margin-top:207px;
	float:left;}
.przycisk1{
	background-image:url(images/podglad.png);
	width:121px;
	height:37px;
	margin-left:260px;
	margin-top:0px;
	float:left;}
.podglad{
	float:left;
	margin-left:-84px;
	margin-top:215px}
.podglad1{
	float:left;
	margin-left:175px;
	margin-top:215px;}
.postep{
	float:left;
	margin-left:-240px;
	margin-top:40px;
	}
.praca55{
	background-image:url(images/praca55.png);
	float:left;
	width:155px;
	height:11px;
	margin-left:-365px;
	margin-top:110px;
	border: solid white;}
.praca100{
	background-image:url(images/praca100.png);
	float:left;
	width:155px;
	height:11px;
	margin-top:110px;
	margin-left:-100px;
	border: solid white;
	}
.pr55{
	background-image:url(images/procent1.png);
	float:left;
	width:29px;
	height:9px;
	margin-left:-365px;
	margin-top:90px;
}
.pr100{
	background-image:url(images/procent2.png);
	float:left;
	width:32px;
	height:9px;
	margin-top:90px;
	margin-left:-100px;
}
.srodek1{
	float:left;
	width:100%;
	height:480px;
}	
.realizacja{
	float:left;
	background-image:url(images/realizacjaprzycisk.png);
	width:118px;
	height:99px;
	margin-left:616px;
	margin-top:-3px;
	text-align:center;}
.realizacja1{
	margin-top:40px;}
.ostatnierealizacje{
	background-image:url(images/ostatnierealizacje.png);
	width:174px;
	height:160px;
	margin-left:0px;
	float:left;
	margin-top:110px}
.ostatnierealizacje3{
	background-image:url(images/ostatnierealizacje.png);
	width:174px;
	height:160px;
	margin-right:-300px;
	float:right;
	margin-top:110px}
.ostatnierealizacje2{
	background-image:url(images/ostatnierealizacje.png);
	width:174px;
	height:160px;
	margin-right:-550px;
	float:right;
	margin-top:110px}
.botkontakt{
	background-image:url(images/botkontakt.png);
	width:100%;
	height:306px;
	margin-top:480px;
	}
.tekstbot{
	float:left;
	margin-left:723px;
	margin-top:41px;
	}
.belkikontakt{
	background-image:url(images/belkikontakt.png);
	float:right;
	width:185px;
	height:34px;
	margin-left:466px;
	margin-top:-95px;}
.belkikontakt2{
	background-image:url(images/belkikontakt2.png);
	width:230px;
	height:128px;
	margin-top:30px;
	}
.tekstkontakt{
	float:left;
	margin-left:1050px;
	margin-top:46px;}
.belkikontakt3{
	float:left;
	background-image:url(images/belkikontakt3.png);
	width:122px;
	height:37px;
	margin-top:240px;
	margin-left:90px;}
.wyslij{
	float:left;
	margin-top:250px;
	margin-left:-50px;
	}
#formmularz textarea{
background-image:url(images/belkikontakt2.png);
width:230px;
height:128px;
display:block;
color:white;}
#formmularz input {
background-image:url(images/belkikontakt.png);
width:185px;
height:34px;
padding:0px;
color:white;}
#formmularz  input#submit {
background-image:url(images/belkikontakt3.png);
	width:122px;
	height:37px;
	border-radius:10px;}
.bot{
	background-image:url(images/bot.png);
	width:100%;
	height:83px;
	clear:both;}
.stopkatekst1{
	float:left;
	margin-top:38px;
	margin-left:210px;
	}

Łap :santa:

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach
ForCode    0

1. Szerokość strony - :/

2. HTML5 - słyszałeś kiedyś o czymś takim?

3. Obrazki z tekstem. A @font-face?

4. Czcionka.

5. Ten przycisk Wyślij na dole to do czego? No i te rogi - :/

Kompletną porażką jest jednak to że do 1 kolorowego tła używasz obrazków.

Podsumowując - jeszcze duuuuuuuuużo nauki ciebie czeka.

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach
krzychu86    17

ForCode, Stary spokojnie wiem ze nie jest idealnie jak mowilem wczesniej ucze sie dopiero koduje jesli mozna to tak nazwac od 2 tygodni dopiero takze ciesze sie z każdej pracy która wmiare mi wychodzi wiem ze musze dopracowywac kazdy szczegół ale samo to ze juz tak mi wyszlo jest jak dla mnie dobre. Zapewne sam zaczynales i tak samo jak ja nie wiedziales wielu spraw. Staram uczyc sie od podstaw wszystkiego i stopniowi rozszerzac moja wiedzę każdy człowiek popelnia błedy i uczy sie na nich. Sam pewnie popelniałes wiele błędów bo tak poprostu musi byc każdy popelnia błędy nie tylko w tej tematyce ale jak i w zyciu ael na tych błędach sam potem bazuje i juz wie ze powinnien zrobic inaczej:)

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach
Cuan    182

Co do rozmiaru strony.

Nie width: 100%, nie 1920px, tylko:

width: 100%;

min-width: 1024px;

i ewentualnie media queries dla mniejszych ekranów.

Brak informacji dla przeglądarki co to za dokument.

Dla HTML5 przed :

i przed oddaniem do oceny użytkownikowi (czyt. hejterowi) pytaj o ocenę validator.w3.org :-)

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach
Gość
Ten temat został zamknięty. Brak możliwości dodania odpowiedzi.

×