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

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • 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