Неклассическая верстка divами

[provoloka]

Привет всем. вот какой вопрос. Я много лето назад сделал сайт в таблицах ("дизайн", извините за выражение, - на картинке ссверху).

Возникла необходимость перевести в дивы. в них я ни то, что не силен, просто - слабак. не справляюсь. постоянно что-то куда-то съезжает, фоновое изображение тупит, верхнее меню не слипается, футер при незаполненности содержанием поскакивает. Даже и не знаю, как сформулировать. Но руки опускаются.

что делать? помогите, пожалуста.

п.с. не могу приложить адрес сайта, т.к. не захостен.

п.п.с. да, сорри, забыл внести в топик, что тема - не найденное прекрасное решение, а вопрос, просьюа о помощи.

Edited October 22, 2010 by provoloka

[psywalker]

Начало положено? http://psywalker.ru/Portfolio/Business-group/main-page.html

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

[provoloka]

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

чуть-чуть шарю. но пока - на уровне подогнать чужой код под свои нужды, самому с нуля - к сожаленю пока недо. страница http://psywalker.ru/Portfolio/Business-group/main-page.html - красивая. но все равно - не о том.

я подумал - наверное имеет смысл двигаться с самого начала.

как сделать так, чтобы картинки в верхнем (горизонтальном) меню прилипали друг у другу. у меня пока что появляется появляется разрыв, который marginaми не лечится.

[psywalker]

родителю релатив, картинке абсолют и координаты.

[sigma77]

provoloka,

Если код каждой картинки пишешь с новой строки, то браузер автоматически проставляет пробелы в конце каждой строки. Вариант - писать всё в одну строчку, вставлять комментарий (начало на одной строке, окончание на другой), переверстать другим способом.

А вообще более конкретный совет можно дать только увидев страницу. Может быть там вообще картинки в бэкграунд запихать нужно.

Да, и почему пример psywalker'а не подошел? Вроде бы как раз то, что надо.

[psywalker]

Да, и почему пример psywalker'а не подошел? Вроде бы как раз то, что надо.

Боюсь, что он просто не сможет в нём разобраться. Ему надо всё сначала учить.

[provoloka]

помог способ с неперносом картинок по строкам, а - в одну линию. странно, но - работает.

Боюсь, что он просто не сможет в нём разобраться. - именно так (ну, процентов на 67 - не понятно). в частности - я вообще не понял почему при изменении размера полей на 50 (в оригинальном варианте - 69px) - ну плюс, естественно, всех остальных шестьдесятдевяток, все встает ровно, кроме левого блока контента... почему????

Ему надо всё сначала учить.

именно так. причем, вдобавок, хочется (что важно) и очень интересно (что не менее важно).

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

[psywalker]

На форуме недавно проскакивала тема с перечнем нужной литературы. Поищи в поиске.

[provoloka]

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

Обращаюсь к тем, у кого опыта побольше. Подскажите, есть ли тут какие-то ошибки, фигня какая-нибудь, которую я не вижу.

может что-то лишнее, может о чем-то серьезном забыл???

Спасибо.

стили

html,body,
div,dl,dt,dd,ul,ol,li,form,table,tr,td,
h1,h2,h3,h4,h5,h6,pre,p,span,b,i,a,
input,textarea,fieldset { margin: 0; padding: 0; outline: none;}

html {
	height: 100%;
	}

body {
	height: 100%;
	background: url(bg.gif);
	min-width: 920px;
	position: relative;
	}

div.head {
	float: right;
	padding-top: 0px;
	padding-right: 0px;
	}

#sidebar {
	float: left;
	min-width: 60px;
    width: 20%;
    padding: 0px;
    margin: 0px 0px 0px 0px;
	height: 100%;
	}

#content {
	margin: 0px 5px 100px 25%;
	padding: 5px;
	}

div.space {
	padding-top: 80px;
	width: 100px;
	}

div.wrap {
	padding: 0 50px;
	background: url(bgleft.gif) left repeat-y;
	position: relative;
	min-height: 100%;
	overflow: hidden;
	}

div.wrap div.wrap_shadow {
	position: absolute;
	width: 50px;
	top: 0;
	right: 0;
	bottom: 0;
	background: url(bgright.gif) right repeat-y;
	}

div.wrap div.wrap_shadow-left{
	width: 50px;
	position: absolute;
	top: 0px;
	left: 0px;
	background: url(bglefttop.gif) left top no-repeat;
	}

div.wrap div.wrap_shadow-right{
	width: 50px;
	height: 426px;
	position: absolute;
	top: 0px;
	right: 0px;
	background: url(bgrighttop.gif) right top no-repeat;
	}

.leftmenu {
	line-height: 1px;
	}

div#foot {
	position: absolute;
	height: 50px;
	right: 50px;
	bottom: 0;
	float: right;
	}
.noborder {
	border: 0px;
}

они же для ie6

HTML DIV.wrap {
	OVERFLOW: visible;  HEIGHT: 100%
}

HTML BODY {
	background: url(bgright.gif) repeat-y 100% 0 #b7946a;
	margin: 0;
	height: 100%;
}

HTML div.center {
	background: url(bg.gif);
	height: 100%;
}

HTML DIV.wrap DIV.wrap_shadow-right {
	RIGHT: -1px
}

HTML DIV#head {
	white-space: nowrap
}

HTML #sidebar {
	width: 220px;
}

HTML #content {
	margin: 0px 5px 60px 250px;
	padding: 5px;
}

HTML div#foot {
	right: 49px;
}
HTML .noborder {
	border: 0px;
}

html код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
        <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
		<link type="text/css" href="style/styles.css" rel="stylesheet" media="all" />
		<title>test site</title>
		<!--[if IE 6]><link type="text/css" href="style/ie.css" rel="stylesheet" media="all" /><![endif]-->
	</head>
<body>

<!-- wrapper -->
    <div class="wrap">
        <div class="wrap_shadow-left">
        <img src="menu/logot.gif" class="noborder" width="50" height="230" alt="leftlogo" />
        </div>

        <div class="wrap_shadow">
            <div class="wrap_shadow-right">
            </div>
        </div>

<!-- center -->
    <div class="center">

<!-- header -->

        <div class="head">
        <a href=""><img src="menu/link1.gif" class="noborder" alt="menu link1" width="91" height="48" /></a><a href=""><img src="menu/link2.gif" class="noborder" alt="menu link2" width="71" height="48" /></a><a href=""><img src="menu/link3.gif" class="noborder" alt="menu link3" width="131" height="48" /></a><a href=""><img src="menu/link4.gif" class="noborder" alt="menu link4" width="91" height="48" /></a>    </div>

    <div class="space"></div>
<!-- out header -->

<!-- content -->
    <div id="sidebar">
    <p class="leftmenu">

<a href=""><img class="noborder" src='menu/sidebar1.gif'
onmouseover="this.src='menu/sidebar1a.gif'" alt="sidebar1" width="180" height="48"
onmouseout="this.src='menu/sidebar1.gif'" /></a><br />
<a href=""><img class="noborder" src='menu/sidebar2.gif'  alt="sidebar2"
onmouseover="this.src='menu/sidebar2a.gif'"  width="180" height="38"
onmouseout="this.src='menu/sidebar2.gif'" /></a><br />
<a href=""><img class="noborder" src='menu/sidebar3.gif'  alt="sidebar2"
onmouseover="this.src='menu/sidebar3a.gif'"  width="180" height="28"
onmouseout="this.src='menu/sidebar3.gif'" /></a><br />
<a href=""><img class="noborder" src='menu/sidebar4.gif'  alt="sidebar2"
onmouseover="this.src='menu/sidebar4a.gif'"  width="180" height="44"
onmouseout="this.src='menu/sidebar4.gif'" /></a><br />
<a href=""><img class="noborder" src='menu/sidebar5.gif'  alt="sidebar2"
onmouseover="this.src='menu/sidebar5a.gif'"  width="180" height="41"
onmouseout="this.src='menu/sidebar5.gif'" /></a><br />
    </p>
    </div>

    <div id="content">
    <h1>Notes and Potential Issues</h1>

    <p>The following notes and warnings highlight missing or conflicting information which caused the validator to perform some guesswork prior to validation, or other things affecting the output below. If the guess or fallback is incorrect, it could make validation results entirely incoherent. It is highly recommended to check these potential issues, and, if necessary, fix them and re-validate the document.

 Using Direct Input mode: UTF-8 character encoding assumed

Unlike the “by URI” and “by File Upload” modes, the “Direct Input” mode of the validator provides validated content in the form of characters pasted or typed in the validator's form field. This will automatically make the data UTF-8, and therefore the validator does not need to determine the character encoding of your document, and will ignore any charset information specified.

If you notice a discrepancy in detected character encoding between the “Direct Input” mode and other validator modes, this is likely to be the reason. It is neither a bug in the validator, nor in your document.
Congratulations

The uploaded document was successfully checked as XHTML 1.0 Strict. This means that the resource in question identified itself as "XHTML 1.0 Strict" and that we successfully performed a formal validation using an SGML, HTML5 and/or XML Parser(s) (depending on the markup language used).
"valid" Icon(s) on your Web page

To show your readers that you have taken the care to create an interoperable Web page, you may display this icon on any page that validates. Here is the HTML you could use to add this icon to your Web page:  </p>

  <p>A full list of icons, with links to alternate formats and colors, is available: If you like, you can download a copy of the icons to keep in your local web directory, and change the HTML fragment above to reference your local image rather than the one on this server.
Validating CSS Style Sheets

If you use CSS in your document, you can check it using the W3C CSS Validation Service.</p>

  </div>

<!-- footer -->
    <div id="foot"><a href=""><img src="menu/footimg.gif" class="noborder" width="292" height="50" alt="foot img" /></a></div>
<!-- out footer -->
    </div>
    </div>
<!-- out center / out wrapper-->

</body>
</html>

п.с. спасибо psywalkeру за код полей.

Edited October 25, 2010 by provoloka