Разместване

[winbooz69]

Получава ми се едно гадно разместване в сайта на отделните елементи използвам главно дивове и някой от елементите се разместват под ИЕ и ФФ как може да го избегна това?

 

[emagi]

Това става още като започнеш да пишеш сайта!Пишеш известна част от кода, превключваш всички броузъри и гледаш!Иначе ако ползваш само един броузър , и накрая като тестваш, остава само едно голямо :shock: :shock: :shock:

 

[winbooz69]

но аз не мога да си открия грешката защо става така
ето примерен една логин форма

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Beta 2</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<link href="style.css" rel="stylesheet" type="text/css" />

<div class="box">
<input type="text" class="loginuser" >
<input type="password" class="loginpass">
</div>

и това ми е css

body {
margin: 0;
padding: 0px;
background-color: #fff;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11.5px;     
}


.loginuser
{
width: 185px;
padding: 3px 3px 3px 3px;
margin:  50px 12px 12px 12px;
height:21px;
background: url(images/user.png);
color:#000;
border-width:0px;  
font-size:13px; 
border-style:solid;
text-indent:18px;
line-height: 15px;
}

.loginuser:hover 
{
background: url(images/hoveruser.png);
}

.loginpass
{
width:185px;
padding: 3px 3px 3px 3px;
margin:  12px 12px 12px 12px;
height:21px;
background: url(images/pass.png);
color:#000;
border-width:0px;  
font-size:15px; 
text-indent:18px;
}

.loginpass:hover 
{
background: url(images/hoverpass.png);
}

.box {
	color: #672f8d;
	background: url(/images/bbox.png) left top no-repeat;
	width: 216px;
	height: 209px;
	float: left;
	margin: 15px;
}

 

[emagi]

Нищо чудно, че става това, което искаш.Виж само кода:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Beta 2</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<link href="style.css" rel="stylesheet" type="text/css" />

<div class="box">
<input type="text" class="loginuser" >
<input type="password" class="loginpass">
</div>

Прави ли ти впечатление, че ти липсват тагове, като :

</head>
<body>
<form>
</form>
</body>
</html>

Сложи ги, и дай да видим ако нещо пак не става

 

[winbooz69]

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Beta 2</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="box">
<form action="?page=login&ext=login" method="post">
<input type="text" name="username" class="loginuser">
<input type="password" name="password" class="loginpass">
<input type="submit" name="submit" value="LOGIN" class="loginpass">
</form>
</div>
</body>
</html>

така го направих обаче горното поле за потребителкото име стой в дясно под ИЕ иначе другото е наред

 

[shterev]

.loginuser:hover това също не работи , ако не си забелязал. пробвай с едно <br/> след инпутите да видим какво ще стане.

 

[winbooz69]

.loginuser:hover това също не работи , ако не си забелязал. пробвай с едно <br/> след инпутите да видим какво ще стане.

работи си hover-a :shock:

 

[shterev]

под ие ли?

 

[winbooz69]

да сега видях и че под ИЕ не работи идеи?

 

[winbooz69]

Еми сложи и двата класа еднакви маргини.Ти имаш:

.loginuser
{
width: 185px;
padding: 3px 3px 3px 3px;
margin: 50px 12px 12px 12px;
height:21px;
background: url(images/user.png);
color:#000;
border-width:0px;
font-size:13px;
border-style:solid;
text-indent:18px;
line-height: 15px;
}

а на другия клас имаш:

.loginpass
{
width:185px;
padding: 3px 3px 3px 3px;
margin: 12px 12px 12px 12px;
height:21px;
background: url(images/pass.png);
color:#000;
border-width:0px;
font-size:15px;
text-indent:18px;
}

Направи и двете с еднакви стойности:

margin: 12px 12px 12px 12px;

това е за bottom на margin на мен ми е в дясно избягало

 

[shterev]

Emagi бъркаш:

margin: 50px(top) 11px(right) 11px(bottom) 11px(left);
margin: top right bottom left; - така са стойностите

А пич тук проблема може да не се реш само ако намалиш маргина - в някои случаи ие си има собствено мнение за маргин.Съвет: задай на полетата margin:0px; или само margin-bottom:10px; сложи на самата форма padding-left: 20px; така всчки полета ще се изместят, а и падинга се спазва повече, и няма да има проблем.