немога да преместя logo1

[pavlin_ai]

Сега се уча и още не са ми ясни много неща..
Ето ми кода : [css]#wrapper{
width: 970px;
margin: 0 auto;
}

.left-header{
margin: 10px 960px 0 0;

background: url("img/left-header-img.png") no-repeat;
height:129px;
width:16px;
position:relative;


}
.top-header{
margin: -129px 0 0 11px;

background: url("img/top-header-img.png") repeat-x;
height:129px;

}


.logo1{
margin: -30px 0 0 130px; border:2px solid red;
height:64px;
width:179px;
background: url("img/logo-onlain.png") no-repeat;

}
.logo2{
margin: -30px 0 0 340px;
height:74px;
width:263px;
background: url("img/logo-pod.png") no-repeat;

}

.header-podaryk{
margin: -100px 0 0 6px; border:2px solid red;
height:104px;
width:122px;
background: url("img/header-podaryk.png") no-repeat;
}

.header-kartichka{
margin: -99px 0 0 630px;
height:94px;
width:94px;
background: url("img/header-kartichka.png") no-repeat;
}

.kolichka{
margin: -79px 0 0 886px;
height:55px;
width:62px;
background: url("img/kolichka.png") no-repeat;
}

.right-header{
margin: -129px 0 0 960px;
background: url("img/right-header-img.png") no-repeat;
height:129px;
width:16px;
}
.............

[/css]

	<div id="wrapper">
	
		<div class="left-header">  </div>
		<div class="top-header"> 
			<div class="logo1"></div>
			<div class="logo2"></div>	
			<div class="header-podaryk"></div>
			<div class="header-kartichka"></div>
			<div class="kolichka"></div>
		</div>
		<div class="right-header">  </div>
		
	</div>

не мога да наглася logo1 да е по надолу. Когато му променям margin-top или не се отразява или мести всичко но не и това което трябва

 

[eddyy93]

Дай снимка какво искаш и ще ти направя кода.

 

[eddyy93]

Така - никога не ползвай такива огромни маргини, правят много проблем.
При всички браузери сайта ти ще излиза с различен дизайн. Освен ако не искаш да е такав ефекта ... Опитвай се да ползваш margin между -15px и 15px;

Разгледай float: left; из google за да разбереш как да си позиционираш дивовете едно до друго с float: left;

Винаги гледай сбора на "width" на дивовете накрая да бъде равен на "width" на дива в който са вкарани.

Пример при теб width на #header ти беше 960px а сбора на останалите дивове ти е 800px. За това header не ти се центираше точно.



А, и за малко да забравя най-отгоре над <html> тага слагай

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Разгледай го кода.
Ето ти кода:



[css]

* { padding: 0; margin: 0; }
#header{
width: 800px;
height: 130px;
margin: 0px auto;
background-color: #efefef;
}

.left-header{

height:129px;
width:16px;
background: url("img/left-header-img.png") no-repeat;
float: left;




}
.top-header{



height:129px;
width: auto;
background: url("img/top-header-img.png") repeat-x;
float: left;
}


.logo1{
border:2px solid red;
height:64px;
width:179px;
background: url("img/logo-onlain.png") no-repeat;
float: left;

}
.logo2{

height:74px;
width:263px;
background: url("img/logo-pod.png") no-repeat;
float: left;
}

.header-podaryk{
border:2px solid red;
height:104px;
width:122px;
background: url("img/header-podaryk.png") no-repeat;
float: left;
}

.header-kartichka{

height:94px;
width:94px;
background: url("img/header-kartichka.png") no-repeat;
float: left;
}

.kolichka{

height:55px;
width:62px;
background: url("img/kolichka.png") no-repeat;
float: left;
}

.right-header{


height:129px;
width:16px;
background: url("img/right-header-img.png") no-repeat;
float: left;
}
[/css][/code]

 

[pavlin_ai]

благодаря, много ценни съвети, първо ще пробвам сам да го преработя и после ще сравна с твоя код, благодаря..

 

[relax4o]

Също е важно да съобразиш на места, ако слагаш padding. Ако искаш някой контейнер да ти е 200px и си сложил 2px padding то задай на самия контейнер width: 196px ... 4 пиксела по-малко, защото падинга ще ти добави неговите 2 от двете страни. Освен, ако не слагаш падинг само от една страна.

Колкото то доктайпа, а и като цяло, предлагам ти да минеш на HTML 5.