Jump to content
  • 0

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


provoloka
 Share

Question

1909632.jpg

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

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

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

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

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

Edited by provoloka
Link to comment
Share on other sites

8 answers to this question

Recommended Posts

  • 0

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

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

Link to comment
Share on other sites

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

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

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

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

Link to comment
Share on other sites

  • 0

provoloka,

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

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

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

Link to comment
Share on other sites

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

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

Link to comment
Share on other sites

  • 0

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

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

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

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

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

Link to comment
Share on other sites

  • 0

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

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

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

Спасибо.

стили

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 by provoloka
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

×
×
  • 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