Jump to content
  • 0

Проблемка с отступами в ie6

RobotWerder

Asked by RobotWerder,

 Share

Question

RobotWerder Explorer

RobotWerder

Posted
Posted (edited)

Дело касается текста .. помещаю его в контейнер и он несколько выезжает за его пределы .. Конечно делаю отступы, ноо....

В общем то изначально левый блок <div id="left"> имеет 173 пикселя в ширину, но отчего то он кажется шире, хотя картинки в нем именно 173 пикселя в ширину. почему так это первый вопрос?!

И Естественно исходя из того что "left" шире и отступы для него делаю отдельно, но как ни делаю раскладка рушится потому что правый блок в ие6 постоянно уезжает вниз или некрасиво вылезает бэкграунд картинка большого контейнера.. подскажите Как решить эту проблемку ?!

Ссылочки на макет нет так как пока все делаю локально .. В Css не спец.

Спасибо за ответики

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=<?php echo _ISO; ?>" />

<link rel="stylesheet" href="css2.css">

</head>

<body>

<div align="center" id="body">

<div id="main">

<div id="logo"></div>

<div id="top">top top top top top top top top top </div>

<div id="top1">top top top top top top top top top </div>

<div id="container">

<div id="contmenu">

<div id="contmenuleft"></div>

<div id="contmenuright"></div>

</div>

<div id="conttop"> </div>

<div id="contcenter">

<div id="left">

<div class="module">

<div>

<div>

<div>

<div id="leftinner">

<h1>dfgdfg</h1>

<p>dfgdffffffffffffffffffffff

dfgdfgdfgdfgdfgdffffffffffffffffffff

gdfgfdfgdfgfgdffdgretreyytrytry

fffffffffffffffffffffffffffffffffffffffffffffffff

rrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr

ttttttttttttttttttttttttfdggggggggg

rrrrrrrrrrrrrrrrrrrrrrrrrrrrh

hhhhhhhhhhhhhhhhhhhhhhh

ttttttttttttttttttttttttt</div>

</div>

</div>

</div>

</div></div>

<div id="center"><div id="main_body">

<div class="module1">

<div>

<div>

<div>

<h1>dfgdfgfgdfg</h1>

<p>dfgdffffffffffffffffffffff

dfgdfgdfgdfgdfgdffffffffffffffffffff

gdfgfdfgdfgfgdffdgretreyytrytry

fffffffffffffffffffffffffffffffffffffffffffffffff

rrrr22222222222222222

<p>222222222222222222222

22222222222222222

rr22222222222222222

<p>222222222222222222222

22222222222222222

<p>rr22222222222222222

222222222222222222222

22222222222222222

rr22222222222222222

222222222222222222222

22222222222222222

ttttttttttttttttttttttttt

</div>

</div>

</div>

</div>

</div></div>

<div id="right">

<div class="module2">

<div>

<div>

<div>

<div id="rightinner">

<h1>dfgdfg</h1>

<p>dfgdffffffffffffffffffffff

<br >dfgdfgdfgdfgdfgdffffffffffffffffffff

<br >d333333333333333333333333

<br >d33333333333333333333333333

<br >d33333333333333333333333333

<br >d 3333333333333333333333333333

<br >d 3333333333333333333333333333

<br >d 3333333333333333333333333333

</div>

</div>

</div>

</div>

</div></div>

</div>

<div id="contbottom"></div>

</div>

<div id="footer1">footer"footer"footer"footer"footer"footer"footer"footer"footer"footer"footer"footer"</div>

<div id="footer">footer"footer"footer"footer"footer"footer"footer"footer"footer"footer"footer"footer"</div>

</div>

</div>

</body>

</html>

/* CSS Document */

html {

height: 100%;

}

body {

height: 100%;

margin: 0px 0px 0px 0px;

background-color:#FFFFFF;

font-family: "Century Gothic";

font-size: 10px;

color: #000000;

}

.clr {

clear: both;

}

#logo

{

background-image: url(images/2.jpg);

background-repeat: no-repeat;

height: 81px;

width: 925px;

}

#main {

width:925px;

}

#main_body {

float: left;

width:450px;

text-align:left;

background-color: #F9F7F7;

}

#main_body2 {

float: left;

width:700px;

text-align:left;

padding: 8px 8px 8px 8px;

}

#center {

float: left;

width:450px;

height:100%;

}

#center2 {

float: left;

width:700px;

height:100%;

}

#left {

float: left;

width:173px;

height:100%;

text-align:left;

background-color: #F9F7F7;

margin-left: 30px;

margin-top: 10px;

}

* html #left{

margin-left:10px;

}

#right {

float: right;

width:202px;

height:100%;

text-align:left;

color:#FFFFFF;

margin-right: 30px;

}

#rightinner {

margin-right: 0px;

margin-left: 0px;

padding-top: 80px;

padding-right: 0px;

padding-bottom: 0px;

padding-left: 0px;

height: 100%;

background-image: none;

color: #666666;

}

#leftinner{

margin-left: 0px;

padding-right: 15px;

padding-bottom: 0px;

padding-left: 5px;

height: 100%;

background-image: none;

color: #666666;

width: 130px;

}

* html #right{

margin-right:15px;

}

#container {

width:905px;

height: 100%;

}

#contmenu {

float: left;

width:925px;

color:#FFFFFF;

height: 58px;

}

#contmenuleft

{

float: left;

height: 58px;

background-image: url(images/1_08.jpg);

background-repeat: no-repeat;

width: 300px;

margin-left: 15%;

padding:0;

}

* html #contmenuleft{

margin-left: 10%;

}

#contmenuright

{

float: right;

height: 58px;

background-image: url(images/1_06.jpg);

background-repeat: no-repeat;

width: 216px;

margin-right: 20%;

padding:0;

}

* html #contmenuright{

margin-right:10%;

}

#conttop

{

width:905px;

background-image: url(images/1k_03.jpg);

background-repeat: no-repeat;

background-position: center top;

height: 48px;

float: left;

}

#contcenter

{

width:905px;

background-image: url(images/1_05.jpg);

background-repeat: repeat-y;

height:100%;

background-position: center top;

z-index: -2;

float: left;

margin: 0px;

padding: 0px;

}

#contbottom

{

width:905px;

background-image: url(images/1k_26.jpg);

background-repeat: no-repeat;

background-position: center bottom;

height: 49px;

float: left;

}

#contleft {

width:905px;

height:100%;

}

#footer {

float: left;

width:925px;

color:#FFFFFF;

text-align:center;

background-image: url(images/2_08.jpg);

background-repeat: no-repeat;

height: 125px;

}

#footer1{

float: left;

width:925px;

background-color:#FFFFFF;

color:#FFFFFF;

text-align:center;

background-image: url(images/12_27.jpg);

background-repeat: no-repeat;

height: 99px;

}

#footer a {

color:#FFFFFF;

font-weight:bold;

}

#top {

float: left;

width:925px;

background-image:url(images/1.jpg);

line-height:36px;

text-align:left;

height:211px;

background-repeat: no-repeat;

}

#top1 {

float: left;

width:925px;

background-image:url(images/12.jpg);

line-height:36px;

text-align:left;

height:121px;

background-repeat: no-repeat;

}

.modulecont {

padding: 0;

margin: 0 0 0 0;

width: 925px;

z-index: -1;

}

.modulecont div {

padding: 0;

margin: 0;

background-image: url(images/1_05.jpg);

background-repeat: repeat-y;

background-position: center top;

z-index: -1;

}

.modulecont div div {

padding:0;

background-color: transparent;

background-image: url(images/1_032.jpg);

background-repeat: no-repeat;

background-position: center top;

z-index: -1;

}

.modulecont div div div {

text-align: center;

padding: 0px 0 0px;

background-color: transparent;

background-image: url(images/1korp_27.jpg);

background-repeat: no-repeat;

background-position: center bottom;

z-index: -1;

}

.module {

padding: 0;

margin: 0 0 0 0;

width: 173px;

z-index: 1;

}

.module div {

padding: 0;

margin: 0; /*bottom 14px*/

background-image: url(images/1korp_07.jpg);

background-repeat: repeat-y;

background-position: center top;

z-index: 1;

width: 173px;

}

.module div div {

padding:0;

background-color: transparent;

background-image: url(images/1korp_03.jpg);

background-repeat: no-repeat;

background-position: center top;

z-index: 1;

width: 173px;

}

.module div div div {

text-align: center;

padding: 0px 0 20px;

background-color: transparent;

background-image: url(images/1korp_17.jpg);

background-repeat: no-repeat;

background-position: center bottom;

z-index: 1;

width: 173px;

}

.module1 {

padding: 0;

margin-top: 10px;

width: 443px;

margin-right: 15px;

margin-bottom: 10px;

margin-left: 15px;

z-index:2;

}

* html .module1{

margin-left: 1px;;

}

.module1 div {

background-image: url(images/1korp_08.jpg);

background-repeat: repeat-y;

width: 443px;

padding-top: 0;

padding-right: 0px;

padding-bottom: 0;

padding-left: 0px;

margin-top: 0;

margin-right: 0px;

margin-bottom: 0;

margin-left: 0px;

z-index:2;

}

.module1 div div {

padding:0;

background-color: transparent;

background-image: url(images/1korp_05.jpg);

background-repeat: no-repeat;

background-position: center top;

width: 443px;

z-index:2;

}

.module1 div div div {

text-align: center;

padding: 0px 0 20px;

background-color: transparent;

background-image: url(images/1korp_21.jpg);

background-repeat: no-repeat;

background-position: center bottom;

width: 443px;

z-index:2;

}

.module2 {

padding: 0;

width: 202px;

margin-top: 10px;

margin-bottom: 0px;

margin-left: 0px;

z-index:3;

}

.module2 div {

padding: 0;

margin: 0; /*bottom 14px*/

background-image: url(images/1korp_15.jpg);

background-repeat: repeat-y;

background-position: center top;

width: 202px;

z-index:3;

}

.module2 div div {

padding:0;

background-color: transparent;

background-image: url(images/1_11.jpg);

background-repeat: no-repeat;

background-position: center top;

width: 202px;

z-index:3;

}

.module2 div div div {

text-align: center;

padding: 0px 0 20px;

background-color: transparent;

background-image: url(images/1korp_19.jpg);

background-repeat: no-repeat;

background-position: center bottom;

width: 202px;

z-index:3;

}

/** old stuff **/

body {

padding: 0px;

font-family: "Century Gothic";

line-height: 120%;

font-size: 11px;

color:#CCCCCC;

}

/* basic links on the site */

a:link, a:visited {

color: #e2292c; text-decoration: none;

font-weight: normal;

}

a:hover {

color: #e2292c; text-decoration: underline;

font-weight: normal;

}

a.footer:link, a.footer:visited {

color: #626262; text-decoration: none;

font-weight: normal;

}

a.footer:hover {

color: #626262; text-decoration: underline;

}

.inputbox {

padding: 2px;

border:solid 1px #cccccc;

background-color: #ffffff;

}

p {

margin-top: 20px;

margin-bottom: 5px;

text-align: justify;

margin-right: 0px;

margin-left: 0px;

padding-right: 15px;

padding-left: 15px;

}

/* basic links on the site */

* html p{

padding-left: 8px;

}

#left p{

margin-bottom: 5px;

text-align: justify;

margin-right: 0px;

margin-left: 0px;

padding-right: 15px;

padding-left: 0px;

}

h1{

font-family: "Century Gothic";

color: #FF9900;

text-align: center;

font-weight: bold;

font-size: 18px;

padding-top: 10px;

}

h2{

color: #e2292c;

font-family: Arial;

font-size: 17px;

font-weight: normal;

}

h3{

color: #e2292c;

font-family: Arial;

font-size: 15px;

font-weight: normal;

}

Edited by RobotWerder
Link to comment
Share on other sites

2 answers to this question

Recommended Posts

  • 0
Vlad Explorer

Vlad

Posted
Posted

Используйте для оформления кода теги [ codebox ] и [ /codebox ] без пробелов внутри только.

Что-то много букав, ниасилил. Желательно бы локализовать проблему, выкинув из кода все лишнее.

Кстати, замечу, что ширина блока складывается из width + padding, а не только width.

Link to comment
Share on other sites
  • 0
RobotWerder Explorer

RobotWerder

Posted
  • Author
Posted

Вот часть хтмль... проблема в двух словах в том что текст некрасиво вылезает за рамки jpeg и я немогу отступы нормально сделать для текста лежащего внутри блоков текста ... правый блок в ие уходит вниз либо рушится центральный блок в котором лежат эти три..

подхода не найду из за отсутствия опыта, то ли сделать внутри ещё div, хотя padding и изнутри распирает блоки?!

То ли ещё каким нить неизвестным мне способом.?!

<div id="conttop"> </div>
		<div id="contcenter">


<div id="left">  
		<div class="module">
			<div>
				<div>
					<div>

					<h1>wertret</h1>
					 dfgdffffffffffffffffffffff
					dfgdfgdfgdfgdfgdffffffffffffffffffff
					gdfgfdfgdfgfgdffdgretreyytrytry
					fffffffffffffffffffffffffffffffffffffffffffffffff
					rrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr
					ttttttttttttttttttttttttfdggggggggg
					rrrrrrrrrrrrrrrrrrrrrrrrrrrrh
					hhhhhhhhhhhhhhhhhhhhhhh
					ttttttttttttttttttttttttt
					</div>
			</div>
		</div>
</div></div>

		<div id="center"><div id="main_body">		   
		<div class="module1">
			<div>
				<div>
					<div>
					<h1>dfgdfgfgdfg</h1>
					dfgdffffffffffffffffffffff
					dfgdfgdfgdfgdfgdffffffffffffffffffff
					gdfgfdfgdfgfgdffdgretreyytrytry
					fffffffffffffffffffffffffffffffffffffffffffffffff
					rrrr22222222222222222
					222222222222222222222
					22222222222222222
					rr22222222222222222
					222222222222222222222
					22222222222222222
					rr22222222222222222
					222222222222222222222
					22222222222222222
					rr22222222222222222
					222222222222222222222
					22222222222222222
					ttttttttttttttttttttttttt
					</div>
			</div>
		</div>

		  </div>
			</div></div>





		<div id="right">			 
	    <div class="module2">
			<div>
				<div>
					<div>
					<div id="rightinner">
					<h1>dfgdfg</h1>
					dfgdffffffffffffffffffffff
					<br >dfgdfgdfgdfgdfgdffffffffffffffffffff
					<br >d333333333333333333333333
					<br >d33333333333333333333333333
					<br >d33333333333333333333333333
				<br >d	3333333333333333333333333333
				<br >d	3333333333333333333333333333
				<br >d	3333333333333333333333333333

				</div>

					</div>
			</div>
		</div>
		  </div></div>
</div>

и css фрагмент кода ..

#left {
	float: left;
	width:173px;
	height:100%;
	background-color: #F9F7F7;
	margin-left: 30px;
	margin-top: 10px;
	padding-right: 0px;
	padding-left: 0px;
}

* html #left{
	margin-left:15px;
}

#right {
	float: right;
	width:202px;
	height:100%;
	text-align:left;
	color:#FFFFFF;
	margin-right: 30px;
}

подскажите где собака порылась пожалуйста
* html #right{
  margin-right:15px;
}

 #rightinner {
	margin-right: 0px;
	margin-left: 0px;
	padding-top: 80px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	height: 100%;
	background-image: none;
	color: #666666;
}
.modulecont {
	padding: 0;
	margin: 0 0 0 0;
	width: 925px;
	z-index: -1;
}

 .modulecont div {
	padding: 0;
	margin: 0; 
	background-image: url(images/1_05.jpg);
	background-repeat: repeat-y;
	background-position: center top;
	z-index: -1;
}

.modulecont div div {
	padding:0;
	background-color: transparent;
	background-image: url(images/1_032.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	z-index: -1;
}

.modulecont div div div {
	text-align: center;
	padding: 0px 0 0px;
	background-color: transparent;
	background-image: url(images/1korp_27.jpg);
	background-repeat: no-repeat;
	background-position: center bottom;
	z-index: -1;
}



.module {
	margin: 0;
	width: 173px;
	z-index: 1;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}

.module div {
	padding: 0;
	margin: 0; /*bottom 14px*/
	background-image: url(images/1korp_07.jpg);
	background-repeat: repeat-y;
	background-position: center top;
	z-index: 1;
	width: 173px;
}

.module div div {
	padding:0;
	background-color: transparent;
	background-image: url(images/1korp_03.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	z-index: 1;
	width: 173px;
}

.module div div div {
	text-align: center;
	background-color: transparent;
	background-image: url(images/1korp_17.jpg);
	background-repeat: no-repeat;
	background-position: center bottom;
	z-index: 1;
	width: 173px;
	padding-top: 0px;
	padding-bottom: 20px;
}


.module1 {
	padding: 0;
	margin-top: 10px;
	width: 443px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 15px;
	z-index:2;
}

* html .module1{
	margin-left: 15px;;
}

.module1 div {
	background-image: url(images/1korp_08.jpg);
	background-repeat: repeat-y;
	width: 443px;
	padding-top: 0;
	padding-right: 0px;
	padding-bottom: 0;
	padding-left: 0px;
	margin-top: 0;
	margin-right: 0px;
	margin-bottom: 0;
	margin-left: 0px;
	z-index:2;
}

.module1 div div {
	padding:0;
	background-color: transparent;
	background-image: url(images/1korp_05.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	width: 443px;
	z-index:2;
}

.module1 div div div {
	text-align: center;
	padding: 0px 0 20px;
	background-color: transparent;
	background-image: url(images/1korp_21.jpg);
	background-repeat: no-repeat;
	background-position: center bottom;
	width: 443px;
	z-index:2;
}

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept