-
Почему ниже указанная страница тянется не полностью по горизонтали то есть при разрешении 1024 на 768 все нормально а стоит поставить 1280 на 1024 то остается отступ спрва, а при разрешении 800 на 600, то правый блок вообще смещается вниз.Помогите пожалуйста, как сделать так чтоб 2 правых блока тянулись без каких либо зазоров справа при любом разрешении, а левый блок оставался фиксированным. Заранее спасибо
Код:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>800 600 - 1280 1024</title>
<style type="text/css">
<!--
body {margin-left: 0px;margin-top: 0px;****margin-right: 0px;margin-bottom: 0px;}
-->
</style></head>
<body>
<div style="background:#999999; float:left; width:300px; height:800px;"></div>
<div style="background:#000099; float:left; width:30%; height:800px;"></div>
<div style="background:#CC0066; float:left; width:40%; margin-left:1px; height:500px"></div>
</body>
</html>
-
Цитата:
Originally posted by fenixnt@Oct 14 2007, 15:53
Почему ниже указанная страница тянется не полностью по горизонтали то есть при разрешении 1024 на 768 все нормально а стоит поставить* 1280 на 1024 то остается отступ спрва, а при разрешении 800 на 600, то правый блок вообще смещается вниз.Помогите пожалуйста, как сделать так чтоб 2 правых блока тянулись без каких либо зазоров справа при любом разрешении, а левый блок оставался фиксированным. Заранее спасибо
Код:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>800 600 - 1280 1024</title>
<style type="text/css">
<!--
body {margin-left: 0px;margin-top: 0px;****margin-right: 0px;margin-bottom: 0px;}
-->
</style></head>
<body>
<div style="background:#999999; float:left; width:300px; height:800px;"></div>
<div style="background:#000099; float:left; width:30%; height:800px;"></div>
<div style="background:#CC0066; float:left; width:40%; margin-left:1px; height:500px"></div>
</body>
</html>
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]</div>
задавайте размеры либо только процентами либо только пикселями, мешать их не надо и будет все гуд
-
Цитата:
Originally posted by fenixnt@Oct 14 2007, 17:53
Почему ниже указанная страница тянется не полностью по горизонтали
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
[/quote]
Потому что 300px – это не 30%...
Цитата:
Originally posted by fenixnt@Oct 14 2007, 17:53
Помогите пожалуйста, как сделать так чтоб 2 правых блока тянулись без каких либо зазоров справа при любом разрешении, а левый блок оставался фиксированным
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
[/quote]
Заключите оба "резиновых" блока в один общий (отдельный) контейнер и расфлоатите внутри него эти "резиновые" блоки в разные стороны. Самому же контейнеру задайте левый маргин в 300px (для левого фиксированного по ширине блока)...
-
Цитата:
Originally posted by Aykroyd@Oct 14 2007, 18:20
Потому что 300px – это не 30%...
Заключите оба "резиновых" блока в один общий (отдельный) контейнер и расфлоатите внутри него эти "резиновые" блоки в разные стороны. Самому же контейнеру задайте левый маргин в 300px (для левого фиксированного по ширине блока)...
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
[/quote]
Код:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
</head>
<body>
<div style="width:300px;float:left; background:#CCCCCC;">Текст фиксированного столбца Текст фиксированного столбца Текст фиксированного столбца Текст фиксированного столбца</div>
<div style="margin-left:300px;">
<div style="float:left;background:#0000FF;">Текст первого тянущегося столбца Текст первого тянущегося столбца Текст первого тянущегося столбца Текст первого тянущегося столбца Текст первого тянущегося столбца Текст первого тянущегося столбца</div>
<div style="float:right; background:#99CC00;">Текст второго тянущегося столбца Текст второго тянущегося столбца Текст второго тянущегося столбца Текст второго тянущегося столбца Текст второго тянущегося столбца Текст второго тянущегося столбца Текст второго тянущегося столбца</div>
</div>
</body>
</html>
Текст второго тянущегося столбца не умещается и смещается вниз. Как сделать так чтобы Текст первого тянущегося столбца и текст второго тянущегося столбца всегда были одинаковыми по ширине и не смещались вниз? Заранее спасибо огромное.
-
Быстро схватываете) Грех не помочь)
Вот так:
Код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
* {margin: 0px; padding: 0px;}
#sidebar {background: #FFFFCC; width: 300px; float: left;}
#content {margin-left: 300px;}
#left {background: #CCFFFF; width: 50%; float: left;}
#right {background: #FFCCFF; width: 50%; float: right;}
* html #right {margin-right: -1px;}
</style>
</head>
<body>
<div id="sidebar">
****Текст фиксированного столбца Текст фиксированного столбца Текст фиксированного столбца Текст фиксированного столбца
</div>
<div id="content">
****<div id="left">
*Текст первого тянущегося столбца Текст первого тянущегося столбца Текст первого тянущегося столбца Текст первого тянущегося столбца Текст первого тянущегося столбца Текст первого тянущегося столбца
****</div>
****<div id="right">
*Текст второго тянущегося столбца Текст второго тянущегося столбца Текст второго тянущегося столбца Текст второго тянущегося столбца Текст второго тянущегося столбца Текст второго тянущегося столбца Текст второго тянущегося столбца
****</div>
</div>
</body>
</html>
Или даже вот так:
Код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
* {margin: 0px; padding: 0px;}
#sidebar {background: #FFFFCC; width: 300px; float: left;}
#content {width: 100%; margin-left: -300px; float: right; overflow: hidden;}
#main {margin-left: 300px;}
#left {background: #CCFFFF; width: 50%; float: left;}
#right {background: #FFCCFF; width: 50%; float: right;}
* html #right {margin-right: -1px;}
</style>
</head>
<body>
<div id="sidebar">
****Текст фиксированного столбца Текст фиксированного столбца Текст фиксированного столбца Текст фиксированного столбца
</div>
<div id="content">
****<div id="main">
*<div id="left">
*****Текст первого тянущегося столбца Текст первого тянущегося столбца Текст первого тянущегося столбца Текст первого тянущегося столбца Текст первого тянущегося столбца Текст первого тянущегося столбца
*</div>
*<div id="right">
*****Текст второго тянущегося столбца Текст второго тянущегося столбца Текст второго тянущегося столбца Текст второго тянущегося столбца Текст второго тянущегося столбца Текст второго тянущегося столбца Текст второго тянущегося столбца
*</div>
****</div>
</div>
</body>
</html>
Выбор варианта зависит от тех целей, которые Вы будете преследовать в дальнейшем...
-
Цитата:
Originally posted by Aykroyd@Oct 15 2007, 08:08
Быстро схватываете) Грех не помочь)
Вот так:
Код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
* {margin: 0px; padding: 0px;}
#sidebar {background: #FFFFCC; width: 300px; float: left;}
#content {margin-left: 300px;}
#left {background: #CCFFFF; width: 50%; float: left;}
#right {background: #FFCCFF; width: 50%; float: right;}
* html #right {margin-right: -1px;}
</style>
</head>
<body>
<div id="sidebar">
****Текст фиксированного столбца Текст фиксированного столбца Текст фиксированного столбца Текст фиксированного столбца
</div>
<div id="content">
****<div id="left">
*Текст первого тянущегося столбца Текст первого тянущегося столбца Текст первого тянущегося столбца Текст первого тянущегося столбца Текст первого тянущегося столбца Текст первого тянущегося столбца
****</div>
****<div id="right">
*Текст второго тянущегося столбца Текст второго тянущегося столбца Текст второго тянущегося столбца Текст второго тянущегося столбца Текст второго тянущегося столбца Текст второго тянущегося столбца Текст второго тянущегося столбца
****</div>
</div>
</body>
</html>
Или даже вот так:
Код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
* {margin: 0px; padding: 0px;}
#sidebar {background: #FFFFCC; width: 300px; float: left;}
#content {width: 100%; margin-left: -300px; float: right; overflow: hidden;}
#main {margin-left: 300px;}
#left {background: #CCFFFF; width: 50%; float: left;}
#right {background: #FFCCFF; width: 50%; float: right;}
* html #right {margin-right: -1px;}
</style>
</head>
<body>
<div id="sidebar">
****Текст фиксированного столбца Текст фиксированного столбца Текст фиксированного столбца Текст фиксированного столбца
</div>
<div id="content">
****<div id="main">
*<div id="left">
*****Текст первого тянущегося столбца Текст первого тянущегося столбца Текст первого тянущегося столбца Текст первого тянущегося столбца Текст первого тянущегося столбца Текст первого тянущегося столбца
*</div>
*<div id="right">
*****Текст второго тянущегося столбца Текст второго тянущегося столбца Текст второго тянущегося столбца Текст второго тянущегося столбца Текст второго тянущегося столбца Текст второго тянущегося столбца Текст второго тянущегося столбца
*</div>
****</div>
</div>
</body>
</html>
Выбор варианта зависит от тех целей, которые Вы будете преследовать в дальнейшем...
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]</div>
Спасибо Вам ОГРОМНОЕ!!!
