witam , dla mojej strony został zrobiony layout , layout jest pocięty ale zupełnie nie wiem jak się wziąć najlepiej za kodowanie tego..
Layout wygląda tak:
http://www.kalahir.pl/l.jpg

u siebie mam rozdzielczość 1680 na 1050 i wygląda ok ale standard to chyba 1024 na 768 i tu pojawia się problem otóż własnie na 1024 obrazek wychodzi w bok i pojawia się skrol boczny... co w takiej sytuacji mam zrobić ? css coś wskóram bo na to że grafik poprawi bym nie liczył...

tlo mam oddzielne i wygląda tak - http://www.kalahir.pl/tlo.jpg

tło dajesz jako css background-image: i problem rozwiązany, a content strony trzymasz w div'ie o szerokości max 1005px, pamiętaj, że dostosowując lay pod 1024px, trzeba zostawić minimum 20px na pasel przewijania

zrob kontener div, wrzuc twoje tlo jako background url, i zmien cssowy parametr overflow

to dziwne bo jak ja mierze w ps to widzę, że od zielonego do końca menu jest 1007px, ponadto ja bym zakodował tak, żeby kontener miał 994px - czyli od tego boxu z tekstem (wprowadzenie...) do końca brązowego menu, a ten mały zielony boxik z facebookiem dał na position absolute, i wtedy z szerokością 994 nie ma problemów

chyba jednak nie
1. miałeś dać szerokość max 1005px, a dla .top dałeś 1026px + 16px marginesu czyli 1042...
2. body daj na 100% width, a szerokość tą 1004px dla jakiegoś diva, który będzie wszystko trzymał
3. przy pozycjonowaniu absolutnym, pozycjonujemy odnośnie kontenera z position:relative, więc dobrze byłoby dla diva trzymającego wszystko nadać taki position


//tragiczny html to tragiczny wynik

eh... Ty w ogóle coś kiedyś kodowałeś?

1. Tło przesuwa Ci się, bo musisz background-postion na center, a Ty go nie ustawiłeś więc masz domyślny top left i dlatego się przesuwa
2. Znowu problemem są domyślne wartości, w tym przypadku padding dla body, który powinieneś ustawić na 0,

tak na marginesie to zanim się zaczyna pisać style, najpierw robi się reset - google->css reset

to musisz się trochę pobawić, bo jak to pierwszy raz to jeszcze dużo problemów przed Tobą, na dobry początek:

[HTML] pobierz, plaintext 
html, body{
height:100%;
margin:0;
padding:0;
background:url(images/bg.jpg) top no-repeat;
background-color:#000000;
}
[HTML] pobierz, plaintext 

cały czas próbuje i ciężko to idzie..

mam problem już z samym brązowym menu.. na rozdzielczości 1680 na 1050 menu jest za krótkie.. (kończyć się powinno w miejscu gdzie się kończy obok czarne tło zaś na rozdzielczości 1024 na 768 menu jest prawie dobrze wymierzone.. czy da rade tak zrobić aby na każdej grafice było odpowiedniej długości czy trzeba było by przerabiać cały szablon ..

http://qoooq.pl/

Daj tu cały kod strony i cały kod css i opisz dokładnie co chcesz tam zrobić.

skoro nie wiesz jak się zabrać, to poszukaj stron z podobną strukturą i przeanalizuj kod html i css oraz w jaki sposób zostały zakodowane, no bo chyba nie oczekujesz, że ktoś Ci tu szablon cały potnie

oczywiście że nie liczę że ktoś to za mnie zrobi.. tylko dalej mam parę problemów np znów mam sytuacje że tło się na mniejszej rozdzielczości po prawej stronie nie wyświetla -> a w body mam ustawione:

[CSS] pobierz, plaintext 
	background-position: center;
	background:url(graphics/tlo.jpg) top no-repeat;
	background-color: #000000;
[CSS] pobierz, plaintext 

-> http://qoooq.pl/index2.html

ale chodzi Ci o to, że tam po prawej jest taki kawałek czarnego paska? bo jeżeli tak, to dlatego że tło jest lekko przesunięte i lewa część wchodzi pod główny box, jak utniesz trochę z lewej to tło to wtedy się wyrówna

jeszcze jedna rada: dla wszystkich div'ów wewnątrz main ustaw float, bo potem jak będziesz miał połowę takich, połowę takich to się wszystko może porozlatywać

mam problem z poprawnym wstawieniem tego obramowania na moją strone -> http://qoooq.pl/graphics/ramka_03.png

kod strony wygląda następująco:

[HTML] pobierz, plaintext 
	<div class="logo"></div>
 
		<div class="main">
			<div class="top">
					<div class="top_l"></div>
					<div class="top_r"></div>
			</div>
 
			<div class="panel">
					<div class="panel_l"></div>
					<div class="panel_c"></div>
					<div class="panel_r"></div>		
			</div>
			<div class="content">
							<div class="up">Górna Ramka
								<div class="left_frame"></div>
								<div class="kernel">Treść strony</div>
								<div class="right_frame"></div>
							</div>	
					<div class="rock"></div>
					<div class="menu">Menu</div>			
			</div>
 
		</div>
[HTML] pobierz, plaintext 

[CSS] pobierz, plaintext 
html,body 
{ 
	width: 100%;
	height:100%;
	margin: 0px auto;
	padding: 0px;
	font-size: 11px;
	font-family: Tahoma;
	color: #CDCBAD;
	text-align: center;
	background-position: center;
	background:url(graphics/tlo3.jpg) top no-repeat;
	background-color: #000000;
	border: 0px solid red;
	overflow:auto;
}
 
div.main
{
	border: 0px solid red;
	margin: 0px auto;
	width: 1004px;
	position: relative;
	overflow:hidden;
//	background-color: #000000;
}
 
div.logo 
{ 
	margin: 0px auto;
	height: 128px;
	width: 390px;
	background-image: url(graphics/img_02.png);
	background-repeat: no-repeat;
} 
 
div.top 
{ 
	margin: 0px auto;
	width: 960px;
	height: 72px;
	background-repeat: no-repeat;
}
 
div.top_l
{
	float: left;
	width: 46px;
	height: 72px;
	position: absolute;
	background-image: url(graphics/img_05.png);
	background-repeat: no-repeat;
}
 
div.top_r
{
	float: left; 
	width: 994px;
	height: 72px;
	background-image: url(graphics/img_06.png);
	background-repeat: no-repeat;
}
 
div.panel 
{ 
	margin: 0px auto;
	width: 960px;
//	height: 228px;
	height: 248px;
	background-position: center;
}
 
div.panel_l
{
	float: left; 
	width: 374px;
	height: 228px;
	background-image: url(graphics/img_08.png);
	background-repeat: no-repeat;
}
 
div.panel_c
{
	float: left;
	background-image: url(graphics/img_10.png);
	background-repeat: repeat-x; 
	height: 228px; 
	width: 212px; 
	background-color: white;
}
 
div.panel_r
{
	float: left; 
	width: 374px;
	height: 228px;
	background-image: url(graphics/img_12.png);
	background-repeat: no-repeat;
}
 
div.tresc 
{ 
	float: left;
	margin: 0px auto;
	width: 960px;
	height: 800px;
	background-position: center;
}
 
div.content
{
	margin: 0px auto;
	width: 960px;
	height: 1900px;
//	background-position: center;
}
 
div.left_frame
{
	float: left; 
	width: 6px;
	height: 324px;
	background-image: url(graphics/ramka_01.png);
	background-repeat: repeat-y;
}
 
div.kernel
{
//	background:url(graphics/ramka_03.png) top no-repeat;
	float: left; 
	width: 718px;
	height: 348px;
	background-image: url(graphics/img_21.png);
	background-repeat: repeat-y;
	text-align: justify;
//	padding-top: 5px;
//	padding-left: 5px;
//	padding-right: 5px;
//	padding-bottom: 5px;
//	color: 	#663300;
	color: 	#000000;
	font-weight: bold;
	font-size: 15px;
//	font-family: Andele Mono;
//	font-family: fantasy;
//	font-family: Verdana;
//	font-family: Tahoma;
	font-family: Monotype Corsiva;
}
 
div.right_frame
{
	float: left; 
	width: 6px;
	height: 324px;
	background-image: url(graphics/ramka_05.png);
	background-repeat: repeat-y;
}
 
div.rock
{
	float: left; 
	width: 31px;
	height: 368px;
	background-image: url(graphics/img_23.png);
	background-repeat: repeat-y;
	background-color: #000000;
}
 
div.menu
{
	float: left; 
	width: 199px;
	height: 199px;
	background-color: #000000;
}
 
div.up
{
	float: left; 
	width: 730px;
	height: 10px;
	background-color: #000000;
	background-image: url(graphics/ramka_03.png);
}
[CSS] pobierz, plaintext