Jump to content
  • 0

в dive таблица

GArthurK

Asked by GArthurK,

 Share

Question

GArthurK Explorer

GArthurK

Posted
Posted

Добрый день. Помогите плиз. Есть страничка где 2 div слева потом посередине div и справа div. Вставляю текст в центральный div, а потом после текста сразу таблица идет. А она уезжает вниз. Что делать не знаю. Ваши варианты:

Link to comment
Share on other sites

11 answers to this question

Recommended Posts

  • 0
DStereo Explorer

DStereo

Posted
Posted

Добрый день. Помогите плиз. Есть страничка где 2 div слева потом посередине div и справа div. Вставляю текст в центральный div, а потом после текста сразу таблица идет. А она уезжает вниз. Что делать не знаю. Ваши варианты:

Покажите код. Возможно ваша таблица просто по ширине больше, чем может вместить центральный div, вот она и сползает вниз на высоту боковых дивов.

Link to comment
Share on other sites
  • 0
lexxcode Explorer

lexxcode

Posted
Posted

Добрый день. Помогите плиз. Есть страничка где 2 div слева потом посередине div и справа div. Вставляю текст в центральный div, а потом после текста сразу таблица идет. А она уезжает вниз. Что делать не знаю. Ваши варианты:

Дайте пример. Тут участники "Битвы Экстрасенсов", не встречались)

Link to comment
Share on other sites
  • 0
GArthurK Explorer

GArthurK

Posted
  • Author
Posted (edited)

Добрый день. Помогите плиз. Есть страничка где 2 div слева потом посередине div и справа div. Вставляю текст в центральный div, а потом после текста сразу таблица идет. А она уезжает вниз. Что делать не знаю. Ваши варианты:

Покажите код. Возможно ваша таблица просто по ширине больше, чем может вместить центральный div, вот она и сползает вниз на высоту боковых дивов.

У меня тут уже сайт по блокам разбит. Какую часть кода то написать?

CSS стиль:

 
@charset "utf-8";
body{
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	background-repeat: no-repeat;
	background-position: top;
	margin:0px;
	padding:0px;
}
a { 
text-decoration:none;
color:#505050;
}
a:visible {color:#000000;}
a:hover {color:#000000;}
#main {
	width : 1024px;
	height:100%;
	margin: auto; 
	margin-top:200px;
	padding : 100px;
}
#left{
	background-color: #f5f5f5;
	float : left;
	width : 240px;
	height : 600px;
	margin: 10px 20px 10px 0px;
}
#cont {
	background-color: #DDDDDD;
	margin: 40px 245px 10px 245px;
	text-align:justify;
	height : 100%;
}
table {
margin-top:0px;
}
#right {
	height : auto;
	background-color: #fff5ee;
	float : right;
	width : 240px;
	height : 600px;
	margin : 10px 0px 0px 20px; 
}
#footer {
	background-color: #808080;
	height : 25px;
	margin-top: 10px;
	font-size:10px;
	clear : both;
}
.b_menu {
	margin-top:-5px;
	font-weight:700;
	text-align:center;
	padding-top:6px;
	padding-bottom:6px;
	font-size:14px;
	display:block;
	background-color:#d5d5d5;
}
#statistic
{
	background-color:#DDDDDD;
	float : left;
	width : 240px;
	height : 240px;
	margin: 10px 50px 10px 0px; 
	clear : both;

}

по #statistic по ходу выравнивается таблица как быть?

а выравнивается по ходу по второму div слева. И еще такой вопрос в css что нужно добавить для кроссбраузерности?

Edited by GArthurK
Link to comment
Share on other sites
  • 0
GArthurK Explorer

GArthurK

Posted
  • Author
Posted

html код еще добавьте, чтобы было понятно, как у вас эти блоки расположены.


<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>главная страница сайта</title>
		<link rel="stylesheet" type="text/css" href="style.css">
		<link rel="shortcut icon" href="ico/video.png">
		<meta name="description" content="Описание страницы"> 
		<meta name="keywords" content="Ключевые слова"> 
	</head>
<body>
<!--конец меню-->
	<div id="main">
		<!--меню сайта-->
		<div id="mainmenu">

		</div>
		<!--меню сайта-->
		<div id="left"> <!--левое меню-->
			<p class="b_menu">Новинки</p>

		</div><!--конец левое меню-->
		<div id="right"><!--правое меню-->
		<p class="b_menu">Каталог</p>

		</div><!--конец правое меню-->
		<div id="statistic"> <!--левое меню статистика-->
			<p class="b_menu">Статистика</p>

		</div><!--конец левого меню статистика-->
		<div id="cont">
		<p>
		</p>		
	</div>
	<div id="footer">подвал сайта</div>
	</div>
</body>
</html>

Link to comment
Share on other sites
  • 0
DStereo Explorer

DStereo

Posted
Posted

Вставил таблицу в центральный div


<div id="cont">
    <p>Test</p>
    <table>
    <tr>
        <td>Test</td>
	<td>Test</td>
	<td>Test</td>
	<td>Test</td>
    </tr>
    </table>
</div>

пока ничего никуда не уехало.

Возможно есть какие-то особые условия? Браузер в котором таблица слазит, стили для таблицы какие-то определенные?

Link to comment
Share on other sites
  • 0
GArthurK Explorer

GArthurK

Posted
  • Author
Posted

Вставил таблицу в центральный div


<div id="cont">
    <p>Test</p>
    <table>
    <tr>
        <td>Test</td>
	<td>Test</td>
	<td>Test</td>
	<td>Test</td>
    </tr>
    </table>
</div>

пока ничего никуда не уехало.

Возможно есть какие-то особые условия? Браузер в котором таблица слазит, стили для таблицы какие-то определенные?

Вот так то ничего не едет. Вставляешь абзац, а потом таблицу из 25 строк она от абзаца уходит вниз.

Link to comment
Share on other sites
  • 0
DStereo Explorer

DStereo

Posted
Posted

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

Link to comment
Share on other sites
  • 0
GArthurK Explorer

GArthurK

Posted
  • Author
Posted

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


<p>Здесь абзац</p>
<table border="0">
<caption><strong>Таблица пошла вниз на ровне со статистикой</strong></caption>
<tr><td>текст</td><td valign='top'><p>Абзац</p></td></tr>
<tr><td>текст</td><td valign='top'><p>Абзац</p></td></tr>
<tr><td>текст</td><td valign='top'><p>Абзац</p></td></tr>
<tr><td>текст</td><td valign='top'><p>Абзац</p></td></tr>
<tr><td>текст</td><td valign='top'><p>Абзац</p></td></tr>
</table>

ничего спец. крутого в тексте нет. Вся таблица имеет width соответстующую div="cont" правильно же?
вот строчек если в таблице 2 или 3 то все ок. Но у меня таблица формируется из базы данных и никаких супер больших полей нет. 
маленькие абзацы - соответственно маленькие ячейки в таблице. Как тут быть?

Link to comment
Share on other sites
  • 0
DStereo Explorer

DStereo

Posted
Posted (edited)

Я смог воспроизвести вашу проблему только в ie8, но тем не менее предлагаю вариант разметки, чтобы ничего никуда не лезло во всех браузерах.


<div id="main">
    <div class="main-wrapper">
        <div id="cont">
            <p>Ассоциация изоморфна времени. Исчисление предикатов, конечно, дискредитирует принцип восприятия, однако Зигварт считал критерием истинности необходимость и общезначимость, для которых нет никакой опоры в объективном мире. Закон внешнего мира, по определению, ментально индуцирует из ряда вон выходящий закон внешнего мира, изменяя привычную реальность. Отношение к современности реально подрывает напряженный конфликт, учитывая опасность, которую представляли собой писания Дюринга для не окрепшего еще немецкого рабочего движения.</p>
            <table>
                <caption><strong>Таблица пошла вниз на ровне со статистикой</strong></caption>
		<tr><td>текст</td><td valign='top'><p>Абзац Абзац  Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац</p></td></tr>
		<tr><td>текст</td><td valign='top'><p>Абзац Абзац  Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац</p></td></tr>
		<tr><td>текст</td><td valign='top'><p>Абзац Абзац  Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац</p></td></tr>
		<tr><td>текст</td><td valign='top'><p>Абзац Абзац  Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац</p></td></tr>
		<tr><td>текст</td><td valign='top'><p>Абзац Абзац  Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац</p></td></tr>
		<tr><td>текст</td><td valign='top'><p>Абзац Абзац  Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац</p></td></tr>
		<tr><td>текст</td><td valign='top'><p>Абзац Абзац  Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац</p></td></tr>
		<tr><td>текст</td><td valign='top'><p>Абзац Абзац  Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац</p></td></tr>
		<tr><td>текст</td><td valign='top'><p>Абзац Абзац  Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац</p></td></tr>
		<tr><td>текст</td><td valign='top'><p>Абзац Абзац  Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац</p></td></tr>
		<tr><td>текст</td><td valign='top'><p>Абзац Абзац  Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац</p></td></tr>
		<tr><td>текст</td><td valign='top'><p>Абзац Абзац  Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац</p></td></tr>
		<tr><td>текст</td><td valign='top'><p>Абзац Абзац  Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац</p></td></tr>
		<tr><td>текст</td><td valign='top'><p>Абзац Абзац  Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац</p></td></tr>
		<tr><td>текст</td><td valign='top'><p>Абзац Абзац  Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац</p></td></tr>
		<tr><td>текст</td><td valign='top'><p>Абзац Абзац  Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац</p></td></tr>
		<tr><td>текст</td><td valign='top'><p>Абзац Абзац  Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац</p></td></tr>
		<tr><td>текст</td><td valign='top'><p>Абзац Абзац  Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац</p></td></tr>
		<tr><td>текст</td><td valign='top'><p>Абзац Абзац  Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац</p></td></tr>
		<tr><td>текст</td><td valign='top'><p>Абзац Абзац  Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац</p></td></tr>
		<tr><td>текст</td><td valign='top'><p>Абзац Абзац  Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац</p></td></tr>
		<tr><td>текст</td><td valign='top'><p>Абзац Абзац  Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац</p></td></tr>
		<tr><td>текст</td><td valign='top'><p>Абзац Абзац  Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац</p></td></tr>
	    </table>
        </div>
    </div>
    <div class="col-left">
        <div id="left">
	    <p class="b_menu">Новинки</p>
	</div>
        <div id="statistic">
	    <p class="b_menu">Статистика</p>
	</div>
    </div>
    <div id="right">
	<p class="b_menu">Каталог</p>
    </div>
</div>

Соответственно css для новых элементов и немного измененные некоторые стили для уже существующих.


.main-wrapper{float:left;width:100%}
.left-col{float:left;width:240px;height:600px;margin-left:-100%}
#right{float:left;margin-left:-240px}

Для #left и #statistic можно удалить свойства float:left так как они находятся в блоке .col-left, которому уже присвоено float:left.

Edited by DStereo
Link to comment
Share on other sites
  • 0
GArthurK Explorer

GArthurK

Posted
  • Author
Posted

Я смог воспроизвести вашу проблему только в ie8, но тем не менее предлагаю вариант разметки, чтобы ничего никуда не лезло во всех браузерах.


<div id="main">
    <div class="main-wrapper">
        <div id="cont">
            <p>Ассоциация изоморфна времени. Исчисление предикатов, конечно, дискредитирует принцип восприятия, однако Зигварт считал критерием истинности необходимость и общезначимость, для которых нет никакой опоры в объективном мире. Закон внешнего мира, по определению, ментально индуцирует из ряда вон выходящий закон внешнего мира, изменяя привычную реальность. Отношение к современности реально подрывает напряженный конфликт, учитывая опасность, которую представляли собой писания Дюринга для не окрепшего еще немецкого рабочего движения.</p>
            <table>
                <caption><strong>Таблица пошла вниз на ровне со статистикой</strong></caption>
		<tr><td>текст</td><td valign='top'><p>Абзац Абзац  Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац</p></td></tr>
		<tr><td>текст</td><td valign='top'><p>Абзац Абзац  Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац</p></td></tr>
		<tr><td>текст</td><td valign='top'><p>Абзац Абзац  Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац</p></td></tr>
		<tr><td>текст</td><td valign='top'><p>Абзац Абзац  Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац</p></td></tr>
		<tr><td>текст</td><td valign='top'><p>Абзац Абзац  Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац</p></td></tr>
		<tr><td>текст</td><td valign='top'><p>Абзац Абзац  Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац</p></td></tr>
		<tr><td>текст</td><td valign='top'><p>Абзац Абзац  Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац</p></td></tr>
		<tr><td>текст</td><td valign='top'><p>Абзац Абзац  Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац</p></td></tr>
		<tr><td>текст</td><td valign='top'><p>Абзац Абзац  Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац</p></td></tr>
		<tr><td>текст</td><td valign='top'><p>Абзац Абзац  Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац</p></td></tr>
		<tr><td>текст</td><td valign='top'><p>Абзац Абзац  Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац</p></td></tr>
		<tr><td>текст</td><td valign='top'><p>Абзац Абзац  Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац</p></td></tr>
		<tr><td>текст</td><td valign='top'><p>Абзац Абзац  Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац</p></td></tr>
		<tr><td>текст</td><td valign='top'><p>Абзац Абзац  Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац</p></td></tr>
		<tr><td>текст</td><td valign='top'><p>Абзац Абзац  Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац</p></td></tr>
		<tr><td>текст</td><td valign='top'><p>Абзац Абзац  Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац</p></td></tr>
		<tr><td>текст</td><td valign='top'><p>Абзац Абзац  Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац</p></td></tr>
		<tr><td>текст</td><td valign='top'><p>Абзац Абзац  Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац</p></td></tr>
		<tr><td>текст</td><td valign='top'><p>Абзац Абзац  Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац</p></td></tr>
		<tr><td>текст</td><td valign='top'><p>Абзац Абзац  Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац</p></td></tr>
		<tr><td>текст</td><td valign='top'><p>Абзац Абзац  Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац</p></td></tr>
		<tr><td>текст</td><td valign='top'><p>Абзац Абзац  Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац</p></td></tr>
		<tr><td>текст</td><td valign='top'><p>Абзац Абзац  Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац Абзац</p></td></tr>
	    </table>
        </div>
    </div>
    <div class="col-left">
        <div id="left">
	    <p class="b_menu">Новинки</p>
	</div>
        <div id="statistic">
	    <p class="b_menu">Статистика</p>
	</div>
    </div>
    <div id="right">
	<p class="b_menu">Каталог</p>
    </div>
</div>

Соответственно css для новых элементов и немного измененные некоторые стили для уже существующих.


.main-wrapper{float:left;width:100%}
.left-col{float:left;width:240px;height:600px;margin-left:-100%}
#right{float:left;margin-left:-240px}

Для #left и #statistic можно удалить свойства float:left так как они находятся в блоке .col-left, которому уже присвоено float:left.

Спасибо. Разобрался. В левом блоке вставил блоки: левый и статистику.

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