DIV-ове и таблици - разтегляне

vladislav · 1 Март 2007

Почнах да правя една страница и когато сложа DIV или таблицата в основаната таблица и напиша нещо вътре и съм и задал width: 100%;
и ми се разтегля постоянно всички размери са зададени обаче едната колона се разтегля за сметка на другат и така

Player_pz · 1 Март 2007

дай самия код ... така нещо немога да се ориентирам ..

vladislav · 1 Март 2007

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<style type="text/css">
body
{
margin-top: 0px;
}
table,tr,td
{
border-collapse: collapse;
border-style: solid;
border-width: 1px;
border-color: #000000;
}
table.basic
{
width: 900px;
height: 800px;
}
tr.header
{
width: 100%;
height: 140px;
}
tr.body
{
width: 100%;
}
tr.footer
{
width: 100%;
height: 120px;
}
td.sidel,td.sider
{
width: 190px:
}
td.center
{
width: 620px;
}
</style>
</head>
<body>
<center>
<table class="basic">
	<tr class="header">
		<td colspan="3"></td>
	</tr>
	<tr class="body">
		<td class="sidel"><diw style="width: 100%;">sfgsrfgfgsedrfgdfg</div></td>
		<td class="center"></td>
		<td class="sider"></td>
	</tr>
	<tr class="footer">
		<td colspan="3"></td>
	</tr>
</table>
</center>
</body>
</html>

Player_pz · 1 Март 2007

Ок .. значи искаш да колоните да си седят както са им размерите , без да се разтеглят когато пишеш текст ... правилно ли съм те разбрал ?

vladislav · 1 Март 2007

Да когато пиша текст или слагам вътре елементи - дивове таблици и т.н.

Player_pz · 1 Март 2007

Защо не погледнеш урока на мute за дивовете ..
разкарай ги тези таблици , ползвай див ... много по лесно и удобно -

vladislav · 1 Март 2007

ми аз първо започнах така решеих че не е много подходящо (таблиците ги смятах за по "стабилни" пък и съм свикнал с тях) обаче верно ще пробвам с div-ове тоя път :?:

vladislav · 1 Март 2007

Добре почнах с div-ове обаче защо немога да позиционирам footer отива ми отгоре и се барка с другите ?????

обаче само в mozilla

Код:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title></title>
<link rel="stylesheet" type="text/css" href="css.css">  
</head>
<body>

<div class="basic">
<div class="header">Главна част</div>
<div class="bar"></div>
<div class="left">Меня</div>
<div class="center">Съдържание</div>
<div class="right">Важно</div>
<div class="footer">хфхтгхфтгх</div>
</div>

</body>
</html>

Код:

body{
margin-top: 0px;
}
div.basic{
width: 900px;
margin-left: auto;
margin-right: auto;
}
div.header{
width: 900px;
height: 120px;
border-top: none;
border-left: solid;
border-right: solid;
border-bottom: solid;
border-collapse: collapse;
border-width: 1px;
border-color: #000000;
}
div.bar{
width: 900px;
height: 20px;
border-style: none;
border-collapse: collapse;
border-width: 1px;
border-color: #000000;
}
div.left{
width: 150px;
height: 1000px;
border-style: solid;
border-collapse: collapse;
border-width: 1px;
border-color: #000000;
float: left;
}
div.center{
width: 600px;
height: 1000px;
border-top: solid;
border-bottom: solid;
border-collapse: collapse;
border-width: 1px;
border-color: #000000;
float: left;
}
div.right{
width: 146px;
height: 1000px;
border-style: solid;
border-width: 1px;
border-color: #000000;
float: right;
}
div.footer{
width: 900px;
height: 120px;
border-top: none;
border-left: solid;
border-right: solid;
border-bottom: solid;
border-collapse: collapse;
border-width: 1px;
border-color: #000000;
}

Player_pz · 1 Март 2007

човек , много използваш border ... вижв кода как е използвано border ..:?:

Код:

            <!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>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title></title>
<style type="text/css"> 
body{
margin: 0px;
}
div.basic{
width: 900px;
margin-left: auto;
margin-right: auto;
}
div.header{
width: 900px;
height: 120px;
border:1px  solid black;
border-bottom:0px  solid black;
}
div.bar{
width: 900px;
height: 20px;
border:1px  solid black;
} 
div.left{
width: 150px;
height: 100px;
background-color:blue;
float: left;
}
div.center{
width: 600px;
height: 100px;
background-color:green;
float: left;
}
div.right{
width: 150px;
height: 100px;
background-color:red;
float: left;
} 
div.footer{
width: 900px;
height: 120px;
background-color:black;
} 
</style>
</head>
<body>

<div class="basic">
<div class="header">Главна част</div>
<div class="bar">Бар част</div>
<div class="left">ЛевУ</div>
<div class="center">У средо</div>
<div class="right">Вдену</div>
<div class="footer">Вдену</div>

</div>

</body>
</html>

vladislav · 2 Март 2007

Код:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title></title>
<style type="text/css">
div.basic{
	width: 778px;
	margin-left: auto;
	margin-right: auto;
	font-family: Verdana;
}
table,td,td{
	border-collapse: collapse;
	border-width: 0px;
	border-style: solid;
	border-color: black;
}
table.head{
	width: 778px;
	height: 150px;
	cellspacing: 0;
	cellpadding: 0;
}
table.body{
	width: 778px;
	cellspacing: 0;
	cellpadding: 0;
}
table.foot{
	width: 778px;
	height: 150px;
	cellspacing: 0;
	cellpadding: 0;
}
table.menu{
	width: 100%;
	height: 175px;
}
a.nav{
	width: 150px;
	height: 25px;
	font-family: Verdana;
	font-size: 13px;
	display: block;
	text-decoration: none;
	}
a.nav:hover{
	width: 150px;
	height: 25px;
	font-family: Verdana;
	font-size: 13px;
	display: block;
	text-decoration: none;
}
#menu{
	text-align: center;
	width: 150px;
	height: 25px;
	font-family: Verdana;
	font-size: 14px;

}
table.user{
	font-size: 14px;
	text-align: center;
	width: 150px;
}
</style>
</head>
<body>

<div class="basic">
<table class="head">
	<tr>
		<td height="130px"> </td>
	</tr>
	<tr>
		<td height="20px"></td>
	</tr>
</table>


<table class="body">
	<tr>
		<td width="150px">
		
		<table class="menu" >
			<tr>
				<td id="menu">Меню</td>
			</tr>

			<tr>
				<td width="150px"><a href="#" class="nav">Начало</a></td>
			</tr>
			<tr>
				<td width="150px"><a href="#" class="nav">Начало</a></td>
			</tr>
			<tr>
				<td width="150px"><a href="#" class="nav">Начало</a></td>
			</tr>
			<tr>
				<td width="150px" ><a href="#" class="nav">Начало</a></td>
			</tr>
			<tr>
				<td width="150px"><a href="#" class="nav">Начало</a></td>
			</tr>
			<tr>
				<td width="150px"><a href="#" class="nav">Начало</a></td>
			</tr>
			<tr>
				<td width="150px"><a href="#" class="nav">Начало</a></td>
			</tr>
		</table><br/><br/>
		<table class="user" >
		<tr><td>Моят акаунт</td></tr>
		</table>
		
		</td>
		<td width="478px"> </td>
		<td width="150px"> </td>
	</tr>
</table>


<table class="foot">
	<tr>
		<td height="20px"> </td>
	</tr>
	<tr>
		<td height="130px"></td>
	</tr>
</table>

</div>
</body>

</html>

Това е един 30км код при който уж всичко е наред обаче защо като сложа padding в менюто или напипа нещо по-дълго и ми се разпъва таблицата от допста време не бях писал html и css обаче такова нещо не помня да е ставало просто ад

DIV-ове и таблици - разтегляне

vladislav

Registered

Player_pz

Registered

vladislav

Registered

Player_pz

Registered

vladislav

Registered

Player_pz

Registered

vladislav

Registered

vladislav

Registered

Player_pz

Registered

vladislav

Registered