CSS Позициониране

PKTeam · 18 Април 2009

Здравейте, трябва ми малко помощ за позициониране във css. Нов съм в областа и затова се надявам да ми помогнете. В момента текста който въвеждам във INPUT полетата ми излиза горе в ляво а искам 5 пиксела в дясно и по така в средата на полето. Позиционирането ми трябва само за USERNAME & PASSWORD.
CSS

Код:

#login_header{
margin:0;
	padding:0;
	width:200px;
	height:50px;
	background:url(images/login-body_01.png) no-repeat;
}

#login_left{
	margin:0;
	padding:0;
	width:13px;
	height:150px;
	background:url(images/login-body_02.gif) no-repeat;
}	

#login_username{
		border:0px;
	margin:0;
	padding:0;
	width:177px;
	height:38px;
	background:url(images/login-body_03.gif) no-repeat;
}

#login_right{
	margin:0;
	padding:0;
	width:10px;
	height:107px;
	background:url(images/login-body_04.gif) no-repeat;
}

#login_uNp{
	margin:0;
	padding:0;
	width:177px;
	height:17px;
	background:url(images/login-body_05.gif) no-repeat;
}

#login_password{
	border:0px;
	color:#E16625;
	width:177px;
	height:36px;
	background:url(images/login-body_06.gif) no-repeat;
}


#login_uNpSmall{
	margin:0;
	padding:0;
	width:177px;
	height:8px;
	background:url(images/login-body_07.gif) no-repeat;
}

#login_login{
	border:0px;
	margin:0;
	padding:0;
	width:67px;
	height:41px;
	background:url(images/login-body_08.gif) no-repeat;
}

#login_lgnr{
	margin:0;
	padding:0;
	width:110px;
	height:8px;
	background:url(images/login-body_09.gif) no-repeat;
}

#login_register{
	margin:0;
	padding:0;
	width:120px;
	height:43px;
	background:url(images/login-body_10.gif) no-repeat;
}

#login_empty{
	margin:0;
	padding:0;
	width:67px;
	height:10px;
	background:url(images/login-body_11.gif) no-repeat;
}

div#login_bg{
	margin:0;
	padding:0;
	width:250px;
	height:210px;
	background:url(images/login_divbg.png) no-repeat;
}

HTML

Код:

<div id="login_bg">
<table id="Table_01" width="201" height="200" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="4">
			<div id="login_header"> </div></td>
		<td>

			<img src="images/spacer.gif" width="1" height="50" alt=""></td>
	</tr>
	<tr>
		<td rowspan="7">
			<div id="login_left"> </div></td>
		<td colspan="2">
			<input type="text" id="login_username" size="20"> </div></td>
		<td rowspan="5">
			<div id="login_right"> </div></td>

		<td>
			<img src="images/spacer.gif" width="1" height="38" alt=""></td>
	</tr>
	<tr>
		<td colspan="2">
			<div id="login_uNp"> </div></td>
		<td>
			<img src="images/spacer.gif" width="1" height="17" alt=""></td>
	</tr>

	<tr>
		<td colspan="2">
			<input type="password" id="login_password" size="20"></td>
		<td>
			<img src="images/spacer.gif" width="1" height="36" alt=""></td>
	</tr>
	<tr>
		<td colspan="2">
			<div id="login_uNpSmall"> </div></td>

		<td>
			<img src="images/spacer.gif" width="1" height="8" alt=""></td>
	</tr>
	<tr>
		<td rowspan="2">
			<div id="login_login"> </div></td>
		<td>
			<div id="login_lgnr"> </div></td>
		<td>

			<img src="images/spacer.gif" width="1" height="8" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" rowspan="2">
			<div id="login_register"> </div></td>
		<td>
			<img src="images/spacer.gif" width="1" height="33" alt=""></td>
	</tr>
	<tr>

		<td>
			<div id="login_empty"> </div></td>
		<td>
			<img src="images/spacer.gif" width="1" height="10" alt=""></td>
	</tr>
</table>
</div>

emagi · 18 Април 2009

style.css

#login_header{
margin:0;
padding:0;
width:200px;
height:50px;
background:url(images/login-body_01.png) no-repeat;
}

#login_left{
margin:0;
padding:0;
width:13px;
height:150px;
background:url(images/login-body_02.gif) no-repeat;
}

#login_username{
border:0px;
margin:0;
padding:0;
width:177px;
height:38px;
background:url(images/login-body_03.gif) no-repeat;
margin-left:5px;
}

#login_right{
margin:0;
padding:0;
width:10px;
height:107px;
background:url(images/login-body_04.gif) no-repeat;
}

#login_uNp{
margin:0;
padding:0;
width:177px;
height:17px;
background:url(images/login-body_05.gif) no-repeat;
}

#login_password{
border:0px;
color:#E16625;
width:177px;
height:36px;
background:url(images/login-body_06.gif) no-repeat;
margin-left:5px;
}

#login_uNpSmall{
margin:0;
padding:0;
width:177px;
height:8px;
background:url(images/login-body_07.gif) no-repeat;
}

#login_login{
border:0px;
margin:0;
padding:0;
width:67px;
height:41px;
background:url(images/login-body_08.gif) no-repeat;
}

#login_lgnr{
margin:0;
padding:0;
width:110px;
height:8px;
background:url(images/login-body_09.gif) no-repeat;
}

#login_register{
margin:0;
padding:0;
width:120px;
height:43px;
background:url(images/login-body_10.gif) no-repeat;
}

#login_empty{
margin:0;
padding:0;
width:67px;
height:10px;
background:url(images/login-body_11.gif) no-repeat;
}

div#login_bg{
margin:0;
padding:0;
width:250px;
height:210px;
background:url(images/login_divbg.png) no-repeat;
border:solid 1px red;
}

PKTeam · 18 Април 2009

Мести ми цялата картинка в ляво и текста пак е нейно ляво. Май имам грешка и във HTML кода.

emagi · 18 Април 2009

Добре, пробвай със твоя CSS файл, и с този код:

<div id="login_bg">
<table id="Table_01" width="201" height="200" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="4">
<div id="login_header"> </div></td>
<td>

<img src="images/spacer.gif" width="1" height="50" alt=""></td>
</tr>
<tr>
<td rowspan="7">
<div id="login_left"> </div></td>
<td colspan="2">
<input type="text" id="login_username" size="20" style="margin-left:5px"> </div></td>
<td rowspan="5">
<div id="login_right"> </div></td>

<td>
<img src="images/spacer.gif" width="1" height="38" alt=""></td>
</tr>
<tr>
<td colspan="2">
<div id="login_uNp"> </div></td>
<td>
<img src="images/spacer.gif" width="1" height="17" alt=""></td>
</tr>

<tr>
<td colspan="2">
<input type="password" id="login_password" size="20" style="margin-left:5px"></td>
<td>
<img src="images/spacer.gif" width="1" height="36" alt=""></td>
</tr>
<tr>
<td colspan="2">
<div id="login_uNpSmall"> </div></td>

<td>
<img src="images/spacer.gif" width="1" height="8" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<div id="login_login"> </div></td>
<td>
<div id="login_lgnr"> </div></td>
<td>

<img src="images/spacer.gif" width="1" height="8" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="2">
<div id="login_register"> </div></td>
<td>
<img src="images/spacer.gif" width="1" height="33" alt=""></td>
</tr>
<tr>

<td>
<div id="login_empty"> </div></td>
<td>
<img src="images/spacer.gif" width="1" height="10" alt=""></td>
</tr>
</table>
</div>

PKTeam · 18 Април 2009

Мърда целия INPUT с което се разкъсват 2-та бутона отдолу, а трябва само текста да мърда без input-а :/

appmaster · 18 Април 2009

position параметъра добави. За да не ти ги размества другите...

PKTeam · 18 Април 2009

Я ако може го направи да тествам дали ще стане че неразбирам от css и html

shterev · 18 Април 2009

Не го прави с margin , а с padding , за да ти местисами текст в полетао.

PKTeam · 18 Април 2009

да но като сложа padding картинките ми се разместват (тия по надолу които са)

shterev · 19 Април 2009

когато слагаш падинг трябва да вадиш от съответната стойност
пример имаме 200х100 поле, задаваме му padding-top:10px; padding-left:10px; и съответно ширината и височината стават width:190px; height:80px; Вадиш толкова , колкото слага падинг от съответната стойност - ширина/височина. Важи за лявo и дясно (вадиш от width) , горе и долу ( вадиш от height)

PKTeam · 19 Април 2009

Я ми пратете ЛС със скайпа си да ви пиша че така май няма да стане.

PKTeam · 19 Април 2009

Ъп .

PHPnMySQL · 19 Април 2009

Position:absolute;
top/bottom:едиколко си пиксела ;
left/right:едиколко си пиксела;
Аз за училищен проект само по хтмл го направих позиционирането само със css/position:absolute relative СЪКС

CSS Позициониране

PKTeam

Registered

emagi

Registered

PKTeam

Registered

emagi

Registered

PKTeam

Registered

appmaster

Registered

PKTeam

Registered

shterev

Registered

PKTeam

Registered

shterev

Registered

PKTeam

Registered

PKTeam

Registered

PHPnMySQL

Registered