div в td и увеличение фона

reteiktor · September 10, 2009

наткнулся на пару проблем, которые, в отличии от других, решить не смог. кто может - подскажите, как исправить. спасибо

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

причина проблемы и сама проблема в том, что намучавшись с тем, что правый блок постоянно, при изменении размера страницы спускался вниз я создал фиксированный центрующий блок и поместил другие два в него. но теперь я обнаружил, что при увеличении масштаба страницы, блок контента все равно спускается!

решил считерить и поместил левый и правый в ячейки таблицы - теперь уж они никуда не денутся , но теперь возникла новая неприятность: поэкспериментировав с высотами блоков, увидел, что они из-за ячеек таблицы стали "лепиться" к низу, а не к верху центрующего, как все остальные благовоспитанные div`ы.

так вот... какой параметр в css может это исправить. если я не очень понятно объяснил (писал ночью), попытаюсь объяснить завтра.

второй вопрос опять-таки связан с изменением масштаба страницы. а заключается он в том, что при увеличении масштаба у меня меняется\увеличивается фон body. фон незамысловатый, скорее сделан для удобства создания каркаса будущего сайта - просто картинка 3на3 с тремя темными пикселями по диагонали. картинка повторяется и образует на странице сайте диагональные линии в одну сторону сквозь весь экран. из-за такого фона глаза ломаются, когда масштаб увеличить, так как с увеличением он изменяется очень не адекватно и неприятно. если б я узнал как решить эту проблему, то может и оставил бы его (вроде фон есть, но вроде и не мешает ).

а да!. и еще. в ie шрифт выглядит толще чем в ff. предполагаю это происходит из-за того, что браузер ie его сглаживает и округляет. возможно ли это исправить?

Edited September 10, 2009 by reteiktor

mishka · September 10, 2009

td{vertical-align:top;} - вертикальное выравнивание по верху.

Я так понял что вы там наворотили чудеса в решете. Подозреваю что вам ненадо никаких таблиц. Вы лучше чем так много описывать проблему - выложите код.

Searcher · September 11, 2009

не мудрите, все уже намудрено до вас:

http://layouts.ironmyers.com/

http://www.dynamicdrive.com/style/layouts/category/C10/

http://www.code-sucks.com/css%20layouts/faux-css-layouts/

http://tjkdesign.com/articles/one_html_mar...css_layouts.asp

http://blog.html.it/layoutgala/

а вот вообще генератор верстки:

http://csstemplater.com/

никаких таблиц не надо!

reteiktor · September 11, 2009

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="./style.css">
<link rel="shortcut icon" href="./favicon.ico">
</head>
<body>

<div id="center">
<table>
<tr>
<td>
	<div id="left">
	<div id="menu">
	<ul>
		<li><a href="index.html" class="active">Lorem ipsum dolor sit amet</a></li>
		<li><a href="index1.html">Lorem ipsum dolor sit amet</a></li>
		<li><a href="index2.html">Lorem ipsum dolor sit amet</a></li>
		<li><a href="index3.html">Lorem ipsum dolor sit amet</a></li>
		<li><a href="index4.html">Lorem ipsum dolor sit amet</a></li>
		<li><a href="index5.html">Lorem ipsum dolor sit amet</a></li>
		<li><a href="index6.html">Lorem ipsum dolor sit amet</a></li>
		<li><a href="index7.html">Lorem ipsum dolor sit amet</a></li>
		<li><a href="index8.html">Lorem ipsum dolor sit amet</a></li>
		<li><a href="index9.html">Lorem ipsum dolor sit amet</a></li>
		<li><a href="index10.html">Lorem ipsum dolor sit amet</a></li>
		<li><a href="index11.html">Lorem ipsum dolor sit amet</a></li>
	</ul>
	</div>
	</div>
</td>
<td>	
	<div id="right">
	<div id="content">
	<p>
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
	</p>
	</div>
	</div>
</td>
</tr>	
</table>
</div>

</body>
</html>

@import "./reset.css";

BODY {
background-color: #555;
	background-image: url(./bbg.gif);
	overflow: auto;
	font-size: 12pt;
}
P {
	margin: 10px;
}
P:first-letter {
	margin-left: 15px;
}
td{}
#center {
left:50%;
margin-left:-350px;
margin-top:25px;
position:absolute;
width:700px;
background:#EEE;
padding:25px;
border:3px solid #FFF;
}
#right {
background:#AAA;
min-height:500px;
float:left;
width:500px;
}
#content {
font-family:Times New Roman;
}
#left {
background:#888;
min-height:490px;
float:left;
margin-right:50px;
padding-top:10px;
width:150px;
}
#menu {
font-family:Verdana;
font-size:0.8em;
}
#menu a:link, a:visited, a:active, a:hover {
color:#EEE;
display:block;
text-decoration:none;
padding:4px;
}
#menu a:hover, #menu a.active {
color:#333;
background:#EEE;
}

вот фон. остались проблемы его масштабирования вместе с масштабированием страницы. т.е собственно нужно сделать, чтоб он НЕ масштабирования. и различие толщины шрифтов в ie и ff. если подскажите как обойтись без таблиц, буду совсем уж рад)

gesandte · September 12, 2009

вообще не понял что ты хотел. Вот вариарт без таблицы:

STYLE

body {

background: #555 url(./bbg.gif);

padding: 0px;

margin: 0px;

}

.clear {

clear: both;

}

#center {

background: #EEE;

border: 3px solid #FFF;

width: 1000px;

margin: 0 auto;

margin-top: 25px;

}

#right {

background: #AAA;

width: 75%;

float: left;

}

#right .content {

font: normal 0.8em "Times New Roman", Arial, Sans-serif;

padding: 10px;

}

#left {

background: #888;

width: 25%;

float: left;

}

#left .menu {

font: normal 0.8em Arial, Verdana, Sans-serif;

}

#left .menu a:link, a:visited{

color: #EEE;

text-decoration: none;

padding: 0px;

}

#left .menu a:hover, a.active {

color: #333;

background: #EEE;

}

HTML

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

<html>

<head>

</head>

<body>

<ul>

<li><a href="index.html">Lorem ipsum dolor sit amet</a></li>

<li><a href="index1.html">Lorem ipsum dolor sit amet</a></li>

<li><a href="index2.html">Lorem ipsum dolor sit amet</a></li>

<li><a href="index3.html">Lorem ipsum dolor sit amet</a></li>

<li><a href="index4.html">Lorem ipsum dolor sit amet</a></li>

<li><a href="index5.html">Lorem ipsum dolor sit amet</a></li>

<li><a href="index6.html">Lorem ipsum dolor sit amet</a></li>

<li><a href="index7.html">Lorem ipsum dolor sit amet</a></li>

<li><a href="index8.html">Lorem ipsum dolor sit amet</a></li>

<li><a href="index9.html">Lorem ipsum dolor sit amet</a></li>

<li><a href="index10.html">Lorem ipsum dolor sit amet</a></li>

<li><a href="index11.html">Lorem ipsum dolor sit amet</a></li>

</ul>

</div>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

</div>

</div>

</body>

</html>

reteiktor · September 12, 2009

а чем overflow: auto для контейнера хуже .clear {clear: both;} ?

psywalker · September 12, 2009

а чем overflow: auto для контейнера хуже .clear {clear: both;} ?

Ответ: Второе обычно применяют неопытные :rolleyes:

gesandte · September 12, 2009

psywalker, ох ты мля какой крутой и опытный

Sign In

div в td и увеличение фона

Question

reteiktor

Link to comment

Share on other sites

7 answers to this question

Recommended Posts

mishka

Link to comment

Share on other sites

Searcher

Link to comment

Share on other sites

reteiktor

Link to comment

Share on other sites

gesandte

Link to comment

Share on other sites

reteiktor

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

gesandte

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information